← back to Glassbeadedwallpaper
viewer standard: add Grid/List toggle + per-field on/off menu (Fields) to product grid
9c78951634192e2837ea7f0aa21290f463a9b828 · 2026-08-12 08:33:41 -0700 · Steve
Files touched
Diff
commit 9c78951634192e2837ea7f0aa21290f463a9b828
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 | 98 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 98 insertions(+)
diff --git a/index.html b/index.html
index 8305683..a334733 100644
--- a/index.html
+++ b/index.html
@@ -79,6 +79,33 @@
]
}
</script>
+<style id="gbw-view-fields">
+/* ── Grid/List toggle + Fields menu ─────────────────────────────────────── */
+.gbw-view-seg{display:flex;border:1px solid var(--line,#D8D2C5);overflow:hidden;flex-shrink:0}
+.gbw-view-seg button{padding:6px 12px;background:transparent;border:none;border-right:1px solid var(--line,#D8D2C5);font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;cursor:pointer;color:var(--muted,#A98B5B)}
+.gbw-view-seg button:last-child{border-right:none}
+.gbw-view-seg button.on{background:var(--accent,#A98B5B);color:#fff}
+.gbw-fieldmenu{position:relative;flex-shrink:0}
+.gbw-fbtn{padding:6px 12px;border:1px solid var(--line,#D8D2C5);background:transparent;font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;color:var(--muted,#A98B5B);cursor:pointer}
+.gbw-fbtn:hover{border-color:var(--accent,#A98B5B);color:var(--ink,#1A1A1A)}
+.gbw-fpop{position:absolute;top:calc(100% + 6px);right:0;background:#fff;border:1px solid var(--line,#D8D2C5);box-shadow:0 8px 24px rgba(0,0,0,.12);padding:6px 4px;z-index:40;min-width:175px}
+.gbw-fpop[hidden]{display:none}
+.gbw-fpop label{display:flex;align-items:center;gap:10px;padding:7px 14px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:500;color:#4a4a4a;cursor:pointer;white-space:nowrap}
+.gbw-fpop label:hover{background:#faf9f6}
+.gbw-fpop input[type=checkbox]{accent-color:var(--accent,#A98B5B)}
+/* List view */
+html.gbw-list #productsGrid{display:block}
+html.gbw-list #productsGrid .product-card{display:flex;flex-direction:row;align-items:center;gap:14px;margin-bottom:6px;padding:8px 12px;border-bottom:1px solid #eee;cursor:pointer}
+html.gbw-list #productsGrid .product-card .product-image{flex:0 0 72px;height:72px;min-height:0;aspect-ratio:auto}
+html.gbw-list #productsGrid .product-card .product-image img{width:72px;height:72px;object-fit:cover}
+html.gbw-list #productsGrid .product-card .product-info{display:flex;flex-direction:row;align-items:center;gap:16px;flex:1}
+/* Per-field hide rules */
+html.hf-gbw-image .product-image { display:none !important }
+html.hf-gbw-sku [data-f="gbw-sku"] { display:none !important }
+html.hf-gbw-title [data-f="gbw-title"] { display:none !important }
+html.hf-gbw-category [data-f="gbw-category"] { display:none !important }
+html.hf-gbw-cta [data-f="gbw-cta"] { display:none !important }
+</style>
<style id="rebrand-tokens-glassbeadedwallpaper">
:root { --primary: #1A1A1A; --paper: #FAF9F6; --ink: #1A1A1A; --accent: #A98B5B; --line: #D8D2C5; --muted: #A98B5B; }
.sample-btn, .cta, .submit-btn { background: transparent !important; color: var(--muted, var(--accent)) !important; border: 1px solid var(--muted, var(--accent)) !important; transition: background 0.15s, color 0.15s; }
@@ -369,6 +396,14 @@
</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="gbw-view-seg" role="tablist" aria-label="View">
+ <button id="gbwVGrid" class="on">Grid</button>
+ <button id="gbwVList">List</button>
+ </div>
+ <div class="gbw-fieldmenu">
+ <button class="gbw-fbtn" id="gbwFieldsBtn" aria-haspopup="true" aria-expanded="false">Fields ▾</button>
+ <div class="gbw-fpop" id="gbwFpop" hidden role="menu"></div>
+ </div>
</div>
<script>
// Controls wiring — deferred to DOMContentLoaded so #productsGrid (declared after
@@ -681,18 +716,22 @@
const sku = document.createElement('div');
sku.className = 'product-sku';
+ sku.setAttribute('data-f', 'gbw-sku');
sku.textContent = product.primarySku;
const name = document.createElement('div');
name.className = 'product-name';
+ name.setAttribute('data-f', 'gbw-title');
name.textContent = product.title;
const category = document.createElement('div');
category.className = 'product-category';
+ category.setAttribute('data-f', 'gbw-category');
category.textContent = product.category || 'Glass Beaded';
const link = document.createElement('div');
link.className = 'product-link';
+ link.setAttribute('data-f', 'gbw-cta');
link.innerHTML = 'View on DesignerWallcoverings.com →';
info.appendChild(sku);
@@ -854,5 +893,64 @@
</script>
<!-- DW network ad slot -->
<script src="https://ads.agentabrams.com/embed.js" data-slot="footer-strip"></script>
+<script>
+// ── Grid/List toggle + Fields menu (glassbeadedwallpaper) ────────────────────
+(function(){
+ var GBW_FIELDS = [
+ ['gbw-image','Image',true],['gbw-sku','SKU',true],['gbw-title','Title',true],
+ ['gbw-category','Category',true],['gbw-cta','View Link',true],
+ ];
+ var STORE='glassbeadedwallpaper_grid', FSTORE='glassbeadedwallpaper_fields';
+ function getSaved(){ try{ return JSON.parse(localStorage.getItem(STORE)||'{}'); }catch{ return {}; } }
+ function save(obj){ localStorage.setItem(STORE, JSON.stringify(obj)); }
+
+ // view
+ var s=getSaved(); var gbwView=s.view||'grid';
+ function gbwSetView(v){
+ gbwView=v; document.documentElement.classList.toggle('gbw-list', v==='list');
+ var vg=document.getElementById('gbwVGrid'), vl=document.getElementById('gbwVList');
+ if(vg) vg.classList.toggle('on', v==='grid');
+ if(vl) vl.classList.toggle('on', v==='list');
+ var ns=getSaved(); ns.view=v; save(ns);
+ }
+ gbwSetView(gbwView);
+ var vgBtn=document.getElementById('gbwVGrid'), vlBtn=document.getElementById('gbwVList');
+ if(vgBtn) vgBtn.addEventListener('click',function(){ gbwSetView('grid'); });
+ if(vlBtn) vlBtn.addEventListener('click',function(){ gbwSetView('list'); });
+
+ // fields
+ var gbwFields=(function(){
+ var def={}; GBW_FIELDS.forEach(function(f){ def[f[0]]=f[2]; });
+ try{ return Object.assign(def, JSON.parse(localStorage.getItem(FSTORE)||'{}')); }catch{ return def; }
+ })();
+ function gbwApplyFields(){
+ GBW_FIELDS.forEach(function(f){ document.documentElement.classList.toggle('hf-'+f[0], !gbwFields[f[0]]); });
+ }
+ function gbwBuildFieldMenu(){
+ var fpop=document.getElementById('gbwFpop'); if(!fpop) return;
+ fpop.innerHTML=GBW_FIELDS.map(function(f){
+ return '<label><input type="checkbox" data-field="'+f[0]+'"'+(gbwFields[f[0]]?' checked':'')+'>'+f[1]+'</label>';
+ }).join('');
+ fpop.querySelectorAll('input').forEach(function(cb){
+ cb.addEventListener('change',function(){
+ gbwFields[cb.dataset.field]=cb.checked;
+ localStorage.setItem(FSTORE, JSON.stringify(gbwFields));
+ gbwApplyFields();
+ });
+ });
+ }
+ var fbtn=document.getElementById('gbwFieldsBtn'), fpop=document.getElementById('gbwFpop');
+ if(fbtn && fpop){
+ fbtn.addEventListener('click',function(e){
+ e.stopPropagation(); var open=fpop.hidden; fpop.hidden=!open;
+ fbtn.setAttribute('aria-expanded', String(open));
+ });
+ document.addEventListener('click',function(e){
+ if(!fpop.hidden && !e.target.closest('.gbw-fieldmenu')){ fpop.hidden=true; fbtn.setAttribute('aria-expanded','false'); }
+ });
+ }
+ gbwBuildFieldMenu(); gbwApplyFields();
+})();
+</script>
</body>
</html>
← fada257 SEO: rel=nofollow sponsored on designerwallcoverings.com lin
·
back to Glassbeadedwallpaper
·
TK-11341: add AdSense Auto-Ads loader + ads.txt (revert to r 22e7389 →