Anchor contact flyout
This commit is contained in:
38
script.js
38
script.js
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user