fabiennefoehn/script.js

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 privacyFlyoverPanel = document.querySelector(".privacy-flyover__panel");
const openPrivacyButtons = document.querySelectorAll("[data-open-privacy]");
const closePrivacyButtons = document.querySelectorAll("[data-close-privacy]");
const copyButtons = document.querySelectorAll("[data-copy-value]");
let lastTrigger = null;
let lastPrivacyTrigger = 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 positionPrivacyFlyover = (trigger) => {
  if (!privacyFlyover || !privacyFlyoverPanel || !trigger) return;

  const isMobile = window.innerWidth <= 768;
  const rect = trigger.getBoundingClientRect();
  const gap = 16;
  const panelHeight = privacyFlyoverPanel.offsetHeight;

  if (isMobile) {
    privacyFlyover.style.removeProperty("--privacy-flyover-top");
    privacyFlyover.style.removeProperty("--privacy-flyover-left");
    return;
  }

  const panelWidth = Math.min(680, 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);

  privacyFlyover.style.setProperty("--privacy-flyover-left", `${left}px`);
  privacyFlyover.style.setProperty("--privacy-flyover-top", `${top}px`);
};

const closeFlyover = () => {
  if (!flyover) return;
  flyover.hidden = true;
  if (!privacyFlyover || privacyFlyover.hidden) {
    document.body.classList.remove("is-scroll-locked");
  }
};

const openPrivacyFlyover = (trigger) => {
  if (!privacyFlyover) return;
  lastPrivacyTrigger = trigger ?? null;
  privacyFlyover.hidden = false;
  positionPrivacyFlyover(trigger);
  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(button));
});

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);
  }

  if (privacyFlyover && !privacyFlyover.hidden && lastPrivacyTrigger) {
    positionPrivacyFlyover(lastPrivacyTrigger);
  }
});

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);
    }
  });
});