Spaces:
Running
Running
| /* | |
| taste-skill layout.js - the small moments of the layout v4 heroes (references/layout-v4.md, section 3). | |
| Load it once, after system.js: <script type="module" src="assets/layout/layout.js"></script> | |
| Every loop runs through ui.loop (it rests off screen, carries the kit's pause button and restarts | |
| when the pointer enters its box); on a phone (under 640px), on kind other and on a place, and under | |
| reduced motion each shows its finished picture and holds. | |
| - [data-ly-word='["offices","pianos"]'] on a span.ly-word in the h1 (hero--word): one live word. | |
| The first word is in the markup; it changes every 2 s for two rounds, rests on the first, and | |
| plays a round again when the pointer enters the headline. The slot is as wide as the widest word | |
| (CSS grid, one cell), so a change never moves another word or breaks a line differently. | |
| - h1[data-ly-letters] (hero--word, hero--editorial): letters near the pointer take a heavier weight | |
| (+200), and a wider width (+10%) with data-ly-letters="wdth" on a face with a wdth axis (type.json | |
| "letters"). Fine pointers only; the h1 keeps one aria-label. | |
| - Lines locked: an h1 with a live word or letters keeps the lines it has at rest (a break where each | |
| line ends, then no wrapping), measured again on resize; a wider letter never re-breaks a line. | |
| - .ly-collage with two to four .ly-collage__set (hero--triptych): the sets crossfade every 2.8 s; | |
| nothing moves inside a set. | |
| - [data-ly-steps] on a box (a chat, a list, a status): it shows the finished picture first, holds | |
| it 1.8 s (data-ly-hold), then its [data-step] children arrive one by one 0.7 s apart | |
| (data-ly-steps="900" sets the step time) and it holds again; the pointer entering restarts it. | |
| - .ly-pic in an h1 (hero--editorial): a photograph set in the headline as a pill, whole on the first | |
| frame (layout.css), so nothing here; letters() leaves it whole. | |
| - .ly-spot (hero--product): the disc opens its spec card on a tap or Enter; hover and focus open it | |
| in CSS. Escape or a tap elsewhere closes it. | |
| - .ly-play[data-film="film.mp4"] (hero--film): plays the film in its frame with controls. Without | |
| data-film a <button> control is hidden; an <a class="ly-play" href> goes to the film's page. | |
| */ | |
| import ui from '../ui/ui.js'; | |
| const reduced = () => matchMedia('(prefers-reduced-motion: reduce)').matches; | |
| const phone = () => innerWidth < 640; | |
| // kind other (a cafe, a shop, a studio) and a place: nothing moves by itself (MO-07); the first word, | |
| // the first set and the finished steps show, still | |
| const other = () => { const m = document.querySelector('meta[name="site-kind"]'); return document.documentElement.dataset.type === 'place' || (!!m && m.content.trim().toLowerCase() === 'other'); }; | |
| /* ---------------------------------------------------------------- the live word */ | |
| function liveWord(slot) { | |
| let words; | |
| try { words = JSON.parse(slot.dataset.lyWord); } catch { return; } | |
| const first = slot.textContent.trim(); | |
| words = [first, ...words.filter(w => w !== first)]; | |
| if (words.length < 2) return; | |
| const h1 = slot.closest('h1'); | |
| if (h1 && !h1.hasAttribute('aria-label')) h1.setAttribute('aria-label', h1.textContent.replace(/\s+/g, ' ').trim()); | |
| slot.textContent = ''; | |
| const spans = words.map((w, i) => { | |
| const s = document.createElement('span'); | |
| s.textContent = w; | |
| if (i) s.className = 'is-next'; | |
| s.setAttribute('aria-hidden', 'true'); | |
| slot.append(s); | |
| return s; | |
| }); | |
| let at = 0; | |
| const show = i => { | |
| spans.forEach((s, k) => { s.style.transition = 'none'; s.className = k === i ? '' : 'is-next'; void s.offsetWidth; s.style.transition = ''; }); | |
| at = i; | |
| }; | |
| if (reduced() || phone() || other()) { show(0); return; } | |
| const ctl = ui.loop(slot, async api => { | |
| for (let n = 1; n <= words.length; n++) { | |
| await api.wait(2000); | |
| const next = n % words.length, cur = at; | |
| spans[cur].className = 'is-out'; | |
| spans[next].className = ''; | |
| at = next; | |
| await api.wait(620); | |
| spans[cur].style.transition = 'none'; spans[cur].className = 'is-next'; void spans[cur].offsetWidth; spans[cur].style.transition = ''; | |
| } | |
| }, { still: () => show(0), rest: 900, cycles: 2, pause: false }); | |
| if (h1) h1.addEventListener('pointerenter', e => { if (e.pointerType !== 'touch') ctl.restart(); }); | |
| } | |
| /* ---------------------------------------------------------------- letters that answer the pointer */ | |
| function letters(h1) { | |
| if (reduced() || !matchMedia('(pointer: fine)').matches) return; | |
| const axis = h1.dataset.lyLetters === 'wdth'; | |
| const cs = getComputedStyle(h1); | |
| const base = parseFloat(cs.fontWeight) || 400; | |
| const heavy = Math.min(900, base + 200); | |
| const baseW = parseFloat(cs.fontStretch) || 100; | |
| const label = h1.getAttribute('aria-label') || h1.textContent.replace(/\s+/g, ' ').trim(); | |
| const walk = node => { | |
| for (const n of [...node.childNodes]) { | |
| if (n.nodeType === 3) { | |
| const frag = document.createDocumentFragment(); | |
| for (const part of n.textContent.split(/(\s+)/)) { | |
| if (!part) continue; | |
| if (/^\s+$/.test(part)) { frag.append(document.createTextNode(' ')); continue; } | |
| const wd = document.createElement('span'); | |
| wd.style.whiteSpace = 'nowrap'; | |
| for (const ch of part) { const l = document.createElement('span'); l.className = 'ly-l'; l.textContent = ch; wd.append(l); } | |
| frag.append(wd); | |
| } | |
| n.replaceWith(frag); | |
| } else if (n.nodeType === 1 && !n.matches('.ly-word, .ly-mark, .ly-pic')) walk(n); | |
| } | |
| }; | |
| walk(h1); | |
| h1.classList.add('ly-letters'); | |
| h1.setAttribute('aria-label', label); | |
| [...h1.childNodes].forEach(c => { if (c.nodeType === 1) c.setAttribute('aria-hidden', 'true'); }); | |
| const ls = [...h1.querySelectorAll('.ly-l')]; | |
| let px = 0, py = 0, raf = 0, on = false, boxes = null; | |
| const measure = () => { boxes = ls.map(l => { const r = l.getBoundingClientRect(); return [r.left + r.width / 2 + scrollX, r.top + r.height / 2 + scrollY]; }); }; | |
| const draw = () => { | |
| raf = 0; | |
| if (!boxes) measure(); | |
| const reach = parseFloat(getComputedStyle(h1).fontSize) * 2.4; | |
| ls.forEach((l, i) => { | |
| const d = on ? Math.hypot(px + scrollX - boxes[i][0], py + scrollY - boxes[i][1]) : Infinity; | |
| const k = Math.max(0, 1 - d / reach), e = k * k * (3 - 2 * k); | |
| l.style.setProperty('--w', Math.round(base + (heavy - base) * e)); | |
| if (axis) l.style.setProperty('--wd', (baseW + 10 * e).toFixed(1) + '%'); | |
| }); | |
| }; | |
| addEventListener('resize', () => { boxes = null; }); | |
| document.fonts?.ready.then(() => { boxes = null; }); | |
| const host = h1.closest('.hero') || h1; | |
| host.addEventListener('pointermove', e => { if (e.pointerType === 'touch') return; on = true; px = e.clientX; py = e.clientY; if (!raf) raf = requestAnimationFrame(draw); }); | |
| host.addEventListener('pointerleave', () => { on = false; boxes = null; if (!raf) raf = requestAnimationFrame(draw); }); | |
| } | |
| /* ---------------------------------------------------------------- lines locked */ | |
| // The h1's words as units: a text word becomes a nowrap span (letters() already made them); the live | |
| // word, the mark and a pill are units of their own. At rest it reads where each line starts, puts a | |
| // <br class="ly-br"> there and stops wrapping (h1.ly-locked); on resize it unlocks, waits a frame and | |
| // reads again. Nothing moves when it locks: the breaks are where the browser had them. | |
| function lockLines(h1) { | |
| const units = () => { | |
| const out = []; | |
| const walk = node => { | |
| for (const n of [...node.childNodes]) { | |
| if (n.nodeType === 3) { | |
| if (!n.textContent.trim()) continue; | |
| const frag = document.createDocumentFragment(); | |
| for (const part of n.textContent.split(/(\s+)/)) { | |
| if (!part) continue; | |
| if (/^\s+$/.test(part)) { frag.append(document.createTextNode(' ')); continue; } | |
| const w = document.createElement('span'); w.className = 'ly-u'; w.style.whiteSpace = 'nowrap'; w.textContent = part; frag.append(w); | |
| } | |
| n.replaceWith(frag); | |
| } else if (n.nodeType === 1) { | |
| if (n.matches('.ly-word, .ly-mark, .ly-pic, .ly-u, br')) { if (!n.matches('br')) out.push(n); continue; } | |
| if (n.style.whiteSpace === 'nowrap' && n.querySelector('.ly-l')) { out.push(n); continue; } // a word of letters() | |
| walk(n); | |
| } | |
| } | |
| }; | |
| walk(h1); | |
| return out.length ? out : [...h1.querySelectorAll('.ly-u, .ly-word, .ly-mark, .ly-pic')]; | |
| }; | |
| let list = units(); | |
| const unlock = () => { h1.querySelectorAll('br.ly-br').forEach(b => b.remove()); h1.classList.remove('ly-locked'); }; | |
| const lock = () => { | |
| unlock(); | |
| list = list.filter(u => u.isConnected); | |
| let top = null; | |
| const fs = parseFloat(getComputedStyle(h1).fontSize) || 16; | |
| for (const u of list) { | |
| const t = u.getBoundingClientRect().top; | |
| if (top !== null && t - top > fs * 0.5) { const br = document.createElement('br'); br.className = 'ly-br'; u.before(br); } | |
| top = t; | |
| } | |
| h1.classList.add('ly-locked'); | |
| // a lock that no longer fits (read before the web font or the phone width arrived) is let go | |
| if (h1.scrollWidth > h1.clientWidth + 1) unlock(); | |
| }; | |
| // read the lines at rest: after the fonts, and after the pills in the line have opened to their width | |
| const opened = () => Promise.all([...h1.querySelectorAll('.ly-pic, .ly-pic > img')].flatMap(p => (p.getAnimations ? p.getAnimations() : []).map(a => a.finished.catch(() => {})))); | |
| const ready = document.fonts ? document.fonts.ready : Promise.resolve(); | |
| ready.then(opened).then(() => requestAnimationFrame(lock)); | |
| // the h1 changing width (a resize, the phone width arriving after the first paint) reads the lines again, | |
| // after the fonts; a phone's bars sliding (height only) changes nothing | |
| let t = 0, lastW = h1.clientWidth; | |
| const again = () => { | |
| if (h1.clientWidth === lastW) return; | |
| lastW = h1.clientWidth; | |
| clearTimeout(t); unlock(); | |
| t = setTimeout(() => ready.then(() => requestAnimationFrame(lock)), 150); | |
| }; | |
| if (typeof ResizeObserver === 'function') new ResizeObserver(again).observe(h1); else addEventListener('resize', again); | |
| } | |
| /* ---------------------------------------------------------------- the collage */ | |
| function collage(box) { | |
| const sets = [...box.querySelectorAll(':scope > .ly-collage__set')]; | |
| if (!sets.length) return; | |
| const show = i => sets.forEach((s, k) => { s.classList.toggle('is-on', k === i); s.toggleAttribute('inert', k !== i); s.setAttribute('aria-hidden', String(k !== i)); }); | |
| show(0); | |
| if (sets.length < 2 || phone() || other()) return; | |
| box.setAttribute('data-ui-pause-host', ''); | |
| ui.loop(box, async api => { | |
| for (let n = 1; n <= sets.length; n++) { await api.wait(2800); box.classList.add('is-cycling'); show(n % sets.length); await api.wait(700); } | |
| }, { still: () => show(0), rest: 600 }); | |
| } | |
| /* ---------------------------------------------------------------- steps inside a piece of UI */ | |
| function steps(box) { | |
| // data-step-at="n" puts a step at that place in the order (0 is first); the rest keep document order | |
| const items = [...box.querySelectorAll('[data-step]')] | |
| .map((el, i) => ({ el, at: el.dataset.stepAt != null ? parseFloat(el.dataset.stepAt) : i })) | |
| .sort((a, b) => a.at - b.at).map(o => o.el); | |
| if (!items.length) return; | |
| // house rule: the loops inside cards a little faster, and repeating. The first picture is the | |
| // finished one (a shot or a first look never meets an empty card); then it plays and holds again. | |
| const every = parseInt(box.dataset.lySteps, 10) || 700; | |
| const hold = parseInt(box.dataset.lyHold, 10) || 1800; | |
| const set = n => items.forEach((s, k) => s.classList.toggle('is-off', k >= n)); | |
| const done = () => set(items.length); | |
| done(); | |
| if (reduced() || phone() || other()) return; | |
| ui.loop(box, async api => { | |
| await api.wait(hold); | |
| set(0); | |
| for (let n = 1; n <= items.length; n++) { await api.wait(n === 1 ? 380 : every); set(n); } | |
| }, { still: done, rest: 1200 }); | |
| } | |
| /* ---------------------------------------------------------------- hotspots */ | |
| function spot(el) { | |
| const btn = el.querySelector(':scope > button'); | |
| if (!btn) return; | |
| const card = el.querySelector('.ly-spot__card'); | |
| const stage = el.closest('.hero__stage') || el.parentElement; | |
| // the card opens on the side with room: a disc right of the middle opens it to its left (desktop); | |
| // on a phone it opens under the disc, nudged (--dx) to stay 16px inside the stage | |
| const place = () => { | |
| if (!card) return; | |
| const x = parseFloat(getComputedStyle(el).getPropertyValue('--x')) || 0; | |
| if (!el.dataset.lySide) el.classList.toggle('ly-spot--left', x > 50); | |
| el.style.setProperty('--dx', '0px'); | |
| if (!phone()) return; | |
| const s = stage.getBoundingClientRect(), d = el.getBoundingClientRect(); | |
| const w = card.offsetWidth, mid = d.left + d.width / 2, m = 16; | |
| const left = mid - w / 2, right = mid + w / 2; | |
| const dx = left < s.left + m ? s.left + m - left : right > s.right - m ? s.right - m - right : 0; | |
| el.style.setProperty('--dx', Math.round(dx) + 'px'); | |
| }; | |
| if (el.classList.contains('ly-spot--left')) el.dataset.lySide = 'left'; | |
| place(); | |
| addEventListener('resize', place); | |
| const set = on => { if (on) place(); el.classList.toggle('is-open', on); btn.setAttribute('aria-expanded', String(on)); }; | |
| set(false); | |
| el.addEventListener('pointerenter', place); | |
| el.addEventListener('focusin', place); | |
| btn.addEventListener('click', () => set(!el.classList.contains('is-open'))); | |
| document.addEventListener('pointerdown', e => { if (!el.contains(e.target)) set(false); }); | |
| el.addEventListener('keydown', e => { if (e.key === 'Escape') { set(false); btn.focus(); } }); | |
| } | |
| /* ---------------------------------------------------------------- the film */ | |
| function film(btn) { | |
| const src = btn.dataset.film; | |
| if (!src) { if (btn.tagName === 'BUTTON') btn.hidden = true; return; } | |
| btn.addEventListener('click', () => { | |
| const media = btn.closest('.hero__media'); | |
| const v = document.createElement('video'); | |
| Object.assign(v, { src, controls: true, autoplay: true, playsInline: true }); | |
| const poster = media.querySelector('img'); | |
| if (poster) v.poster = poster.currentSrc || poster.src; | |
| media.querySelectorAll('img, .ly-play').forEach(n => n.remove()); | |
| media.append(v); | |
| v.focus(); | |
| }); | |
| } | |
| function init() { | |
| document.querySelectorAll('[data-ly-word]').forEach(liveWord); | |
| document.querySelectorAll('h1[data-ly-letters]').forEach(letters); | |
| document.querySelectorAll('h1[data-ly-letters], h1:has(.ly-word)').forEach(lockLines); | |
| document.querySelectorAll('.ly-collage').forEach(collage); | |
| document.querySelectorAll('[data-ly-steps]').forEach(steps); | |
| document.querySelectorAll('.ly-spot').forEach(spot); | |
| document.querySelectorAll('.ly-play').forEach(film); | |
| } | |
| if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init, { once: true }); | |
| else init(); | |
| export default { init }; | |