DEV: Dynamically set popper placement (#174)
This commit is contained in:
parent
7457feced8
commit
494964c51d
|
@ -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",
|
||||
|
|
|
@ -53,6 +53,7 @@
|
|||
|
||||
&.out-of-bounds {
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
|
|
Loading…
Reference in New Issue