62 lines
1.8 KiB
JavaScript
62 lines
1.8 KiB
JavaScript
/**
|
||
* Gallery TV Slideshow
|
||
* Cycles through images inside gallery-TV blocks.
|
||
* Pauses off-screen via IntersectionObserver for performance.
|
||
* Respects prefers-reduced-motion.
|
||
*/
|
||
(function () {
|
||
'use strict';
|
||
|
||
var INTERVAL = 4000; // ms between slides
|
||
|
||
function boot() {
|
||
var stages = document.querySelectorAll('[data-gtv-slideshow]');
|
||
if (!stages.length) return;
|
||
|
||
/* Honour reduced-motion – show first slide only */
|
||
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
|
||
|
||
for (var i = 0; i < stages.length; i++) {
|
||
initSlideshow(stages[i]);
|
||
}
|
||
}
|
||
|
||
function initSlideshow(stage) {
|
||
var slides = stage.querySelectorAll('.gtv-slide');
|
||
if (slides.length < 2) return;
|
||
|
||
var state = { current: 0, paused: false, timer: null };
|
||
|
||
/* IntersectionObserver – pause when off-screen */
|
||
if ('IntersectionObserver' in window) {
|
||
new IntersectionObserver(function (entries) {
|
||
for (var j = 0; j < entries.length; j++) {
|
||
state.paused = !entries[j].isIntersecting;
|
||
}
|
||
if (!state.paused && !state.timer) {
|
||
state.timer = setInterval(function () { advance(slides, state); }, INTERVAL);
|
||
} else if (state.paused && state.timer) {
|
||
clearInterval(state.timer);
|
||
state.timer = null;
|
||
}
|
||
}, { rootMargin: '200px', threshold: 0.05 }).observe(stage);
|
||
}
|
||
|
||
/* Start cycling */
|
||
state.timer = setInterval(function () { advance(slides, state); }, INTERVAL);
|
||
}
|
||
|
||
function advance(slides, state) {
|
||
if (state.paused) return;
|
||
slides[state.current].classList.remove('is-active');
|
||
state.current = (state.current + 1) % slides.length;
|
||
slides[state.current].classList.add('is-active');
|
||
}
|
||
|
||
if (document.readyState === 'loading') {
|
||
document.addEventListener('DOMContentLoaded', boot);
|
||
} else {
|
||
boot();
|
||
}
|
||
})();
|