Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@servicensw/navigation

Package Overview
Dependencies
Maintainers
11
Versions
197
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@servicensw/navigation - npm Package Compare versions

Comparing version 3.1.0-alpha.0 to 3.1.0-alpha.1

2

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,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")})}();
!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",e.querySelector("a").textContent),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")})}();

2

dist/secondary-nav.js

@@ -1,1 +0,1 @@

!function(){"use strict";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,s,a){SNSW.Dialogs.push({id:e,closefn:t,lastElement:a,firstElement:s})}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:s}=SNSW.Menu,a=[...s].findIndex(t=>t===e);let i=this.getNextFocusableMenuItem(a,t),n=s[i].getAttribute("tabindex");if("-1"!==n)s[i].focus();else{for(;"-1"===n;)i=this.getNextFocusableMenuItem(i,t),n=s[i].getAttribute("tabindex");s[i].focus()}SNSW.Menu.active=i}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:s}=e,a=SNSW.Popups[SNSW.Popups.length-1],i=SNSW.Dialogs[SNSW.Dialogs.length-1];switch(t){case"Escape":a?a.closefn():i&&i.closefn();break;case"Tab":i&&(document.activeElement!==i.lastElement||e.getModifierState("Shift")?document.activeElement===i.firstElement&&e.getModifierState("Shift")&&(e.preventDefault(),i.lastElement.focus()):(e.preventDefault(),i.firstElement.focus()));break;case"ArrowDown":case"ArrowRight":SNSW.Menu&&(e.preventDefault(),this.moveFocus(s));break;case"ArrowUp":case"ArrowLeft":SNSW.Menu&&(e.preventDefault(),this.moveFocus(s,!0))}}attachEventListeners(){window.addEventListener("click",this.handleGlobalClick),window.addEventListener("keydown",this.handleGlobalKeydown)}detachEventListensers(){window.removeEventListener("click",this.handleGlobalClick),window.removeEventListener("keydown",this.handleGlobalKeydown)}}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 s=e.querySelector("ul");if(s){e.classList.add("has-children"),s.setAttribute("id","secondaryNavTree"+t);const a=SecondaryNav.addToggle(e,s);(0!==e.getElementsByClassName("is-active").length||e.classList.contains("is-active"))&&SecondaryNav.expandTree(s,a)}}}),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 s=document.createElement("button");return s.classList.add("secondary-nav__toggle","reset--button"),s.setAttribute("aria-label","Expand tree"),s.setAttribute("aria-expanded","false"),s.setAttribute("aria-controls",t.getAttribute("id")),e.insertBefore(s,t),SecondaryNav.collapseTree(t,s),s.addEventListener("click",SecondaryNav.toggleTree),s}static toggleTree(e){const t=e.currentTarget,s=document.getElementById(t.getAttribute("aria-controls"));"false"===t.getAttribute("aria-expanded")?SecondaryNav.expandTree(s,t):SecondaryNav.collapseTree(s,t)}}window.SNSW=window.SNSW||{},SNSW.SecondaryNav=SecondaryNav,window.addEventListener("DOMContentLoaded",()=>{new SecondaryNav("#secondaryNav:not(.is-excluded)")})}();
!function(){"use strict";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,s,a){SNSW.Dialogs.push({id:e,closefn:t,lastElement:a,firstElement:s})}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:s}=SNSW.Menu,a=[...s].findIndex(t=>t===e);let i=this.getNextFocusableMenuItem(a,t),n=s[i].getAttribute("tabindex");if("-1"!==n)s[i].focus();else{for(;"-1"===n;)i=this.getNextFocusableMenuItem(i,t),n=s[i].getAttribute("tabindex");s[i].focus()}SNSW.Menu.active=i}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:s}=e,a=SNSW.Popups[SNSW.Popups.length-1],i=SNSW.Dialogs[SNSW.Dialogs.length-1];switch(t){case"Escape":a?a.closefn():i&&i.closefn();break;case"Tab":i&&(document.activeElement!==i.lastElement||e.getModifierState("Shift")?document.activeElement===i.firstElement&&e.getModifierState("Shift")&&(e.preventDefault(),i.lastElement.focus()):(e.preventDefault(),i.firstElement.focus()));break;case"ArrowDown":case"ArrowRight":SNSW.Menu&&(e.preventDefault(),this.moveFocus(s));break;case"ArrowUp":case"ArrowLeft":SNSW.Menu&&(e.preventDefault(),this.moveFocus(s,!0))}}attachEventListeners(){window.addEventListener("click",this.handleGlobalClick),window.addEventListener("keydown",this.handleGlobalKeydown)}detachEventListensers(){window.removeEventListener("click",this.handleGlobalClick),window.removeEventListener("keydown",this.handleGlobalKeydown)}}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 s=e.querySelector("ul");if(s){e.classList.add("has-children"),s.setAttribute("id","secondaryNavTree"+t);const a=SecondaryNav.addToggle(e,s);(0!==e.getElementsByClassName("is-active").length||e.classList.contains("is-active"))&&SecondaryNav.expandTree(s,a)}}}),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 s=document.createElement("button");return s.classList.add("secondary-nav__toggle","reset--button"),s.setAttribute("aria-label",e.querySelector("a").textContent),s.setAttribute("aria-expanded","false"),s.setAttribute("aria-controls",t.getAttribute("id")),e.insertBefore(s,t),SecondaryNav.collapseTree(t,s),s.addEventListener("click",SecondaryNav.toggleTree),s}static toggleTree(e){const t=e.currentTarget,s=document.getElementById(t.getAttribute("aria-controls"));"false"===t.getAttribute("aria-expanded")?SecondaryNav.expandTree(s,t):SecondaryNav.collapseTree(s,t)}}window.SNSW=window.SNSW||{},SNSW.SecondaryNav=SecondaryNav,window.addEventListener("DOMContentLoaded",()=>{new SecondaryNav("#secondaryNav:not(.is-excluded)")})}();

4

package.json
{
"name": "@servicensw/navigation",
"version": "3.1.0-alpha.0",
"version": "3.1.0-alpha.1",
"description": "Navigation components",

@@ -60,3 +60,3 @@ "repository": {

],
"gitHead": "2b25a2cad8378106d270f8792d3d8df5c4a8f582"
"gitHead": "c75a09c286f3d293c3278d4fbd36934b0e5363ab"
}

2

src/SecondaryNav.js

@@ -116,3 +116,3 @@ /**

toggle.classList.add("secondary-nav__toggle", "reset--button")
toggle.setAttribute("aria-label", "Expand tree")
toggle.setAttribute("aria-label", item.querySelector("a").textContent)
toggle.setAttribute("aria-expanded", "false")

@@ -119,0 +119,0 @@ toggle.setAttribute("aria-controls", menu.getAttribute("id"))

dist/index.cjs

Sorry, the diff of this file is not supported yet

src/templates/secondary-nav.twig

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc