Add domme-converters/assets/js/router.js

2026-06-24 21:14:05 +02:00
parent 17a247127b
commit 7d2db0bc08
1 changed files with 88 additions and 0 deletions
@@ -0,0 +1,88 @@
+"use strict";
+
+/**
+ * Hash-router voor de single-page shell. Houdt semantische, leesbare paden aan
+ * (bijv. #/producten/hdmi-naar-tuinslang) en werkt zonder serverconfiguratie,
+ * ook bij direct openen van het bestand.
+ */
+(function () {
+  const CL = (window.CL = window.CL || {});
+  const pages = CL.pages;
+
+  const headerEl = document.getElementById("site-header");
+  const appEl = document.getElementById("app");
+  const footerEl = document.getElementById("site-footer");
+
+  // Statische routes -> view-functies.
+  const routes = {
+    "/": pages.home,
+    "/producten": pages.producten,
+    "/catalogus": pages.catalogus,
+    "/specificaties": pages.specificaties,
+    "/aanbiedingen": pages.aanbiedingen,
+    "/bedrijf": pages.bedrijf,
+    "/over-ons": pages.overOns,
+    "/contact": pages.contact,
+    "/vacatures": pages.vacatures,
+    "/voorwaarden": pages.voorwaarden,
+    "/privacy": pages.privacy,
+    "/disclaimer": pages.disclaimer,
+  };
+
+  function parsePath() {
+    const raw = location.hash.replace(/^#/, "");
+    const path = raw.split("?")[0] || "/";
+    return path === "" ? "/" : path;
+  }
+
+  // Bepaalt welke view bij een pad hoort (incl. dynamische productroute).
+  function resolve(path) {
+    if (routes[path]) return routes[path]();
+    const productMatch = path.match(/^\/producten\/([^/]+)$/);
+    if (productMatch) return pages.productDetail(decodeURIComponent(productMatch[1]));
+    return pages.notFound();
+  }
+
+  // Het pad dat de header gebruikt voor de actieve-link-markering.
+  function navPathFor(path) {
+    if (/^\/producten\/[^/]+$/.test(path)) return "/producten";
+    return path;
+  }
+
+  function render() {
+    const path = parsePath();
+    const view = resolve(path);
+
+    headerEl.innerHTML = CL.components.header(navPathFor(path));
+    appEl.innerHTML = view.html;
+    document.title = view.title;
+
+    CL.ui.bindHeader();
+    CL.ui.updateCartCount();
+    if (typeof view.onMount === "function") view.onMount();
+
+    window.scrollTo({ top: 0, behavior: "auto" });
+  }
+
+  function boot() {
+    footerEl.innerHTML = CL.components.footer();
+    CL.ui.init();
+
+    // Mandje-wijzigingen werken de teller en de lade overal bij.
+    CL.store.subscribe(() => {
+      CL.ui.updateCartCount();
+      CL.ui.renderCart();
+    });
+
+    window.addEventListener("hashchange", render);
+    if (!location.hash) location.replace("#/");
+    render();
+    CL.ui.renderCart();
+  }
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", boot);
+  } else {
+    boot();
+  }
+})();