@servicensw/navigation - npm Package Compare versions

Comparing version 3.0.0 to 3.1.0-alpha.0

dist/navigation.js

@@ -1,1 +0,1 @@
-!function(){"use strict";class IdAttribute{constructor(e){if("string"==typeof e){const t=document.querySelectorAll(e);t&&t.forEach(e=>{IdAttribute.addIdAttribute(e)})}else e.nodeType&&IdAttribute.addIdAttribute(e)}static addIdAttribute(e){if(e.hasAttribute("id"))return e.getAttribute("id");const t=((e,t=255)=>{if("string"!=typeof e||!e)return;e=(e=(e=(e=e.toLowerCase()).trim()).replace(/\s+/g,"-")).replace(/[^-a-z0-9]/g,"");return[...Array(6).keys()].forEach(()=>{e.charAt(0).match(/[a-zA-Z]/g)||(e=e.substring(1))}),t&&(e=e.substring(0,t+1)),e})(e.textContent);return t?(document.getElementById(t)||e.setAttribute("id",t),t):""}}class Keyboard{constructor(){this.attachPopup=this.attachPopup.bind(this),this.detachPopup=this.detachPopup.bind(this),this.attachDialog=this.attachDialog.bind(this),this.detachDialog=this.detachDialog.bind(this),this.attachMenu=this.attachMenu.bind(this),this.detachMenu=this.detachMenu.bind(this),this.moveFocus=this.moveFocus.bind(this),this.handleGlobalKeydown=this.handleGlobalKeydown.bind(this),this.attachEventListeners=this.attachEventListeners.bind(this),this.detachEventListensers=this.detachEventListensers.bind(this),window.SNSW=window.SNSW||{},SNSW.Popups=SNSW.Popups||[],SNSW.Dialogs=SNSW.Dialogs||[],SNSW.Menu=null}attachPopup(e,t){SNSW.Popups.push({id:e,closefn:t})}detachPopup(e){SNSW.Popups=SNSW.Popups.filter(t=>t.id!==e)}attachDialog(e,t,i,s){SNSW.Dialogs.push({id:e,closefn:t,lastElement:s,firstElement:i})}detachDialog(e){SNSW.Dialogs=SNSW.Dialogs.filter(t=>t.id!==e)}attachMenu(e,t){SNSW.Menu={context:e,items:t}}detachMenu(){SNSW.Menu=null}getNextFocusableMenuItem(e,t=!1){return t?0===e?SNSW.Menu.items.length-1:e-1:SNSW.Menu.items.length>e+1?e+1:0}moveFocus(e,t=!1){const{items:i}=SNSW.Menu,s=[...i].findIndex(t=>t===e);let n=this.getNextFocusableMenuItem(s,t),a=i[n].getAttribute("tabindex");if("-1"!==a)i[n].focus();else{for(;"-1"===a;)n=this.getNextFocusableMenuItem(n,t),a=i[n].getAttribute("tabindex");i[n].focus()}SNSW.Menu.active=n}handleGlobalClick(){const e=SNSW.Popups[SNSW.Popups.length-1],t=SNSW.Dialogs[SNSW.Dialogs.length-1];e&&e.closefn(),t&&t.closefn()}handleGlobalKeydown(e){const{key:t,target:i}=e,s=SNSW.Popups[SNSW.Popups.length-1],n=SNSW.Dialogs[SNSW.Dialogs.length-1];switch(t){case"Escape":s?s.closefn():n&&n.closefn();break;case"Tab":n&&(document.activeElement!==n.lastElement||e.getModifierState("Shift")?document.activeElement===n.firstElement&&e.getModifierState("Shift")&&(e.preventDefault(),n.lastElement.focus()):(e.preventDefault(),n.firstElement.focus()));break;case"ArrowDown":case"ArrowRight":SNSW.Menu&&(e.preventDefault(),this.moveFocus(i));break;case"ArrowUp":case"ArrowLeft":SNSW.Menu&&(e.preventDefault(),this.moveFocus(i,!0))}}attachEventListeners(){window.addEventListener("click",this.handleGlobalClick),window.addEventListener("keydown",this.handleGlobalKeydown)}detachEventListensers(){window.removeEventListener("click",this.handleGlobalClick),window.removeEventListener("keydown",this.handleGlobalKeydown)}}class StickyNav{constructor(e,t){this.element=document.querySelector(e),this.element&&(this.parent=this.element.closest(".sticky-nav"),this.parent&&(this.content=document.querySelector(t),this.content&&(this.headings=this.content.querySelectorAll("h2:not(.is-excluded)"),this.headings&&(this.keyboard=new Keyboard,this.anchorClickHandler=this.anchorClickHandler.bind(this),this.menuClickHandler=this.menuClickHandler.bind(this),this.menuKeyDownHandler=this.menuKeyDownHandler.bind(this),this.resizeHandler=this.resizeHandler.bind(this),this.scrollHandler=this.scrollHandler.bind(this),this.targets=new Map,this.menuLinks=new Map,this.allowScrollActiveTransition=!0,document.body.classList.add("has-sticky-nav"),this.nav=document.createElement("ul"),this.nav.setAttribute("id","stickyNavMenu"),this.nav.setAttribute("role","menubar"),this.parent.classList.contains("sticky-nav--vertical")?(this.vertical=!0,document.body.classList.remove("has-sticky-nav")):(this.vertical=!1,document.body.classList.add("has-sticky-nav"),this.width=0),this.scrollObserver=new IntersectionObserver(([e])=>this.scrollHandler(e),{rootMargin:"0px 0px -90%",threshold:[0,1]}),this.resizeObserver=new ResizeObserver(([e])=>this.resizeHandler(e)),this.resizeObserver.observe(this.element),this.headings.forEach((e,t)=>{new IdAttribute(e);const i=e.id;if(i){e.setAttribute("tabindex","-1");const s=document.createElement("li");s.setAttribute("role","none");const n=document.createElement("a");n.setAttribute("href","#"+i),n.setAttribute("role","menuitem"),n.textContent=e.dataset.shortTitle?e.dataset.shortTitle:e.textContent,n.addEventListener("click",this.anchorClickHandler),0===t&&n.classList.add("is-active"),s.appendChild(n),this.nav.appendChild(s),this.targets.set(e,t),this.menuLinks.set(n,t),this.scrollObserver.observe(e)}}),this.nav.firstChild&&(this.element.appendChild(this.nav),this.menuItems=this.element.querySelectorAll("a"),document.addEventListener("click",({target:e})=>{e instanceof HTMLAnchorElement&&!this.menuLinks.has(e)&&(this.switchScrollActiveTransition(),this.setActiveAnchor(0))}),setTimeout(()=>{this.vertical?window.matchMedia("(max-width: 767px)").matches&&this.collapsedMode(!0):(this.nav.querySelectorAll("li").forEach(e=>{this.width+=e.offsetWidth}),this.width+=40*(this.nav.children.length-1),this.width>this.element.offsetWidth&&this.collapsedMode(!0))},500),this.keyboard&&(this.nav.addEventListener("focusin",()=>{this.keyboard.attachMenu(this,this.menuItems)}),this.nav.addEventListener("focusout",()=>{this.keyboard.detachMenu()})))))))}setActiveAnchor(e){if(e!==this.activeIndex){const t=this.menuItems[this.activeIndex],i=this.menuItems[e];t&&t.classList.remove("is-active"),i&&i.classList.add("is-active"),this.activeIndex=e}}switchScrollActiveTransition(){this.allowScrollActiveTransition=!1,setTimeout(()=>{this.allowScrollActiveTransition=!0},4e3,this)}collapsedMode(e){if(e!==this.isCollapsed){if(e)return this.isCollapsed=!0,this.element.setAttribute("aria-expanded","false"),this.toggleVisibility(!1),this.parent.classList.add("sticky-nav--collapsed"),this.element.setAttribute("aria-controls","stickyNavMenu"),this.element.querySelector(".is-active"),this.nav.addEventListener("click",this.menuClickHandler),void this.nav.addEventListener("keydown",this.menuKeyDownHandler);this.isCollapsed=!1,this.element.removeAttribute("aria-expanded"),this.nav.classList.remove("accordion--hidden"),this.nav.classList.remove("accordion--visible"),this.parent.classList.remove("sticky-nav--collapsed"),this.element.removeAttribute("aria-controls"),this.element.querySelector(".is-active"),this.nav.removeEventListener("click",this.menuClickHandler),this.nav.removeEventListener("keydown",this.menuKeyDownHandler)}}openMenu(e){e=e||0,this.element.setAttribute("aria-expanded","true"),this.toggleVisibility(!0),this.menuItems[e].focus(),this.keyboard&&this.keyboard.attachPopup("StickyNav",this.closeMenu)}closeMenu(e){e=e||!0,this.element.setAttribute("aria-expanded","false"),this.toggleVisibility(!1),e&&this.nav.querySelector(".is-active").focus(),this.keyboard&&this.keyboard.detachPopup("StickyNav")}anchorClickHandler(e){const{currentTarget:t}=e;if("false"===this.element.getAttribute("aria-expanded"))return;this.switchScrollActiveTransition();const i=this.menuLinks.get(t);this.setActiveAnchor(i)}menuClickHandler(e){if(e.stopPropagation(),this.isCollapsed){if("false"===this.element.getAttribute("aria-expanded"))return void this.openMenu();this.closeMenu(!1)}}menuKeyDownHandler(e){if(this.isCollapsed&&"false"===this.element.getAttribute("aria-expanded"))switch(e.key){case"Enter":case" ":case"ArrowDown":e.preventDefault(),e.stopPropagation(),this.openMenu();break;case"ArrowUp":e.preventDefault(),e.stopPropagation(),this.openMenu(this.menuLinks.size-1)}}scrollHandler({target:e}){if(!this.allowScrollActiveTransition)return;const t=this.targets.get(e);this.setActiveAnchor(t)}resizeHandler({contentRect:e}){this.vertical?this.collapsedMode(window.matchMedia("(max-width: 767px)").matches):this.collapsedMode(this.width>e.width)}toggleVisibility(e){e?(this.nav.classList.remove("sticky-nav--hidden"),this.nav.classList.add("sticky-nav--visible")):(this.nav.classList.add("sticky-nav--hidden"),this.nav.classList.remove("sticky-nav--visible"))}}window.SNSW=window.SNSW||{},SNSW.StickyNav=StickyNav,window.addEventListener("DOMContentLoaded",()=>{new StickyNav("#stickyNav:not(.is-excluded)","#stickyNavContainer")});class SecondaryNav{constructor(e){this.element=document.querySelector(e),this.element&&(this.keyboard=new Keyboard,this.tree=this.element.querySelector("ul"),this.groups=this.tree.querySelectorAll("ul"),this.links=this.element.querySelectorAll("a"),this.links.forEach(e=>{e.parentElement.classList.contains("is-active")&&e.setAttribute("aria-current","page")}),this.items=this.tree.querySelectorAll("li"),this.items.forEach((e,t)=>{if(0!==t){const i=e.querySelector("ul");if(i){e.classList.add("has-children"),i.setAttribute("id","secondaryNavTree"+t);const s=SecondaryNav.addToggle(e,i);(0!==e.getElementsByClassName("is-active").length||e.classList.contains("is-active"))&&SecondaryNav.expandTree(i,s)}}}),this.focusableItems=this.element.querySelectorAll('ul:not([role="group"]) [role="treeitem"], ul:not([role="group"]) button[aria-controls]'),this.keyboard&&(this.element.addEventListener("focusin",()=>{this.keyboard.attachMenu(this,this.focusableItems)}),this.element.addEventListener("focusout",()=>{this.keyboard.detachMenu()})))}static expandTree(e,t){t.setAttribute("aria-expanded","true"),e.classList.add("secondary-nav--visible")}static collapseTree(e,t){t.setAttribute("aria-expanded","false"),e.classList.remove("secondary-nav--visible")}static activeItem(e){e.setAttribute("aria-current","page"),e.parentElement.classList.add("is-active")}static addToggle(e,t){const i=document.createElement("button");return i.classList.add("secondary-nav__toggle","reset--button"),i.setAttribute("aria-label","Expand tree"),i.setAttribute("aria-expanded","false"),i.setAttribute("aria-controls",t.getAttribute("id")),e.insertBefore(i,t),SecondaryNav.collapseTree(t,i),i.addEventListener("click",SecondaryNav.toggleTree),i}static toggleTree(e){const t=e.currentTarget,i=document.getElementById(t.getAttribute("aria-controls"));"false"===t.getAttribute("aria-expanded")?SecondaryNav.expandTree(i,t):SecondaryNav.collapseTree(i,t)}}window.SNSW=window.SNSW||{},SNSW.SecondaryNav=SecondaryNav,window.addEventListener("DOMContentLoaded",()=>{new SecondaryNav("#secondaryNav:not(.is-excluded)")});class TableOfContents{constructor(e,t){this.element=document.querySelector(e),this.element&&(this.container=document.querySelector(t),this.container&&(this.headings=this.container.querySelectorAll("h2:not(.is-excluded)"),this.headings&&(this.toc=document.createElement("ul"),this.headings.forEach(e=>{new IdAttribute(e),e.id&&this.toc.appendChild(TableOfContents.buildMenuItem(e,e.id))}),this.toc.firstChild&&(this.element.innerHTML='<div class="toc__title" id="tocTitle">On this page</div>',this.element.setAttribute("aria-labelledby","tocTitle"),this.element.appendChild(this.toc)))))}static buildMenuItem(e,t){const i=document.createElement("li"),s=document.createElement("a");return s.setAttribute("href","#"+t),s.textContent=e.dataset.shortTitle?e.dataset.shortTitle:e.textContent,i.appendChild(s),i}}window.SNSW=window.SNSW||{},SNSW.TableOfContents=TableOfContents,window.addEventListener("DOMContentLoaded",()=>{new TableOfContents("#toc:not(.is-excluded)","#tocContainer")})}();
+!function(){"use strict";class IdAttribute{constructor(e){if("string"==typeof e){const t=document.querySelectorAll(e);t&&t.forEach(e=>{IdAttribute.addIdAttribute(e)})}else e.nodeType&&IdAttribute.addIdAttribute(e)}static addIdAttribute(e){if(e.hasAttribute("id"))return e.getAttribute("id");const t=((e,t=255)=>{if("string"!=typeof e||!e)return;e=(e=(e=(e=e.toLowerCase()).trim()).replace(/\s+/g,"-")).replace(/[^-a-z0-9]/g,"");return[...Array(6).keys()].forEach(()=>{e.charAt(0).match(/[a-zA-Z]/g)||(e=e.substring(1))}),t&&(e=e.substring(0,t+1)),e})(e.textContent);return t?(document.getElementById(t)||e.setAttribute("id",t),t):""}}class Keyboard{constructor(){this.attachPopup=this.attachPopup.bind(this),this.detachPopup=this.detachPopup.bind(this),this.attachDialog=this.attachDialog.bind(this),this.detachDialog=this.detachDialog.bind(this),this.attachMenu=this.attachMenu.bind(this),this.detachMenu=this.detachMenu.bind(this),this.moveFocus=this.moveFocus.bind(this),this.handleGlobalKeydown=this.handleGlobalKeydown.bind(this),this.attachEventListeners=this.attachEventListeners.bind(this),this.detachEventListensers=this.detachEventListensers.bind(this),window.SNSW=window.SNSW||{},SNSW.Popups=SNSW.Popups||[],SNSW.Dialogs=SNSW.Dialogs||[],SNSW.Menu=null}attachPopup(e,t){SNSW.Popups.push({id:e,closefn:t})}detachPopup(e){SNSW.Popups=SNSW.Popups.filter(t=>t.id!==e)}attachDialog(e,t,i,s){SNSW.Dialogs.push({id:e,closefn:t,lastElement:s,firstElement:i})}detachDialog(e){SNSW.Dialogs=SNSW.Dialogs.filter(t=>t.id!==e)}attachMenu(e,t){SNSW.Menu={context:e,items:t}}detachMenu(){SNSW.Menu=null}getNextFocusableMenuItem(e,t=!1){return t?0===e?SNSW.Menu.items.length-1:e-1:SNSW.Menu.items.length>e+1?e+1:0}moveFocus(e,t=!1){const{items:i}=SNSW.Menu,s=[...i].findIndex(t=>t===e);let n=this.getNextFocusableMenuItem(s,t),a=i[n].getAttribute("tabindex");if("-1"!==a)i[n].focus();else{for(;"-1"===a;)n=this.getNextFocusableMenuItem(n,t),a=i[n].getAttribute("tabindex");i[n].focus()}SNSW.Menu.active=n}handleGlobalClick(){const e=SNSW.Popups[SNSW.Popups.length-1],t=SNSW.Dialogs[SNSW.Dialogs.length-1];e&&e.closefn(),t&&t.closefn()}handleGlobalKeydown(e){const{key:t,target:i}=e,s=SNSW.Popups[SNSW.Popups.length-1],n=SNSW.Dialogs[SNSW.Dialogs.length-1];switch(t){case"Escape":s?s.closefn():n&&n.closefn();break;case"Tab":n&&(document.activeElement!==n.lastElement||e.getModifierState("Shift")?document.activeElement===n.firstElement&&e.getModifierState("Shift")&&(e.preventDefault(),n.lastElement.focus()):(e.preventDefault(),n.firstElement.focus()));break;case"ArrowDown":case"ArrowRight":SNSW.Menu&&(e.preventDefault(),this.moveFocus(i));break;case"ArrowUp":case"ArrowLeft":SNSW.Menu&&(e.preventDefault(),this.moveFocus(i,!0))}}attachEventListeners(){window.addEventListener("click",this.handleGlobalClick),window.addEventListener("keydown",this.handleGlobalKeydown)}detachEventListensers(){window.removeEventListener("click",this.handleGlobalClick),window.removeEventListener("keydown",this.handleGlobalKeydown)}}class StickyNav{constructor(e,t){this.element=document.querySelector(e),this.element&&(this.parent=this.element.closest(".sticky-nav"),this.parent&&(this.content=document.querySelector(t),this.content&&(this.headings=this.content.querySelectorAll("h2:not(.is-excluded)"),this.headings&&(this.keyboard=new Keyboard,this.anchorClickHandler=this.anchorClickHandler.bind(this),this.menuClickHandler=this.menuClickHandler.bind(this),this.menuKeyDownHandler=this.menuKeyDownHandler.bind(this),this.resizeHandler=this.resizeHandler.bind(this),this.scrollHandler=this.scrollHandler.bind(this),this.targets=new Map,this.menuLinks=new Map,this.allowScrollActiveTransition=!0,document.body.classList.add("has-sticky-nav"),this.nav=document.createElement("ul"),this.nav.setAttribute("id","stickyNavMenu"),this.nav.setAttribute("role","menubar"),this.parent.classList.contains("sticky-nav--vertical")?(this.vertical=!0,document.body.classList.remove("has-sticky-nav")):(this.vertical=!1,document.body.classList.add("has-sticky-nav"),this.width=0),this.scrollObserver=new IntersectionObserver(([e])=>this.scrollHandler(e),{rootMargin:"0px 0px -90%",threshold:[0,1]}),this.resizeObserver=new ResizeObserver(([e])=>this.resizeHandler(e)),this.resizeObserver.observe(this.element),this.headings.forEach((e,t)=>{new IdAttribute(e);const i=e.id;if(i){e.setAttribute("tabindex","-1");const s=document.createElement("li");s.setAttribute("role","none");const n=document.createElement("a");n.setAttribute("href","#"+i),n.setAttribute("role","menuitem"),n.textContent=e.dataset.shortTitle?e.dataset.shortTitle:e.textContent,n.addEventListener("click",this.anchorClickHandler),0===t&&n.classList.add("is-active"),s.appendChild(n),this.nav.appendChild(s),this.targets.set(e,t),this.menuLinks.set(n,t),this.scrollObserver.observe(e)}}),this.nav.firstChild&&(this.element.appendChild(this.nav),this.menuItems=this.element.querySelectorAll("a"),document.addEventListener("click",({target:e})=>{e instanceof HTMLAnchorElement&&!this.menuLinks.has(e)&&(this.switchScrollActiveTransition(),this.setActiveAnchor(0))}),setTimeout(()=>{this.vertical?window.matchMedia("(max-width: 767px)").matches&&this.collapsedMode(!0):(this.nav.querySelectorAll("li").forEach(e=>{this.width+=e.offsetWidth}),this.width+=40*(this.nav.children.length-1),this.width>this.element.offsetWidth&&this.collapsedMode(!0))},500),this.keyboard&&(this.nav.addEventListener("focusin",()=>{this.keyboard.attachMenu(this,this.menuItems)}),this.nav.addEventListener("focusout",()=>{this.keyboard.detachMenu()})))))))}setActiveAnchor(e){if(e!==this.activeIndex){const t=this.menuItems[this.activeIndex],i=this.menuItems[e];t&&t.classList.remove("is-active"),i&&i.classList.add("is-active"),this.activeIndex=e}}switchScrollActiveTransition(){this.allowScrollActiveTransition=!1,setTimeout(()=>{this.allowScrollActiveTransition=!0},4e3,this)}collapsedMode(e){if(e!==this.isCollapsed){if(e)return this.isCollapsed=!0,this.element.setAttribute("aria-expanded","false"),this.toggleVisibility(!1),this.parent.classList.add("sticky-nav--collapsed"),this.element.setAttribute("aria-controls","stickyNavMenu"),this.element.querySelector(".is-active"),this.nav.addEventListener("click",this.menuClickHandler),void this.nav.addEventListener("keydown",this.menuKeyDownHandler);this.isCollapsed=!1,this.element.removeAttribute("aria-expanded"),this.nav.classList.remove("accordion--hidden"),this.nav.classList.remove("accordion--visible"),this.parent.classList.remove("sticky-nav--collapsed"),this.element.removeAttribute("aria-controls"),this.element.querySelector(".is-active"),this.nav.removeEventListener("click",this.menuClickHandler),this.nav.removeEventListener("keydown",this.menuKeyDownHandler)}}openMenu(e){e=e||0,this.element.setAttribute("aria-expanded","true"),this.toggleVisibility(!0),this.menuItems[e].focus(),this.keyboard&&this.keyboard.attachPopup("StickyNav",this.closeMenu)}closeMenu(e){e=e||!0,this.element.setAttribute("aria-expanded","false"),this.toggleVisibility(!1),e&&this.nav.querySelector(".is-active").focus(),this.keyboard&&this.keyboard.detachPopup("StickyNav")}anchorClickHandler(e){const{currentTarget:t}=e;if("false"===this.element.getAttribute("aria-expanded"))return;this.switchScrollActiveTransition();const i=this.menuLinks.get(t);this.setActiveAnchor(i)}menuClickHandler(e){if(e.stopPropagation(),this.isCollapsed){if("false"===this.element.getAttribute("aria-expanded"))return void this.openMenu();this.closeMenu(!1)}}menuKeyDownHandler(e){if(this.isCollapsed&&"false"===this.element.getAttribute("aria-expanded"))switch(e.key){case"Enter":case" ":case"ArrowDown":e.preventDefault(),e.stopPropagation(),this.openMenu();break;case"ArrowUp":e.preventDefault(),e.stopPropagation(),this.openMenu(this.menuLinks.size-1)}}scrollHandler({target:e}){if(!this.allowScrollActiveTransition)return;const t=this.targets.get(e);this.setActiveAnchor(t)}resizeHandler({contentRect:e}){this.vertical?this.collapsedMode(window.matchMedia("(max-width: 767px)").matches):this.collapsedMode(this.width>e.width)}toggleVisibility(e){e?(this.nav.classList.remove("sticky-nav--hidden"),this.nav.classList.add("sticky-nav--visible")):(this.nav.classList.add("sticky-nav--hidden"),this.nav.classList.remove("sticky-nav--visible"))}}window.SNSW=window.SNSW||{},SNSW.StickyNav=StickyNav,window.addEventListener("DOMContentLoaded",()=>{new StickyNav("#stickyNav:not(.is-excluded)","#stickyNavContainer")});class SecondaryNav{constructor(e){this.element=document.querySelector(e),this.element&&(this.keyboard=new Keyboard,this.tree=this.element.querySelector("ul"),this.groups=this.tree.querySelectorAll("ul"),this.links=this.element.querySelectorAll("a"),this.links.forEach(e=>{e.parentElement.classList.contains("is-active")&&e.setAttribute("aria-current","page")}),this.items=this.tree.querySelectorAll("li"),this.items.forEach((e,t)=>{if(0!==t){const i=e.querySelector("ul");if(i){e.classList.add("has-children"),i.setAttribute("id","secondaryNavTree"+t);const s=SecondaryNav.addToggle(e,i);(0!==e.getElementsByClassName("is-active").length||e.classList.contains("is-active"))&&SecondaryNav.expandTree(i,s)}}}),this.focusableItems=this.element.querySelectorAll('ul:not([role="group"]) [role="treeitem"], ul:not([role="group"]) button[aria-controls]'),this.keyboard&&(this.element.addEventListener("focusin",()=>{this.keyboard.attachMenu(this,this.focusableItems)}),this.element.addEventListener("focusout",()=>{this.keyboard.detachMenu()})))}static expandTree(e,t){t.setAttribute("aria-expanded","true"),e.classList.add("secondary-nav--visible")}static collapseTree(e,t){t.setAttribute("aria-expanded","false"),e.classList.remove("secondary-nav--visible")}static activeItem(e){e.setAttribute("aria-current","page"),e.parentElement.classList.add("is-active")}static addToggle(e,t){const i=document.createElement("button");return i.classList.add("secondary-nav__toggle","reset--button"),i.setAttribute("aria-label","Expand tree"),i.setAttribute("aria-expanded","false"),i.setAttribute("aria-controls",t.getAttribute("id")),e.insertBefore(i,t),SecondaryNav.collapseTree(t,i),i.addEventListener("click",SecondaryNav.toggleTree),i}static toggleTree(e){const t=e.currentTarget,i=document.getElementById(t.getAttribute("aria-controls"));"false"===t.getAttribute("aria-expanded")?SecondaryNav.expandTree(i,t):SecondaryNav.collapseTree(i,t)}}window.SNSW=window.SNSW||{},SNSW.SecondaryNav=SecondaryNav,window.addEventListener("DOMContentLoaded",()=>{new SecondaryNav("#secondaryNav:not(.is-excluded)")});class TableOfContents{constructor(e,t,i="h2:not(.is-excluded)"){this.element=document.querySelector(e),this.element&&(this.container=document.querySelector(t),this.container&&(this.headings=this.container.querySelectorAll(i),this.headings&&(this.toc=document.createElement("ul"),this.headings.forEach(e=>{new IdAttribute(e),e.id&&this.toc.appendChild(TableOfContents.buildMenuItem(e,e.id))}),this.toc.firstChild&&(this.element.innerHTML='<div class="toc__title" id="tocTitle">On this page</div>',this.element.setAttribute("aria-labelledby","tocTitle"),this.element.appendChild(this.toc)))))}static buildMenuItem(e,t){const i=document.createElement("li"),s=document.createElement("a");return s.setAttribute("href","#"+t),s.textContent=e.dataset.shortTitle?e.dataset.shortTitle:e.textContent,i.appendChild(s),i}}window.SNSW=window.SNSW||{},SNSW.TableOfContents=TableOfContents,window.addEventListener("DOMContentLoaded",()=>{new TableOfContents("#toc:not(.is-excluded)","#tocContainer")})}();

