/* The file tree A project's files. A folder opens with its lid lifting and its chevron turning, and its files come down one after another while the line that hangs them from the folder draws itself; closing, they fold back up. A single highlight slides on a spring to the item chosen, stretching a little as it goes, and follows it while the folders above open and close. A new file writes its own name, letter by letter, and a file deleted folds away. */ /* ---- values to change ---- */ const OPEN = 0.38; /* the seconds a folder takes to open or close */ const CASCADE = 0.04; /* the seconds between one file coming down and the next */ const GLIDE = [420, 0.78]; /* the highlight's spring: how stiff it is and how much it is held back */ const TYPE = 0.06; /* the seconds a new file takes for each letter of its name */ const TREE = ['website', [ ['src', [ ['components', [['Header.astro'], ['Footer.astro'], ['Gallery.astro']]], ['pages', [['index.astro'], ['menu.astro'], ['contact.astro']]], ['styles.css'], ]], ['public', [['images', [['hero.jpg'], ['logo.svg']]], ['favicon.ico']]], ['package.json'], ['README.md'], ]]; /* the files: a name, and for a folder what is inside it */ const REDUCED = matchMedia('(prefers-reduced-motion: reduce)').matches; const files = document.querySelector('[data-files]'); const tree = files.querySelector('[data-tree]'); const root = files.querySelector('[data-root]'); const mark = files.querySelector('[data-mark]'); const newBtn = files.querySelector('[data-new]'); const live = files.querySelector('[data-live]'); const OPEN_AT_START = ['website', 'website/src', 'website/src/pages']; const CHEV = ''; const FOLDER = ''; const TAGS = { astro: '#ff7a3d', css: '#3d7bff', jpg: '#2fa86b', svg: '#9b5de5', ico: '#e8558a', json: '#e2b300', md: '#7d7a72' }; const FILE = (ext) => ``; /* ---------------------------------------------------------------- building the tree */ let count = 0; const nodes = []; function build([name, kids], parent, ul) { const n = { name, parent, kids: kids ? [] : null, open: false }; n.path = parent ? `${parent.path}/${name}` : name; n.li = document.createElement('li'); n.li.setAttribute('role', 'treeitem'); n.li.id = `node-${count++}`; n.row = document.createElement('div'); n.row.className = 'node'; const ext = name.split('.').pop(); n.row.innerHTML = `${kids ? CHEV : CHEV.replace('node__chev', 'node__chev node__chev--none')}${kids ? FOLDER : FILE(ext)}`; n.row.querySelector('.node__name').textContent = name; n.li.append(n.row); n.chev = n.row.querySelector('.node__chev'); n.lid = n.row.querySelector('.node__lid'); if (n.lid) gsap.set(n.lid, { transformOrigin: '50% 100%' }); if (kids) { n.group = document.createElement('ul'); n.group.setAttribute('role', 'group'); n.group.hidden = true; n.li.append(n.group); n.li.setAttribute('aria-expanded', 'false'); kids.forEach((k) => n.kids.push(build(k, n, n.group))); } n.row.addEventListener('click', () => { choose(n); if (n.kids) setOpen(n, !n.open); }); ul.append(n.li); nodes.push(n); return n; } const tree0 = build(TREE, null, root); /* (a constant called top would clash with window.top) */ /* the items that can be seen, in order */ function visible() { const out = []; const walk = (n) => { out.push(n); if (n.kids && n.open) n.kids.forEach(walk); }; walk(tree0); return out; } /* ---------------------------------------------------------------- opening and closing */ function setOpen(n, open, instant) { if (!n.kids || n.open === open) return; n.open = open; n.li.setAttribute('aria-expanded', String(open)); const d = REDUCED || instant ? 0 : 1; gsap.to(n.chev, { rotation: open ? 90 : 0, duration: 0.35 * d, ease: 'back.out(2.4)', overwrite: 'auto' }); /* the lid lifts: it leans back and shortens a little, like a folder opened */ gsap.to(n.lid, { skewX: open ? -16 : 0, scaleY: open ? 0.8 : 1, duration: 0.35 * d, ease: 'power3.out', overwrite: 'auto' }); const g = n.group; gsap.killTweensOf(g); if (open) { g.hidden = false; if (!d) return; const h = g.scrollHeight; gsap.fromTo(g, { height: 0 }, { height: h, duration: OPEN, ease: 'power3.out', clearProps: 'height', onUpdate: wake }); gsap.fromTo(g, { '--hang': 0 }, { '--hang': 1, duration: OPEN * 1.3, ease: 'power2.out' }); gsap.fromTo(g.children, { x: -12, opacity: 0 }, { x: 0, opacity: 1, duration: 0.35, ease: 'power3.out', stagger: CASCADE, delay: 0.04, clearProps: 'transform,opacity' }); } else { /* the item chosen inside a folder closing: the folder becomes the item chosen */ let s = chosen; while (s && s !== n) s = s.parent; if (s === n && chosen !== n) choose(n); if (!d) { g.hidden = true; return; } gsap.to(g, { height: 0, duration: OPEN * 0.8, ease: 'power3.inOut', onUpdate: wake, onComplete: () => { g.hidden = true; gsap.set(g, { clearProps: 'height' }); wake(); } }); } wake(); } /* ---------------------------------------------------------------- the highlight */ let chosen = null; const glide = { y: 0, v: 0, h: 32, shown: false }; function choose(n) { if (chosen) chosen.row.classList.remove('is-on'); chosen = n; n.row.classList.add('is-on'); root.setAttribute('aria-activedescendant', n.li.id); if (!glide.shown) { glide.shown = true; glide.y = targetY(); gsap.to(mark, { opacity: 1, duration: REDUCED ? 0 : 0.25 }); } wake(); } const targetY = () => (chosen ? chosen.row.getBoundingClientRect().top - tree.getBoundingClientRect().top : 0); let awake = false; function tick(time, deltaMs) { const dt = Math.min(0.05, deltaMs / 1000); const target = targetY(); if (REDUCED) { glide.y = target; glide.v = 0; } else { const n = Math.max(1, Math.ceil(dt / 0.004)); const [k, z] = GLIDE; for (let s = 0; s < n; s++) { const h = dt / n; glide.v += (-k * (glide.y - target) - 2 * z * Math.sqrt(k) * glide.v) * h; glide.y += glide.v * h; } } /* moving fast, the highlight stretches the way it goes */ const stretch = Math.min(0.32, Math.abs(glide.v) * 0.00016); gsap.set(mark, { y: glide.y, scaleY: 1 + stretch, scaleX: 1 - stretch * 0.05 }); if (Math.abs(glide.y - target) < 0.1 && Math.abs(glide.v) < 1 && !gsap.isTweening(nodes.map((x) => x.group).filter(Boolean))) { glide.y = target; glide.v = 0; gsap.set(mark, { y: target, scaleY: 1, scaleX: 1 }); gsap.ticker.remove(tick); awake = false; } } function wake() { if (awake) return; awake = true; gsap.ticker.add(tick); } /* ---------------------------------------------------------------- new files, and deleting */ function folderFor(n) { if (!n) return tree0; return n.kids ? n : n.parent; } let typing = null; function newFile(name = 'notes.md') { const folder = folderFor(chosen); let free = name; for (let k = 2; folder.kids.some((c) => c.name === free); k++) free = name.replace('.', `-${k}.`); setOpen(folder, true); const n = build([free], folder, folder.group); folder.kids.push(n); const nameEl = n.row.querySelector('.node__name'); choose(n); live.textContent = `${free} created in ${folder.name}`; if (REDUCED) return n; /* the row opens up, and the name writes itself behind a caret */ gsap.fromTo(n.li, { height: 0, opacity: 0 }, { height: 32, opacity: 1, duration: 0.3, ease: 'power3.out', clearProps: 'height,opacity', onUpdate: wake }); nameEl.textContent = ''; const caret = document.createElement('span'); caret.className = 'node__caret'; nameEl.after(caret); const c = { i: 0 }; if (typing) typing.progress(1); typing = gsap.timeline({ onComplete: () => caret.remove() }) .to(c, { i: free.length, duration: free.length * TYPE, ease: 'none', delay: 0.25, onUpdate: () => (nameEl.textContent = free.slice(0, Math.round(c.i))) }) .to(caret, { opacity: 0, duration: 0.12, repeat: 3, yoyo: true }); return n; } function removeNode(n) { if (!n || n.kids || !n.parent) return; const list = visible(); const next = list[list.indexOf(n) + 1] || list[list.indexOf(n) - 1]; const siblings = n.parent.kids; siblings.splice(siblings.indexOf(n), 1); nodes.splice(nodes.indexOf(n), 1); if (chosen === n && next) choose(next); live.textContent = `${n.name} deleted`; if (REDUCED) { n.li.remove(); wake(); return; } gsap.to(n.li, { height: 0, opacity: 0, x: 10, duration: 0.3, ease: 'power3.inOut', onUpdate: wake, onComplete: () => { n.li.remove(); wake(); } }); } newBtn.addEventListener('click', () => { newFile(); root.focus({ preventScroll: true }); }); /* ---------------------------------------------------------------- the keys: the tree pattern */ root.tabIndex = 0; root.addEventListener('keydown', (e) => { const list = visible(); const i = list.indexOf(chosen); const n = chosen; let go = null; if (e.key === 'ArrowDown') go = list[Math.min(list.length - 1, i + 1)]; else if (e.key === 'ArrowUp') go = list[Math.max(0, i - 1)]; else if (e.key === 'Home') go = list[0]; else if (e.key === 'End') go = list[list.length - 1]; else if (e.key === 'ArrowRight') { if (n.kids && !n.open) setOpen(n, true); else if (n.kids && n.kids.length) go = n.kids[0]; } else if (e.key === 'ArrowLeft') { if (n.kids && n.open) setOpen(n, false); else if (n.parent) go = n.parent; } else if (e.key === 'Enter' || e.key === ' ') { if (n.kids) setOpen(n, !n.open); } else if (e.key === 'Delete' || e.key === 'Backspace') removeNode(n); else return; e.preventDefault(); if (go) choose(go); }); /* how the page is being used: the rings of the focus show for the keys, not after a finger or the mouse */ addEventListener('keydown', () => (document.documentElement.dataset.using = 'keys'), true); addEventListener('pointerdown', () => (document.documentElement.dataset.using = 'pointer'), true); addEventListener('resize', wake); /* ---------------------------------------------------------------- the library's preview */ /* a click from a script (detail 0) is a pretend hand: it chooses files, opens and closes folders, makes a new file and later deletes it, and ends with the tree as it began */ const find = (p) => nodes.find((n) => n.path === `website/${p}`); const STEPS = [['choose', 'src/pages/menu.astro'], ['open', 'public'], ['open', 'public/images'], ['choose', 'public/images/logo.svg'], ['new'], ['open', 'src/components'], ['delete'], ['close', 'public'], ['close', 'src/components'], ['choose', 'src/pages/index.astro']]; let turn = 0; let made = null; files.addEventListener('click', (e) => { if (e.detail !== 0 || e.target !== files) return; const [what, p] = STEPS[turn++ % STEPS.length]; if (what === 'new') made = newFile(); else if (what === 'delete') { if (made) removeNode(made); made = null; } else { const n = find(p); if (!n) return; if (what === 'choose') { let up = n.parent; while (up) { setOpen(up, true); up = up.parent; } choose(n); } else { choose(n); setOpen(n, what === 'open'); } } }); /* ---------------------------------------------------------------- it comes in */ OPEN_AT_START.forEach((p) => setOpen(nodes.find((n) => n.path === p), true, true)); choose(find('src/pages/index.astro')); glide.y = targetY(); gsap.set(mark, { y: glide.y }); if (!REDUCED) { gsap.from(files.querySelectorAll('.files__head > *'), { y: 8, opacity: 0, duration: 0.5, ease: 'power3.out', stagger: 0.06, clearProps: 'transform,opacity' }); gsap.from(visible().map((n) => n.row), { x: -12, opacity: 0, duration: 0.45, ease: 'power3.out', stagger: 0.035, delay: 0.1, clearProps: 'transform,opacity' }); }