← back to Quadrille Showroom

Next/Previous step one pattern across all 883 + keep pager visible while walking

d598030643faafa6b7668dee5bc0061659639d3d · 2026-06-29 15:36:40 -0700 · Steve

Files touched

• M public/js/showroom.js
• M public/showroom.html

Diff

commit d598030643faafa6b7668dee5bc0061659639d3d
Author: Steve <steve@designerwallcoverings.com>
Date:   Mon Jun 29 15:36:40 2026 -0700

    Next/Previous step one pattern across all 883 + keep pager visible while walking
---
 public/js/showroom.js | 27 +++++++++++++++++++++++----
 public/showroom.html  |  4 ++++
 2 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/public/js/showroom.js b/public/js/showroom.js
index a8e6020..f101a0e 100644
--- a/public/js/showroom.js
+++ b/public/js/showroom.js
@@ -1521,6 +1521,7 @@ async function advanceWindow(dir) {
   if (next === windowOffset) return false;
   await fetchWindow(next);
   rebuildWingWall();
+  if (BOOK_MODE) { setCenterBook(0); updateWindowLabel(); }  // refresh the centered book to the new window's first design
   return true;
 }
 
@@ -2139,10 +2140,28 @@ function setCenterBook(index) {
   const im = new Image(); im.onload = () => paint(im, im); im.src = src;
 }
 
-// Page the centered book through the catalog ([ ] / N-P). delta = +1 next, -1 previous.
-function pageCenterBook(delta) {
-  if (!centerBook) return;
-  setCenterBook(bookIndex + delta);
+// Page the centered book to the next/previous PATTERN across the FULL 883-design catalog
+// (not just the current 50-window). delta = +1 next, -1 previous. When stepping past the
+// edge of the loaded 50-window, fetch the adjacent window first, then show the right design.
+// Endless: wraps around the whole catalog. Guards against overlapping fetches mid-step.
+let _bookPaging = false;
+async function pageCenterBook(delta) {
+  if (!centerBook || _bookPaging) return;
+  const total = windowTotal || products.length || 0;
+  if (total <= 0) return;
+  _bookPaging = true;
+  try {
+    // Global index across all 883 designs, endless wrap.
+    const global = (((windowOffset + bookIndex + delta) % total) + total) % total;
+    const targetWindow = Math.floor(global / windowSize) * windowSize;
+    if (targetWindow !== windowOffset) {
+      await fetchWindow(targetWindow);   // load the adjacent 50-window into products[]
+      updateWindowLabel();
+    }
+    setCenterBook(global - windowOffset); // local index within the (possibly new) window
+  } finally {
+    _bookPaging = false;
+  }
 }
 
 // Live splay control — drag the Open° slider to fan the open book between 0° (flat) and 90°.
diff --git a/public/showroom.html b/public/showroom.html
index c3e700c..689bbc7 100644
--- a/public/showroom.html
+++ b/public/showroom.html
@@ -126,6 +126,10 @@
     body.explore-mode #guided-bar,
     body.explore-mode #guided-instruction,
     body.explore-mode #guided-title { display:none !important; }
+    /* BOOK MODE keeps the ◀ Previous / Next ▶ pager visible even while walking (explore-mode),
+       so paging one design at a time through all 883 is always available. Placed AFTER the
+       explore-mode hide so equal-specificity !important resolves in book mode's favour. */
+    body.book-mode #guided-bar { display:flex !important; }
     /* On small screens the big guided bar wraps; let it */
     @media (max-width:720px){
       #guided-bar { flex-wrap:wrap; width:92vw; justify-content:center; }

← 3b94ca1 Hamburger dock: stow all panels on load + launch each as mov  ·  back to Quadrille Showroom  ·  snapshot: clickthrough script + 5x report from review pass 52d16fc →