dist/table-of-contents.js

@@ -1,1 +0,1 @@
-!function(){"use strict";class IdAttribute{constructor(t){if("string"==typeof t){const e=document.querySelectorAll(t);e&&e.forEach(t=>{IdAttribute.addIdAttribute(t)})}else t.nodeType&&IdAttribute.addIdAttribute(t)}static addIdAttribute(t){if(t.hasAttribute("id"))return t.getAttribute("id");const e=((t,e=255)=>{if("string"!=typeof t||!t)return;t=(t=(t=(t=t.toLowerCase()).trim()).replace(/\s+/g,"-")).replace(/[^-a-z0-9]/g,"");return[...Array(6).keys()].forEach(()=>{t.charAt(0).match(/[a-zA-Z]/g)||(t=t.substring(1))}),e&&(t=t.substring(0,e+1)),t})(t.textContent);return e?(document.getElementById(e)||t.setAttribute("id",e),e):""}}class TableOfContents{constructor(t,e){this.element=document.querySelector(t),this.element&&(this.container=document.querySelector(e),this.container&&(this.headings=this.container.querySelectorAll("h2:not(.is-excluded)"),this.headings&&(this.toc=document.createElement("ul"),this.headings.forEach(t=>{new IdAttribute(t),t.id&&this.toc.appendChild(TableOfContents.buildMenuItem(t,t.id))}),this.toc.firstChild&&(this.element.innerHTML='<div class="toc__title" id="tocTitle">On this page</div>',this.element.setAttribute("aria-labelledby","tocTitle"),this.element.appendChild(this.toc)))))}static buildMenuItem(t,e){const n=document.createElement("li"),i=document.createElement("a");return i.setAttribute("href","#"+e),i.textContent=t.dataset.shortTitle?t.dataset.shortTitle:t.textContent,n.appendChild(i),n}}window.SNSW=window.SNSW||{},SNSW.TableOfContents=TableOfContents,window.addEventListener("DOMContentLoaded",()=>{new TableOfContents("#toc:not(.is-excluded)","#tocContainer")})}();
+!function(){"use strict";class IdAttribute{constructor(t){if("string"==typeof t){const e=document.querySelectorAll(t);e&&e.forEach(t=>{IdAttribute.addIdAttribute(t)})}else t.nodeType&&IdAttribute.addIdAttribute(t)}static addIdAttribute(t){if(t.hasAttribute("id"))return t.getAttribute("id");const e=((t,e=255)=>{if("string"!=typeof t||!t)return;t=(t=(t=(t=t.toLowerCase()).trim()).replace(/\s+/g,"-")).replace(/[^-a-z0-9]/g,"");return[...Array(6).keys()].forEach(()=>{t.charAt(0).match(/[a-zA-Z]/g)||(t=t.substring(1))}),e&&(t=t.substring(0,e+1)),t})(t.textContent);return e?(document.getElementById(e)||t.setAttribute("id",e),e):""}}class TableOfContents{constructor(t,e,n="h2:not(.is-excluded)"){this.element=document.querySelector(t),this.element&&(this.container=document.querySelector(e),this.container&&(this.headings=this.container.querySelectorAll(n),this.headings&&(this.toc=document.createElement("ul"),this.headings.forEach(t=>{new IdAttribute(t),t.id&&this.toc.appendChild(TableOfContents.buildMenuItem(t,t.id))}),this.toc.firstChild&&(this.element.innerHTML='<div class="toc__title" id="tocTitle">On this page</div>',this.element.setAttribute("aria-labelledby","tocTitle"),this.element.appendChild(this.toc)))))}static buildMenuItem(t,e){const n=document.createElement("li"),i=document.createElement("a");return i.setAttribute("href","#"+e),i.textContent=t.dataset.shortTitle?t.dataset.shortTitle:t.textContent,n.appendChild(i),n}}window.SNSW=window.SNSW||{},SNSW.TableOfContents=TableOfContents,window.addEventListener("DOMContentLoaded",()=>{new TableOfContents("#toc:not(.is-excluded)","#tocContainer")})}();

package.json

 {
   "name": "@servicensw/navigation",
-  "version": "3.0.0",
+  "version": "3.1.0-alpha.0",
   "description": "Navigation components",
@@ -60,3 +60,3 @@ "repository": {
   ],
-  "gitHead": "b07273066bac0717a9f41b98e9cb6e72b5c73415"
+  "gitHead": "2b25a2cad8378106d270f8792d3d8df5c4a8f582"
 }

src/TableOfContents.js

@@ -12,4 +12,5 @@ /**
    * @param {string} container - CSS selector for container element.
+   * @param {string} headingSelector - CSS selector for heading elements.
    */
-  constructor(selector, container) {
+  constructor(selector, container, headingSelector = "h2:not(.is-excluded)") {
     this.element = document.querySelector(selector)
@@ -24,3 +25,3 @@ if (!this.element) {
     }
-    this.headings = this.container.querySelectorAll("h2:not(.is-excluded)")
+    this.headings = this.container.querySelectorAll(headingSelector)
     if (!this.headings) {
@@ -27,0 +28,0 @@ return

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

98456

increased by0.13%

Lines of code

1354

increased by0.07%

Worsened metrics

Number of low quality alerts

2

increased by100%

No dependency changes