Replace jQuery slideToggle with a 3rd-party lib

This commit is contained in:
Cohee
2024-12-20 11:28:29 +02:00
parent 6f2408014c
commit c9ea16282d
5 changed files with 72 additions and 56 deletions

7
package-lock.json generated
View File

@@ -63,6 +63,7 @@
"showdown": "^2.1.0", "showdown": "^2.1.0",
"sillytavern-transformers": "2.14.6", "sillytavern-transformers": "2.14.6",
"simple-git": "^3.19.1", "simple-git": "^3.19.1",
"slidetoggle": "^4.0.0",
"tiktoken": "^1.0.16", "tiktoken": "^1.0.16",
"vectra": "^0.2.2", "vectra": "^0.2.2",
"wavefile": "^11.0.0", "wavefile": "^11.0.0",
@@ -6531,6 +6532,12 @@
"integrity": "sha512-VZBmZP8WU3sMOZm1bdgTadsQbcscK0UM8oKxKVBs4XAhUo2Xxzm/OFMGBkPusxw9xL3Uy8LrzEqGqJhclsr0yA==", "integrity": "sha512-VZBmZP8WU3sMOZm1bdgTadsQbcscK0UM8oKxKVBs4XAhUo2Xxzm/OFMGBkPusxw9xL3Uy8LrzEqGqJhclsr0yA==",
"license": "MIT" "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": { "node_modules/smart-buffer": {
"version": "4.2.0", "version": "4.2.0",
"resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.2.0.tgz", "resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.2.0.tgz",

View File

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

View File

@@ -19,6 +19,7 @@ import seedrandom from 'seedrandom';
import * as Popper from '@popperjs/core'; import * as Popper from '@popperjs/core';
import droll from 'droll'; import droll from 'droll';
import morphdom from 'morphdom'; import morphdom from 'morphdom';
import { toggle as slideToggle } from 'slidetoggle';
/** /**
* Expose the libraries to the 'window' object. * Expose the libraries to the 'window' object.
@@ -94,6 +95,7 @@ export default {
Popper, Popper,
droll, droll,
morphdom, morphdom,
slideToggle,
}; };
export { export {
@@ -115,4 +117,5 @@ export {
Popper, Popper,
droll, droll,
morphdom, morphdom,
slideToggle,
}; };

View File

@@ -10,6 +10,7 @@ import {
SVGInject, SVGInject,
Popper, Popper,
initLibraryShims, initLibraryShims,
slideToggle,
default as libs, default as libs,
} from './lib.js'; } from './lib.js';
@@ -9217,45 +9218,43 @@ function doNavbarIconClick() {
const pinnedDrawerClicked = drawer.hasClass('pinnedOpen'); const pinnedDrawerClicked = drawer.hasClass('pinnedOpen');
if (!drawerWasOpenAlready) { //to open the drawer if (!drawerWasOpenAlready) { //to open the drawer
$('.openDrawer').not('.pinnedOpen').addClass('resizing').slideToggle({ $('.openDrawer').not('.pinnedOpen').addClass('resizing').each((_, el) => {
duration: animation_duration * 1.5, slideToggle(el, {
easing: 'swing', miliseconds: animation_duration * 1.5,
queue: false, transitionFunction: 'ease-in',
complete: async function () { onAnimationEnd: function (el) {
await delay(50); el.closest('.drawer-content').classList.remove('resizing');
$(this).closest('.drawer-content').removeClass('resizing'); },
}, });
}); });
$('.openIcon').toggleClass('closedIcon openIcon'); $('.openIcon').not('.drawerPinnedOpen').toggleClass('closedIcon openIcon');
$('.openDrawer').not('.pinnedOpen').toggleClass('closedDrawer openDrawer'); $('.openDrawer').not('.pinnedOpen').toggleClass('closedDrawer openDrawer');
icon.toggleClass('openIcon closedIcon'); icon.toggleClass('openIcon closedIcon');
drawer.toggleClass('openDrawer closedDrawer'); drawer.toggleClass('openDrawer closedDrawer');
//console.log(targetDrawerID); //console.log(targetDrawerID);
if (targetDrawerID === 'right-nav-panel') { 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: animation_duration * 1.5, slideToggle(el, {
easing: 'swing', miliseconds: animation_duration * 1.5,
queue: false, transitionFunction: 'ease-in',
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 { } else {
$(this).closest('.drawer').find('.drawer-content').addClass('resizing').slideToggle({ $(this).closest('.drawer').find('.drawer-content').addClass('resizing').each((_, el) => {
duration: animation_duration * 1.5, slideToggle(el, {
easing: 'swing', miliseconds: animation_duration * 1.5,
queue: false, transitionFunction: 'ease-in',
complete: async function () { onAnimationEnd: function (el) {
await delay(50); el.closest('.drawer-content').classList.remove('resizing');
$(this).closest('.drawer-content').removeClass('resizing'); },
}, });
}); });
} }
@@ -9271,25 +9270,25 @@ function doNavbarIconClick() {
icon.toggleClass('closedIcon openIcon'); icon.toggleClass('closedIcon openIcon');
if (pinnedDrawerClicked) { if (pinnedDrawerClicked) {
$(drawer).addClass('resizing').slideToggle({ $(drawer).addClass('resizing').each((_, el) => {
duration: animation_duration * 1.5, slideToggle(el, {
easing: 'swing', miliseconds: animation_duration * 1.5,
queue: false, transitionFunction: 'ease-in',
complete: async function () { onAnimationEnd: function (el) {
await delay(50); el.classList.remove('resizing');
$(this).removeClass('resizing'); },
}, });
}); });
} }
else { else {
$('.openDrawer').not('.pinnedOpen').addClass('resizing').slideToggle({ $('.openDrawer').not('.pinnedOpen').addClass('resizing').each((_, el) => {
duration: animation_duration * 1.5, slideToggle(el, {
easing: 'swing', miliseconds: animation_duration * 1.5,
queue: false, transitionFunction: 'ease-in',
complete: async function () { onAnimationEnd: function (el) {
await delay(50); el.closest('.drawer-content').classList.remove('resizing');
$(this).closest('.drawer-content').removeClass('resizing'); },
}, });
}); });
} }
@@ -10924,12 +10923,17 @@ jQuery(async function () {
if ($('.openDrawer').length !== 0) { if ($('.openDrawer').length !== 0) {
if (targetParentHasOpenDrawer === 0) { if (targetParentHasOpenDrawer === 0) {
//console.log($('.openDrawer').not('.pinnedOpen').length); //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, {
miliseconds: 200,
transitionFunction: 'ease-in',
onAnimationEnd: (el) => {
el.closest('.drawer-content').classList.remove('resizing');
},
});
}); });
$('.openIcon').not('.drawerPinnedOpen').toggleClass('closedIcon openIcon'); $('.openIcon').not('.drawerPinnedOpen').toggleClass('closedIcon openIcon');
$('.openDrawer').not('.pinnedOpen').toggleClass('closedDrawer openDrawer'); $('.openDrawer').not('.pinnedOpen').toggleClass('closedDrawer openDrawer');
} }
} }
} }

View File

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