https://www.steiner-verlag.de/bundles/ropifrontendediting/content-editor/js/scripts/carousel.js?v=1637255330

1(function() {
2    let initAll = function() {
3        let carousels = document.querySelectorAll('[data-ropi-carousel]');
4        for (let i = 0; i < carousels.length; i++) {
5            init(carousels[i]);
6        }
7    };
8
9    let init = function(carousel) {
10        if (carousel.ropiCarousel) {
11            return;
12        }
13
14        carousel.ropiCarousel = new function() {
15            const self = this;
16            const rotationInterval = carousel.getAttribute('data-ropi-carousel-rotation-interval') || 0;
17            const slides = carousel.querySelector('[data-ropi-carousel-slides]') || carousel.querySelector('ul');
18            const numSlides = carousel.getAttribute('data-ropi-carousel-num-slides') || slides.childElementCount;
19            const left = carousel.querySelector('[data-ropi-carousel-left]');
20            const right = carousel.querySelector('[data-ropi-carousel-right]');
21            const dots = carousel.querySelector('[data-ropi-carousel-dots]');
22            const dotsActiveClass = (dots ? dots.getAttribute('data-ropi-carousel-dots-class-active') : null) || 'ropi-dot-active';
23
24            let interval, intervalPaused, clientX, clientY, swipe, rect;
25            let current = 0;
26            let swipeable = true;
27
28            // Listeners
29
30            carousel.addEventListener('touchstart', function(event) {
31                if (!swipeable) return;
32
33                clientX = event.changedTouches[0].clientX;
34                clientY = event.changedTouches[0].clientY;
35                slides.style.transition = 'none';
36                swipe = false;
37            }, {passive: true});
38
39            carousel.addEventListener('touchmove', function(event) {
40                if (!swipeable) return;
41
42                let deltaX = clientX - event.changedTouches[0].clientX;
43                let deltaY = event.changedTouches[0].clientY - clientY;
44
45                if (swipe) {
46                    let transform = 'translateX(calc(' + (-current * 100) + '% - ' + deltaX + 'px))';
47                    slides.style.msTransform = transform;
48                    slides.style.transform = transform;
49                } else {
50                    if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > 16) {
51                        swipe = true;
52                        rect = carousel.getBoundingClientRect();
53                    }
54                }
55            }, {passive: true});
56
57            carousel.addEventListener('touchend', function(event) {
58                if (!swipeable) return;
59
60                slides.style.transition = '';
61
62                if (swipe) {
63                    let deltaX = clientX - event.changedTouches[0].clientX;
64                    let percentageX = 100 / rect.width * deltaX;
65
66                    let next = current + Math.round(percentageX / 100);
67
68                    if (next === current) {
69                        next = current + Math.round(percentageX * 4 / 100);
70                    }
71
72                    if (next < 0) {
73                        next = 0;
74                    } else if (next >= numSlides) {
75                        next = numSlides - 1;
76                    }
77
78                    self.slideTo(next);
79                    self.resetInterval();
80                    swipe = false;
81                }
82            }, {passive: true});
83
84            if (left && right) {
85                left.addEventListener('click', function() {
86                    self.resetInterval();
87                    self.slideTo(current - 1);
88                });
89
90                right.addEventListener('click', function() {
91                    self.resetInterval();
92                    self.slideTo(current + 1);
93                });
94            }
95
96            if (dots) {
97                dots.addEventListener('click', function(event) {
98                    self.resetInterval();
99                    let index = Array.prototype.indexOf.call(dots.children, event.target);
100                    if (index > -1) {
101                        self.slideTo(index);
102                    }
103                });
104            }
105
106            // Public
107
108            self.resetInterval = function() {
109                if (interval) {
110                    clearInterval(interval);
111                }
112
113                if (!rotationInterval) {
114                    return;
115                }
116
117                interval = setInterval(function() {
118                    if (intervalPaused || swipe) {
119                        return;
120                    }
121
122                    self.slideTo(current + 1);
123                }, rotationInterval);
124            };
125
126            self.setIntervalPaused = function(value) {
127                intervalPaused = value;
128            };
129
130            self.getIntervalPaused = function() {
131                return intervalPaused;
132            };
133
134            self.setSwipeable = function(value) {
135                swipeable = !!value;
136            };
137
138            self.getSwipeable = function() {
139                return swipeable;
140            };
141
142            self.slideTo = function(next) {
143                next = (next >= numSlides) ? 0 : ((next < 0) ? numSlides - 1 : next);
144                let transform = 'translateX(-' + (next * 100) + '%)';
145                slides.style.transform = transform;
146                slides.style.msTransform = transform;
147                if (dots && dots.children[next]) {
148                    for (let i = 0; i < dots.children.length; i++) {
149                        dots.children[i].setAttribute('class', '');
150                    }
151
152                    dots.children[next].setAttribute('class', dotsActiveClass);
153                }
154
155                current = next;
156            };
157
158            self.getCurrent = function() {
159                return current;
160            };
161
162            self.getDotsElement = function() {
163                return dots;
164            };
165
166            self.getLeftElement = function() {
167                return left;
168            };
169
170            self.getRightElement = function() {
171                return right;
172            };
173
174            self.getSlidesElement = function() {
175                return slides;
176            };
177
178            // constructor
179
180            self.resetInterval();
181            self.slideTo(0);
182        };
183
184        let event;
185
186        try {
187            event = new CustomEvent('ropicarouselinitialized');
188        } catch(e) {
189            event = document.createEvent('CustomEvent');
190            event.initCustomEvent('ropicarouselinitialized', false, false, {});
191        }
192
193        carousel.dispatchEvent(event);
194    };
195
196    document.addEventListener('load', initAll);
197    document.addEventListener('contentelementrender', initAll);
198
199    initAll();
200})();