From e1e0ef8730b7c81641706783dd46673ad999aae1 Mon Sep 17 00:00:00 2001 From: Succubyss <87207237+Succubyss@users.noreply.github.com> Date: Mon, 1 Jul 2024 12:36:18 -0500 Subject: [PATCH] Augment Edit Box Input Enfasterment (#2450) * edit box performance "fix" Note: jQuery makes an adjustment to height or scrollHeight that pure JavaScript doesn't;+2 was the minimum I needed to not get a vertical scrollbar, so I went with +4 * Refactor * Use debounce instead of throttle --------- Co-authored-by: Cohee <18619528+Cohee1207@users.noreply.github.com> --- public/script.js | 22 +++++++++++++++++----- public/scripts/constants.js | 2 ++ 2 files changed, 19 insertions(+), 5 deletions(-) diff --git a/public/script.js b/public/script.js index 552df4e8a..cca7407e7 100644 --- a/public/script.js +++ b/public/script.js @@ -9169,14 +9169,26 @@ jQuery(async function () { chooseBogusFolder($(this), tagId); }); - $(document).on('input', '.edit_textarea', function () { - scroll_holder = $('#chat').scrollTop(); - $(this).height(0).height(this.scrollHeight); + /** + * Sets the scroll height of the edit textarea to fit the content. + * @param {HTMLTextAreaElement} e Textarea element to auto-fit + */ + function autoFitEditTextArea(e) { + scroll_holder = chatElement[0].scrollTop; + e.style.height = '0'; + e.style.height = `${e.scrollHeight + 4}px`; is_use_scroll_holder = true; + } + const autoFitEditTextAreaDebounced = debounce(autoFitEditTextArea, debounce_timeout.short); + document.addEventListener('input', e => { + if (e.target instanceof HTMLTextAreaElement && e.target.classList.contains('edit_textarea')) { + const immediately = e.target.scrollHeight > e.target.offsetHeight || e.target.value === ''; + immediately ? autoFitEditTextArea(e.target) : autoFitEditTextAreaDebounced(e.target); + } }); - $('#chat').on('scroll', function () { + document.getElementById('chat').addEventListener('scroll', function () { if (is_use_scroll_holder) { - $('#chat').scrollTop(scroll_holder); + this.scrollTop = scroll_holder; is_use_scroll_holder = false; } }); diff --git a/public/scripts/constants.js b/public/scripts/constants.js index c70b3af63..f95a8e146 100644 --- a/public/scripts/constants.js +++ b/public/scripts/constants.js @@ -5,6 +5,8 @@ export const debounce_timeout = { /** [100 ms] For ultra-fast responses, typically for keypresses or executions that might happen multiple times in a loop or recursion. */ quick: 100, + /** [200 ms] Slightly slower than quick, but still very responsive. */ + short: 200, /** [300 ms] Default time for general use, good balance between responsiveness and performance. */ standard: 300, /** [1.000 ms] For situations where the function triggers more intensive tasks. */