https://pumasafety.com.au/assets/controllers/brand-site/carousel_controller-LYtSwNp.js

1/* stimulusFetch: 'lazy' */
2import { Controller } from '@hotwired/stimulus';
3
4const firstAfterBound = (elms, side, bound) => {
5    let i;
6    for (i = 0; i < elms.length; i++) {
7        const rect = elms[i].getBoundingClientRect();
8        if (rect.left + (rect.width * 0.667) > bound) {
9            return i;
10        }
11    }
12    return -1;
13}
14
15const lastBeforeBound = (elms, side, bound) => {
16    let i;
17    for (i = 0; i < elms.length; i++) {
18        const rect = elms[i].getBoundingClientRect();
19        if (rect.right - (rect.width * 0.333) > bound) {
20            return i - 1;
21        }
22    }
23    return -1;
24}
25
26// noinspection JSUnusedGlobalSymbols loaded via stimulus
27export default class extends Controller {
28    connect() {
29        /** @type {HTMLElement} */
30        const component = this.element;
31        const carousel = component.classList.contains('carousel') ? component : component.querySelector('.carousel');
32        const reverse = getComputedStyle(carousel).getPropertyValue('flex-direction').indexOf('reverse') !== -1;
33        if (component.classList.contains('youtube-block')) {
34            const {offsetLeft, offsetTop} = reverse? carousel.lastElementChild : carousel.firstElementChild;
35            carousel.scrollTo(offsetLeft, offsetTop);
36        }
37
38        component.querySelectorAll('.nav-btn').forEach(btn => {
39            btn.addEventListener('click', evt => {
40                evt.preventDefault();
41                const elms = reverse? Array.from(carousel.querySelectorAll('.carousel-item')).reverse() : carousel.querySelectorAll('.carousel-item');
42                if (btn.hasAttribute('data-prev')) {
43                    let index = lastBeforeBound(elms, 'left', carousel.getBoundingClientRect().left);
44                    if (index === -1) {
45                        index = elms.length - 1;
46                    }
47                    const {offsetLeft, offsetTop} = elms[index];
48                    carousel.scrollTo(offsetLeft, offsetTop);
49                }
50                else if (btn.hasAttribute('data-next')) {
51                    let index = firstAfterBound(elms, 'right', carousel.getBoundingClientRect().right);
52                    if (index === -1) {
53                        index = 0;
54                    }
55                    const {offsetLeft, offsetWidth, offsetTop} = elms[index];
56                    carousel.scrollTo(offsetLeft + offsetWidth - carousel.clientWidth, offsetTop);
57                } else {
58                    const target = document.getElementById(btn.href.split('#')[1]);
59                    target.parentElement.scrollTo(
60                        target.offsetLeft,
61                        target.offsetTop
62                    );
63                }
64            });
65        });
66    }
67}