DEV: Dynamically set popper placement (#174)

This commit is contained in:
Keegan George 2023-08-29 11:19:25 -07:00 committed by GitHub
parent 7457feced8
commit 494964c51d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 2 deletions

View File

@ -45,6 +45,7 @@ export default class AiHelperContextMenu extends Component {
@tracked lastUsedOption = null;
@tracked showDiffModal = false;
@tracked diff;
@tracked popperPlacement = "top-start";
CONTEXT_MENU_STATES = {
triggers: "TRIGGERS",
@ -205,12 +206,21 @@ export default class AiHelperContextMenu extends Component {
}
handleBoundaries() {
const boundaryElement = document
const textAreaWrapper = document
.querySelector(".d-editor-textarea-wrapper")
.getBoundingClientRect();
const buttonBar = document
.querySelector(".d-editor-button-bar")
.getBoundingClientRect();
const boundaryElement = {
top: buttonBar.bottom,
bottom: textAreaWrapper.bottom,
};
const contextMenuRect = this._contextMenu.getBoundingClientRect();
// Hide context menu if it's scrolled out of bounds:
if (contextMenuRect.top < boundaryElement.top) {
this._contextMenu.classList.add("out-of-bounds");
} else if (contextMenuRect.bottom > boundaryElement.bottom) {
@ -218,6 +228,13 @@ export default class AiHelperContextMenu extends Component {
} else {
this._contextMenu.classList.remove("out-of-bounds");
}
// Position context menu at based on if interfering with button bar
if (this.caretCoords.y - contextMenuRect.height < boundaryElement.top) {
this.popperPlacement = "bottom-start";
} else {
this.popperPlacement = "top-start";
}
}
@afterRender
@ -240,7 +257,7 @@ export default class AiHelperContextMenu extends Component {
};
this._popper = createPopper(this.virtualElement, this._contextMenu, {
placement: "top-start",
placement: this.popperPlacement,
modifiers: [
{
name: "offset",

View File

@ -53,6 +53,7 @@
&.out-of-bounds {
visibility: hidden;
pointer-events: none;
}
ul {