/* The tag field A field for tags. A word typed and confirmed (Enter or a comma), or chosen among the suggestions, becomes a tag: the words fly from where they were, in the field or in the list, into their place, and the colour grows round them with a little overshoot while the cross pops in; the tags after it and the input slide to make room. A tag taken away shrinks where it is and the others close the gap; a backspace in the empty field marks the last tag, a second one takes it away. A word already there makes its tag shake, and so does the field when it is full. It is a real combobox: the suggestions are a listbox moved with the arrows, and every tag has a button to take it away. */ /* ---- values to change ---- */ const MAX = 8; /* how many tags there can be */ const POP = 1.6; /* how far a new tag's colour overshoots as it grows */ const SLIDE = 0.45; /* the seconds the tags take to slide to their new places */ const SUGGESTIONS = ['Hiking', 'Cycling', 'Wine tasting', 'Cooking class', 'Old towns', 'Lakes', 'Thermal baths', 'Horse riding', 'Photography', 'Markets']; /* the words suggested while typing */ const START = ['Hiking', 'Wine tasting', 'Old towns']; /* the tags when the page opens */ const REDUCED = matchMedia('(prefers-reduced-motion: reduce)').matches; const root = document.querySelector('[data-tags]'); const field = root.querySelector('[data-field]'); const list = root.querySelector('[data-list]'); const input = root.querySelector('[data-input]'); const options = root.querySelector('[data-options]'); const hint = root.querySelector('[data-hint]'); const live = root.querySelector('[data-live]'); const CROSS = ''; /* soft colours for the tags, each with its ink, one after the other: two tags made one after the other never match */ const TONES = [['#e5eeff', '#2f4f9e'], ['#fde5dc', '#9a4329'], ['#e1f2e5', '#2d6a3e'], ['#fff0c4', '#8a6413'], ['#ede5ff', '#5b3d9a'], ['#dcf2f1', '#1f6966']]; let made = 0; const HINT = `Press Enter to add, up to ${MAX}.`; let tags = []; /* { text, li, bg, label, x } */ let armed = null; /* the tag the next backspace takes away */ /* ---------------------------------------------------------------- the line under the field */ let hintBack = null; function say(text, bad = false, quiet = false) { if (hintBack) hintBack.kill(); hint.textContent = text; hint.classList.toggle('is-bad', bad); if (!quiet) live.textContent = text; /* a warning goes back to the usual line after a moment */ if (bad) hintBack = gsap.delayedCall(2.2, () => say(tags.length >= MAX ? 'That’s the most you can add.' : HINT, false, true)); } const shake = (el) => !REDUCED && gsap.fromTo(el, { x: 0 }, { keyframes: { x: [0, -7, 6, -4, 3, 0] }, duration: 0.42, ease: 'power1.inOut', overwrite: 'auto' }); /* ---------------------------------------------------------------- moving the others */ /* where every tag and the input are before a change, so that after it they slide from there */ function measure() { const m = new Map(tags.map((t) => [t.li, t.li.getBoundingClientRect()])); m.set(input, input.getBoundingClientRect()); return m; } function slideFrom(before) { if (REDUCED) return; before.forEach((r, el) => { if (!el.isConnected) return; const now = el.getBoundingClientRect(); const dx = r.left - now.left; const dy = r.top - now.top; if (Math.abs(dx) < 0.5 && Math.abs(dy) < 0.5) return; gsap.fromTo(el, { x: dx, y: dy }, { x: 0, y: 0, duration: SLIDE, ease: 'power3.out', overwrite: 'auto' }); }); } /* ---------------------------------------------------------------- a tag */ function make(text) { const li = document.createElement('li'); li.className = 'chip'; const [bg, ink] = TONES[made++ % TONES.length]; li.style.setProperty('--chip-bg', bg); li.style.setProperty('--chip-ink', ink); li.innerHTML = ``; const t = { text, li, bg: li.firstElementChild, label: li.children[1], x: li.lastElementChild }; t.label.textContent = text; t.x.setAttribute('aria-label', `Remove ${text}`); t.x.addEventListener('click', () => remove(t, true)); return t; } function disarm() { if (!armed) return; armed.li.classList.remove('is-armed'); armed = null; } /* a word becomes a tag: from (a rectangle) is where its words were, in the field or in the list */ function add(text, from = null) { text = text.trim().replace(/\s+/g, ' '); if (!text) return false; disarm(); const same = tags.find((t) => t.text.toLowerCase() === text.toLowerCase()); if (same) { /* already there: that tag shakes and flashes */ shake(same.li); if (!REDUCED) gsap.fromTo(same.bg, { scale: 1.12 }, { scale: 1, duration: 0.5, ease: 'elastic.out(1, 0.45)' }); say(`${same.text} is already there.`, true); return false; } if (tags.length >= MAX) { shake(field); say('That’s the most you can add.', true); return false; } const before = measure(); const t = make(text); list.append(t.li); tags.push(t); slideFrom(before); if (!REDUCED) { const lab = t.label.getBoundingClientRect(); const box = t.li.getBoundingClientRect(); /* the words fly from where they were into the tag; the colour grows round them; the cross pops in */ if (from) gsap.from(t.label, { x: from.left - lab.left, y: from.top + from.height / 2 - (lab.top + lab.height / 2), duration: SLIDE + 0.1, ease: 'power3.out' }); gsap.from(t.bg, { scaleX: Math.min(1, lab.width / box.width), scaleY: 0.55, opacity: 0, duration: 0.6, ease: `back.out(${POP})`, delay: from ? 0.12 : 0 }); gsap.from(t.x, { scale: 0, rotation: -90, duration: 0.45, ease: 'back.out(2.5)', delay: from ? 0.3 : 0.15 }); } live.textContent = `${text} added`; say(tags.length >= MAX ? 'That’s the most you can add.' : HINT, false, true); return true; } /* a tag taken away: out of the flow where it is, it shrinks while the others close the gap */ function remove(t, fromButton = false) { const i = tags.indexOf(t); if (i < 0) return; if (armed === t) armed = null; const r = t.li.getBoundingClientRect(); const f = field.getBoundingClientRect(); tags.splice(i, 1); const before = measure(); Object.assign(t.li.style, { position: 'absolute', left: `${r.left - f.left}px`, top: `${r.top - f.top}px`, margin: '0' }); slideFrom(before); if (REDUCED) t.li.remove(); else gsap.to(t.li, { scale: 0.4, opacity: 0, duration: 0.26, ease: 'power2.in', onComplete: () => t.li.remove() }); /* the focus goes to the next tag's button, or back to the field */ if (fromButton) (tags[i] || tags[i - 1] ? (tags[i] || tags[i - 1]).x : input).focus({ preventScroll: true }); live.textContent = `${t.text} removed`; say(HINT, false, true); } /* ---------------------------------------------------------------- the suggestions */ let found = []; let active = -1; let shownList = false; const escape = (s) => s.replace(/[&<>"']/g, (c) => `&#${c.charCodeAt(0)};`); function suggest() { const q = input.value.trim().toLowerCase(); const have = new Set(tags.map((t) => t.text.toLowerCase())); found = q ? SUGGESTIONS.filter((s) => s.toLowerCase().includes(q) && !have.has(s.toLowerCase())).slice(0, 5) : []; active = found.length ? 0 : -1; options.innerHTML = found.map((s, k) => { /* the part typed is in bold */ const a = s.toLowerCase().indexOf(q); return ``; }).join(''); showList(found.length > 0); mark(); } function showList(v) { input.setAttribute('aria-expanded', String(v)); if (v === shownList) return; shownList = v; gsap.killTweensOf(options); if (v) { options.hidden = false; if (!REDUCED) { gsap.fromTo(options, { opacity: 0, y: -6, scaleY: 0.92 }, { opacity: 1, y: 0, scaleY: 1, duration: 0.32, ease: 'power3.out' }); gsap.from(options.children, { opacity: 0, y: -4, duration: 0.3, ease: 'power2.out', stagger: 0.03 }); } } else if (REDUCED) options.hidden = true; else gsap.to(options, { opacity: 0, y: -4, duration: 0.16, ease: 'power2.in', onComplete: () => (options.hidden = true) }); } function mark() { [...options.children].forEach((o, k) => o.setAttribute('aria-selected', String(k === active))); if (active >= 0) input.setAttribute('aria-activedescendant', `tags-option-${active}`); else input.removeAttribute('aria-activedescendant'); } /* a suggestion chosen: its words fly from the list into the field */ function pick(k) { const row = options.children[k]; if (!row) return; const range = document.createRange(); range.selectNodeContents(row); const r = range.getBoundingClientRect(); if (add(found[k], r)) input.value = ''; suggest(); } /* the words typed, from where they are in the input */ function typed() { const r = input.getBoundingClientRect(); const pad = parseFloat(getComputedStyle(input).paddingLeft); return { left: r.left + pad, top: r.top, height: r.height, width: 0 }; } function confirm() { if (active >= 0 && shownList) pick(active); else if (add(input.value, typed())) { input.value = ''; suggest(); } } input.addEventListener('input', () => { disarm(); /* a comma closes the word */ if (input.value.includes(',')) { const parts = input.value.split(','); const rest = parts.pop(); parts.forEach((p) => add(p, typed())); input.value = rest.trimStart(); } suggest(); }); input.addEventListener('keydown', (e) => { if (e.key === 'Enter') { e.preventDefault(); confirm(); } else if (e.key === 'ArrowDown' && found.length) { e.preventDefault(); active = (active + 1) % found.length; mark(); } else if (e.key === 'ArrowUp' && found.length) { e.preventDefault(); active = (active - 1 + found.length) % found.length; mark(); } else if (e.key === 'Escape') showList(false); else if (e.key === 'Backspace' && !input.value && tags.length) { /* the first backspace marks the last tag, the second takes it away */ if (armed) remove(armed); else { armed = tags[tags.length - 1]; armed.li.classList.add('is-armed'); if (!REDUCED) gsap.fromTo(armed.li, { scale: 0.92 }, { scale: 1, duration: 0.5, ease: 'elastic.out(1, 0.5)' }); live.textContent = `Press backspace again to remove ${armed.text}`; } } }); input.addEventListener('blur', () => { disarm(); showList(false); }); input.addEventListener('focus', () => { pretend = false; field.classList.remove('is-pretend'); }); /* the suggestions are chosen with the pointer without taking the focus from the field */ options.addEventListener('pointerdown', (e) => e.preventDefault()); options.addEventListener('click', (e) => { const row = e.target.closest('.option'); if (row) pick([...options.children].indexOf(row)); }); options.addEventListener('pointermove', (e) => { const row = e.target.closest('.option'); if (!row) return; active = [...options.children].indexOf(row); mark(); }); /* a click on the empty part of the field goes to the input */ field.addEventListener('pointerdown', (e) => { if (e.target === field) { e.preventDefault(); input.focus(); } }); /* ---------------------------------------------------------------- the library's preview */ /* a click from a script (detail 0) is a pretend hand, without taking the focus: it chooses a suggestion, types a tag, types one already there, takes one away with its cross and two backspaces take away the last */ let pretend = false; let step = 0; let busy = null; function typeIn(text, then) { input.value = ''; suggest(); const tl = gsap.timeline({ onComplete: then }); [...text].forEach((ch, k) => tl.call(() => { input.value += ch; input.dispatchEvent(new Event('input')); }, null, k * 0.07)); return tl; } const STEPS = [ () => typeIn('Lak', () => gsap.delayedCall(0.55, () => pick(0))), () => typeIn('Cooking class', () => gsap.delayedCall(0.25, confirm)), () => typeIn('Hiking', () => gsap.delayedCall(0.25, confirm)), () => { const t = tags.find((x) => x.text === 'Lakes') || tags[tags.length - 1]; if (t) remove(t); }, () => { input.value = ''; input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Backspace' })); return gsap.delayedCall(0.6, () => input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Backspace' }))); }, ]; root.addEventListener('click', (e) => { if (e.detail !== 0 || e.target !== root) return; if (busy) busy.progress(1); if (document.activeElement !== input) { pretend = true; field.classList.add('is-pretend'); } busy = STEPS[step]() || null; step = (step + 1) % STEPS.length; }); /* ---------------------------------------------------------------- it comes in */ START.forEach((text) => { const t = make(text); list.append(t.li); tags.push(t); }); say(HINT, false, true); if (!REDUCED) { gsap.from(['.tags__label', field, hint], { y: 14, opacity: 0, duration: 0.7, ease: 'power3.out', stagger: 0.08, clearProps: 'transform,opacity' }); gsap.from(tags.map((t) => t.bg), { scaleX: 0.3, scaleY: 0.5, opacity: 0, duration: 0.6, ease: `back.out(${POP})`, stagger: 0.08, delay: 0.3 }); gsap.from(tags.map((t) => t.label), { opacity: 0, y: 6, duration: 0.5, ease: 'power3.out', stagger: 0.08, delay: 0.38 }); gsap.from(tags.map((t) => t.x), { scale: 0, rotation: -90, duration: 0.45, ease: 'back.out(2.5)', stagger: 0.08, delay: 0.5 }); }