https://www.mgp.fr/modules/internet-templates/javascript/pages/index.js

1// HOME DUAL SLIDER
2if (document.querySelector('.bloc-accueil-slider') !== null) {
3    const homeSlider = document.querySelector('.bloc-accueil-slider')
4    const slideTo = homeSlider.querySelectorAll('.slideto')
5    const slides = homeSlider.querySelectorAll('.slide')
6
7    let imgWrapperHeight = document.querySelector('.bloc-accueil-slider').offsetHeight;
8    document.querySelector('.bloc-accueil-slider').style.height = imgWrapperHeight + 'px';
9    const allWrapper =
10        document.querySelectorAll('.bloc-accueil-slider--content, ' +
11            '.bloc-accueil-slider--img--wrapper, ' +
12            '.bloc-accueil-slider--offres-wrapper')
13
14    function sleep(ms) {
15        return new Promise(resolve => setTimeout(resolve, ms));
16    }
17
18    for (let i = 0; i < slideTo.length; ++i) {
19        slideTo[i].addEventListener('click', e => {
20            slideTo.forEach(slideTo => {
21                slideTo.classList.remove('active')
22            })
23
24            allWrapper.forEach((elm, i) => {
25                elm.classList.add('transition-1-slow');
26                let rect = elm.getBoundingClientRect();
27                elm.style.cssText = `height: ${rect.height}px; width: ${rect.width}px; opacity:0; translate(-2rem, 0)`
28
29                document.querySelector('.bloc-accueil-slider--content').style.transform = "translate(-2rem, 0)";
30                document.querySelector('.bloc-accueil-slider--img--wrapper').style.transform = "translate(0, -2rem)";
31                document.querySelector('.bloc-accueil-slider--offres-wrapper').style.transform = "translate(0, 2rem)";
32
33                setTimeout(function () {
34                    if (elm.classList.contains('bloc-accueil-slider--img--wrapper')) {
35                        setTimeout(function () {
36                            elm.style.cssText = `height: ${rect.height}px; width: ${rect.width}px; opacity:1; transform: translate(0, 0)`
37                        }, 600)
38                    }
39                    if (elm.classList.contains('bloc-accueil-slider--content')) {
40                        elm.style.cssText = `height: ${rect.height}px; width: ${rect.width}px;`
41                        setTimeout(function () {
42                            elm.style.opacity = '1';
43                            elm.style.transform = "translate(0, 0)"
44                        }, 100)
45                    }
46
47                    if (elm.classList.contains('bloc-accueil-slider--offres-wrapper')) {
48                        setTimeout(function () {
49                            elm.style.cssText = `height: ${rect.height}px; width: ${rect.width}px; opacity:1; transform: translate(0, 0)`
50                        }, 300)
51                    }
52                }, 600);
53
54            })
55            const target = e.target.getAttribute('data-target-slide')
56
57            if (homeSlider.querySelector('.slideto.active') !== null
58                &&
59                target === homeSlider.querySelector('.slideto.active').getAttribute('data-target-slide')
60
61            ) {
62                console.log('allreadydone')
63                return
64            }
65            homeSlider.classList.add('bloc-accueil-slider--changing')
66
67
68            if (e.target.classList.contains('subnav-item-title')) {
69                document.querySelector('#pol').classList.add('active');
70                document.querySelector('.subnav-item-title').classList.add('active');
71            } else {
72                e.target.classList.add('active')
73            }
74            if (e.target.id === 'pol') {
75                document.querySelector('.subnav-item-title').classList.add('active');
76            }
77            if (e.target.parentNode.id == 'mi') {
78                document.querySelector('.before-subnav').classList.add('active');
79            } else {
80                document.querySelector('.before-subnav').classList.remove('active');
81            }
82
83            slidingTo(target)
84        })
85    }
86
87
88    const slidingTo = target => {
89        for (let i = 0; i < slides.length; ++i) {
90            if (slides[i].dataset.slide !== target) {
91                // fadeOut
92                slides[i].style.opacity = '0'
93                if (slides[i].classList.contains('slide-img')) {
94                    slides[i].classList.add('hidden')
95                    slides[i].addEventListener('transitionend', () => {
96                        slides[i].style.display = 'none'
97                    })
98                }
99                if (!slides[i].classList.contains('slide-offre')) {
100                    slides[i].addEventListener('transitionend', () => {
101                        slides[i].style.display = 'none'
102                        homeSlider.classList.remove('bloc-accueil-slider--changing')
103                    })
104                } else {
105                    setTimeout(() => {
106                        slides[i].style.display = 'none'
107                    }, 1000)
108                }
109            } else {
110                setTimeout(() => {
111                    slides[i].style.removeProperty('display')
112                    slides[i].style.opacity = '1'
113                    if (slides[i].classList.contains('slide-img')) {
114                        slides[i].classList.remove('hidden')
115                    }
116                    if (slides[i].classList.contains('slide-offre')) {
117                        homeSlider.querySelectorAll('.offre-adaptee').forEach(offre => {
118                            offre.classList.remove('active')
119                        })
120                        const offre = slides[i].querySelectorAll('.offre-adaptee')[0];
121                        offre.classList.add('active')
122                        const cta = offre.getAttribute('data-cta');
123                        const targetCta = document.querySelector('.target-cta');
124                        targetCta.href = cta;
125                        targetCta.setAttribute("aria-label", targetCta.textContent + ", " + offre.querySelector('p.text').textContent.trim().toLowerCase());
126                    }
127                }, 1000)
128            }
129        }
130    }
131
132
133// Home dualslider offre adapatee
134    const offreAdaptee = homeSlider.querySelectorAll('.offre-adaptee')
135    for (let i = 0; i < offreAdaptee.length; ++i) {
136        offreAdaptee[i].addEventListener('click', evt => {
137            const cta = offreAdaptee[i].getAttribute('data-cta')
138            homeSlider.querySelectorAll('.offre-adaptee').forEach(offre => {
139                offre.classList.remove('active')
140            })
141            offreAdaptee[i].classList.add('active')
142            document.querySelector('.target-cta').href = cta
143        })
144    }
145
146    const offreAdapteeActive = homeSlider.querySelector('.offre-adaptee.active');
147    const targetCta = document.querySelector('.target-cta');
148    targetCta.href = offreAdapteeActive.getAttribute('data-cta');
149    targetCta.setAttribute("aria-label", targetCta.textContent + ", " + offreAdapteeActive.querySelector('p.text').textContent.trim().toLowerCase());
150}