https://gdekomfort.ru/templates/komfort/resource/js/rscomponent/category.js

1new class Category extends RsJsCore.classes.component {
2    initDropdown() {
3        this.utils.on('click', '.rs-catalog-toggle', (event) => {
4            const catalog = document.querySelector('.js-header-catalog');
5            const needReload = catalog.getAttribute('data-need-reload');
6
7            if (needReload == 'true') {
8                fetch('/full-category/')
9                    .then(response => response.text())
10                    .then(htmlContent => {
11                        const tempDiv = document.createElement('div');
12                        tempDiv.innerHTML = htmlContent;
13
14                        const newContent = tempDiv.querySelector('.js-header-catalog');
15
16                        if (newContent) {
17                            const catalog = document.querySelector('.js-header-catalog');
18                            catalog.innerHTML = newContent.innerHTML;
19                        }
20
21                        this.initDropdownLinks();
22
23                        catalog.setAttribute('data-need-reload', 'false');
24                        document.body.classList.toggle('catalog-toggle');
25
26                        catalog.dispatchEvent(new CustomEvent('new-content', {bubbles: true}));
27                    })
28                    .catch(error => {
29                        console.error('Ошибка при загрузке контента:', error);
30                    });
31            } else {
32                document.body.classList.toggle('catalog-toggle');
33            }
34        });
35
36
37        this.initDropdownLinks();
38    }
39
40    initDropdownLinks() {
41        let timeoutId;
42
43        const headerCatalogItems = document.querySelectorAll('.header-catalog__first-item');
44
45        headerCatalogItems.forEach(item => {
46            const link = item.querySelector('a');
47
48            const handleMouseEnter = () => {
49                clearTimeout(timeoutId);
50
51                timeoutId = setTimeout(() => {
52                    item.classList.add('active');
53                    item.parentNode.querySelectorAll('.header-catalog__first-item').forEach(sibling => {
54                        if (sibling !== item) {
55                            sibling.classList.remove('active');
56                        }
57                    });
58                }, 150);
59            };
60
61            item.addEventListener('mouseenter', handleMouseEnter);
62
63            if (link) {
64                link.addEventListener('mouseenter', handleMouseEnter);
65            }
66        });
67    }
68
69    initCatalogCategory() {
70        document.querySelectorAll('.rs-catalog-nvigation-toggle').forEach(function (toggleButton) {
71            toggleButton.addEventListener('click', function () {
72                let filterGroup = this.closest('.rs-catalog-nvigation');
73                if (filterGroup) {
74                    let filterGroupInner = filterGroup.querySelector('.rs-catalog-nvigation-inner');
75                    if (filterGroupInner) {
76                        if (!filterGroup.classList.contains('active')) {
77                            filterGroup.classList.add('active');
78                            filterGroupInner.style.height = 'auto';
79                            let height = filterGroupInner.clientHeight + 'px';
80                            filterGroupInner.style.height = '0px';
81
82                            filterGroupInner.offsetHeight;
83                            filterGroupInner.style.height = height;
84
85                            setTimeout(function () {
86                                filterGroupInner.style.height = 'auto';
87                            }, 300);
88                        } else {
89                            filterGroupInner.style.height = filterGroupInner.clientHeight + 'px';
90
91                            filterGroupInner.offsetHeight;
92
93                            filterGroupInner.style.height = '0px';
94                            filterGroup.addEventListener('transitionend', function () {
95                                filterGroup.classList.remove('active');
96                            }, { once: true });

97                        }
98                    }
99                }
100            });
101        });
102    }
103
104    onDocumentReady() {
105        this.initDropdown();
106        this.initCatalogCategory();
107    }
108};