https://rondell.ru/js/menu.js?495987

1const renderMenu = () => {
2    let menuBlock = document.querySelector('.catalogue-menu');
3    let menuSecondLevel = document.querySelector('.menu-second-level')
4
5
6    /*рендерит html для блоков 1 уровня*/
7    const renderMenuFirstLevelBlocks = (elemFirstLevel, elemsSecondLevel) => {
8        const item = {
9            id: elemFirstLevel.id,
10            name: elemFirstLevel.name,
11            category: elemFirstLevel.alias,
12        }
13
14        let block = document.createElement('li');
15
16        block.innerText = item.name;
17
18        block.setAttribute('data-id', item.id);
19        menuBlock.append(block);
20
21        block.addEventListener('mouseenter', () => {
22            if(block.classList.contains('active')) {
23                return false;
24            } else {
25                menuBlock.querySelectorAll('li').forEach(el=> el.classList.remove('active'))
26                block.classList.add('active');
27                showSecondLevelMenu(item.id, item.category, elemsSecondLevel)
28            }
29        });
30    }
31
32
33    /*рендерит html для блоков 2 уровня*/
34    const renderMenuSecondLevelBlocks = (firstLevelID, firstLevelCategory, secondLevelElems) => {
35        let menuSecondInnerBlock = document.createElement('div');
36        menuSecondInnerBlock.classList.add('inner');
37
38        let menuSecondImage = document.createElement('div');
39        menuSecondImage.classList.add('preview');
40        let peviewImage = document.createElement('img');
41        peviewImage.setAttribute('src', `//static.rondell.ru/data/menu/catalogue-previews/${firstLevelID}.webp`);
42        menuSecondImage.append(peviewImage);
43
44        let menuSecondItems = document.createElement('div');
45        menuSecondItems.classList.add('items');
46
47        let step = 10;
48
49        for(let i = 0; i <= secondLevelElems.length; i+=10) {
50            let categoryInnerBlock = document.createElement('div');
51            categoryInnerBlock.classList.add('category-block');
52

53            secondLevelElems.forEach((elem, index) => {
54                if(index >= i && index < (step+i)) {
55                    let link = document.createElement('a');
56                    link.setAttribute('href', `/catalog/${firstLevelCategory}/${elem['alias']}/`);
57                    link.innerText = elem['name'];
58                    categoryInnerBlock.append(link);
59                }
60            })
61
62            menuSecondItems.append(categoryInnerBlock);
63        }
64
65
66        menuSecondInnerBlock.append(menuSecondItems);
67        menuSecondInnerBlock.append(menuSecondImage);
68        menuSecondLevel.querySelector('.wrapper').append(menuSecondInnerBlock);
69
70    }
71
72
73    /*показ меню 2 уровня по наведению*/
74    const showSecondLevelMenu = (id, firstLevelCategory, secondLevelElems) => {
75        menuSecondLevel.querySelector('.wrapper').innerHTML = '';
76        menuSecondLevel.classList.add('active');
77        menuSecondLevel.setAttribute('data-id', id);
78
79        renderMenuSecondLevelBlocks(id, firstLevelCategory, secondLevelElems);
80
81        let secondLevelLinks = menuSecondLevel.querySelectorAll('a');
82
83        secondLevelLinks.forEach((el) => {
84            el.addEventListener('mouseenter', (e) => {
85                secondLevelLinks = menuSecondLevel.querySelectorAll('a');
86                secondLevelLinks.forEach((elem) => elem.classList.add('gray'));
87
88                if(e.target.classList.contains('gray')) {
89                    e.target.classList.remove('gray');
90                    e.target.classList.add('hovered');
91                }
92            })
93
94            el.addEventListener('mouseout', () => {
95                secondLevelLinks = menuSecondLevel.querySelectorAll('a');
96                secondLevelLinks.forEach((elem) => elem.classList.remove('gray', 'hovered'));
97            })
98        })
99    }
100
101
102    /*скрыть меню 2 уровня*/
103    const hideSecondLevelMenu = () => {
104        menuSecondLevel.classList.remove('active');
105        menuSecondLevel.removeAttribute('data-id');
106        menuBlock.querySelectorAll('li').forEach((el) => el.classList.remove('active'));
107    }
108
109
110    try {
111        fetch('/main/getmenu',)
112            .then((response) => response.json())
113            .then((json) => {
114                json.forEach((el) => {
115                    renderMenuFirstLevelBlocks(el["first_level"], el["second_level"]);
116                })
117
118                document.addEventListener('mouseover', (e) => {
119                    if(e.target.closest('.catalogue-menu') || e.target.closest('.menu-second-level')) {
120                        return false;
121                    } else {
122                        hideSecondLevelMenu();
123                    }
124
125                })
126            })
127    } catch (e) {
128        console.log(e.message)
129    }
130}
131
132const renderMobileMenu = () => {
133    let mobileMenu = document.querySelector('.mobile-menu');
134    let openMenuBtn = document.querySelector('button.menu-toggler');
135    let closeMenuBtn = document.querySelector('button.close-btn');
136
137    try {
138        fetch('/main/getmenu',)
139            .then((response) => response.json())
140            .then((json) => {
141                const renderInnerContent = (elem) => {
142                    let block = document.createElement('li')
143                    let button = document.createElement('button');
144                    button.setAttribute('type', 'button');
145                    button.classList.add('inner-content-toggler');
146                    button.innerText = elem['first_level']['name'];
147                    let selectBlock = document.createElement('div');
148                    selectBlock.classList.add('catalogue-block');
149                    let innerList = document.createElement('ul');
150                    let goBackButton = document.createElement('li');
151                    goBackButton.innerHTML = `<button type='button' class='go-back-btn'>Назад</button>`;
152
153                    innerList.append(goBackButton);
154
155                    elem['second_level'].forEach((el) => {
156                        let block = document.createElement('li');
157                        block.innerHTML = `<a href="/catalog/${elem['first_level']['alias']}/${el["alias"]}/">${el["name"]}</a>`;
158                        innerList.append(block)
159                    })
160
161                    selectBlock.append(innerList)
162
163                    block.append(button);
164                    block.append(selectBlock);
165                    mobileMenu.append(block);
166                }
167
168                const renderMenuGreyLinks = () => {
169                    let li = document.createElement('li');
170                    li.classList.add('grey-links');
171                    li.innerHTML = '<a href="/about-rondell/">О КОМПАНИИ</a><a href="/services/">Поддержка</a><a href="/retsepty/">Рецепты</a>';
172                    mobileMenu.append(li);
173                }
174
175                const clickToOpenCatalogueGroups = (el) => {
176                    el.parentElement.querySelector('.catalogue-block').classList.add('active');
177                    el.parentElement.querySelector('.go-back-btn').addEventListener('click', ()=>el.parentElement.querySelector('.catalogue-block').classList.remove('active'));
178                }
179
180                json.forEach((elem) =>  renderInnerContent(elem));
181                renderMenuGreyLinks();
182
183                openMenuBtn.addEventListener('click', () => mobileMenu.classList.add('active'));
184                closeMenuBtn.addEventListener('click', () => mobileMenu.classList.remove('active'));
185

186                document.querySelectorAll('button.inner-content-toggler').forEach((el) => el.addEventListener('click',() => clickToOpenCatalogueGroups(el)));
187            })
188    } catch (e) {
189        console.log(e.message)
190    }
191}
192
193document.addEventListener('DOMContentLoaded', () => {
194    if(screen.width > 992) {
195        renderMenu();
196    } else {
197        renderMobileMenu();
198    }
199
200})