Update assets/site.js

assets/site.js

@@ -1,32 +1,20 @@
 /* assets/site.js
-   SILENTPATTERN — shared site behavior (pure JS file; no <script> tags)
+   SILENTPATTERN — shared behaviors (Vanta, modals, lab navigator)
+   IMPORTANT: This file must be pure JavaScript (no <script> tags inside).
 */
+
 (function () {
-  'use strict';
+  "use strict";
 
   function q(id) { return document.getElementById(id); }
-  function qs(sel, root) { return (root || document).querySelector(sel); }
-  function qsa(sel, root) { return Array.from((root || document).querySelectorAll(sel)); }
-
-  // Namespace
-  const SilentPattern = (window.SilentPattern = window.SilentPattern || {});
 
-  // Internal: remember focus + restore on close
-  function rememberActiveElement(modal) {
-    try { modal._sp_prevActive = document.activeElement; } catch { /* ignore */ }
-  }
-  function restoreActiveElement(modal) {
-    const prev = modal && modal._sp_prevActive;
-    if (prev && typeof prev.focus === 'function') {
-      setTimeout(() => { try { prev.focus(); } catch {} }, 0);
-    }
-    if (modal) delete modal._sp_prevActive;
+  function isShown(modal) {
+    return modal && !modal.classList.contains("modal-hidden");
   }
 
   function trapFocus(modal) {
-    const focusable = qsa(
-      'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])',
-      modal
+    const focusable = modal.querySelectorAll(
+      'a,button,input,select,textarea,[tabindex]:not([tabindex="-1"])'
     );
     if (!focusable.length) return;
 
@@ -34,40 +22,26 @@
     const last = focusable[focusable.length - 1];
 
     function handler(e) {
-      if (e.key === 'Tab') {
+      if (e.key === "Tab") {
         if (e.shiftKey) {
           if (document.activeElement === first) { e.preventDefault(); last.focus(); }
         } else {
           if (document.activeElement === last) { e.preventDefault(); first.focus(); }
         }
-      } else if (e.key === 'Escape') {
+      } else if (e.key === "Escape") {
+        // Close only THIS modal
         toggleModal(modal, false);
       }
     }
 
-    modal.addEventListener('keydown', handler);
-    modal._sp_focusHandler = handler;
+    modal.addEventListener("keydown", handler);
+    modal._focusHandler = handler;
   }
 
   function untrapFocus(modal) {
-    if (modal && modal._sp_focusHandler) {
-      modal.removeEventListener('keydown', modal._sp_focusHandler);
-      delete modal._sp_focusHandler;
-    }
-  }
-
-  // Scroll lock that won't stomp existing inline styles
-  let _prevOverflow = null;
-  function lockScroll() {
-    if (_prevOverflow === null) _prevOverflow = document.body.style.overflow || '';
-    document.body.style.overflow = 'hidden';
-  }
-  function unlockScroll() {
-    if (_prevOverflow !== null) {
-      document.body.style.overflow = _prevOverflow;
-      _prevOverflow = null;
-    } else {
-      document.body.style.overflow = '';
+    if (modal && modal._focusHandler) {
+      modal.removeEventListener("keydown", modal._focusHandler);
+      delete modal._focusHandler;
     }
   }
 
@@ -75,38 +49,31 @@
     if (!modal) return;
 
     if (show) {
-      rememberActiveElement(modal);
-      modal.classList.remove('modal-hidden');
-      modal.classList.add('modal-visible');
-      modal.setAttribute('aria-hidden', 'false');
-      lockScroll();
-
-      // Ensure modal is focusable
-      if (!modal.hasAttribute('tabindex')) modal.setAttribute('tabindex', '-1');
+      modal.classList.remove("modal-hidden");
+      modal.classList.add("modal-visible");
+      modal.setAttribute("aria-hidden", "false");
+      document.body.style.overflow = "hidden";
 
+      // Ensure focus + focus trap
       setTimeout(() => {
         try { modal.focus(); } catch {}
         trapFocus(modal);
       }, 0);
     } else {
-      modal.classList.remove('modal-visible');
-      modal.classList.add('modal-hidden');
-      modal.setAttribute('aria-hidden', 'true');
+      modal.classList.remove("modal-visible");
+      modal.classList.add("modal-hidden");
+      modal.setAttribute("aria-hidden", "true");
+      document.body.style.overflow = "";
       untrapFocus(modal);
-      unlockScroll();
-      restoreActiveElement(modal);
     }
   }
 
   function initVanta() {
-    const el = q('vanta-bg');
+    const el = q("vanta-bg");
     if (!el || !window.VANTA || !window.VANTA.NET) return null;
 
-    // Avoid double-init if a page re-renders or scripts reload
-    if (el._sp_vanta) return el._sp_vanta;
-
     const fx = window.VANTA.NET({
-      el: el,
+      el: "#vanta-bg",
       mouseControls: true,
       touchControls: true,
       gyroControls: false,
@@ -121,69 +88,64 @@
       spacing: 15.0
     });
 
-    el._sp_vanta = fx;
-
-    // Resize handler (defensive)
-    const onResize = () => { try { fx.resize(); } catch {} };
-    window.addEventListener('resize', onResize);
+    window.addEventListener("resize", () => {
+      try { fx.resize(); } catch {}
+    });
 
     return fx;
   }
 
   function setupAccessModal() {
-    const accessModal = q('access-modal');
-    if (!accessModal) return null;
-
-    const accessBtn = q('access-btn');
-    const accessCta = q('access-cta');
-    const closeAccessModal = q('close-access-modal');
+    const accessModal = q("access-modal");
+    const accessBtn = q("access-btn");
+    const accessCta = q("access-cta");
+    const closeAccessModal = q("close-access-modal");
+    const form = q("access-form");
 
     function openAccess() {
       toggleModal(accessModal, true);
       setTimeout(() => {
-        const name = q('name');
+        const name = q("name");
         if (name) name.focus();
       }, 50);
     }
 
-    if (accessBtn) accessBtn.addEventListener('click', openAccess);
-    if (accessCta) accessCta.addEventListener('click', openAccess);
-    if (closeAccessModal) closeAccessModal.addEventListener('click', () => toggleModal(accessModal, false));
+    if (accessBtn) accessBtn.addEventListener("click", openAccess);
+    if (accessCta) accessCta.addEventListener("click", openAccess);
 
-    // Click outside the dialog content closes (only when clicking overlay)
-    accessModal.addEventListener('click', (e) => {
+    if (closeAccessModal) closeAccessModal.addEventListener("click", () => toggleModal(accessModal, false));
+    if (accessModal) accessModal.addEventListener("click", (e) => {
       if (e.target === accessModal) toggleModal(accessModal, false);
     });
 
-    const form = q('access-form');
     if (form) {
-      form.addEventListener('submit', async (e) => {
+      form.addEventListener("submit", async (e) => {
         e.preventDefault();
 
-        const name = (q('name')?.value || '').trim();
-        const email = (q('email')?.value || '').trim();
-        const institution = (q('institution')?.value || '').trim();
-        const purpose = (q('purpose')?.value || '').trim();
+        const name = (q("name")?.value || "").trim();
+        const email = (q("email")?.value || "").trim();
+        const institution = (q("institution")?.value || "").trim();
+        const purpose = (q("purpose")?.value || "").trim();
 
         if (!name || !email || !institution || !purpose) {
-          alert('Please fill in all fields.');
+          alert("Please fill in all fields.");
           return;
         }
 
-        // Best-effort submit; if no backend, still acknowledge.
+        // Optional server post; safe fallback
         try {
-          const res = await fetch('/api/access', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
+          const res = await fetch("/api/access", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
             body: JSON.stringify({ name, email, institution, purpose, page: location.pathname })
           });
-          if (!res.ok) throw new Error('Request not accepted.');
-          alert('Request received. You will be contacted after review.');
+          if (!res.ok) throw new Error("Request not accepted.");
+          alert("Request received. You will be contacted after review.");
         } catch {
-          alert('Request received. You will be contacted after review.');
+          alert("Request received. You will be contacted after review.");
         }
 
-        try { form.reset(); } catch {}
+        form.reset();
         toggleModal(accessModal, false);
       });
     }
@@ -192,126 +154,99 @@
   }
 
   function setupLabNavigator(dossiers, defaultKey) {
-    const labNav = q('lab-navigator');
-    if (!labNav) return null;
-
-    const labNavBtn = q('lab-nav-btn');
-    const labNavClose = q('lab-nav-close');
+    const labNav = q("lab-navigator");
+    const labNavBtn = q("lab-nav-btn");
+    const labNavClose = q("lab-nav-close");
+
+    const dossierTitle = q("dossier-title");
+    const dossierSubtitle = q("dossier-subtitle");
+    const dossierStatus = q("dossier-status");
+    const dossierBody = q("dossier-body");
+    const dossierEvidence = q("dossier-evidence");
+    const dossierPrimary = q("dossier-primary");
+    const dossierSecondary = q("dossier-secondary");
+    const dossierMeta = q("dossier-meta");
 
     function openLabNav() { toggleModal(labNav, true); }
     function closeLabNav() { toggleModal(labNav, false); }
 
-    if (labNavBtn) labNavBtn.addEventListener('click', openLabNav);
-    if (labNavClose) labNavClose.addEventListener('click', closeLabNav);
-
-    // Close when clicking the overlay element marked for close
-    labNav.addEventListener('click', (e) => {
-      const t = e.target;
-      const shouldClose = t && typeof t.getAttribute === 'function' && t.getAttribute('data-lab-close') === 'true';
-      if (shouldClose) closeLabNav();
-    });
+    if (labNavBtn) labNavBtn.addEventListener("click", openLabNav);
+    if (labNavClose) labNavClose.addEventListener("click", closeLabNav);
 
-    const dossierTitle = q('dossier-title');
-    const dossierSubtitle = q('dossier-subtitle');
-    const dossierStatus = q('dossier-status');
-    const dossierBody = q('dossier-body');
-    const dossierEvidence = q('dossier-evidence');
-    const dossierPrimary = q('dossier-primary');
-    const dossierSecondary = q('dossier-secondary');
-    const dossierMeta = q('dossier-meta');
+    if (labNav) {
+      labNav.addEventListener("click", (e) => {
+        const shouldClose = e.target && e.target.getAttribute("data-lab-close") === "true";
+        if (shouldClose) closeLabNav();
+      });
+    }
 
     function renderDossier(key) {
       const d = dossiers && dossiers[key];
       if (!d) return;
 
-      if (dossierTitle) dossierTitle.textContent = d.title || 'Lab Dossier';
-      if (dossierSubtitle) dossierSubtitle.textContent = d.subtitle || '';
-      if (dossierStatus) dossierStatus.textContent = d.status || 'READY';
-      if (dossierBody) dossierBody.textContent = d.body || '';
+      if (dossierTitle) dossierTitle.textContent = d.title || "Lab Dossier";
+      if (dossierSubtitle) dossierSubtitle.textContent = d.subtitle || "";
+      if (dossierStatus) dossierStatus.textContent = d.status || "READY";
+      if (dossierBody) dossierBody.textContent = d.body || "";
 
       if (dossierEvidence) {
-        dossierEvidence.innerHTML = '';
-        const list = Array.isArray(d.evidence) ? d.evidence : [];
-        if (list.length) {
-          list.forEach(item => {
-            const li = document.createElement('li');
-            li.textContent = String(item);
+        dossierEvidence.innerHTML = "";
+        const items = Array.isArray(d.evidence) ? d.evidence : [];
+        if (items.length) {
+          items.forEach((item) => {
+            const li = document.createElement("li");
+            li.textContent = item;
             dossierEvidence.appendChild(li);
           });
         } else {
-          const li = document.createElement('li');
-          li.className = 'text-gray-500';
-          li.textContent = 'No evidence items provided.';
+          const li = document.createElement("li");
+          li.className = "text-gray-500";
+          li.textContent = "No evidence items provided.";
           dossierEvidence.appendChild(li);
         }
       }
 
       if (dossierPrimary) {
-        dossierPrimary.textContent = (d.primary && d.primary.label) ? d.primary.label : 'Open';
-        dossierPrimary.onclick = (d.primary && typeof d.primary.action === 'function') ? d.primary.action : null;
+        dossierPrimary.textContent = d.primary?.label || "Open";
+        dossierPrimary.onclick = typeof d.primary?.action === "function" ? d.primary.action : null;
       }
+
       if (dossierSecondary) {
-        dossierSecondary.textContent = (d.secondary && d.secondary.label) ? d.secondary.label : 'View Note';
-        dossierSecondary.onclick = (d.secondary && typeof d.secondary.action === 'function') ? d.secondary.action : null;
+        dossierSecondary.textContent = d.secondary?.label || "View Note";
+        dossierSecondary.onclick = typeof d.secondary?.action === "function" ? d.secondary.action : null;
       }
 
       if (dossierMeta) {
-        const u = d.updated || '—';
+        const u = d.updated || "—";
         dossierMeta.innerHTML = `Last updated: <span class="text-gray-300">${u}</span>`;
       }
     }
 
-    qsa('.lab-node').forEach(btn => {
-      btn.addEventListener('click', () => {
-        const key = btn.getAttribute('data-dossier');
-        if (key) renderDossier(key);
+    // Bind dossier node clicks (if nodes exist on the page)
+    document.querySelectorAll(".lab-node").forEach((btn) => {
+      btn.addEventListener("click", () => {
+        const key = btn.getAttribute("data-dossier");
+        renderDossier(key);
       });
     });
 
-    // Global ESC closes any open modals (navigator + access)
-    document.addEventListener('keydown', (e) => {
-      if (e.key !== 'Escape') return;
-
-      const accessModal = q('access-modal');
-
-      if (labNav && !labNav.classList.contains('modal-hidden')) closeLabNav();
-      if (accessModal && !accessModal.classList.contains('modal-hidden')) toggleModal(accessModal, false);
+    // Global ESC behavior: close open modals if present
+    document.addEventListener("keydown", (e) => {
+      if (e.key !== "Escape") return;
+      const accessModal = q("access-modal");
+      if (isShown(labNav)) closeLabNav();
+      if (isShown(accessModal)) toggleModal(accessModal, false);
     });
 
-    renderDossier(defaultKey || 'start');
+    renderDossier(defaultKey || "start");
     return { openLabNav, closeLabNav, renderDossier, labNav };
   }
 
-  // Expose API
-  SilentPattern.toggleModal = toggleModal;
-  SilentPattern.initVanta = initVanta;
-  SilentPattern.setupAccessModal = setupAccessModal;
-  SilentPattern.setupLabNavigator = setupLabNavigator;
-
-  // Auto-init on DOM ready (so pages stop duplicating init logic)
-  function boot() {
-    // Vanta only if present + libs loaded
-    initVanta();
-
-    // Access modal only if markup exists
-    const access = setupAccessModal();
-
-    // Lab navigator: requires markup + dossiers provided by page
-    // Pages should define: window.SilentPatternDossiers = {...}; window.SilentPatternDefaultDossier = 'start';
-    const dossiers = window.SilentPatternDossiers;
-    if (dossiers && q('lab-navigator')) {
-      setupLabNavigator(dossiers, window.SilentPatternDefaultDossier || 'start');
-    }
-
-    // Optional convenience: expose openAccess if available
-    if (access && typeof access.openAccess === 'function') {
-      SilentPattern.openAccess = access.openAccess;
-    }
-  }
-
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', boot);
-  } else {
-    boot();
-  }
+  // Export public API (library only; no auto-init to avoid duplication)
+  window.SilentPattern = {
+    toggleModal,
+    initVanta,
+    setupAccessModal,
+    setupLabNavigator
+  };
 })();