-
Hover to take a closer look
-
Each panel expands and plays its preview when you hover it.
+
Hover or tap to take a closer look
+
Each panel expands and plays its preview when you hover or tap it. Swipe on mobile to move through them.
@@ -771,22 +772,70 @@
}
})();
- // Previews: hovering a panel expands it (CSS) and plays its video; the
+ // Previews: hovering/tapping a panel expands it (CSS) and plays its video; the
// video only becomes visible once it actually starts playing, so missing
// files just leave the labeled placeholder.
(function () {
- document.querySelectorAll('.preview-panel').forEach(function (p) {
+ var panels = [].slice.call(document.querySelectorAll('.preview-panel'));
+ if (!panels.length) return;
+ var active = -1;
+ function playPanel(p) {
var v = p.querySelector('video');
if (!v) return;
- v.addEventListener('playing', function () { p.classList.add('has-video'); });
- v.addEventListener('pause', function () { /* keep last frame */ });
- var play = function () { var pr = v.play(); if (pr && pr.catch) pr.catch(function () {}); };
- p.addEventListener('mouseenter', play);
- p.addEventListener('focus', play);
- p.addEventListener('mouseleave', function () { v.pause(); });
- p.addEventListener('blur', function () { v.pause(); });
- p.addEventListener('click', function () { if (v.paused) play(); else v.pause(); });
+ var pr = v.play();
+ if (pr && pr.catch) pr.catch(function () {});
+ }
+ function pausePanel(p) {
+ var v = p.querySelector('video');
+ if (v) v.pause();
+ }
+ function setActive(i, shouldPlay) {
+ active = (i + panels.length) % panels.length;
+ panels.forEach(function (panel, k) {
+ var on = k === active;
+ panel.classList.toggle('is-active', on);
+ panel.setAttribute('aria-expanded', on ? 'true' : 'false');
+ if (!on) pausePanel(panel);
+ });
+ if (shouldPlay !== false) playPanel(panels[active]);
+ }
+ panels.forEach(function (p, i) {
+ var v = p.querySelector('video');
+ if (v) {
+ v.addEventListener('playing', function () { p.classList.add('has-video'); });
+ v.addEventListener('pause', function () { /* keep last frame */ });
+ }
+ p.setAttribute('aria-expanded', 'false');
+ p.addEventListener('mouseenter', function () { setActive(i); });
+ p.addEventListener('focus', function () { setActive(i); });
+ p.addEventListener('mouseleave', function () {
+ if (!window.matchMedia || !window.matchMedia('(hover: none)').matches) {
+ p.classList.remove('is-active');
+ p.setAttribute('aria-expanded', 'false');
+ pausePanel(p);
+ }
+ });
+ p.addEventListener('blur', function () { pausePanel(p); });
+ p.addEventListener('click', function () { setActive(i); });
});
+ var strip = document.querySelector('.previews');
+ var sx = null, sy = null;
+ if (strip) {
+ strip.addEventListener('touchstart', function (e) {
+ if (!e.touches.length) return;
+ sx = e.touches[0].clientX;
+ sy = e.touches[0].clientY;
+ }, { passive: true });
+ strip.addEventListener('touchend', function (e) {
+ if (sx === null || sy === null || !e.changedTouches.length) return;
+ var dx = e.changedTouches[0].clientX - sx;
+ var dy = e.changedTouches[0].clientY - sy;
+ if (Math.abs(dx) > 42 && Math.abs(dx) > Math.abs(dy) * 1.25) {
+ setActive((active < 0 ? 0 : active) + (dx < 0 ? 1 : -1));
+ }
+ sx = sy = null;
+ }, { passive: true });
+ }
})();
// Domino reveal: fade/slide each section in as it scrolls into view.