Pure CSS drawer animations

8c384a03bbdf262cd21920466f06238db7388abf

Cohee <18619528+Cohee1207@users.noreply.github.com>

Parents: edbc257e8167c13e4642dbb3e74425fcdc9a4802
2 files changed, +24 -98Showing whitespace changes
public/script.js+8 -96
@@ -10317,68 +10317,19 @@ function doDrawerOpenClick() {
1031710317 doNavbarIconClick.call(drawerToggle);
1031810318}
1031910319
10320-
10321-// Helper for animating open/close (opacity only)
10322-async function animateDrawer($el, open, displayStyle = 'block', onEnd) {
10323- //const slideOptions = getSlideToggleOptions();
10324- const duration = 250;
10325- const easing = 'swing';
10326- $el.stop(true, true);
10327-
10328- if (open) {
10329- $el.css({ display: displayStyle, opacity: 0 });
10330- $el.animate(
10331- { opacity: 1 },
10332- {
10333- duration,
10334- easing,
10335- complete: function () {
10336- $el.css({ opacity: '', display: displayStyle });
10337- if (typeof onEnd === 'function') onEnd(this);
10338- },
10339- },
10340- );
10341- } else {
10342- $el.animate(
10343- { opacity: 0 },
10344- {
10345- duration,
10346- easing,
10347- complete: function () {
10348- $el.css({ display: 'none', opacity: '0' });
10349- if (typeof onEnd === 'function') onEnd(this);
10350- },
10351- },
10352- );
10353- }
10354-}
10355-
1035610320/**
1035710321 * Event handler to open or close a navbar drawer when a navbar icon is clicked.
1035810322 * Handles click events on .drawer-toggle elements.
1035910323 * @returns {Promise<void>}
1036010324 */
10361-// ...existing code...
1036210325export async function doNavbarIconClick() {
10363- //console.warn('called for, ', $(this));
1036410326 const icon = $(this).find('.drawer-icon');
1036510327 const drawer = $(this).parent().find('.drawer-content');
10366- if (drawer.hasClass('resizing')) { return; }
1036710328 const drawerWasOpenAlready = $(this).parent().find('.drawer-content').hasClass('openDrawer');
1036810329 const targetDrawerID = $(this).parent().find('.drawer-content').attr('id');
10369- const pinnedDrawerClicked = drawer.hasClass('pinnedOpen');
1037010330
1037110331 if (!drawerWasOpenAlready) { // to open the drawer
10372- // Close all open drawers except pinned ones
1037310332 const $openDrawers = $('.openDrawer:not(.pinnedOpen)');
10374- for (const el of $openDrawers) {
10375- $(el).addClass('resizing');
10376- await animateDrawer($(el), false, undefined, function (el) {
10377- $(el).closest('.drawer-content').removeClass('resizing');
10378- });
10379- }
10380-
10381- // Toggle icon and drawer classes
1038210333 const $openIcons = $('.openIcon:not(.drawerPinnedOpen)');
1038310334 for (const iconEl of $openIcons) {
1038410335 $(iconEl).toggleClass('closedIcon openIcon');
@@ -10389,21 +10340,9 @@ export async function doNavbarIconClick() {
1038910340 icon.toggleClass('openIcon closedIcon');
1039010341 drawer.toggleClass('openDrawer closedDrawer');
1039110342
10392- // Open the target drawer
10393- const $drawerContents = $(this).closest('.drawer').find('.drawer-content');
10394- for (const el of $drawerContents) {
10395- $(el).addClass('resizing');
1039610343 if (targetDrawerID === 'right-nav-panel') {
10397- await animateDrawer($(el), true, 'flex', function (el) {
10398- $(el).closest('.drawer-content').removeClass('resizing');
1039910344 favsToHotswap();
1040010345 $('#rm_print_characters_block').trigger('scroll');
10401- });
10402- } else {
10403- await animateDrawer($(el), true, undefined, function (el) {
10404- $(el).closest('.drawer-content').removeClass('resizing');
10405- });
10406- }
1040710346 }
1040810347
1040910348 // Set the height of "autoSetHeight" textareas within the drawer to their scroll height
@@ -10414,31 +10353,12 @@ export async function doNavbarIconClick() {
1041410353 return;
1041510354 }
1041610355 }
10417-
10356+ } else if (drawerWasOpenAlready) {
10418- } else if (drawerWasOpenAlready) { // to close manually
10419- console.warn('saw drawer was already open');
1042010357 icon.toggleClass('closedIcon openIcon');
10421-
10422- if (pinnedDrawerClicked) {
10423- $(drawer).addClass('resizing').each((_, el) => {
10424- animateDrawer($(el), false, undefined, function (el) {
10425- el.classList.remove('resizing');
10426- });
10427- });
10428- }
10429- else {
10430- console.warn('not pinned drawer');
10431- $('.openDrawer').not('.pinnedOpen').addClass('resizing').each((_, el) => {
10432- animateDrawer($(el), false, undefined, function (el) {
10433- el.closest('.drawer-content').classList.remove('resizing');
10434- });
10435- });
10436- }
10437-
1043810358 drawer.toggleClass('closedDrawer openDrawer');
1043910359 }
1044010360}
10441-// ...existing code...
10361+
1044210362function addDebugFunctions() {
1044310363 const doBackfill = async () => {
1044410364 for (const message of chat) {
@@ -12064,7 +11984,7 @@ jQuery(async function () {
1206411984 $('.drawer-toggle').on('click', doNavbarIconClick);
1206511985
1206611986 $('html').on('touchstart mousedown', async function (e) {
1206711987 varconst clickTarget = $(e.target);
1206811988
1206911989 if (isExportPopupOpen
1207011990 && clickTarget.closest('#export_button').length == 0
@@ -12085,27 +12005,19 @@ jQuery(async function () {
1208512005 '#toast-container',
1208612006 '.select2-results',
1208712007 ];
12008+
1208812009 for (const id of forbiddenTargets) {
1208912010 if (clickTarget.closest(id).length > 0) {
1209012011 return;
1209112012 }
1209212013 }
1209312014
12094-
1209512015 // This autocloses open drawers that are not pinned if a click happens inside the app which does not target them.
1209612016 varconst targetParentHasOpenDrawer = clickTarget.parents('.openDrawer').length;
1209712017 if (!clickTarget.hasClass('drawer-icon') && !clickTarget.hasClass('openDrawer')) {
1209812018 const $openDrawers = $('.openDrawer').not('.pinnedOpen');
1209912019 if ($openDrawers.length && targetParentHasOpenDrawer === 0) {
1210012020 // Animate close forToggle eachicon openand drawer classes
12101- for (const el of $openDrawers) {
12102- $(el).addClass('resizing');
12103- // Use the same animateDrawer helper as in doNavbarIconClick
12104- await animateDrawer($(el), false, undefined, function (el) {
12105- $(el).closest('.drawer-content').removeClass('resizing');
12106- });
12107- }
12108- // Toggle icon and drawer classes after animation
1210912021 $('.openIcon').not('.drawerPinnedOpen').toggleClass('closedIcon openIcon');
1211012022 $openDrawers.toggleClass('closedDrawer openDrawer');
1211112023 }
public/style.css+16 -2
@@ -14,6 +14,7 @@
1414@import url(css/data-maid.css);
1515
1616:root {
17+ interpolate-size: allow-keywords;
1718 --doc-height: 100%;
1819 --transparent: rgba(0, 0, 0, 0);
1920
@@ -2805,7 +2806,6 @@ input[type="file"] {
28052806}
28062807
28072808#rm_extensions_block {
2808- display: none;
28092809 overflow-y: auto;
28102810}
28112811
@@ -2934,7 +2934,6 @@ select option:not(:checked) {
29342934/*#######################################################################*/
29352935
29362936#rm_api_block {
2937- display: none;
29382937 overflow-y: auto;
29392938}
29402939
@@ -5402,6 +5401,21 @@ body:has(#character_popup.open) #top-settings-holder:has(.drawer-content.openDra
54025401 backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)));
54035402 -webkit-backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)));
54045403 /* z-index: 1000 !important; */
5404+ height: 0;
5405+ transition-property: height, display;
5406+ transition-duration: var(--animation-duration);
5407+ transition-timing-function: ease-in-out;
5408+ transition-behavior: allow-discrete;
5409+}
5410+
5411+.drawer-content.openDrawer {
5412+ display: block;
5413+ height: auto;
5414+ height: calc-size(auto, size);
5415+
5416+ @starting-style {
5417+ height: 0;
5418+ }
54055419}
54065420
54075421body.movingUI .inline-drawer-maximize {