xevion/glance
1
0
Fork 0
mirror of https://github.com/Xevion/glance.git synced 2025-12-09 02:07:20 -06:00
Code Issues Packages Projects Releases Wiki Activity

Allow showing popover above & tweaks

Browse Source
This commit is contained in:
Svilen Markov
2024-08-20 13:29:44 +01:00
parent 984f26807e
commit 8860f4591b
2 changed files with 53 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -36,7 +36,7 @@ function handleMouseEnter(event) {
if (activeTarget !== null) {
if (activeTarget !== target) {
hidePopover();
setTimeout(showPopover, 5);
requestAnimationFrame(showPopover);
}
return;
@@ -96,28 +96,45 @@ function showPopover() {
}
function repositionContainer() {
const activeTargetBounds = activeTarget.getBoundingClientRect();
const targetBounds = activeTarget.getBoundingClientRect();
const containerBounds = containerElement.getBoundingClientRect();
const containerInlinePadding = parseInt(containerComputedStyle.getPropertyValue("padding-inline"));
const activeTargetBoundsWidthOffset = activeTargetBounds.width * (activeTarget.dataset.popoverOffset || 0.5);
const left = activeTargetBounds.left + activeTargetBoundsWidthOffset - (containerBounds.width / 2);
const activeTargetBoundsWidthOffset = targetBounds.width * (activeTarget.dataset.popoverOffset || 0.5);
const position = activeTarget.dataset.popoverPosition || "below";
const left = targetBounds.left + activeTargetBoundsWidthOffset - (containerBounds.width / 2) + 1;
if (left < 0) {
containerElement.style.left = 0;
containerElement.style.removeProperty("right");
containerElement.style.setProperty("--triangle-offset", activeTargetBounds.left - containerInlinePadding + activeTargetBoundsWidthOffset + "px");
containerElement.style.setProperty("--triangle-offset", targetBounds.left - containerInlinePadding + activeTargetBoundsWidthOffset + "px");
} else if (left + containerBounds.width > window.innerWidth) {
containerElement.style.removeProperty("left");
containerElement.style.right = 0;
containerElement.style.setProperty("--triangle-offset", containerBounds.width - containerInlinePadding - (window.innerWidth - activeTargetBounds.left - activeTargetBoundsWidthOffset) + "px");
containerElement.style.setProperty("--triangle-offset", containerBounds.width - containerInlinePadding - (window.innerWidth - targetBounds.left - activeTargetBoundsWidthOffset) + "px");
} else {
containerElement.style.removeProperty("right");
containerElement.style.left = left + "px";
containerElement.style.removeProperty("--triangle-offset");
}
frameElement.style.marginTop = activeTarget.dataset.popoverMargin || defaultDistanceFromTarget;
containerElement.style.top = activeTargetBounds.top + window.scrollY + activeTargetBounds.height + "px";
const distanceFromTarget = activeTarget.dataset.popoverMargin || defaultDistanceFromTarget;
const topWhenAbove = targetBounds.top + window.scrollY - containerBounds.height;
const topWhenBelow = targetBounds.top + window.scrollY + targetBounds.height;
if (
position === "above" && topWhenAbove > window.scrollY ||
(position === "below" && topWhenBelow + containerBounds.height > window.scrollY + window.innerHeight)
) {
containerElement.classList.add("position-above");
frameElement.style.removeProperty("margin-top");
frameElement.style.marginBottom = distanceFromTarget;
containerElement.style.top = topWhenAbove + "px";
} else {
containerElement.classList.remove("position-above");
frameElement.style.removeProperty("margin-bottom");
frameElement.style.marginTop = distanceFromTarget;
containerElement.style.top = topWhenBelow + "px";
}
}
function hidePopover() {