From 9d77140ea589e08d86c2d135ae4556f6eb9830fb Mon Sep 17 00:00:00 2001 From: Joe Date: Mon, 21 Oct 2024 03:51:36 -0700 Subject: [PATCH 1/4] Fix: Inconsistent Textarea resizing in small windows --- public/scripts/RossAscends-mods.js | 24 +++++++++++++++--------- 1 file changed, 15 insertions(+), 9 deletions(-) diff --git a/public/scripts/RossAscends-mods.js b/public/scripts/RossAscends-mods.js index ecc31df8b..bfcb8e809 100644 --- a/public/scripts/RossAscends-mods.js +++ b/public/scripts/RossAscends-mods.js @@ -697,20 +697,26 @@ 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) + * Auto-resizes the send message textarea to fit its content, up to a maximum height defined by CSS. + * This function preserves chat scroll position, resets the textarea height for accurate measurement, + * calculates the required height, sets the new height, and then restores the chat scroll position. + * Firefox-specific scrolling adjustments are included for smoother behavior. */ function autoFitSendTextArea() { - const originalScrollBottom = chatBlock.scrollHeight - (chatBlock.scrollTop + chatBlock.offsetHeight); - if (Math.ceil(sendTextArea.scrollHeight + 3) >= Math.floor(sendTextArea.offsetHeight)) { - const sendTextAreaMinHeight = '0px'; - sendTextArea.style.height = sendTextAreaMinHeight; - } - const newHeight = sendTextArea.scrollHeight + 3; + const originalScrollTop = chatBlock.scrollTop; + const originalScrollHeight = chatBlock.scrollHeight; + + sendTextArea.style.height = '1px'; + + const newHeight = sendTextArea.scrollHeight; + sendTextArea.style.height = `${newHeight}px`; + // Restore chat scroll position (Firefox-specific adjustment for smoothness). if (!isFirefox) { - const newScrollTop = Math.round(chatBlock.scrollHeight - (chatBlock.offsetHeight + originalScrollBottom)); - chatBlock.scrollTop = newScrollTop; + chatBlock.scrollTop = originalScrollTop + (chatBlock.scrollHeight - originalScrollHeight); + } else { + chatBlock.scrollTo({ top: chatBlock.scrollHeight, behavior: 'auto' }); } } export const autoFitSendTextAreaDebounced = debounce(autoFitSendTextArea, debounce_timeout.short); From 6e29ad4b50fb1b99e0f3dbeab1fe68f3fa58f23a Mon Sep 17 00:00:00 2001 From: Joe Date: Mon, 21 Oct 2024 03:51:36 -0700 Subject: [PATCH 2/4] Fix: Inconsistent Textarea resizing in small windows --- public/scripts/RossAscends-mods.js | 24 +++++++++++++++--------- 1 file changed, 15 insertions(+), 9 deletions(-) diff --git a/public/scripts/RossAscends-mods.js b/public/scripts/RossAscends-mods.js index 32e4fdcb4..d1fe5f3ec 100644 --- a/public/scripts/RossAscends-mods.js +++ b/public/scripts/RossAscends-mods.js @@ -699,20 +699,26 @@ 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) + * Auto-resizes the send message textarea to fit its content, up to a maximum height defined by CSS. + * This function preserves chat scroll position, resets the textarea height for accurate measurement, + * calculates the required height, sets the new height, and then restores the chat scroll position. + * Firefox-specific scrolling adjustments are included for smoother behavior. */ function autoFitSendTextArea() { - const originalScrollBottom = chatBlock.scrollHeight - (chatBlock.scrollTop + chatBlock.offsetHeight); - if (Math.ceil(sendTextArea.scrollHeight + 3) >= Math.floor(sendTextArea.offsetHeight)) { - const sendTextAreaMinHeight = '0px'; - sendTextArea.style.height = sendTextAreaMinHeight; - } - const newHeight = sendTextArea.scrollHeight + 3; + const originalScrollTop = chatBlock.scrollTop; + const originalScrollHeight = chatBlock.scrollHeight; + + sendTextArea.style.height = '1px'; + + const newHeight = sendTextArea.scrollHeight; + sendTextArea.style.height = `${newHeight}px`; + // Restore chat scroll position (Firefox-specific adjustment for smoothness). if (!isFirefox) { - const newScrollTop = Math.round(chatBlock.scrollHeight - (chatBlock.offsetHeight + originalScrollBottom)); - chatBlock.scrollTop = newScrollTop; + chatBlock.scrollTop = originalScrollTop + (chatBlock.scrollHeight - originalScrollHeight); + } else { + chatBlock.scrollTo({ top: chatBlock.scrollHeight, behavior: 'auto' }); } } export const autoFitSendTextAreaDebounced = debounce(autoFitSendTextArea, debounce_timeout.short); From 328e3622f2340f9516723b0df9d7b23e545eb975 Mon Sep 17 00:00:00 2001 From: Joe Date: Sun, 17 Nov 2024 18:38:38 -0800 Subject: [PATCH 3/4] review: Fix chrome inconsistent scroll and firefox scroll to bottom --- public/scripts/RossAscends-mods.js | 20 ++++++-------------- 1 file changed, 6 insertions(+), 14 deletions(-) diff --git a/public/scripts/RossAscends-mods.js b/public/scripts/RossAscends-mods.js index d1fe5f3ec..391f34ce9 100644 --- a/public/scripts/RossAscends-mods.js +++ b/public/scripts/RossAscends-mods.js @@ -699,26 +699,18 @@ const chatBlock = document.getElementById('chat'); const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1; /** - * Auto-resizes the send message textarea to fit its content, up to a maximum height defined by CSS. - * This function preserves chat scroll position, resets the textarea height for accurate measurement, - * calculates the required height, sets the new height, and then restores the chat scroll position. - * Firefox-specific scrolling adjustments are included for smoother behavior. + * Resizes the chat input textarea vertically to match its text content, up to a maximum height defined in CSS. + * Preserves scroll position in Chrome. In Firefox, the textarea grows to cover the chat history. */ function autoFitSendTextArea() { - const originalScrollTop = chatBlock.scrollTop; - const originalScrollHeight = chatBlock.scrollHeight; - - sendTextArea.style.height = '1px'; - - const newHeight = sendTextArea.scrollHeight; + const originalScrollBottom = chatBlock.scrollHeight - (chatBlock.scrollTop + chatBlock.offsetHeight); + sendTextArea.style.height = '1px'; // Reset height to 1px to force recalculation of scrollHeight + const newHeight = sendTextArea.scrollHeight; sendTextArea.style.height = `${newHeight}px`; - // Restore chat scroll position (Firefox-specific adjustment for smoothness). if (!isFirefox) { - chatBlock.scrollTop = originalScrollTop + (chatBlock.scrollHeight - originalScrollHeight); - } else { - chatBlock.scrollTo({ top: chatBlock.scrollHeight, behavior: 'auto' }); + chatBlock.scrollTop = chatBlock.scrollHeight - (chatBlock.offsetHeight + originalScrollBottom); } } export const autoFitSendTextAreaDebounced = debounce(autoFitSendTextArea, debounce_timeout.short); From 17cce528f8f24e2de321f34bc0bca8ec5c977e1c Mon Sep 17 00:00:00 2001 From: Joe Date: Sun, 17 Nov 2024 18:44:23 -0800 Subject: [PATCH 4/4] Undo docstring changes --- public/scripts/RossAscends-mods.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/public/scripts/RossAscends-mods.js b/public/scripts/RossAscends-mods.js index 391f34ce9..fb55e42dd 100644 --- a/public/scripts/RossAscends-mods.js +++ b/public/scripts/RossAscends-mods.js @@ -699,8 +699,7 @@ const chatBlock = document.getElementById('chat'); const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1; /** - * Resizes the chat input textarea vertically to match its text content, up to a maximum height defined in CSS. - * Preserves scroll position in Chrome. In Firefox, the textarea grows to cover the chat history. + * 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);