https://www.mgp.fr/modules/internet-templates/javascript/composants/mainMenu.js

1export default function MainMenu() {
2    document.querySelectorAll('.main-menu--parent--1.has-children').forEach((hasChildren) => {
3        const id = hasChildren.id;
4        const parents1 = document.querySelectorAll('.main-menu--parent--1');
5        const parents2 = document.querySelectorAll('.main-menu--parent--2');
6        const childs = document.querySelectorAll('.main-menu--subitems')
7
8        hasChildren.querySelector('.toggleable').addEventListener('click', () => {
9            const child = hasChildren.querySelector('[aria-labelledby="' + id + '"]');
10
11
12            if (hasChildren.classList.contains('open')) {
13                if (window.innerWidth >= 1064) {
14                    document.querySelector('.wrapper-menu').classList.remove('wrapper-menu--opened')
15                }
16                hasChildren.classList.remove('open')
17                removeClassOnAll(parents1, 'open');
18                removeIconsOnAll(parents1);
19                removeClassOnAll(parents2, 'open');
20                removeClassOnAll(childs, 'open');
21                hasChildren.querySelector('button').setAttribute('aria-expanded', 'false');
22            } else {
23                removeClassOnAll(parents1, 'open');
24                removeIconsOnAll(parents1);
25                removeClassOnAll(parents2, 'open');
26                removeAriaOnAll(parents1);
27                removeClassOnAll(childs, 'open');
28                hasChildren.classList.add('open')
29                const icon = hasChildren.querySelector('i');
30                if(icon.classList.contains('icon-chevron-bottom')) {
31                    icon.classList.remove('icon-chevron-bottom', 'bleu');
32                    icon.classList.add('icon-chevron-top', 'fushia');
33                }
34                hasChildren.querySelector('button').setAttribute('aria-expanded', 'true');
35                child.classList.add('open')
36                if (window.innerWidth >= 1064) {
37                    document.querySelector('.wrapper-menu').classList.add('wrapper-menu--opened')
38                }
39            }
40        })
41    })
42
43    document.querySelectorAll('.main-menu--parent--2.has-children').forEach((hasChildren) => {
44        const id = hasChildren.id;
45        const parents = document.querySelectorAll('.main-menu--parent--2');
46        const childrenLvl2 = document.querySelectorAll('.main-menu--subitems--2');
47        const childrenLvl3 = document.querySelectorAll('.main-menu--subitems--3');
48
49        hasChildren.querySelector('.toggleable').addEventListener('click', () => {
50            // const childsLvl2 = Array.from(hasChildren.children).filter(elt => elt.classList.contains('main-menu--subitems'));
51            const childsLvl2 = hasChildren.querySelectorAll('.main-menu--subitems--2');
52            const childsLvl3 = hasChildren.querySelectorAll('.main-menu--subitems--3');
53
54            if (hasChildren.classList.contains('open')) {
55                // removeClassOnAll(childrenLvl3, 'open')
56                removeClassOnAll(childrenLvl2, 'open')
57                removeClassOnAll(parents, 'open');
58            } else {
59                removeClassOnAll(childrenLvl2, 'open')
60                // removeClassOnAll(childrenLvl3, 'open')
61                removeClassOnAll(parents, 'open');
62                hasChildren.classList.add('open')
63                childsLvl2.forEach(elt => elt.classList.add('open'));
64                childsLvl3.forEach(elt => elt.classList.add('open'));
65            }
66
67        })
68
69    })
70
71    document.querySelector('.menu-overlay').addEventListener('click', () => {
72        let openedChildren = document.querySelectorAll('.main-menu--subitems--2.open');
73        if(openedChildren.length !== 0) {
74            // closeChildren(openedChildren);
75            openedChildren.forEach(elt => elt.classList.remove('open'));
76            setTimeout(() => {
77                openedChildren = document.querySelectorAll('.main-menu--parent.has-children.open');
78                closeChildren(openedChildren);
79            }, 500)
80        } else {
81            openedChildren = document.querySelectorAll('.main-menu--parent.has-children.open');
82            closeChildren(openedChildren);
83        }
84
85    })
86}
87
88function removeIconsOnAll(elem) {
89    for (let i = 0; i < elem.length; i++) {
90        const icon = elem[i].querySelector('i');
91        icon.classList.remove('icon-chevron-top', 'fushia');
92        icon.classList.add('icon-chevron-bottom', 'bleu');
93    }
94}
95
96function closeChildren(children) {

97    children.forEach( (openedChild) => {
98        const id = openedChild.id;
99        if(id != null){
100            const child = openedChild.querySelector('[aria-labelledby="' + id + '"]');
101            if(child != null) {
102                child.classList.remove('open');
103            }
104        }
105        if (window.innerWidth >= 1064) {
106            document.querySelector('.wrapper-menu').classList.remove('wrapper-menu--opened')
107        }
108        const icon = openedChild.querySelector('i');
109
110        if(icon.classList.contains('icon-chevron-top')) {
111            icon.classList.remove('icon-chevron-top', 'fushia');
112            icon.classList.add('icon-chevron-bottom', 'bleu');
113        }
114        openedChild.classList.remove('open')
115        openedChild.querySelector('button').setAttribute('aria-expanded', 'false');
116
117    })
118}
119
120function removeClassOnAll(elem, classe) {
121    for (var i = 0; i < elem.length; i++) {
122        elem[i].classList.remove(classe)
123    }
124}
125
126function removeAriaOnAll(elem) {
127    for (var i = 0; i < elem.length; i++) {
128        elem[i].setAttribute("aria-expanded", "false");
129    }
130}
131
132export function scrollMenu() {
133    const revealElement = document.querySelectorAll(".wrapper-menu").forEach(elt => {
134        const scrollPosition = window.scrollY
135        if (scrollPosition >= 100) {
136            elt.classList.add("isscrolled")
137            // revealElement[i].classList.remove("isscrolled")
138        } else if (scrollPosition < 1) {
139            elt.classList.remove("isscrolled")
140        }
141    });
142}
143
144export function burgerMenu() {
145    document.querySelectorAll('.wrapper-menu .burger button, .wrapper-menu .burger label ').forEach(elt => {
146        elt.addEventListener('click', function () {
147            document.querySelector('.wrapper-menu').classList.toggle('wrapper-menu--opened')
148            document.querySelector('.wrapper-menu .nav').classList.toggle('opened')
149        })
150    });
151}