{"version":3,"file":"responsiveNavigation-4866ea01.js","sources":["../../../src/js/modules/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 function\n */\nfunction doMobileNavigation(\n\tattachButtonTo,\n\tbuttonPosition,\n\tnavigationContainer\n) {\n\tconst html      = document.querySelector('html');\n\tconst theMenu   = document.querySelector(navigationContainer);\n\tconst subNavs   = theMenu.querySelectorAll('[data-submenu-status]');\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\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\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 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\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\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// keyboard focus\n\t\t\t\t\t// \tsubNav.addEventListener(\"focusin\", function(e) {\n\t\t\t\t\t// \t\t// whatever, we want to hide all other subNavs\n\t\t\t\t\t// \t\t\tsubNavs.forEach(a => {\n\t\t\t\t\t// \t\t\t\ta.dataset.submenuStatus = 'closed';\n\t\t\t\t\t// \t\t\t\tsubNav.setAttribute(\"aria-expanded\", \"false\");\n\t\t\t\t\t// \t\t\t});\n\t\t\t\t\t//\n\t\t\t\t\t// \t\t// now, do we need to do anything with this particular subNav?\n\t\t\t\t\t// \t\t\tlet subNavIsOpen    = subNav.dataset.submenuStatus == 'open'; // returns true|false\n\t\t\t\t\t// \t\t\tlet newSubNavStatus = !subNavIsOpen; // inverts the value\n\t\t\t\t\t//\n\t\t\t\t\t// \t\t\tsubNav.dataset.submenuStatus = newSubNavStatus ? 'open' : 'closed'; // update the data attribute\n\t\t\t\t\t// \t\t\tsubNav.setAttribute(\"aria-expanded\", newSubNavStatus); // update the aria attribute\n\t\t\t\t\t// \t});\n\t\t\t\t\t//\n\t\t\t\t\t// \tsubNav.addEventListener(\"focusout\", function(e) {\n\t\t\t\t\t// \t\t// whatever, we want to hide all other subNavs\n\t\t\t\t\t// \t\t\tsubNavs.forEach(a => {\n\t\t\t\t\t// \t\t\t\ta.dataset.submenuStatus = 'closed';\n\t\t\t\t\t// \t\t\t\tsubNav.setAttribute(\"aria-expanded\", \"false\");\n\t\t\t\t\t// \t\t\t});\n\t\t\t\t\t//\n\t\t\t\t\t// \t\t// now, do we need to do anything with this particular subNav?\n\t\t\t\t\t// \t\t\tsubNav.setAttribute(\"aria-expanded\", false); // applies new value\n\t\t\t\t\t// \t\t\tsubNav.dataset.submenuStatus = 'closed';\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\ndoMobileNavigation(\n\t'.siteTitle',\n\t'afterend',\n\t'#mainNavigationWrapper');\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('#mainNavigationWrapper');\n\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","html","theMenu","subNavs","templateToggleNav","navToggle","subNav","subNavToggle","e","clickedSubNavUl","thisSubNav","newSubNavStatus","another","parent","dismissAllNav","nav","mainNavigationWrapper","event"],"mappings":"AAWA,SAASA,EACRC,EACAC,EACAC,EACC,CACD,MAAMC,EAAY,SAAS,cAAc,MAAM,EACzCC,EAAY,SAAS,cAAcF,CAAmB,EACtDG,EAAYD,EAAQ,iBAAiB,uBAAuB,EAC5DE,EAAoB;AAAA;AAAA;AAAA;AAAA,GAOzBH,EAAK,QAAQ,kBAAoB,SAEjC,SAAS,cAAcH,CAAc,EACnC,mBACAC,EACAK,CACJ,EAGE,MAAMC,EAAY,SAAS,cAAc,gBAAgB,EAIzDH,EAAQ,aAAa,kBAAmB,eAAe,EACvDC,EAAQ,QAAQG,GAAU,CACzBA,EAAO,aAAa,gBAAiB,EAAI,EACzCA,EAAO,aAAa,gBAAiB,EAAK,CAC7C,CAAG,EAGDD,EAAU,iBAAiB,QAAS,GAAM,CAClBJ,EAAK,QAAQ,mBAEZ,QAEvBI,EAAU,aAAa,gBAAiB,EAAK,EAC7CA,EAAU,aAAa,aAAa,sBAAsB,EAC1DA,EAAU,YAAc,OACxBJ,EAAK,QAAQ,kBAAoB,SAGjCE,EAAQ,QAAQG,GAAU,CACzBA,EAAO,QAAQ,cAAgB,SAC/BA,EAAO,aAAa,gBAAiB,EAAK,CAC/C,CAAK,IAGDD,EAAU,aAAa,gBAAiB,EAAI,EAC5CA,EAAU,aAAa,aAAa,uBAAuB,EAC3DA,EAAU,YAAc,QACxBJ,EAAK,QAAQ,kBAAoB,OAErC,CAAG,EAGDE,EAAQ,QAAQG,GAAU,CACzB,IAAIC,EAAeD,EAAO,cAAc,yCAAyC,EAGlEA,EAAO,cAAc,aAAa,EACxC,mBAAmB,aAAc,qDAAqD,EAG9FC,EAAa,iBAAiB,QAAS,SAASC,EAAG,CAClDA,EAAE,eAAc,EAChB,IAAIC,EAAkBD,EAAE,cAGvBL,EAAQ,QAAQO,GAAc,CACvBA,EAAW,SAASD,CAAe,IACxCC,EAAW,QAAQ,cAAgB,SACnCJ,EAAO,aAAa,gBAAiB,OAAO,EAEpD,CAAO,EAID,IAAIK,EAAkB,EADAL,EAAO,QAAQ,eAAiB,QAGtDA,EAAO,QAAQ,cAAgBK,EAAkB,OAAS,SAC1DL,EAAO,aAAa,gBAAiBK,CAAe,EAGpDL,EAAO,iBAAiB,qCAAqC,EAAE,QAAQM,GAAW,CACjFA,EAAQ,QAAQ,cAAgB,SAChCA,EAAQ,aAAa,gBAAiB,EAAK,CAClD,CAAO,EA+BgBN,EAAO,cAAc,mBAAmB,EAC9C,iBAAiB,QAAS,SAASE,EAAE,CAC/CA,EAAE,eAAc,EAEhB,IAAIK,EAASL,EAAE,cAAc,QAAQ,uBAAuB,EAC5DK,EAAO,QAAQ,cAAgB,SAC/BA,EAAO,aAAa,gBAAiB,OAAO,CACnD,CAAO,CACP,CAAK,CACL,CAAG,CACH,CAEAhB,EACC,aACA,WACA,wBAAwB,EAGxB,SAASiB,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,wBAAwB,EAE7E,SAAS,iBAAiB,QAAS,SAAUC,EAAO,CAElD,CAAED,EAAsB,SAASC,EAAM,MAAM,GAE7CA,EAAM,OAAO,aAAa,IAAI,GAAK,iBAEnCH,GAEH,CAAE"}