zsbqb-static 0.1.9 → 0.1.10

package/css/app.css

@@ -853,8 +853,11 @@ th { color: var(--muted); font-weight: 600; font-size: 13px; background: var(--b
   width: 28px;
   flex: 1 1 auto;
   min-height: 1em;
+  margin: 0;
   padding: 0;
+  border: 0;
   border-radius: 5px;
+  background: transparent;
   color: var(--muted);
   font-size: clamp(8px, calc((var(--alpha-rail-fit, 70svh) - 20px) / 36), 13px);
   font-weight: 600;
@@ -862,6 +865,9 @@ th { color: var(--muted); font-weight: 600; font-size: 13px; background: var(--b
   font-variant-numeric: tabular-nums;
   line-height: 1;
   letter-spacing: 0;
+  appearance: none;
+  -webkit-appearance: none;
+  cursor: pointer;
 }
 .alpha-rail__item:hover,
 .alpha-rail__item.is-scrub {

package/js/app.js

@@ -1639,14 +1639,24 @@ function bindAlphaRail() {
     items.forEach((el) => el.classList.remove("is-scrub"));
   }
 
+  function currentLetter() {
+    const on = items.find((el) => el.classList.contains("is-on"));
+    return letterOf(on);
+  }
+
   function goTo(item) {
     if (!item || navigating) return;
     const label = letterOf(item);
+    if (!label) return;
+    const qEl = document.querySelector("[data-search-input]");
+    const qDisplay = (qEl && qEl.value ? qEl.value : "").trim();
+    if (!qDisplay && label.toLowerCase() === currentLetter().toLowerCase()) return;
     if (typeof window.__setQueryLetterFilter === "function") {
       window.__setQueryLetterFilter(label);
       return;
     }
-    const next = item.href;
+    if (!qDisplay && item.classList.contains("is-on")) return;
+    const next = item.getAttribute("data-href") || item.href;
     if (!next || next === window.location.href) return;
     navigating = true;
     window.location.assign(next);
@@ -1696,14 +1706,19 @@ function bindAlphaRail() {
   rail.addEventListener("pointermove", onPointerMove);
   rail.addEventListener("pointerup", onPointerUp);
   rail.addEventListener("pointercancel", onPointerCancel);
-
-  items.forEach((item) => {
-    item.addEventListener("click", (event) => {
+  rail.addEventListener(
+    "click",
+    (event) => {
       event.preventDefault();
+      event.stopPropagation();
       if (pointerHandled) return;
-      goTo(item);
-    });
-  });
+      const raw = event.target;
+      const el = raw && raw.nodeType === 1 ? raw : raw && raw.parentElement;
+      const item = el && el.closest ? el.closest("[data-alpha-item]") : null;
+      if (item && rail.contains(item)) goTo(item);
+    },
+    true
+  );
 
   window.__fitQueryAlphaRail = fitRail;
   fitRail();