Anchor contact flyout

This commit is contained in:
2026-03-22 17:18:35 +01:00
parent d868648aa1
commit f7ef909888
2 changed files with 40 additions and 6 deletions

View File

@@ -1,10 +1,38 @@
const flyover = document.querySelector("[data-contact-flyover]");
const flyoverPanel = document.querySelector(".contact-flyover__panel");
const openButtons = document.querySelectorAll("[data-open-contact]");
const closeButtons = document.querySelectorAll("[data-close-contact]");
const copyButtons = document.querySelectorAll("[data-copy-value]");
let lastTrigger = null;
const openFlyover = () => {
const positionFlyover = (trigger) => {
if (!flyover || !flyoverPanel || !trigger) return;
const isMobile = window.innerWidth <= 768;
const rect = trigger.getBoundingClientRect();
const gap = 16;
if (isMobile) {
const top = Math.min(rect.bottom + gap, window.innerHeight - 320);
flyover.style.setProperty("--flyover-top", `${Math.max(gap, top)}px`);
flyover.style.removeProperty("--flyover-left");
return;
}
const panelWidth = Math.min(420, window.innerWidth - 32);
const preferredLeft = rect.right + gap;
const maxLeft = window.innerWidth - panelWidth - gap;
const left = Math.min(preferredLeft, maxLeft);
const top = Math.max(gap, rect.top - 10);
flyover.style.setProperty("--flyover-left", `${left}px`);
flyover.style.setProperty("--flyover-top", `${top}px`);
};
const openFlyover = (trigger) => {
if (!flyover) return;
lastTrigger = trigger ?? null;
positionFlyover(trigger);
flyover.hidden = false;
document.body.classList.add("is-scroll-locked");
};
@@ -16,7 +44,7 @@ const closeFlyover = () => {
};
openButtons.forEach((button) => {
button.addEventListener("click", openFlyover);
button.addEventListener("click", () => openFlyover(button));
});
closeButtons.forEach((button) => {
@@ -29,6 +57,12 @@ document.addEventListener("keydown", (event) => {
}
});
window.addEventListener("resize", () => {
if (flyover && !flyover.hidden && lastTrigger) {
positionFlyover(lastTrigger);
}
});
copyButtons.forEach((button) => {
button.addEventListener("click", async () => {
const value = button.dataset.copyValue;