prime8dev

header.js (5797B)

---

 import { isEditableTarget } from "./dom.js";
 
 const detailTitles = {};
 const headerHandlers = {
   keydown: null,
   afterSwap: null,
   popstate: null,
 };
 
 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();
   }
 
   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 isBlogPostOpen = typeof window.isBlogPostOpen === "function" && window.isBlogPostOpen();
 
     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;
     }
 
     if (isBlogPostOpen) 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":
       case "blog-post-content":
         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));
 }
 
 export function updateAppTitle(activeTab = "") {
   const headerEl = document.getElementById("tabs");
   if (!headerEl) return;
 
   const order = (headerEl.getAttribute("data-tabs") || "about").split(",").filter(Boolean);
   const fallback = order[0] || "about";
   const tab = activeTab || currentFromPath(order, fallback);
 
   const tabEl = document.querySelector(`.tab[data-tab="${tab}"]`);
   const tabLabel = tabEl?.getAttribute("data-label") || tab;
   const siteName = document.getElementById("app")?.dataset.bootTitle || "prime8.dev";
 
   let detailLabel = "";
   const path = window.location.pathname;
 
   switch (tab) {
     case "projects":
       if (/^\/projects\/[^/]+$/.test(path)) {
         const projectID = path.match(/^\/projects\/([^/]+)$/)?.[1] || "";
         detailLabel =
           detailTitles.projects ||
           document.querySelector("#project-detail h2")?.textContent?.trim() ||
           selectedListTitle(".list-item[data-id]", ".list-title", projectID);
       }
       break;
     case "blog":
       if (/^\/blog\/[^/]+$/.test(path)) {
         const blogID = path.match(/^\/blog\/([^/]+)$/)?.[1] || "";
         detailLabel =
           detailTitles.blog ||
           document.querySelector(".blog-article-title")?.textContent?.trim() ||
           selectedListTitle(".blog-list-item[data-id]", ".blog-list-title", blogID);
       }
       break;
     default:
       break;
   }
 
   if (detailLabel) {
     document.title = `${detailLabel} | ${tabLabel} | ${siteName}`;
     return;
   }
 
   document.title = `${tabLabel} | ${siteName}`;
 }
 
 export function setAppTitleDetail(tab, value) {
   if (value) {
     detailTitles[tab] = value;
   } else {
     delete detailTitles[tab];
   }
 }
 
 export function clearAppTitleDetail(tab) {
   delete detailTitles[tab];
 }
 
 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(tab);
 }
 
 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;
 }
 
 function selectedListTitle(selector, titleSelector, id) {
   if (!id) return "";
 
   const normalized = decodeURIComponent(id);
   const items = Array.from(document.querySelectorAll(selector));
   const item = items.find((el) => (el.dataset.id || "") === normalized);
   if (!item) return "";
 
   return item.querySelector(titleSelector)?.textContent?.trim() || "";
 }