https://secure.aos.org/Custom/js/modules/navbar-drawer/index.js

1export class NavbarDrawer {
2    constructor() {
3        this.activeItemIndex = 0;
4        this.activeItemTitle = '';
5        this.navbarDrawer = document.querySelector('#navbarDrawer');
6        if (this.navbarDrawer) {
7            this.drawerPanelHeader = this.navbarDrawer.querySelector('.page-navbar-drawer__header');
8            this.drawerPanelHeaderTitle = this.navbarDrawer.querySelector('.page-navbar-drawer__header .title');
9            this.drawerPanels = this.navbarDrawer.querySelectorAll('.mm-panel');
10            this.drawerNavItemsMain = this.navbarDrawer.querySelectorAll('.mm-panel--main .menu-item');
11            this.drawerNavItemsSub = this.navbarDrawer.querySelectorAll('.mm-panel--sub .menu-item.has-child');
12            this.drawerNavLinks = this.navbarDrawer.querySelectorAll('.mm-panel--sub .menu-item > a');
13            this.init();
14        }
15    }
16
17    changeDrawerState() {
18        if (this.activeItemIndex === 0) {
19            this.activeItemTitle = '';
20            this.drawerPanelHeader.classList.add('hidden');
21            this.drawerPanelHeader.classList.remove('active');
22            this.drawerPanelHeaderTitle.innerText = this.activeItemTitle;
23        } else {
24            this.drawerPanelHeader.classList.remove('hidden');
25            this.drawerPanelHeader.classList.add('active');
26            this.drawerPanelHeaderTitle.innerText = this.activeItemTitle;
27        }
28
29        if (this.drawerPanels.length) {
30            this.drawerPanels.forEach(panel => {
31                const index = panel.getAttribute('data-menu-index');
32                if (+index === this.activeItemIndex) {
33                    panel.classList.add('mm-panel--opened');
34                    panel.classList.remove('mm-panel--hidden');
35                } else {
36                    panel.classList.remove('mm-panel--opened');
37                    panel.classList.add('mm-panel--hidden');
38                }
39            })
40        }
41    }
42
43    resetNavbarDrawer() {
44        this.activeItemIndex = 0;
45        this.activeItemTitle = '';
46        this.changeDrawerState();
47        this.drawerNavItemsSub.forEach(item => {
48            item.classList.remove('item-active')
49        })
50    }
51
52    handlePanelHeaderClick() {
53        this.activeItemIndex = 0;
54        this.activeItemTitle = '';
55        this.changeDrawerState()
56    }
57
58    handleNavItemMainClick(index, title) {
59        this.activeItemIndex = index;
60        this.activeItemTitle = title;
61        this.changeDrawerState();
62    }
63
64    handleNavItemSubClick(e) {
65        e.target.classList.toggle('item-active');
66    }
67
68    init = () => {
69        if (this.drawerNavItemsMain.length) {
70            this.drawerNavItemsMain.forEach(item => {
71                const index = item.getAttribute('data-menu-index');
72                const title = item.querySelector('a').innerText;
73                item.addEventListener('click', () => this.handleNavItemMainClick(+index, title));
74            });
75        }
76        if (this.drawerNavItemsSub.length) {
77            this.drawerNavItemsSub.forEach(item => {
78                item.addEventListener('click', (e) => this.handleNavItemSubClick(e));
79            });
80        }
81        if (this.drawerPanelHeader) {
82            this.drawerPanelHeader.addEventListener('click', () => this.handlePanelHeaderClick());
83        }
84        if (this.drawerNavLinks.length) {
85            this.drawerNavLinks.forEach(link => {
86                link.addEventListener('click', (e) => e.stopPropagation());
87            });
88        }
89    };
90}