https://townhall.com/_content/Rcl.Common/js/carousel.js

1class TimedCarousel {
2    constructor(carouselElement) {
3        this.carousel = carouselElement;
4        this.indicators = carouselElement.querySelectorAll('.carousel-indicators button');
5        this.interval = this.getInterval();
6        this.init();
7    }
8
9    getInterval() {
10        const intervalValue = Number(this.carousel.getAttribute('data-bs-interval'));
11        return Number.isFinite(intervalValue) && intervalValue > 0 ? intervalValue : 5000;
12    }
13
14    init() {
15        if (this.carousel.dataset.thmTimedCarouselInitialized === 'true') {
16            return;
17        }
18
19        this.carousel.dataset.thmTimedCarouselInitialized = 'true';
20        this.carousel.style.setProperty('--carousel-progress-duration', `${this.interval}ms`);
21        this.updateIndicatorProgress(this.getInitialSlideIndex());
22        this.carousel.addEventListener('slide.bs.carousel', (event) => {
23            this.updateIndicatorProgress(event.to);
24        });
25    }
26
27    getInitialSlideIndex() {
28        const activeIndicatorIndex = Array.from(this.indicators).findIndex((indicator) =>
29            indicator.classList.contains('active')
30        );
31
32        return activeIndicatorIndex >= 0 ? activeIndicatorIndex : 0;
33    }
34
35    updateIndicatorProgress(slideIndex) {
36        if (!this.indicators || this.indicators.length === 0) {
37            return;
38        }
39
40        this.indicators.forEach((indicator, index) => {
41            indicator.classList.toggle('is-progress-active', index === slideIndex);
42        });
43
44        const activeIndicator = this.indicators[slideIndex];
45        if (activeIndicator) {
46            activeIndicator.classList.remove('is-progress-active');
47            void activeIndicator.offsetWidth;
48            activeIndicator.classList.add('is-progress-active');
49        }
50    }
51}
52
53function initTimedCarousels() {
54    const carousels = document.querySelectorAll('[data-thm-timed-carousel]');
55    carousels.forEach((carousel) => {
56        new TimedCarousel(carousel);
57    });
58}
59
60if (document.readyState === 'loading') {
61    document.addEventListener('DOMContentLoaded', initTimedCarousels);
62} else {
63    initTimedCarousels();
64}
65
66export { TimedCarousel, initTimedCarousels };