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",
"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",

View File

@@ -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",

View File

@@ -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,
};

View File

@@ -10,6 +10,7 @@ import {
SVGInject,
Popper,
initLibraryShims,
slideToggle,
default as libs,
} from './lib.js';
@@ -9217,46 +9218,44 @@ 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 () {
$(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();
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({
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');
},
});
});
}
// Set the height of "autoSetHeight" textareas within the drawer to their scroll height
@@ -9271,26 +9270,26 @@ 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');
},
});
});
}
drawer.toggleClass('closedDrawer openDrawer');
@@ -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');
}
}
}

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,
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');
}
}