https://afrika21.ru/templates/ushop/js/site.js

1document.addEventListener('DOMContentLoaded', function(){
2    var headerSticky = document.getElementById('headerSticky');
3    var scrollTopEl = document.getElementById('scroll-top');
4    var btnCatalog = document.getElementById('btnCatalog');
5    var catMenu = document.getElementById('catalogMenu');
6    var catOverlay = document.getElementById('catOverlay');
7
8    // sticky header shadow + scroll-top
9    window.addEventListener('scroll', function(){
10        var y = window.scrollY || document.documentElement.scrollTop;
11        if (headerSticky) headerSticky.classList.toggle('scrolled', y > 4);
12        if (scrollTopEl) scrollTopEl.classList.toggle('visible', y > 400);
13    });
14    if (scrollTopEl) scrollTopEl.addEventListener('click', function(){ window.scrollTo({top:0,behavior:'smooth'}); });
15
16    // catalog menu open/close
17    function openCat(){
18        if(catMenu){ catMenu.style.display='block'; catMenu.classList.add('open'); }
19        if(catOverlay){ catOverlay.style.display='block'; catOverlay.classList.add('open'); }
20        if(btnCatalog) btnCatalog.classList.add('active');
21    }
22    function closeCat(){
23        if(catMenu){ catMenu.style.display='none'; catMenu.classList.remove('open'); }
24        if(catOverlay){ catOverlay.style.display='none'; catOverlay.classList.remove('open'); }
25        if(btnCatalog) btnCatalog.classList.remove('active');
26    }
27
28    if (btnCatalog) btnCatalog.addEventListener('click', function(e){
29        e.preventDefault();
30        e.stopPropagation();
31        var isOpen = (catMenu.style.display === 'block');
32        if (isOpen) { closeCat(); } else { openCat(); }
33    });
34    if (catMenu) catMenu.addEventListener('click', function(e){ e.stopPropagation(); });
35    if (catOverlay) catOverlay.addEventListener('click', closeCat);
36    document.addEventListener('click', closeCat);
37    document.addEventListener('keydown', function(e){ if(e.key === 'Escape') closeCat(); });
38
39    // hover panels in catalog menu
40    // var cmCats = document.querySelectorAll('.catalog-menu__cat');
41    // var cmPanels = document.querySelectorAll('.catalog-menu__panel');
42    // for (var idx = 0; idx < cmCats.length; idx++) {
43    //     (function(cat){
44    //         cat.addEventListener('mouseenter', function(){
45    //             var i = cat.getAttribute('data-i');
46    //             for (var j = 0; j < cmCats.length; j++) cmCats[j].classList.remove('active');
47    //             cat.classList.add('active');
48    //             for (var k = 0; k < cmPanels.length; k++) {
49    //                 if (cmPanels[k].getAttribute('data-i') === i) cmPanels[k].classList.add('active');
50    //                 else cmPanels[k].classList.remove('active');
51    //             }
52    //         });
53    //     })(cmCats[idx]);
54    // }
55    // hover/tap panels in catalog menu
56    var cmCats = document.querySelectorAll('.catalog-menu__cat');
57    var cmPanels = document.querySelectorAll('.catalog-menu__panel');
58
59    var cmSupportsHover = window.matchMedia && window.matchMedia('(hover: hover) and (pointer: fine)').matches;
60
61    function cmActivate(cat) {
62        var i = cat.getAttribute('data-i');
63        for (var j = 0; j < cmCats.length; j++) cmCats[j].classList.remove('active');
64        cat.classList.add('active');
65        for (var k = 0; k < cmPanels.length; k++) {
66            if (cmPanels[k].getAttribute('data-i') === i) cmPanels[k].classList.add('active');
67            else cmPanels[k].classList.remove('active');
68        }
69    }
70
71    for (var idx = 0; idx < cmCats.length; idx++) {
72        (function (cat) {
73            if (cmSupportsHover) {
74                cat.addEventListener('mouseenter', function () {
75                    cmActivate(cat);
76                });
77            } else {
78                cat.addEventListener('click', function (e) {
79                    // first tap: just open the submenu, don't follow the link yet
80                    if (!cat.classList.contains('active')) {
81                        e.preventDefault();
82                        cmActivate(cat);
83                    }
84                    // second tap on an already active item: let the link navigate
85                });
86            }
87        })(cmCats[idx]);
88    }
89});