prime8dev

header.js (6666B)

---

 import { isEditableTarget } from "./dom.js";
 
 const headerHandlers = {
   keydown: null,
   afterSwap: null,
   popstate: null,
   linkClick: null,
 };
 
 // Hosts that serve this same app, so a link to any of them stays in-page.
 const APP_HOSTS = new Set(["prime8.dev", "www.prime8.dev"]);
 // Pages the app renders into #content; anything else (raw files, the API,
 // static assets) is a real load.
 const APP_PATH = /^\/(?:(?:projects|experience)(?:\/[^/]+)?)?\/?$/;
 
 // opensOut reports whether an anchor should open in a new tab.
 function opensOut(a) {
   if (a.hasAttribute("download") || a.hasAttribute("hx-get")) return false;
   let url;
   try {
     url = new URL(a.href, window.location.href);
   } catch {
     return false;
   }
   if (!/^https?:$/.test(url.protocol)) return false;
   const here = new URL(window.location.href);
   if (url.origin === here.origin && url.pathname === here.pathname && url.hash) return false;
   return true;
 }
 
 // appPath returns the in-app path an anchor points at, or "" when clicking
 // it should be left to the browser.
 function appPath(a) {
   if (a.hasAttribute("download") || a.hasAttribute("hx-get")) return "";
   // links written into content (project READMEs and details) link out as written
   if (a.target === "_blank" || a.closest("#project-detail, .readme-content")) return "";
   let url;
   try {
     url = new URL(a.href, window.location.href);
   } catch {
     return "";
   }
   if (!/^https?:$/.test(url.protocol)) return "";
   const sameApp =
     url.origin === window.location.origin ||
     (APP_HOSTS.has(url.hostname) && APP_HOSTS.has(window.location.hostname));
   if (!sameApp || !APP_PATH.test(url.pathname)) return "";
   return url.pathname.replace(/\/+$/, "") || "/";
 }
 
 export function initHeader() {
   const headerEl = document.getElementById("tabs");
   if (!headerEl) return;
 
   const order = (headerEl.getAttribute("data-tabs") || "about").split(",").filter(Boolean);
   const fallback = order[0] || "about";
 
   function goTo(tab) {
     const link = document.querySelector(`.tab[data-tab="${tab}"]`);
     if (!link) return;
 
     const path = link.getAttribute("hx-get") || link.getAttribute("href");
     if (window.htmx && path) {
       setActiveTabUI(tab);
       if (window.location.pathname !== path) {
         history.pushState({ tab }, "", path);
       }
 
       window.htmx.ajax("GET", path, {
         target: "#content",
         swap: "innerHTML",
       });
       return;
     }
 
     link.click();
   }
 
   // Every app link (relative, or absolute to prime8.dev) outside project
   // content swaps #content instead of reloading the page. Modified
   // clicks (new tab, new window) are left alone.
   function navigate(path) {
     const tab = path === "/" ? fallback : path.slice(1).split("/")[0];
     setActiveTabUI(tab);
     if (window.location.pathname !== path) history.pushState({ tab }, "", path);
     window.htmx.ajax("GET", path, { target: "#content", swap: "innerHTML" });
   }
 
   if (headerHandlers.linkClick) {
     document.removeEventListener("click", headerHandlers.linkClick);
   }
   headerHandlers.linkClick = (e) => {
     if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
     const a = e.target.closest?.("a[href]");
     if (!a || !window.htmx) return;
     const path = appPath(a);
     if (path) {
       e.preventDefault();
       navigate(path);
       return;
     }
     // Everything else (other sites, raw files, links in project READMEs)
     // opens in a new tab so the app tab stays put. In-page #anchors and
     // non-http links (mailto:) are left to the browser.
     if (opensOut(a)) {
       e.preventDefault();
       window.open(a.href, "_blank", "noopener,noreferrer");
     }
   };
   document.addEventListener("click", headerHandlers.linkClick);
 
   if (headerHandlers.keydown) {
     document.removeEventListener("keydown", headerHandlers.keydown);
   }
 
   headerHandlers.keydown = (e) => {
     if (isEditableTarget(e.target)) return;
     if (typeof window.isLightboxOpen === "function" && window.isLightboxOpen()) return;
 
     const current = currentFromPath(order, fallback);
     const index = order.indexOf(current);
 
     if (e.key >= "1" && e.key <= String(order.length)) {
       const i = Number(e.key) - 1;
       if (order[i]) {
         e.preventDefault();
         if (order[i] === current) return;
         goTo(order[i]);
       }
       return;
     }
 
     switch (e.key) {
       case "Tab": {
         e.preventDefault();
         const next = order[(index + (e.shiftKey ? -1 : 1) + order.length) % order.length];
         goTo(next);
         break;
       }
       case "ArrowLeft":
         if (index > 0) {
           e.preventDefault();
           goTo(order[index - 1]);
         }
         break;
       case "ArrowRight":
         if (index < order.length - 1) {
           e.preventDefault();
           goTo(order[index + 1]);
         }
         break;
       default:
         break;
     }
   };
 
   document.addEventListener("keydown", headerHandlers.keydown);
 
   if (headerHandlers.afterSwap) {
     document.removeEventListener("htmx:afterSwap", headerHandlers.afterSwap);
   }
 
   headerHandlers.afterSwap = (e) => {
     if (!e.target) return;
 
     switch (e.target.id) {
       case "content":
         setActiveTabUI(currentFromPath(order, fallback));
         break;
       case "project-detail":
         updateAppTitle();
         break;
       default:
         break;
     }
   };
 
   document.addEventListener("htmx:afterSwap", headerHandlers.afterSwap);
 
   if (headerHandlers.popstate) {
     window.removeEventListener("popstate", headerHandlers.popstate);
   }
 
   headerHandlers.popstate = () => {
     setActiveTabUI(currentFromPath(order, fallback));
   };
 
   window.addEventListener("popstate", headerHandlers.popstate);
 
   setActiveTabUI(currentFromPath(order, fallback));
 }
 
 // Same as utils.WindowTitle: "prime8:~/projects/janitor", always in full.
 export function windowTitle(path) {
   return `prime8:${path}`;
 }
 
 export function updateAppTitle() {
   const path = window.location.pathname.replace(/\/+$/, "");
   document.title = windowTitle(`~${path}`);
 }
 
 function setActiveTabUI(tab) {
   document.querySelectorAll(".tab").forEach((el) => {
     const isActive = el.getAttribute("data-tab") === tab;
     el.classList.toggle("active", isActive);
     if (isActive) {
       el.setAttribute("aria-current", "page");
     } else {
       el.removeAttribute("aria-current");
     }
   });
 
   updateAppTitle();
 }
 
 function currentFromPath(order, fallback) {
   const path = window.location.pathname;
   if (path === "/" || path === "") return fallback;
   const tab = path.replace(/^\//, "").split("/")[0];
   return order.includes(tab) ? tab : fallback;
 }