@meom/navigation
Advanced tools
Comparing version 0.3.0 to 0.4.0
# Changelog | ||
## Version 0.4.0 released November 7, 2021 | ||
### Updated | ||
- Documentation. | ||
## Added | ||
- Two new demos with multiple navs. | ||
## Version 0.3.0 released November 1, 2021 | ||
@@ -4,0 +10,0 @@ ### Added |
@@ -28,2 +28,4 @@ (() => { | ||
action: "click", | ||
subNavAnchors: ".js-site-nav-items > .menu-item-has-children > a", | ||
subSubNavAnchors: ".js-site-nav-items .sub-menu > .menu-item-has-children > a", | ||
toggleNavClass: true, | ||
@@ -34,4 +36,2 @@ toggleNavClassValue: "is-opened", | ||
closeNavOnLastTab: false, | ||
subNavAnchors: ".menu-item-has-children.is-item-level-0 > a", | ||
subSubNavAnchors: "ul .menu-item-has-children > a", | ||
subNavClass: ".sub-menu", | ||
@@ -79,6 +79,2 @@ subToggleButtonClasses: "", | ||
subToggleButton.setAttribute("aria-expanded", "false"); | ||
subToggleButton.setAttribute("aria-controls", `sub-menu-${index}`); | ||
if (subNav.nextElementSibling) { | ||
subNav.nextElementSibling.id = `sub-menu-${index}`; | ||
} | ||
subToggleButton.className = `${this.settings.subToggleButtonClasses}`; | ||
@@ -302,2 +298,12 @@ subToggleButton.type = "button"; | ||
}); | ||
var footerElement = document.querySelector(".js-secondary-nav-items"); | ||
var footerToggle = document.querySelector(".js-secondary-nav-toggle"); | ||
if (footerElement && footerToggle) { | ||
new Navigation(footerElement, footerToggle, { | ||
subNavAnchors: ".js-secondary-nav-items > .menu-item-has-children > a", | ||
subSubNavAnchors: ".js-secondary-nav-items .sub-menu > .menu-item-has-children > a", | ||
subToggleButtonClasses: "site-nav__sub-toggle", | ||
subSubToggleButtonClasses: "site-nav__sub-sub-toggle" | ||
}); | ||
} | ||
})(); |
@@ -7,3 +7,3 @@ { | ||
"scripts": { | ||
"build": "esbuild src/navigation.js --bundle --outfile=dist/navigation.js" | ||
"build": "esbuild src/navigation.js src/navigation-multiple.js --bundle --outdir=dist" | ||
}, | ||
@@ -16,4 +16,4 @@ "author": "", | ||
"devDependencies": { | ||
"esbuild": "^0.12.20" | ||
"esbuild": "^0.12.25" | ||
} | ||
} |
@@ -36,1 +36,20 @@ import { Navigation, animate } from "@meom/navigation"; | ||
}); | ||
/** | ||
* Footer demo when multiple navs on the page. | ||
*/ | ||
// Mandatory elements. | ||
const footerElement = document.querySelector(".js-secondary-nav-items"); | ||
const footerToggle = document.querySelector(".js-secondary-nav-toggle"); | ||
if ( footerElement && footerToggle ) { | ||
new Navigation(footerElement, footerToggle, { | ||
subNavAnchors: ".js-secondary-nav-items > .menu-item-has-children > a", | ||
subSubNavAnchors: | ||
".js-secondary-nav-items .sub-menu > .menu-item-has-children > a", | ||
subToggleButtonClasses: "site-nav__sub-toggle", | ||
subSubToggleButtonClasses: "site-nav__sub-sub-toggle", | ||
}); | ||
} |
@@ -69,2 +69,4 @@ /** | ||
action: 'click', | ||
subNavAnchors: '.js-site-nav-items > .menu-item-has-children > a', | ||
subSubNavAnchors: '.js-site-nav-items .sub-menu > .menu-item-has-children > a', | ||
toggleNavClass: true, | ||
@@ -75,4 +77,2 @@ toggleNavClassValue: 'is-opened', | ||
closeNavOnLastTab: false, | ||
subNavAnchors: '.menu-item-has-children.is-item-level-0 > a', | ||
subSubNavAnchors: 'ul .menu-item-has-children > a', | ||
subNavClass: '.sub-menu', | ||
@@ -148,8 +148,2 @@ subToggleButtonClasses: '', | ||
subToggleButton.setAttribute( 'aria-controls', `sub-menu-${ index }` ); | ||
// Add matching id for next sub-menu. | ||
if ( subNav.nextElementSibling ) { | ||
subNav.nextElementSibling.id = `sub-menu-${ index }`; | ||
} | ||
subToggleButton.className = `${ this.settings.subToggleButtonClasses }`; | ||
@@ -156,0 +150,0 @@ subToggleButton.type = 'button'; |
@@ -1,2 +0,2 @@ | ||
/*! navigation 0.2.0 — © MEOM */ | ||
function t(t,e,s){t&&e&&(t.classList.add(e),t.addEventListener("animationend",(function n(){t.classList.remove(e),s&&t.classList.remove(s),t.removeEventListener("animationend",n,!1)}),!1))}function e(t,e){if(void 0===t||0>=e.length)return;const s="true"===t.getAttribute(`aria-${e}`)?"false":"true";t.setAttribute(`aria-${e}`,s)}function s(t,e,s={}){this._handleNav=this.handleNav.bind(this),this._handleSubNav=this.handleSubNav.bind(this),this._handleCloseNav=this.handleCloseNav.bind(this),this._handleCloseSubNav=this.handleCloseSubNav.bind(this),this._closeAllSubMenus=this.closeAllSubMenus.bind(this),this._setSubMenu=this.setSubMenu.bind(this),this._closeAllSubMenuToggles=this.closeAllSubMenuToggles.bind(this),this._handleDocClick=this.handleDocClick.bind(this),this._handleFocus=this.handleFocus.bind(this);const n={action:"click",toggleNavClass:!0,toggleNavClassValue:"is-opened",toggleSubNavClassValue:"is-opened",closeNavOnEscKey:!0,closeNavOnLastTab:!1,subNavAnchors:".menu-item-has-children.is-item-level-0 > a",subSubNavAnchors:"ul .menu-item-has-children > a",subNavClass:".sub-menu",subToggleButtonClasses:"",subSubToggleButtonClasses:"",animateSubNav:!1,animateSubNavClass:"",visuallyHiddenClass:"screen-reader-text",expandChildNavText:"Sub menu",dropDownIcon:'<svg class="icon" aria-hidden="true" focusable="false" width="13" height="8" viewBox="0 0 13 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1l4.793 4.793a1 1 0 001.414 0L12 1" stroke-width="2" stroke-linecap="round"></path></svg>',onCreate:null,onOpenNav:null,onCloseNav:null,onOpenSubNav:null,onCloseSubNav:null,...s};this.$element=t,this.$toggle=e,this.settings=n,this.navOpened=!1,this.$subNavs=this.$element.querySelectorAll(this.settings.subNavAnchors),this.$subSubNavs=this.$element.querySelectorAll(this.settings.subSubNavAnchors),this.create()}s.prototype.create=function(){return this.$toggle.setAttribute("aria-expanded","false"),this.$element.setAttribute("data-meom-nav","navigation"),this.$subNavs.forEach((function(t,e){"click"===this.settings.action&&t.setAttribute("hidden","");const s=document.createElement("button");s.setAttribute("data-meom-nav","sub-toggle"),s.setAttribute("aria-expanded","false"),s.setAttribute("aria-controls",`sub-menu-${e}`),t.nextElementSibling&&(t.nextElementSibling.id=`sub-menu-${e}`),s.className=`${this.settings.subToggleButtonClasses}`,s.type="button","click"===this.settings.action&&(s.innerHTML=`${t.textContent}${this.settings.dropDownIcon}`),"hover"===this.settings.action&&(s.innerHTML=`<span class="${this.settings.visuallyHiddenClass}">${this.settings.expandChildNavText}</span>${this.settings.dropDownIcon}`),t.after(s)}),this),this.$subSubNavs.forEach((function(t,e){const s=document.createElement("button");s.setAttribute("data-meom-nav","sub-sub-toggle"),s.setAttribute("aria-expanded","false"),s.setAttribute("aria-controls",`sub-sub-menu-${e}`),t.nextElementSibling&&(t.nextElementSibling.id=`sub-sub-menu-${e}`),s.className=`${this.settings.subSubToggleButtonClasses}`,s.type="button",s.innerHTML=`<span class="${this.settings.visuallyHiddenClass}">${this.settings.expandChildNavText}</span>${this.settings.dropDownIcon}`,t.after(s)}),this),this.$toggle.addEventListener("click",this._handleNav,!1),this.$element.addEventListener("click",this._handleSubNav,!1),document.addEventListener("keydown",this._handleCloseNav,!1),this.$element.addEventListener("keydown",this._handleCloseSubNav,!1),this.$element.addEventListener("keydown",this._handleFocus,!1),document.addEventListener("click",this._handleDocClick,!1),this.settings.onCreate&&"function"==typeof this.settings.onCreate&&this.settings.onCreate(this.$element,this.$toggle),this},s.prototype.handleNav=function(t){return this.navOpened?(e(this.$toggle,"expanded"),this.settings.toggleNavClass&&this.$element.classList.remove(this.settings.toggleNavClassValue),this.$toggle&&this.$toggle.focus(),this.navOpened=!1,this._closeAllSubMenus(),this._closeAllSubMenuToggles(),this.settings.onCloseNav&&"function"==typeof this.settings.onCloseNav&&this.settings.onCloseNav(this.$element,this.$toggle,t)):(e(this.$toggle,"expanded"),this.settings.toggleNavClass&&this.$element.classList.add(this.settings.toggleNavClassValue),this.navOpened=!0,this.settings.onOpenNav&&"function"==typeof this.settings.onOpenNav&&this.settings.onOpenNav(this.$element,this.$toggle,t)),this},s.prototype.handleSubNav=function(t){const s=t.target,n=s.closest('[data-meom-nav="sub-toggle"]'),i=s.closest('[data-meom-nav="sub-sub-toggle"]');return n||i?(s.nextElementSibling.classList.contains(this.settings.toggleSubNavClassValue)||s.matches('[data-meom-nav="sub-sub-toggle"]')||(this._closeAllSubMenus(),this._closeAllSubMenuToggles()),e(s,"expanded"),s.nextElementSibling&&this._setSubMenu(s.nextElementSibling,t),this):this},s.prototype.handleCloseNav=function(t){return this.navOpened&&this.settings.closeNavOnEscKey&&27===t.keyCode&&this._handleNav(t),this},s.prototype.handleCloseSubNav=function(t){const e=document.querySelector(`${this.settings.subNavClass}.${this.settings.toggleSubNavClassValue}`);if(e){const s=e.querySelectorAll(["a[href]","area[href]","input:not([disabled])","select:not([disabled])","textarea:not([disabled])","button:not([disabled])"]),n=s[s.length-1];9!==t.keyCode||t.shiftKey||t.target!==n||(this._closeAllSubMenus(),this._closeAllSubMenuToggles());const i=e.previousElementSibling;i&&9===t.keyCode&&t.shiftKey&&t.target===i&&(this._closeAllSubMenus(),this._closeAllSubMenuToggles())}if(27===t.keyCode){if(t.target.matches('[data-meom-nav="sub-toggle"][aria-expanded="true"]'))return this._handleSubNav(t),this._closeAllSubMenus(),this._closeAllSubMenuToggles(),this;const e=t.target.closest(`${this.settings.subNavClass}.${this.settings.toggleSubNavClassValue}`);if(e){const t=e.previousElementSibling;t&&t.focus()}this._closeAllSubMenus(),this._closeAllSubMenuToggles()}return this},s.prototype.handleFocus=function(t){if(!this.navOpened)return this;if(!this.settings.closeNavOnLastTab)return this;const e=this.$element.querySelectorAll(["a[href]","area[href]","input:not([disabled])","select:not([disabled])","textarea:not([disabled])","button:not([disabled])"]),s=e[e.length-1];return 9!==t.keyCode||t.shiftKey||t.target!==s||(t.preventDefault(),this._handleNav(t)),this},s.prototype.handleDocClick=function(t){return t.target.closest('[data-meom-nav="navigation"]')||(this._closeAllSubMenus(),this._closeAllSubMenuToggles()),this},s.prototype.closeAllSubMenus=function(){return document.querySelectorAll(`${this.settings.subNavClass}.${this.settings.toggleSubNavClassValue}`).forEach((function(t){this._setSubMenu(t)}),this),this},s.prototype.setSubMenu=function(e,s){return e?(e.classList.contains(this.settings.toggleSubNavClassValue)?(e.classList.remove(this.settings.toggleSubNavClassValue),this.settings.onCloseSubNav&&"function"==typeof this.settings.onCloseSubNav&&this.settings.onCloseSubNav(this.$element,this.$toggle,e,s)):(e.classList.add(this.settings.toggleSubNavClassValue),this.settings.animateSubNav&&t(e,this.settings.animateSubNavClass),this.settings.onOpenSubNav&&"function"==typeof this.settings.onOpenSubNav&&this.settings.onOpenSubNav(this.$element,this.$toggle,e,s)),this):this},s.prototype.closeAllSubMenuToggles=function(){document.querySelectorAll('[data-meom-nav="sub-toggle"][aria-expanded="true"]').forEach((function(t){e(t,"expanded")}));return document.querySelectorAll('[data-meom-nav="sub-sub-toggle"][aria-expanded="true"]').forEach((function(t){e(t,"expanded")})),this};export{s as Navigation,t as animate,e as updateAria}; | ||
/*! navigation 0.3.0 — © MEOM */ | ||
function t(t,e,s){t&&e&&(t.classList.add(e),t.addEventListener("animationend",(function n(){t.classList.remove(e),s&&t.classList.remove(s),t.removeEventListener("animationend",n,!1)}),!1))}function e(t,e){if(void 0===t||0>=e.length)return;const s="true"===t.getAttribute(`aria-${e}`)?"false":"true";t.setAttribute(`aria-${e}`,s)}function s(t,e,s={}){this._handleNav=this.handleNav.bind(this),this._handleSubNav=this.handleSubNav.bind(this),this._handleCloseNav=this.handleCloseNav.bind(this),this._handleCloseSubNav=this.handleCloseSubNav.bind(this),this._closeAllSubMenus=this.closeAllSubMenus.bind(this),this._setSubMenu=this.setSubMenu.bind(this),this._closeAllSubMenuToggles=this.closeAllSubMenuToggles.bind(this),this._handleDocClick=this.handleDocClick.bind(this),this._handleFocus=this.handleFocus.bind(this);const n={action:"click",subNavAnchors:".js-site-nav-items > .menu-item-has-children > a",subSubNavAnchors:".js-site-nav-items .sub-menu > .menu-item-has-children > a",toggleNavClass:!0,toggleNavClassValue:"is-opened",toggleSubNavClassValue:"is-opened",closeNavOnEscKey:!0,closeNavOnLastTab:!1,subNavClass:".sub-menu",subToggleButtonClasses:"",subSubToggleButtonClasses:"",animateSubNav:!1,animateSubNavClass:"",visuallyHiddenClass:"screen-reader-text",expandChildNavText:"Sub menu",dropDownIcon:'<svg class="icon" aria-hidden="true" focusable="false" width="13" height="8" viewBox="0 0 13 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1l4.793 4.793a1 1 0 001.414 0L12 1" stroke-width="2" stroke-linecap="round"></path></svg>',onCreate:null,onOpenNav:null,onCloseNav:null,onOpenSubNav:null,onCloseSubNav:null,...s};this.$element=t,this.$toggle=e,this.settings=n,this.navOpened=!1,this.$subNavs=this.$element.querySelectorAll(this.settings.subNavAnchors),this.$subSubNavs=this.$element.querySelectorAll(this.settings.subSubNavAnchors),this.create()}s.prototype.create=function(){return this.$toggle.setAttribute("aria-expanded","false"),this.$element.setAttribute("data-meom-nav","navigation"),this.$subNavs.forEach((function(t,e){"click"===this.settings.action&&t.setAttribute("hidden","");const s=document.createElement("button");s.setAttribute("data-meom-nav","sub-toggle"),s.setAttribute("aria-expanded","false"),s.className=`${this.settings.subToggleButtonClasses}`,s.type="button","click"===this.settings.action&&(s.innerHTML=`${t.textContent}${this.settings.dropDownIcon}`),"hover"===this.settings.action&&(s.innerHTML=`<span class="${this.settings.visuallyHiddenClass}">${this.settings.expandChildNavText}</span>${this.settings.dropDownIcon}`),t.after(s)}),this),this.$subSubNavs.forEach((function(t,e){const s=document.createElement("button");s.setAttribute("data-meom-nav","sub-sub-toggle"),s.setAttribute("aria-expanded","false"),s.setAttribute("aria-controls",`sub-sub-menu-${e}`),t.nextElementSibling&&(t.nextElementSibling.id=`sub-sub-menu-${e}`),s.className=`${this.settings.subSubToggleButtonClasses}`,s.type="button",s.innerHTML=`<span class="${this.settings.visuallyHiddenClass}">${this.settings.expandChildNavText}</span>${this.settings.dropDownIcon}`,t.after(s)}),this),this.$toggle.addEventListener("click",this._handleNav,!1),this.$element.addEventListener("click",this._handleSubNav,!1),document.addEventListener("keydown",this._handleCloseNav,!1),this.$element.addEventListener("keydown",this._handleCloseSubNav,!1),this.$element.addEventListener("keydown",this._handleFocus,!1),document.addEventListener("click",this._handleDocClick,!1),this.settings.onCreate&&"function"==typeof this.settings.onCreate&&this.settings.onCreate(this.$element,this.$toggle),this},s.prototype.handleNav=function(t){return this.navOpened?(e(this.$toggle,"expanded"),this.settings.toggleNavClass&&this.$element.classList.remove(this.settings.toggleNavClassValue),this.$toggle&&this.$toggle.focus(),this.navOpened=!1,this._closeAllSubMenus(),this._closeAllSubMenuToggles(),this.settings.onCloseNav&&"function"==typeof this.settings.onCloseNav&&this.settings.onCloseNav(this.$element,this.$toggle,t)):(e(this.$toggle,"expanded"),this.settings.toggleNavClass&&this.$element.classList.add(this.settings.toggleNavClassValue),this.navOpened=!0,this.settings.onOpenNav&&"function"==typeof this.settings.onOpenNav&&this.settings.onOpenNav(this.$element,this.$toggle,t)),this},s.prototype.handleSubNav=function(t){const s=t.target,n=s.closest('[data-meom-nav="sub-toggle"]'),i=s.closest('[data-meom-nav="sub-sub-toggle"]');return n||i?(s.nextElementSibling.classList.contains(this.settings.toggleSubNavClassValue)||s.matches('[data-meom-nav="sub-sub-toggle"]')||(this._closeAllSubMenus(),this._closeAllSubMenuToggles()),e(s,"expanded"),s.nextElementSibling&&this._setSubMenu(s.nextElementSibling,t),this):this},s.prototype.handleCloseNav=function(t){return this.navOpened&&this.settings.closeNavOnEscKey&&27===t.keyCode&&this._handleNav(t),this},s.prototype.handleCloseSubNav=function(t){const e=document.querySelector(`${this.settings.subNavClass}.${this.settings.toggleSubNavClassValue}`);if(e){const s=e.querySelectorAll(["a[href]","area[href]","input:not([disabled])","select:not([disabled])","textarea:not([disabled])","button:not([disabled])"]),n=s[s.length-1];9!==t.keyCode||t.shiftKey||t.target!==n||(this._closeAllSubMenus(),this._closeAllSubMenuToggles());const i=e.previousElementSibling;i&&9===t.keyCode&&t.shiftKey&&t.target===i&&(this._closeAllSubMenus(),this._closeAllSubMenuToggles())}if(27===t.keyCode){if(t.target.matches('[data-meom-nav="sub-toggle"][aria-expanded="true"]'))return this._handleSubNav(t),this._closeAllSubMenus(),this._closeAllSubMenuToggles(),this;const e=t.target.closest(`${this.settings.subNavClass}.${this.settings.toggleSubNavClassValue}`);if(e){const t=e.previousElementSibling;t&&t.focus()}this._closeAllSubMenus(),this._closeAllSubMenuToggles()}return this},s.prototype.handleFocus=function(t){if(!this.navOpened)return this;if(!this.settings.closeNavOnLastTab)return this;const e=this.$element.querySelectorAll(["a[href]","area[href]","input:not([disabled])","select:not([disabled])","textarea:not([disabled])","button:not([disabled])"]),s=e[e.length-1];return 9!==t.keyCode||t.shiftKey||t.target!==s||(t.preventDefault(),this._handleNav(t)),this},s.prototype.handleDocClick=function(t){return t.target.closest('[data-meom-nav="navigation"]')||(this._closeAllSubMenus(),this._closeAllSubMenuToggles()),this},s.prototype.closeAllSubMenus=function(){return document.querySelectorAll(`${this.settings.subNavClass}.${this.settings.toggleSubNavClassValue}`).forEach((function(t){this._setSubMenu(t)}),this),this},s.prototype.setSubMenu=function(e,s){return e?(e.classList.contains(this.settings.toggleSubNavClassValue)?(e.classList.remove(this.settings.toggleSubNavClassValue),this.settings.onCloseSubNav&&"function"==typeof this.settings.onCloseSubNav&&this.settings.onCloseSubNav(this.$element,this.$toggle,e,s)):(e.classList.add(this.settings.toggleSubNavClassValue),this.settings.animateSubNav&&t(e,this.settings.animateSubNavClass),this.settings.onOpenSubNav&&"function"==typeof this.settings.onOpenSubNav&&this.settings.onOpenSubNav(this.$element,this.$toggle,e,s)),this):this},s.prototype.closeAllSubMenuToggles=function(){document.querySelectorAll('[data-meom-nav="sub-toggle"][aria-expanded="true"]').forEach((function(t){e(t,"expanded")}));return document.querySelectorAll('[data-meom-nav="sub-sub-toggle"][aria-expanded="true"]').forEach((function(t){e(t,"expanded")})),this};export{s as Navigation,t as animate,e as updateAria}; |
@@ -75,2 +75,4 @@ (function (global, factory) { | ||
action: 'click', | ||
subNavAnchors: '.js-site-nav-items > .menu-item-has-children > a', | ||
subSubNavAnchors: '.js-site-nav-items .sub-menu > .menu-item-has-children > a', | ||
toggleNavClass: true, | ||
@@ -81,4 +83,2 @@ toggleNavClassValue: 'is-opened', | ||
closeNavOnLastTab: false, | ||
subNavAnchors: '.menu-item-has-children.is-item-level-0 > a', | ||
subSubNavAnchors: 'ul .menu-item-has-children > a', | ||
subNavClass: '.sub-menu', | ||
@@ -154,8 +154,2 @@ subToggleButtonClasses: '', | ||
subToggleButton.setAttribute( 'aria-controls', `sub-menu-${ index }` ); | ||
// Add matching id for next sub-menu. | ||
if ( subNav.nextElementSibling ) { | ||
subNav.nextElementSibling.id = `sub-menu-${ index }`; | ||
} | ||
subToggleButton.className = `${ this.settings.subToggleButtonClasses }`; | ||
@@ -162,0 +156,0 @@ subToggleButton.type = 'button'; |
@@ -1,2 +0,2 @@ | ||
/*! navigation 0.2.0 — © MEOM */ | ||
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).Navigation={})}(this,(function(t){"use strict";function e(t,e,s){t&&e&&(t.classList.add(e),t.addEventListener("animationend",(function n(){t.classList.remove(e),s&&t.classList.remove(s),t.removeEventListener("animationend",n,!1)}),!1))}function s(t,e){if(void 0===t||0>=e.length)return;const s="true"===t.getAttribute(`aria-${e}`)?"false":"true";t.setAttribute(`aria-${e}`,s)}function n(t,e,s={}){this._handleNav=this.handleNav.bind(this),this._handleSubNav=this.handleSubNav.bind(this),this._handleCloseNav=this.handleCloseNav.bind(this),this._handleCloseSubNav=this.handleCloseSubNav.bind(this),this._closeAllSubMenus=this.closeAllSubMenus.bind(this),this._setSubMenu=this.setSubMenu.bind(this),this._closeAllSubMenuToggles=this.closeAllSubMenuToggles.bind(this),this._handleDocClick=this.handleDocClick.bind(this),this._handleFocus=this.handleFocus.bind(this);const n={action:"click",toggleNavClass:!0,toggleNavClassValue:"is-opened",toggleSubNavClassValue:"is-opened",closeNavOnEscKey:!0,closeNavOnLastTab:!1,subNavAnchors:".menu-item-has-children.is-item-level-0 > a",subSubNavAnchors:"ul .menu-item-has-children > a",subNavClass:".sub-menu",subToggleButtonClasses:"",subSubToggleButtonClasses:"",animateSubNav:!1,animateSubNavClass:"",visuallyHiddenClass:"screen-reader-text",expandChildNavText:"Sub menu",dropDownIcon:'<svg class="icon" aria-hidden="true" focusable="false" width="13" height="8" viewBox="0 0 13 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1l4.793 4.793a1 1 0 001.414 0L12 1" stroke-width="2" stroke-linecap="round"></path></svg>',onCreate:null,onOpenNav:null,onCloseNav:null,onOpenSubNav:null,onCloseSubNav:null,...s};this.$element=t,this.$toggle=e,this.settings=n,this.navOpened=!1,this.$subNavs=this.$element.querySelectorAll(this.settings.subNavAnchors),this.$subSubNavs=this.$element.querySelectorAll(this.settings.subSubNavAnchors),this.create()}n.prototype.create=function(){return this.$toggle.setAttribute("aria-expanded","false"),this.$element.setAttribute("data-meom-nav","navigation"),this.$subNavs.forEach((function(t,e){"click"===this.settings.action&&t.setAttribute("hidden","");const s=document.createElement("button");s.setAttribute("data-meom-nav","sub-toggle"),s.setAttribute("aria-expanded","false"),s.setAttribute("aria-controls",`sub-menu-${e}`),t.nextElementSibling&&(t.nextElementSibling.id=`sub-menu-${e}`),s.className=`${this.settings.subToggleButtonClasses}`,s.type="button","click"===this.settings.action&&(s.innerHTML=`${t.textContent}${this.settings.dropDownIcon}`),"hover"===this.settings.action&&(s.innerHTML=`<span class="${this.settings.visuallyHiddenClass}">${this.settings.expandChildNavText}</span>${this.settings.dropDownIcon}`),t.after(s)}),this),this.$subSubNavs.forEach((function(t,e){const s=document.createElement("button");s.setAttribute("data-meom-nav","sub-sub-toggle"),s.setAttribute("aria-expanded","false"),s.setAttribute("aria-controls",`sub-sub-menu-${e}`),t.nextElementSibling&&(t.nextElementSibling.id=`sub-sub-menu-${e}`),s.className=`${this.settings.subSubToggleButtonClasses}`,s.type="button",s.innerHTML=`<span class="${this.settings.visuallyHiddenClass}">${this.settings.expandChildNavText}</span>${this.settings.dropDownIcon}`,t.after(s)}),this),this.$toggle.addEventListener("click",this._handleNav,!1),this.$element.addEventListener("click",this._handleSubNav,!1),document.addEventListener("keydown",this._handleCloseNav,!1),this.$element.addEventListener("keydown",this._handleCloseSubNav,!1),this.$element.addEventListener("keydown",this._handleFocus,!1),document.addEventListener("click",this._handleDocClick,!1),this.settings.onCreate&&"function"==typeof this.settings.onCreate&&this.settings.onCreate(this.$element,this.$toggle),this},n.prototype.handleNav=function(t){return this.navOpened?(s(this.$toggle,"expanded"),this.settings.toggleNavClass&&this.$element.classList.remove(this.settings.toggleNavClassValue),this.$toggle&&this.$toggle.focus(),this.navOpened=!1,this._closeAllSubMenus(),this._closeAllSubMenuToggles(),this.settings.onCloseNav&&"function"==typeof this.settings.onCloseNav&&this.settings.onCloseNav(this.$element,this.$toggle,t)):(s(this.$toggle,"expanded"),this.settings.toggleNavClass&&this.$element.classList.add(this.settings.toggleNavClassValue),this.navOpened=!0,this.settings.onOpenNav&&"function"==typeof this.settings.onOpenNav&&this.settings.onOpenNav(this.$element,this.$toggle,t)),this},n.prototype.handleSubNav=function(t){const e=t.target,n=e.closest('[data-meom-nav="sub-toggle"]'),i=e.closest('[data-meom-nav="sub-sub-toggle"]');return n||i?(e.nextElementSibling.classList.contains(this.settings.toggleSubNavClassValue)||e.matches('[data-meom-nav="sub-sub-toggle"]')||(this._closeAllSubMenus(),this._closeAllSubMenuToggles()),s(e,"expanded"),e.nextElementSibling&&this._setSubMenu(e.nextElementSibling,t),this):this},n.prototype.handleCloseNav=function(t){return this.navOpened&&this.settings.closeNavOnEscKey&&27===t.keyCode&&this._handleNav(t),this},n.prototype.handleCloseSubNav=function(t){const e=document.querySelector(`${this.settings.subNavClass}.${this.settings.toggleSubNavClassValue}`);if(e){const s=e.querySelectorAll(["a[href]","area[href]","input:not([disabled])","select:not([disabled])","textarea:not([disabled])","button:not([disabled])"]),n=s[s.length-1];9!==t.keyCode||t.shiftKey||t.target!==n||(this._closeAllSubMenus(),this._closeAllSubMenuToggles());const i=e.previousElementSibling;i&&9===t.keyCode&&t.shiftKey&&t.target===i&&(this._closeAllSubMenus(),this._closeAllSubMenuToggles())}if(27===t.keyCode){if(t.target.matches('[data-meom-nav="sub-toggle"][aria-expanded="true"]'))return this._handleSubNav(t),this._closeAllSubMenus(),this._closeAllSubMenuToggles(),this;const e=t.target.closest(`${this.settings.subNavClass}.${this.settings.toggleSubNavClassValue}`);if(e){const t=e.previousElementSibling;t&&t.focus()}this._closeAllSubMenus(),this._closeAllSubMenuToggles()}return this},n.prototype.handleFocus=function(t){if(!this.navOpened)return this;if(!this.settings.closeNavOnLastTab)return this;const e=this.$element.querySelectorAll(["a[href]","area[href]","input:not([disabled])","select:not([disabled])","textarea:not([disabled])","button:not([disabled])"]),s=e[e.length-1];return 9!==t.keyCode||t.shiftKey||t.target!==s||(t.preventDefault(),this._handleNav(t)),this},n.prototype.handleDocClick=function(t){return t.target.closest('[data-meom-nav="navigation"]')||(this._closeAllSubMenus(),this._closeAllSubMenuToggles()),this},n.prototype.closeAllSubMenus=function(){return document.querySelectorAll(`${this.settings.subNavClass}.${this.settings.toggleSubNavClassValue}`).forEach((function(t){this._setSubMenu(t)}),this),this},n.prototype.setSubMenu=function(t,s){return t?(t.classList.contains(this.settings.toggleSubNavClassValue)?(t.classList.remove(this.settings.toggleSubNavClassValue),this.settings.onCloseSubNav&&"function"==typeof this.settings.onCloseSubNav&&this.settings.onCloseSubNav(this.$element,this.$toggle,t,s)):(t.classList.add(this.settings.toggleSubNavClassValue),this.settings.animateSubNav&&e(t,this.settings.animateSubNavClass),this.settings.onOpenSubNav&&"function"==typeof this.settings.onOpenSubNav&&this.settings.onOpenSubNav(this.$element,this.$toggle,t,s)),this):this},n.prototype.closeAllSubMenuToggles=function(){document.querySelectorAll('[data-meom-nav="sub-toggle"][aria-expanded="true"]').forEach((function(t){s(t,"expanded")}));return document.querySelectorAll('[data-meom-nav="sub-sub-toggle"][aria-expanded="true"]').forEach((function(t){s(t,"expanded")})),this},t.Navigation=n,t.animate=e,t.updateAria=s,Object.defineProperty(t,"__esModule",{value:!0})})); | ||
/*! navigation 0.3.0 — © MEOM */ | ||
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).Navigation={})}(this,(function(t){"use strict";function e(t,e,s){t&&e&&(t.classList.add(e),t.addEventListener("animationend",(function n(){t.classList.remove(e),s&&t.classList.remove(s),t.removeEventListener("animationend",n,!1)}),!1))}function s(t,e){if(void 0===t||0>=e.length)return;const s="true"===t.getAttribute(`aria-${e}`)?"false":"true";t.setAttribute(`aria-${e}`,s)}function n(t,e,s={}){this._handleNav=this.handleNav.bind(this),this._handleSubNav=this.handleSubNav.bind(this),this._handleCloseNav=this.handleCloseNav.bind(this),this._handleCloseSubNav=this.handleCloseSubNav.bind(this),this._closeAllSubMenus=this.closeAllSubMenus.bind(this),this._setSubMenu=this.setSubMenu.bind(this),this._closeAllSubMenuToggles=this.closeAllSubMenuToggles.bind(this),this._handleDocClick=this.handleDocClick.bind(this),this._handleFocus=this.handleFocus.bind(this);const n={action:"click",subNavAnchors:".js-site-nav-items > .menu-item-has-children > a",subSubNavAnchors:".js-site-nav-items .sub-menu > .menu-item-has-children > a",toggleNavClass:!0,toggleNavClassValue:"is-opened",toggleSubNavClassValue:"is-opened",closeNavOnEscKey:!0,closeNavOnLastTab:!1,subNavClass:".sub-menu",subToggleButtonClasses:"",subSubToggleButtonClasses:"",animateSubNav:!1,animateSubNavClass:"",visuallyHiddenClass:"screen-reader-text",expandChildNavText:"Sub menu",dropDownIcon:'<svg class="icon" aria-hidden="true" focusable="false" width="13" height="8" viewBox="0 0 13 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1l4.793 4.793a1 1 0 001.414 0L12 1" stroke-width="2" stroke-linecap="round"></path></svg>',onCreate:null,onOpenNav:null,onCloseNav:null,onOpenSubNav:null,onCloseSubNav:null,...s};this.$element=t,this.$toggle=e,this.settings=n,this.navOpened=!1,this.$subNavs=this.$element.querySelectorAll(this.settings.subNavAnchors),this.$subSubNavs=this.$element.querySelectorAll(this.settings.subSubNavAnchors),this.create()}n.prototype.create=function(){return this.$toggle.setAttribute("aria-expanded","false"),this.$element.setAttribute("data-meom-nav","navigation"),this.$subNavs.forEach((function(t,e){"click"===this.settings.action&&t.setAttribute("hidden","");const s=document.createElement("button");s.setAttribute("data-meom-nav","sub-toggle"),s.setAttribute("aria-expanded","false"),s.className=`${this.settings.subToggleButtonClasses}`,s.type="button","click"===this.settings.action&&(s.innerHTML=`${t.textContent}${this.settings.dropDownIcon}`),"hover"===this.settings.action&&(s.innerHTML=`<span class="${this.settings.visuallyHiddenClass}">${this.settings.expandChildNavText}</span>${this.settings.dropDownIcon}`),t.after(s)}),this),this.$subSubNavs.forEach((function(t,e){const s=document.createElement("button");s.setAttribute("data-meom-nav","sub-sub-toggle"),s.setAttribute("aria-expanded","false"),s.setAttribute("aria-controls",`sub-sub-menu-${e}`),t.nextElementSibling&&(t.nextElementSibling.id=`sub-sub-menu-${e}`),s.className=`${this.settings.subSubToggleButtonClasses}`,s.type="button",s.innerHTML=`<span class="${this.settings.visuallyHiddenClass}">${this.settings.expandChildNavText}</span>${this.settings.dropDownIcon}`,t.after(s)}),this),this.$toggle.addEventListener("click",this._handleNav,!1),this.$element.addEventListener("click",this._handleSubNav,!1),document.addEventListener("keydown",this._handleCloseNav,!1),this.$element.addEventListener("keydown",this._handleCloseSubNav,!1),this.$element.addEventListener("keydown",this._handleFocus,!1),document.addEventListener("click",this._handleDocClick,!1),this.settings.onCreate&&"function"==typeof this.settings.onCreate&&this.settings.onCreate(this.$element,this.$toggle),this},n.prototype.handleNav=function(t){return this.navOpened?(s(this.$toggle,"expanded"),this.settings.toggleNavClass&&this.$element.classList.remove(this.settings.toggleNavClassValue),this.$toggle&&this.$toggle.focus(),this.navOpened=!1,this._closeAllSubMenus(),this._closeAllSubMenuToggles(),this.settings.onCloseNav&&"function"==typeof this.settings.onCloseNav&&this.settings.onCloseNav(this.$element,this.$toggle,t)):(s(this.$toggle,"expanded"),this.settings.toggleNavClass&&this.$element.classList.add(this.settings.toggleNavClassValue),this.navOpened=!0,this.settings.onOpenNav&&"function"==typeof this.settings.onOpenNav&&this.settings.onOpenNav(this.$element,this.$toggle,t)),this},n.prototype.handleSubNav=function(t){const e=t.target,n=e.closest('[data-meom-nav="sub-toggle"]'),i=e.closest('[data-meom-nav="sub-sub-toggle"]');return n||i?(e.nextElementSibling.classList.contains(this.settings.toggleSubNavClassValue)||e.matches('[data-meom-nav="sub-sub-toggle"]')||(this._closeAllSubMenus(),this._closeAllSubMenuToggles()),s(e,"expanded"),e.nextElementSibling&&this._setSubMenu(e.nextElementSibling,t),this):this},n.prototype.handleCloseNav=function(t){return this.navOpened&&this.settings.closeNavOnEscKey&&27===t.keyCode&&this._handleNav(t),this},n.prototype.handleCloseSubNav=function(t){const e=document.querySelector(`${this.settings.subNavClass}.${this.settings.toggleSubNavClassValue}`);if(e){const s=e.querySelectorAll(["a[href]","area[href]","input:not([disabled])","select:not([disabled])","textarea:not([disabled])","button:not([disabled])"]),n=s[s.length-1];9!==t.keyCode||t.shiftKey||t.target!==n||(this._closeAllSubMenus(),this._closeAllSubMenuToggles());const i=e.previousElementSibling;i&&9===t.keyCode&&t.shiftKey&&t.target===i&&(this._closeAllSubMenus(),this._closeAllSubMenuToggles())}if(27===t.keyCode){if(t.target.matches('[data-meom-nav="sub-toggle"][aria-expanded="true"]'))return this._handleSubNav(t),this._closeAllSubMenus(),this._closeAllSubMenuToggles(),this;const e=t.target.closest(`${this.settings.subNavClass}.${this.settings.toggleSubNavClassValue}`);if(e){const t=e.previousElementSibling;t&&t.focus()}this._closeAllSubMenus(),this._closeAllSubMenuToggles()}return this},n.prototype.handleFocus=function(t){if(!this.navOpened)return this;if(!this.settings.closeNavOnLastTab)return this;const e=this.$element.querySelectorAll(["a[href]","area[href]","input:not([disabled])","select:not([disabled])","textarea:not([disabled])","button:not([disabled])"]),s=e[e.length-1];return 9!==t.keyCode||t.shiftKey||t.target!==s||(t.preventDefault(),this._handleNav(t)),this},n.prototype.handleDocClick=function(t){return t.target.closest('[data-meom-nav="navigation"]')||(this._closeAllSubMenus(),this._closeAllSubMenuToggles()),this},n.prototype.closeAllSubMenus=function(){return document.querySelectorAll(`${this.settings.subNavClass}.${this.settings.toggleSubNavClassValue}`).forEach((function(t){this._setSubMenu(t)}),this),this},n.prototype.setSubMenu=function(t,s){return t?(t.classList.contains(this.settings.toggleSubNavClassValue)?(t.classList.remove(this.settings.toggleSubNavClassValue),this.settings.onCloseSubNav&&"function"==typeof this.settings.onCloseSubNav&&this.settings.onCloseSubNav(this.$element,this.$toggle,t,s)):(t.classList.add(this.settings.toggleSubNavClassValue),this.settings.animateSubNav&&e(t,this.settings.animateSubNavClass),this.settings.onOpenSubNav&&"function"==typeof this.settings.onOpenSubNav&&this.settings.onOpenSubNav(this.$element,this.$toggle,t,s)),this):this},n.prototype.closeAllSubMenuToggles=function(){document.querySelectorAll('[data-meom-nav="sub-toggle"][aria-expanded="true"]').forEach((function(t){s(t,"expanded")}));return document.querySelectorAll('[data-meom-nav="sub-sub-toggle"][aria-expanded="true"]').forEach((function(t){s(t,"expanded")})),this},t.Navigation=n,t.animate=e,t.updateAria=s,Object.defineProperty(t,"__esModule",{value:!0})})); |
{ | ||
"name": "@meom/navigation", | ||
"version": "0.3.0", | ||
"version": "0.4.0", | ||
"description": "MEOM navigation", | ||
@@ -5,0 +5,0 @@ "homepage": "https://github.com/MEOM/navigation", |
186
readme.md
@@ -14,2 +14,4 @@ # MEOM navigation | ||
- ["Hover" Demo](https://meom.github.io/navigation/demo/hover.html). | ||
- [Multiple navs Demo](https://meom.github.io/navigation/demo/multiple-navs-header.html). | ||
- [Header and Footer navs](https://meom.github.io/navigation/demo/multiple-navs.html). | ||
@@ -54,2 +56,62 @@ ## Usage | ||
## Markup | ||
Recommended markup is using landmark `nav` with list of links. | ||
```html | ||
<nav class="site-nav js-site-nav"> | ||
<button | ||
class="site-nav__toggle js-site-nav-toggle" aria-controls="site-nav__items" | ||
aria-expanded="false" | ||
> | ||
Menu | ||
</button> | ||
<ul class="site-nav__items js-site-nav-items" id="site-nav__items"> | ||
<li><a href="#">Home</a></li> | ||
<li class="menu-item-has-children"> | ||
<a href="#">About</a> | ||
<ul class="sub-menu"> | ||
<li><a href="#">Contact us</a></li> | ||
<li><a href="#">Company values</a></li> | ||
<li><a href="#">Staff</a></li> | ||
<li><a href="#">More info</a></li> | ||
</ul> | ||
</li> | ||
<li class="menu-item-has-children"> | ||
<a href="#">Services</a> | ||
<ul class="sub-menu"> | ||
<li><a href="#">Design</a></li> | ||
<li><a href="#">WordPress</a></li> | ||
<li class="menu-item-has-children"><a href="#">Hosting</a> | ||
<ul class="sub-menu"> | ||
<li><a href="#">Premium</a></li> | ||
<li><a href="#">Even better</a></li> | ||
<li><a href="#">The fastest</a> | ||
</ul> | ||
</li> | ||
<li><a href="#">Helping</a></li> | ||
</ul> | ||
</li> | ||
<li><a href="#">Blog</a></li> | ||
</ul> | ||
</nav> | ||
``` | ||
With this markup our JS would look like this: | ||
```js | ||
import { Navigation } from '@meom/navigation'; | ||
// Mandatory elements. | ||
const navElement = document.querySelector('.js-site-nav-items'); | ||
const navToggle = document.querySelector('.js-site-nav-toggle'); | ||
// Bail if there is no nav nor toggle button. | ||
if (!navElement || !navToggle) { | ||
return; | ||
} | ||
new Navigation(navElement, navToggle); | ||
``` | ||
## Options | ||
@@ -62,2 +124,4 @@ | ||
action: 'click', | ||
subNavAnchors: '.js-site-nav-items > .menu-item-has-children > a', | ||
subSubNavAnchors: '.js-site-nav-items .sub-menu > .menu-item-has-children > a', | ||
toggleNavClass: true, | ||
@@ -68,4 +132,2 @@ toggleNavClassValue: 'is-opened', | ||
closeNavOnLastTab: false, | ||
subNavAnchors: '.menu-item-has-children.is-item-level-0 > a', | ||
subSubNavAnchors: 'ul .menu-item-has-children > a', | ||
subNavClass: '.sub-menu', | ||
@@ -89,2 +151,120 @@ subToggleButtonClasses: '', | ||
### action (string) | ||
Accepted values are either `click` or `hover`. Defaults to `click`. | ||
More info in the section [Features and thinking](#features-and-thinking). | ||
### subNavAnchors (string) | ||
Targets **top level anchors** which have sub menus. | ||
In most cases this needs to be changed because it's hard to know classes used in your markup. | ||
Defaults to `.js-site-nav-items > .menu-item-has-children > a`. | ||
### subSubNavAnchors (string) | ||
Targets **sub menu anchors** which have sub menus. | ||
In most cases this needs to be changed because it's hard to know classes used in your markup. | ||
Defaults to `.js-site-nav-items .sub-menu > .menu-item-has-children > a`. | ||
### toggleNavClass (boolean) | ||
If `true`, we toggle class provided in `toggleNavClassValue` in the element we show and hide on smaller screens. | ||
Defaults to `true`. | ||
### toggleNavClassValue (string) | ||
Class we toggle in the element we show and hide on smaller screens. | ||
Defaults to `is-opened`. | ||
### toggleSubNavClassValue (string) | ||
Class we toggle in the sub menus. | ||
Defaults to `is-opened`. | ||
### closeNavOnEscKey (boolean) | ||
By default script closes navigation when pressing ESC key. | ||
Defaults to `true`. | ||
### closeNavOnLastTab (boolean) | ||
Sometimes it's useful to close to navigation when Tab key is used on the last navigation anchor. | ||
Defaults to `false`. | ||
### animateSubNavClass (string) | ||
Script have basic animation helpers but animations can be done with CSS alone. | ||
Defaults to `''`. | ||
### visuallyHiddenClass (string) | ||
Visually hidden class. | ||
Defaults to `screen-reader-text`. | ||
### expandChildNavText (string) | ||
Text for expanding sub menus. | ||
Default to `Sub menu`. | ||
### dropDownIcon (string) | ||
Icon (SVG) inside buttons which triggeres sub menus. | ||
### onCreate (function) | ||
Runs when script creates it's magic. `navElement` and `navToggle` are passed in as arguments. | ||
Example: | ||
```js | ||
onCreate: function (navElement, navToggle) { | ||
// Do something | ||
}, | ||
``` | ||
### onOpenNav (function) | ||
Runs when navigation opens. `navElement`, `navToggle` and `event` are passed in as arguments. | ||
Example: | ||
```js | ||
onOpenNav: function (navElement, navToggle, event) { | ||
// Do something | ||
}, | ||
``` | ||
### onCloseNav (function) | ||
Runs when navigation closes. `navElement`, `navToggle` and `event` are passed in as arguments. | ||
Example: | ||
```js | ||
onCloseNav: function (navElement, navToggle, event) { | ||
// Do something | ||
}, | ||
``` | ||
### onOpenSubNav (function) | ||
Runs when sub menu opens. `navElement`, `navToggle`, `submenu` and `event` are passed in as arguments. | ||
Example: | ||
```js | ||
onOpenSubNav: function (navElement, navToggle, submenu, event) { | ||
// Do something | ||
}, | ||
``` | ||
### onCloseSubNav (function) | ||
Runs when sub menu closes. `navElement`, `navToggle`, `submenu` and `event` are passed in as arguments. | ||
Example: | ||
```js | ||
onCloseSubNav: function (navElement, navToggle, submenu, event) { | ||
// Do something | ||
}, | ||
``` | ||
## Features and thinking | ||
@@ -135,3 +315,3 @@ By default navigation script opens sub menus only on click. This happens by adding `<button>` element after `<a>` element and hiding `<a>` with `hidden` attribute. | ||
- Use `aria-expanded` on buttons to indicate state. | ||
- Use `aria-controls` to point which element (matching id) it is opening. | ||
- `aria-controls` is not really supported in assistive tecnology, therefor this is not implemented. | ||
@@ -138,0 +318,0 @@ ## More reading about navigations |
@@ -20,2 +20,4 @@ /* Import internal depedencies. */ | ||
action: 'click', | ||
subNavAnchors: '.js-site-nav-items > .menu-item-has-children > a', | ||
subSubNavAnchors: '.js-site-nav-items .sub-menu > .menu-item-has-children > a', | ||
toggleNavClass: true, | ||
@@ -26,4 +28,2 @@ toggleNavClassValue: 'is-opened', | ||
closeNavOnLastTab: false, | ||
subNavAnchors: '.menu-item-has-children.is-item-level-0 > a', | ||
subSubNavAnchors: 'ul .menu-item-has-children > a', | ||
subNavClass: '.sub-menu', | ||
@@ -99,8 +99,2 @@ subToggleButtonClasses: '', | ||
subToggleButton.setAttribute( 'aria-controls', `sub-menu-${ index }` ); | ||
// Add matching id for next sub-menu. | ||
if ( subNav.nextElementSibling ) { | ||
subNav.nextElementSibling.id = `sub-menu-${ index }`; | ||
} | ||
subToggleButton.className = `${ this.settings.subToggleButtonClasses }`; | ||
@@ -107,0 +101,0 @@ subToggleButton.type = 'button'; |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
397598
28
9287
315
0