extern/glance
1
0
Fork 0
mirror of https://github.com/glanceapp/glance.git synced 2025-06-24 11:51:31 +02:00
Code Issues Packages Projects Releases Wiki Activity

Allow changing popover anchor

Browse Source
This commit is contained in:
Svilen Markov 2024-08-20 16:19:21 +01:00
parent 8860f4591b
commit 895c3f2f97
1 changed files with 8 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
internal/assets/static/js/popover.js
View File

@ -96,21 +96,24 @@ function showPopover() {
} }
function repositionContainer() { function repositionContainer() {
const targetBounds = activeTarget.getBoundingClientRect(); const targetBounds = activeTarget.dataset.popoverAnchor !== undefined
? activeTarget.querySelector(activeTarget.dataset.popoverAnchor).getBoundingClientRect()
: activeTarget.getBoundingClientRect();
const containerBounds = containerElement.getBoundingClientRect(); const containerBounds = containerElement.getBoundingClientRect();
const containerInlinePadding = parseInt(containerComputedStyle.getPropertyValue("padding-inline")); const containerInlinePadding = parseInt(containerComputedStyle.getPropertyValue("padding-inline"));
const activeTargetBoundsWidthOffset = targetBounds.width * (activeTarget.dataset.popoverOffset || 0.5); const targetBoundsWidthOffset = targetBounds.width * (activeTarget.dataset.popoverOffset || 0.5);
const position = activeTarget.dataset.popoverPosition || "below"; const position = activeTarget.dataset.popoverPosition || "below";
const left = targetBounds.left + activeTargetBoundsWidthOffset - (containerBounds.width / 2) + 1; const left = Math.round(targetBounds.left + targetBoundsWidthOffset - (containerBounds.width / 2));
if (left < 0) { if (left < 0) {
containerElement.style.left = 0; containerElement.style.left = 0;
containerElement.style.removeProperty("right"); containerElement.style.removeProperty("right");
containerElement.style.setProperty("--triangle-offset", targetBounds.left - containerInlinePadding + activeTargetBoundsWidthOffset + "px"); containerElement.style.setProperty("--triangle-offset", targetBounds.left - containerInlinePadding + targetBoundsWidthOffset + "px");
} else if (left + containerBounds.width > window.innerWidth) { } else if (left + containerBounds.width > window.innerWidth) {
containerElement.style.removeProperty("left"); containerElement.style.removeProperty("left");
containerElement.style.right = 0; containerElement.style.right = 0;
containerElement.style.setProperty("--triangle-offset", containerBounds.width - containerInlinePadding - (window.innerWidth - targetBounds.left - activeTargetBoundsWidthOffset) + "px"); containerElement.style.setProperty("--triangle-offset", containerBounds.width - containerInlinePadding - (window.innerWidth - targetBounds.left - targetBoundsWidthOffset) + "px");
} else { } else {
containerElement.style.removeProperty("right"); containerElement.style.removeProperty("right");
containerElement.style.left = left + "px"; containerElement.style.left = left + "px";