physiotherapie-adolphsen/assets/js/main.js

document.addEventListener("DOMContentLoaded", () => {
  const currentYear = document.getElementById("currentYear");
  if (currentYear) {
    currentYear.textContent = String(new Date().getFullYear());
  }

  const navbar = document.getElementById("mainNav");
  if (navbar) {
    const collapseElement = navbar.querySelector(".navbar-collapse");
    const navLinks = navbar.querySelectorAll(".nav-link");
    const collapse = collapseElement ? bootstrap.Collapse.getOrCreateInstance(collapseElement, { toggle: false }) : null;

    navLinks.forEach((link) => {
      link.addEventListener("click", () => {
        if (window.innerWidth < 992 && collapse) {
          collapse.hide();
        }
      });
    });
  }

  setupConsentManager();
  setupTopLink();
});

const consentStorageKey = "paConsentPreferencesV1";

function getStoredConsent() {
  try {
    const raw = localStorage.getItem(consentStorageKey);
    return raw ? JSON.parse(raw) : null;
  } catch {
    return null;
  }
}

function storeConsent(consent) {
  localStorage.setItem(consentStorageKey, JSON.stringify(consent));
}

function loadMatomo() {
  if (window.__matomoLoaded) {
    return;
  }

  window.__matomoLoaded = true;
  const _paq = (window._paq = window._paq || []);
  _paq.push(["trackPageView"]);
  _paq.push(["enableLinkTracking"]);

  const u = "https://piwik.webfarben.net/";
  _paq.push(["setTrackerUrl", u + "matomo.php"]);
  _paq.push(["setSiteId", "5"]);

  const d = document;
  const g = d.createElement("script");
  const s = d.getElementsByTagName("script")[0];
  g.async = true;
  g.src = u + "matomo.js";
  s.parentNode.insertBefore(g, s);
}

function setupConsentManager() {
  const existingConsent = getStoredConsent();
  if (existingConsent?.analytics) {
    loadMatomo();
  }

  injectConsentUi();

  if (!existingConsent) {
    openConsentBanner();
  }
}

function injectConsentUi() {
  const panel = document.createElement("aside");
  panel.id = "consentPanel";
  panel.className = "consent-panel";
  panel.innerHTML =
    '<h2>Datenschutz-Einstellungen</h2>' +
    '<p>Wir verwenden Matomo zur anonymisierten Reichweitenmessung. Sie entscheiden, ob Statistik-Cookies gesetzt werden.</p>' +
    '<div class="consent-options">' +
    '<label class="consent-option">' +
    '<input id="consentAnalytics" type="checkbox" />' +
    '<span>Statistik (Matomo) erlauben</span>' +
    "</label>" +
    "</div>" +
    '<div class="consent-actions">' +
    '<button type="button" id="consentAcceptAll" class="btn btn-brand btn-sm">Alle akzeptieren</button>' +
    '<button type="button" id="consentEssential" class="btn btn-outline-secondary btn-sm">Nur notwendig</button>' +
    '<button type="button" id="consentSave" class="btn btn-outline-light btn-sm">Auswahl speichern</button>' +
    "</div>";

  const trigger = document.createElement("button");
  trigger.type = "button";
  trigger.id = "consentOpenButton";
  trigger.className = "consent-open-button";
  trigger.textContent = "Cookie-Einstellungen";

  document.body.append(panel, trigger);

  const analyticsInput = document.getElementById("consentAnalytics");
  const consent = getStoredConsent();
  if (consent?.analytics && analyticsInput) {
    analyticsInput.checked = true;
  }

  trigger.addEventListener("click", openConsentBanner);

  document.getElementById("consentAcceptAll")?.addEventListener("click", () => {
    saveConsent({ analytics: true });
    if (analyticsInput) {
      analyticsInput.checked = true;
    }
  });

  document.getElementById("consentEssential")?.addEventListener("click", () => {
    saveConsent({ analytics: false });
    if (analyticsInput) {
      analyticsInput.checked = false;
    }
  });

  document.getElementById("consentSave")?.addEventListener("click", () => {
    saveConsent({ analytics: Boolean(analyticsInput?.checked) });
  });
}

function openConsentBanner() {
  document.getElementById("consentPanel")?.classList.add("is-visible");
}

function closeConsentBanner() {
  document.getElementById("consentPanel")?.classList.remove("is-visible");
}

function saveConsent(consent) {
  storeConsent(consent);
  if (consent.analytics) {
    loadMatomo();
  }
  closeConsentBanner();
}

function setupTopLink() {
  const topLink = document.createElement("button");
  topLink.type = "button";
  topLink.className = "top-link-button";
  topLink.setAttribute("aria-label", "Nach oben");
  topLink.textContent = "Nach oben";

  topLink.addEventListener("click", () => {
    window.scrollTo({ top: 0, behavior: "smooth" });
  });

  document.body.append(topLink);

  const toggleTopLink = () => {
    if (window.scrollY > 320) {
      topLink.classList.add("is-visible");
    } else {
      topLink.classList.remove("is-visible");
    }
  };

  toggleTopLink();
  window.addEventListener("scroll", toggleTopLink, { passive: true });
}