Create assets/site.js

assets/site.js

@@ -0,0 +1,213 @@
+<!-- assets/site.js -->
+<script>
+(function () {
+  function q(id) { return document.getElementById(id); }
+
+  function trapFocus(modal) {
+    const focusable = modal.querySelectorAll(
+      'a,button,input,select,textarea,[tabindex]:not([tabindex="-1"])'
+    );
+    if (!focusable.length) return;
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+
+    function handler(e) {
+      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') {
+        window.SilentPattern.toggleModal(modal, false);
+      }
+    }
+    modal.addEventListener('keydown', handler);
+    modal._focusHandler = handler;
+  }
+
+  function untrapFocus(modal) {
+    if (modal._focusHandler) {
+      modal.removeEventListener('keydown', modal._focusHandler);
+      delete modal._focusHandler;
+    }
+  }
+
+  function toggleModal(modal, show) {
+    if (!modal) return;
+    if (show) {
+      modal.classList.remove('modal-hidden');
+      modal.classList.add('modal-visible');
+      document.body.style.overflow = 'hidden';
+      setTimeout(() => { modal.focus(); trapFocus(modal); }, 0);
+    } else {
+      modal.classList.remove('modal-visible');
+      modal.classList.add('modal-hidden');
+      document.body.style.overflow = '';
+      untrapFocus(modal);
+    }
+  }
+
+  function initVanta() {
+    const el = q('vanta-bg');
+    if (!el || !window.VANTA || !window.VANTA.NET) return null;
+
+    const fx = window.VANTA.NET({
+      el: "#vanta-bg",
+      mouseControls: true,
+      touchControls: true,
+      gyroControls: false,
+      minHeight: 200.0,
+      minWidth: 200.0,
+      scale: 1.0,
+      scaleMobile: 1.0,
+      color: 0x4f46e5,
+      backgroundColor: 0x020617,
+      points: 12.0,
+      maxDistance: 20.0,
+      spacing: 15.0
+    });
+
+    window.addEventListener('resize', () => fx.resize());
+    return fx;
+  }
+
+  function setupAccessModal() {
+    const accessModal = q('access-modal');
+    const accessBtn = q('access-btn');
+    const accessCta = q('access-cta');
+    const closeAccessModal = q('close-access-modal');
+
+    function openAccess() {
+      toggleModal(accessModal, true);
+      setTimeout(() => {
+        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 (accessModal) 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();
+        const purpose = (q('purpose')?.value || '').trim();
+
+        if (!name || !email || !institution || !purpose) {
+          alert('Please fill in all fields.');
+          return;
+        }
+
+        // Optional: post to server if present; otherwise just acknowledge.
+        try {
+          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.');
+        } catch {
+          alert('Request received. You will be contacted after review.');
+        }
+
+        form.reset();
+        toggleModal(accessModal, false);
+      });
+    }
+
+    return { accessModal };
+  }
+
+  function setupLabNavigator(dossiers, defaultKey) {
+    const labNav = q('lab-navigator');
+    const labNavBtn = q('lab-nav-btn');
+    const labNavClose = q('lab-nav-close');
+
+    function openLabNav() { toggleModal(labNav, true); setTimeout(() => labNav?.focus(), 0); }
+    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';
+      if (shouldClose) 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');
+
+    function renderDossier(key) {
+      const d = 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 (dossierEvidence) {
+        dossierEvidence.innerHTML = '';
+        (d.evidence || []).forEach(item => {
+          const li = document.createElement('li');
+          li.textContent = item;
+          dossierEvidence.appendChild(li);
+        });
+        if (!(d.evidence || []).length) {
+          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?.label || 'Open';
+        dossierPrimary.onclick = d.primary?.action || null;
+      }
+      if (dossierSecondary) {
+        dossierSecondary.textContent = d.secondary?.label || 'View Note';
+        dossierSecondary.onclick = 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')));
+    });
+
+    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);
+    });
+
+    renderDossier(defaultKey || 'start');
+    return { openLabNav, closeLabNav, renderDossier, labNav };
+  }
+
+  window.SilentPattern = {
+    toggleModal,
+    initVanta,
+    setupAccessModal,
+    setupLabNavigator
+  };
+})();
+</script>