OTSSigns-Website/theme/assets/js/industry-animator.js

/**
 * 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();
  }
})();