← back to Schumacher Internal
schumacher-internal: adopt href-to-deeper-data primitives (fleet copy #1)
cb5da71f1be83686d1bd88db283706abec084896 · 2026-07-31 11:22:40 -0700 · Steve Abrams
First fleet propagation of the astek-landing reference (TK-10093). schumacher-internal
is a byte-identical structural twin, so the exact recipe dropped in verbatim:
URL-addressable filters (qstr/readURL/writeURL+popstate), drill()/kvd() atoms on
card + info-drawer, facet counts as real <a href> anchors, PDP specDrill() chain-down.
Verified on throwaway instance (3902 products, index+PDP JS parse, PDP 200, markers served).
Files touched
M public/index.htmlM public/product.htmlM public/styles.css
Diff
commit cb5da71f1be83686d1bd88db283706abec084896
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Fri Jul 31 11:22:40 2026 -0700
schumacher-internal: adopt href-to-deeper-data primitives (fleet copy #1)
First fleet propagation of the astek-landing reference (TK-10093). schumacher-internal
is a byte-identical structural twin, so the exact recipe dropped in verbatim:
URL-addressable filters (qstr/readURL/writeURL+popstate), drill()/kvd() atoms on
card + info-drawer, facet counts as real <a href> anchors, PDP specDrill() chain-down.
Verified on throwaway instance (3902 products, index+PDP JS parse, PDP 200, markers served).
---
public/index.html | 78 ++++++++++++++++++++++++++++++++++++++++-------------
public/product.html | 18 +++++++------
public/styles.css | 3 +++
3 files changed, 73 insertions(+), 26 deletions(-)
diff --git a/public/index.html b/public/index.html
index f225add..2456c6d 100644
--- a/public/index.html
+++ b/public/index.html
@@ -92,6 +92,10 @@ body.imgonly .grid:not(.list) .card .b{display:none}
.kv .v{text-align:left;word-break:break-word;font-weight:500}
.lnk{color:var(--acc);text-decoration:none;border:1px solid var(--line);border-radius:6px;padding:2px 7px;font-size:11px}
.lnk:hover{background:var(--panel)}
+/* ── drill atom: every data point is an href to its filtered view (deeper data) ── */
+.drill{color:inherit;text-decoration:none;cursor:pointer;border-bottom:1px dotted transparent}
+.drill:hover{color:var(--acc);border-bottom-color:var(--acc)}
+aside a.frow{text-decoration:none}
.acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:3px}
#toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%) translateY(20px);max-width:min(560px,92vw);background:#1b1e24;color:var(--ink,#e8e6e1);border:1px solid var(--line,#2a2d33);border-radius:8px;padding:10px 16px;font-size:13px;box-shadow:0 8px 30px #0008;opacity:0;pointer-events:none;transition:.25s;z-index:60}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@@ -191,6 +195,27 @@ const PAGE=120;
const BUCKET_HEX={white:'#f4f4f2',grey:'#9aa0aa',black:'#1c1e24',pink:'#f3a8c0',red:'#d0453e',orange:'#e08a3c',
brown:'#8a6242',gold:'#c9a75a',green:'#5f8f5c',blue:'#4f7fb5',purple:'#8a6fb5'};
function esc(s){return String(s==null?'':s).replace(/[&<>"']/g,c=>({'&':'&','<':'<','>':'>','"':'"',"'":'''}[c]));}
+// ── HARD RULE (2026-07-31): every data point is an href to its deeper (filtered) data ──
+function qstr(fil,q,pat){
+ const u=new URLSearchParams();
+ for(const [k] of FIELDS){ if(fil[k]) u.set(k,fil[k]); }
+ if(q) u.set('q',q); if(pat) u.set('pat',pat);
+ const s=u.toString(); return s?('?'+s):location.pathname;
+}
+function readURL(){
+ const u=new URLSearchParams(location.search);
+ for(const [k] of FIELDS) FIL[k]=u.get(k)||'';
+ $('#q').value=u.get('q')||''; $('#pattern').value=u.get('pat')||'';
+}
+function writeURL(push){
+ const url=qstr(FIL,$('#q').value.trim(),$('#pattern').value.trim());
+ history[push?'pushState':'replaceState']({},'',url);
+}
+function drill(field,val,label,cls){
+ if(val==null||val==='') return '';
+ const href=qstr({...FIL,[field]:String(val)},$('#q').value.trim(),$('#pattern').value.trim());
+ return `<a class="drill ${cls||''}" href="${href}" data-filter="${field}" data-v="${esc(val)}" title="Filter to ${esc(val)}">${label!=null?esc(label):esc(val)}</a>`;
+}
// ── every data field is a left-panel table: collapsed on load, click value = filter ──
const FIELDS=[
['book','Books'],['style','Styles'],['color_bucket','Colors'],['series','Patterns'],['color','Colorways'],
@@ -241,27 +266,28 @@ function card(p){
(hasRoom?`<img loading="lazy" class="roomimg" src="${esc(p.room)}" alt=""><span class="roombadge">ROOM</span>`:'')+`</div>`
:`<div class="imgwrap noimg"></div>`;
const kv=(k,v)=>v?`<div class="kv"><span class="k">${k}</span><span class="v">${esc(v)}</span></div>`:'';
+ const kvd=(k,field,v)=>v?`<div class="kv"><span class="k">${k}</span><span class="v">${drill(field,v,v)}</span></div>`:'';
const dot=BUCKET_HEX[p.color_bucket]||'#666';
return `<div class="card" data-href="/product/${encodeURIComponent(p.handle)}" data-handle="${esc(p.handle)}" data-sku="${esc(p.dw_sku||'')}" data-mfr="${esc(p.sku||'')}" data-title="${esc(p.display_name||p.series||p.dw_sku||'')}">
${img}<div class="b">
- <span class="vend">${esc(p.book||'Astek')}${p.series&&p.series!==p.display_name?(' · '+esc(p.series)):''}</span>
+ <span class="vend">${drill('book',p.book||'Astek',p.book||'Astek')}${p.series&&p.series!==p.display_name?(' · '+drill('series',p.series,p.series)):''}</span>
<div class="ttl">${title}</div>
- <span class="lc" title="Color">${esc(p.color||'')}</span>
+ <span class="lc" title="Color">${drill('color',p.color,p.color)}</span>
<div class="chips">
- ${p.color_bucket?`<span class="chip cl"><span class="dot" style="background:${dot}"></span>${esc(p.color_bucket)}</span>`:''}
+ ${p.color_bucket?`<span class="chip cl"><span class="dot" style="background:${dot}"></span>${drill('color_bucket',p.color_bucket,p.color_bucket)}</span>`:''}
<span class="chip toggle" onclick="event.stopPropagation();this.closest('.card').classList.toggle('info-open')">ⓘ details</span>
</div>
<span class="lsku" title="Vendor SKU">${esc(p.sku||'')}</span>
<span class="ldw" title="DW SKU">${esc(p.dw_sku||'')}</span>
- <span class="lc" title="Material">${esc(p.material||'')}</span>
- <span class="lc" title="Width">${esc(p.width||'')}</span>
- <span class="lc" title="Length">${esc(p.length||'')}</span>
- <span class="lc" title="Repeat">${esc(p.repeat||'')}</span>
- <span class="lc" title="Match">${esc(p.match||'')}</span>
+ <span class="lc" title="Material">${drill('material',p.material,p.material)}</span>
+ <span class="lc" title="Width">${drill('width',p.width,p.width)}</span>
+ <span class="lc" title="Length">${drill('length',p.length,p.length)}</span>
+ <span class="lc" title="Repeat">${drill('repeat',p.repeat,p.repeat)}</span>
+ <span class="lc" title="Match">${drill('match',p.match,p.match)}</span>
</div>
<div class="info" onclick="event.stopPropagation()">
- ${kv('DW SKU',p.dw_sku)}${kv('Vendor SKU',p.sku)}${kv('Series',p.series)}${kv('Book',p.book)}
- ${kv('Material',p.material)}${kv('Width',p.width)}${kv('Repeat',p.repeat)}${kv('Match',p.match)}
+ ${kv('DW SKU',p.dw_sku)}${kv('Vendor SKU',p.sku)}${kvd('Series','series',p.series)}${kvd('Book','book',p.book)}
+ ${kvd('Material','material',p.material)}${kvd('Width','width',p.width)}${kvd('Repeat','repeat',p.repeat)}${kvd('Match','match',p.match)}
<div class="acts">
<button class="act reqact" data-act="memo" title="Log a memo-sample request">Memo</button>
<button class="act reqact" data-act="stock" title="Email the vendor a stock check">Stock</button>
@@ -273,12 +299,19 @@ function card(p){
</div>
</div>`;
}
-// delegated card navigation — anything not interactive opens the PDP
+// delegated card navigation — anything not interactive opens the PDP.
grid.addEventListener('click',e=>{
if(e.target.closest('.chip.toggle,.info,a,button'))return;
const c=e.target.closest('.card[data-href]');
if(c)location.href=c.dataset.href;
});
+// atom drill — plain click filters the grid to that value; cmd/ctrl/shift/middle-click keeps the real href
+grid.addEventListener('click',e=>{
+ const d=e.target.closest('a.drill'); if(!d)return;
+ if(e.metaKey||e.ctrlKey||e.shiftKey||e.altKey||e.button===1)return;
+ e.preventDefault(); e.stopPropagation();
+ setF(d.dataset.filter,d.dataset.v);
+});
function copyTxt(btn){
const t=btn.dataset.copy||'';
navigator.clipboard.writeText(t).then(()=>{
@@ -306,7 +339,7 @@ function toast(msg,ok){
t.textContent=msg; t.className='show '+(ok?'ok':'err');
clearTimeout(toastT); toastT=setTimeout(()=>t.className='',6000);
}
-function applyFilters(){
+function applyFilters(nav){
const q=$('#q').value.trim().toLowerCase(), pat=$('#pattern').value.trim().toLowerCase();
VIEW=ALL.filter(p=>{
for(const [k] of FIELDS){ if(FIL[k]&&String(p[k]??'')!==FIL[k])return false; }
@@ -335,6 +368,7 @@ function applyFilters(){
$('#total').textContent=VIEW.length.toLocaleString()+' designs';
$('#empty').style.display=VIEW.length?'none':'block';
renderSide();
+ if(nav!=='none')writeURL(nav==='push');
}
function renderMore(){
const slice=VIEW.slice(shown,shown+PAGE);
@@ -360,8 +394,9 @@ function renderSide(){
$('#facetbox').innerHTML=FIELDS.map(([k,label])=>{
const rows=(FCOUNTS[k]||[]).slice(0,FCAP).map(([v,n])=>{
const dot=k==='color_bucket'?`<span class="dot" style="background:${BUCKET_HEX[v]||'#666'}"></span>`:'';
- return `<div class="frow${FIL[k]===String(v)?' active':''}" onclick="pickF('${k}',this.dataset.v)" data-v="${esc(v)}">
- <span class="fl">${dot}${esc(v)}</span><span class="n">${n.toLocaleString()}</span></div>`;
+ const href=qstr({...FIL,[k]:(FIL[k]===String(v)?'':String(v))},$('#q').value.trim(),$('#pattern').value.trim());
+ return `<a class="frow${FIL[k]===String(v)?' active':''}" href="${href}" data-f="${k}" data-v="${esc(v)}">
+ <span class="fl">${dot}${esc(v)}</span><span class="n">${n.toLocaleString()}</span></a>`;
}).join('');
const more=(FCOUNTS[k]||[]).length>FCAP?`<div class="fmore">+ ${(FCOUNTS[k].length-FCAP).toLocaleString()} more — use search</div>`:'';
const cur=FIL[k]?`<span class="cur" title="${esc(FIL[k])}">${esc(FIL[k])}</span>`:'';
@@ -369,9 +404,15 @@ function renderSide(){
}).join('');
$('#clearf').style.display=(Object.values(FIL).some(Boolean)||$('#q').value||$('#pattern').value)?'block':'none';
}
-function pickF(k,v){FIL[k]=(FIL[k]===v?'':v);applyFilters();}
-window.pickF=pickF;
-$('#clearf').onclick=()=>{FIELDS.forEach(([k])=>FIL[k]='');$('#q').value='';$('#pattern').value='';applyFilters();};
+function pickF(k,v){FIL[k]=(FIL[k]===v?'':v);applyFilters('push');}
+function setF(k,v){if(FIL[k]===String(v))return;FIL[k]=String(v);applyFilters('push');}
+window.pickF=pickF;window.setF=setF;
+$('#facetbox').addEventListener('click',e=>{
+ const a=e.target.closest('a.frow'); if(!a)return;
+ if(e.metaKey||e.ctrlKey||e.shiftKey||e.altKey||e.button===1)return;
+ e.preventDefault(); pickF(a.dataset.f,a.dataset.v);
+});
+$('#clearf').onclick=()=>{FIELDS.forEach(([k])=>FIL[k]='');$('#q').value='';$('#pattern').value='';applyFilters('push');};
$('#sort').onchange=()=>{localStorage.setItem('astek.sort',$('#sort').value);COLSORT.key=null;renderListHead();applyFilters();};
let t; $('#q').oninput=()=>{clearTimeout(t);t=setTimeout(applyFilters,300);};
let tp; $('#pattern').oninput=()=>{clearTimeout(tp);tp=setTimeout(applyFilters,300);};
@@ -407,9 +448,10 @@ async function loadAll(){
fetch(location.origin+'/api/products').then(r=>r.json()),
fetch(location.origin+'/api/facets').then(r=>r.json())]);
ALL=pd.products; FACETS=fc;
- buildFacetCache(); applyFilters();
+ buildFacetCache(); readURL(); applyFilters();
}
loadAll();
+addEventListener('popstate',()=>{readURL();applyFilters('none');});
/* ── Corner refresh countdown ──────────────────────────────────────────────
Data is rebuilt from dw_unified every 15 min by a cron. This pill counts down
diff --git a/public/product.html b/public/product.html
index 93d8376..fa970a6 100644
--- a/public/product.html
+++ b/public/product.html
@@ -46,6 +46,8 @@
const handle=decodeURIComponent(location.pathname.split('/').pop());
const esc=s=>(s||'').replace(/[&<>"]/g,c=>({'&':'&','<':'<','>':'>','"':'"'}[c]));
function specRow(k,v){return v?`<div class="row"><span class="k">${k}</span><span class="v">${esc(v)}</span></div>`:'';}
+// HARD RULE: a PDP spec value drills BACK to the catalog filtered by it (chain all the way down)
+function specDrill(k,field,v){return v?`<div class="row"><span class="k">${k}</span><span class="v"><a class="drill" href="/?${field}=${encodeURIComponent(v)}" title="See all with ${esc(k)} = ${esc(v)}">${esc(v)}</a></span></div>`:'';}
let VM={}; // vendorMeta from /api/config — phone, account #, discount, pricing model
const money=n=>n==null?null:'$'+Number(n).toFixed(2);
@@ -119,14 +121,14 @@ function priceBox(p){
${specRow('DW SKU',p.dw_sku)}
${specRow('Our Account #',VM.account_number)}
${specRow('Vendor Phone',VM.phone)}
- ${specRow('Pattern',p.series)}
- ${specRow('Colorway',p.color)}
- ${specRow('Width',p.width)}
- ${specRow('Length',p.length)}
- ${specRow('Repeat',p.repeat)}
- ${specRow('Material',p.material)}
- ${specRow('Match',p.match)}
- ${specRow('Format',p.book)}
+ ${specDrill('Pattern','series',p.series)}
+ ${specDrill('Colorway','color',p.color)}
+ ${specDrill('Width','width',p.width)}
+ ${specDrill('Length','length',p.length)}
+ ${specDrill('Repeat','repeat',p.repeat)}
+ ${specDrill('Material','material',p.material)}
+ ${specDrill('Match','match',p.match)}
+ ${specDrill('Format','book',p.book)}
</div>
</div>
</div>
diff --git a/public/styles.css b/public/styles.css
index 76f90df..6abbe3d 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -166,6 +166,9 @@ footer{border-top:1px solid var(--line);background:var(--paper)}
.spec .row{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--line);font-size:13px}
.spec .row .k{color:var(--ink-soft);letter-spacing:.04em}
.spec .row .v{color:var(--ink);text-align:right}
+/* drill atom: a spec value is an href back to the catalog filtered by it (deeper data) */
+.spec .row .v a.drill{color:inherit;text-decoration:none;border-bottom:1px dotted var(--line);transition:color .12s,border-color .12s}
+.spec .row .v a.drill:hover{color:var(--accent,#5eead4);border-bottom-color:currentColor}
.story{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:64px;
padding-top:40px;border-top:1px solid var(--line)}
.story h3{font-family:var(--serif);font-weight:500;font-size:22px;margin:0 0 12px}
← eec73e2 chore: lint, refactor, v0.3.0 (session close) — RFC7617 auth
·
back to Schumacher Internal
·
schumacher-internal: load shared /drill.js instead of inline 834f5e3 →