{"version":3,"file":"responsiveNavigation-3758af49.js","sources":["../../../src/js/responsive-navigation.js"],"sourcesContent":["/**\n * @typedef {('beforebegin'|'afterbegin'|'beforeend'|'afterend')} insertAdjacentHTMLPosition\n */\n\n/**\n * Manipulates the DOM to provide a toggle for showing and hiding the main navigation pane\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\n * @param subNavSelector {string} - A selector string to identify any nodes that are sub-navigation elements\n */\nfunction doMobileNavigation(\n\tattachButtonTo,\n\tbuttonPosition,\n\tnavigationContainer,\n\tsubNavSelector\n) {\n\tconst html      = document.querySelector('html');\n\tconst theMenu   = document.querySelector(navigationContainer);\n\tconst subNavs = theMenu.querySelectorAll(subNavSelector);\n\tconst templateToggleNav = `\n\t\t<button id='mainNavToggle' aria-label=\"Open Main Navigation\" role=\"button\">\n\t\t\tMenu\n\t\t</button>\n\t`;\n\n\t// initialise everything\n\t\thtml.dataset.sidebarNavigation = '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);\n\n\t// Now the button's in the DOM we can grab it\n\t\tconst navToggle = document.querySelector('#mainNavToggle');\n\n\t// Accessibility enhancements for the dynamic toggling control\n\t// add ARIA labels to things that need them\n\t\ttheMenu.setAttribute(\"aria-labelledby\", \"mainNavToggle\");\n\n\t// handle clicks on the menu toggle button to show/hide the main panel\n\t\tnavToggle.addEventListener(\"click\",(e) => {\n\t\t\tlet currentNavStatus = html.dataset.sidebarNavigation;\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.setAttribute('aria-label',\"Open Main Navigation\");\n\t\t\t\tnavToggle.textContent = \"Menu\";\n\t\t\t\thtml.dataset.sidebarNavigation = \"closed\";\n\n\t\t\t\t// Also close any open sub-navs\n\n\t\t\t\tsubNavs.forEach(subNav => {\n\t\t\t\t\tsubNav.dataset.submenuStatus = \"closed\";\n\t\t\t\t\tsubNav.setAttribute(\"aria-expanded\", false);\n\t\t\t\t});\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.setAttribute('aria-label',\"Close Main Navigation\");\n\t\t\t\tnavToggle.textContent = \"Close\";\n\t\t\t\thtml.dataset.sidebarNavigation = \"open\";\n\t\t\t}\n\t\t});\n}\n\n/**\n * Handles DOM interactions for sub-menu display (this is independent of the mobile nav)\n *\n * @param navigationContainer {string} - A selector string to identify the main menu within which the sub-menus live\n * @param subNavSelector {string} - A selector string to identify any nodes that are sub-navigation elements\n */\nfunction handleSubNavs(\n\tnavigationContainer,\n\tsubNavSelector\n) {\n\tconst theMenu   = document.querySelector(navigationContainer);\n\tconst subNavs = theMenu.querySelectorAll(subNavSelector);\n\n\t// Accessibility enhancements for the dynamic toggling control\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 the sub-nav stuff\n\t\tsubNavs.forEach(subNav => {\n\t\t\tlet subNavToggle = subNav.querySelector(':scope > .groupAnchors > .toggleSubmenu');\n\n\t\t\t// add in a \"back\" button for each\n\t\t\t\tlet subList = subNav.querySelector(':scope > ul');\n\t\t\t\tsubList.insertAdjacentHTML(\"afterbegin\", `<li class=\"js-back\"><a href=\"#\">Close Pane</a></li>`);\n\n\t\t\t// listen for clicks on the subNavToggle\n\t\t\t\tsubNavToggle.addEventListener(\"click\", function(e) {\n\t\t\t\t\te.preventDefault();\n\t\t\t\t\tlet clickedSubNavUl = e.currentTarget;\n\n\t\t\t\t\t// whatever is happening on this subNav, we want to hide all other subNavs UNLESS the other \"sub nav\" in question is actually a parent of the *current* nav (nested navs are fun)\n\t\t\t\t\t\tsubNavs.forEach(thisSubNav => {\n\t\t\t\t\t\t\tif (! thisSubNav.contains(clickedSubNavUl)) {\n\t\t\t\t\t\t\t\tthisSubNav.dataset.submenuStatus = 'closed';\n\t\t\t\t\t\t\t\tsubNav.setAttribute(\"aria-expanded\", \"false\");\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t});\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.dataset.submenuStatus == 'open'; // returns true|false\n\t\t\t\t\t\tlet newSubNavStatus = !subNavIsOpen; // inverts the value\n\n\t\t\t\t\t\tsubNav.dataset.submenuStatus = newSubNavStatus ? 'open' : 'closed'; // update the data attribute\n\t\t\t\t\t\tsubNav.setAttribute(\"aria-expanded\", newSubNavStatus); // update the aria attribute\n\n\t\t\t\t\t\t// Ok, and does the nav we just closed itself have subNavs, which we ALSO need to close?\n\t\t\t\t\t\tsubNav.querySelectorAll(':scope [data-submenu-status=\"open\"]').forEach(another => {\n\t\t\t\t\t\t\tanother.dataset.submenuStatus = \"closed\";\n\t\t\t\t\t\t\tanother.setAttribute(\"aria-expanded\", false);\n\t\t\t\t\t\t});\n\n\t\t\t\t\t// listen for clicks on the back link\n\t\t\t\t\t\tlet backButton = subNav.querySelector(':scope .js-back a');\n\t\t\t\t\t\tbackButton.addEventListener('click', function(e){\n\t\t\t\t\t\t\te.preventDefault();\n\n\t\t\t\t\t\t\tlet parent = e.currentTarget.closest('[data-submenu-status]');\n\t\t\t\t\t\t\tparent.dataset.submenuStatus = 'closed';\n\t\t\t\t\t\t\tparent.setAttribute(\"aria-expanded\", \"false\");\n\t\t\t\t\t\t});\n\t\t\t\t});\n\t\t});\n}\n\n/**\n * Reverts changes and behaviours created by the `doMobileNavigation()` function\n */\nfunction undoMobileNavigation(\n\tattachButtonTo,\n\tbuttonPosition,\n\tnavigationContainer,\n\tsubNavSelector\n) {\n\tconst html      = document.querySelector('html');\n\tconst theMenu   = document.querySelector(navigationContainer);\n\tconst subNavs   = theMenu.querySelectorAll(subNavSelector);\n\n\thtml.removeAttribute('data-sidebar-navigation');\n\n\tlet navMenuToggle = document.querySelector('#mainNavToggle');\n\tif( navMenuToggle ) {\n\t\tdocument.querySelector('html').classList.remove(\"nav-active\");\n\t\tdocument.querySelector('#mainNavToggle').remove();\n\t\ttheMenu.removeAttribute('aria-labelledby');\n\t}\n}\n\nlet screenWidth = window.matchMedia('(max-width: 1023px)');\n\n// initial load\nif( screenWidth.matches ) {\n\tdoMobileNavigation(\n\t\t'#skipLink',\n\t\t'afterend',\n\t\t'#header',\n\t\t'[data-submenu-status]'\n\t);\n}\nelse {\n\tundoMobileNavigation(\n\t\t'#skipLink',\n\t\t'afterend',\n\t\t'#header',\n\t\t'[data-submenu-status]'\n\t);\n}\n\n// handleSubNavs('.nav_main','[data-submenu-status]');\n\n// watch for changes in window size\nscreenWidth.addEventListener(\"change\", (e) => {\n\tif( e.matches ) {\n\t\t\tdoMobileNavigation(\n\t\t\t'#skipLink',\n\t\t\t'afterend',\n\t\t\t'#header',\n\t\t\t'[data-submenu-status]'\n\t\t);\n\t}\n\telse {\n\t\tundoMobileNavigation(\n\t\t\t'#skipLink',\n\t\t\t'afterend',\n\t\t\t'#header',\n\t\t\t'[data-submenu-status]'\n\t\t);\n\t}\n});\n\n\n/* Watch for clicks outside the nav panel, and dismiss all navs as a results */\n\tfunction dismissAllNav() {\n\t\t/* If the side nav is open and we've clicked off it, just simulate a click on the toggle */\n\t\tif( document.querySelector('html').dataset.sidebarNavigation == 'open' ) {\n\t\t\tdocument.querySelector('#mainNavToggle').click();\n\t\t}\n\n\t\t/* Close all other navs too */\n\t\tconst subNavs = document.querySelectorAll('[data-submenu-status]');\n\t\tsubNavs.forEach(nav => {\n\t\t\tnav.dataset.submenuStatus = \"closed\";\n\t\t});\n\t}\n\n\t// watch for nav dismissals\n\tconst mainNavigationWrapper = document.querySelector('.nav_main');\n\tdocument.addEventListener('click', function (event) {\n\t\tif (\n\t\t\t! mainNavigationWrapper.contains(event.target)\n\t\t\t&&\n\t\t\tevent.target.getAttribute('id') != 'mainNavToggle'\n\t\t) {\n\t\t\tdismissAllNav();\n\t\t}\n\t});\n"],"names":["doMobileNavigation","attachButtonTo","buttonPosition","navigationContainer","subNavSelector","html","theMenu","subNavs","templateToggleNav","navToggle","e","subNav","undoMobileNavigation","screenWidth","dismissAllNav","nav","mainNavigationWrapper","event"],"mappings":"AAYA,SAASA,EACRC,EACAC,EACAC,EACAC,EACC,CACD,MAAMC,EAAY,SAAS,cAAc,MAAM,EACzCC,EAAY,SAAS,cAAcH,CAAmB,EACtDI,EAAUD,EAAQ,iBAAiBF,CAAc,EACjDI,EAAoB;AAAA;AAAA;AAAA;AAAA,GAOzBH,EAAK,QAAQ,kBAAoB,SAEjC,SAAS,cAAcJ,CAAc,EACnC,mBACAC,EACAM,CACJ,EAGE,MAAMC,EAAY,SAAS,cAAc,gBAAgB,EAIzDH,EAAQ,aAAa,kBAAmB,eAAe,EAGvDG,EAAU,iBAAiB,QAASC,GAAM,CAClBL,EAAK,QAAQ,mBAEZ,QAEvBI,EAAU,aAAa,gBAAiB,EAAK,EAC7CA,EAAU,aAAa,aAAa,sBAAsB,EAC1DA,EAAU,YAAc,OACxBJ,EAAK,QAAQ,kBAAoB,SAIjCE,EAAQ,QAAQI,GAAU,CACzBA,EAAO,QAAQ,cAAgB,SAC/BA,EAAO,aAAa,gBAAiB,EAAK,CAC/C,CAAK,IAGDF,EAAU,aAAa,gBAAiB,EAAI,EAC5CA,EAAU,aAAa,aAAa,uBAAuB,EAC3DA,EAAU,YAAc,QACxBJ,EAAK,QAAQ,kBAAoB,OAErC,CAAG,CACH,CAwEA,SAASO,EACRX,EACAC,EACAC,EACAC,EACC,CACD,MAAMC,EAAY,SAAS,cAAc,MAAM,EACzCC,EAAY,SAAS,cAAcH,CAAmB,EAC1CG,EAAQ,iBAAiBF,CAAc,EAEzDC,EAAK,gBAAgB,yBAAyB,EAE1B,SAAS,cAAc,gBAAgB,IAE1D,SAAS,cAAc,MAAM,EAAE,UAAU,OAAO,YAAY,EAC5D,SAAS,cAAc,gBAAgB,EAAE,OAAM,EAC/CC,EAAQ,gBAAgB,iBAAiB,EAE3C,CAEA,IAAIO,EAAc,OAAO,WAAW,qBAAqB,EAGrDA,EAAY,QACfb,EACC,YACA,WACA,UACA,uBACF,EAGCY,EACC,YACA,WACA,UACA,uBACF,EAMAC,EAAY,iBAAiB,SAAW,GAAM,CACzC,EAAE,QACJb,EACA,YACA,WACA,UACA,uBACH,EAGEY,EACC,YACA,WACA,UACA,uBACH,CAEA,CAAC,EAIA,SAASE,GAAgB,CAEpB,SAAS,cAAc,MAAM,EAAE,QAAQ,mBAAqB,QAC/D,SAAS,cAAc,gBAAgB,EAAE,MAAK,EAI/B,SAAS,iBAAiB,uBAAuB,EACzD,QAAQC,GAAO,CACtBA,EAAI,QAAQ,cAAgB,QAC/B,CAAG,CACD,CAGD,MAAMC,EAAwB,SAAS,cAAc,WAAW,EAChE,SAAS,iBAAiB,QAAS,SAAUC,EAAO,CAElD,CAAED,EAAsB,SAASC,EAAM,MAAM,GAE7CA,EAAM,OAAO,aAAa,IAAI,GAAK,iBAEnCH,GAEH,CAAE"}