fix options menu hide/show & iOS blur

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);
         }
     });
 

public/scripts/extensions.js

@@ -220,7 +220,7 @@ function autoConnectInputHandler() {
 function addExtensionsButtonAndMenu() {
     const buttonHTML =
         `<div id="extensionsMenuButton" class="fa-solid fa-magic-wand-sparkles" title="Extras Extensions" /></div>`;
-    const extensionsMenuHTML = `<div id="extensionsMenu" class="list-group"></div>`;
+    const extensionsMenuHTML = `<div id="extensionsMenu" class="options-content" style="display: none;"></div>`;
 
     $(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;

public/scripts/extensions/floating-prompt/index.js

@@ -237,7 +237,7 @@ function onANMenuItemClick() {
            <span data-i18n="Author's Note">Author's Note</span>
         </a>
     `;
-        $('.options-content').prepend(ANButtonHtml);
+        $('#options .options-content').prepend(ANButtonHtml);
         $('#movingDivs').append(settingsHtml);
         $('#extension_floating_prompt').on('input', onExtensionFloatingPromptInput);
         $('#extension_floating_interval').on('input', onExtensionFloatingIntervalInput);

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 */
 /* ############################################################# */