script.js

(function () {
  const slides = Array.from(document.querySelectorAll(".slide"));
  const bar = document.getElementById("bar");
  const counter = document.getElementById("counter");
  const chip = document.getElementById("chip");
  const overlay = document.getElementById("tocOverlay");
  const ovList = document.getElementById("ovList");
  const total = slides.length;
  let cur = 0;

  // 构建目录浮层
  slides.forEach((s, i) => {
    const a = document.createElement("a");
    a.href = "#" + (i + 1);
    const t = s.getAttribute("data-title") || "第 " + (i + 1) + " 页";
    a.innerHTML = '<span class="n">' + String(i + 1).padStart(2, "0") + "</span>" + t;
    a.addEventListener("click", (e) => {
      e.preventDefault();
      go(i);
      overlay.classList.remove("open");
    });
    ovList.appendChild(a);
  });

  function go(n) {
    cur = Math.max(0, Math.min(total - 1, n));
    slides.forEach((s, i) => s.classList.toggle("active", i === cur));
    bar.style.width = ((cur + 1) / total) * 100 + "%";
    counter.textContent =
      String(cur + 1).padStart(2, "0") + " / " + String(total).padStart(2, "0");
    const ch = slides[cur].getAttribute("data-ch") || "";
    chip.textContent = ch;
    chip.style.display = ch ? "" : "none";
    const acc = getComputedStyle(slides[cur]).getPropertyValue("--acc");
    if (acc) bar.style.background = acc;
    history.replaceState(null, "", "#" + (cur + 1));
  }

  document.addEventListener("keydown", (e) => {
    if (e.metaKey || e.ctrlKey || e.altKey) return;
    if (overlay.classList.contains("open") && e.key === "Escape") {
      overlay.classList.remove("open");
      return;
    }
    switch (e.key) {
      case "ArrowRight":
      case "ArrowDown":
      case "PageDown":
      case " ":
        e.preventDefault();
        go(cur + 1);
        break;
      case "ArrowLeft":
      case "ArrowUp":
      case "PageUp":
        e.preventDefault();
        go(cur - 1);
        break;
      case "Home":
        go(0);
        break;
      case "End":
        go(total - 1);
        break;
      case "t":
      case "T":
        overlay.classList.toggle("open");
        break;
    }
  });

  document.getElementById("btnPrev").addEventListener("click", () => go(cur - 1));
  document.getElementById("btnNext").addEventListener("click", () => go(cur + 1));
  document.getElementById("btnToc").addEventListener("click", () =>
    overlay.classList.toggle("open")
  );
  overlay.addEventListener("click", (e) => {
    if (e.target === overlay) overlay.classList.remove("open");
  });

  // 触摸滑动
  let x0 = null;
  document.addEventListener("touchstart", (e) => (x0 = e.touches[0].clientX), { passive: true });
  document.addEventListener(
    "touchend",
    (e) => {
      if (x0 === null) return;
      const dx = e.changedTouches[0].clientX - x0;
      if (Math.abs(dx) > 60) go(cur + (dx < 0 ? 1 : -1));
      x0 = null;
    },
    { passive: true }
  );

  window.addEventListener("hashchange", () => {
    const n = parseInt(location.hash.slice(1), 10);
    if (!isNaN(n) && n - 1 !== cur) go(n - 1);
  });

  const start = parseInt(location.hash.slice(1), 10);
  go(isNaN(start) ? 0 : start - 1);
})();