118 lines
3.5 KiB
JavaScript
118 lines
3.5 KiB
JavaScript
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 privacyFlyover = document.querySelector("[data-privacy-flyover]");
|
|
const openPrivacyButtons = document.querySelectorAll("[data-open-privacy]");
|
|
const closePrivacyButtons = document.querySelectorAll("[data-close-privacy]");
|
|
const copyButtons = document.querySelectorAll("[data-copy-value]");
|
|
let lastTrigger = null;
|
|
|
|
const positionFlyover = (trigger) => {
|
|
if (!flyover || !flyoverPanel || !trigger) return;
|
|
|
|
const isMobile = window.innerWidth <= 768;
|
|
const rect = trigger.getBoundingClientRect();
|
|
const gap = 16;
|
|
const panelHeight = flyoverPanel.offsetHeight;
|
|
|
|
if (isMobile) {
|
|
flyover.style.removeProperty("--flyover-top");
|
|
flyover.style.removeProperty("--flyover-left");
|
|
return;
|
|
}
|
|
|
|
const panelWidth = Math.min(546, window.innerWidth - 32);
|
|
const preferredLeft = rect.right + gap;
|
|
const maxLeft = window.innerWidth - panelWidth - gap;
|
|
const left = Math.min(preferredLeft, maxLeft);
|
|
const maxTop = Math.max(gap, window.innerHeight - panelHeight - gap);
|
|
const top = Math.min(Math.max(gap, rect.top - 10), maxTop);
|
|
|
|
flyover.style.setProperty("--flyover-left", `${left}px`);
|
|
flyover.style.setProperty("--flyover-top", `${top}px`);
|
|
};
|
|
|
|
const openFlyover = (trigger) => {
|
|
if (!flyover) return;
|
|
lastTrigger = trigger ?? null;
|
|
flyover.hidden = false;
|
|
positionFlyover(trigger);
|
|
document.body.classList.add("is-scroll-locked");
|
|
};
|
|
|
|
const closeFlyover = () => {
|
|
if (!flyover) return;
|
|
flyover.hidden = true;
|
|
if (!privacyFlyover || privacyFlyover.hidden) {
|
|
document.body.classList.remove("is-scroll-locked");
|
|
}
|
|
};
|
|
|
|
const openPrivacyFlyover = () => {
|
|
if (!privacyFlyover) return;
|
|
privacyFlyover.hidden = false;
|
|
document.body.classList.add("is-scroll-locked");
|
|
};
|
|
|
|
const closePrivacyFlyover = () => {
|
|
if (!privacyFlyover) return;
|
|
privacyFlyover.hidden = true;
|
|
if (!flyover || flyover.hidden) {
|
|
document.body.classList.remove("is-scroll-locked");
|
|
}
|
|
};
|
|
|
|
openButtons.forEach((button) => {
|
|
button.addEventListener("click", () => openFlyover(button));
|
|
});
|
|
|
|
closeButtons.forEach((button) => {
|
|
button.addEventListener("click", closeFlyover);
|
|
});
|
|
|
|
openPrivacyButtons.forEach((button) => {
|
|
button.addEventListener("click", openPrivacyFlyover);
|
|
});
|
|
|
|
closePrivacyButtons.forEach((button) => {
|
|
button.addEventListener("click", closePrivacyFlyover);
|
|
});
|
|
|
|
document.addEventListener("keydown", (event) => {
|
|
if (event.key === "Escape" && flyover && !flyover.hidden) {
|
|
closeFlyover();
|
|
}
|
|
|
|
if (event.key === "Escape" && privacyFlyover && !privacyFlyover.hidden) {
|
|
closePrivacyFlyover();
|
|
}
|
|
});
|
|
|
|
window.addEventListener("resize", () => {
|
|
if (flyover && !flyover.hidden && lastTrigger) {
|
|
positionFlyover(lastTrigger);
|
|
}
|
|
});
|
|
|
|
copyButtons.forEach((button) => {
|
|
button.addEventListener("click", async () => {
|
|
const value = button.dataset.copyValue;
|
|
if (!value) return;
|
|
|
|
try {
|
|
await navigator.clipboard.writeText(value);
|
|
const label = button.querySelector("span");
|
|
button.classList.add("is-copied");
|
|
if (label) label.textContent = "Kopiert";
|
|
|
|
window.setTimeout(() => {
|
|
button.classList.remove("is-copied");
|
|
if (label) label.textContent = "Kopieren";
|
|
}, 1800);
|
|
} catch (error) {
|
|
console.error("Copy failed", error);
|
|
}
|
|
});
|
|
});
|