prime8dev

blog.js (5377B)

---

 import { isEditableTarget } from "./dom.js";
 import { clearAppTitleDetail, setAppTitleDetail, updateAppTitle } from "./header.js";
 
 const blogHandlers = {
   keydown: null,
   popstate: null,
 };
 
 export function initBlog() {
   const section = document.getElementById("blog");
   if (!section) return;
 
   const listView = section.querySelector("#blog-list-view");
   const postView = section.querySelector("#blog-post-view");
   const backBtn = section.querySelector(".blog-back-btn");
   const listItems = Array.from(section.querySelectorAll(".blog-list-item"));
   if (!listView || !postView || listItems.length === 0) return;
 
   let selectedIndex = 0;
   const hasPrefilledPost = Boolean(document.getElementById("blog-post-content")?.children.length);
   let postOpen = !postView.classList.contains("hidden") || window.location.pathname.startsWith("/blog/");
   window.isBlogPostOpen = () => postOpen;
 
   if (postOpen) {
     listView.classList.add("hidden");
     postView.classList.remove("hidden");
   } else {
     listView.classList.remove("hidden");
     postView.classList.add("hidden");
   }
 
   function pathBlogID() {
     return decodeURIComponent(window.location.pathname.match(/^\/blog\/([^/]+)$/)?.[1] || "");
   }
 
   function itemByBlogID(blogID) {
     if (!blogID) return null;
     return listItems.find((item) => item.dataset.id === blogID) || null;
   }
 
   function select(index) {
     selectedIndex = index;
     listItems.forEach((item, i) => item.classList.toggle("selected", i === index));
     listItems[index]?.scrollIntoView({ behavior: "smooth", block: "nearest" });
 
     const detail = listItems[index]?.querySelector(".blog-list-title")?.textContent?.trim() || "";
     setAppTitleDetail("blog", detail);
     updateAppTitle("blog");
 
     const selectedItem = listItems[index];
     if (selectedItem) {
       selectedItem.dispatchEvent(new Event("blog:selected", { bubbles: true }));
     }
   }
 
   function openPost(blogID, updateHistory = true) {
     postOpen = true;
     listView.classList.add("hidden");
     postView.classList.remove("hidden");
     postView.scrollTop = 0;
 
     if (blogID && updateHistory) {
       const path = `/blog/${encodeURIComponent(blogID)}`;
       if (window.location.pathname !== path) {
         history.replaceState({ tab: "blog" }, "", path);
       }
     }
 
     updateAppTitle("blog");
   }
 
   function closePost(updateHistory = true) {
     postOpen = false;
     listView.classList.remove("hidden");
     postView.classList.add("hidden");
     clearAppTitleDetail("blog");
 
     if (updateHistory && window.location.pathname !== "/blog") {
       history.replaceState({ tab: "blog" }, "", "/blog");
     }
 
     updateAppTitle("blog");
   }
 
   listItems.forEach((item, index) => {
     if (item.dataset.boundClick === "1") return;
     item.dataset.boundClick = "1";
 
     item.addEventListener("click", () => {
       select(index);
       openPost(item.dataset.id, true);
     });
   });
 
   if (backBtn && backBtn.dataset.boundClick !== "1") {
     backBtn.dataset.boundClick = "1";
     backBtn.addEventListener("click", () => closePost(true));
   }
 
   if (blogHandlers.keydown) {
     document.removeEventListener("keydown", blogHandlers.keydown);
   }
 
   blogHandlers.keydown = (e) => {
     if (!section.isConnected) return;
     if (window.isLightboxOpen?.()) return;
     if (isEditableTarget(e.target)) return;
 
     if (!postOpen) {
       switch (e.key) {
         case "ArrowUp":
           e.preventDefault();
           if (selectedIndex > 0) select(selectedIndex - 1);
           break;
         case "ArrowDown":
           e.preventDefault();
           if (selectedIndex < listItems.length - 1) select(selectedIndex + 1);
           break;
         case "ArrowRight":
         case "Enter":
           e.preventDefault();
           listItems[selectedIndex]?.click();
           break;
         default:
           break;
       }
     } else {
       switch (e.key) {
         case "ArrowLeft":
         case "Escape":
           e.preventDefault();
           closePost(true);
           break;
         case "ArrowUp":
           e.preventDefault();
           postView.scrollBy({ top: -80, behavior: "smooth" });
           break;
         case "ArrowDown":
           e.preventDefault();
           postView.scrollBy({ top: 80, behavior: "smooth" });
           break;
         default:
           break;
       }
     }
   };
 
   document.addEventListener("keydown", blogHandlers.keydown);
 
   if (blogHandlers.popstate) {
     window.removeEventListener("popstate", blogHandlers.popstate);
   }
 
   blogHandlers.popstate = () => {
     if (!section.isConnected) return;
 
     const currentID = pathBlogID();
     if (!currentID) {
       closePost(false);
       return;
     }
 
     const item = itemByBlogID(currentID);
     if (!item) return;
 
     const idx = Number(item.dataset.index || 0);
     select(idx);
     openPost(currentID, false);
 
     if (!document.getElementById("blog-post-content")?.children.length) {
       item.click();
     }
   };
 
   window.addEventListener("popstate", blogHandlers.popstate);
 
   const pathID = pathBlogID();
   const selectedFromPath = itemByBlogID(pathID);
   const initialItem = selectedFromPath || section.querySelector(".blog-list-item.selected") || listItems[0];
   if (!initialItem) return;
 
   const initialIndex = Number(initialItem.dataset.index || 0);
   select(initialIndex);
 
   if (postOpen && !hasPrefilledPost) {
     initialItem.click();
   }
 }