feat: add grid density slider (DW standard) — adjustable columns 2–6, persistent localStorage

c390738fc0182b05edcb0eb5d3725cf7e2949fba · 2026-06-22 21:31:09 -0700 · Steve Abrams

Files touched

M public/index.html

Diff

commit c390738fc0182b05edcb0eb5d3725cf7e2949fba
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Mon Jun 22 21:31:09 2026 -0700

    feat: add grid density slider (DW standard) — adjustable columns 2–6, persistent localStorage
---
 public/index.html | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/public/index.html b/public/index.html
index 44b5e14..fb17cce 100644
--- a/public/index.html
+++ b/public/index.html
@@ -818,6 +818,12 @@ document.addEventListener('DOMContentLoaded', function(){ try { renderRailSectio
      DW UNIVERSAL CONTACT MODULE — fashion-house UX
      Inject before   <script src="/hero-4grid.js" defer></script>
 <script src="/dw-theme-nav.js" defer></script>
+
+<!-- GRID DENSITY SLIDER (DW STANDARD) -->
+<script>
+(function(){const e={storageKey:"dw_grid_cols",minCols:2,maxCols:6,defaultCols:3},l=[".grid","[role=region] .grid","main .grid",".product-grid",".collection-grid","[data-collection-grid]"];function t(){const o=l.map(e=>document.querySelector(e)).find(e=>e&&e.children.length>0);if(!o||document.getElementById("dw-density-slider"))return;const n=`<div id="dw-density-slider" style="display:flex;align-items:center;gap:16px;margin:24px 0;padding:12px 0;border-bottom:1px solid rgba(0,0,0,.08)"><label for="dw-col-range" style="font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#666;margin:0">Columns</label><input type="range" id="dw-col-range" min="2" max="6" step="1" style="flex:0 1 180px;cursor:pointer" aria-label="Grid columns"><span id="dw-col-label" style="font-size:12px;color:#666;min-width:60px;text-align:right">3 cols</span></div>`;const a=document.createElement("style");a.textContent="#dw-col-range{height:4px;border-radius:2px;background:#ddd;outline:none;-webkit-appearance:none;appearance:none}#dw-col-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:#000;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.2)}#dw-col-range::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#000;cursor:pointer;border:0;box-shadow:0 1px 3px rgba(0,0,0,.2)}#dw-col-range::-moz-range-track{background:0;border:0}@media (max-width:768px){#dw-density-slider{display:none}}",document.head.appendChild(a);const r=document.createElement("div");r.innerHTML=n,o.parentNode.insertBefore(r.firstElementChild,o);let c=e.defaultCols;try{const n=localStorage.getItem(e.storageKey);if(n){const s=parseInt(n,10);s>=e.minCols&&s<=e.maxCols&&(c=s)}}catch(e){}const i=document.getElementById("dw-col-range"),s=document.getElementById("dw-col-label");function d(e){o.style.gridTemplateColumns=`repeat(${e}, 1fr)`,s.textContent=`${e} col${1===e?"":"s"}`,i.value=e;try{localStorage.setItem(e.storageKey,String(e))}catch(e){}}i.addEventListener("input",e=>d(parseInt(e.target.value,10))),d(c)}document.readyState="loading"===document.readyState?document.addEventListener("DOMContentLoaded",t):t(),setTimeout(()=>{document.getElementById("dw-density-slider")||t()},500)})();
+
+</script>
 </body> in every DW-family sister site.
      Self-contained: CSS + 4 modals + JS submission handlers.
      Uses host site's CSS vars (--bg, --fg, --gold, --rule).

← fa5b387 Mount new-arrivals promo strip (Tier B): require ../_shared/ · back to Metallicwallpaper · upgrade: mobile-optimized grid density slider with touch but d1acdc8 →