prime8dev

projects.js (5640B)

---

 import { isEditableTarget } from "./dom.js";
 import { updateAppTitle } from "./header.js";
 
 const projectsHandlers = {
   keydown: null,
 };
 
 export function initProjects() {
   const section = document.getElementById("projects");
   if (!section) return;
 
   const items = Array.from(section.querySelectorAll(".list-item"));
   if (items.length === 0) return;
 
   const detailView = section.querySelector(".detail-view");
 
   let selectedIndex = 0;
 
   function readmeScroller() {
     if (!detailView) return null;
 
     const readme = detailView.querySelector(".readme-content");
     if (readme && readme.scrollHeight > readme.clientHeight) {
       return readme;
     }
 
     if (detailView.scrollHeight > detailView.clientHeight) {
       return detailView;
     }
 
     return null;
   }
 
   function setSelected(selectedItem) {
     items.forEach((item) => item.classList.toggle("selected", item === selectedItem));
     selectedIndex = items.indexOf(selectedItem);
     if (selectedIndex < 0) selectedIndex = 0;
 
     selectedItem.scrollIntoView({ behavior: "smooth", block: "nearest" });
   }
 
   function updateProjectURL(projectID) {
     if (!projectID) return;
     const path = `/projects/${encodeURIComponent(projectID)}`;
     if (window.location.pathname !== path) {
       history.replaceState({ tab: "projects" }, "", path);
       updateAppTitle();
     }
   }
 
   function loadDetailForItem(item) {
     const url = item.getAttribute("hx-get");
     if (!url) return;
 
     updateProjectURL(item.dataset.id);
 
     if (window.htmx && typeof window.htmx.ajax === "function") {
       window.htmx.ajax("GET", url, "#project-detail");
       return;
     }
 
     item.click();
   }
 
   function selectByIndex(index, loadDetail) {
     if (index < 0 || index >= items.length) return;
     setSelected(items[index]);
     if (loadDetail) loadDetailForItem(items[index]);
   }
 
   function copyCloneCommand() {
     section.querySelector("[data-clone-copy]")?.click();
   }
 
   items.forEach((item, index) => {
     if (item.dataset.boundClick === "1") return;
     item.dataset.boundClick = "1";
     item.addEventListener("click", () => {
       selectedIndex = index;
       setSelected(item);
       updateProjectURL(item.dataset.id);
     });
   });
 
   if (projectsHandlers.keydown) {
     document.removeEventListener("keydown", projectsHandlers.keydown);
   }
 
   projectsHandlers.keydown = (e) => {
     if (!section.isConnected) return;
     if (isEditableTarget(e.target)) return;
     if (window.isLightboxOpen?.()) return;
 
     if ((e.key === "ArrowUp" || e.key === "ArrowDown") && e.shiftKey) {
       const scroller = readmeScroller();
       if (scroller) {
         e.preventDefault();
         scroller.scrollBy({ top: e.key === "ArrowUp" ? -80 : 80, behavior: "smooth" });
         return;
       }
     }
 
     switch (e.key) {
       case "ArrowUp":
         e.preventDefault();
         selectByIndex(selectedIndex - 1, true);
         break;
       case "ArrowDown":
         e.preventDefault();
         selectByIndex(selectedIndex + 1, true);
         break;
       case "Enter":
         e.preventDefault();
         copyCloneCommand();
         break;
       default:
         break;
     }
   };
 
   document.addEventListener("keydown", projectsHandlers.keydown);
 
   initCloneCopy(section);
 
   const initialItem = section.querySelector(".list-item.selected") || items[0];
   setSelected(initialItem);
   // /projects shows the first project, so the URL and title name it too.
   if (window.location.pathname.replace(/\/+$/, "") === "/projects") {
     updateProjectURL(initialItem?.dataset.id);
   }
 
   const detailContainer = document.getElementById("project-detail");
   const needsInitialFetch = detailContainer?.querySelector("[data-project-placeholder='true']");
   if (needsInitialFetch) {
     setTimeout(() => loadDetailForItem(initialItem), 0);
   }
 }
 
 const CLONE_PROTO_KEY = "clone-proto";
 
 function initCloneCopy(section) {
   const bar = section.querySelector("[data-clone]");
   if (!bar || bar.dataset.bound === "true") return;
   bar.dataset.bound = "true";
 
   const tabs = Array.from(bar.querySelectorAll(".clone-tab"));
   const urlEl = bar.querySelector("[data-clone-url]");
   const copyButton = bar.querySelector("[data-clone-copy]");
   if (!tabs.length || !urlEl || !copyButton) return;
 
   const select = (proto, persist) => {
     const tab = tabs.find((t) => t.dataset.proto === proto) || tabs[0];
     tabs.forEach((t) => {
       const on = t === tab;
       t.classList.toggle("active", on);
       t.setAttribute("aria-checked", on ? "true" : "false");
     });
     urlEl.textContent = tab.dataset.addr || "";
     if (persist) {
       try {
         window.localStorage.setItem(CLONE_PROTO_KEY, tab.dataset.proto || "");
       } catch {
         // storage unavailable
       }
     }
   };
 
   let saved = "";
   try {
     saved = window.localStorage.getItem(CLONE_PROTO_KEY) || "";
   } catch {
     // storage unavailable
   }
   select(saved || "https", false);
 
   tabs.forEach((t) => t.addEventListener("click", () => select(t.dataset.proto, true)));
 
   let resetTimer = 0;
   copyButton.addEventListener("click", async () => {
     const url = (urlEl.textContent || "").trim();
     if (!url) return;
 
     let copied = false;
     try {
       await navigator.clipboard.writeText(url);
       copied = true;
     } catch {
       copied = false;
     }
 
     copyButton.textContent = copied ? "copied" : "failed";
     copyButton.classList.toggle("copied", copied);
     window.clearTimeout(resetTimer);
     resetTimer = window.setTimeout(() => {
       if (!copyButton.isConnected) return;
       copyButton.textContent = "copy";
       copyButton.classList.remove("copied");
     }, 1200);
   });
 }