https://glaj-ge.ch/wp-content/themes/glaj/template-parts/blocks/co…/header-slider.js?ver=1783606493&ver=6.8.10

1(function () {
2    'use strict';
3
4    var TRANSITION_MS = 900; // doit matcher la transition CSS du __slide
5
6    function setup(block) {
7        if (block.dataset.sliderReady) return;
8        block.dataset.sliderReady = '1';
9
10        var slides = Array.prototype.slice.call(block.querySelectorAll('.block-header-slider__slide'));
11        if (slides.length < 2) return; // une seule slide → pas de cycle
12
13        var dots = Array.prototype.slice.call(block.querySelectorAll('.block-header-slider__dot'));
14        var interval = parseInt(block.dataset.interval, 10) || 5000;
15
16        var current = 0;
17        var paused = false;
18        var timer = null;
19        var transitioning = false;
20
21        function setActive(idx) {
22            if (transitioning || idx === current || idx < 0 || idx >= slides.length) return;
23            transitioning = true;
24
25            var prev = slides[current];
26            var next = slides[idx];
27
28            prev.classList.remove('is-active');
29            prev.classList.add('is-leaving');
30            prev.setAttribute('aria-hidden', 'true');
31
32            next.classList.add('is-active');
33            next.setAttribute('aria-hidden', 'false');
34
35            dots.forEach(function (dot, i) {
36                dot.classList.toggle('is-active', i === idx);
37                dot.setAttribute('aria-selected', i === idx ? 'true' : 'false');
38            });
39
40            window.setTimeout(function () {
41                prev.classList.remove('is-leaving');
42                transitioning = false;
43            }, TRANSITION_MS);
44
45            current = idx;
46        }
47
48        function next() {

49            setActive((current + 1) % slides.length);
50        }
51
52        function startTimer() {
53            stopTimer();
54            timer = window.setInterval(function () {
55                if (!paused) next();
56            }, interval);
57        }
58
59        function stopTimer() {
60            if (timer) {
61                window.clearInterval(timer);
62                timer = null;
63            }
64        }
65
66        // Pause au hover sur le panneau (zone interactive — boutons).
67        block.querySelectorAll('.block-header-slider__panel-wrap').forEach(function (panel) {
68            panel.addEventListener('mouseenter', function () { paused = true; });
69            panel.addEventListener('mouseleave', function () { paused = false; });
70            panel.addEventListener('focusin', function () { paused = true; });
71            panel.addEventListener('focusout', function () { paused = false; });
72        });
73
74        // Pagination cliquable.
75        dots.forEach(function (dot) {
76            dot.addEventListener('click', function () {
77                var idx = parseInt(dot.dataset.goTo, 10);
78                if (!isNaN(idx)) {

79                    setActive(idx);
80                    startTimer(); // reset le compteur après une action manuelle
81                }
82            });
83        });
84
85        // Swipe tactile : gauche → slide suivante, droite → précédente.
86        // Listeners passifs (pas de blocage du scroll) ; on ne déclenche que
87        // si le geste est franchement horizontal, pour laisser le scroll
88        // vertical de la page tranquille.
89        var touchX = null;
90        var touchY = null;
91
92        block.addEventListener('touchstart', function (e) {
93            if (e.touches.length !== 1) return;
94            touchX = e.touches[0].clientX;
95            touchY = e.touches[0].clientY;
96        }, { passive: true });
97
98        block.addEventListener('touchend', function (e) {
99            if (touchX === null) return;
100            var dx = e.changedTouches[0].clientX - touchX;
101            var dy = e.changedTouches[0].clientY - touchY;
102            touchX = touchY = null;
103
104            if (Math.abs(dx) < 50 || Math.abs(dx) < Math.abs(dy) * 1.5) return;
105
106            var idx = dx < 0
107                ? (current + 1) % slides.length
108                : (current - 1 + slides.length) % slides.length;

109            setActive(idx);
110            startTimer(); // reset le compteur après une action manuelle
111        }, { passive: true });
112
113        // Pause quand l'onglet/page n'est pas visible (économie batterie + cohérence).
114        document.addEventListener('visibilitychange', function () {
115            if (document.hidden) stopTimer();
116            else startTimer();
117        });
118
119        startTimer();
120    }
121
122    // La hauteur du viewport est fixe en CSS (clamp sur 40vw) : sur mobile un
123    // panneau au contenu long devient plus haut que le viewport et déborde
124    // par le haut sur le header du site. On impose donc une min-height :
125    // panneau le plus haut + bande d'image visible au-dessus (qui absorbe
126    // aussi le dépassement dû à la rotation du panneau).
127    function sizeViewport(block) {
128        var viewport = block.querySelector('.block-header-slider__viewport');
129        if (!viewport) return;
130
131        var max = 0;
132        block.querySelectorAll('.block-header-slider__panel').forEach(function (p) {
133            max = Math.max(max, p.offsetHeight);
134        });
135        if (!max) return;
136
137        var gap = Math.max(150, Math.min(260, window.innerWidth * 0.35));
138        viewport.style.minHeight = (max + gap) + 'px';
139    }
140
141    function sizeAll() {
142        document.querySelectorAll('.block-header-slider').forEach(sizeViewport);
143    }
144
145    function init() {
146        document.querySelectorAll('.block-header-slider').forEach(function (block) {
147            if (block.classList.contains('backend')) return; // pas d'auto-play en éditeur
148            setup(block);
149        });
150
151        sizeAll();
152
153        // Re-mesurer quand les métriques changent (fonts, images, resize).
154        if (document.fonts && document.fonts.ready) {
155            document.fonts.ready.then(sizeAll);
156        }
157        window.addEventListener('load', sizeAll);
158
159        var timer;
160        window.addEventListener('resize', function () {
161            clearTimeout(timer);
162            timer = setTimeout(sizeAll, 150);
163        });
164    }
165
166    if (document.readyState === 'loading') {
167        document.addEventListener('DOMContentLoaded', init);
168    } else {
169        init();
170    }
171})();