prime8dev

experience.js (6095B)

---

 import { isEditableTarget } from "./dom.js";
 
 const experienceHandlers = {
   keydown: null,
   popstate: null,
 };
 
 // One job is lit at a time: its timeline lane, rail and card together.
 // The selected job (url, click/tap, arrow keys) is lit unless a mouse is
 // over, or focus is on, another job, which lights while it stays there.
 // Moving across the gaps between jobs keeps the last one lit, so nothing
 // blinks; leaving the list goes back to the selection.
 export function initExperience() {
   const section = document.getElementById("experience");
   if (!section) return;
 
   const rows = Array.from(section.querySelectorAll(".exp-row"));
   const lanes = Array.from(section.querySelectorAll(".exp-lane"));
   const scroller = section.querySelector(".experience-detail");
   const chart = section.querySelector(".exp-chart");
   if (rows.length === 0 || !scroller) return;
 
   let selectedIndex = 0;
   let previewIndex = -1;
   let litIndex = -1;
 
   function paint() {
     const lit = previewIndex >= 0 ? previewIndex : selectedIndex;
     if (lit !== litIndex) {
       litIndex = lit;
       rows.forEach((row, i) => row.classList.toggle("active", i === lit));
       lanes.forEach((lane, i) => lane.classList.toggle("active", i === lit));
     }
     lanes.forEach((lane, i) =>
       lane.setAttribute("aria-current", String(i === selectedIndex)),
     );
   }
 
   function indexOf(target) {
     const el = target?.closest?.(".exp-row, .exp-lane");
     if (!el || !section.contains(el)) return -1;
     return Number(el.dataset.index);
   }
 
   function indexFromPath() {
     const id = decodeURIComponent(
       window.location.pathname.match(/^\/experience\/([^/]+)$/)?.[1] || "",
     );
     if (!id) return -1;
     return rows.findIndex((row) => row.dataset.id === id);
   }
 
   function updateExperienceURL(index) {
     const id = rows[index]?.dataset.id;
     if (!id) return;
 
     const path = `/experience/${encodeURIComponent(id)}`;
     if (window.location.pathname !== path) {
       history.replaceState({ tab: "experience" }, "", path);
     }
   }
 
   function scrollSelectionIntoView(index) {
     const target = rows[index];
     if (!target) return;
 
     // the sticky timeline strip covers the top of the list
     const inset =
       chart && getComputedStyle(chart).position === "sticky"
         ? chart.offsetHeight
         : 0;
     const scrollerRect = scroller.getBoundingClientRect();
     const targetRect = target.getBoundingClientRect();
     const top = scrollerRect.top + inset;
     const isAbove = targetRect.top < top + 12;
     const isBelow = targetRect.bottom > scrollerRect.bottom - 12;
     if (!isAbove && !isBelow) return;
 
     const targetTop = targetRect.top - top + scroller.scrollTop - 8;
     scroller.scrollTo({ top: Math.max(targetTop, 0), behavior: "smooth" });
   }
 
   function select(index, { updateURL = true, scroll = false } = {}) {
     if (index < 0 || index >= rows.length) return;
     selectedIndex = index;
     paint();
     if (scroll) scrollSelectionIntoView(index);
     if (updateURL) updateExperienceURL(index);
   }
 
   function preview(index) {
     if (index === previewIndex) return;
     previewIndex = index;
     paint();
   }
 
   if (section.dataset.boundTimeline !== "1") {
     section.dataset.boundTimeline = "1";
 
     // mouse/pen only: a tap fires pointerover too, but it should select
     scroller.addEventListener("pointerover", (e) => {
       if (e.pointerType === "touch") return;
       const index = indexOf(e.target);
       if (index >= 0) preview(index);
     });
     scroller.addEventListener("pointerleave", () => preview(-1));
 
     scroller.addEventListener("focusin", (e) => {
       const index = indexOf(e.target);
       if (index >= 0) preview(index);
     });
     scroller.addEventListener("focusout", (e) => {
       if (indexOf(e.relatedTarget) < 0) preview(-1);
     });
 
     scroller.addEventListener("click", (e) => {
       const lane = e.target.closest(".exp-lane");
       if (lane) {
         // handled here, so the app-wide link handler leaves it alone
         e.preventDefault();
         previewIndex = -1;
         select(Number(lane.dataset.index), { scroll: true });
         return;
       }
       const index = indexOf(e.target);
       if (index >= 0 && index !== selectedIndex) select(index);
     });
   }
 
   if (experienceHandlers.keydown) {
     document.removeEventListener("keydown", experienceHandlers.keydown);
   }
 
   experienceHandlers.keydown = (e) => {
     if (!section.isConnected || window.isLightboxOpen?.()) return;
     if (isEditableTarget(e.target)) return;
 
     let next = -1;
     if (e.key === "ArrowUp") next = selectedIndex - 1;
     else if (e.key === "ArrowDown") next = selectedIndex + 1;
     else return;
 
     e.preventDefault();
     if (next < 0 || next >= rows.length) return;
     // the keyboard wins over a resting mouse until it moves again
     previewIndex = -1;
     select(next, { scroll: true });
   };
 
   document.addEventListener("keydown", experienceHandlers.keydown);
 
   if (experienceHandlers.popstate) {
     window.removeEventListener("popstate", experienceHandlers.popstate);
   }
 
   experienceHandlers.popstate = () => {
     if (!section.isConnected) return;
     const index = indexFromPath();
     if (index >= 0) select(index, { updateURL: false });
   };
 
   window.addEventListener("popstate", experienceHandlers.popstate);
 
   section
     .querySelectorAll(".exp-image-hero, .exp-image-thumb")
     .forEach((img) => {
       if (img.dataset.boundClick === "1") return;
       img.dataset.boundClick = "1";
 
       img.addEventListener("click", () => {
         const container = img.closest(".exp-card-images");
         const allImages = container
           ? Array.from(container.querySelectorAll("img")).map((i) => i.src)
           : [];
         const startIndex = allImages.indexOf(img.src);
         window.openLightbox?.(allImages, startIndex);
       });
     });
 
   const pathIndex = indexFromPath();
   if (pathIndex >= 0) {
     select(pathIndex, { updateURL: false });
   } else {
     const rendered = rows.findIndex((row) => row.classList.contains("active"));
     select(Math.max(rendered, 0));
   }
 }