grid: persist sort + density slider to localStorage and hydrate on load (DW storefront rule)

7b0a1372b3db215edb8f263bb3dbf1c3167c54cb · 2026-05-18 20:46:00 -0700 · Steve Abrams

Files touched

M index.html

Diff

commit 7b0a1372b3db215edb8f263bb3dbf1c3167c54cb
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Mon May 18 20:46:00 2026 -0700

    grid: persist sort + density slider to localStorage and hydrate on load (DW storefront rule)
---
 index.html | 31 ++++++++++++++++++++++++++++---
 1 file changed, 28 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index a11bd82..89a9461 100644
--- a/index.html
+++ b/index.html
@@ -813,6 +813,19 @@ let currentView = 'gallery';
 let currentPage = 1;
 const PAGE_SIZE = 60;
 
+// Hydrate sort from storage before the first applyAll()
+(function() {
+  let saved;
+  try { saved = localStorage.getItem('glw.grid.sort'); } catch(e) {}
+  if (saved) {
+    currentSort = saved;
+    const sel = document.getElementById('sortSelect');
+    if (sel && [].some.call(sel.options, function(o) { return o.value === saved; })) {
+      sel.value = saved;
+    }
+  }
+})();
+
 // === THEME TOGGLE ===
 const themeToggle = document.getElementById('themeToggle');
 themeToggle.addEventListener('click', function() {
@@ -848,14 +861,24 @@ themeToggle.addEventListener('click', function() {
   show();
 })();
 
-// === DENSITY SLIDER ===
+// === DENSITY SLIDER (persisted per corkwallcovering pattern) ===
 const slider = document.getElementById('densitySlider');
 const dlabel = document.getElementById('densityLabel');
-slider.addEventListener('input', function() {
-  const n = parseInt(this.value, 10);
+function applyDensity(n) {
   document.documentElement.style.setProperty('--cols', n);
   dlabel.textContent = n + ' cols';
+}
+slider.addEventListener('input', function() {
+  const n = parseInt(this.value, 10);
+  applyDensity(n);
+  try { localStorage.setItem('glw.grid.density', String(n)); } catch(e) {}
 });
+// Hydrate density from storage before first render
+(function() {
+  let saved;
+  try { saved = parseInt(localStorage.getItem('glw.grid.density'), 10); } catch(e) {}
+  if (saved >= 3 && saved <= 10) { slider.value = saved; applyDensity(saved); }
+})();
 
 // === FILTER / SORT / SEARCH ===
 function computeFilter(p) {
@@ -1004,6 +1027,7 @@ document.getElementById('searchInput').addEventListener('input', function(e) {
 
 document.getElementById('sortSelect').addEventListener('change', function(e) {
   currentSort = e.target.value;
+  try { localStorage.setItem('glw.grid.sort', currentSort); } catch(ex) {}
   applyAll();
 });
 
@@ -1035,6 +1059,7 @@ document.querySelectorAll('.table-view thead th[data-sort-key]').forEach(functio
     const nextDir = (curKey === key && curDir === 'asc') ? 'desc' : 'asc';
     currentSort = key + '-' + nextDir;
     document.getElementById('sortSelect').value = currentSort;
+    try { localStorage.setItem('glw.grid.sort', currentSort); } catch(ex) {}
     applyAll();
   });
 });

← 999827e server: 404 all .bak/.pre-* snapshot files so editor backups · back to Goldleafwallpaper · Embed _shared/corner-nav.js (logo UL + hamburger UR) on fron c1f3396 →