Optimize past swipe counters performance

23a10fdc227954128ccf1da74ad723b92dcab752

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

public/index.html+1 -1 Viewed

                                 </label>
                                 <label for="show_swipe_num_all_messages" class="checkbox_label" title="Display swipe numbers for all messages, not just the last." data-i18n="[title]Display swipe numbers for all messages, not just the last.">
                                     <input id="show_swipe_num_all_messages" type="checkbox" />
                                     <small data-i18n="Swipe # for All Messages">Swipe # for All Messages</small><i class="fa-solid fa-mobile-screen-button"></i>
                                 </label>
                                 <label for="hotswapEnabled" class="checkbox_label" title="In the Character Management panel, show quick selection buttons for favorited characters." data-i18n="[title]In the Character Management panel, show quick selection buttons for favorited characters">
                                     <input id="hotswapEnabled" type="checkbox" />

public/script.js+5 -6 Viewed

     resetMovableStyles,
     forceCharacterEditorTokenize,
     applyPowerUserSettings,
 -    switchSwipeNumAllMessages,
 } from './scripts/power-user.js';
 import {

     //allows for writing individual swipe counters for past messages
     const lastSwipeCounter = $('.last_mes .swipes-counter');
     lastSwipeCounter.text(swipeCounterText).show();
+-
 -    switchSwipeNumAllMessages();
+}
 export function hideSwipeButtons() {
     $('#chat')chatElement.find('.swipe_right').hide();
     $('#chat')chatElement.find('.last_mes .swipes-counter').hide();
     $('#chat')chatElement.find('.swipe_left').hide();
+}
 /**

@@ -8538,6 +8535,8 @@ const swipe_right = () => {
8538	8535	}
8539	8536	if (run_generate) { //hide swipe arrows while generating
8540	8537	this_div.css('display', 'none');
	8538	+ const swipesCounter = currentMessage.find('.swipes-counter');
	8539	+ swipesCounter.hide();
8541	8540	}
8542	8541	// handles animated transitions when swipe right, specifically height transitions between messages
8543	8542	if (run_generate \|\| run_swipe_right) {

public/scripts/power-user.js+2 -2 Viewed

@@ -472,9 +472,9 @@ function switchCompactInputArea() {
472	472	$('#compact_input_area').prop('checked', power_user.compact_input_area);
473	473	}
474	474
475	475	export function switchSwipeNumAllMessages() {
476	476	$('#show_swipe_num_all_messages').prop('checked', power_user.show_swipe_num_all_messages);
477	477	$('.mes:not(.last_mes) .swipes-counterbody').csstoggleClass('opacityswipeAllMessages', '').toggle(!!power_user.show_swipe_num_all_messages);
478	478	}
479	479
480	480	var originalSliderValues = [];

public/style.css+10 -0 Viewed

     opacity: 0.3;
+}
 +body:not(.swipeAllMessages) .mes:not(.last_mes) .swipes-counter {
 +    display: none;
 +}
++
 +body.swipeAllMessages .mes:not(.last_mes) .swipes-counter {
 +    /* Avoid expensive DOM queries */
 +    opacity: 0.3 !important;
 +    display: flex !important;
 +}
++
 .swipe_left {
     right: auto;
     left: 20px;