← back to Momentum Landing
momentum-landing: adopt shared /drill.js href-to-deeper-data primitives (TK-10093)
ca5e1ee47be9977147441532145f2b525d0dd1ad · 2026-07-31 11:49:02 -0700 · Steve Abrams
Files touched
A public/drill.jsM public/index.htmlM public/product.htmlM public/styles.css
Diff
commit ca5e1ee47be9977147441532145f2b525d0dd1ad
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Fri Jul 31 11:49:02 2026 -0700
momentum-landing: adopt shared /drill.js href-to-deeper-data primitives (TK-10093)
---
public/drill.js | 36 +++++++++++++++++++++++++++++++++++
public/index.html | 55 ++++++++++++++++++++++++++++++++++++-----------------
public/product.html | 18 ++++++++++--------
public/styles.css | 2 ++
4 files changed, 86 insertions(+), 25 deletions(-)
diff --git a/public/drill.js b/public/drill.js
new file mode 100644
index 0000000..e63cdd3
--- /dev/null
+++ b/public/drill.js
@@ -0,0 +1,36 @@
+// ── href-to-deeper-data primitives — SINGLE SOURCE OF TRUTH (HARD rule, 2026-07-31) ──
+// Every displayed data point must be an href to its deeper (filtered) data. These are the
+// reusable atoms; a viewer's index.html loads this file, then defines FIELDS, FIL, $, esc,
+// and applyFilters (which these reference at call time via the shared classic-script global
+// scope). Canonical copy: ~/Projects/_shared/web/drill.js → each viewer's public/drill.js.
+// Memory: all-data-points-href-to-deeper-data. Reference viewers: astek-landing, schumacher-internal.
+
+// Build the URL for a given filter set — any count/atom becomes a real, shareable link.
+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;
+}
+// Read the URL's filter state back into FIL + the search inputs (deep-link / back-button).
+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') || '';
+}
+// Reflect the current filter state into the URL (push = new history entry, else replace).
+function writeURL(push) {
+ const url = qstr(FIL, $('#q').value.trim(), $('#pattern').value.trim());
+ history[push ? 'pushState' : 'replaceState']({}, '', url);
+}
+// drill(field,value,label,cls) → an <a> whose href IS the filtered view for that value.
+// cmd/ctrl/middle-click opens it in a new tab; plain click filters in place (delegated listener).
+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>`;
+}
+// Atom drill target: SET the filter to this value (drill in), vs pickF which TOGGLES.
+function setF(k, v) { if (FIL[k] === String(v)) return; FIL[k] = String(v); applyFilters('push'); }
+
+window.qstr = qstr; window.readURL = readURL; window.writeURL = writeURL; window.drill = drill; window.setF = setF;
diff --git a/public/index.html b/public/index.html
index 842b46b..c7eacdd 100644
--- a/public/index.html
+++ b/public/index.html
@@ -97,6 +97,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)}
@@ -187,6 +191,7 @@ body.listmode #listhead{display:grid}
<div id="empty" style="display:none">No products match.</div>
</main>
</div>
+<script src="/drill.js"></script>
<script>
const $=s=>document.querySelector(s);
const grid=$('#grid');
@@ -259,32 +264,33 @@ function card(p){
?`<div class="imgwrap">${badge}${catbadge}<img loading="lazy" src="${esc(p.swatch)}" alt="${title}" onerror="this.style.display='none';this.parentNode.classList.add('noimg')"></div>`
:`<div class="imgwrap noimg">${badge}${catbadge}</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';
const whenTxt=fmtWhen(p.created_at);
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.momentum_sku||'')}" data-title="${esc(p.series||p.dw_sku||'')}">
${img}<div class="b">
- <span class="vend">${esc(p.category||'Wallcovering')}${p.series?(' · '+esc(p.series)):''}</span>
+ <span class="vend">${drill('category',p.category||'Wallcovering',p.category||'Wallcovering')}${p.series?(' · '+drill('series',p.series,p.series)):''}</span>
<div class="ttl">${title}</div>
<span class="dwsku" title="Designer Wallcoverings SKU">${esc((p.dw_sku||'').toUpperCase())}</span>
${whenTxt?`<span class="when" title="${esc(p.created_at||'')}">🕓 ${esc(whenTxt)}</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>`:''}
${p.price!=null?`<span class="chip cl">$${Number(p.price).toFixed(2)}</span>`:''}
<span class="chip toggle" onclick="event.stopPropagation();this.closest('.card').classList.toggle('info-open')">ⓘ details</span>
</div>
- <span class="lc" title="Color">${esc(p.color||'')}</span>
- <span class="lc" title="Family">${esc(p.color_bucket||'')}</span>
- <span class="lc" title="Collection">${esc(p.collection||'')}</span>
- <span class="lc" title="Category">${esc(p.category||'')}</span>
- <span class="lc" title="Width">${esc(p.width||'')}</span>
+ <span class="lc" title="Color">${drill('color',p.color,p.color)}</span>
+ <span class="lc" title="Family">${drill('color_bucket',p.color_bucket,p.color_bucket)}</span>
+ <span class="lc" title="Collection">${drill('collection',p.collection,p.collection)}</span>
+ <span class="lc" title="Category">${drill('category',p.category,p.category)}</span>
+ <span class="lc" title="Width">${drill('width',p.width,p.width)}</span>
<span class="lc" title="Price">${p.price!=null?('$'+Number(p.price).toFixed(2)):''}</span>
<span class="lc" title="Created">${esc(whenTxt)}</span>
</div>
<div class="info" onclick="event.stopPropagation()">
- ${kv('DW SKU',p.dw_sku)}${kv('Mfr SKU',p.momentum_sku)}${kv('Pattern',p.series)}${kv('Color',p.color)}
- ${kv('Category',p.category)}${kv('Collection',p.collection)}${kv('Product Line',p.product_line)}
- ${kv('Width',p.width)}${kv('Price',p.price!=null?('$'+Number(p.price).toFixed(2)):null)}
- ${kv('Status',p.status)}${kv('Created',fmtWhen(p.created_at))}
+ ${kv('DW SKU',p.dw_sku)}${kv('Mfr SKU',p.momentum_sku)}${kvd('Pattern','series',p.series)}${kvd('Color','color',p.color)}
+ ${kvd('Category','category',p.category)}${kvd('Collection','collection',p.collection)}${kvd('Product Line','product_line',p.product_line)}
+ ${kvd('Width','width',p.width)}${kv('Price',p.price!=null?('$'+Number(p.price).toFixed(2)):null)}
+ ${kvd('Status','status',p.status)}${kv('Created',fmtWhen(p.created_at))}
<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>
@@ -302,6 +308,13 @@ grid.addEventListener('click',e=>{
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(()=>{
@@ -329,7 +342,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; }
@@ -360,6 +373,7 @@ function applyFilters(){
$('#total').textContent=VIEW.length.toLocaleString()+' colorways';
$('#empty').style.display=VIEW.length?'none':'block';
renderSide();
+ if(nav!=='none')writeURL(nav==='push');
}
function renderMore(){
const slice=VIEW.slice(shown,shown+PAGE);
@@ -387,8 +401,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>`:'';
@@ -396,9 +411,14 @@ 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();}
+function pickF(k,v){FIL[k]=(FIL[k]===v?'':v);applyFilters('push');} // setF is in /drill.js
window.pickF=pickF;
-$('#clearf').onclick=()=>{FIELDS.forEach(([k])=>FIL[k]='');$('#q').value='';$('#pattern').value='';applyFilters();};
+$('#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(NS+'.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);};
@@ -434,9 +454,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 ── */
(function(){
diff --git a/public/product.html b/public/product.html
index d9ec64d..480054d 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 f5a30e5..dcc0e1d 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -166,6 +166,8 @@ 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}
+.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}
← fcb438b momentum-landing: add Memo/Stock/Price chip actions (shared
·
back to Momentum Landing
·
GA4: gtag G-9K93LH6GH1 ca84d9c →