From c4e2480212f68de01a81485b1dbbe0970a406dfb Mon Sep 17 00:00:00 2001 From: RossAscends <124905043+RossAscends@users.noreply.github.com> Date: Sat, 10 Jun 2023 23:21:23 +0900 Subject: [PATCH] fix options menu hide/show & iOS blur --- public/script.js | 59 +++++++------- public/scripts/extensions.js | 42 +++++++--- .../extensions/floating-prompt/index.js | 2 +- public/style.css | 80 +++++-------------- 4 files changed, 83 insertions(+), 100 deletions(-) diff --git a/public/script.js b/public/script.js index 50a3e6abc..6b2dab25e 100644 --- a/public/script.js +++ b/public/script.js @@ -6216,42 +6216,45 @@ $(document).ready(function () { } }); - let hideOptionsTimeout; + let isAnimating = false; + const optionsDiv = $("#options"); + const optionsButtonDiv = $("#options_button"); - function showOptions() { + function toggleOptions() { showBookmarksButtons(); + if ((isAnimating) || + (optionsDiv.is(":visible") && optionsDiv.is(":hover"))) { + return; + } + isAnimating = true; optionsPopper.update(); - const optionsDiv = $("#options"); - const optionsButtonDiv = $("#options_button"); - const hideOptions = () => { - if (!optionsDiv.is(':hover') && !optionsButtonDiv.is(':hover')) { - optionsDiv.hide(200); - } - }; - - optionsDiv.on('mouseenter touchstart', () => clearTimeout(hideOptionsTimeout)); - optionsButtonDiv.on('mouseenter touchstart', () => { - clearTimeout(hideOptionsTimeout); - hideOptionsTimeout = setTimeout(() => { - optionsDiv.show(200); - }, 200); - }); - optionsDiv.on('mouseleave', () => hideOptionsTimeout = setTimeout(hideOptions, 500)); - optionsButtonDiv.on('mouseleave', () => hideOptionsTimeout = setTimeout(hideOptions, 500)); - //optionsDiv.show(200); + optionsDiv.toggle(200, () => isAnimating = false); } - $("#options_button").on('mouseenter click touchstart', showOptions); + //show/hide options on hoverstate/click + optionsButtonDiv.on('mouseenter click', () => { + if (optionsDiv.is(':visible')) return; + setTimeout(() => toggleOptions(), 200); + }); + optionsButtonDiv.on('mouseleave', () => { + if (optionsDiv.is(':hidden')) return; + setTimeout(() => toggleOptions(), 200); + }); + + optionsDiv.on('mouseleave', () => { + setTimeout(() => toggleOptions(), 200); + }) + + //close options menu if open and user clicked outside it and button $(document).on('click touchend', (e) => { const target = e.target; - const optionsDiv = $("#options"); - const optionsButtonDiv = $("#options_button"); - if (!$(target).closest(optionsDiv).length && !$(target).closest(optionsButtonDiv).length && - target !== optionsDiv[0] && target !== optionsButtonDiv[0] && + if (![optionsDiv[0], optionsButtonDiv[0]].includes(target) && !optionsDiv.is(':hover') && - !optionsButtonDiv.is(':hover')) { - optionsDiv.hide(200); + !optionsButtonDiv.is(':hover') && + !isAnimating && + optionsDiv.is(":visible")) { + setTimeout(() => toggleOptions(), 200); } }); @@ -6542,7 +6545,7 @@ $(document).ready(function () { if (this_chid !== undefined || selected_group) { // Previously system messages we're allowed to be edited /*const message = $(this).closest(".mes"); - + if (message.data("isSystem")) { return; }*/ diff --git a/public/scripts/extensions.js b/public/scripts/extensions.js index fa823b8f6..0c44c9048 100644 --- a/public/scripts/extensions.js +++ b/public/scripts/extensions.js @@ -82,8 +82,8 @@ async function doExtrasFetch(endpoint, args) { args.headers = {} } Object.assign(args.headers, { - 'Authorization': `Bearer ${extension_settings.apiKey}`, - 'Bypass-Tunnel-Reminder': 'bypass' + 'Authorization': `Bearer ${extension_settings.apiKey}`, + 'Bypass-Tunnel-Reminder': 'bypass' }); const response = await fetch(endpoint, args); @@ -220,7 +220,7 @@ function autoConnectInputHandler() { function addExtensionsButtonAndMenu() { const buttonHTML = `
`; - const extensionsMenuHTML = `
`; + const extensionsMenuHTML = ``; $(document.body).append(extensionsMenuHTML); @@ -228,26 +228,42 @@ function addExtensionsButtonAndMenu() { const button = $('#extensionsMenuButton'); const dropdown = $('#extensionsMenu'); - dropdown.hide(); + //dropdown.hide(); let popper = Popper.createPopper(button.get(0), dropdown.get(0), { placement: 'top-end', }); - $(document).on('click touchend', function (e) { - const target = $(e.target); - if (target.is(dropdown)) return; - if (target.is(button) && !dropdown.is(":visible")) { - e.preventDefault(); + $(button).on('click', function () { + popper.update() + dropdown.toggle(200); + }); - dropdown.show(200); - popper.update(); - } else { - dropdown.hide(200); + $("html").on('touchstart mousedown', function (e) { + let clickTarget = $(e.target); + if (dropdown.is(':visible') + && clickTarget.closest(button).length == 0 + && clickTarget.closest(dropdown).length == 0) { + $(dropdown).hide(200); } }); } +/* $(document).on('click', function (e) { + const target = $(e.target); + if (target.is(dropdown)) return; + if (target.is(button) && dropdown.is(':hidden')) { + dropdown.toggle(200); + popper.update(); + } + if (target !== dropdown && + target !== button && + dropdown.is(":visible")) { + dropdown.hide(200); + } + }); +} */ + async function connectToApi(baseUrl) { if (!baseUrl) { return; diff --git a/public/scripts/extensions/floating-prompt/index.js b/public/scripts/extensions/floating-prompt/index.js index 29debda8c..5d738c271 100644 --- a/public/scripts/extensions/floating-prompt/index.js +++ b/public/scripts/extensions/floating-prompt/index.js @@ -237,7 +237,7 @@ function onANMenuItemClick() { Author's Note `; - $('.options-content').prepend(ANButtonHtml); + $('#options .options-content').prepend(ANButtonHtml); $('#movingDivs').append(settingsHtml); $('#extension_floating_prompt').on('input', onExtensionFloatingPromptInput); $('#extension_floating_interval').on('input', onExtensionFloatingIntervalInput); diff --git a/public/style.css b/public/style.css index c9e728e45..1ad03f3a4 100644 --- a/public/style.css +++ b/public/style.css @@ -291,6 +291,14 @@ code { line-height: var(--mainFontSize); } + +hr { + background-image: linear-gradient(90deg, var(--transparent), var(--white30a), var(--transparent)); + margin: 5px 0; + height: 1px; + border: 0; +} + #bg1, #bg_custom { background-repeat: no-repeat; @@ -506,28 +514,31 @@ code { font-weight: 400; } -#options { +#options, +#extensionsMenu { display: flex; z-index: 100; + background-color: var(--SmartThemeBlurTintColor); + -webkit-backdrop-filter: blur(var(--SmartThemeBlurStrength)); backdrop-filter: blur(var(--SmartThemeBlurStrength)); + box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); + flex-flow: column; } -.options-content { +.options-content, +.list-group { overflow: hidden; display: block; - background-color: var(--SmartThemeBlurTintColor); border: 1px solid var(--white30a); border-radius: 10px; - box-shadow: 0 0 5px black; - text-shadow: 0px 0px calc(var(--shadowWidth) * 1px) var(--SmartThemeShadowColor); - backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)*2)); z-index: 2000; - /* margin-bottom: 0px;*/ } -.options-content i { +.options-content i, +.extensionsMenuExtensionButton { height: 20px; width: 20px; + font-size: var(--mainFontSize); display: flex; align-items: center; justify-content: center; @@ -541,18 +552,7 @@ code { #extensionsMenuButton { order: 100; - width: 40px; - height: 40px; - margin: 0; padding: 1px; - outline: none; - border: none; - cursor: pointer; - transition: 0.3s; - opacity: 0.7; - display: flex; - align-items: center; - justify-content: center; } #extensionsMenuButton:hover { @@ -560,29 +560,9 @@ code { filter: brightness(1.2); } -#extensionsMenu { - z-index: 100; - backdrop-filter: blur(var(--SmartThemeBlurStrength)); - /* padding: 10px; */ - display: flex; -} - -.extensionsMenuExtensionButton { - font-size: 20px; - height: 20px; - width: 20px; - text-align: center; -} - -hr { - background-image: linear-gradient(90deg, var(--transparent), var(--white30a), var(--transparent)); - margin: 5px 0; - height: 1px; - border: 0; -} - .options-content a, -#extensionsMenu>div { +#extensionsMenu>div, +.list-group>div { color: var(--SmartThemeBodyColor); padding: 5px 5px; padding-bottom: 5px; @@ -609,18 +589,10 @@ hr { min-width: 20px; } -.options-content img { - width: calc(var(--mainFontSize) + .5rem); - margin-right: 5px; - height: calc(var(--mainFontSize) + .25rem); - vertical-align: middle; -} - .options-content span { vertical-align: middle; } - .auto_hide { content-visibility: auto; } @@ -3419,14 +3391,6 @@ a { text-shadow: 0px 0px calc(var(--shadowWidth) * 1px) var(--SmartThemeShadowColor); } -.list-group-item { - color: var(--SmartThemeBodyColor); - padding: 5px 7px; - box-sizing: border-box; - user-select: none; - cursor: pointer; -} - /* ############################################################# */ /* Right nav panel and nav-toggle */ /* ############################################################# */ @@ -4606,4 +4570,4 @@ body.waifuMode #avatar_zoom_popup { overflow-y: auto; overflow-x: hidden; } -} +} \ No newline at end of file