Improve performance of expand/close all WI button

This commit is contained in:
Wolfsblvt 2024-08-05 00:09:50 +02:00
parent eac2e3d81e
commit 4966139fd1
2 changed files with 41 additions and 5 deletions

View File

@ -156,6 +156,7 @@ import {
ensureImageFormatSupported, ensureImageFormatSupported,
flashHighlight, flashHighlight,
isTrueBoolean, isTrueBoolean,
toggleDrawer,
} from './scripts/utils.js'; } from './scripts/utils.js';
import { debounce_timeout } from './scripts/constants.js'; import { debounce_timeout } from './scripts/constants.js';
@ -10591,12 +10592,19 @@ jQuery(async function () {
} }
}); });
$(document).on('click', '#OpenAllWIEntries', function () { document.addEventListener('click', function (e) {
$('#world_popup_entries_list').children().find('.down').click(); if (!(e.target instanceof HTMLElement)) return;
}); if (e.target.matches('#OpenAllWIEntries')) {
$(document).on('click', '#CloseAllWIEntries', function () { document.querySelectorAll('#world_popup_entries_list .inline-drawer').forEach((/** @type {HTMLElement} */ drawer) => {
$('#world_popup_entries_list').children().find('.up').click(); toggleDrawer(drawer, true);
});
} else if (e.target.matches('#CloseAllWIEntries')) {
document.querySelectorAll('#world_popup_entries_list .inline-drawer').forEach((/** @type {HTMLElement} */ drawer) => {
toggleDrawer(drawer, false);
});
}
}); });
$(document).on('click', '.open_alternate_greetings', openAlternateGreetings); $(document).on('click', '.open_alternate_greetings', openAlternateGreetings);
/* $('#set_character_world').on('click', openCharacterWorldPopup); */ /* $('#set_character_world').on('click', openCharacterWorldPopup); */

View File

@ -1929,3 +1929,31 @@ export function getFreeName(name, list, numberFormatter = (n) => ` #${n}`) {
} }
return `${name}${numberFormatter(counter)}`; return `${name}${numberFormatter(counter)}`;
} }
/**
* Toggles the visibility of a drawer by changing the display style of its content.
* This function skips the usual drawer animation.
*
* @param {HTMLElement} drawer - The drawer element to toggle
* @param {boolean} [expand=true] - Whether to expand or collapse the drawer
*/
export function toggleDrawer(drawer, expand = true) {
/** @type {HTMLElement} */
const icon = drawer.querySelector('.inline-drawer-icon');
/** @type {HTMLElement} */
const content = drawer.querySelector('.inline-drawer-content');
if (expand) {
icon.classList.remove('up', 'fa-circle-chevron-up');
icon.classList.add('down', 'fa-circle-chevron-down');
content.style.display = 'block';
} else {
icon.classList.remove('down', 'fa-circle-chevron-down');
icon.classList.add('up', 'fa-circle-chevron-up');
content.style.display = 'none';
}
// Set the height of "autoSetHeight" textareas within the inline-drawer to their scroll height
content.querySelectorAll('textarea.autoSetHeight').forEach(resetScrollHeight);
}