https://www.accademiamoda.it/wp-content/themes/iuad-theme/js/mega-menu.js?ver=1.0.0

1class MegaMenu {
2    constructor() {
3        // Elementi DOM principali
4        this.menu = document.getElementById('iuad-mega-menu');
5        this.toggleButton = document.querySelector('.menu-toggle');
6        this.closeButton = document.querySelector('.close-button');
7        this.menuItems = document.querySelectorAll('.menu-item[data-submenu]');
8        this.backButtons = document.querySelectorAll('.back-button');
9        this.languageSelector = document.querySelector('.language-selector');
10        this.submenuPanels = document.querySelector('.submenu-panels');
11        
12        // Stato
13        this.isOpen = false;
14        this.currentSubmenu = null;
15        
16        if (this.menu && this.toggleButton) {
17            this.init();
18        }
19    }
20
21    init() {
22        // Toggle menu principale
23        this.toggleButton.addEventListener('click', (e) => {
24            e.preventDefault();
25            e.stopPropagation();
26            this.toggleMenu();
27        });
28
29        // Gestione pulsante di chiusura
30        if (this.closeButton) {
31            this.closeButton.addEventListener('click', (e) => {
32                e.preventDefault();
33                e.stopPropagation();
34                this.closeMenu();
35            });
36        }
37
38        // Gestione click sui menu item con submenu
39        this.menuItems.forEach(item => {
40            item.addEventListener('click', (e) => {
41                const link = item.querySelector('a');
42                // Se il click è sul link, lascia che il browser gestisca la navigazione
43                if (e.target === link) {
44                    return;
45                }
46                e.preventDefault();
47                e.stopPropagation();
48                this.openSubmenu(item.dataset.submenu);
49            });
50        });
51
52        // Gestione pulsanti "Torna indietro"
53        this.backButtons.forEach(button => {
54            button.addEventListener('click', (e) => {
55                e.preventDefault();
56                e.stopPropagation();
57                this.closeSubmenu();
58            });
59        });
60
61        // Chiudi menu con tasto ESC
62        document.addEventListener('keydown', (e) => {
63            if (e.key === 'Escape') {
64                if (this.currentSubmenu) {
65                    this.closeSubmenu();
66                } else if (this.isOpen) {
67                    this.closeMenu();
68                }
69            }
70        });
71
72        // Gestione click fuori dal menu per chiuderlo
73        document.addEventListener('click', (e) => {
74            if (this.isOpen && !this.menu.contains(e.target) && !this.toggleButton.contains(e.target)) {
75                this.closeMenu();
76            }
77        });
78
79        // Gestione selettore lingua (se presente)
80        if (this.languageSelector) {
81            this.languageSelector.addEventListener('click', () => {
82                // Implementazione selettore lingua
83            });
84        }
85    }
86
87    toggleMenu() {
88        if (this.isOpen) {
89            this.closeMenu();
90        } else {
91            this.openMenu();
92        }
93    }
94
95    openMenu() {
96        this.menu.classList.remove('hidden');
97        requestAnimationFrame(() => {
98            this.menu.classList.add('is-open');
99        });
100        this.toggleButton.setAttribute('aria-expanded', 'true');
101        document.body.style.overflow = 'hidden';
102        this.isOpen = true;
103    }
104
105    closeMenu() {
106        if (this.currentSubmenu) {
107            this.closeSubmenu();
108        }
109        this.menu.classList.remove('is-open');
110        this.menu.addEventListener('transitionend', () => {
111            if (!this.isOpen) {
112                this.menu.classList.add('hidden');
113            }
114        }, { once: true });
115        this.toggleButton.setAttribute('aria-expanded', 'false');
116        document.body.style.overflow = '';
117        this.isOpen = false;
118    }
119
120    openSubmenu(submenuId) {
121        const submenu = document.getElementById(submenuId);
122        if (!submenu) return;
123
124        if (this.currentSubmenu) {
125            this.closeSubmenu();
126        }
127
128        if (this.submenuPanels) {
129            this.submenuPanels.classList.add('is-active');
130        }
131
132        submenu.classList.add('is-active');
133        const menuItem = document.querySelector(`[data-submenu="${submenuId}"]`);
134        if (menuItem) {
135            menuItem.classList.add('is-active');
136        }
137
138        this.currentSubmenu = submenu;
139    }
140
141    closeSubmenu() {
142        if (!this.currentSubmenu) return;
143
144        if (this.submenuPanels) {
145            this.submenuPanels.classList.remove('is-active');
146        }
147
148        this.currentSubmenu.classList.remove('is-active');
149        const menuItem = document.querySelector(`[data-submenu="${this.currentSubmenu.id}"]`);
150        if (menuItem) {
151            menuItem.classList.remove('is-active');
152        }
153
154        this.currentSubmenu = null;
155    }
156}
157
158// Inizializza il mega menu quando il DOM è caricato
159document.addEventListener('DOMContentLoaded', () => {
160    new MegaMenu();
161});