diff --git a/public/scripts/RossAscends-mods.js b/public/scripts/RossAscends-mods.js index da93d1ed7..bae2ff6ea 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: @@ -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) - $('#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).on('input', () => { + if (sendTextArea.scrollHeight > sendTextArea.offsetHeight || sendTextArea.value === '') { + autoFitSendTextArea(); + } else { + autoFitSendTextAreaDebounced(); } - 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; } } }