rixty/SillyTavern
1
0
Fork 0
mirror of https://github.com/SillyTavern/SillyTavern.git synced 2025-06-05 21:59:27 +02:00
Code Issues Packages Projects Releases Wiki Activity

update floating autocomplete position on scroll

Browse Source
This commit is contained in:
LenAnderson
2024-03-31 07:50:44 -04:00
parent d4a6a7f55f
commit ef23930eaf
1 changed files with 22 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
public/scripts/slash-commands.js
View File

@ -2123,22 +2123,7 @@ export function setNewSlashCommandAutoComplete(textarea, isFloating = false) {
}
selectedItem = result[0];
if (isFloating) {
const location = getCursorPosition();
if (location.y <= window.innerHeight / 2) {
dom.style.top = `${location.bottom}px`;
dom.style.bottom = 'auto';
dom.style.left = `${location.left}px`;
dom.style.right = 'auto';
dom.style.maxWidth = `calc(99vw - ${location.left}px)`;
dom.style.maxHeight = `calc(99vh - ${location.bottom}px)`;
} else {
dom.style.top = 'auto';
dom.style.bottom = `calc(100vh - ${location.top}px)`;
dom.style.left = `${location.left}px`;
dom.style.right = 'auto';
dom.style.maxWidth = `calc(99vw - ${location.left}px)`;
dom.style.maxHeight = `calc(99vh - ${location.top}px)`;
}
updatePosition();
} else {
const rect = textarea.getBoundingClientRect();
dom.style.setProperty('--bottom', `${window.innerHeight - rect.top}px`);
@ -2149,6 +2134,24 @@ export function setNewSlashCommandAutoComplete(textarea, isFloating = false) {
document.body.append(dom);
isActive = true;
};
const updatePosition = () => {
const location = getCursorPosition();
if (location.y <= window.innerHeight / 2) {
dom.style.top = `${location.bottom}px`;
dom.style.bottom = 'auto';
dom.style.left = `${location.left}px`;
dom.style.right = 'auto';
dom.style.maxWidth = `calc(99vw - ${location.left}px)`;
dom.style.maxHeight = `calc(99vh - ${location.bottom}px)`;
} else {
dom.style.top = 'auto';
dom.style.bottom = `calc(100vh - ${location.top}px)`;
dom.style.left = `${location.left}px`;
dom.style.right = 'auto';
dom.style.maxWidth = `calc(99vw - ${location.left}px)`;
dom.style.maxHeight = `calc(99vh - ${location.top}px)`;
}
};
const getCursorPosition = () => {
const inputRect = textarea.getBoundingClientRect();
clone?.remove();
@ -2278,6 +2281,9 @@ export function setNewSlashCommandAutoComplete(textarea, isFloating = false) {
showAutoCompleteDebounced();
});
textarea.addEventListener('blur', ()=>hide());
if (isFloating) {
textarea.addEventListener('scroll', debounce(updatePosition, 100));
}
}
jQuery(function () {