https://www.wildapricot.com/wp-content/themes/wildapricot/assets/js/mega-menu.js

1/**
2 * Mega Menu JavaScript
3 * This file contains the SVG icons and functionality for the mega menu
4 */
5
6(function() {
7    'use strict';
8
9    function initMegaMenu() {
10        try {
11            // Image paths for mega menu categories
12            const megaMenuImages = {
13                associations: '/wp-content/themes/wildapricot/assets/images/mega-menu/Associations.png',
14                nonprofits: '/wp-content/themes/wildapricot/assets/images/mega-menu/Nonprofits.png',
15                chambers: '/wp-content/themes/wildapricot/assets/images/mega-menu/Chambers.png',
16                clubs: '/wp-content/themes/wildapricot/assets/images/mega-menu/Clubs.png',
17                charities: '/wp-content/themes/wildapricot/assets/images/mega-menu/Charities.png',
18                chapters: '/wp-content/themes/wildapricot/assets/images/mega-menu/Chapters.png'
19            };
20
21            // Insert images into the mega menu
22            try {
23                document.querySelectorAll('.mega-menu-icon').forEach(function(iconContainer) {
24                    try {
25                        const category = iconContainer.dataset.category;
26                        if (megaMenuImages[category]) {
27                            // Create image element with alt text for accessibility
28                            const img = document.createElement('img');
29                            img.src = megaMenuImages[category];
30                            img.alt = category.charAt(0).toUpperCase() + category.slice(1) + ' icon';
31                            img.width = 80;
32                            img.height = 80;
33                            
34                            // Clear the container and append the image
35                            iconContainer.innerHTML = '';
36                            iconContainer.appendChild(img);
37                        }
38                    } catch (error) {
39                        console.warn('Error setting up mega menu icon:', error);
40                    }
41                });
42            } catch (error) {
43                console.warn('Error processing mega menu icons:', error);
44            }
45            
46            // Get mega menu items for event handling
47            const megaMenuItems = document.querySelectorAll('.nav-item.has-mega-menu');
48
49            // Add keyboard accessibility and click handling for mega menu
50            megaMenuItems.forEach(function(item) {
51                try {
52                    const link = item.querySelector('.nav-link');
53                    const megaMenu = item.querySelector('.mega-menu');
54                    
55                    if (link && megaMenu) {
56                        // Toggle mega menu with Enter key
57                        link.addEventListener('keydown', function(e) {
58                            try {
59                                if (e.key === 'Enter' || e.key === ' ') {
60                                    e.preventDefault();
61                                    
62                                    // Toggle the mega menu
63                                    if (megaMenu.style.display === 'block') {
64                                        megaMenu.style.display = 'none';
65                                        link.setAttribute('aria-expanded', 'false');
66                                    } else {
67                                        megaMenu.style.display = 'block';
68                                        link.setAttribute('aria-expanded', 'true');
69                                        
70                                        // Focus the first link in the mega menu
71                                        const firstLink = megaMenu.querySelector('a');
72                                        if (firstLink) {
73                                            firstLink.focus();
74                                        }
75                                    }
76                                }
77                            } catch (error) {
78                                console.warn('Error in mega menu keydown handler:', error);
79                            }
80                        });
81                        
82                        // Close mega menu with Escape key
83                        document.addEventListener('keydown', function(e) {
84                            try {
85                                if (e.key === 'Escape' && megaMenu.style.display === 'block') {
86                                    megaMenu.style.display = 'none';
87                                    link.setAttribute('aria-expanded', 'false');
88                                    link.focus();
89                                }
90                            } catch (error) {
91                                console.warn('Error in escape key handler:', error);
92                            }
93                        });
94                        
95                        // Handle click event - allow navigation to the link's href
96                        link.addEventListener('click', function(e) {
97                            try {
98                                // Don't prevent default - allow the link to navigate
99                                
100                                // Hide any existing dropdown menu
101                                const dropdownMenu = document.querySelector('.dropdown-menu.show');
102                                if (dropdownMenu) {
103                                    dropdownMenu.classList.remove('show');
104                                }
105                            } catch (error) {
106                                console.warn('Error in mega menu click handler:', error);
107                            }
108                        });
109                        
110                        // Close mega menu when clicking outside
111                        document.addEventListener('click', function(e) {
112                            try {
113                                if (!item.contains(e.target) && megaMenu.style.display === 'block') {
114                                    megaMenu.style.display = 'none';
115                                    link.setAttribute('aria-expanded', 'false');
116                                }
117                            } catch (error) {
118                                console.warn('Error in outside click handler:', error);
119                            }
120                        });
121                        
122                        // Handle hover events
123                        item.addEventListener('mouseenter', function() {
124                            try {
125                                megaMenu.style.display = 'block';
126                                link.setAttribute('aria-expanded', 'true');
127                                
128                                // Hide any existing dropdown menu
129                                const dropdownMenu = document.querySelector('.dropdown-menu.show');
130                                if (dropdownMenu) {
131                                    dropdownMenu.classList.remove('show');
132                                }
133                            } catch (error) {
134                                console.warn('Error in mouseenter handler:', error);
135                            }
136                        });
137                        
138                        item.addEventListener('mouseleave', function() {
139                            try {
140                                megaMenu.style.display = 'none';
141                                link.setAttribute('aria-expanded', 'false');
142                            } catch (error) {
143                                console.warn('Error in mouseleave handler:', error);
144                            }
145                        });
146                    }
147                } catch (error) {
148                    console.warn('Error setting up mega menu item:', error);
149                }
150            });
151        } catch (error) {
152            console.warn('Error initializing mega menu:', error);
153        }
154    }
155
156    // Initialize when DOM is ready
157    if (document.readyState === 'loading') {
158        document.addEventListener('DOMContentLoaded', initMegaMenu);
159    } else {
160        initMegaMenu();
161    }
162
163})();