{"version":3,"file":"responsiveNavigation.1f5bf035.js","sources":["../../../src/js/modules/responsive-navigation.js"],"sourcesContent":["\"use strict\";\n\n// NOTE TO SELF\n// Found better example code to reference for improved a11y on drop menus...\n// https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-1/menubar-1.html\n//\n// More at\n// https://www.w3.org/TR/wai-aria-practices/\n// https://www.w3.org/TR/wai-aria-practices/examples/\n\nfunction doMobileNavigation() {\n\t// mobile navigation is one pane at a time, needs to re-arrange some content, and buries layers deeper\n\t// a11y notes based on: https://www.w3.org/WAI/tutorials/menus/flyout/\n\n\t// set the class so the CSS knows what we're doing\n\t\tdocument.querySelector('html').classList.add('js-mobile-nav');\n\n\t// get elements we will be referencing later on\n\t\tconst navMain       = document.querySelector('#navMain');\n\t\tconst subNavs       = navMain.querySelectorAll('.has-children');\n\t\tconst special       = document.querySelector('#special');\n\n\t\n\n\t// add ARIA labels to things that need them\n\t\tsubNavs.forEach(subNav => {\n\t\t\tsubNav.setAttribute('aria-haspopup', true);\n\t\t\tsubNav.setAttribute('aria-expanded', false);\n\t\t});\n\n\t// handle clicks on the subnav toggle\n\t\tsubNavs.forEach(subNav => {\n\t\t\tlet toggle = subNav.querySelector(':scope > a');\n\n\t\t\t// add in a \"back\" button for each\n\t\t\t\tlet subList = subNav.querySelector(':scope > .l-2');\n\t\t\t\tsubList.insertAdjacentHTML(\"afterbegin\", `<li class=\"js-back\"><a href=\"#\">BACK</a></li>`);\n\n\t\t\t// listen for clicks on the open toggle\n\t\t\t\ttoggle.addEventListener(\"click\", function(e) {\n\t\t\t\t\te.preventDefault();\n\n\t\t\t\t\t// whatever, we want to hide all other subNavs\n\t\t\t\t\t\tsubNavs.forEach(a => { a.classList.remove('js-nav-active') });\n\n\t\t\t\t\t// now, do we need to do anything with this particular subNav?\n\t\t\t\t\t\tlet subNavIsOpen    = subNav.classList.contains(\"js-nav-active\"); // returns true|false\n\t\t\t\t\t\tlet newSubNavStatus = !subNavIsOpen; // inverts the value\n\n\t\t\t\t\t\tsubNav.setAttribute(\"aria-expanded\", newSubNavStatus); // applies new value\n\t\t\t\t\t\tsubNav.classList.toggle(\"js-nav-active\");\n\t\t\t\t});\n\n\t\t\t// keyboard focus\n\t\t\t\tsubNav.addEventListener(\"focusin\", function(e) {\n\t\t\t\t\t// whatever, we want to hide all other subNavs\n\t\t\t\t\t\tsubNavs.forEach(a => { a.classList.remove('js-nav-active') });\n\n\t\t\t\t\t// now, do we need to do anything with this particular subNav?\n\t\t\t\t\t\tlet subNavIsOpen    = subNav.classList.contains(\"js-nav-active\"); // returns true|false\n\t\t\t\t\t\tlet newSubNavStatus = !subNavIsOpen; // inverts the value\n\n\t\t\t\t\t\tsubNav.setAttribute(\"aria-expanded\", newSubNavStatus); // applies new value\n\t\t\t\t\t\tsubNav.classList.toggle(\"js-nav-active\");\n\t\t\t\t});\n\n\t\t\t\tsubNav.addEventListener(\"focusout\", function(e) {\n\t\t\t\t\t// whatever, we want to hide all other subNavs\n\t\t\t\t\t\tsubNavs.forEach(a => { a.classList.remove('js-nav-active') });\n\n\t\t\t\t\t// now, do we need to do anything with this particular subNav?\n\t\t\t\t\t\tsubNav.setAttribute(\"aria-expanded\", false); // applies new value\n\t\t\t\t\t\tsubNav.classList.remove(\"js-nav-active\");\n\t\t\t\t});\n\n\t\t\t// listen for clicks on the back link\n\t\t\t\tlet backButton = subNav.querySelector(':scope .js-back a');\n\t\t\t\tbackButton.addEventListener('click', function(e){\n\t\t\t\t\te.preventDefault();\n\n\t\t\t\t\te.currentTarget.closest('.js-nav-active').setAttribute(\"aria-expanded\", false);\n\t\t\t\t\te.currentTarget.closest('.js-nav-active').classList.remove('js-nav-active');\n\t\t\t\t});\n\t\t});\n}\nfunction undoMobileNavigation() {\n\t// unset the css class indicating mobile nav\n\t\tdocument.querySelector('html').classList.remove('js-mobile-nav');\n\n\t// get elements we will be referencing later on\n\t\tconst navMain       = document.querySelector('#navMain');\n\t\tconst subNavs       = navMain.querySelectorAll(':scope .has-children');\n\t\tconst special       = document.querySelector('#special');\n\t\tconst backButtons   = navMain.querySelectorAll(':scope .js-back');\n\n\t\tsubNavs.forEach(subNav => {\n\t\t\t// remove all the ARIA stuff to help with disclosure of menu status (they're not hidden at desktop)\n\t\t\tsubNav.removeAttribute('aria-haspopup');\n\t\t\tsubNav.removeAttribute('aria-expanded');\n\t\t\tsubNav.classList.remove(\"js-nav-active\");\n\t\t});\n\n\t\tbackButtons.forEach(button => {\n\t\t\t// remove them\n\t\t\tbutton.remove();\n\t\t})\n}\n\nfunction doDesktopNavigation() {\n\t// desktop navigation is a more simple show/hide\n\t\tdocument.querySelector('html').classList.add('js-desktop-nav');\n\n\t// get elements we will be referencing later on\n\t\tconst navMain       = document.querySelector('#navMain');\n\t\tconst subNavs       = navMain.querySelectorAll('.has-children');\n\n\t// add ARIA labels to things that need them\n\t\tsubNavs.forEach(subNav => {\n\t\t\tsubNav.setAttribute('aria-haspopup', true);\n\t\t\tsubNav.setAttribute('aria-expanded', false);\n\t\t});\n\n\t// handle clicks on the subnav toggle\n\t\tsubNavs.forEach(subNav => {\n\t\t\tlet toggle = subNav.querySelector(':scope > a');\n\n\t\t\t// add in a \"back\" button for each\n\t\t\t\tlet subList = subNav.querySelector(':scope > .l-2');\n\t\t\t\t// subList.insertAdjacentHTML(\"afterbegin\", `<li class=\"js-back\"><a href=\"#\">BACK</a></li>`);\n\n\t\t\t// listen for clicks on the open toggle\n\t\t\t\ttoggle.addEventListener(\"click\", function(e) {\n\t\t\t\t\t// e.preventDefault();\n\t\t\t\t\n\t\t\t\t\t// whatever, we want to hide all other subNavs\n\t\t\t\t\t\tsubNavs.forEach(a => { a.classList.remove('js-nav-active') });\n\n\t\t\t\t\t// now, do we need to do anything with this particular subNav?\n\t\t\t\t\t\tlet subNavIsOpen    = subNav.classList.contains(\"js-nav-active\"); // returns true|false\n\t\t\t\t\t\tlet newSubNavStatus = !subNavIsOpen; // inverts the value\n\n\t\t\t\t\t\tsubNav.setAttribute(\"aria-expanded\", newSubNavStatus); // applies new value\n\t\t\t\t\t\tsubNav.classList.toggle(\"js-nav-active\");\n\t\t\t\t});\n\n\t\t\t// keyboard focus\n\t\t\t\tsubNav.addEventListener(\"focusin\", function(e) {\n\t\t\t\t\t// whatever, we want to hide all other subNavs\n\t\t\t\t\t\tsubNavs.forEach(a => { a.classList.remove('js-nav-active') });\n\n\t\t\t\t\t// now, do we need to do anything with this particular subNav?\n\t\t\t\t\t\tlet subNavIsOpen    = subNav.classList.contains(\"js-nav-active\"); // returns true|false\n\t\t\t\t\t\tlet newSubNavStatus = !subNavIsOpen; // inverts the value\n\n\t\t\t\t\t\tsubNav.setAttribute(\"aria-expanded\", newSubNavStatus); // applies new value\n\t\t\t\t\t\tsubNav.classList.toggle(\"js-nav-active\");\n\t\t\t\t});\n\n\t\t\t\tsubNav.addEventListener(\"focusout\", function(e) {\n\t\t\t\t\t// whatever, we want to hide all other subNavs\n\t\t\t\t\t\tsubNavs.forEach(a => { a.classList.remove('js-nav-active') });\n\n\t\t\t\t\t// now, do we need to do anything with this particular subNav?\n\t\t\t\t\t\tsubNav.setAttribute(\"aria-expanded\", false); // applies new value\n\t\t\t\t\t\tsubNav.classList.remove(\"js-nav-active\");\n\t\t\t\t});\n\n\t\t});\n}\nfunction undoDesktopNavigation() {\n\t// unset the css class indicating mobile nav\n\t\tdocument.querySelector('html').classList.remove('js-desktop-nav');\n\n\t// get elements we will be referencing later on\n\t\tconst navMain       = document.querySelector('#navMain');\n\t\tconst subNavs       = navMain.querySelectorAll(':scope .has-children');\n\t\tconst backButtons   = navMain.querySelectorAll(':scope .js-back');\n\n\t\tsubNavs.forEach(subNav => {\n\t\t\t// remove all the ARIA stuff to help with disclosure of menu status (they're not hidden at desktop)\n\t\t\tsubNav.removeAttribute('aria-haspopup');\n\t\t\tsubNav.removeAttribute('aria-expanded');\n\t\t\tsubNav.classList.remove(\"js-nav-active\");\n\t\t});\n\n\t\tbackButtons.forEach(button => {\n\t\t\t// remove them\n\t\t\tbutton.remove();\n\t\t})\n}\n\nfunction doMainNav() {\n\t// get elements we will be referencing later on\n\t\tconst html          = document.querySelector('html');\n\t\tconst navMain       = document.querySelector('#navMain');\n\t\tconst navMenuToggle = document.querySelector('#menuTrigger');\n\n\t// handle clicks on the menu toggle button\n\t\tnavMenuToggle.addEventListener(\"click\", function(e) {\n\t\t\te.preventDefault();\n\t\t\t\n\t\t\tlet navIsOpen    = navMain.classList.contains(\"js-nav-active\"); // returns true|false\n\t\t\tlet newNavStatus = !navIsOpen; // inverts the value\n\n\t\t\tnavMenuToggle.setAttribute(\"aria-expanded\", newNavStatus); // applies new value\n\t\t\tnavMain.classList.toggle(\"js-nav-active\");\n\n\t\t});\n\n\t// handle keyboard focussing inside the nav\n\t\tnavMain.addEventListener('focusin', event => {\n\t\t\tnavMain.classList.add(\"js-nav-active\");\n\t\t});\n\t\tnavMain.addEventListener('focusout', event => {\n\t\t\tnavMain.classList.remove(\"js-nav-active\");\n\t\t});\n}\n\n// what's the width of the screen?\n\tlet screenWidth = window.matchMedia('(max-width: 1023px)');\n\n// initial load - always run these once on page load\n\tdoMainNav();\n\n\tif( screenWidth.matches ) {\n\t\tundoDesktopNavigation();\n\t\tdoMobileNavigation();\n\t} else {\n\t\tundoMobileNavigation();\n\t\tdoDesktopNavigation();\n\t}\n\n// watch for changes in window size\n\tscreenWidth.addEventListener(\"change\", (e) => {\n\t\tif( e.matches) {\n\t\t\tundoDesktopNavigation();\n\t\t\tdoMobileNavigation();\n\t\t} else {\n\t\t\tundoMobileNavigation();\n\t\t\tdoDesktopNavigation();\n\t\t}\n\t});"],"names":["doMobileNavigation","subNavs","subNav","toggle","e","a","newSubNavStatus","undoMobileNavigation","navMain","backButtons","button","doDesktopNavigation","undoDesktopNavigation","doMainNav","navMenuToggle","newNavStatus","event","screenWidth"],"mappings":"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"}