viewer standard: add Grid/List toggle + per-field on/off menu to internal record-grid viewer

f4fce8e7f0d70bcca0ca4f17490d808598852483 · 2026-08-12 08:53:17 -0700 · Steve
Files touched

M public/index.html
Diff

commit f4fce8e7f0d70bcca0ca4f17490d808598852483
Author: Steve <steve@designerwallcoverings.com>
Date:   Wed Aug 12 08:53:17 2026 -0700

    viewer standard: add Grid/List toggle + per-field on/off menu to internal record-grid viewer
---
 public/index.html | 80 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 80 insertions(+)

diff --git a/public/index.html b/public/index.html
index c7f1152..5258edf 100644
--- a/public/index.html
+++ b/public/index.html
@@ -39,6 +39,33 @@ label.tog { font-size:12px; color:var(--dim); display:flex; gap:5px; align-items
 a.drill { color:inherit; text-decoration:none; border-bottom:1px dotted transparent; cursor:pointer; }
 a.drill:hover { color:var(--teal); border-bottom-color:var(--teal); }
 a.drill.on { color:var(--teal); }
+
+/* ── Grid / List toggle ── */
+.vtoggle { display:flex; border:1px solid var(--line); border-radius:6px; overflow:hidden; }
+.vtoggle button { background:var(--card); color:var(--dim); border:none; padding:5px 11px; font:12px/1 inherit; cursor:pointer; }
+.vtoggle button.on { background:var(--teal); color:#0a1412; font-weight:700; }
+
+/* ── List view ── */
+#grid.list { display:block; }
+#grid.list .card { display:flex; flex-direction:row; align-items:stretch; margin-bottom:6px; border-radius:6px; }
+#grid.list .card img { width:64px; min-width:64px; height:64px; aspect-ratio:auto; object-fit:cover; }
+#grid.list .card > div[style*="aspect-ratio"] { width:64px; min-width:64px; height:64px; aspect-ratio:auto; }
+#grid.list .card .meta { flex:1; padding:6px 10px; font-size:12px; display:flex; flex-direction:column; justify-content:center; gap:2px; }
+
+/* ── Fields menu ── */
+.fieldmenu { position:relative; }
+.fbtn { background:var(--card); color:var(--dim); border:1px solid var(--line); border-radius:6px; padding:5px 11px; font:12px/1 inherit; cursor:pointer; }
+.fbtn:hover { border-color:var(--teal); color:var(--fg); }
+.fpop { position:absolute; top:calc(100% + 6px); right:0; background:var(--card); border:1px solid var(--line); border-radius:8px; box-shadow:0 10px 28px #0006; padding:8px 4px; z-index:30; min-width:168px; }
+.fpop[hidden] { display:none; }
+.fpop label { display:flex; align-items:center; gap:8px; padding:5px 12px; font-size:12px; color:var(--dim); cursor:pointer; white-space:nowrap; }
+.fpop label:hover { color:var(--fg); }
+.fpop input { accent-color:var(--teal); }
+
+/* ── Field-hide rules (grid mode only) ── */
+#grid:not(.list).hf-pr      .card .pr       { display:none; }
+#grid:not(.list).hf-internal .card .internal { display:none; }
+#grid:not(.list).hf-when    .card .when     { display:none; }
 </style>
 </head>
 <body>
@@ -52,8 +79,22 @@ a.drill.on { color:var(--teal); }
       <option value="pattern">Pattern A→Z</option>
       <option value="title">Title A→Z</option>
       <option value="sku">SKU A→Z</option>
+      <option value="colorway">Colorway A→Z</option>
+      <option value="status">Shopify Status</option>
     </select>
     <input type="range" id="density" min="2" max="10" value="5" title="Density">
+    <div class="vtoggle">
+      <button id="vGrid" class="on" onclick="setView('grid')">▦ Grid</button>
+      <button id="vList" onclick="setView('list')">☰ List</button>
+    </div>
+    <div class="fieldmenu">
+      <button class="fbtn" onclick="toggleFieldsMenu(event)">Fields ▾</button>
+      <div class="fpop" id="fpop" hidden>
+        <label><input type="checkbox" data-rf="pr" checked> Title / Status</label>
+        <label><input type="checkbox" data-rf="internal" checked> Pattern / SKU</label>
+        <label><input type="checkbox" data-rf="when" checked> Date</label>
+      </div>
+    </div>
     <label class="tog"><input type="checkbox" id="imgonly"> texture wall</label>
   </div>
 </header>
@@ -125,6 +166,8 @@ function render() {
     s==='newest' ? (b.imported_at||b.created_at||'').localeCompare(a.imported_at||a.created_at||'') :
     s==='pattern' ? (a.pattern||'').localeCompare(b.pattern||'') :
     s==='title' ? (a.title||'').localeCompare(b.title||'') :
+    s==='colorway' ? (a.colorway||'').localeCompare(b.colorway||'') :
+    s==='status' ? (a.shopstatus||'').localeCompare(b.shopstatus||'') :
     (a.dw_sku||'').localeCompare(b.dw_sku||''));
   $('#grid').innerHTML = rows.map(p => `
     <div class="card" data-href="${esc(p.product_url||'')}" title="${esc(p.mfr_sku)} · created ${p.created_at||''}">
@@ -145,6 +188,43 @@ $('#imgonly').onchange = (e) => document.body.classList.toggle('imgonly', e.targ
 if (localStorage.getItem('vah.cols')) { $('#density').value = localStorage.getItem('vah.cols'); document.documentElement.style.setProperty('--cols', $('#density').value); }
 if (localStorage.getItem('vah.sort')) $('#sort').value = localStorage.getItem('vah.sort');
 
+// ── Grid / List view toggle ──
+const VAH_FIELDS_DEFAULTS = { pr: true, internal: true, when: true };
+function setView(v) {
+  const g = $('#grid');
+  g.classList.toggle('list', v === 'list');
+  $('#vGrid').classList.toggle('on', v !== 'list');
+  $('#vList').classList.toggle('on', v === 'list');
+  localStorage.setItem('vah.view', v);
+}
+(function initView() { setView(localStorage.getItem('vah.view') || 'grid'); })();
+
+// ── Fields menu ──
+function getFieldPrefs() {
+  try { return Object.assign({}, VAH_FIELDS_DEFAULTS, JSON.parse(localStorage.getItem('vah.fields') || '{}')); }
+  catch(e) { return Object.assign({}, VAH_FIELDS_DEFAULTS); }
+}
+function applyFieldPrefs(prefs) {
+  const g = $('#grid');
+  for (const [k, on] of Object.entries(prefs)) g.classList.toggle('hf-' + k, !on);
+  document.querySelectorAll('#fpop [data-rf]').forEach(cb => { cb.checked = !!prefs[cb.dataset.rf]; });
+}
+function toggleFieldsMenu(e) {
+  e.stopPropagation();
+  const pop = $('#fpop');
+  pop.hidden = !pop.hidden;
+}
+document.addEventListener('click', () => { const p = $('#fpop'); if (p) p.hidden = true; });
+document.querySelectorAll('#fpop [data-rf]').forEach(cb => {
+  cb.addEventListener('change', () => {
+    const prefs = getFieldPrefs();
+    prefs[cb.dataset.rf] = cb.checked;
+    localStorage.setItem('vah.fields', JSON.stringify(prefs));
+    applyFieldPrefs(prefs);
+  });
+});
+applyFieldPrefs(getFieldPrefs());
+
 // ── grid delegated clicks: atom drill-in (plain click) + card open (elsewhere) ──
 const grid = $('#grid');
 grid.addEventListener('click', e => {
← 52b42eb vahallan-line-viewer: facet values are real <a href> hrefs, · back to Vahallan Line Viewer · nav-agent: universal grid-controls drop-in on internal viewe 25d74b7 →