https://www.hotel-arbois.com/js/sites/hotel_des_messageries/main.js?v=292

1document.addEventListener('DOMContentLoaded', function () {
2    $('select').material_select();
3
4    elementVisible();
5    sensScroll();
6    scrollGrab();
7    langues();
8    activeMereMenu();
9    if (document.querySelector('.bouton--invisible')) {
10        boutonGaleriePhotos();
11    }
12    blocCouleur();
13    if (document.querySelector('.popup')) {
14        setTimeout(function () {
15            popup();
16        }, 5000);
17    }
18
19    if (document.querySelector('.overlayAvis')) {
20        sliderAvis();
21    }
22});
23
24const sliderAvis = () => {
25    const containerAvis = document.getElementById('container_avis');
26
27    if (containerAvis) {
28        fetch('../slideravis', {
29            method: 'POST',
30        })
31            .then(response => response.text())
32            .then(data => {
33                containerAvis.innerHTML = data;
34
35                const swiper = new Swiper('.swiper', {
36                    loop: true,
37                    spaceBetween: 20,
38                    slidesPerView: 1,
39
40                    // Responsive
41                    breakpoints: {
42                        1024: {
43                            slidesPerView: 3,
44                        },
45                        600: {
46                            slidesPerView: 2,
47                        },
48                    },
49                    pagination: {
50                        el: '.swiper-pagination',
51                        clickable: true,
52                    },
53                    autoplay: {
54                        delay: 5000,
55                        disableOnInteraction: false,
56                    },
57                });
58            })
59            .catch(error => console.error('Error fetching slider data:', error));
60    }
61};
62
63const showOverlayAvis = () => {
64    const overlayAvis = document.querySelector('.overlayAvis');
65    if (overlayAvis) {
66        overlayAvis.style.display = 'flex';
67
68        // Animation de fondu en JavaScript pur
69        overlayAvis.style.opacity = 0; // Initialement transparent
70        overlayAvis.style.transition = 'opacity 0.5s'; // Animation de fondu sur 0.5s
71        requestAnimationFrame(() => {
72            overlayAvis.style.opacity = 1; // Animation de l'opacité vers 1
73        });
74    }
75};
76
77const popup = () => {
78    const fermerPopup = document.querySelector('.popup__close');
79    const popup = document.querySelector('.popup');
80
81    document.body.classList.add('active');
82    popup.classList.add('active');
83
84    if (fermerPopup) {
85        fermerPopup.addEventListener('click', () => {
86            popup.style.display = 'none';
87            document.body.classList.remove('active');
88        });
89    }
90};
91
92const blocCouleur = () => {
93    document.querySelectorAll('.bloc').forEach(bloc => {
94        // On ajoute un container pour gérer le fond de couleur en 100% + le motif
95        const container_bloc = document.createElement('div');
96        container_bloc.classList.add('container_bloc');
97        bloc.parentNode.insertBefore(container_bloc, bloc);
98        container_bloc.appendChild(bloc);
99
100        bloc.classList.forEach(classe => {
101            // Si la classe motif est présente, on l'ajoute au parent
102            if (classe.includes('motif')) {
103                container_bloc.classList.add(classe);
104            }
105        });
106    });
107};
108
109const activeMereMenu = () => {
110    // Classe active sur la categ mere
111    document.querySelectorAll('.sous_menu.active').forEach(item => {
112        item.closest('.menu-item').classList.add('active');
113    });
114};
115
116const boutonGaleriePhotos = () => {
117    // On affiche le bouton 'Voir les photos', s'il y a un élément .gallerie de l'admin et on ajoute une ancre
118    let bouton = document.querySelector('.bouton--invisible');
119    let galerie = document.querySelector('.gallerie');
120    galerie.setAttribute('id', 'galerie');
121    bouton.setAttribute('href', '#galerie');
122    bouton.classList.remove('bouton--invisible');
123};
124
125const langues = () => {
126    document.querySelector('.header__langues_bouton').addEventListener('click', () => {
127        document.querySelector('.header__langues_nav').classList.toggle('active');
128    });
129};
130
131const fermeLangues = () => {
132    document.querySelector('.header__langues_nav').classList.remove('active');
133};
134
135const scrollGrab = () => {
136    const categ = document.querySelector('.categ_soeurs');
137    if (categ) {
138        categ.style.cursor = 'grab';
139
140        let pos = { top: 0, left: 0, x: 0, y: 0 };
141
142        const mouseDownHandler = function (e) {
143            categ.style.cursor = 'grabbing';
144            categ.style.userSelect = 'none';
145
146            pos = {
147                left: categ.scrollLeft,
148                top: categ.scrollTop,
149                // Get the current mouse position
150                x: e.clientX,
151                y: e.clientY,
152            };
153
154            document.addEventListener('mousemove', mouseMoveHandler);
155            document.addEventListener('mouseup', mouseUpHandler);
156        };
157
158        const mouseMoveHandler = function (e) {
159            // How far the mouse has been moved
160            const dx = e.clientX - pos.x;
161            const dy = e.clientY - pos.y;
162
163            // Scroll the element
164            categ.scrollTop = pos.top - dy;
165            categ.scrollLeft = pos.left - dx;
166
167            // On ajoute ce if pour pouvoir cliquer sur le lien une seule fois
168            if (dx != 0) {
169                document.querySelectorAll('.categ_soeurs__item').forEach(lien => {
170                    lien.style.pointerEvents = 'none';
171                });
172            }
173        };
174
175        const mouseUpHandler = function () {
176            categ.style.cursor = 'grab';
177            categ.style.removeProperty('user-select');
178
179            document.querySelectorAll('.categ_soeurs__item').forEach(lien => {
180                lien.style.pointerEvents = 'inherit';
181            });
182
183            document.removeEventListener('mousemove', mouseMoveHandler);
184            document.removeEventListener('mouseup', mouseUpHandler);
185        };
186
187        // Attach the handler
188        categ.addEventListener('mousedown', mouseDownHandler);
189    }
190};
191
192const burger = () => {
193    document.querySelector('.header__burger').classList.toggle('active');
194    document.querySelector('.header__overlay').classList.toggle('active');
195    document.querySelector('header').classList.toggle('active');
196    document.querySelector('body').classList.toggle('active');
197    fermeLangues();
198};
199
200const handleIntersect = entries => {

201    entries.forEach(entry => {
202        if (entry.isIntersecting) {
203            entry.target.classList.add('fadeIn');
204        }
205    });
206};
207
208const elementVisible = () => {
209    // On anime si element visible on scroll
210    const options = {
211        rootMargin: '-120px 0px',
212        threshold: 0,
213    };
214    const observer = new IntersectionObserver(handleIntersect, options);
215
216    const blocs = document.querySelectorAll('.group_cols, .categories');
217    blocs.forEach(bloc => {
218        observer.observe(bloc);
219    });
220};
221
222const sensScroll = () => {
223    let lastScrollTop = 0;
224
225    window.addEventListener(
226        'scroll',
227        function () {
228            fermeLangues();
229            let scroll_top = window.scrollY || document.documentElement.scrollTop;
230            if (scroll_top > lastScrollTop && scroll_top > 100) {
231                document.querySelector('header').classList.add('header--scroll');
232            } else {
233                document.querySelector('header').classList.remove('header--scroll');
234            }
235            lastScrollTop = scroll_top <= 0 ? 0 : scroll_top; // For Mobile or negative scrolling
236        },
237        false
238    );
239};
240
241const toggleCustomModal = (roomId = null) => {
242    var langue = window.langueMisterBooking || 'francais';
243    var url = 'https://www.secure-direct-hotel-booking.com/module_booking_engine/index.php?id_etab=83129c4c02a21c18655f7eea8134fcf3&langue=' + langue;
244    if (roomId) { url += '&id_chambre_filtre=' + encodeURIComponent(roomId); }
245    window.open(url, '_blank', 'noopener');
246};
247
248const toggleComparatorMB = () => {
249    document.querySelector('.container_comparatorMB').classList.toggle('affiche');
250};