← back to Flockedwallpaper

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

08d17aa952b8e21d27a4b4fb06184879827df959 · 2026-08-12 08:33:41 -0700 · Steve

Files touched

• M index.html

Diff

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

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

diff --git a/index.html b/index.html
index dbadb0d..f1b4070 100644
--- a/index.html
+++ b/index.html
@@ -89,6 +89,28 @@ footer .footer-desc{font-weight:300;font-size:12px;color:var(--gray);line-height
 .chat-label{font-weight:500;font-size:10px;color:var(--gray)}
 .share-btn{position:fixed;bottom:80px;right:20px;width:48px;height:48px;border-radius:24px;background:var(--gold);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,.2);cursor:pointer;border:none;z-index:90}
 .share-btn svg{width:20px;height:20px}
+/* ── Grid/List toggle + Fields menu (added) ─────────────────────────────── */
+.fw-view-seg{display:flex;border:1px solid var(--gold);overflow:hidden;flex-shrink:0}
+.fw-view-seg button{padding:6px 12px;background:transparent;border:none;border-right:1px solid var(--gold);font-family:'Inter',sans-serif;font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;cursor:pointer;color:var(--gold)}
+.fw-view-seg button:last-child{border-right:none}
+.fw-view-seg button.on{background:var(--gold);color:var(--black)}
+.fw-fieldmenu{position:relative;flex-shrink:0}
+.fw-fbtn{padding:6px 12px;border:1px solid var(--gold);background:transparent;font-family:'Inter',sans-serif;font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;color:var(--gold);cursor:pointer}
+.fw-fpop{position:absolute;top:calc(100% + 6px);right:0;background:var(--espresso);border:1px solid var(--gold);padding:6px 4px;z-index:40;min-width:170px}
+.fw-fpop[hidden]{display:none}
+.fw-fpop label{display:flex;align-items:center;gap:10px;padding:7px 14px;font-family:'Inter',sans-serif;font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:500;color:#ccc;cursor:pointer;white-space:nowrap}
+.fw-fpop label:hover{background:rgba(196,153,92,.1)}
+.fw-fpop input[type=checkbox]{accent-color:var(--gold)}
+/* List view */
+html.fw-list #productGrid{display:block}
+html.fw-list #productGrid .product-card{display:flex;flex-direction:row;align-items:center;gap:12px;margin-bottom:8px;padding:8px;border-bottom:1px solid rgba(255,255,255,.08)}
+html.fw-list #productGrid .product-card img{width:72px;height:72px;border-radius:4px;aspect-ratio:1/1;flex-shrink:0}
+html.fw-list #productGrid .product-card .name{font-size:13px}
+/* Per-field hide rules */
+html.hf-fw-image   .product-card img    { display:none !important }
+html.hf-fw-title   [data-f="fw-title"]  { display:none !important }
+html.hf-fw-color   [data-f="fw-color"]  { display:none !important }
+html.hf-fw-cta     [data-f="fw-cta"]    { display:none !important }
 </style>
 <style id="rebrand-tokens-flockedwallpaper">
 :root { --primary: #D70000; --paper: #FFF; --ink: #000; --accent: #D70000; --line: #000; --muted: #D70000; }
@@ -290,6 +312,14 @@ footer .footer-desc{font-weight:300;font-size:12px;color:var(--gray);line-height
   </select>
   <label style="font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted,#A98B5B);margin-left:14px">Density</label>
   <input id="density" type="range" min="180" max="380" step="10" value="240" style="accent-color:var(--accent,#A98B5B);width:140px;cursor:pointer">
+  <div class="fw-view-seg" role="tablist" aria-label="View">
+    <button id="fwVGrid" class="on">Grid</button>
+    <button id="fwVList">List</button>
+  </div>
+  <div class="fw-fieldmenu">
+    <button class="fw-fbtn" id="fwFieldsBtn" aria-haspopup="true" aria-expanded="false">Fields &#9662;</button>
+    <div class="fw-fpop" id="fwFpop" hidden role="menu"></div>
+  </div>
 </div>
 <script>
 // Controls wiring — deferred to DOMContentLoaded so #productGrid (declared after
@@ -475,7 +505,7 @@ function displayBatch(){
     const card=document.createElement('div');
     card.className='product-card';
     card.onclick=()=>window.open(p.productUrl,'_blank');
-    card.innerHTML=`<img src="${p.image}" alt="${p.title}" loading="lazy"><div class="name">${shortTitle(p.title)}</div><div class="color">${p.primaryColor||'Flocked Velvet'}</div><div class="shop-link">Shop on DW &rarr;</div>`;
+    card.innerHTML=`<img src="${p.image}" alt="${p.title}" loading="lazy"><div class="name" data-f="fw-title">${shortTitle(p.title)}</div><div class="color" data-f="fw-color">${p.primaryColor||'Flocked Velvet'}</div><div class="shop-link" data-f="fw-cta">Shop on DW &rarr;</div>`;
     grid.appendChild(card);
   }
   displayed=end;
@@ -493,6 +523,67 @@ function shareProduct(){
 }
 
 init();
+
+// ── Grid/List toggle ─────────────────────────────────────────────────────────
+(function(){
+  const FW_FIELDS = [
+    ['fw-image','Image',true],['fw-title','Title',true],
+    ['fw-color','Color',true],['fw-cta','Shop Link',true],
+  ];
+  const STORE = 'flockedwallpaper_grid';
+  function fwGetSaved(){ try{ return JSON.parse(localStorage.getItem(STORE)||'{}'); }catch{ return {}; } }
+  function fwSave(obj){ localStorage.setItem(STORE, JSON.stringify(obj)); }
+
+  // view
+  var saved = fwGetSaved();
+  var fwView = saved.view || 'grid';
+  function fwSetView(v){
+    fwView = v;
+    document.documentElement.classList.toggle('fw-list', v==='list');
+    var vg=document.getElementById('fwVGrid'), vl=document.getElementById('fwVList');
+    if(vg){ vg.classList.toggle('on', v==='grid'); }
+    if(vl){ vl.classList.toggle('on', v==='list'); }
+    var s=fwGetSaved(); s.view=v; fwSave(s);
+  }
+  fwSetView(fwView);
+  var vgBtn=document.getElementById('fwVGrid'), vlBtn=document.getElementById('fwVList');
+  if(vgBtn) vgBtn.addEventListener('click',function(){ fwSetView('grid'); });
+  if(vlBtn) vlBtn.addEventListener('click',function(){ fwSetView('list'); });
+
+  // fields
+  var fwFields = (function(){
+    var def={}; FW_FIELDS.forEach(function(f){ def[f[0]]=f[2]; });
+    try{ return Object.assign(def, JSON.parse(localStorage.getItem('flockedwallpaper_fields')||'{}')); }catch{ return def; }
+  })();
+  function fwApplyFields(){
+    FW_FIELDS.forEach(function(f){ document.documentElement.classList.toggle('hf-'+f[0], !fwFields[f[0]]); });
+  }
+  function fwBuildFieldMenu(){
+    var fpop=document.getElementById('fwFpop'); if(!fpop) return;
+    fpop.innerHTML=FW_FIELDS.map(function(f){
+      return '<label><input type="checkbox" data-field="'+f[0]+'"'+(fwFields[f[0]]?' checked':'')+'>'+f[1]+'</label>';
+    }).join('');
+    fpop.querySelectorAll('input').forEach(function(cb){
+      cb.addEventListener('change',function(){
+        fwFields[cb.dataset.field]=cb.checked;
+        localStorage.setItem('flockedwallpaper_fields', JSON.stringify(fwFields));
+        fwApplyFields();
+      });
+    });
+  }
+  var fwFBtn=document.getElementById('fwFieldsBtn'), fwFpop=document.getElementById('fwFpop');
+  if(fwFBtn && fwFpop){
+    fwFBtn.addEventListener('click',function(e){
+      e.stopPropagation(); var open=fwFpop.hidden; fwFpop.hidden=!open;
+      fwFBtn.setAttribute('aria-expanded', String(open));
+    });
+    document.addEventListener('click',function(e){
+      if(!fwFpop.hidden && !e.target.closest('.fw-fieldmenu')){ fwFpop.hidden=true; fwFBtn.setAttribute('aria-expanded','false'); }
+    });
+  }
+  fwBuildFieldMenu();
+  fwApplyFields();
+})();
 </script>
 
 <!-- Zendesk Widget -->

← 2e9a728 SEO: rel=nofollow sponsored on designerwallcoverings.com lin  ·  back to Flockedwallpaper  ·  TK-11341: add AdSense Auto-Ads loader + ads.txt (revert to r c0e5de1 →