/* Menu button open/close animation */ document.addEventListener('DOMContentLoaded', () => { /* First navigation layer */ // Variables let navMenu = document.querySelector('.nav-menu') // Setting a toggle variable for open/close states let menuState = 0; let openedFirst = 1; let closedFirst = 1; let allyWrapActive = 0 // Initial animation state anime.set('#nav-burger-line-1', { translateY: -6, }) anime.set('#nav-burger-line-2', { translateY: 6, }) let burgerOpen = anime.timeline({ easing: 'easeOutQuint', duration: 400 }) let burgerClose = anime.timeline({ easing: 'easeOutQuint', duration: 200 }) // Open menu function var menuOpenClose = function() { if (menuState == 0) { // Toggle the variable to open state menuState = 1 // Open the nav menu popup navMenu.classList.remove('t_visibility-hidden') // Burger open animation burgerOpen.pause() burgerClose.pause() if (openedFirst == 1) { burgerOpen .add({ targets: '#nav-burger-line-1', translateY: { value: 0, duration: 200 }, rotate: 45, width: 22, height: 2, }, 0) .add({ targets: '#nav-burger-line-2', translateY: { value: 0, duration: 200 }, rotate: -45, width: 22, height: 2, }, 0) } else { burgerOpen.restart() } openedFirst = 0 } else { // Toggle the variable to open state menuState = 0 // Close the nav menu popup navMenu.classList.add('t_visibility-hidden') // Burger close animation burgerOpen.pause() burgerClose.pause() if (closedFirst == 1) { burgerClose .add({ targets: '#nav-burger-line-1', translateY: { value: -6, easing: 'easeInSine' }, rotate: 0, width: 33, height: 3, }, 0) .add({ targets: '#nav-burger-line-2', translateY: { value: 6, easing: 'easeInSine' }, rotate: 0, width: 33, height: 3, }, 0) } else { burgerClose.restart() } closedFirst = 0 } } // let menuKeypress = function(e) { // if (e.key == 'Enter') { // menuOpenClose() // } // } // Setting the click trigger on the burger button document.querySelector('.nav-burger').addEventListener('click', menuOpenClose) // Accessibility - setting the keypress trigger on the burger button //document.querySelector('.nav-burger').addEventListener('keypress', menuKeypress) /* Second navigation layer */ // Getting all the main nav items with dropdowns let navDropdownWraps = document.querySelectorAll('.nav-dropdown-wrap') // Getting all the secondary nav items in dropdowns let secondaryNavLinks = document.querySelectorAll('.nav-dropdown-list-item-link') secondaryNavLinks.forEach(secondaryNavLink => { let currentDropdown = secondaryNavLink.closest('.nav-dropdown') let revealCurrentDropdown = function () { currentDropdown.classList.remove('visibility-hidden') } secondaryNavLink.addEventListener('focus', revealCurrentDropdown) }) let dropdownOpen = 0 navDropdownWraps.forEach(navDropdownWrap => { let t_navDropdownLink = navDropdownWrap.querySelector('.t_nav-dropdown-link') let navDropdownBack = navDropdownWrap.querySelector('.nav-dropdown-back') let t_navDropdownOpen = function() { dropdownOpen = 1 navDropdownWrap.querySelector('.nav-dropdown').classList.remove('visibility-hidden') } let t_navDropdownClose = function() { dropdownOpen = 0 navDropdownWrap.querySelector('.nav-dropdown').classList.add('visibility-hidden') } t_navDropdownLink.addEventListener('click', t_navDropdownOpen) navDropdownBack.addEventListener('click', t_navDropdownClose) // Accessibility dropdown reveal let navDropdownLink = navDropdownWrap.querySelector('.nav-dropdown-link') let a11yNavDropdownReveal = function(e) { if (e.key == " " || e.code == "Space" || e.keyCode == 32) { e.preventDefault() if (dropdownOpen == 0) { t_navDropdownOpen() navDropdownBack.focus() } else { t_navDropdownClose() } } else if (e.key == "Tab") { } else if(e.shiftKey) { t_navDropdownClose() } } let a11yNavDropdownClose = function (e) { if (e.key == 'Enter') { //t_navDropdownClose() navDropdownLink.focus() } } navDropdownLink.addEventListener('keydown', a11yNavDropdownReveal) navDropdownBack.addEventListener('keypress', a11yNavDropdownClose) navDropdownLink.addEventListener('focus', function() { navDropdownWraps.forEach(navDropdownWrap => { dropdownOpen = 0 navDropdownWrap.querySelector('.nav-dropdown').classList.add('visibility-hidden') }) }) }) // Accessibility let allFocusable = document.querySelector('.page-content').querySelectorAll('button, [href], input, [tabindex="0"]') let skipNavigation = function(e) { if (e.key == 'Enter') { allFocusable[0].focus() } } document.querySelector('.skip-navigation').addEventListener('keypress', skipNavigation) document.addEventListener('keydown', function(e) { if (e.key == 'Escape') { menuState = 1 menuOpenClose() navDropdownWraps.forEach(navDropdownWrap => { dropdownOpen = 0 navDropdownWrap.querySelector('.nav-dropdown').classList.add('visibility-hidden') }) } else if (e.key == 'Tab'){ if (allyWrapActive == 0) { allyWrapActive = 1 $('.a11y-wrap').removeClass('display-none') } } }) })