upskill-event-manager/assets/js/hvac-navigation-enhanced.js

/**
 * HVAC Navigation Enhanced JavaScript
 * Handles mobile menu toggle and improves accessibility
 * 
 * @version 2.0.0
 * @since 2025-08-21
 */

jQuery(document).ready(function($) {
    'use strict';
    
    // Cache DOM elements
    const $hamburger = $('.hvac-hamburger-menu');
    const $menu = $('.hvac-trainer-menu');
    const $menuItems = $('.hvac-trainer-menu .menu-item-has-children');
    const $body = $('body');
    
    // Mobile menu toggle
    $hamburger.on('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
        
        $(this).toggleClass('active');
        $menu.toggleClass('active');
        $body.toggleClass('menu-open');
        
        // Update aria attributes for accessibility
        const isOpen = $menu.hasClass('active');
        $(this).attr('aria-expanded', isOpen);
        $menu.attr('aria-hidden', !isOpen);
        
        // Trap focus when menu is open
        if (isOpen) {
            $menu.find('a:first').focus();
        }
    });
    
    // Mobile dropdown toggle
    if (window.innerWidth <= 992) {
        $menuItems.each(function() {
            const $item = $(this);
            const $link = $item.children('a');
            
            // Add click handler to parent link on mobile
            $link.on('click', function(e) {
                // If it has children, prevent navigation and toggle menu
                if ($item.hasClass('menu-item-has-children')) {
                    e.preventDefault();
                    e.stopPropagation();
                    
                    // Close other open menus
                    $menuItems.not($item).removeClass('menu-open');
                    
                    // Toggle this menu
                    $item.toggleClass('menu-open');
                    
                    // Update aria attributes
                    const isOpen = $item.hasClass('menu-open');
                    $(this).attr('aria-expanded', isOpen);
                    $item.children('.sub-menu').attr('aria-hidden', !isOpen);
                }
            });
        });
    }
    
    // Desktop dropdown enhancement with delay
    let hoverTimeout;
    
    if (window.innerWidth > 992) {
        $menuItems.on('mouseenter', function() {
            const $this = $(this);
            clearTimeout(hoverTimeout);
            
            // Close other dropdowns
            $menuItems.not($this).removeClass('menu-open');
            
            // Open this dropdown with slight delay
            hoverTimeout = setTimeout(function() {
                $this.addClass('menu-open');
            }, 100);
        }).on('mouseleave', function() {
            const $this = $(this);
            clearTimeout(hoverTimeout);
            
            // Close dropdown with delay
            hoverTimeout = setTimeout(function() {
                $this.removeClass('menu-open');
            }, 300);
        });
        
        // Keep dropdown open when hovering over submenu
        $('.hvac-trainer-menu .sub-menu').on('mouseenter', function() {
            clearTimeout(hoverTimeout);
        }).on('mouseleave', function() {
            const $parent = $(this).closest('.menu-item-has-children');
            hoverTimeout = setTimeout(function() {
                $parent.removeClass('menu-open');
            }, 300);
        });
    }
    
    // Keyboard navigation
    $menu.on('keydown', 'a', function(e) {
        const $currentItem = $(this).parent();
        let $targetItem;
        
        switch(e.keyCode) {
            case 37: // Left arrow
                $targetItem = $currentItem.prev('.menu-item');
                if ($targetItem.length) {
                    $targetItem.children('a').focus();
                    e.preventDefault();
                }
                break;
                
            case 39: // Right arrow
                $targetItem = $currentItem.next('.menu-item');
                if ($targetItem.length) {
                    $targetItem.children('a').focus();
                    e.preventDefault();
                }
                break;
                
            case 40: // Down arrow
                if ($currentItem.hasClass('menu-item-has-children')) {
                    $currentItem.addClass('menu-open');
                    $currentItem.find('.sub-menu a:first').focus();
                    e.preventDefault();
                }
                break;
                
            case 38: // Up arrow
                if ($currentItem.closest('.sub-menu').length) {
                    const $parentMenu = $currentItem.closest('.sub-menu').parent();
                    $parentMenu.children('a').focus();
                    $parentMenu.removeClass('menu-open');
                    e.preventDefault();
                }
                break;
                
            case 27: // Escape
                if ($currentItem.closest('.sub-menu').length) {
                    const $parentMenu = $currentItem.closest('.sub-menu').parent();
                    $parentMenu.children('a').focus();
                    $parentMenu.removeClass('menu-open');
                } else if ($menu.hasClass('active')) {
                    $hamburger.click();
                }
                e.preventDefault();
                break;
                
            case 13: // Enter
            case 32: // Space
                if ($currentItem.hasClass('menu-item-has-children') && !$(this).attr('href')) {
                    $currentItem.toggleClass('menu-open');
                    e.preventDefault();
                }
                break;
        }
    });
    
    // Close mobile menu when clicking outside
    $(document).on('click', function(e) {
        if (!$(e.target).closest('.hvac-trainer-menu-wrapper').length) {
            if ($menu.hasClass('active')) {
                $hamburger.removeClass('active');
                $menu.removeClass('active');
                $body.removeClass('menu-open');
            }
        }
    });
    
    // Close mobile menu on escape key
    $(document).on('keydown', function(e) {
        if (e.keyCode === 27 && $menu.hasClass('active')) {
            $hamburger.click();
        }
    });
    
    // Handle window resize
    let resizeTimer;
    $(window).on('resize', function() {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(function() {
            if (window.innerWidth > 992) {
                // Reset mobile menu state on desktop
                $hamburger.removeClass('active');
                $menu.removeClass('active');
                $body.removeClass('menu-open');
                $menuItems.removeClass('menu-open');
            }
        }, 250);
    });
    
    // Smooth scroll for anchor links
    $menu.on('click', 'a[href^="#"]', function(e) {
        const target = $(this.getAttribute('href'));
        if (target.length) {
            e.preventDefault();
            $('html, body').animate({
                scrollTop: target.offset().top - 100
            }, 500);
            
            // Close mobile menu after clicking
            if ($menu.hasClass('active')) {
                $hamburger.click();
            }
        }
    });
    
    // Add loaded class for CSS animations
    setTimeout(function() {
        $('.hvac-trainer-menu-wrapper').addClass('loaded');
    }, 100);
});