upskill-event-manager/assets/js/hvac-menu-system.js

/**
 * HVAC Menu System JavaScript
 * Handle dropdown interactions and mobile menu behavior
 */

(function($) {
    'use strict';
    
    /**
     * Initialize menu system
     */
    function initHVACMenu() {
        const $menu = $('.hvac-trainer-menu');
        
        if (!$menu.length) {
            return;
        }
        
        // Handle dropdown toggles
        handleDropdownToggles($menu);
        
        // Handle outside clicks to close dropdowns
        handleOutsideClicks($menu);
        
        // Handle keyboard navigation
        handleKeyboardNavigation($menu);
        
        // Highlight current page
        highlightCurrentPage($menu);
    }
    
    /**
     * Handle dropdown toggle clicks
     */
    function handleDropdownToggles($menu) {
        $menu.find('.menu-toggle').on('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            
            const $menuItem = $(this).closest('.menu-item');
            const $parentMenu = $menuItem.closest('.hvac-trainer-menu, .sub-menu');
            
            // Close other open menus at the same level
            $parentMenu.find('> .menu-item.has-children.open').not($menuItem).removeClass('open');
            
            // Toggle current menu
            $menuItem.toggleClass('open');
        });
    }
    
    /**
     * Handle clicks outside menu to close dropdowns
     */
    function handleOutsideClicks($menu) {
        $(document).on('click.hvacMenu', function(e) {
            if (!$(e.target).closest('.hvac-trainer-menu-wrapper').length) {
                $menu.find('.menu-item.has-children.open').removeClass('open');
            }
        });
    }
    
    /**
     * Handle keyboard navigation
     */
    function handleKeyboardNavigation($menu) {
        $menu.find('a, .menu-toggle').on('keydown', function(e) {
            const $current = $(this);
            const $menuItem = $current.closest('.menu-item');
            
            switch(e.which) {
                case 13: // Enter
                    if ($current.hasClass('menu-toggle')) {
                        e.preventDefault();
                        $current.click();
                    }
                    break;
                    
                case 27: // Escape
                    $menu.find('.menu-item.has-children.open').removeClass('open');
                    $current.blur();
                    break;
                    
                case 37: // Left arrow
                    if ($menuItem.closest('.sub-menu').length) {
                        e.preventDefault();
                        $menuItem.closest('.has-children').removeClass('open');
                        $menuItem.closest('.has-children').find('> .menu-toggle, > a').focus();
                    }
                    break;
                    
                case 39: // Right arrow
                    if ($menuItem.hasClass('has-children')) {
                        e.preventDefault();
                        $menuItem.addClass('open');
                        $menuItem.find('.sub-menu > .menu-item:first-child > a').focus();
                    }
                    break;
                    
                case 38: // Up arrow
                    e.preventDefault();
                    navigateVertically($current, 'up');
                    break;
                    
                case 40: // Down arrow
                    e.preventDefault();
                    navigateVertically($current, 'down');
                    break;
            }
        });
    }
    
    /**
     * Navigate vertically through menu items
     */
    function navigateVertically($current, direction) {
        const $menuItem = $current.closest('.menu-item');
        const $parentMenu = $menuItem.closest('.hvac-trainer-menu, .sub-menu');
        const $siblings = $parentMenu.find('> .menu-item');
        const currentIndex = $siblings.index($menuItem);
        
        let targetIndex;
        if (direction === 'down') {
            targetIndex = currentIndex + 1;
            if (targetIndex >= $siblings.length) targetIndex = 0;
        } else {
            targetIndex = currentIndex - 1;
            if (targetIndex < 0) targetIndex = $siblings.length - 1;
        }
        
        const $target = $siblings.eq(targetIndex);
        $target.find('> a, > .menu-toggle').focus();
    }
    
    /**
     * Highlight current page in menu
     */
    function highlightCurrentPage($menu) {
        const currentUrl = window.location.pathname;
        
        $menu.find('a').each(function() {
            const $link = $(this);
            const linkUrl = $link.attr('href');
            
            if (linkUrl && linkUrl !== '#') {
                const linkPath = linkUrl.replace(window.location.origin, '');
                
                if (currentUrl === linkPath || 
                    (linkPath !== '/' && currentUrl.indexOf(linkPath) === 0)) {
                    $link.closest('.menu-item').addClass('current-menu-item');
                    
                    // Also mark parent items
                    $link.closest('.sub-menu').closest('.menu-item').addClass('current-menu-parent');
                }
            }
        });
    }
    
    /**
     * Clean up event handlers
     */
    function cleanupHVACMenu() {
        $(document).off('click.hvacMenu');
    }
    
    // Initialize when DOM is ready
    $(document).ready(function() {
        initHVACMenu();
    });
    
    // Reinitialize on AJAX content updates
    $(document).on('hvac-content-updated', function() {
        cleanupHVACMenu();
        initHVACMenu();
    });
    
})(jQuery);