https://forms.prescott.ca/_Template/Get/b3cd742c-e00c-4cd7-b8c2-ad…/scripts/eSolutions/slider/slider.js

1(function ($j) {
2    const $jslidercarousels = $j('body').find('.slider').parent().toArray();
3
4    if ($jslidercarousels.length === 0) return;
5
6    for (let i = 0; i < $jslidercarousels.length; i++) {
7        let slider = $jslidercarousels[i].children[0];
8        let button = $jslidercarousels[i].children[1];
9
10        const pause = button.querySelector('.slider-button-pause');
11        const play = button.querySelector('.slider-button-play');
12
13        // calculate width of $jslidercarousels
14
15        adjustButton(button, pause, play);
16
17        $j(window).resize(function () {
18            waitForFinalEvent(function () {
19                adjustButton(button,pause, play);
20            }, 500, "some unique string");
21        });
22        let sliderOptions = slider.getAttribute('data-options');
23        let jsonSliderOptions = JSON.parse(sliderOptions);
24        
25
26        // initialize flickity
27       //slider.flickity(jsonSliderOptions);
28
29        // get flickity data
30        let sliderFlkty = new Flickity(slider, jsonSliderOptions);
31        if (jsonSliderOptions.pageDots) {
32            slider.querySelector('.flickity-viewport').style['margin-bottom'] =  '30px';
33        }
34
35        //remove button when interacted with since autoplay is destroyed
36        slider.addEventListener('dragend', (event, index) => {
37            button.setAttribute('aria-hidden', true);
38            button.className += ' hide';
39        })
40
41        slider.addEventListener('pointerup', (event, index) => {
42            button.setAttribute('aria-hidden', true);
43            button.className += ' hide';
44        })
45
46        // pause and play when button clicked
47        button.addEventListener("click", function () {
48            const autoplay = sliderFlkty.player.state;
49            if (autoplay == 'playing') {
50                sliderFlkty.stopPlayer();
51                button.setAttribute('aria-pressed', 'true');
52                pause.setAttribute('aria-hidden', 'true');
53                pause.className += ' hide';
54                play.classList.remove('hide');
55                play.setAttribute('aria-hidden', 'false');
56            } else {
57                sliderFlkty.playPlayer();
58                button.setAttribute('aria-pressed', 'false');
59                pause.setAttribute('aria-hidden', 'false');
60                pause.classList.remove('hide');
61                play.className += ' hide';
62                play.setAttribute('aria-hidden', 'true');
63            }
64        })
65    }
66
67    //generating button size depending on parent node's width. Used js because it didn't play nice when in a grid.
68    function adjustButton(button, pause, play) {
69        let buttonSize, iconSize, playPadding;
70        $parentWidth = button.parentElement.offsetWidth;
71        if ($parentWidth > 962) {
72            buttonSize = 50;
73            iconSize = 36.5;
74            playPadding = 4;
75        } else {
76
77            buttonSize = (8 / 100) * $parentWidth;
78            iconSize = (3.8 / 100) * $parentWidth;
79            playPadding = 3;
80        }
81
82        button.style.width = buttonSize + 'px';
83        button.style.height = buttonSize + 'px';
84
85        let pauseSvg = pause.querySelector('svg');
86        pauseSvg.style.width = iconSize + 'px';
87        pauseSvg.style.height = iconSize + 'px';
88
89        let playSvg = play.querySelector('svg');
90        playSvg.style.width = iconSize + 'px';
91        playSvg.style.height = iconSize + 'px';
92    };
93
94    function waitForFinalEvent() {
95        var timers = {};
96        return function (callback, ms, uniqueId) {
97            if (!uniqueId) {
98                uniqueId = "Don't call this twice without a uniqueId";
99            }
100            if (timers[uniqueId]) {
101                clearTimeout(timers[uniqueId]);
102            }
103            timers[uniqueId] = setTimeout(callback, ms);
104        };
105    };
106    
107})(jQuery);