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

use textarea-owning layer instead of topmost modal layer

This commit is contained in:
LenAnderson 2024-07-25 18:06:48 -04:00
parent 19c7e1c763
commit 646f77f9f8
1 changed files with 13 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
public/scripts/autocomplete/AutoComplete.js
View File

@ -463,7 +463,7 @@ export class AutoComplete {
} }
this.dom.append(frag); this.dom.append(frag);
this.updatePosition(); this.updatePosition();
getTopmostModalLayer().append(this.domWrap); this.getLayer().append(this.domWrap);
} else { } else {
this.domWrap.remove(); this.domWrap.remove();
} }
@ -478,10 +478,17 @@ export class AutoComplete {
if (!this.isShowingDetails && this.isReplaceable) return this.detailsWrap.remove(); if (!this.isShowingDetails && this.isReplaceable) return this.detailsWrap.remove();
this.detailsDom.innerHTML = ''; this.detailsDom.innerHTML = '';
this.detailsDom.append(this.selectedItem?.renderDetails() ?? 'NO ITEM'); this.detailsDom.append(this.selectedItem?.renderDetails() ?? 'NO ITEM');
getTopmostModalLayer().append(this.detailsWrap); this.getLayer().append(this.detailsWrap);
this.updateDetailsPositionDebounced(); this.updateDetailsPositionDebounced();
} }
/**
* @returns {HTMLElement} closest ancestor dialog or body
*/
getLayer() {
return this.textarea.closest('dialog, body');
}
/** /**
@ -494,7 +501,7 @@ export class AutoComplete {
const rect = {}; const rect = {};
rect[AUTOCOMPLETE_WIDTH.INPUT] = this.textarea.getBoundingClientRect(); rect[AUTOCOMPLETE_WIDTH.INPUT] = this.textarea.getBoundingClientRect();
rect[AUTOCOMPLETE_WIDTH.CHAT] = document.querySelector('#sheld').getBoundingClientRect(); rect[AUTOCOMPLETE_WIDTH.CHAT] = document.querySelector('#sheld').getBoundingClientRect();
rect[AUTOCOMPLETE_WIDTH.FULL] = getTopmostModalLayer().getBoundingClientRect(); rect[AUTOCOMPLETE_WIDTH.FULL] = this.getLayer().getBoundingClientRect();
this.domWrap.style.setProperty('--bottom', `${window.innerHeight - rect[AUTOCOMPLETE_WIDTH.INPUT].top}px`); this.domWrap.style.setProperty('--bottom', `${window.innerHeight - rect[AUTOCOMPLETE_WIDTH.INPUT].top}px`);
this.dom.style.setProperty('--bottom', `${window.innerHeight - rect[AUTOCOMPLETE_WIDTH.INPUT].top}px`); this.dom.style.setProperty('--bottom', `${window.innerHeight - rect[AUTOCOMPLETE_WIDTH.INPUT].top}px`);
this.domWrap.style.bottom = `${window.innerHeight - rect[AUTOCOMPLETE_WIDTH.INPUT].top}px`; this.domWrap.style.bottom = `${window.innerHeight - rect[AUTOCOMPLETE_WIDTH.INPUT].top}px`;
@ -521,7 +528,7 @@ export class AutoComplete {
const rect = {}; const rect = {};
rect[AUTOCOMPLETE_WIDTH.INPUT] = this.textarea.getBoundingClientRect(); rect[AUTOCOMPLETE_WIDTH.INPUT] = this.textarea.getBoundingClientRect();
rect[AUTOCOMPLETE_WIDTH.CHAT] = document.querySelector('#sheld').getBoundingClientRect(); rect[AUTOCOMPLETE_WIDTH.CHAT] = document.querySelector('#sheld').getBoundingClientRect();
rect[AUTOCOMPLETE_WIDTH.FULL] = getTopmostModalLayer().getBoundingClientRect(); rect[AUTOCOMPLETE_WIDTH.FULL] = this.getLayer().getBoundingClientRect();
if (this.isReplaceable) { if (this.isReplaceable) {
this.detailsWrap.classList.remove('full'); this.detailsWrap.classList.remove('full');
const selRect = this.selectedItem.dom.children[0].getBoundingClientRect(); const selRect = this.selectedItem.dom.children[0].getBoundingClientRect();
@ -547,7 +554,7 @@ export class AutoComplete {
updateFloatingPosition() { updateFloatingPosition() {
const location = this.getCursorPosition(); const location = this.getCursorPosition();
const rect = this.textarea.getBoundingClientRect(); const rect = this.textarea.getBoundingClientRect();
const layerRect = this.textarea.closest('dialog, body').getBoundingClientRect(); const layerRect = this.getLayer().getBoundingClientRect();
// cursor is out of view -> hide // cursor is out of view -> hide
if (location.bottom < rect.top || location.top > rect.bottom || location.left < rect.left || location.left > rect.right) { if (location.bottom < rect.top || location.top > rect.bottom || location.left < rect.left || location.left > rect.right) {
return this.hide(); return this.hide();
@ -570,7 +577,7 @@ export class AutoComplete {
updateFloatingDetailsPosition(location = null) { updateFloatingDetailsPosition(location = null) {
if (!location) location = this.getCursorPosition(); if (!location) location = this.getCursorPosition();
const rect = this.textarea.getBoundingClientRect(); const rect = this.textarea.getBoundingClientRect();
const layerRect = this.textarea.closest('dialog, body').getBoundingClientRect(); const layerRect = this.getLayer().getBoundingClientRect();
if (location.bottom < rect.top || location.top > rect.bottom || location.left < rect.left || location.left > rect.right) { if (location.bottom < rect.top || location.top > rect.bottom || location.left < rect.left || location.left > rect.right) {
return this.hide(); return this.hide();
} }