flocked: fix inert sort+density controls — defer wiring to DOMContentLoaded

6228a2f1d77e05111d94a1a102461fc60abaf4cf · 2026-05-27 16:34:09 -0700 · Steve

The controls-wiring IIFE ran at parse time, before #productGrid was declared
(getElementById -> null -> early return), so the density slider and live
sort-change listener never bound. Wrapped the wiring in a DOMContentLoaded
guard so the grid exists when it runs. Sort/density now functional + remain
localStorage-persisted. Corner-nav + controls markup were already present.

Files touched

M index.html

Diff

commit 6228a2f1d77e05111d94a1a102461fc60abaf4cf
Author: Steve <steve@designerwallcoverings.com>
Date:   Wed May 27 16:34:09 2026 -0700

    flocked: fix inert sort+density controls — defer wiring to DOMContentLoaded
    
    The controls-wiring IIFE ran at parse time, before #productGrid was declared
    (getElementById -> null -> early return), so the density slider and live
    sort-change listener never bound. Wrapped the wiring in a DOMContentLoaded
    guard so the grid exists when it runs. Sort/density now functional + remain
    localStorage-persisted. Corner-nav + controls markup were already present.
---
 index.html | 63 ++++++++++++++++++++++++++++++++++----------------------------
 1 file changed, 35 insertions(+), 28 deletions(-)

diff --git a/index.html b/index.html
index eae36d4..df2d76c 100644
--- a/index.html
+++ b/index.html
@@ -280,37 +280,44 @@ footer .footer-desc{font-weight:300;font-size:12px;color:var(--gray);line-height
   <input id="density" type="range" min="180" max="380" step="10" value="240" style="accent-color:var(--accent,#A98B5B);width:140px;cursor:pointer">
 </div>
 <script>
+// Controls wiring — deferred to DOMContentLoaded so #productGrid (declared after
+// this block) exists; otherwise getElementById returns null and the density slider
+// + live sort listener never bind (controls render but stay inert).
 (function(){
-  const grid = document.getElementById('productGrid') || document.getElementById('productsGrid');
-  const dens = document.getElementById('density');
-  const sortSel = document.getElementById('sort');
-  const search = document.getElementById('grid-search');
-  if (!grid) return;
-  const STORE = 'flockedwallpaper_grid';
-  const saved = (() => { try { return JSON.parse(localStorage.getItem(STORE) || '{}'); } catch { return {}; } })();
-  function applyDensity(v){ grid.style.gridTemplateColumns = 'repeat(auto-fill,minmax(' + v + 'px,1fr))'; }
-  if (dens) {
-    dens.value = saved.density || 240;
-    applyDensity(dens.value);
-    dens.addEventListener('input', () => { applyDensity(dens.value); saved.density = dens.value; localStorage.setItem(STORE, JSON.stringify(saved)); });
-  }
-  if (sortSel) {
-    sortSel.value = saved.sort || 'newest';
-    sortSel.addEventListener('change', () => {
-      saved.sort = sortSel.value;
-      localStorage.setItem(STORE, JSON.stringify(saved));
-      if (typeof window.applySort === 'function') window.applySort(sortSel.value);
-    });
-  }
-  if (search) {
-    search.addEventListener('input', () => {
-      const q = search.value.toLowerCase().trim();
-      Array.from(grid.children).forEach(card => {
-        const t = (card.textContent || '').toLowerCase();
-        card.style.display = !q || t.includes(q) ? '' : 'none';
+  function wire(){
+    const grid = document.getElementById('productGrid') || document.getElementById('productsGrid');
+    const dens = document.getElementById('density');
+    const sortSel = document.getElementById('sort');
+    const search = document.getElementById('grid-search');
+    if (!grid) return;
+    const STORE = 'flockedwallpaper_grid';
+    const saved = (() => { try { return JSON.parse(localStorage.getItem(STORE) || '{}'); } catch { return {}; } })();
+    function applyDensity(v){ grid.style.gridTemplateColumns = 'repeat(auto-fill,minmax(' + v + 'px,1fr))'; }
+    if (dens) {
+      dens.value = saved.density || 240;
+      applyDensity(dens.value);
+      dens.addEventListener('input', () => { applyDensity(dens.value); saved.density = dens.value; localStorage.setItem(STORE, JSON.stringify(saved)); });
+    }
+    if (sortSel) {
+      sortSel.value = saved.sort || 'newest';
+      sortSel.addEventListener('change', () => {
+        saved.sort = sortSel.value;
+        localStorage.setItem(STORE, JSON.stringify(saved));
+        if (typeof window.applySort === 'function') window.applySort(sortSel.value);
       });
-    });
+    }
+    if (search) {
+      search.addEventListener('input', () => {
+        const q = search.value.toLowerCase().trim();
+        Array.from(grid.children).forEach(card => {
+          const t = (card.textContent || '').toLowerCase();
+          card.style.display = !q || t.includes(q) ? '' : 'none';
+        });
+      });
+    }
   }
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', wire);
+  else wire();
 })();
 </script>

← 1f3cea8 redact vendor names from customer-facing /api (close fleet l · back to Flockedwallpaper · remove publicly-served backup files and tighten .gitignore t b397162 →