dock polish: stow pager on boot (P1), cascade first-open (P2), auto-close menu on launch (P3), Controls first-open height (P5)

c4fd7f2b8d5c415dbf013df9b8f8d9bf1a78fd44 · 2026-06-29 15:53:45 -0700 · Steve Abrams
Files touched

M public/js/dock.js
M public/showroom.html
Diff

commit c4fd7f2b8d5c415dbf013df9b8f8d9bf1a78fd44
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Mon Jun 29 15:53:45 2026 -0700

    dock polish: stow pager on boot (P1), cascade first-open (P2), auto-close menu on launch (P3), Controls first-open height (P5)
---
 public/js/dock.js    | 29 +++++++++++++++++++++++++++--
 public/showroom.html |  2 +-
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/public/js/dock.js b/public/js/dock.js
index ae4fa16..7aae615 100644
--- a/public/js/dock.js
+++ b/public/js/dock.js
@@ -24,8 +24,8 @@
   // --- LAUNCHABLE PANELS: each becomes a movable modal -----------------------
   // sel = the existing element; label = menu/header text; w/h = first-open size.
   var PANELS = [
-    { sel: '#guided-bar',     label: 'Navigate',        w: 660, h: 132 },
-    { sel: '#window-bar',     label: 'Controls',        w: 740, h: 150 },
+    { sel: '#guided-bar',     label: 'Navigate',        w: 660, h: 150 },
+    { sel: '#window-bar',     label: 'Controls',        w: 760, h: 240 },
     { sel: '#vm-panel',       label: 'View & Theme',    w: 300, h: 380 },
     { sel: '#ver-rail',       label: 'Versions',        w: 250, h: 440 },
     { sel: '#vendor-sidebar', label: 'Collection',      w: 250, h: 420 }
@@ -122,6 +122,23 @@
     if (el) el.classList.add('qh-stowed');
   }
 
+  // P2: give each panel a staggered FIRST-OPEN position so launching several
+  // doesn't pile them centered on top of each other. We pre-seed ModalRig's
+  // saved-rect key only when none exists yet — so a position the user has
+  // dragged (which ModalRig.saveRect writes to the same key) always wins on
+  // subsequent opens. Cascade stays clamped inside the viewport.
+  function seedCascadeRect(p) {
+    var key = 'modalrig:qhdock:' + p.sel;
+    try { if (localStorage.getItem(key)) return; } catch (e) {}
+    var i = PANELS.findIndex(function (x) { return x.sel === p.sel; });
+    if (i < 0) i = openOrder.length;
+    var step = 36, baseL = 90, baseT = 84;
+    var w = p.w || 760, h = p.h || 420;
+    var left = Math.max(0, Math.min(baseL + i * step, window.innerWidth - w - 16, window.innerWidth - 80));
+    var top  = Math.max(0, Math.min(baseT + i * step, window.innerHeight - h - 16, window.innerHeight - 40));
+    try { localStorage.setItem(key, JSON.stringify({ left: left, top: top, w: w, h: h })); } catch (e) {}
+  }
+
   // Launch (or re-show) a panel as a movable modal.
   function launch(p) {
     var el = $(p.sel);
@@ -158,6 +175,7 @@
       head.querySelector('.qh-modal-x').setAttribute('data-rig-btn', '1');
       wrap.addEventListener('mousedown', function () { bringToFront(p.sel, wrap); });
 
+      seedCascadeRect(p);   // P2: stagger first-open position so panels don't all stack centered
       ModalRig.rig(wrap, { key: 'qhdock:' + p.sel, handle: head, width: p.w, height: p.h });
     }
     wrap.classList.remove('qh-stowed');
@@ -198,6 +216,11 @@
   // ----------------------------------------------------------------- menu -----
   var burger, menu;
 
+  function closeMenu() {
+    if (menu) menu.classList.remove('open');
+    if (burger) burger.classList.remove('open');
+  }
+
   function buildMenu() {
     burger = document.createElement('div');
     burger.id = 'qh-burger';
@@ -232,10 +255,12 @@
       if (pSel) {
         var p = PANELS.filter(function (x) { return x.sel === pSel; })[0];
         if (p) toggle(p);
+        closeMenu();   // P3 (DTD A): launching a panel auto-closes the menu so the modal is unobstructed
       } else if (tIdx !== null) {
         var t = TOOLS[+tIdx];
         var btn = t && $(t.sel);
         if (btn) { btn.click(); setTimeout(reflectMenu, 30); }
+        closeMenu();
       }
     });
 
diff --git a/public/showroom.html b/public/showroom.html
index 689bbc7..4cfc8ea 100644
--- a/public/showroom.html
+++ b/public/showroom.html
@@ -129,7 +129,7 @@
     /* 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; }
+    body.book-mode #guided-bar:not(.qh-stowed) { 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; }
← 95724fe Arrow keys (left/right) page prev/next pattern on the wings; · back to Quadrille Showroom · Age View band-differentiation: split young/adult/established c378473 →