https://www.batteriedeportable.com/js/burger.js

1document.addEventListener("DOMContentLoaded", function() {
2    const body = document.querySelector("body");
3    const mask = document.getElementById("mask");
4    const burgerButton = document.getElementById("burger-side-menu");
5    const menuRoot = document.getElementById("bdp-menu-root");
6    const menuOriginalParent = menuRoot ? menuRoot.parentElement : null;
7    const menuOriginalNext = menuRoot ? menuRoot.nextSibling : null;
8    const desktopMenuMedia = window.matchMedia("(min-width: 1040px)");
9
10    let blurOverlay = document.getElementById("bdp-blur-overlay");
11    if (!blurOverlay) {
12        blurOverlay = document.createElement("div");
13        blurOverlay.id = "bdp-blur-overlay";
14        document.body.appendChild(blurOverlay);
15    }
16
17    function loadDeferredMenuImages(container) {
18        if (!container) return;
19
20        container.querySelectorAll("img[data-src]").forEach(function(image) {
21            const source = image.getAttribute("data-src");
22            if (!source) return;
23            image.src = source;
24            image.removeAttribute("data-src");
25            image.classList.remove("bdp-menu-deferred-image");
26        });
27    }
28
29    function closeMenu() {
30        if (!menuRoot || !mask) return;
31        menuRoot.classList.add("close");
32        body.classList.remove("no-scroll");
33        mask.classList.remove("open");
34        setTimeout(function() {
35            menuRoot.classList.remove("open");
36            menuRoot.classList.remove("close");
37            restoreMenuPosition();
38        }, 300);
39    }
40
41    function restoreMenuPosition() {
42        if (!menuRoot || !menuOriginalParent || menuRoot.parentElement === menuOriginalParent) return;
43
44        if (menuOriginalNext && menuOriginalNext.parentElement === menuOriginalParent) {
45            menuOriginalParent.insertBefore(menuRoot, menuOriginalNext);
46        } else {
47            menuOriginalParent.appendChild(menuRoot);
48        }
49    }
50
51    function openMenu() {
52        if (!menuRoot || !mask) return;
53        if (menuRoot.parentElement !== body) {
54            body.appendChild(menuRoot);
55        }
56        resetMobilePanels();
57        menuRoot.classList.remove("close");
58        menuRoot.classList.add("open");
59        body.classList.add("no-scroll");
60        mask.classList.add("open");
61    }
62
63    function resetMobilePanels() {
64        if (!menuRoot || desktopMenuMedia.matches) return;
65
66        menuRoot.querySelectorAll(".bdp-menu-l2-item").forEach(function(item) {
67            item.classList.remove("is-active");
68        });
69
70        menuRoot.querySelectorAll(".bdp-menu-l2-link").forEach(function(link) {
71            link.classList.remove("is-active");
72        });
73
74        menuRoot.querySelectorAll(".bdp-menu-panel-mobile").forEach(function(panel) {
75            panel.classList.remove("is-active");
76        });
77    }
78
79    if (burgerButton) {
80        burgerButton.addEventListener("click", function(event) {
81            event.preventDefault();
82            if (!desktopMenuMedia.matches) {
83                openMenu();
84            }
85        });
86    }
87
88    if (mask) {
89        mask.addEventListener("click", closeMenu);
90    }
91
92    function setupUnifiedMenu() {
93        if (!menuRoot) return;
94
95        if (desktopMenuMedia.matches) {
96            menuRoot.querySelectorAll(".bdp-menu-l1-item").forEach(function(i) {
97                i.classList.remove("is-active");
98            });
99        }
100
101        const closeButton = menuRoot.querySelector(".bdp-menu-close");
102        if (closeButton) {
103            closeButton.addEventListener("click", closeMenu);
104        }
105
106        const l1Items = menuRoot.querySelectorAll(".bdp-menu-l1-item");
107        let l1CloseTimer = null;
108
109        l1Items.forEach(function(item) {
110            const link = item.querySelector(".bdp-menu-l1-link");
111            if (!link) return;
112            const l1Key = item.getAttribute("data-menu-l1");
113            const opensOnHover = l1Key === "batterie" || l1Key === "chargeur" || l1Key === "accessoire";
114
115            function openDesktopMega() {
116                if (!desktopMenuMedia.matches || !opensOnHover) return;
117                if (l1CloseTimer) {
118                    clearTimeout(l1CloseTimer);
119                    l1CloseTimer = null;
120                }

121                l1Items.forEach(function(other) { other.classList.remove("is-active"); });
122                item.classList.add("is-active");
123                loadDeferredMenuImages(item.querySelector(".bdp-menu-panel-desktop.is-active"));
124                blurOverlay.classList.add("is-active");
125            }
126
127            function closeDesktopMega() {
128                if (!desktopMenuMedia.matches || !opensOnHover) return;
129                if (l1CloseTimer) clearTimeout(l1CloseTimer);
130                l1CloseTimer = setTimeout(function() {
131                    item.classList.remove("is-active");
132                    if (!menuRoot.querySelector(".bdp-menu-l1-item.is-active")) {
133                        blurOverlay.classList.remove("is-active");
134                    }
135                    l1CloseTimer = null;
136                }, 180);
137            }
138
139            item.addEventListener("mouseenter", openDesktopMega);
140            item.addEventListener("mouseleave", closeDesktopMega);
141
142            link.addEventListener("click", function(event) {
143                if (desktopMenuMedia.matches && opensOnHover) return;
144
145                event.preventDefault();
146                const isActive = item.classList.contains("is-active");
147                l1Items.forEach(function(other) { other.classList.remove("is-active"); });
148                if (!isActive) {
149                    item.classList.add("is-active");
150                } else {
151                    blurOverlay.classList.remove("is-active");
152                }
153            });
154        });
155
156        document.addEventListener("click", function(event) {
157            if (desktopMenuMedia.matches && !menuRoot.contains(event.target)) {
158                l1Items.forEach(function(item) { item.classList.remove("is-active"); });
159                blurOverlay.classList.remove("is-active");
160            }
161        });
162
163        const l2Links = menuRoot.querySelectorAll(".bdp-menu-l2-link");
164        l2Links.forEach(function(link) {
165            link.addEventListener("click", function(event) {
166                if (!desktopMenuMedia.matches) {
167                    event.preventDefault();
168                    toggleMobilePanel(link);
169                } else {
170                    event.preventDefault();
171                    activatePanel(link);
172                }
173            });
174        });
175    }
176
177    function toggleMobilePanel(link) {
178        const item = link.closest(".bdp-menu-l2-item");
179        const mega = link.closest(".bdp-mega");
180        if (!item || !mega) return;
181
182        const shouldOpen = !item.classList.contains("is-active");
183
184        mega.querySelectorAll(".bdp-menu-l2-item").forEach(function(other) {
185            other.classList.remove("is-active");
186            const otherLink = other.querySelector(".bdp-menu-l2-link");
187            const otherPanel = other.querySelector(".bdp-menu-panel-mobile");
188            if (otherLink) otherLink.classList.remove("is-active");
189            if (otherPanel) otherPanel.classList.remove("is-active");
190        });
191
192        if (shouldOpen) {
193            item.classList.add("is-active");
194            link.classList.add("is-active");
195            const panel = item.querySelector(".bdp-menu-panel-mobile");
196            if (panel) {
197                loadDeferredMenuImages(panel);
198                panel.classList.add("is-active");
199            }
200        }
201    }
202
203    function activatePanel(link) {
204        const panelId = link.getAttribute("data-menu-panel");
205        const mega = link.closest(".bdp-mega");
206        if (!panelId || !mega) return;
207
208        mega.querySelectorAll(".bdp-menu-l2-link").forEach(function(other) {
209            other.classList.toggle("is-active", other === link);
210        });
211
212        mega.querySelectorAll(".bdp-menu-l2-item").forEach(function(item) {
213            item.classList.toggle("is-active", item.contains(link));
214        });
215
216        mega.querySelectorAll(".bdp-menu-panel-desktop").forEach(function(panel) {
217            const isActive = panel.getAttribute("data-menu-panel-id") === panelId;
218            panel.classList.toggle("is-active", isActive);
219            if (isActive) loadDeferredMenuImages(panel);
220        });
221    }
222
223
224    setupUnifiedMenu();
225
226    window.addEventListener("resize", function() {
227        if (desktopMenuMedia.matches) {
228            closeMenu();
229        }
230    });
231});