Pure CSS drawer animations

8c384a03bbdf262cd21920466f06238db7388abf

Cohee <18619528+Cohee1207@users.noreply.github.com>

Parents: edbc257e8167c13e4642dbb3e74425fcdc9a4802

public/script.js+8 -96 Viewed

     doNavbarIconClick.call(drawerToggle);
+}
-// Helper for animating open/close (opacity only)
-async function animateDrawer($el, open, displayStyle = 'block', onEnd) {
-    //const slideOptions = getSlideToggleOptions();
-    const duration = 250;
-    const easing = 'swing';
-    $el.stop(true, true);
-    if (open) {
-        $el.css({ display: displayStyle, opacity: 0 });
-        $el.animate(
-            { opacity: 1 },
-            {
-                duration,
-                easing,
-                complete: function () {
-                    $el.css({ opacity: '', display: displayStyle });
-                    if (typeof onEnd === 'function') onEnd(this);
-                },
-            },
-        );
-    } else {
-        $el.animate(
-            { opacity: 0 },
-            {
-                duration,
-                easing,
-                complete: function () {
-                    $el.css({ display: 'none', opacity: '0' });
-                    if (typeof onEnd === 'function') onEnd(this);
-                },
-            },
-        );
-    }
-}
 /**
  * Event handler to open or close a navbar drawer when a navbar icon is clicked.
  * Handles click events on .drawer-toggle elements.
- * @returns {void}
+ * @returns {Promise<void>}
  */
-// ...existing code...
 export async function doNavbarIconClick() {
-    //console.warn('called for, ', $(this));
     const icon = $(this).find('.drawer-icon');
     const drawer = $(this).parent().find('.drawer-content');
-    if (drawer.hasClass('resizing')) { return; }
     const drawerWasOpenAlready = $(this).parent().find('.drawer-content').hasClass('openDrawer');
     const targetDrawerID = $(this).parent().find('.drawer-content').attr('id');
-    const pinnedDrawerClicked = drawer.hasClass('pinnedOpen');
-    if (!drawerWasOpenAlready) { // to open the drawer
+    if (!drawerWasOpenAlready) {
-        // Close all open drawers except pinned ones
         const $openDrawers = $('.openDrawer:not(.pinnedOpen)');
-        for (const el of $openDrawers) {
-            $(el).addClass('resizing');
-            await animateDrawer($(el), false, undefined, function (el) {
-                $(el).closest('.drawer-content').removeClass('resizing');
-            });
-        }
-        // Toggle icon and drawer classes
         const $openIcons = $('.openIcon:not(.drawerPinnedOpen)');
         for (const iconEl of $openIcons) {
             $(iconEl).toggleClass('closedIcon openIcon');

         icon.toggleClass('openIcon closedIcon');
         drawer.toggleClass('openDrawer closedDrawer');
-        // Open the target drawer
-        const $drawerContents = $(this).closest('.drawer').find('.drawer-content');
-        for (const el of $drawerContents) {
-            $(el).addClass('resizing');
         if (targetDrawerID === 'right-nav-panel') {
-                await animateDrawer($(el), true, 'flex', function (el) {
-                    $(el).closest('.drawer-content').removeClass('resizing');
             favsToHotswap();
             $('#rm_print_characters_block').trigger('scroll');
-                });
-            } else {
-                await animateDrawer($(el), true, undefined, function (el) {
-                    $(el).closest('.drawer-content').removeClass('resizing');
-                });
-            }
+        }
         // Set the height of "autoSetHeight" textareas within the drawer to their scroll height

                 return;
+            }
+        }
+    } else if (drawerWasOpenAlready) {
-    } else if (drawerWasOpenAlready) { // to close manually
-        console.warn('saw drawer was already open');
         icon.toggleClass('closedIcon openIcon');
-        if (pinnedDrawerClicked) {
-            $(drawer).addClass('resizing').each((_, el) => {
-                animateDrawer($(el), false, undefined, function (el) {
-                    el.classList.remove('resizing');
-                });
-            });
-        }
-        else {
-            console.warn('not pinned drawer');
-            $('.openDrawer').not('.pinnedOpen').addClass('resizing').each((_, el) => {
-                animateDrawer($(el), false, undefined, function (el) {
-                    el.closest('.drawer-content').classList.remove('resizing');
-                });
-            });
-        }
         drawer.toggleClass('closedDrawer openDrawer');
+    }
+}
-// ...existing code...
 function addDebugFunctions() {
     const doBackfill = async () => {
         for (const message of chat) {

     $('.drawer-toggle').on('click', doNavbarIconClick);
     $('html').on('touchstart mousedown', async function (e) {
-        var clickTarget = $(e.target);
+        const clickTarget = $(e.target);
         if (isExportPopupOpen
             && clickTarget.closest('#export_button').length == 0

             '#toast-container',
             '.select2-results',
         ];
         for (const id of forbiddenTargets) {
             if (clickTarget.closest(id).length > 0) {
                 return;
+            }
+        }
         // This autocloses open drawers that are not pinned if a click happens inside the app which does not target them.
-        var targetParentHasOpenDrawer = clickTarget.parents('.openDrawer').length;
+        const targetParentHasOpenDrawer = clickTarget.parents('.openDrawer').length;
         if (!clickTarget.hasClass('drawer-icon') && !clickTarget.hasClass('openDrawer')) {
             const $openDrawers = $('.openDrawer').not('.pinnedOpen');
             if ($openDrawers.length && targetParentHasOpenDrawer === 0) {
-                // Animate close for each open drawer
+                // Toggle icon and drawer classes
-                for (const el of $openDrawers) {
-                    $(el).addClass('resizing');
-                    // Use the same animateDrawer helper as in doNavbarIconClick
-                    await animateDrawer($(el), false, undefined, function (el) {
-                        $(el).closest('.drawer-content').removeClass('resizing');
-                    });
-                }
-                // Toggle icon and drawer classes after animation
                 $('.openIcon').not('.drawerPinnedOpen').toggleClass('closedIcon openIcon');
                 $openDrawers.toggleClass('closedDrawer openDrawer');
+            }

public/style.css+16 -2 Viewed

 @import url(css/data-maid.css);
 :root {
+    interpolate-size: allow-keywords;
     --doc-height: 100%;
     --transparent: rgba(0, 0, 0, 0);

@@ -2805,7 +2806,6 @@ input[type="file"] {
2805	}	2806	}
2806		2807
2807	#rm_extensions_block {	2808	#rm_extensions_block {
2808	display: none;
2809	overflow-y: auto;	2809	overflow-y: auto;
2810	}	2810	}
2811		2811

 /*#######################################################################*/
 #rm_api_block {
-    display: none;
     overflow-y: auto;
+}

     backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)));
     -webkit-backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)));
     /* z-index: 1000 !important; */
+    height: 0;
+    transition-property: height, display;
+    transition-duration: var(--animation-duration);
+    transition-timing-function: ease-in-out;
+    transition-behavior: allow-discrete;
+}
+.drawer-content.openDrawer {
+    display: block;
+    height: auto;
+    height: calc-size(auto, size);
+    @starting-style {
+        height: 0;
+    }
+}
 body.movingUI .inline-drawer-maximize {