viewer standard: add Grid/List toggle + per-field on/off menu (Fields) to product grid

3de80c6a40fd7fcacc3d511c69e0ea84ac87d498 · 2026-08-12 08:33:42 -0700 · Steve
Files touched

M index.html
Diff

commit 3de80c6a40fd7fcacc3d511c69e0ea84ac87d498
Author: Steve <steve@designerwallcoverings.com>
Date:   Wed Aug 12 08:33:42 2026 -0700

    viewer standard: add Grid/List toggle + per-field on/off menu (Fields) to product grid
---
 index.html | 78 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 75 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 271a657..412d91b 100644
--- a/index.html
+++ b/index.html
@@ -463,6 +463,34 @@ footer { padding: 80px 32px 40px; border-top: 1px solid var(--line); }
   .table-view tbody td.thumb { display: none; }
 }
 </style>
+<style id="glw-fields-menu">
+/* ── Fields on/off menu (goldleafwallpaper) ─────────────────────────────── */
+.glw-fieldmenu { position:relative; flex-shrink:0; }
+.glw-fbtn {
+  padding:7px 14px; font-size:10px; letter-spacing:0.22em; text-transform:uppercase;
+  font-weight:700; color:var(--ink); background:transparent; border:1px solid var(--line);
+  cursor:pointer; font-family:inherit; transition:all 0.2s;
+}
+.glw-fbtn:hover { border-color:var(--gold); color:var(--gold); }
+.glw-fpop {
+  position:absolute; top:calc(100% + 8px); right:0; background:var(--bg);
+  border:1px solid var(--line); box-shadow:0 14px 34px rgba(0,0,0,.28);
+  padding:6px 4px; z-index:30; min-width:180px;
+}
+.glw-fpop[hidden] { display:none; }
+.glw-fpop label {
+  display:flex; align-items:center; gap:10px; padding:7px 14px;
+  font-size:10px; letter-spacing:0.14em; text-transform:uppercase; font-weight:600;
+  color:var(--ink-soft); cursor:pointer; white-space:nowrap; font-family:inherit;
+}
+.glw-fpop label:hover { background:var(--gold-dim); }
+.glw-fpop input[type=checkbox] { accent-color:var(--gold); width:13px; height:13px; }
+/* Per-field hide rules — html.hf-glw-<field> (survives grid re-render) */
+html.hf-glw-image  .item img             { display:none !important }
+html.hf-glw-vendor [data-f="glw-vendor"] { display:none !important }
+html.hf-glw-title  [data-f="glw-title"]  { display:none !important }
+html.hf-glw-sample [data-f="glw-sample"] { display:none !important }
+</style>
 <style id="ns-modal-fix">.ns-modal{display:none}.ns-modal.show{display:flex;align-items:center;justify-content:center;position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:1000}.ns-modal-card{background:#faf6ef;color:#1a1714;padding:32px;border-radius:12px;max-width:480px;width:90%;position:relative;box-shadow:0 20px 60px rgba(0,0,0,0.3)}.ns-modal .close-x{position:absolute;top:12px;right:16px;background:transparent;border:0;font-size:24px;cursor:pointer;color:#1a1714}.ns-modal h3{margin:0 0 8px;font-size:22px;font-weight:400}.ns-modal .sub{color:rgba(0,0,0,0.5);margin:0 0 20px;font-size:14px}.ns-actions{display:grid;gap:10px}.ns-action{display:flex;gap:14px;align-items:center;color:inherit;text-decoration:none;padding:14px 16px;border:1px solid rgba(0,0,0,0.12);border-radius:8px}.ns-action:hover{background:rgba(0,0,0,0.04)}.ns-action .ico{font-size:20px}.ns-action .txt{display:flex;flex-direction:column}.ns-action .txt b{font-weight:600}.ns-action .txt span{font-size:12px;color:rgba(0,0,0,0.5)}</style>
 <script src="/corner-nav.js" defer></script>
 </head>
@@ -636,6 +664,10 @@ footer { padding: 80px 32px 40px; border-top: 1px solid var(--line); }
       <button id="viewGallery" class="active" role="tab" aria-selected="true">Gallery</button>
       <button id="viewTable" role="tab" aria-selected="false">Table</button>
     </div>
+    <div class="glw-fieldmenu">
+      <button class="glw-fbtn" id="glwFieldsBtn" aria-haspopup="true" aria-expanded="false">Fields &#9662;</button>
+      <div class="glw-fpop" id="glwFpop" hidden role="menu"></div>
+    </div>
     <div class="search-wrap">
       <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-5.5-5.5"/></svg>
       <input type="text" id="searchInput" placeholder="Search pattern, vendor, SKU...">
@@ -958,9 +990,9 @@ function renderGrid(page) {
     return '<div class="item">' +
       '<img src="' + img + '" alt="' + title + '" loading="lazy" onerror="this.style.opacity=0.12">' +
       '<div class="overlay">' +
-        '<div class="item-vendor">' + vendor + '</div>' +
-        '<div class="item-name">' + title + '</div>' +
-        '<div class="item-actions">' +
+        '<div class="item-vendor" data-f="glw-vendor">' + vendor + '</div>' +
+        '<div class="item-name" data-f="glw-title">' + title + '</div>' +
+        '<div class="item-actions" data-f="glw-sample">' +
           '<a class="sample-btn" href="' + dwLink + '" target="_blank" rel="noopener" title="Order free memo sample">Memo Sample — Free</a>' +
         '</div>' +
       '</div>' +
@@ -1149,6 +1181,46 @@ function submitSample(e) {
   'Request sent — ships in 3–5 business days', closeSampleModal);
 }
 
+// === FIELDS MENU ===
+(function(){
+  var GLW_FIELDS = [
+    ['glw-image','Image',true],['glw-vendor','Brand',true],
+    ['glw-title','Pattern',true],['glw-sample','Sample CTA',true],
+  ];
+  var glwFields = (function(){
+    var def={}; GLW_FIELDS.forEach(function(f){ def[f[0]]=f[2]; });
+    try{ return Object.assign(def, JSON.parse(localStorage.getItem('glw.fields')||'{}')); }catch{ return def; }
+  })();
+  function glwApplyFields(){
+    GLW_FIELDS.forEach(function(f){ document.documentElement.classList.toggle('hf-'+f[0], !glwFields[f[0]]); });
+  }
+  function glwBuildFieldMenu(){
+    var fpop=document.getElementById('glwFpop'); if(!fpop) return;
+    fpop.innerHTML = GLW_FIELDS.map(function(f){
+      return '<label><input type="checkbox" data-field="'+f[0]+'"'+(glwFields[f[0]]?' checked':'')+'>'+f[1]+'</label>';
+    }).join('');
+    fpop.querySelectorAll('input').forEach(function(cb){
+      cb.addEventListener('change',function(){
+        glwFields[cb.dataset.field]=cb.checked;
+        try{ localStorage.setItem('glw.fields', JSON.stringify(glwFields)); }catch(ex){}
+        glwApplyFields();
+        renderCurrent(); // re-render so data-f tags are re-applied (re-renders add tags)
+      });
+    });
+  }
+  var fbtn=document.getElementById('glwFieldsBtn'), fpop2=document.getElementById('glwFpop');
+  if(fbtn && fpop2){
+    fbtn.addEventListener('click',function(e){
+      e.stopPropagation(); var open=fpop2.hidden; fpop2.hidden=!open;
+      fbtn.setAttribute('aria-expanded', String(open));
+    });
+    document.addEventListener('click',function(e){
+      if(!fpop2.hidden && !e.target.closest('.glw-fieldmenu')){ fpop2.hidden=true; fbtn.setAttribute('aria-expanded','false'); }
+    });
+  }
+  glwBuildFieldMenu(); glwApplyFields();
+})();
+
 // === LOAD DATA ===
 fetch('/data/products.json')
   .then(function(r) { return r.json(); })
← 493523d chore: lint, refactor (dedup Bronze, EXPIRED guard), v1.2.0 · back to Goldleafwallpaper · TK-11341: add AdSense Auto-Ads loader + ads.txt (revert to r c208dc7 →