{"version":3,"file":"responsiveNavigation-5a96178e.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/**\n * @typedef {('beforebegin'|'afterbegin'|'beforeend'|'afterend')} insertAdjacentHTMLPosition\n */\n\n/**\n * Manipulates the DOM to provide a toggle for showing and hiding navigation\n *\n * @param attachButtonTo {string} - A selector string to identify which unique node to place a toggle switch into\n * @param buttonPosition {insertAdjacentHTMLPosition} - Where in relation to the node to insert the toggle <button>\n * @param navigationContainer {string} - A selector string to identify the unique node whose visibility will be toggled by this function\n */\nfunction doMobileNavigation(\n\tattachButtonTo,\n\tbuttonPosition,\n\tnavigationContainer\n) {\n\tconst html = document.querySelector('html');\n\tconst templateToggleNav = `\n\t\t<button id='mainNavToggle' aria-label=\"Main Menu\">\n\t\t\tShow Main Navigation\n\t\t</button>\n\t`;\n\n\t// initialise everything\n\t\thtml.dataset.mobileNavigation = 'closed';\n\n\t\tdocument.querySelector(attachButtonTo)\n\t\t\t.insertAdjacentHTML(\n\t\t\t\tbuttonPosition,\n\t\t\t\ttemplateToggleNav\n\t\t\t);\n\n\t\tconst navToggle = document.querySelector('#mainNavToggle');\n\n\t\t// Accessibility enhancements for the dynamic toggling control\n\t\t\tconst theMenu = document.querySelector(navigationContainer);\n\t\t\ttheMenu.setAttribute(\"aria-labelledby\", \"mainNavToggle\");\n\n\t// handle clicks on the menu toggle button\n\t\tnavToggle.addEventListener(\"click\",(e) => {\n\t\t\tlet newNavStatus;\n\t\t\tlet currentNavStatus = html.dataset.mobileNavigation;\n\n\t\t\tif (currentNavStatus == 'open') {\n\t\t\t\t// is open now, so the click is to close it\n\t\t\t\tnavToggle.setAttribute(\"aria-expanded\", false); // applies new value\n\t\t\t\tnavToggle.textContent = \"Open Main Navigation\";\n\t\t\t\thtml.dataset.mobileNavigation = \"closed\";\n\t\t\t} else {\n\t\t\t\t// is closed now, so the click is to open it\n\t\t\t\tnavToggle.setAttribute(\"aria-expanded\", true); // applies new value\n\t\t\t\tnavToggle.textContent = \"Close Main Navigation\";\n\t\t\t\thtml.dataset.mobileNavigation = \"open\";\n\t\t\t}\n\t\t});\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('.site_context').addEventListener('focusin', function(e){\n\t// \t\tnavToggle.setAttribute(\"aria-expanded\", 'true');\n\t// \t\tdocument.querySelector('html').classList.add(\"nav-active\");\n\t// \t});\n\t// \tdocument.querySelector('.site_context').addEventListener('focusout', function(e){\n\t// \t\tnavToggle.setAttribute(\"aria-expanded\", 'false');\n\t// \t\tdocument.querySelector('html').classList.remove(\"nav-active\");\n\t// \t});\n}\n\n/**\n * Removes all the DOM changes implemented by the doMobileNavigation function\n *\n * @param navigationContainer {string} - A selector string to identify the unique node whose visibility will be toggled by this function\n */\nfunction undoMobileNavigation(navigationContainer) {\n\tconst html = document.querySelector('html');\n\thtml.removeAttribute('data-mobile-navigation');\n\n\tlet navMenuToggle = document.querySelector('#mainNavToggle');\n\tif( navMenuToggle ) {\n\t\tdocument.querySelector('#mainNavToggle').remove();\n\t\tdocument.querySelector(navigationContainer).removeAttribute('aria-labelledby');\n\t}\n}\n\nlet screenWidth = window.matchMedia('(max-width: 680px)');\n\n// initial load\nif( screenWidth.matches ) {\n\tdoMobileNavigation(\n\t\t'.site_context .left',\n\t\t'beforeend',\n\t\t'.navSite');\n} else {\n\tundoMobileNavigation('.navSite');\n}\n\n// watch for changes in window size\nscreenWidth.addEventListener(\"change\", (e) => {\n\tif( e.matches ) {\n\t\tdoMobileNavigation(\n\t\t\t'.site_context .left',\n\t\t\t'beforeend',\n\t\t\t'.navSite'\n\t\t);\n\t} else {\n\t\tundoMobileNavigation('.navSite');\n\t}\n});\n"],"names":["doMobileNavigation","attachButtonTo","buttonPosition","navigationContainer","html","templateToggleNav","navToggle","e","undoMobileNavigation","screenWidth"],"mappings":"AAqBA,SAASA,EACRC,EACAC,EACAC,EACC,CACD,MAAMC,EAAO,SAAS,cAAc,MAAM,EACpCC,EAAoB;AAAA;AAAA;AAAA;AAAA,GAOzBD,EAAK,QAAQ,iBAAmB,SAEhC,SAAS,cAAcH,CAAc,EACnC,mBACAC,EACAG,CACJ,EAEE,MAAMC,EAAY,SAAS,cAAc,gBAAgB,EAGxC,SAAS,cAAcH,CAAmB,EAClD,aAAa,kBAAmB,eAAe,EAGxDG,EAAU,iBAAiB,QAASC,GAAM,CAElBH,EAAK,QAAQ,kBAEZ,QAEvBE,EAAU,aAAa,gBAAiB,EAAK,EAC7CA,EAAU,YAAc,uBACxBF,EAAK,QAAQ,iBAAmB,WAGhCE,EAAU,aAAa,gBAAiB,EAAI,EAC5CA,EAAU,YAAc,wBACxBF,EAAK,QAAQ,iBAAmB,OAEpC,CAAG,CAYH,CAOA,SAASI,EAAqBL,EAAqB,CACrC,SAAS,cAAc,MAAM,EACrC,gBAAgB,wBAAwB,EAEzB,SAAS,cAAc,gBAAgB,IAE1D,SAAS,cAAc,gBAAgB,EAAE,OAAM,EAC/C,SAAS,cAAcA,CAAmB,EAAE,gBAAgB,iBAAiB,EAE/E,CAEA,IAAIM,EAAc,OAAO,WAAW,oBAAoB,EAGpDA,EAAY,QACfT,EACC,sBACA,YACA,UAAU,EAEXQ,EAAqB,UAAU,EAIhCC,EAAY,iBAAiB,SAAW,GAAM,CACzC,EAAE,QACLT,EACC,sBACA,YACA,UACH,EAEEQ,EAAqB,UAAU,CAEjC,CAAC"}