${thumb(c.it,'intro')}
${glyph(c.t)}
${c.title}
${c.what}
- ${c.dl.map(([t,d])=>`
- ${t}
- ${d} `).join('')}
${sceneFor(id, demoFor(id), ctx)}
`).join('');
dots.innerHTML = seq.map(([id],i) => ``).join('');
let i=0, timer=null;
const show = n => {
i = (n+seq.length)%seq.length;
figs.querySelectorAll('.scene').forEach((el,j)=>el.classList.toggle('on', j===i));
dots.querySelectorAll('button').forEach((b,j)=>b.setAttribute('aria-pressed', String(j===i)));
const w = WAY[seq[i][0]];
cap.innerHTML = `${esc(w.name)}${lenText(w.id, demoFor(w.id))}`;
};
const play = () => { if (matchMedia('(prefers-reduced-motion: reduce)').matches) return; clearInterval(timer); timer=setInterval(()=>show(i+1), 3400); };
dots.addEventListener('click', e => { const b=e.target.closest('button'); if(!b) return; show(+b.dataset.i); play(); });
const st = figs.parentElement; st.addEventListener('mouseenter', ()=>clearInterval(timer)); st.addEventListener('mouseleave', play);
show(0); play();
})();
/* ================= how it works ================= */
(function how(){
const am = {id:OBS,len:'65'}, ru = {id:ROSE,len:'65'};
{ const k=2.1, tokens=[tB(),tS(am,0),tB(),tG(26)]; tokens[1].len -= BALL;
const tot=T(tokens), r=tot*k/(2*Math.PI), P=poly(arcPts(150,168,r,-90,270,220));
const label = `Two 6.5″ strands (18.5 cm each) are too close to wear as a choker on their own. Add a Keystone between them, or use two 7.5″ strands (20 cm each) for a 40 cm choker.
`; })(); /* ================= pieces ================= */ (function pieces(){ const cards = [ {it:ITEMS['the-amethyst-strand-6mm-bolivian-depth'], t:'S', title:'Strand', what:'A bracelet on its own.', dl:[['Length','6.5″ (18.5 cm) or 7.5″ (20 cm)']]}, {it:ITEMS[ONYX], t:'N', title:'Necklace', what:'A 43 cm necklace. Wear it alone or add length.', dl:[['Length','43 cm']]}, {it:ITEMS['key-orange'], t:'K', title:'Keystone', what:'A single stone with a clasp on each side. It sits between two pieces.', dl:[['Length','Approx. 15 mm, including clasps']]} ]; $('pcards').innerHTML = cards.map(c => `${GROUPS[g]}
${ws.map(w => ``).join('')}
${esc(r.it.name)}${r.it.name.endsWith(TYPE[r.slot.t])?'':' '+TYPE[r.slot.t]}${r.slot.t==='S'?` · ${LEN_SHORT[r.v.len]}`:''}${priceHTML(r)}
`).join('')
+ `${gift}
Total${euro(total)}
`
+ ``
+ `Simulated materials and indicative prices. Product availability and checkout are not connected in this preview.
` + (also.length ? `These pieces also make: ${also.join(', ')}.
` : ''); } function stageHTML(wayId, src, hl){ const w = WAY[wayId], attr = hl!=null ? ` data-hl="${hl}"` : ''; if (!NECK_WAYS.includes(wayId)) return `${sceneFor(wayId, src, 'stage')}
`;
const px = 2300 / Math.max(260, $('bStage').clientWidth || 720), gd = guides(wayId, Math.min(96, 12.5*px), src);
return `${sceneFor(wayId, src, 'stage', gd)}
`;
}
function renderStage(){
if(dr.slot!==null && innerWidth>820){
const width=Math.min(900,innerWidth-564);
root.style.setProperty('--preview-width',width+'px');
root.style.setProperty('--preview-left',Math.max(24,(innerWidth-500-width)/2)+'px');
}
const src=dr.slot!==null?slotSrc():pool;
const w = WAY[state.way], {rows, total} = lines(src);
$('bStage').innerHTML = stageHTML(state.way, src);
$('bStage').dataset.preview = dr.slot!==null ? dr.pick.id : '';
$('bCap').innerHTML = `${esc(w.name)}${placeText(state.way,src)} · ${lenText(state.way,src)}
${euro(total)}${rows.length} piece${rows.length>1?'s':''}
`;
}
function render(){ renderWays(); renderSlots(); renderSum(); renderStage(); }
function say(msg){ const t=$('toast'); t.textContent=msg; t.classList.add('on'); clearTimeout(say.t); say.t=setTimeout(()=>t.classList.remove('on'), 3000); }
function chooseWay(id){
if (id===state.way) return;
const key = r => r.it.id+'|'+r.slot.t, before = lines().rows, w = WAY[id]; let note = '';
if (w.needs75 && pool.S.some(s=>s.len!=='75')) { pool.S.forEach(s=>s.len='75'); note = 'Strands now 7.5″'; }
state.way = id; render();
const after = lines().rows, bk = before.map(key), ak = after.map(key);
const bits = [...after.filter(r=>!bk.includes(key(r))).map(r=>'+ '+r.it.name), ...before.filter(r=>!ak.includes(key(r))).map(r=>'− '+r.it.name)];
if (note) bits.push(note); if (bits.length) say(bits.join(' · '));
}
$('wayList').addEventListener('click', e => { const b=e.target.closest('[data-way]'); if(b) chooseWay(b.dataset.way); });
$('slotList').addEventListener('click', e => { const b=e.target.closest('[data-slot]'); if(b) openDrawer(+b.dataset.slot, b); });
const hl = i => { const sc = $('bStage').querySelector('.scene'); if(!sc) return; const s = slotsOf(state.way)[i]; if (i==null || !s || s.gift) sc.removeAttribute('data-hl'); else sc.dataset.hl = i; };
$('slotList').addEventListener('mouseover', e => { const b=e.target.closest('[data-slot]'); hl(b ? +b.dataset.slot : null); });
$('slotList').addEventListener('mouseleave', () => hl(null));
$('slotList').addEventListener('focusin', e => { const b=e.target.closest('[data-slot]'); if(b) hl(+b.dataset.slot); });
$('slotList').addEventListener('focusout', () => hl(null));
document.addEventListener('click', e => { if (e.target.id==='bl4-addBag'){ const {rows,total}=lines(); bag+=rows.length; say(`${rows.length} pieces in this preview · ${euro(total)}. No products added to your bag.`); } });
/* ================= drawer: the one place a piece is changed ================= */
const dr = {slot:null, pick:null, q:'', mm:'all', opener:null};
const curSlot = () => slotsOf(state.way)[dr.slot];
function slotSrc(){
const src = {S:pool.S.map(s=>({...s})), N:pool.N, K:[...pool.K]}, r = curSlot().ref;
if (r[0]==='N') src.N = dr.pick.id; else if (r[0]==='K') src.K[r[1]] = dr.pick.id; else src.S[r[1]] = {id:dr.pick.id, len:dr.pick.len};
return src;
}
function openDrawer(i, opener){
const s = slotsOf(state.way)[i], cur = read(pool, s.ref);
Object.assign(dr, {slot:i, opener, q:'', mm:'all', pick: s.t==='S' ? {id:cur.id, len:cur.len} : {id:cur}});
const noun = s.t==='S'?'strand':s.t==='N'?'necklace':'Keystone';
$('drPos').textContent = s.gift ? 'Free Keystone' : `Position ${displayRows().findIndex(r=>r.sourceIndex===i)+1} of ${WAY[state.way].slots.length} · ${s.label}`;
$('drTitle').textContent = `Choose a ${noun}`; $('drOk').textContent = `Use this ${noun}`;
if(innerWidth>820){
const stage=$('bStage'), grid=stage.closest('.b-grid');
root.style.setProperty('--preview-left',Math.max(24,grid.getBoundingClientRect().left)+'px');
root.style.setProperty('--preview-width',Math.max(260,Math.min(stage.clientWidth,innerWidth-540-Math.max(24,grid.getBoundingClientRect().left)))+'px');
grid.scrollIntoView({block:'start',behavior:'instant'});
}
renderCtl(); renderList(); renderPreview();
const d = $('drawer'), sc = $('scrim'); $('toast').classList.remove('on');
d.hidden = false; sc.hidden = false; root.classList.add('locked'); root.dataset.scrollY=scrollY; root.style.setProperty('--saved-overflow',document.documentElement.style.overflow); document.documentElement.style.overflow='hidden';
requestAnimationFrame(()=>{ d.classList.add('on'); sc.classList.add('on'); });
setTimeout(()=>{ const first = d.querySelector('.opt[aria-pressed=true]') || $('drClose'); first.focus({preventScroll:true}); first.scrollIntoView({block:'nearest'}); }, 60);
}
function closeDrawer(){
const d=$('drawer'), sc=$('scrim'); d.classList.remove('on'); sc.classList.remove('on'); root.classList.remove('locked'); document.documentElement.style.overflow=root.style.getPropertyValue('--saved-overflow');
setTimeout(()=>{ d.hidden=true; sc.hidden=true; }, 300);
dr.slot=null; dr.pick=null; renderStage();
if (dr.opener && document.contains(dr.opener)) dr.opener.focus({preventScroll:true});
hl(null);
}
const hit = x => { const q = dr.q.trim().toLowerCase(); return !q || (x.full+' '+x.name).toLowerCase().includes(q); };
function renderCtl(){
const s = curSlot(), w = WAY[state.way];
if (s.t!=='S'){ $('drCtl').innerHTML = ''; $('drCtl').hidden = true; return; }
$('drCtl').hidden = false;
const sizes = [...new Set(STRANDS.flatMap(x=>x.sizes))].sort((a,b)=>a-b), lock = w.needs75;
const n = m => STRANDS.filter(x=>(m==='all'||x.sizes.includes(m)) && hit(x)).length;
$('drCtl').innerHTML = `Length${['65','75'].map(l=>``).join('')}
`
+ (lock ? `${esc(w.name)} needs 7.5″ strands for 40 cm.
` : '') + `` + `${['all',...sizes].map(m=>``).join('')}
`;
}
function options(){
const s = curSlot(); if (s.t==='N') return NECKS; if (s.t==='K') return KEYS;
return STRANDS.filter(x => (dr.mm==='all' || x.sizes.includes(+dr.mm)) && hit(x));
}
function optHTML(it){
const cur = read(pool, curSlot().ref), curId = typeof cur==='string'?cur:cur.id;
const price = it.type==='strand' ? it.price[dr.pick.len] : it.price;
const meta = it.type==='key' ? `${it.cut} · ${euro(price)}` : `${it.mmLabel} · ${euro(price)}`;
const tags = []; if (it.id===curId) tags.push('In your set');
return ``;
}
function renderList(){
const s = curSlot(), opts = options();
const html = s.t==='K' ? ['Spherical','Irregular'].map(c => `${c} · ${euro(KEYS.find(k=>k.cut===c).price)}
${KEYS.filter(k=>k.cut===c).map(optHTML).join('')}`).join('') : opts.map(optHTML).join(''); $('drList').innerHTML = (s.t==='S' ? `${opts.length} of ${STRANDS.length} strands
` : '') + (opts.length ? `${html}
` : `No strands match. Try another stone or size.
`); renderPick(); } function renderPick(){ const it = ITEMS[dr.pick.id], price = it.type==='strand' ? it.price[dr.pick.len] : it.price; $('drPick').innerHTML = `${esc(it.name)}${it.type==='strand'?`${it.mmLabel} · ${LEN_SHORT[dr.pick.len]} · `:''}${euro(price)}`; } function renderPreview(){ const s = curSlot(); renderStage(); if (s.gift){ const it = ITEMS[dr.pick.id]; $('drPrev').innerHTML = `${thumb(it)}Wear it between any two pieces, for example as a choker with a stone.
`; return; }
const src = slotSrc();
$('drPrev').innerHTML = `${sceneFor(state.way, src, 'drawer')}
${esc(WAY[state.way].name)} · ${lenText(state.way, src)}
`; } $('drawer').addEventListener('click', e => { const o = e.target.closest('.opt'); if (o){ dr.pick.id = o.dataset.id; $('drList').querySelectorAll('.opt').forEach(b=>b.setAttribute('aria-pressed', String(b===o))); renderPick(); renderPreview(); return; } const l = e.target.closest('[data-len]'); if (l && !l.disabled){ dr.pick.len = l.dataset.len; renderCtl(); renderList(); renderPreview(); return; } const m = e.target.closest('[data-mm]'); if (m && !m.disabled){ dr.mm = m.dataset.mm; renderCtl(); renderList(); } }); $('drawer').addEventListener('input', e => { if (e.target.id==='bl4-drQ'){ dr.q = e.target.value; const pos = e.target.selectionStart; renderCtl(); const i = $('drQ'); i.focus(); i.setSelectionRange(pos,pos); renderList(); } }); $('drOk').addEventListener('click', () => { const s = curSlot(), r = s.ref; if (r[0]==='N') pool.N = dr.pick.id; else if (r[0]==='K') pool.K[r[1]] = dr.pick.id; else pool.S[r[1]] = {id:dr.pick.id, len:dr.pick.len}; const name = ITEMS[dr.pick.id].name; closeDrawer(); render(); say(`${s.label}: ${name}`); }); $('drClose').addEventListener('click', closeDrawer); $('scrim').addEventListener('click', closeDrawer); document.addEventListener('keydown', e => { const d = $('drawer'); if (d.hidden) return; if (e.key==='Escape'){ e.preventDefault(); closeDrawer(); return; } if (e.key==='Tab'){ const fs = [...d.querySelectorAll('button:not([disabled]),input')].filter(x=>x.offsetParent); if(!fs.length) return; const a=fs[0], z=fs[fs.length-1]; if (e.shiftKey && document.activeElement===a){ e.preventDefault(); z.focus(); } else if (!e.shiftKey && document.activeElement===z){ e.preventDefault(); a.focus(); } } }); addEventListener('resize', (() => { let t; return () => { clearTimeout(t); t = setTimeout(renderStage, 150); }; })()); render(); window.BELink = {state, pool, render, WAYS, openDrawer, lines}; (function nativeChrome(){ let queued=false;const observed=new WeakSet(); const ro=new ResizeObserver(schedule); function watch(e){if(e&&!observed.has(e)){observed.add(e);ro.observe(e)}} function update(){queued=false;let top=0,bottom=0; document.querySelectorAll('sticky-header,header.header,nav.mobile-dock[is="mobile-dock"]').forEach(e=>{watch(e);const r=e.getBoundingClientRect(),s=getComputedStyle(e);if(s.display==='none'||s.visibility==='hidden'||!r.height)return;if(e.matches('nav.mobile-dock')){if(innerWidth<=820&&r.top