diff --git a/package-lock.json b/package-lock.json index 2419fe002..fa23bf5a6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -63,6 +63,7 @@ "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", @@ -6531,6 +6532,12 @@ "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", diff --git a/package.json b/package.json index 777d99076..26d979a7f 100644 --- a/package.json +++ b/package.json @@ -53,6 +53,7 @@ "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", diff --git a/public/lib.js b/public/lib.js index 2870d018d..4c6f318af 100644 --- a/public/lib.js +++ b/public/lib.js @@ -19,6 +19,7 @@ import seedrandom from 'seedrandom'; 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. @@ -94,6 +95,7 @@ export default { Popper, droll, morphdom, + slideToggle, }; export { @@ -115,4 +117,5 @@ export { Popper, droll, morphdom, + slideToggle, }; diff --git a/public/script.js b/public/script.js index 3fe911ea2..6fd84cbf4 100644 --- a/public/script.js +++ b/public/script.js @@ -10,6 +10,7 @@ import { SVGInject, Popper, initLibraryShims, + slideToggle, default as libs, } from './lib.js'; @@ -9217,45 +9218,43 @@ function doNavbarIconClick() { const pinnedDrawerClicked = drawer.hasClass('pinnedOpen'); if (!drawerWasOpenAlready) { //to open the drawer - $('.openDrawer').not('.pinnedOpen').addClass('resizing').slideToggle({ - duration: animation_duration * 1.5, - easing: 'swing', - queue: false, - complete: async function () { - await delay(50); - $(this).closest('.drawer-content').removeClass('resizing'); - }, + $('.openDrawer').not('.pinnedOpen').addClass('resizing').each((_, el) => { + slideToggle(el, { + miliseconds: animation_duration * 1.5, + transitionFunction: 'ease-in', + 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({ - duration: animation_duration * 1.5, - easing: 'swing', - queue: false, - start: function () { - jQuery(this).css('display', 'flex'); //flex needed to make charlist scroll - }, - complete: async function () { - favsToHotswap(); - await delay(50); - $(this).closest('.drawer-content').removeClass('resizing'); - $('#rm_print_characters_block').trigger('scroll'); - }, + $(this).closest('.drawer').find('.drawer-content').addClass('resizing').each((_, el) => { + slideToggle(el, { + miliseconds: animation_duration * 1.5, + transitionFunction: 'ease-in', + elementDisplayStyle: 'flex', + onAnimationEnd: function (el) { + el.closest('.drawer-content').classList.remove('resizing'); + favsToHotswap(); + $('#rm_print_characters_block').trigger('scroll'); + }, + }); }); } else { - $(this).closest('.drawer').find('.drawer-content').addClass('resizing').slideToggle({ - duration: animation_duration * 1.5, - easing: 'swing', - queue: false, - complete: async function () { - await delay(50); - $(this).closest('.drawer-content').removeClass('resizing'); - }, + $(this).closest('.drawer').find('.drawer-content').addClass('resizing').each((_, el) => { + slideToggle(el, { + miliseconds: animation_duration * 1.5, + transitionFunction: 'ease-in', + onAnimationEnd: function (el) { + el.closest('.drawer-content').classList.remove('resizing'); + }, + }); }); } @@ -9271,25 +9270,25 @@ function doNavbarIconClick() { icon.toggleClass('closedIcon openIcon'); if (pinnedDrawerClicked) { - $(drawer).addClass('resizing').slideToggle({ - duration: animation_duration * 1.5, - easing: 'swing', - queue: false, - complete: async function () { - await delay(50); - $(this).removeClass('resizing'); - }, + $(drawer).addClass('resizing').each((_, el) => { + slideToggle(el, { + miliseconds: animation_duration * 1.5, + transitionFunction: 'ease-in', + onAnimationEnd: function (el) { + el.classList.remove('resizing'); + }, + }); }); } else { - $('.openDrawer').not('.pinnedOpen').addClass('resizing').slideToggle({ - duration: animation_duration * 1.5, - easing: 'swing', - queue: false, - complete: async function () { - await delay(50); - $(this).closest('.drawer-content').removeClass('resizing'); - }, + $('.openDrawer').not('.pinnedOpen').addClass('resizing').each((_, el) => { + slideToggle(el, { + miliseconds: animation_duration * 1.5, + transitionFunction: 'ease-in', + onAnimationEnd: function (el) { + el.closest('.drawer-content').classList.remove('resizing'); + }, + }); }); } @@ -10924,12 +10923,17 @@ jQuery(async function () { if ($('.openDrawer').length !== 0) { if (targetParentHasOpenDrawer === 0) { //console.log($('.openDrawer').not('.pinnedOpen').length); - $('.openDrawer').not('.pinnedOpen').addClass('resizing').slideToggle(200, 'swing', function () { - $(this).closest('.drawer-content').removeClass('resizing'); + $('.openDrawer').not('.pinnedOpen').addClass('resizing').each((_, el) => { + slideToggle(el, { + miliseconds: 200, + transitionFunction: 'ease-in', + onAnimationEnd: (el) => { + el.closest('.drawer-content').classList.remove('resizing'); + }, + }); }); $('.openIcon').not('.drawerPinnedOpen').toggleClass('closedIcon openIcon'); $('.openDrawer').not('.pinnedOpen').toggleClass('closedDrawer openDrawer'); - } } } diff --git a/public/scripts/RossAscends-mods.js b/public/scripts/RossAscends-mods.js index fb55e42dd..9b5e28869 100644 --- a/public/scripts/RossAscends-mods.js +++ b/public/scripts/RossAscends-mods.js @@ -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, + animation_duration, } 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, { miliseconds: animation_duration * 1.5, transitionFunction: 'ease-in' }); + $(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, { miliseconds: animation_duration * 1.5, transitionFunction: 'ease-in' }); + $(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, { miliseconds: animation_duration * 1.5, transitionFunction: 'ease-in' }); + $(WIDrawerIcon).toggleClass('closedIcon openIcon'); $(WorldInfo).toggleClass('openDrawer closedDrawer'); } }