Spaces:
Running
Running
| // Text-to-Scene gallery (scripts/t2s_gallery.py): a viewer for the renders, stepping through one agent's four views | |
| // of a scene, and "Full brief" for the scene briefs. Without it, every thumbnail still links to its full render. | |
| (() => { | |
| const links = [...document.querySelectorAll('a.gimg')]; | |
| if (links.length) { | |
| const box = document.createElement('div'); | |
| box.className = 'gbox'; box.hidden = true; | |
| box.setAttribute('role', 'dialog'); box.setAttribute('aria-modal', 'true'); box.setAttribute('aria-label', 'Render viewer'); | |
| box.innerHTML = '<button class="gbox-x" type="button" aria-label="Close">×</button>' | |
| + '<button class="gbox-prev" type="button" aria-label="Previous view">‹</button>' | |
| + '<figure><img alt=""><figcaption class="gbox-cap"></figcaption></figure>' | |
| + '<button class="gbox-next" type="button" aria-label="Next view">›</button>'; | |
| document.body.append(box); | |
| const img = box.querySelector('img'), cap = box.querySelector('.gbox-cap'), buttons = [...box.querySelectorAll('button')]; | |
| let group = [], i = 0, opener = null; | |
| const show = k => { | |
| i = (k + group.length) % group.length; | |
| const a = group[i]; | |
| img.src = a.href; img.alt = a.dataset.caption; cap.textContent = a.dataset.caption; | |
| new Image().src = group[(i + 1) % group.length].href; // the next view, ahead of the click | |
| }; | |
| const open = a => { | |
| group = links.filter(x => x.dataset.group === a.dataset.group); | |
| opener = a; show(group.indexOf(a)); | |
| box.hidden = false; document.body.style.overflow = 'hidden'; buttons[0].focus(); | |
| }; | |
| const close = () => { | |
| box.hidden = true; img.removeAttribute('src'); document.body.style.overflow = ''; | |
| if (opener) opener.focus(); | |
| }; | |
| links.forEach(a => a.addEventListener('click', ev => { | |
| if (ev.metaKey || ev.ctrlKey || ev.shiftKey || ev.altKey || ev.button) return; | |
| ev.preventDefault(); open(a); | |
| })); | |
| buttons[0].addEventListener('click', close); | |
| buttons[1].addEventListener('click', () => show(i - 1)); | |
| buttons[2].addEventListener('click', () => show(i + 1)); | |
| box.addEventListener('click', ev => { if (ev.target === box) close(); }); | |
| document.addEventListener('keydown', ev => { | |
| if (box.hidden) return; | |
| if (ev.key === 'Escape') close(); | |
| else if (ev.key === 'ArrowLeft') show(i - 1); | |
| else if (ev.key === 'ArrowRight') show(i + 1); | |
| else if (ev.key === 'Tab') { // keep focus on the viewer's three buttons | |
| const k = buttons.indexOf(document.activeElement); | |
| ev.preventDefault(); buttons[(k + (ev.shiftKey ? -1 : 1) + buttons.length) % buttons.length].focus(); | |
| } | |
| }); | |
| } | |
| // briefs: two lines, and a "Full brief" button where that hides text | |
| const fit = () => document.querySelectorAll('.gal-brief').forEach(p => { | |
| let b = p.nextElementSibling; | |
| if (!b || !b.classList.contains('gal-brief-btn')) { | |
| b = Object.assign(document.createElement('button'), {type: 'button', className: 'gal-brief-btn'}); | |
| b.addEventListener('click', () => { b.textContent = p.classList.toggle('open') ? 'Less' : 'Full brief'; }); | |
| p.after(b); | |
| } | |
| if (p.classList.contains('open')) return; | |
| b.textContent = 'Full brief'; | |
| b.hidden = p.scrollHeight <= p.clientHeight + 1; | |
| }); | |
| (document.fonts ? document.fonts.ready : Promise.resolve()).then(fit); | |
| let t; | |
| addEventListener('resize', () => { clearTimeout(t); t = setTimeout(fit, 150); }); | |
| })(); | |