Merge pull request #1968 from LenAnderson/debounce-processHotkeys

Call processHotkeys debounced (RossAscends-mods)

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:
 
@@ -658,6 +659,30 @@ 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 originalScrollBottom = chatBlock.scrollHeight - (chatBlock.scrollTop + chatBlock.offsetHeight);
+    if (sendTextArea.scrollHeight == sendTextArea.offsetHeight) {
+        // 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';
+
+    if (!isFirefox) {
+        const newScrollTop = Math.round(chatBlock.scrollHeight - (chatBlock.offsetHeight + originalScrollBottom));
+        chatBlock.scrollTop = newScrollTop;
+    }
+}
+export const autoFitSendTextAreaDebounced = debounce(autoFitSendTextArea);
+
 // ---------------------------------------------------
 
 export function initRossMods() {
@@ -820,19 +845,13 @@ 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)
+    $(sendTextArea).on('input', () => {
-    $('#send_textarea').on('input', function () {
+        if (sendTextArea.scrollHeight > sendTextArea.offsetHeight || sendTextArea.value === '') {
-        const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
+            autoFitSendTextArea();
-        const chatBlock = $('#chat');
+        } else {
-        const originalScrollBottom = chatBlock[0].scrollHeight - (chatBlock.scrollTop() + chatBlock.outerHeight());
+            autoFitSendTextAreaDebounced();
-        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);
         }
-        saveUserInput();
+        saveUserInputDebounced();
     });
 
     restoreUserInput();
@@ -887,23 +906,30 @@ export function initRossMods() {
         processHotkeys(event.originalEvent);
     });
 
+    const hotkeyTargets = {
+        'send_textarea': sendTextArea,
+        'dialogue_popup_input': document.querySelector('#dialogue_popup_input'),
+    };
+
     //Additional hotkeys CTRL+ENTER and CTRL+UPARROW
     /**
      * @param {KeyboardEvent} event
      */
     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
@@ -915,6 +941,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') {
@@ -922,6 +949,7 @@ export function initRossMods() {
             $('#chat').animate({
                 scrollTop: $('#chat').prop('scrollHeight'),
             }, 300);
+            return;
         }
 
         // Alt+Enter or AltGr+Enter to Continue
@@ -929,6 +957,7 @@ export function initRossMods() {
             if (is_send_press == false) {
                 console.debug('Continuing with Alt+Enter');
                 $('#option_continue').trigger('click');
+                return;
             }
         }
 
@@ -938,6 +967,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);
@@ -964,6 +994,7 @@ export function initRossMods() {
                         doRegenerate();
                     });
                 }
+                return;
             } else {
                 console.debug('Ctrl+Enter ignored');
             }
@@ -972,7 +1003,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
@@ -985,6 +1016,7 @@ export function initRossMods() {
                 !isInputElementInFocus()
             ) {
                 $('.swipe_left:last').click();
+                return;
             }
         }
         if (event.key == 'ArrowRight') { //swipes right
@@ -997,13 +1029,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' &&
@@ -1014,6 +1047,7 @@ export function initRossMods() {
                 const editMes = lastIsUserMes.querySelector('.mes_block .mes_edit');
                 if (editMes !== null) {
                     $(editMes).trigger('click');
+                    return;
                 }
             }
         }
@@ -1021,7 +1055,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') &&
@@ -1032,6 +1066,7 @@ export function initRossMods() {
                 const editMes = lastMes.querySelector('.mes_block .mes_edit');
                 if (editMes !== null) {
                     $(editMes).click();
+                    return;
                 }
             }
         }