@meom/navigation
Advanced tools
Comparing version 0.2.0 to 0.3.0
# Changelog | ||
## Version 0.3.0 released November 1, 2021 | ||
### Added | ||
- Demo examples. | ||
### Changed | ||
- `is-opened` hard coded class to settings. | ||
## Version 0.2.0 released July 16, 2021 | ||
@@ -4,0 +11,0 @@ |
@@ -70,3 +70,4 @@ /** | ||
toggleNavClass: true, | ||
navClass: 'is-opened', | ||
toggleNavClassValue: 'is-opened', | ||
toggleSubNavClassValue: 'is-opened', | ||
closeNavOnEscKey: true, | ||
@@ -82,3 +83,3 @@ closeNavOnLastTab: false, | ||
visuallyHiddenClass: 'screen-reader-text', | ||
expandChildNavText: 'Child menu', | ||
expandChildNavText: 'Sub menu', | ||
dropDownIcon: | ||
@@ -227,3 +228,3 @@ '<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>', | ||
if ( this.settings.toggleNavClass ) { | ||
this.$element.classList.add( 'is-opened' ); | ||
this.$element.classList.add( this.settings.toggleNavClassValue ); | ||
} | ||
@@ -249,7 +250,7 @@ | ||
if ( this.settings.toggleNavClass ) { | ||
this.$element.classList.remove( 'is-opened' ); | ||
this.$element.classList.remove( this.settings.toggleNavClassValue ); | ||
} | ||
// Set focus back to toggle button if setting `closeNavOnLastTab` is true. | ||
if ( this.settings.closeNavOnLastTab ) { | ||
// Set focus back to toggle button. | ||
if ( this.$toggle ) { | ||
this.$toggle.focus(); | ||
@@ -303,3 +304,3 @@ } | ||
if ( | ||
! target.nextElementSibling.classList.contains( 'is-opened' ) && | ||
! target.nextElementSibling.classList.contains( this.settings.toggleSubNavClassValue ) && | ||
! target.matches( '[data-meom-nav="sub-sub-toggle"]' ) | ||
@@ -350,3 +351,3 @@ ) { | ||
const openSubMenu = document.querySelector( | ||
`${ this.settings.subNavClass }.is-opened` | ||
`${ this.settings.subNavClass }.${ this.settings.toggleSubNavClassValue }` | ||
); | ||
@@ -408,3 +409,3 @@ | ||
const parentSubMenu = event.target.closest( | ||
`${ this.settings.subNavClass }.is-opened` | ||
`${ this.settings.subNavClass }.${ this.settings.toggleSubNavClassValue }` | ||
); | ||
@@ -499,3 +500,3 @@ | ||
const openSubMenus = document.querySelectorAll( | ||
`${ this.settings.subNavClass }.is-opened` | ||
`${ this.settings.subNavClass }.${ this.settings.toggleSubNavClassValue }` | ||
); | ||
@@ -522,4 +523,4 @@ | ||
if ( ! submenu.classList.contains( 'is-opened' ) ) { | ||
submenu.classList.add( 'is-opened' ); | ||
if ( ! submenu.classList.contains( this.settings.toggleSubNavClassValue ) ) { | ||
submenu.classList.add( this.settings.toggleSubNavClassValue ); | ||
@@ -548,3 +549,3 @@ // Base animation with class. | ||
} else { | ||
submenu.classList.remove( 'is-opened' ); | ||
submenu.classList.remove( this.settings.toggleSubNavClassValue ); | ||
@@ -551,0 +552,0 @@ /** |
/*! navigation 0.2.0 — © MEOM */ | ||
function e(e,t,s){e&&t&&(e.classList.add(t),e.addEventListener("animationend",(function n(){e.classList.remove(t),s&&e.classList.remove(s),e.removeEventListener("animationend",n,!1)}),!1))}function t(e,t){if(void 0===e||0>=t.length)return;const s="true"===e.getAttribute(`aria-${t}`)?"false":"true";e.setAttribute(`aria-${t}`,s)}function s(e,t,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,navClass:"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:"Child 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=e,this.$toggle=t,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(e,t){"click"===this.settings.action&&e.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-${t}`),e.nextElementSibling&&(e.nextElementSibling.id=`sub-menu-${t}`),s.className=`${this.settings.subToggleButtonClasses}`,s.type="button","click"===this.settings.action&&(s.innerHTML=`${e.textContent}${this.settings.dropDownIcon}`),"hover"===this.settings.action&&(s.innerHTML=`<span class="${this.settings.visuallyHiddenClass}">${this.settings.expandChildNavText}</span>${this.settings.dropDownIcon}`),e.after(s)}),this),this.$subSubNavs.forEach((function(e,t){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-${t}`),e.nextElementSibling&&(e.nextElementSibling.id=`sub-sub-menu-${t}`),s.className=`${this.settings.subSubToggleButtonClasses}`,s.type="button",s.innerHTML=`<span class="${this.settings.visuallyHiddenClass}">${this.settings.expandChildNavText}</span>${this.settings.dropDownIcon}`,e.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(e){return this.navOpened?(t(this.$toggle,"expanded"),this.settings.toggleNavClass&&this.$element.classList.remove("is-opened"),this.settings.closeNavOnLastTab&&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,e)):(t(this.$toggle,"expanded"),this.settings.toggleNavClass&&this.$element.classList.add("is-opened"),this.navOpened=!0,this.settings.onOpenNav&&"function"==typeof this.settings.onOpenNav&&this.settings.onOpenNav(this.$element,this.$toggle,e)),this},s.prototype.handleSubNav=function(e){const s=e.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("is-opened")||s.matches('[data-meom-nav="sub-sub-toggle"]')||(this._closeAllSubMenus(),this._closeAllSubMenuToggles()),t(s,"expanded"),s.nextElementSibling&&this._setSubMenu(s.nextElementSibling,e),this):this},s.prototype.handleCloseNav=function(e){return this.navOpened&&this.settings.closeNavOnEscKey&&27===e.keyCode&&this._handleNav(e),this},s.prototype.handleCloseSubNav=function(e){const t=document.querySelector(`${this.settings.subNavClass}.is-opened`);if(t){const s=t.querySelectorAll(["a[href]","area[href]","input:not([disabled])","select:not([disabled])","textarea:not([disabled])","button:not([disabled])"]),n=s[s.length-1];9!==e.keyCode||e.shiftKey||e.target!==n||(this._closeAllSubMenus(),this._closeAllSubMenuToggles());const i=t.previousElementSibling;i&&9===e.keyCode&&e.shiftKey&&e.target===i&&(this._closeAllSubMenus(),this._closeAllSubMenuToggles())}if(27===e.keyCode){if(e.target.matches('[data-meom-nav="sub-toggle"][aria-expanded="true"]'))return this._handleSubNav(e),this._closeAllSubMenus(),this._closeAllSubMenuToggles(),this;const t=e.target.closest(`${this.settings.subNavClass}.is-opened`);if(t){const e=t.previousElementSibling;e&&e.focus()}this._closeAllSubMenus(),this._closeAllSubMenuToggles()}return this},s.prototype.handleFocus=function(e){if(!this.navOpened)return this;if(!this.settings.closeNavOnLastTab)return this;const t=this.$element.querySelectorAll(["a[href]","area[href]","input:not([disabled])","select:not([disabled])","textarea:not([disabled])","button:not([disabled])"]),s=t[t.length-1];return 9!==e.keyCode||e.shiftKey||e.target!==s||(e.preventDefault(),this._handleNav(e)),this},s.prototype.handleDocClick=function(e){return e.target.closest('[data-meom-nav="navigation"]')||(this._closeAllSubMenus(),this._closeAllSubMenuToggles()),this},s.prototype.closeAllSubMenus=function(){return document.querySelectorAll(`${this.settings.subNavClass}.is-opened`).forEach((function(e){this._setSubMenu(e)}),this),this},s.prototype.setSubMenu=function(t,s){return t?(t.classList.contains("is-opened")?(t.classList.remove("is-opened"),this.settings.onCloseSubNav&&"function"==typeof this.settings.onCloseSubNav&&this.settings.onCloseSubNav(this.$element,this.$toggle,t,s)):(t.classList.add("is-opened"),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},s.prototype.closeAllSubMenuToggles=function(){document.querySelectorAll('[data-meom-nav="sub-toggle"][aria-expanded="true"]').forEach((function(e){t(e,"expanded")}));return document.querySelectorAll('[data-meom-nav="sub-sub-toggle"][aria-expanded="true"]').forEach((function(e){t(e,"expanded")})),this};export{s as Navigation,e as animate,t as updateAria}; | ||
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}; |
@@ -76,3 +76,4 @@ (function (global, factory) { | ||
toggleNavClass: true, | ||
navClass: 'is-opened', | ||
toggleNavClassValue: 'is-opened', | ||
toggleSubNavClassValue: 'is-opened', | ||
closeNavOnEscKey: true, | ||
@@ -88,3 +89,3 @@ closeNavOnLastTab: false, | ||
visuallyHiddenClass: 'screen-reader-text', | ||
expandChildNavText: 'Child menu', | ||
expandChildNavText: 'Sub menu', | ||
dropDownIcon: | ||
@@ -233,3 +234,3 @@ '<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>', | ||
if ( this.settings.toggleNavClass ) { | ||
this.$element.classList.add( 'is-opened' ); | ||
this.$element.classList.add( this.settings.toggleNavClassValue ); | ||
} | ||
@@ -255,7 +256,7 @@ | ||
if ( this.settings.toggleNavClass ) { | ||
this.$element.classList.remove( 'is-opened' ); | ||
this.$element.classList.remove( this.settings.toggleNavClassValue ); | ||
} | ||
// Set focus back to toggle button if setting `closeNavOnLastTab` is true. | ||
if ( this.settings.closeNavOnLastTab ) { | ||
// Set focus back to toggle button. | ||
if ( this.$toggle ) { | ||
this.$toggle.focus(); | ||
@@ -309,3 +310,3 @@ } | ||
if ( | ||
! target.nextElementSibling.classList.contains( 'is-opened' ) && | ||
! target.nextElementSibling.classList.contains( this.settings.toggleSubNavClassValue ) && | ||
! target.matches( '[data-meom-nav="sub-sub-toggle"]' ) | ||
@@ -356,3 +357,3 @@ ) { | ||
const openSubMenu = document.querySelector( | ||
`${ this.settings.subNavClass }.is-opened` | ||
`${ this.settings.subNavClass }.${ this.settings.toggleSubNavClassValue }` | ||
); | ||
@@ -414,3 +415,3 @@ | ||
const parentSubMenu = event.target.closest( | ||
`${ this.settings.subNavClass }.is-opened` | ||
`${ this.settings.subNavClass }.${ this.settings.toggleSubNavClassValue }` | ||
); | ||
@@ -505,3 +506,3 @@ | ||
const openSubMenus = document.querySelectorAll( | ||
`${ this.settings.subNavClass }.is-opened` | ||
`${ this.settings.subNavClass }.${ this.settings.toggleSubNavClassValue }` | ||
); | ||
@@ -528,4 +529,4 @@ | ||
if ( ! submenu.classList.contains( 'is-opened' ) ) { | ||
submenu.classList.add( 'is-opened' ); | ||
if ( ! submenu.classList.contains( this.settings.toggleSubNavClassValue ) ) { | ||
submenu.classList.add( this.settings.toggleSubNavClassValue ); | ||
@@ -554,3 +555,3 @@ // Base animation with class. | ||
} else { | ||
submenu.classList.remove( 'is-opened' ); | ||
submenu.classList.remove( this.settings.toggleSubNavClassValue ); | ||
@@ -557,0 +558,0 @@ /** |
/*! navigation 0.2.0 — © MEOM */ | ||
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).Navigation={})}(this,(function(e){"use strict";function t(e,t,s){e&&t&&(e.classList.add(t),e.addEventListener("animationend",(function n(){e.classList.remove(t),s&&e.classList.remove(s),e.removeEventListener("animationend",n,!1)}),!1))}function s(e,t){if(void 0===e||0>=t.length)return;const s="true"===e.getAttribute(`aria-${t}`)?"false":"true";e.setAttribute(`aria-${t}`,s)}function n(e,t,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,navClass:"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:"Child 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=e,this.$toggle=t,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(e,t){"click"===this.settings.action&&e.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-${t}`),e.nextElementSibling&&(e.nextElementSibling.id=`sub-menu-${t}`),s.className=`${this.settings.subToggleButtonClasses}`,s.type="button","click"===this.settings.action&&(s.innerHTML=`${e.textContent}${this.settings.dropDownIcon}`),"hover"===this.settings.action&&(s.innerHTML=`<span class="${this.settings.visuallyHiddenClass}">${this.settings.expandChildNavText}</span>${this.settings.dropDownIcon}`),e.after(s)}),this),this.$subSubNavs.forEach((function(e,t){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-${t}`),e.nextElementSibling&&(e.nextElementSibling.id=`sub-sub-menu-${t}`),s.className=`${this.settings.subSubToggleButtonClasses}`,s.type="button",s.innerHTML=`<span class="${this.settings.visuallyHiddenClass}">${this.settings.expandChildNavText}</span>${this.settings.dropDownIcon}`,e.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(e){return this.navOpened?(s(this.$toggle,"expanded"),this.settings.toggleNavClass&&this.$element.classList.remove("is-opened"),this.settings.closeNavOnLastTab&&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,e)):(s(this.$toggle,"expanded"),this.settings.toggleNavClass&&this.$element.classList.add("is-opened"),this.navOpened=!0,this.settings.onOpenNav&&"function"==typeof this.settings.onOpenNav&&this.settings.onOpenNav(this.$element,this.$toggle,e)),this},n.prototype.handleSubNav=function(e){const t=e.target,n=t.closest('[data-meom-nav="sub-toggle"]'),i=t.closest('[data-meom-nav="sub-sub-toggle"]');return n||i?(t.nextElementSibling.classList.contains("is-opened")||t.matches('[data-meom-nav="sub-sub-toggle"]')||(this._closeAllSubMenus(),this._closeAllSubMenuToggles()),s(t,"expanded"),t.nextElementSibling&&this._setSubMenu(t.nextElementSibling,e),this):this},n.prototype.handleCloseNav=function(e){return this.navOpened&&this.settings.closeNavOnEscKey&&27===e.keyCode&&this._handleNav(e),this},n.prototype.handleCloseSubNav=function(e){const t=document.querySelector(`${this.settings.subNavClass}.is-opened`);if(t){const s=t.querySelectorAll(["a[href]","area[href]","input:not([disabled])","select:not([disabled])","textarea:not([disabled])","button:not([disabled])"]),n=s[s.length-1];9!==e.keyCode||e.shiftKey||e.target!==n||(this._closeAllSubMenus(),this._closeAllSubMenuToggles());const i=t.previousElementSibling;i&&9===e.keyCode&&e.shiftKey&&e.target===i&&(this._closeAllSubMenus(),this._closeAllSubMenuToggles())}if(27===e.keyCode){if(e.target.matches('[data-meom-nav="sub-toggle"][aria-expanded="true"]'))return this._handleSubNav(e),this._closeAllSubMenus(),this._closeAllSubMenuToggles(),this;const t=e.target.closest(`${this.settings.subNavClass}.is-opened`);if(t){const e=t.previousElementSibling;e&&e.focus()}this._closeAllSubMenus(),this._closeAllSubMenuToggles()}return this},n.prototype.handleFocus=function(e){if(!this.navOpened)return this;if(!this.settings.closeNavOnLastTab)return this;const t=this.$element.querySelectorAll(["a[href]","area[href]","input:not([disabled])","select:not([disabled])","textarea:not([disabled])","button:not([disabled])"]),s=t[t.length-1];return 9!==e.keyCode||e.shiftKey||e.target!==s||(e.preventDefault(),this._handleNav(e)),this},n.prototype.handleDocClick=function(e){return e.target.closest('[data-meom-nav="navigation"]')||(this._closeAllSubMenus(),this._closeAllSubMenuToggles()),this},n.prototype.closeAllSubMenus=function(){return document.querySelectorAll(`${this.settings.subNavClass}.is-opened`).forEach((function(e){this._setSubMenu(e)}),this),this},n.prototype.setSubMenu=function(e,s){return e?(e.classList.contains("is-opened")?(e.classList.remove("is-opened"),this.settings.onCloseSubNav&&"function"==typeof this.settings.onCloseSubNav&&this.settings.onCloseSubNav(this.$element,this.$toggle,e,s)):(e.classList.add("is-opened"),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},n.prototype.closeAllSubMenuToggles=function(){document.querySelectorAll('[data-meom-nav="sub-toggle"][aria-expanded="true"]').forEach((function(e){s(e,"expanded")}));return document.querySelectorAll('[data-meom-nav="sub-sub-toggle"][aria-expanded="true"]').forEach((function(e){s(e,"expanded")})),this},e.Navigation=n,e.animate=t,e.updateAria=s,Object.defineProperty(e,"__esModule",{value:!0})})); | ||
!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})})); |
{ | ||
"name": "@meom/navigation", | ||
"version": "0.2.0", | ||
"version": "0.3.0", | ||
"description": "MEOM navigation", | ||
@@ -5,0 +5,0 @@ "homepage": "https://github.com/MEOM/navigation", |
@@ -7,6 +7,10 @@ # MEOM navigation | ||
1. "Click" navigation where sub menus open only on click. | ||
1. "Hover" navigation where sub menus open on hover also. | ||
1. "Hover" navigation where sub menus open on hover also. Note that we don't actually open sub menus on hover in the demo. That's because we don't have the logic to close sub menus with Esc-key if they are opened with mouse hover. That's up to you. | ||
It's designed for WordPress navigation markup but can be tweaked for different use cases. | ||
## Demos | ||
- ["Click" Demo](https://meom.github.io/navigation/demo/). | ||
- ["Hover" Demo](https://meom.github.io/navigation/demo/hover.html). | ||
## Usage | ||
@@ -16,4 +20,2 @@ | ||
Note, not yet available in NPM! | ||
```bash | ||
@@ -61,3 +63,4 @@ npm install @meom/navigation | ||
toggleNavClass: true, | ||
navClass: 'is-opened', | ||
toggleNavClassValue: 'is-opened', | ||
toggleSubNavClassValue: 'is-opened', | ||
closeNavOnEscKey: true, | ||
@@ -73,3 +76,3 @@ closeNavOnLastTab: false, | ||
visuallyHiddenClass: 'screen-reader-text', | ||
expandChildNavText: 'Child menu', | ||
expandChildNavText: 'Sub menu', | ||
dropDownIcon: | ||
@@ -83,3 +86,54 @@ '<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>', | ||
onCloseSubNav: null, | ||
}); | ||
}); | ||
``` | ||
## Features and thinking | ||
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. | ||
Without JS kicking in: | ||
```html | ||
<li class="menu-item-has-children"> | ||
<a href="#">About</a> | ||
</li> | ||
``` | ||
With JS kicking in: | ||
```html | ||
<li class="menu-item-has-children"> | ||
<a href="#" hidden>About</a> | ||
<button>About</button> | ||
</li> | ||
``` | ||
Script copies link item text (About) to the button text. And there we have the button which triggeres the sub menu. | ||
If list item doesn't have sub menu, nothing happens. Link will stay as link. | ||
### Hover menu | ||
What if all top level items needs to be as links no matter do they have sub menus or not? | ||
With option `action: hover` you can do exactly that. | ||
Without JS kicking in: | ||
```html | ||
<li class="menu-item-has-children"> | ||
<a href="#">About</a> | ||
</li> | ||
``` | ||
With JS kicking in: | ||
```html | ||
<li class="menu-item-has-children"> | ||
<a href="#">About</a> | ||
<button><span class="screen-reader-text">Child menu</span><svg>...</svg></button> | ||
</li> | ||
``` | ||
We don't add `hidden` attribute in this case to the link. And `<button>` text is visually hidden and SVG icon is indicating the sub menu. | ||
### Other features | ||
- Close navigation and sub menus by `Esc` key or by clicking outside of the navigation. | ||
- Use `aria-expanded` on buttons to indicate state. | ||
- Use `aria-controls` to point which element (matching id) it is opening. | ||
## More reading about navigations | ||
- [Link + Disclosure Widget Navigation](https://adrianroselli.com/2019/06/link-disclosure-widget-navigation.html) by Adrian Roselli. | ||
- [In Praise of the Unambiguous Click Menu](https://css-tricks.com/in-praise-of-the-unambiguous-click-menu/) by Mark Root-Wiley. |
@@ -21,3 +21,4 @@ /* Import internal depedencies. */ | ||
toggleNavClass: true, | ||
navClass: 'is-opened', | ||
toggleNavClassValue: 'is-opened', | ||
toggleSubNavClassValue: 'is-opened', | ||
closeNavOnEscKey: true, | ||
@@ -33,3 +34,3 @@ closeNavOnLastTab: false, | ||
visuallyHiddenClass: 'screen-reader-text', | ||
expandChildNavText: 'Child menu', | ||
expandChildNavText: 'Sub menu', | ||
dropDownIcon: | ||
@@ -178,3 +179,3 @@ '<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>', | ||
if ( this.settings.toggleNavClass ) { | ||
this.$element.classList.add( 'is-opened' ); | ||
this.$element.classList.add( this.settings.toggleNavClassValue ); | ||
} | ||
@@ -200,7 +201,7 @@ | ||
if ( this.settings.toggleNavClass ) { | ||
this.$element.classList.remove( 'is-opened' ); | ||
this.$element.classList.remove( this.settings.toggleNavClassValue ); | ||
} | ||
// Set focus back to toggle button if setting `closeNavOnLastTab` is true. | ||
if ( this.settings.closeNavOnLastTab ) { | ||
// Set focus back to toggle button. | ||
if ( this.$toggle ) { | ||
this.$toggle.focus(); | ||
@@ -254,3 +255,3 @@ } | ||
if ( | ||
! target.nextElementSibling.classList.contains( 'is-opened' ) && | ||
! target.nextElementSibling.classList.contains( this.settings.toggleSubNavClassValue ) && | ||
! target.matches( '[data-meom-nav="sub-sub-toggle"]' ) | ||
@@ -301,3 +302,3 @@ ) { | ||
const openSubMenu = document.querySelector( | ||
`${ this.settings.subNavClass }.is-opened` | ||
`${ this.settings.subNavClass }.${ this.settings.toggleSubNavClassValue }` | ||
); | ||
@@ -359,3 +360,3 @@ | ||
const parentSubMenu = event.target.closest( | ||
`${ this.settings.subNavClass }.is-opened` | ||
`${ this.settings.subNavClass }.${ this.settings.toggleSubNavClassValue }` | ||
); | ||
@@ -450,3 +451,3 @@ | ||
const openSubMenus = document.querySelectorAll( | ||
`${ this.settings.subNavClass }.is-opened` | ||
`${ this.settings.subNavClass }.${ this.settings.toggleSubNavClassValue }` | ||
); | ||
@@ -473,4 +474,4 @@ | ||
if ( ! submenu.classList.contains( 'is-opened' ) ) { | ||
submenu.classList.add( 'is-opened' ); | ||
if ( ! submenu.classList.contains( this.settings.toggleSubNavClassValue ) ) { | ||
submenu.classList.add( this.settings.toggleSubNavClassValue ); | ||
@@ -499,3 +500,3 @@ // Base animation with class. | ||
} else { | ||
submenu.classList.remove( 'is-opened' ); | ||
submenu.classList.remove( this.settings.toggleSubNavClassValue ); | ||
@@ -502,0 +503,0 @@ /** |
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
SPDX disjunction
LicenseSPDX disjunction for an artifact's license information
Found 1 instance in 1 package
Mixed license
License(Experimental) Package contains multiple licenses.
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
SPDX disjunction
LicenseSPDX disjunction for an artifact's license information
Found 1 instance in 1 package
219662
24
4853
135
2