https://barrielegion147.ca/assets/js/ms-ticker.js

1/*
2  ANNOUNCEMENT TICKER
3  Rotates the announcements in the red header bar. Announcements are managed
4  from the Home section of the admin panel (widgets/ticker.php renders them).
5
6  - Any number of ".js-ticker" elements on the page are handled independently
7    (the site renders one for desktop and one for mobile).
8  - A single announcement simply sits still, no rotation and no pause button.
9  - Rotation pauses on hover/focus, while the tab is hidden, and for visitors
10    who have asked for reduced motion. The pause button stops it for good.
11*/
12(function () {
13  function initTicker(ticker) {
14    var items = ticker.querySelectorAll('.ticker_item');
15    if (items.length === 0) { return; }
16
17    var index = 0;
18    items[0].classList.add('is_active');
19    if (items.length < 2) { return; }
20
21    var speed = parseInt(ticker.getAttribute('data-speed'), 10);
22    if (isNaN(speed) || speed < 1000) { speed = 6000; }
23
24    var reduceMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
25    var toggle = ticker.querySelector('.js-ticker-toggle');
26    var timer = null;
27    var hovering = false;
28    var stopped = reduceMotion;
29
30    function advance() {
31      items[index].classList.remove('is_active');
32      index = (index + 1) % items.length;
33      items[index].classList.add('is_active');
34    }
35
36    function stop() {
37      if (timer) { window.clearInterval(timer); timer = null; }
38    }
39
40    function start() {
41      stop();
42      if (stopped || hovering || document.hidden) { return; }
43      timer = window.setInterval(advance, speed);
44    }
45
46    // GIVE PEOPLE A CHANCE TO READ / CLICK AN ANNOUNCEMENT
47    ticker.addEventListener('mouseenter', function () { hovering = true; stop(); });
48    ticker.addEventListener('mouseleave', function () { hovering = false; start(); });
49    ticker.addEventListener('focusin', function () { hovering = true; stop(); });
50    ticker.addEventListener('focusout', function () { hovering = false; start(); });
51
52    document.addEventListener('visibilitychange', function () {
53      if (document.hidden) { stop(); } else { start(); }
54    });
55
56    if (toggle) {
57      // ROTATION CAN BE STOPPED OUTRIGHT, NOT JUST WHILE THE MOUSE IS OVER IT
58      if (stopped) { setToggle(true); }
59      toggle.addEventListener('click', function () {
60        stopped = !stopped;
61        setToggle(stopped);
62        start();
63      });
64    }
65
66    function setToggle(isStopped) {
67      var icon = toggle.querySelector('i');
68      if (icon) {
69        icon.classList.toggle('fa-pause', !isStopped);
70        icon.classList.toggle('fa-play', isStopped);
71      }
72      toggle.setAttribute('aria-label', isStopped ? 'Play announcements' : 'Pause announcements');
73    }
74
75    start();
76  }
77
78  function initAll() {
79    var tickers = document.querySelectorAll('.js-ticker');
80    for (var i = 0; i < tickers.length; i++) {
81      initTicker(tickers[i]);
82    }
83  }
84
85  if (document.readyState === 'loading') {
86    document.addEventListener('DOMContentLoaded', initAll);
87  } else {
88    initAll();
89  }
90})();