updated and simplified JS

Author: moneuron

assets/script.js

@@ -1,15 +1,30 @@
 document.addEventListener("DOMContentLoaded", () => {
+  initPaperFadeInDelays();
+  initCitationsAndScholarWidget();
+  initContactViewToggle();
+});
+
+function initPaperFadeInDelays() {
   const papers = document.querySelectorAll(".paper-item");
   papers.forEach((paper, index) => {
     paper.style.animationDelay = `${index * 0.25}s`;
   });
- 
-  const citationElements = document.querySelectorAll('.citation[data-doi]');
-  const totalDisplay = document.querySelector('.citations');
- 
+}
+
+function initCitationsAndScholarWidget() {
+  const citationElements = document.querySelectorAll(".citation[data-doi]");
+  const totalDisplay = document.querySelector(".citations");
+  const chart = document.getElementById("scholar-chart");
+  const yLabel = document.getElementById("scholar-y-label");
+
+  // If none of the related elements exist, there's nothing to do.
+  if (citationElements.length === 0 && !totalDisplay && !chart) {
+    return;
+  }
+
   const CITATIONS_URL = "/assets/data/citations.json";
- 
-  async function run() {
+
+  async function loadAndRender() {
     let data;
     try {
       const res = await fetch(CITATIONS_URL);
@@ -19,131 +34,131 @@ document.addEventListener("DOMContentLoaded", () => {
       console.warn("Could not load citations.json:", err);
       return;
     }
- 
-    const citationCounts = [];
- 
+
+    // Per-paper citations
     citationElements.forEach((el) => {
       const doi = el.getAttribute("data-doi");
       const raw = doi && Object.prototype.hasOwnProperty.call(data, doi) ? data[doi] : undefined;
       const count = Number(raw);
 
       if (doi && Number.isFinite(count)) {
-        citationCounts.push(count);
         el.textContent = `‒ CITATIONS: ${count} ‒`;
       } else {
         el.textContent = "";
       }
     });
- 
-    // Update total + h-index
+
+    // Footer summary
     if (totalDisplay) {
       const totalFromJson = Number(data._total_citations);
       const hIndexFromJson = Number(data._h_index);
-      totalDisplay.textContent = `‒ CITATIONS: ${totalFromJson} · H-INDEX: ${hIndexFromJson} ‒`;
+      if (Number.isFinite(totalFromJson) && Number.isFinite(hIndexFromJson)) {
+        totalDisplay.textContent = `‒ CITATIONS: ${totalFromJson} · H-INDEX: ${hIndexFromJson} ‒`;
+      }
     }
 
+    // Scholar mini chart
     const yearsData = data._yearly_totals;
-    if (!yearsData) return;
+    if (!yearsData || typeof yearsData !== "object") return;
+    if (!chart || !yLabel) return;
 
-    const chart = document.getElementById('scholar-chart');
-    
-    // 1. Grab the last 4 years (adjust .slice(-4) if you want more/fewer bars)
     const allYears = Object.keys(yearsData).sort();
-    const displayYears = allYears.slice(-4); 
-
-    if (displayYears.length > 0) {
-      // 2. Find max citations for the Y-Axis label and bar scaling
-      const maxCitations = Math.max(...displayYears.map(y => yearsData[y]));
-      document.getElementById('scholar-y-label').innerText = maxCitations;
-
-      // 3. Render the bars and the years under them
-      displayYears.forEach((year, index) => {
-        const count = yearsData[year];
-        
-        // Column container
-        const col = document.createElement('div');
-        col.className = 'scholar-col';
-        
-        // The visual bar
-        const bar = document.createElement('div');
-        bar.className = 'scholar-bar';
-        bar.title = `${year}: ${count} citations`;
-
-        setTimeout(() => {
-          bar.style.height = maxCitations > 0 ? `${(count / maxCitations) * 100}%` : '0%';
-        }, index * 300);
-        
-        const yearLabel = document.createElement('div');
-        yearLabel.className = 'scholar-year';
-        yearLabel.innerText = year; 
-        
-        col.appendChild(bar);
-        col.appendChild(yearLabel);
-        chart.appendChild(col);
-      });
-    }
+    const displayYears = allYears.slice(-4);
+    if (displayYears.length === 0) return;
+
+    const values = displayYears.map((y) => Number(yearsData[y]) || 0);
+    const maxCitations = Math.max(...values);
+    yLabel.textContent = String(maxCitations);
+
+    // Ensure we don't duplicate bars if this ever runs twice.
+    chart.innerHTML = "";
+
+    displayYears.forEach((year, index) => {
+      const count = Number(yearsData[year]) || 0;
+
+      const col = document.createElement("div");
+      col.className = "scholar-col";
+
+      const bar = document.createElement("div");
+      bar.className = "scholar-bar";
+      bar.title = `${year}: ${count} citations`;
+
+      setTimeout(() => {
+        const height = maxCitations > 0 ? (count / maxCitations) * 100 : 0;
+        bar.style.height = `${height}%`;
+      }, index * 300);
+
+      const yearLabel = document.createElement("div");
+      yearLabel.className = "scholar-year";
+      yearLabel.innerText = year;
+
+      col.appendChild(bar);
+      col.appendChild(yearLabel);
+      chart.appendChild(col);
+    });
   }
- 
+
   window.addEventListener("load", () => {
     // Use idle time if available
     if ("requestIdleCallback" in window) {
       requestIdleCallback(() => {
-        run();
+        loadAndRender();
       });
     } else {
       // Fallback
-      setTimeout(run, 200);
+      setTimeout(loadAndRender, 200);
     }
   });
+}
 
+function initContactViewToggle() {
   const toggleText = {
-    default: 'CONTACT',
-    alternate: 'HOME'
+    default: "CONTACT",
+    alternate: "HOME",
   };
 
-  const CONTACT_HASH = '#contact';
+  const CONTACT_HASH = "#contact";
 
   // --- Selectors ---
-  const toggleBtn = document.getElementById('contact-toggle') || document.querySelector('a[href="#contact"]');
-  const mainBlockquote = document.querySelector('blockquote');
-  const paperItems = document.querySelectorAll('.paper-item');
-  const footer = document.querySelector('footer');
+  const toggleBtn = document.getElementById("contact-toggle") || document.querySelector('a[href="#contact"]');
+  const mainBlockquote = document.querySelector("blockquote");
+  const paperItems = Array.from(document.querySelectorAll(".paper-item"));
+  const footer = document.querySelector("footer");
 
   // If there's no CONTACT link (or markup changed), skip the contact-view feature.
   if (!toggleBtn) {
     return;
   }
 
   function escapeHtml(str) {
-    const div = document.createElement('div');
+    const div = document.createElement("div");
     div.textContent = str;
     return div.innerHTML;
   }
 
   function asStringArray(value) {
     if (!Array.isArray(value)) return [];
-    return value.filter(v => typeof v === 'string');
+    return value.filter((v) => typeof v === "string");
   }
 
   function getOrCreateEmailBlockContainer() {
-    let el = document.getElementById('email-blockquote');
+    let el = document.getElementById("email-blockquote");
     if (el) return el;
 
-    el = document.createElement('section');
-    el.id = 'email-blockquote';
-    el.className = 'email-blockquote hidden-view';
-    el.setAttribute('aria-label', 'Contact');
-    el.setAttribute('data-nosnippet', '');
+    el = document.createElement("section");
+    el.id = "email-blockquote";
+    el.className = "email-blockquote hidden-view";
+    el.setAttribute("aria-label", "Contact");
+    el.setAttribute("data-nosnippet", "");
 
-    const insertionPoint = mainBlockquote || document.querySelector('.col-xs-12');
+    const insertionPoint = mainBlockquote || document.querySelector(".col-xs-12");
     if (insertionPoint) {
-      insertionPoint.insertAdjacentElement('afterend', el);
+      insertionPoint.insertAdjacentElement("afterend", el);
     }
 
     return el;
   }
 
-  // --- Build email block from data ---
   function renderEmailBlock(container, { active, inactive, error = false }) {
     const activeEmails = asStringArray(active);
     const inactiveEmails = asStringArray(inactive);
@@ -153,120 +168,107 @@ document.addEventListener("DOMContentLoaded", () => {
         <div class="col-xs-12 col-sm-6">
           <span class="email-badge email-badge-active">Active</span>
           <ul class="list-unstyled email-list">
-            ${activeEmails.map(email => `
+            ${activeEmails
+              .map(
+                (email) => `
               <li class="email-item">
                 <small>${escapeHtml(email)}</small>
               </li>
-            `).join('')}
+            `
+              )
+              .join("")}
           </ul>
         </div>
         <div class="col-xs-12 col-sm-6">
           <span class="email-badge email-badge-inactive">Inactive</span>
           <ul class="list-unstyled email-list">
-            ${inactiveEmails.map(email => `
+            ${inactiveEmails
+              .map(
+                (email) => `
               <li class="email-item email-item-inactive">
                 <small>${escapeHtml(email)}</small>
               </li>
-            `).join('')}
+            `
+              )
+              .join("")}
           </ul>
         </div>
       </div>
       <p class="text-muted email-footer-note">
-        <small>${error ? 'Error loading email addresses!' : 'Feel free to reach out via the active addresses.'}</small>
+        <small>${error ? "Error loading email addresses!" : "Feel free to reach out via the active addresses."}</small>
       </p>
     `;
   }
 
-  // --- Collect elements to toggle ---
-  const elementsToToggle = [
-    mainBlockquote,
-    ...paperItems,
-    footer
-  ].filter(el => el !== null);
-
-  // --- State variables ---
-  let showingEmails = false;
+  const elementsToToggle = [mainBlockquote, ...paperItems, footer].filter(Boolean);
   const emailBlockquote = getOrCreateEmailBlockContainer();
-  let emailBlockRendered = false;
-  let emailDataPromise = null;         // cache the fetch promise
+
+  let emailDataPromise = null; // cache the fetch promise
+  let viewSyncId = 0;
 
   function isContactViewFromHash() {
     return window.location.hash.toLowerCase() === CONTACT_HASH;
   }
 
   function setHidden(el, hidden) {
     if (!el) return;
-    el.classList.toggle('hidden-view', hidden);
+    el.classList.toggle("hidden-view", hidden);
   }
 
   function startEmailFetchIfNeeded() {
     if (emailDataPromise) return;
 
-    toggleBtn.textContent = '...';
+    toggleBtn.textContent = "...";
 
-    const timeout = new Promise((_, reject) =>
-      setTimeout(() => reject(new Error('Request timed out')), 3000)
-    );
+    const timeout = new Promise((_, reject) => setTimeout(() => reject(new Error("Request timed out")), 3000));
 
     emailDataPromise = Promise.race([
-      fetch('/assets/data/emails.json').then(response => {
-        if (!response.ok) throw new Error('Failed to load email data');
+      fetch("/assets/data/emails.json").then((response) => {
+        if (!response.ok) throw new Error("Failed to load email data");
         return response.json();
       }),
-      timeout
-    ]).catch(error => {
-      console.error('Could not load emails:', error);
+      timeout,
+    ]).catch((error) => {
+      console.error("Could not load emails:", error);
       emailDataPromise = null; // allow retry next time
       return { active: [], inactive: [], error: true };
     });
   }
 
-  let viewSyncId = 0;
-
   async function syncContactViewFromHash() {
     const syncId = ++viewSyncId;
     const shouldShowEmails = isContactViewFromHash();
 
     if (shouldShowEmails) {
       startEmailFetchIfNeeded();
       const emailData = await emailDataPromise;
-      if (!emailBlockRendered) {
-        renderEmailBlock(emailBlockquote, emailData);
-        emailBlockRendered = true;
-      }
+
+      // Always (re)render when data resolves so a retry after a failure can update the view.
+      renderEmailBlock(emailBlockquote, emailData);
     }
 
     // If another hash change happened while we were awaiting, ignore this pass.
     if (syncId !== viewSyncId) return;
 
     // Apply visibility deterministically (avoid toggle drift)
-    elementsToToggle.forEach(el => setHidden(el, shouldShowEmails));
+    elementsToToggle.forEach((el) => setHidden(el, shouldShowEmails));
     setHidden(emailBlockquote, !shouldShowEmails);
 
     toggleBtn.textContent = shouldShowEmails ? toggleText.alternate : toggleText.default;
-    toggleBtn.setAttribute('aria-expanded', shouldShowEmails ? 'true' : 'false');
-    showingEmails = shouldShowEmails;
+    toggleBtn.setAttribute("aria-expanded", shouldShowEmails ? "true" : "false");
   }
 
-  // --- Click handler: drives state via URL hash ---
   function onToggleClick(event) {
     event.preventDefault();
-
-    if (isContactViewFromHash()) {
-      window.location.hash = '';
-    } else {
-      window.location.hash = CONTACT_HASH;
-    }
+    window.location.hash = isContactViewFromHash() ? "" : CONTACT_HASH;
   }
 
-  // Keep the view in sync with back/forward and direct links.
-  window.addEventListener('hashchange', () => {
+  window.addEventListener("hashchange", () => {
     syncContactViewFromHash();
   });
 
   // Initial sync (supports landing on /#contact)
   syncContactViewFromHash();
 
-  // --- Attach event listener ---
-  toggleBtn.addEventListener('click', onToggleClick);
-});
+  toggleBtn.addEventListener("click", onToggleClick);
+}