rixty
/
SillyTavern
mirror of https://github.com/SillyTavern/SillyTavern.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

autocomplete positioning

This commit is contained in:
LenAnderson 2024-04-05 10:41:45 -04:00
parent 35f2770d6e
commit 67eca6a50b
1 changed files with 19 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2148,8 +2148,13 @@ export function setNewSlashCommandAutoComplete(textarea, isFloating = false) {
} }
} }
selectedItem = result[0]; selectedItem = result[0];
updatePosition();
document.body.append(dom);
isActive = true;
};
const updatePosition = () => {
if (isFloating) { if (isFloating) {
updatePosition(); updateFloatingPosition();
} else { } else {
const rect = textarea.getBoundingClientRect(); const rect = textarea.getBoundingClientRect();
dom.style.setProperty('--bottom', `${window.innerHeight - rect.top}px`); dom.style.setProperty('--bottom', `${window.innerHeight - rect.top}px`);
@ -2157,25 +2162,26 @@ export function setNewSlashCommandAutoComplete(textarea, isFloating = false) {
dom.style.left = `${rect.left}px`; dom.style.left = `${rect.left}px`;
dom.style.right = `${window.innerWidth - rect.right}px`; dom.style.right = `${window.innerWidth - rect.right}px`;
} }
document.body.append(dom);
isActive = true;
}; };
const updatePosition = () => { const updateFloatingPosition = () => {
const location = getCursorPosition(); const location = getCursorPosition();
if (location.y <= window.innerHeight / 2) { const rect = textarea.getBoundingClientRect();
if (location.bottom < rect.top || location.top > rect.bottom || location.left < rect.left || location.left > rect.right) return hide();
const left = Math.max(rect.left, location.left);
if (location.top <= window.innerHeight / 2) {
dom.style.top = `${location.bottom}px`; dom.style.top = `${location.bottom}px`;
dom.style.bottom = 'auto'; dom.style.bottom = 'auto';
dom.style.left = `${location.left}px`; dom.style.left = `${left}px`;
dom.style.right = 'auto'; dom.style.right = 'auto';
dom.style.maxWidth = `calc(99vw - ${location.left}px)`; dom.style.maxWidth = `calc(99vw - ${left}px)`;
dom.style.maxHeight = `calc(99vh - ${location.bottom}px)`; dom.style.maxHeight = `calc(${location.bottom}px - 1vh)`;
} else { } else {
dom.style.top = 'auto'; dom.style.top = 'auto';
dom.style.bottom = `calc(100vh - ${location.top}px)`; dom.style.bottom = `calc(100vh - ${location.top}px)`;
dom.style.left = `${location.left}px`; dom.style.left = `${left}px`;
dom.style.right = 'auto'; dom.style.right = 'auto';
dom.style.maxWidth = `calc(99vw - ${location.left}px)`; dom.style.maxWidth = `calc(99vw - ${left}px)`;
dom.style.maxHeight = `calc(99vh - ${location.top}px)`; dom.style.maxHeight = `calc(${location.top}px - 1vh)`;
} }
}; };
const getCursorPosition = () => { const getCursorPosition = () => {
@ -2309,8 +2315,9 @@ export function setNewSlashCommandAutoComplete(textarea, isFloating = false) {
}); });
textarea.addEventListener('blur', ()=>hide()); textarea.addEventListener('blur', ()=>hide());
if (isFloating) { if (isFloating) {
textarea.addEventListener('scroll', debounce(updatePosition, 100)); textarea.addEventListener('scroll', debounce(updateFloatingPosition, 100));
} }
window.addEventListener('resize', debounce(updatePosition, 100));
} }
jQuery(function () { jQuery(function () {