{"version":3,"file":"responsiveNavigation.49a7c4d9.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\n// let originalMarkup = document.querySelector('header').cloneNode(true);\nlet navMain        = document.querySelector('header .nav_main');\nlet groupedContent = document.querySelector('header .groupedContent');\nlet siteTitle      = document.querySelector('.site_title');\n\n// helper functions\n\tconst handleFocusInHeaderMobile = (e) => {\n\t\tconsole.log(e.target.id);\n\t\tif (['mainNavToggle','headerLogoAnchor'].includes(e.target.id)) { // don't do anything, as there's gonna be a click...\n\t\t\treturn;\n\t\t}\n\t\tdocument.querySelector('#mainNavToggle').setAttribute(\"aria-expanded\", 'true');\n\t\tdocument.querySelector('html').classList.add(\"nav-active\");\n\t};\n\n\tconst handleFocusOutHeaderMobile = (e) => {\n\t\tdocument.querySelector('#mainNavToggle').setAttribute(\"aria-expanded\", 'false');\n\t\tdocument.querySelector('html').classList.remove(\"nav-active\");\n\t};\n\tconst handleMainNavToggle = (e) => {\n\t\tconsole.log('clicked #mainNavToggle');\n\t\tlet newNavStatus;\n\t\tlet navIsOpen = document.querySelector('html').classList.contains(\"nav-active\"); // returns true|false\n\t\tnewNavStatus  = !navIsOpen; // inverts the value\n\n\t\tdocument.querySelector('#mainNavToggle').setAttribute(\"aria-expanded\", newNavStatus); // applies new value\n\t\tdocument.querySelector('html').classList.toggle(\"nav-active\");\n\t};\n\n\tconst handleSearchButtonClick = (e) => {\n\t\te.preventDefault();\n\n\t\tlet toggleButtonSearch = document.querySelector('header .searchBarTrigger a');\n\t\tlet toggleButtonMenu   = document.querySelector('header .menuTrigger a');\n\t\tlet htmlElement        = document.querySelector('html');\n\n\t\tif (htmlElement.classList.contains('js-menu-open')) {\n\t\t\thtmlElement.classList.remove('js-menu-open');\n\n\t\t\tsetTimeout(() => {\n\t\t\t\thtmlElement.classList.toggle('js-search-open');\n\n\t\t\t\tif (htmlElement.classList.contains('js-search-open')) {\n\t\t\t\t\tdocument.querySelector('#searchTerm').focus({\n\t\t\t\t\t\tpreventScroll: true\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t}, 300);\n\t\t} else {\n\t\t\thtmlElement.classList.toggle('js-search-open');\n\n\t\t\tif (htmlElement.classList.contains('js-search-open')) {\n\t\t\t\tdocument.querySelector('#searchTerm').focus({\n\t\t\t\t\tpreventScroll: true\n\t\t\t\t});\n\t\t\t}\n\t\t}\n\t};\n\n\tconst handleMenuButtonClick = (e) => {\n\t\te.preventDefault();\n\n\t\tlet toggleButtonSearch = document.querySelector('header .searchBarTrigger a');\n\t\tlet toggleButtonMenu   = document.querySelector('header .menuTrigger a');\n\t\tlet htmlElement        = document.querySelector('html');\n\n\t\tif (htmlElement.classList.contains('js-search-open')) {\n\t\t\thtmlElement.classList.remove('js-search-open');\n\n\t\t\tsetTimeout(() => {\n\t\t\t\thtmlElement.classList.toggle('js-menu-open');\n\t\t\t}, 300);\n\t\t} else {\n\t\t\thtmlElement.classList.toggle('js-menu-open');\n\t\t}\n\t}\n\n// main stuff\nfunction doMobileNavigation() {\n\tconsole.log('doMobileNavigation');\n\tdocument.querySelector('html').classList.add('mobile-nav');\n\n\t// move the .nav_main node into the .groupedContent div\n\t\tgroupedContent.insertAdjacentElement(\"afterbegin\", navMain);\n\n\t// create the navigation toggle button\n\t\tlet templateToggleNav = `\n\t\t\t<button id='mainNavToggle' aria-label=\"Main Menu\"><span class=\"burger\"><span class=\"line\"></span></span><span class=\"uc_hide-visually\">Toggle Main Navigation</span></button>\n\t\t`;\n\t\tdocument.querySelector('header .site_title').insertAdjacentHTML('afterend', templateToggleNav);\n\t\tlet navToggle = document.querySelector('#mainNavToggle');\n\n\t// Accessilbity enhancements for the dynamic toggling control\n\t\tlet theMenu = document.querySelector('#site_navigation');\n\t\ttheMenu.setAttribute(\"aria-labelledby\", \"mainNavToggle\");\n\n\t// handle clicks on the menu toggle button\n\t\tnavToggle.addEventListener(\"click\", handleMainNavToggle);\n\n\t// handle keyboard focussing inside the nav\n\t// NOTE: this could be done in CSS with :focus-within, but then you lose ARIA status updates\n\t\tdocument.querySelector('header').addEventListener('focusin', handleFocusInHeaderMobile);\n\t\tdocument.querySelector('header').addEventListener('focusout', handleFocusOutHeaderMobile);\n}\n\nfunction undoMobileNavigation() {\n\tconsole.log('undoMobileNavigation');\n\n\t// remove event listeners\n\tdocument.querySelector('#mainNavToggle')?.removeEventListener(\"click\", handleMainNavToggle);\n\tdocument.querySelector('header').removeEventListener('focusin', handleFocusInHeaderMobile);\n\tdocument.querySelector('header').removeEventListener('focusout', handleFocusOutHeaderMobile);\n\n\t// remove classes and revert mark-up changes\n\tdocument.querySelector('html').classList.remove('mobile-nav');\n\tif( document.querySelector('#mainNavToggle') ) {\n\t\tdocument.querySelector('html').classList.remove(\"nav-active\");\n\t\tdocument.querySelector('#mainNavToggle')?.remove();\n\t\tdocument.querySelector('#site_navigation').removeAttribute('aria-labelledby');\n\n\t\t// move the navMain back to where it was\n\t\t\tsiteTitle.insertAdjacentElement(\"afterend\", navMain);\n\t}\n}\n\nfunction doDesktopNavigation() {\n\tconsole.log('doDesktopNavigation');\n\n\tlet toggleButtonSearch = document.querySelector('header .searchBarTrigger a');\n\tlet toggleButtonMenu   = document.querySelector('header .menuTrigger a');\n\n\ttoggleButtonSearch.addEventListener('click', handleSearchButtonClick);\n\ttoggleButtonMenu.addEventListener('click', handleMenuButtonClick);\n}\n\nfunction undoDesktopNavigation() {\n\tconsole.log('undoDesktopNavigation');\n\tlet toggleButtonSearch = document.querySelector('header .searchBarTrigger a');\n\tlet toggleButtonMenu   = document.querySelector('header .menuTrigger a');\n\n\t//remove event listeners\n\t\ttoggleButtonSearch.addEventListener('click', handleSearchButtonClick);\n\t\ttoggleButtonMenu.addEventListener('click', handleMenuButtonClick);\n\n\t// \"close\" everything\n\t\tdocument.querySelector('html').classList.remove('js-menu-open','js-search-open');\n}\n\nlet screenWidth = window.matchMedia('(max-width: 1199px)');\n\n// initial load\nif( screenWidth.matches ) {\n\tundoDesktopNavigation();\n\tdoMobileNavigation();\n} else {\n\tundoMobileNavigation();\n\tdoDesktopNavigation();\n}\n\n// watch for changes in window size\nscreenWidth.addEventListener(\"change\", (e) => {\n\tif( e.matches ) {\n\t\tundoDesktopNavigation();\n\t\tdoMobileNavigation();\n\t} else {\n\t\tundoMobileNavigation();\n\t\tdoDesktopNavigation();\n\t}\n});\n\n// watch for clicks to dismiss the nav elements\ndocument.querySelector('main,footer,.row.newsletter').addEventListener('click', () => {\n\tdocument.querySelector('html').classList.remove('js-menu-open','js-search-open');\n});\n"],"names":["navMain","groupedContent","siteTitle","handleFocusInHeaderMobile","e","handleFocusOutHeaderMobile","handleMainNavToggle","newNavStatus","handleSearchButtonClick","htmlElement","handleMenuButtonClick","doMobileNavigation","templateToggleNav","navToggle","undoMobileNavigation","_a","_b","doDesktopNavigation","toggleButtonSearch","toggleButtonMenu","undoDesktopNavigation","screenWidth"],"mappings":"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"}