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>

e1e0ef8730b7c81641706783dd46673ad999aae1

Succubyss <87207237+Succubyss@users.noreply.github.com>

Signed
2 files changed, +19 -5Ignore whitespace
public/script.js+17 -5
@@ -9169,14 +9169,26 @@ jQuery(async function () {
9169 chooseBogusFolder($(this), tagId);9169 chooseBogusFolder($(this), tagId);
9170 });9170 });
91719171
9172 $(document).on('input', '.edit_textarea', function () {9172 /**
9173 scroll_holder = $('#chat').scrollTop();9173 * Sets the scroll height of the edit textarea to fit the content.
9174 $(this).height(0).height(this.scrollHeight);9174 * @param {HTMLTextAreaElement} e Textarea element to auto-fit
9175 */
9176 function autoFitEditTextArea(e) {
9177 scroll_holder = chatElement[0].scrollTop;
9178 e.style.height = '0';
9179 e.style.height = `${e.scrollHeight + 4}px`;
9175 is_use_scroll_holder = true;9180 is_use_scroll_holder = true;
9181 }
9182 const autoFitEditTextAreaDebounced = debounce(autoFitEditTextArea, debounce_timeout.short);
9183 document.addEventListener('input', e => {
9184 if (e.target instanceof HTMLTextAreaElement && e.target.classList.contains('edit_textarea')) {
9185 const immediately = e.target.scrollHeight > e.target.offsetHeight || e.target.value === '';
9186 immediately ? autoFitEditTextArea(e.target) : autoFitEditTextAreaDebounced(e.target);
9187 }
9176 });9188 });
9177 $('#chat').on('scroll', function () {9189 document.getElementById('chat').addEventListener('scroll', function () {
9178 if (is_use_scroll_holder) {9190 if (is_use_scroll_holder) {
9179 $('#chat').scrollTop(scroll_holder);9191 this.scrollTop = scroll_holder;
9180 is_use_scroll_holder = false;9192 is_use_scroll_holder = false;
9181 }9193 }
9182 });9194 });
public/scripts/constants.js+2 -0
@@ -5,6 +5,8 @@
5export const debounce_timeout = {5export const debounce_timeout = {
6 /** [100 ms] For ultra-fast responses, typically for keypresses or executions that might happen multiple times in a loop or recursion. */6 /** [100 ms] For ultra-fast responses, typically for keypresses or executions that might happen multiple times in a loop or recursion. */
7 quick: 100,7 quick: 100,
8 /** [200 ms] Slightly slower than quick, but still very responsive. */
9 short: 200,
8 /** [300 ms] Default time for general use, good balance between responsiveness and performance. */10 /** [300 ms] Default time for general use, good balance between responsiveness and performance. */
9 standard: 300,11 standard: 300,
10 /** [1.000 ms] For situations where the function triggers more intensive tasks. */12 /** [1.000 ms] For situations where the function triggers more intensive tasks. */