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>
This commit is contained in:
Succubyss 2024-07-01 12:36:18 -05:00 committed by GitHub
parent 2b30555f3a
commit e1e0ef8730
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 19 additions and 5 deletions

View File

@ -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;
}
});

View File

@ -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. */