Update assets/site.js

assets/site.js

@@ -1,13 +1,35 @@
-<!-- assets/site.js -->
-<script>
+/* assets/site.js
+   SILENTPATTERN — shared site behavior (pure JS file; no <script> tags)
+*/
 (function () {
+  '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 trapFocus(modal) {
-    const focusable = modal.querySelectorAll(
-      'a,button,input,select,textarea,[tabindex]:not([tabindex="-1"])'
+    const focusable = qsa(
+      'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])',
+      modal
     );
     if (!focusable.length) return;
+
     const first = focusable[0];
     const last = focusable[focusable.length - 1];
 
@@ -19,32 +41,60 @@
           if (document.activeElement === last) { e.preventDefault(); first.focus(); }
         }
       } else if (e.key === 'Escape') {
-        window.SilentPattern.toggleModal(modal, false);
+        toggleModal(modal, false);
       }
     }
+
     modal.addEventListener('keydown', handler);
-    modal._focusHandler = handler;
+    modal._sp_focusHandler = handler;
   }
 
   function untrapFocus(modal) {
-    if (modal._focusHandler) {
-      modal.removeEventListener('keydown', modal._focusHandler);
-      delete modal._focusHandler;
+    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 = '';
     }
   }
 
   function toggleModal(modal, show) {
     if (!modal) return;
+
     if (show) {
+      rememberActiveElement(modal);
       modal.classList.remove('modal-hidden');
       modal.classList.add('modal-visible');
-      document.body.style.overflow = 'hidden';
-      setTimeout(() => { modal.focus(); trapFocus(modal); }, 0);
+      modal.setAttribute('aria-hidden', 'false');
+      lockScroll();
+
+      // Ensure modal is focusable
+      if (!modal.hasAttribute('tabindex')) modal.setAttribute('tabindex', '-1');
+
+      setTimeout(() => {
+        try { modal.focus(); } catch {}
+        trapFocus(modal);
+      }, 0);
     } else {
       modal.classList.remove('modal-visible');
       modal.classList.add('modal-hidden');
-      document.body.style.overflow = '';
+      modal.setAttribute('aria-hidden', 'true');
       untrapFocus(modal);
+      unlockScroll();
+      restoreActiveElement(modal);
     }
   }
 
@@ -52,8 +102,11 @@
     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: "#vanta-bg",
+      el: el,
       mouseControls: true,
       touchControls: true,
       gyroControls: false,
@@ -68,12 +121,19 @@
       spacing: 15.0
     });
 
-    window.addEventListener('resize', () => fx.resize());
+    el._sp_vanta = fx;
+
+    // Resize handler (defensive)
+    const onResize = () => { try { fx.resize(); } catch {} };
+    window.addEventListener('resize', onResize);
+
     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');
@@ -89,12 +149,17 @@
     if (accessBtn) accessBtn.addEventListener('click', openAccess);
     if (accessCta) accessCta.addEventListener('click', openAccess);
     if (closeAccessModal) closeAccessModal.addEventListener('click', () => toggleModal(accessModal, false));
-    if (accessModal) accessModal.addEventListener('click', (e) => { if (e.target === accessModal) toggleModal(accessModal, false); });
+
+    // Click outside the dialog content closes (only when clicking overlay)
+    accessModal.addEventListener('click', (e) => {
+      if (e.target === accessModal) toggleModal(accessModal, false);
+    });
 
     const form = q('access-form');
     if (form) {
       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();
@@ -105,7 +170,7 @@
           return;
         }
 
-        // Optional: post to server if present; otherwise just acknowledge.
+        // Best-effort submit; if no backend, still acknowledge.
         try {
           const res = await fetch('/api/access', {
             method: 'POST',
@@ -118,26 +183,31 @@
           alert('Request received. You will be contacted after review.');
         }
 
-        form.reset();
+        try { form.reset(); } catch {}
         toggleModal(accessModal, false);
       });
     }
 
-    return { accessModal };
+    return { accessModal, openAccess };
   }
 
   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');
 
-    function openLabNav() { toggleModal(labNav, true); setTimeout(() => labNav?.focus(), 0); }
+    function openLabNav() { toggleModal(labNav, true); }
     function closeLabNav() { toggleModal(labNav, false); }
 
     if (labNavBtn) labNavBtn.addEventListener('click', openLabNav);
     if (labNavClose) labNavClose.addEventListener('click', closeLabNav);
-    if (labNav) labNav.addEventListener('click', (e) => {
-      const shouldClose = e.target && e.target.getAttribute('data-lab-close') === 'true';
+
+    // 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();
     });
 
@@ -151,7 +221,7 @@
     const dossierMeta = q('dossier-meta');
 
     function renderDossier(key) {
-      const d = dossiers?.[key];
+      const d = dossiers && dossiers[key];
       if (!d) return;
 
       if (dossierTitle) dossierTitle.textContent = d.title || 'Lab Dossier';
@@ -161,12 +231,14 @@
 
       if (dossierEvidence) {
         dossierEvidence.innerHTML = '';
-        (d.evidence || []).forEach(item => {
-          const li = document.createElement('li');
-          li.textContent = item;
-          dossierEvidence.appendChild(li);
-        });
-        if (!(d.evidence || []).length) {
+        const list = Array.isArray(d.evidence) ? d.evidence : [];
+        if (list.length) {
+          list.forEach(item => {
+            const li = document.createElement('li');
+            li.textContent = String(item);
+            dossierEvidence.appendChild(li);
+          });
+        } else {
           const li = document.createElement('li');
           li.className = 'text-gray-500';
           li.textContent = 'No evidence items provided.';
@@ -175,26 +247,33 @@
       }
 
       if (dossierPrimary) {
-        dossierPrimary.textContent = d.primary?.label || 'Open';
-        dossierPrimary.onclick = d.primary?.action || null;
+        dossierPrimary.textContent = (d.primary && d.primary.label) ? d.primary.label : 'Open';
+        dossierPrimary.onclick = (d.primary && typeof d.primary.action === 'function') ? d.primary.action : null;
       }
       if (dossierSecondary) {
-        dossierSecondary.textContent = d.secondary?.label || 'View Note';
-        dossierSecondary.onclick = d.secondary?.action || null;
+        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;
       }
+
       if (dossierMeta) {
         const u = d.updated || '—';
         dossierMeta.innerHTML = `Last updated: <span class="text-gray-300">${u}</span>`;
       }
     }
 
-    document.querySelectorAll('.lab-node').forEach(btn => {
-      btn.addEventListener('click', () => renderDossier(btn.getAttribute('data-dossier')));
+    qsa('.lab-node').forEach(btn => {
+      btn.addEventListener('click', () => {
+        const key = btn.getAttribute('data-dossier');
+        if (key) 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);
     });
@@ -203,11 +282,36 @@
     return { openLabNav, closeLabNav, renderDossier, labNav };
   }
 
-  window.SilentPattern = {
-    toggleModal,
-    initVanta,
-    setupAccessModal,
-    setupLabNavigator
-  };
+  // 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();
+  }
 })();
-</script>