UI performance fixes (#3207) * Optimize visibility checks for burger and wand menus * Optimize message actions visibility toggle * Run drawer toggle in animation frame * Replace jQuery slideToggle with a 3rd-party lib * Refactor export button functionality to manage popup state with a boolean flag * Do not close the pinned drawer on unpin * Revert "Do not close the pinned drawer on unpin" This reverts commit e3b34e9a586db853dd84809f4187d5b29cb9ac36. * Refactor slideToggle options * ease-in-out * Don't skip frame on drawer toggle

94de9411b69b02221e6bdec46d4b6af1a1b0b6d4

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

Signed

Parents: 4232f6c5f45ce82985781207b0493e781ef41bf8

package-lock.json+7 -0 Viewed

                 "showdown": "^2.1.0",
                 "sillytavern-transformers": "2.14.6",
                 "simple-git": "^3.19.1",
+                "slidetoggle": "^4.0.0",
                 "tiktoken": "^1.0.16",
                 "vectra": "^0.2.2",
                 "wavefile": "^11.0.0",

             "integrity": "sha512-VZBmZP8WU3sMOZm1bdgTadsQbcscK0UM8oKxKVBs4XAhUo2Xxzm/OFMGBkPusxw9xL3Uy8LrzEqGqJhclsr0yA==",
             "license": "MIT"
         },
