From 92ec45af4b72bbb5f1fbe8890dfb708d0005214a Mon Sep 17 00:00:00 2001 From: LenAnderson Date: Mon, 25 Mar 2024 18:16:18 -0400 Subject: [PATCH 1/6] call processHotkeys debounced --- public/scripts/RossAscends-mods.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/public/scripts/RossAscends-mods.js b/public/scripts/RossAscends-mods.js index da93d1ed7..fcbaf35b6 100644 --- a/public/scripts/RossAscends-mods.js +++ b/public/scripts/RossAscends-mods.js @@ -884,8 +884,9 @@ export function initRossMods() { } $(document).on('keydown', function (event) { - processHotkeys(event.originalEvent); + processHotkeysDebounced(event.originalEvent); }); + const processHotkeysDebounced = debounce(processHotkeys); //Additional hotkeys CTRL+ENTER and CTRL+UPARROW /** From e567aa2c314e81aba0e6df0f85df90f7f95bc8e2 Mon Sep 17 00:00:00 2001 From: LenAnderson Date: Tue, 26 Mar 2024 12:09:26 -0400 Subject: [PATCH 2/6] replace debounce with other performance improvements - remove debounce from processHotkey - replace dom-queries in conditions with vars - replace some jQuery in conditions with vanilla JS --- public/scripts/RossAscends-mods.js | 29 ++++++++++++++++++++++------- 1 file changed, 22 insertions(+), 7 deletions(-) diff --git a/public/scripts/RossAscends-mods.js b/public/scripts/RossAscends-mods.js index fcbaf35b6..ee6402ae4 100644 --- a/public/scripts/RossAscends-mods.js +++ b/public/scripts/RossAscends-mods.js @@ -884,9 +884,13 @@ export function initRossMods() { } $(document).on('keydown', function (event) { - processHotkeysDebounced(event.originalEvent); + processHotkeys(event.originalEvent); }); - const processHotkeysDebounced = debounce(processHotkeys); + + const hotkeyTargets = { + 'send_textarea': sendTextArea, + 'dialogue_popup_input': document.querySelector('#dialogue_popup_input'), + }; //Additional hotkeys CTRL+ENTER and CTRL+UPARROW /** @@ -894,17 +898,19 @@ export function initRossMods() { */ function processHotkeys(event) { //Enter to send when send_textarea in focus - if ($(':focus').attr('id') === 'send_textarea') { + if (document.activeElement == hotkeyTargets['send_textarea']) { const sendOnEnter = shouldSendOnEnter(); if (!event.shiftKey && !event.ctrlKey && !event.altKey && event.key == 'Enter' && sendOnEnter) { event.preventDefault(); sendTextareaMessage(); + return; } } - if ($(':focus').attr('id') === 'dialogue_popup_input' && !isMobile()) { + if (document.activeElement == hotkeyTargets['dialogue_popup_input'] && !isMobile()) { if (!event.shiftKey && !event.ctrlKey && event.key == 'Enter') { event.preventDefault(); $('#dialogue_popup_ok').trigger('click'); + return; } } //ctrl+shift+up to scroll to context line @@ -916,6 +922,7 @@ export function initRossMods() { scrollTop: contextLine.offset().top - $('#chat').offset().top + $('#chat').scrollTop(), }, 300); } else { toastr.warning('Context line not found, send a message first!'); } + return; } //ctrl+shift+down to scroll to bottom of chat if (event.shiftKey && event.ctrlKey && event.key == 'ArrowDown') { @@ -923,6 +930,7 @@ export function initRossMods() { $('#chat').animate({ scrollTop: $('#chat').prop('scrollHeight'), }, 300); + return; } // Alt+Enter or AltGr+Enter to Continue @@ -930,6 +938,7 @@ export function initRossMods() { if (is_send_press == false) { console.debug('Continuing with Alt+Enter'); $('#option_continue').trigger('click'); + return; } } @@ -939,6 +948,7 @@ export function initRossMods() { if (editMesDone.length > 0) { console.debug('Accepting edits with Ctrl+Enter'); editMesDone.trigger('click'); + return; } else if (is_send_press == false) { const skipConfirmKey = 'RegenerateWithCtrlEnter'; const skipConfirm = LoadLocalBool(skipConfirmKey); @@ -965,6 +975,7 @@ export function initRossMods() { doRegenerate(); }); } + return; } else { console.debug('Ctrl+Enter ignored'); } @@ -973,7 +984,7 @@ export function initRossMods() { // Helper function to check if nanogallery2's lightbox is active function isNanogallery2LightboxActive() { // Check if the body has the 'nGY2On' class, adjust this based on actual behavior - return $('body').hasClass('nGY2_body_scrollbar'); + return document.body.classList.contains('nGY2_body_scrollbar'); } if (event.key == 'ArrowLeft') { //swipes left @@ -986,6 +997,7 @@ export function initRossMods() { !isInputElementInFocus() ) { $('.swipe_left:last').click(); + return; } } if (event.key == 'ArrowRight') { //swipes right @@ -998,13 +1010,14 @@ export function initRossMods() { !isInputElementInFocus() ) { $('.swipe_right:last').click(); + return; } } if (event.ctrlKey && event.key == 'ArrowUp') { //edits last USER message if chatbar is empty and focused if ( - $('#send_textarea').val() === '' && + hotkeyTargets['send_textarea'].value === '' && chatbarInFocus === true && ($('.swipe_right:last').css('display') === 'flex' || $('.last_mes').attr('is_system') === 'true') && $('#character_popup').css('display') === 'none' && @@ -1015,6 +1028,7 @@ export function initRossMods() { const editMes = lastIsUserMes.querySelector('.mes_block .mes_edit'); if (editMes !== null) { $(editMes).trigger('click'); + return; } } } @@ -1022,7 +1036,7 @@ export function initRossMods() { if (event.key == 'ArrowUp') { //edits last message if chatbar is empty and focused console.log('got uparrow input'); if ( - $('#send_textarea').val() === '' && + hotkeyTargets['send_textarea'].value === '' && chatbarInFocus === true && //$('.swipe_right:last').css('display') === 'flex' && $('.last_mes .mes_buttons').is(':visible') && @@ -1033,6 +1047,7 @@ export function initRossMods() { const editMes = lastMes.querySelector('.mes_block .mes_edit'); if (editMes !== null) { $(editMes).click(); + return; } } } From 69d195ef31563965f0357838cab4a8c7279562e4 Mon Sep 17 00:00:00 2001 From: LenAnderson Date: Tue, 26 Mar 2024 12:11:00 -0400 Subject: [PATCH 3/6] improve send_textarea autofit performance - only expand immediately - shrink debounced --- public/scripts/RossAscends-mods.js | 38 +++++++++++++++++++++--------- 1 file changed, 27 insertions(+), 11 deletions(-) diff --git a/public/scripts/RossAscends-mods.js b/public/scripts/RossAscends-mods.js index ee6402ae4..f7d2e5139 100644 --- a/public/scripts/RossAscends-mods.js +++ b/public/scripts/RossAscends-mods.js @@ -658,6 +658,28 @@ export async function initMovingUI() { } } +/**@type {HTMLTextAreaElement} */ +const sendTextArea = document.querySelector('#send_textarea'); +/** + * this makes the chat input text area resize vertically to match the text size (limited by CSS at 50% window height) + */ +function autoFitSendTextArea() { + const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1; + /**@type {HTMLDivElement} */ + const chatBlock = document.querySelector('#chat'); + const originalScrollBottom = chatBlock.scrollHeight - (chatBlock.scrollTop + chatBlock.offsetHeight); + if (sendTextArea.scrollHeight == sendTextArea.offsetHeight) { + sendTextArea.style.height = window.getComputedStyle(sendTextArea).getPropertyValue('min-height'); + } + sendTextArea.style.height = sendTextArea.scrollHeight + 0.3 + 'px'; + + if (!isFirefox) { + const newScrollTop = Math.round(chatBlock.scrollHeight - (chatBlock.offsetHeight + originalScrollBottom)); + chatBlock.scrollTop = newScrollTop; + } +} +export const autoFitSendTextAreaDebounced = debounce(autoFitSendTextArea); + // --------------------------------------------------- export function initRossMods() { @@ -820,17 +842,11 @@ export function initRossMods() { saveSettingsDebounced(); }); - //this makes the chat input text area resize vertically to match the text size (limited by CSS at 50% window height) - $('#send_textarea').on('input', function () { - const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1; - const chatBlock = $('#chat'); - const originalScrollBottom = chatBlock[0].scrollHeight - (chatBlock.scrollTop() + chatBlock.outerHeight()); - this.style.height = window.getComputedStyle(this).getPropertyValue('min-height'); - this.style.height = this.scrollHeight + 0.3 + 'px'; - - if (!isFirefox) { - const newScrollTop = Math.round(chatBlock[0].scrollHeight - (chatBlock.outerHeight() + originalScrollBottom)); - chatBlock.scrollTop(newScrollTop); + sendTextArea.addEventListener('input', ()=>{ + if (sendTextArea.scrollHeight > sendTextArea.offsetHeight) { + autoFitSendTextArea(); + } else { + autoFitSendTextAreaDebounced(); } saveUserInput(); }); From d9022db7d9b0ab76d11e4bd07d14621f3e12f835 Mon Sep 17 00:00:00 2001 From: LenAnderson Date: Tue, 26 Mar 2024 12:11:15 -0400 Subject: [PATCH 4/6] debounce saving of user input in send_textarea --- public/scripts/RossAscends-mods.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/public/scripts/RossAscends-mods.js b/public/scripts/RossAscends-mods.js index f7d2e5139..9f73494c9 100644 --- a/public/scripts/RossAscends-mods.js +++ b/public/scripts/RossAscends-mods.js @@ -399,6 +399,7 @@ function saveUserInput() { const userInput = String($('#send_textarea').val()); SaveLocal('userInput', userInput); } +const saveUserInputDebounced = debounce(saveUserInput); // Make the DIV element draggable: @@ -848,7 +849,7 @@ export function initRossMods() { } else { autoFitSendTextAreaDebounced(); } - saveUserInput(); + saveUserInputDebounced(); }); restoreUserInput(); From 3debc063727429d5fef3518d0cf99230c1341347 Mon Sep 17 00:00:00 2001 From: LenAnderson Date: Tue, 26 Mar 2024 12:32:23 -0400 Subject: [PATCH 5/6] fix for jQuery input event not triggering real input event --- public/scripts/RossAscends-mods.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/scripts/RossAscends-mods.js b/public/scripts/RossAscends-mods.js index 9f73494c9..aaf9d5233 100644 --- a/public/scripts/RossAscends-mods.js +++ b/public/scripts/RossAscends-mods.js @@ -843,7 +843,7 @@ export function initRossMods() { saveSettingsDebounced(); }); - sendTextArea.addEventListener('input', ()=>{ + $(sendTextArea).on('input', ()=>{ if (sendTextArea.scrollHeight > sendTextArea.offsetHeight) { autoFitSendTextArea(); } else { From 55d855b65584e7dd4053dfe94ee82f518904bd6a Mon Sep 17 00:00:00 2001 From: Cohee <18619528+Cohee1207@users.noreply.github.com> Date: Wed, 27 Mar 2024 22:18:20 +0200 Subject: [PATCH 6/6] Autofit immediately if input value is empty --- public/scripts/RossAscends-mods.js | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/public/scripts/RossAscends-mods.js b/public/scripts/RossAscends-mods.js index aaf9d5233..bae2ff6ea 100644 --- a/public/scripts/RossAscends-mods.js +++ b/public/scripts/RossAscends-mods.js @@ -661,16 +661,18 @@ export async function initMovingUI() { /**@type {HTMLTextAreaElement} */ const sendTextArea = document.querySelector('#send_textarea'); +const chatBlock = document.getElementById('chat'); +const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1; + /** * this makes the chat input text area resize vertically to match the text size (limited by CSS at 50% window height) */ function autoFitSendTextArea() { - const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1; - /**@type {HTMLDivElement} */ - const chatBlock = document.querySelector('#chat'); const originalScrollBottom = chatBlock.scrollHeight - (chatBlock.scrollTop + chatBlock.offsetHeight); if (sendTextArea.scrollHeight == sendTextArea.offsetHeight) { - sendTextArea.style.height = window.getComputedStyle(sendTextArea).getPropertyValue('min-height'); + // Needs to be pulled dynamically because it is affected by font size changes + const sendTextAreaMinHeight = window.getComputedStyle(sendTextArea).getPropertyValue('min-height'); + sendTextArea.style.height = sendTextAreaMinHeight; } sendTextArea.style.height = sendTextArea.scrollHeight + 0.3 + 'px'; @@ -843,8 +845,8 @@ export function initRossMods() { saveSettingsDebounced(); }); - $(sendTextArea).on('input', ()=>{ - if (sendTextArea.scrollHeight > sendTextArea.offsetHeight) { + $(sendTextArea).on('input', () => { + if (sendTextArea.scrollHeight > sendTextArea.offsetHeight || sendTextArea.value === '') { autoFitSendTextArea(); } else { autoFitSendTextAreaDebounced();