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 e3b34e9a58.

* Refactor slideToggle options

* ease-in-out

* Don't skip frame on drawer toggle
This commit is contained in:
Cohee
2024-12-20 22:20:46 +02:00
committed by GitHub
parent 4232f6c5f4
commit 94de9411b6
7 changed files with 150 additions and 96 deletions

View File

@ -1,4 +1,4 @@
import { DOMPurify, Bowser } from '../lib.js';
import { DOMPurify, Bowser, slideToggle } from '../lib.js';
import {
characters,
@ -19,6 +19,7 @@ import {
menu_type,
substituteParams,
sendTextareaMessage,
getSlideToggleOptions,
} from '../script.js';
import {
@ -748,8 +749,8 @@ export function initRossMods() {
$(RightNavDrawerIcon).removeClass('drawerPinnedOpen');
if ($(RightNavPanel).hasClass('openDrawer') && $('.openDrawer').length > 1) {
$(RightNavPanel).slideToggle(200, 'swing');
$(RightNavDrawerIcon).toggleClass('openIcon closedIcon');
slideToggle(RightNavPanel, getSlideToggleOptions());
$(RightNavDrawerIcon).toggleClass('closedIcon openIcon');
$(RightNavPanel).toggleClass('openDrawer closedDrawer');
}
}
@ -766,8 +767,8 @@ export function initRossMods() {
$(LeftNavDrawerIcon).removeClass('drawerPinnedOpen');
if ($(LeftNavPanel).hasClass('openDrawer') && $('.openDrawer').length > 1) {
$(LeftNavPanel).slideToggle(200, 'swing');
$(LeftNavDrawerIcon).toggleClass('openIcon closedIcon');
slideToggle(LeftNavPanel, getSlideToggleOptions());
$(LeftNavDrawerIcon).toggleClass('closedIcon openIcon');
$(LeftNavPanel).toggleClass('openDrawer closedDrawer');
}
}
@ -786,8 +787,8 @@ export function initRossMods() {
if ($(WorldInfo).hasClass('openDrawer') && $('.openDrawer').length > 1) {
console.debug('closing WI after lock removal');
$(WorldInfo).slideToggle(200, 'swing');
$(WIDrawerIcon).toggleClass('openIcon closedIcon');
slideToggle(WorldInfo, getSlideToggleOptions());
$(WIDrawerIcon).toggleClass('closedIcon openIcon');
$(WorldInfo).toggleClass('openDrawer closedDrawer');
}
}

View File

@ -417,26 +417,30 @@ async function addExtensionsButtonAndMenu() {
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)) {
$(dropdown).fadeOut(animation_duration);
if (!noCloseTargets.some(id => clickTarget.closest(id).length > 0)) {
dropdown.fadeOut(animation_duration);
isDropdownVisible = false;
}
});
}