+        "node_modules/slidetoggle": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/slidetoggle/-/slidetoggle-4.0.0.tgz",
+            "integrity": "sha512-6qvrOS1dnDFEr41UEEFFRQE8nswaAFIYZAHer6dVlznRIjHyCISjNJoxIn5U5QlAbZfBBxTELQk4jS7miHto1A==",
+            "license": "MIT"
+        },
         "node_modules/smart-buffer": {
             "version": "4.2.0",
             "resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.2.0.tgz",

package.json+1 -0 Viewed

         "showdown": "^2.1.0",
         "sillytavern-transformers": "2.14.6",
         "simple-git": "^3.19.1",
+        "slidetoggle": "^4.0.0",
         "tiktoken": "^1.0.16",
         "vectra": "^0.2.2",
         "wavefile": "^11.0.0",

public/lib.js+3 -0 Viewed

 import * as Popper from '@popperjs/core';
 import droll from 'droll';
 import morphdom from 'morphdom';
+import { toggle as slideToggle } from 'slidetoggle';
 /**
  * Expose the libraries to the 'window' object.

     Popper,
     droll,
     morphdom,
+    slideToggle,
 };
 export {

     Popper,
     droll,
     morphdom,
+    slideToggle,
 };

public/script.js+121 -84 Viewed

     SVGInject,
     Popper,
     initLibraryShims,
+    slideToggle,
     default as libs,
 } from './lib.js';

 let exportPopper = Popper.createPopper(document.getElementById('export_button'), document.getElementById('export_format_popup'), {
     placement: 'left',
 });
+let isExportPopupOpen = false;
 // Saved here for performance reasons
 const messageTemplate = $('#message_template .mes');

     };
+}
+export function getSlideToggleOptions() {
+    return {
+        miliseconds: animation_duration * 1.5,
+        transitionFunction: animation_duration > 0 ? 'ease-in-out' : 'step-start',
+    };
+}
 $.ajaxPrefilter((options, originalOptions, xhr) => {
     xhr.setRequestHeader('X-CSRF-Token', token);
 });

  * @returns {void}
  */
 function doNavbarIconClick() {
-    var icon = $(this).find('.drawer-icon');
+    const icon = $(this).find('.drawer-icon');
-    var drawer = $(this).parent().find('.drawer-content');
+    const drawer = $(this).parent().find('.drawer-content');
     if (drawer.hasClass('resizing')) { return; }
-    var drawerWasOpenAlready = $(this).parent().find('.drawer-content').hasClass('openDrawer');
+    const drawerWasOpenAlready = $(this).parent().find('.drawer-content').hasClass('openDrawer');
-    let targetDrawerID = $(this).parent().find('.drawer-content').attr('id');
+    const targetDrawerID = $(this).parent().find('.drawer-content').attr('id');
     const pinnedDrawerClicked = drawer.hasClass('pinnedOpen');
     if (!drawerWasOpenAlready) { //to open the drawer
-        $('.openDrawer').not('.pinnedOpen').addClass('resizing').slideToggle(200, 'swing', async function () {
+        $('.openDrawer').not('.pinnedOpen').addClass('resizing').each((_, el) => {
-            await delay(50); $(this).closest('.drawer-content').removeClass('resizing');
+            slideToggle(el, {
+                ...getSlideToggleOptions(),
+                onAnimationEnd: function (el) {
+                    el.closest('.drawer-content').classList.remove('resizing');
+                },
+            });
         });
-        $('.openIcon').toggleClass('closedIcon openIcon');
+        $('.openIcon').not('.drawerPinnedOpen').toggleClass('closedIcon openIcon');
         $('.openDrawer').not('.pinnedOpen').toggleClass('closedDrawer openDrawer');
         icon.toggleClass('openIcon closedIcon');
         drawer.toggleClass('openDrawer closedDrawer');
         //console.log(targetDrawerID);
         if (targetDrawerID === 'right-nav-panel') {
-            $(this).closest('.drawer').find('.drawer-content').addClass('resizing').slideToggle({
+            $(this).closest('.drawer').find('.drawer-content').addClass('resizing').each((_, el) => {
-                duration: 200,
+                slideToggle(el, {
-                easing: 'swing',
+                    ...getSlideToggleOptions(),
-                start: function () {
+                    elementDisplayStyle: 'flex',
-                    jQuery(this).css('display', 'flex'); //flex needed to make charlist scroll
+                    onAnimationEnd: function (el) {
-                },
+                        el.closest('.drawer-content').classList.remove('resizing');
-                complete: async function () {
+                        favsToHotswap();
-                    favsToHotswap();
+                        $('#rm_print_characters_block').trigger('scroll');
-                    await delay(50);
+                    },
-                    $(this).closest('.drawer-content').removeClass('resizing');
+                });
-                    $('#rm_print_characters_block').trigger('scroll');
-                },
             });
         } else {
-            $(this).closest('.drawer').find('.drawer-content').addClass('resizing').slideToggle(200, 'swing', async function () {
+            $(this).closest('.drawer').find('.drawer-content').addClass('resizing').each((_, el) => {
-                await delay(50); $(this).closest('.drawer-content').removeClass('resizing');
+                slideToggle(el, {
+                    ...getSlideToggleOptions(),
+                    onAnimationEnd: function (el) {
+                        el.closest('.drawer-content').classList.remove('resizing');
+                    },
+                });
             });
+        }

         icon.toggleClass('closedIcon openIcon');
         if (pinnedDrawerClicked) {
-            $(drawer).addClass('resizing').slideToggle(200, 'swing', async function () {
+            $(drawer).addClass('resizing').each((_, el) => {
-                await delay(50); $(this).removeClass('resizing');
+                slideToggle(el, {
+                    ...getSlideToggleOptions(),
+                    onAnimationEnd: function (el) {
+                        el.classList.remove('resizing');
+                    },
+                });
             });
+        }
         else {
-            $('.openDrawer').not('.pinnedOpen').addClass('resizing').slideToggle(200, 'swing', async function () {
+            $('.openDrawer').not('.pinnedOpen').addClass('resizing').each((_, el) => {
-                await delay(50); $(this).closest('.drawer-content').removeClass('resizing');
+                slideToggle(el, {
+                    ...getSlideToggleOptions(),
+                    onAnimationEnd: function (el) {
+                        el.closest('.drawer-content').classList.remove('resizing');
+                    },
+                });
             });
+        }

         await getStatusNovel();
     });
-    var button = $('#options_button');
+    const button = $('#options_button');
-    var menu = $('#options');
+    const menu = $('#options');
+    let isOptionsMenuVisible = false;
     function showMenu() {
         showBookmarksButtons();
-        // menu.stop()
         menu.fadeIn(animation_duration);
         optionsPopper.update();
+        isOptionsMenuVisible = true;
+    }
     function hideMenu() {
-        // menu.stop();
         menu.fadeOut(animation_duration);
         optionsPopper.update();
+        isOptionsMenuVisible = false;
+    }
     function isMouseOverButtonOrMenu() {

+    }
     button.on('click', function () {
-        if (menu.is(':visible')) {
+        if (isOptionsMenuVisible) {
             hideMenu();
         } else {
             showMenu();
+        }
     });
-    button.on('blur', function () {
-        //delay to prevent menu hiding when mouse leaves button into menu
-        setTimeout(() => {
-            if (!isMouseOverButtonOrMenu()) { hideMenu(); }
-        }, 100);
-    });
-    menu.on('blur', function () {
-        //delay to prevent menu hide when mouseleaves menu into button
-        setTimeout(() => {
-            if (!isMouseOverButtonOrMenu()) { hideMenu(); }
-        }, 100);
-    });
     $(document).on('click', function () {
-        if (!isMouseOverButtonOrMenu() && menu.is(':visible')) { hideMenu(); }
+        if (!isOptionsMenuVisible) return;
+        if (!isMouseOverButtonOrMenu()) { hideMenu(); }
     });
     /* $('#set_chat_scenario').on('click', setScenarioOverride); */

     });
     $(document).on('click', '.extraMesButtonsHint', function (e) {
-        const elmnt = e.target;
+        const $hint = $(e.target);
-        $(elmnt).transition({
+        const $buttons = $hint.siblings('.extraMesButtons');
+        $hint.transition({
             opacity: 0,
             duration: animation_duration,
-            easing: 'ease-in-out',
+            easing: animation_easing,
+            complete: function () {
+                $hint.hide();
+                $buttons
+                    .addClass('visible')
+                    .css({
+                        opacity: 0,
+                        display: 'flex',
+                    })
+                    .transition({
+                        opacity: 1,
+                        duration: animation_duration,
+                        easing: animation_easing,
+                    });
+            },
         });
-        setTimeout(function () {
-            $(elmnt).hide();
-            $(elmnt).siblings('.extraMesButtons').css('opcacity', '0');
-            $(elmnt).siblings('.extraMesButtons').css('display', 'flex');
-            $(elmnt).siblings('.extraMesButtons').transition({
-                opacity: 1,
-                duration: animation_duration,
-                easing: 'ease-in-out',
-            });
-        }, animation_duration);
     });
     $(document).on('click', function (e) {

         // Check if the click was outside the relevant elements
         if (!$(e.target).closest('.extraMesButtons, .extraMesButtonsHint').length) {
+            const $visibleButtons = $('.extraMesButtons.visible');
+            if (!$visibleButtons.length) {
+                return;
+            }
+            const $hiddenHints = $('.extraMesButtonsHint:hidden');
             // Transition out the .extraMesButtons first
-            $('.extraMesButtons:visible').transition({
+            $visibleButtons.transition({
                 opacity: 0,
                 duration: animation_duration,
-                easing: 'ease-in-out',
+                easing: animation_easing,
                 complete: function () {
-                    $(this).hide(); // Hide the .extraMesButtons after the transition
+                    // Hide the .extraMesButtons after the transition
+                    $(this)
+                        .hide()
+                        .removeClass('visible');
                     // Transition the .extraMesButtonsHint back in
-                    $('.extraMesButtonsHint:not(:visible)').show().transition({
+                    $hiddenHints
-                        opacity: .3,
+                        .show()
-                        duration: animation_duration,
+                        .transition({
-                        easing: 'ease-in-out',
+                            opacity: 0.3,
-                        complete: function () {
+                            duration: animation_duration,
-                            $(this).css('opacity', '');
+                            easing: animation_easing,
-                        },
+                            complete: function () {
-                    });
+                                $(this).css('opacity', '');
+                            },
+                        });
                 },
             });
+        }

+        }
     });
-    $('#export_button').on('click', function (e) {
+    $('#export_button').on('click', function () {
-        $('#export_format_popup').toggle();
+        isExportPopupOpen = !isExportPopupOpen;
+        $('#export_format_popup').toggle(isExportPopupOpen);
         exportPopper.update();
     });

             return;
+        }
+        $('#export_format_popup').hide();
+        isExportPopupOpen = false;
+        exportPopper.update();
         // Save before exporting
         await createOrEditCharacter();
         const body = { format, avatar_url: characters[this_chid].avatar };

             URL.revokeObjectURL(a.href);
             document.body.removeChild(a);
+        }
-        $('#export_format_popup').hide();
     });
     //**************************CHAT IMPORT EXPORT*************************//
     $('#chat_import_button').click(function () {

     });
     $(document).on('click', '.drawer-opener', doDrawerOpenClick);
     $('.drawer-toggle').on('click', doNavbarIconClick);
     $('html').on('touchstart mousedown', function (e) {
         var clickTarget = $(e.target);
-        if ($('#export_format_popup').is(':visible')
+        if (isExportPopupOpen
             && clickTarget.closest('#export_button').length == 0
             && clickTarget.closest('#export_format_popup').length == 0) {
             $('#export_format_popup').hide();
+            isExportPopupOpen = false;
+            exportPopper.update();
+        }
         const forbiddenTargets = [

             if ($('.openDrawer').length !== 0) {
                 if (targetParentHasOpenDrawer === 0) {
                     //console.log($('.openDrawer').not('.pinnedOpen').length);
-                    $('.openDrawer').not('.pinnedOpen').addClass('resizing').slideToggle(200, 'swing', function () {
+                    $('.openDrawer').not('.pinnedOpen').addClass('resizing').each((_, el) => {
-                        $(this).closest('.drawer-content').removeClass('resizing');
+                        slideToggle(el, {
+                            ...getSlideToggleOptions(),
+                            onAnimationEnd: (el) => {
+                                el.closest('.drawer-content').classList.remove('resizing');
+                            },
+                        });
                     });
                     $('.openIcon').not('.drawerPinnedOpen').toggleClass('closedIcon openIcon');
                     $('.openDrawer').not('.pinnedOpen').toggleClass('closedDrawer openDrawer');
+                }
+            }
+        }

             case 'renameCharButton':
                 renameCharacter();
                 break;
-            /*case 'dupe_button':
-                DupeChar();
-                break;
-            case 'export_button':
-                $('#export_format_popup').toggle();
-                exportPopper.update();
-                break;
-            */
             case 'import_character_info':
                 await importEmbeddedWorldInfo();
                 saveCharacterDebounced();

public/scripts/RossAscends-mods.js+8 -7 Viewed

-import { DOMPurify, Bowser } from '../lib.js';
+import { DOMPurify, Bowser, slideToggle } from '../lib.js';
 import {
     characters,

     menu_type,
     substituteParams,
     sendTextareaMessage,
+    getSlideToggleOptions,
 } from '../script.js';
 import {

@@ -748,8 +749,8 @@ export function initRossMods() {
748	$(RightNavDrawerIcon).removeClass('drawerPinnedOpen');	749	$(RightNavDrawerIcon).removeClass('drawerPinnedOpen');
749		750
750	if ($(RightNavPanel).hasClass('openDrawer') && $('.openDrawer').length > 1) {	751	if ($(RightNavPanel).hasClass('openDrawer') && $('.openDrawer').length > 1) {
751	$(RightNavPanel).slideToggle(200, 'swing');	752	slideToggle(RightNavPanel, getSlideToggleOptions());
752	$(RightNavDrawerIcon).toggleClass('openIcon closedIcon');	753	$(RightNavDrawerIcon).toggleClass('closedIcon openIcon');
753	$(RightNavPanel).toggleClass('openDrawer closedDrawer');	754	$(RightNavPanel).toggleClass('openDrawer closedDrawer');
754	}	755	}
755	}	756	}

@@ -766,8 +767,8 @@ export function initRossMods() {
766	$(LeftNavDrawerIcon).removeClass('drawerPinnedOpen');	767	$(LeftNavDrawerIcon).removeClass('drawerPinnedOpen');
767		768
768	if ($(LeftNavPanel).hasClass('openDrawer') && $('.openDrawer').length > 1) {	769	if ($(LeftNavPanel).hasClass('openDrawer') && $('.openDrawer').length > 1) {
769	$(LeftNavPanel).slideToggle(200, 'swing');	770	slideToggle(LeftNavPanel, getSlideToggleOptions());
770	$(LeftNavDrawerIcon).toggleClass('openIcon closedIcon');	771	$(LeftNavDrawerIcon).toggleClass('closedIcon openIcon');
771	$(LeftNavPanel).toggleClass('openDrawer closedDrawer');	772	$(LeftNavPanel).toggleClass('openDrawer closedDrawer');
772	}	773	}
773	}	774	}

@@ -786,8 +787,8 @@ export function initRossMods() {
786		787
787	if ($(WorldInfo).hasClass('openDrawer') && $('.openDrawer').length > 1) {	788	if ($(WorldInfo).hasClass('openDrawer') && $('.openDrawer').length > 1) {
788	console.debug('closing WI after lock removal');	789	console.debug('closing WI after lock removal');
789	$(WorldInfo).slideToggle(200, 'swing');	790	slideToggle(WorldInfo, getSlideToggleOptions());
790	$(WIDrawerIcon).toggleClass('openIcon closedIcon');	791	$(WIDrawerIcon).toggleClass('closedIcon openIcon');
791	$(WorldInfo).toggleClass('openDrawer closedDrawer');	792	$(WorldInfo).toggleClass('openDrawer closedDrawer');
792	}	793	}
793	}	794	}

public/scripts/extensions.js+8 -4 Viewed

     const button = $('#extensionsMenuButton');
     const dropdown = $('#extensionsMenu');
-    //dropdown.hide();
+    let isDropdownVisible = false;
     let popper = Popper.createPopper(button.get(0), dropdown.get(0), {
         placement: 'top-start',
     });
     $(button).on('click', function () {
-        if (dropdown.is(':visible')) {
+        if (isDropdownVisible) {
             dropdown.fadeOut(animation_duration);
+            isDropdownVisible = false;
         } else {
             dropdown.fadeIn(animation_duration);
+            isDropdownVisible = true;
+        }
         popper.update();
     });
     $('html').on('click', function (e) {
+        if (!isDropdownVisible) return;
         const clickTarget = $(e.target);
         const noCloseTargets = ['#sd_gen', '#extensionsMenuButton', '#roll_dice'];
-        if (dropdown.is(':visible') && !noCloseTargets.some(id => clickTarget.closest(id).length > 0)) {
+        if (!noCloseTargets.some(id => clickTarget.closest(id).length > 0)) {
-            $(dropdown).fadeOut(animation_duration);
+            dropdown.fadeOut(animation_duration);
+            isDropdownVisible = false;
+        }
     });
+}

public/style.css+2 -1 Viewed

 .mes_block .ch_name {
     max-width: 100%;
+    min-height: 22px;
+}
 /*applies to both groups and solos chars in the char list*/

 .mes_button,
 .extraMesButtons>div {
     cursor: pointer;
-    transition: 0.3s ease-in-out;
+    transition: opacity 0.2s ease-in-out;
     filter: drop-shadow(0px 0px 2px black);
     opacity: 0.3;
     padding: 1px 3px;