Optimize past swipe counters performance

23a10fdc227954128ccf1da74ad723b92dcab752

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

Parents: 373a0ad3211e30903668a49f7d49e6422200c59f
4 files changed, +18 -9Showing whitespace changes
public/index.html+1 -1
@@ -4183,7 +4183,7 @@
4183 </label>4183 </label>
4184 <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.">4184 <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.">
4185 <input id="show_swipe_num_all_messages" type="checkbox" />4185 <input id="show_swipe_num_all_messages" type="checkbox" />
4186 <small data-i18n="Swipe # for All Messages">Swipe # for All Messages</small><i class="fa-solid fa-mobile-screen-button"></i>4186 <small data-i18n="Swipe # for All Messages">Swipe # for All Messages</small>
4187 </label>4187 </label>
4188 <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">4188 <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">
4189 <input id="hotswapEnabled" type="checkbox" />4189 <input id="hotswapEnabled" type="checkbox" />
public/script.js+5 -6
@@ -98,7 +98,6 @@ import {
98 resetMovableStyles,98 resetMovableStyles,
99 forceCharacterEditorTokenize,99 forceCharacterEditorTokenize,
100 applyPowerUserSettings,100 applyPowerUserSettings,
101 switchSwipeNumAllMessages,
102} from './scripts/power-user.js';101} from './scripts/power-user.js';
103102
104import {103import {
@@ -7660,14 +7659,12 @@ export function showSwipeButtons() {
7660 //allows for writing individual swipe counters for past messages7659 //allows for writing individual swipe counters for past messages
7661 const lastSwipeCounter = $('.last_mes .swipes-counter');7660 const lastSwipeCounter = $('.last_mes .swipes-counter');
7662 lastSwipeCounter.text(swipeCounterText).show();7661 lastSwipeCounter.text(swipeCounterText).show();
7663
7664 switchSwipeNumAllMessages();
7665}7662}
76667663
7667export function hideSwipeButtons() {7664export function hideSwipeButtons() {
7668 $('#chat').find('.swipe_right').hide();7665 chatElement.find('.swipe_right').hide();
7669 $('#chat').find('.last_mes .swipes-counter').hide();7666 chatElement.find('.last_mes .swipes-counter').hide();
7670 $('#chat').find('.swipe_left').hide();7667 chatElement.find('.swipe_left').hide();
7671}7668}
76727669
7673/**7670/**
@@ -8538,6 +8535,8 @@ const swipe_right = () => {
8538 }8535 }
8539 if (run_generate) { //hide swipe arrows while generating8536 if (run_generate) { //hide swipe arrows while generating
8540 this_div.css('display', 'none');8537 this_div.css('display', 'none');
8538 const swipesCounter = currentMessage.find('.swipes-counter');
8539 swipesCounter.hide();
8541 }8540 }
8542 // handles animated transitions when swipe right, specifically height transitions between messages8541 // handles animated transitions when swipe right, specifically height transitions between messages
8543 if (run_generate || run_swipe_right) {8542 if (run_generate || run_swipe_right) {
public/scripts/power-user.js+2 -2
@@ -472,9 +472,9 @@ function switchCompactInputArea() {
472 $('#compact_input_area').prop('checked', power_user.compact_input_area);472 $('#compact_input_area').prop('checked', power_user.compact_input_area);
473}473}
474474
475export function switchSwipeNumAllMessages() {475function switchSwipeNumAllMessages() {
476 $('#show_swipe_num_all_messages').prop('checked', power_user.show_swipe_num_all_messages);476 $('#show_swipe_num_all_messages').prop('checked', power_user.show_swipe_num_all_messages);
477 $('.mes:not(.last_mes) .swipes-counter').css('opacity', '').toggle(power_user.show_swipe_num_all_messages);477 $('body').toggleClass('swipeAllMessages', !!power_user.show_swipe_num_all_messages);
478}478}
479479
480var originalSliderValues = [];480var originalSliderValues = [];
public/style.css+10 -0
@@ -1044,6 +1044,16 @@ body .panelControlBar {
1044 opacity: 0.3;1044 opacity: 0.3;
1045}1045}
10461046
1047body:not(.swipeAllMessages) .mes:not(.last_mes) .swipes-counter {
1048 display: none;
1049}
1050
1051body.swipeAllMessages .mes:not(.last_mes) .swipes-counter {
1052 /* Avoid expensive DOM queries */
1053 opacity: 0.3 !important;
1054 display: flex !important;
1055}
1056
1047.swipe_left {1057.swipe_left {
1048 right: auto;1058 right: auto;
1049 left: 20px;1059 left: 20px;