Spaces:
Running on Zero
Running on Zero
| const slides = [...document.querySelectorAll('.slide')]; | |
| const counter = document.getElementById('counter'); | |
| const bar = document.getElementById('progress-bar'); | |
| const overview = document.getElementById('overview'); | |
| const scrim = document.getElementById('scrim'); | |
| const menu = document.getElementById('menu'); | |
| let current = 0; | |
| function closeOverview() { | |
| overview.classList.remove('open'); | |
| scrim.classList.remove('open'); | |
| overview.setAttribute('aria-hidden', 'true'); | |
| menu.setAttribute('aria-expanded', 'false'); | |
| } | |
| function openOverview() { | |
| overview.classList.add('open'); | |
| scrim.classList.add('open'); | |
| overview.setAttribute('aria-hidden', 'false'); | |
| menu.setAttribute('aria-expanded', 'true'); | |
| } | |
| function show(index, push = true) { | |
| current = Math.max(0, Math.min(slides.length - 1, index)); | |
| slides.forEach((slide, i) => slide.classList.toggle('active', i === current)); | |
| counter.textContent = `${current + 1} / ${slides.length}`; | |
| bar.style.width = `${(current + 1) / slides.length * 100}%`; | |
| document.querySelectorAll('[data-slide-target]').forEach(link => { | |
| link.classList.toggle('current', link.dataset.slideTarget === slides[current].id); | |
| }); | |
| document.title = `${slides[current].dataset.title || ''} · ${document.querySelector('.deck-nav strong').textContent}`; | |
| if (push) history.replaceState(null, '', `#${slides[current].id}`); | |
| slides[current].scrollTo({ top: 0, behavior: 'instant' }); | |
| closeOverview(); | |
| } | |
| function showById(id) { | |
| const index = slides.findIndex(slide => slide.id === id); | |
| if (index >= 0) show(index); | |
| } | |
| document.getElementById('prev').addEventListener('click', () => show(current - 1)); | |
| document.getElementById('next').addEventListener('click', () => show(current + 1)); | |
| document.getElementById('print').addEventListener('click', () => window.print()); | |
| menu.addEventListener('click', () => overview.classList.contains('open') ? closeOverview() : openOverview()); | |
| document.getElementById('close-overview').addEventListener('click', closeOverview); | |
| scrim.addEventListener('click', closeOverview); | |
| document.querySelectorAll('[data-slide-target]').forEach(link => { | |
| link.addEventListener('click', event => { | |
| event.preventDefault(); | |
| showById(link.dataset.slideTarget); | |
| }); | |
| }); | |
| document.querySelectorAll('.source-chips a').forEach(link => { | |
| link.addEventListener('click', event => { | |
| event.preventDefault(); | |
| const target = document.querySelector(link.getAttribute('href')); | |
| showById('references'); | |
| if (target) requestAnimationFrame(() => target.scrollIntoView({ block: 'center' })); | |
| }); | |
| }); | |
| document.addEventListener('keydown', event => { | |
| if (event.key === 'Escape') return closeOverview(); | |
| if (['ArrowRight', 'PageDown', ' '].includes(event.key)) show(current + 1); | |
| if (['ArrowLeft', 'PageUp'].includes(event.key)) show(current - 1); | |
| if (event.key === 'Home') show(0); | |
| if (event.key === 'End') show(slides.length - 1); | |
| }); | |
| let touchStartX = 0; | |
| document.addEventListener('touchstart', event => { touchStartX = event.changedTouches[0].screenX; }, { passive: true }); | |
| document.addEventListener('touchend', event => { | |
| const distance = event.changedTouches[0].screenX - touchStartX; | |
| if (Math.abs(distance) > 70) show(current + (distance < 0 ? 1 : -1)); | |
| }, { passive: true }); | |
| const hashId = location.hash.slice(1); | |
| const initial = slides.findIndex(slide => slide.id === hashId); | |
| show(initial >= 0 ? initial : 0, false); | |