Skip to content

Commit

Permalink
1.2.0
Browse files Browse the repository at this point in the history
  • Loading branch information
Maurice committed Oct 27, 2022
1 parent 80188b8 commit 8c49858
Show file tree
Hide file tree
Showing 11 changed files with 13 additions and 11 deletions.
2 changes: 1 addition & 1 deletion dist/a11y-nav.cjs
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
function e(){return e=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},e.apply(this,arguments)}module.exports=/*#__PURE__*/function(){function t(t,n){this.nav=void 0,this.options=void 0,this.controls=void 0,this.menus=void 0,this.focusables=void 0,this.nav=t,this.options={animate:!0,duration:300,useArrowKeys:!0,closeOnBlur:!0,bodyClass:"a11y-nav-menu-open"},this.controls=this.getControls(),this.menus=this.controls.map(function(e){return e.menu}),this.focusables=this.getFocusables(),this.options=e({},this.options,n),this.onButtonClick=this.onButtonClick.bind(this),this.onButtonKeyDown=this.onButtonKeyDown.bind(this),this.onFocusableKeyDown=this.onFocusableKeyDown.bind(this),this.onBlur=this.onBlur.bind(this),this.init()}var n=t.prototype;return n.init=function(){var e=this;this.controls.forEach(function(t){t.menu.el.classList.add("a11y-nav-menu"),t.menu.el.setAttribute("tabindex","-1"),t.el.addEventListener("click",e.onButtonClick),t.el.addEventListener("keydown",e.onButtonKeyDown),"true"===t.el.getAttribute("aria-expanded")&&e.openMenu(t.menu)}),this.focusables.forEach(function(t){t.addEventListener("keydown",e.onFocusableKeyDown)}),this.options.closeOnBlur&&this.nav.addEventListener("focusout",this.onBlur)},n.onButtonClick=function(e){var t=e.currentTarget,n=this.controls.find(function(e){return e.el===t}),o="true"===(null==n?void 0:n.el.getAttribute("aria-expanded"));null!=n&&n.menu&&this.toggleMenu(n.menu,!o)},n.onButtonKeyDown=function(e){var t=this,n=this.getControlFromEl(e.target);if(n){var o="true"===n.el.getAttribute("aria-expanded");if("Escape"===e.key)if(o)this.closeMenu(n.menu);else{var s=n.el.closest(".a11y-nav-active");if(s){var i=this.getMenuFromEl(s);i?(i.control.el.focus(),this.closeMenu(i)):(this.focusables[0].focus(),this.closeAllMenus())}else this.focusables[0].focus(),this.closeAllMenus()}else if("ArrowDown"===e.key&&o){var l;e.preventDefault(),null==(l=n.menu.el.querySelector("a, button"))||l.focus()}else{var r=this.focusables.filter(function(e){return t.getMenuDepthFromEl(e)===t.getMenuDepthFromEl(n.el)}),a=r.findIndex(function(e){return e===n.el});this.options.useArrowKeys&&this.controlFocusByKey(e,r.map(function(e){return e}),a)}}},n.onFocusableKeyDown=function(e){var t=this,n=this.getFocusableFromEl(e.target);if(n&&!this.controls.find(function(e){return e.el===n})){if("Escape"===e.key){var o=n.closest(".a11y-nav-active");if(o){var s=this.getMenuFromEl(o);s?(s.control.el.focus(),this.closeMenu(s)):(this.focusables[0].focus(),this.closeAllMenus())}else this.focusables[0].focus(),this.closeAllMenus()}var i=this.focusables.filter(function(e){return t.getMenuDepthFromEl(e)===t.getMenuDepthFromEl(n)}),l=i.findIndex(function(e){return e===n});this.options.useArrowKeys&&this.controlFocusByKey(e,i.map(function(e){return e}),l)}},n.onBlur=function(e){!this.nav.contains(e.relatedTarget)&&this.nav.querySelector(".a11y-nav-active")&&this.closeAllMenus()},n.controlFocusByKey=function(e,t,n){switch(e.key){case"ArrowUp":case"ArrowLeft":e.preventDefault(),n>-1&&t[Math.max(0,n-1)].focus();break;case"ArrowDown":case"ArrowRight":e.preventDefault(),n>-1&&t[Math.min(t.length-1,n+1)].focus()}},n.toggleMenu=function(e,t){t?this.openMenu(e):this.closeMenu(e)},n.openMenu=function(e){var t,n=this;this.menus.forEach(function(t){t!==e&&n.getMenuDepthFromEl(t.el)===n.getMenuDepthFromEl(e.el)&&n.closeMenu(t)}),e.el.classList.add("a11y-nav-active"),e.control.el.setAttribute("aria-expanded","true"),null==(t=e.el.parentElement)||t.classList.add("a11y-nav-child-open"),"string"==typeof this.options.bodyClass&&this.options.bodyClass.length>0&&document.body.classList.add(this.options.bodyClass),this.options.animate&&e.el.classList.add("a11y-nav-animate-in")},n.closeMenu=function(e){var t,n=this;e.el.querySelectorAll(".a11y-nav-menu").forEach(function(e){var t=n.getMenuFromEl(e);t&&n.closeMenu(t)}),"string"==typeof this.options.bodyClass&&document.body.classList.remove(this.options.bodyClass),e.control.el.setAttribute("aria-expanded","false"),this.options.animate?(e.el.classList.remove("a11y-nav-animate-in"),e.el.classList.add("a11y-nav-animate-out"),setTimeout(function(){var t;e.el.classList.remove("a11y-nav-active"),e.el.classList.remove("a11y-nav-animate-out"),null==(t=e.el.parentElement)||t.classList.remove("a11y-nav-child-open")},this.options.duration)):(e.el.classList.remove("a11y-nav-active"),null==(t=e.el.parentElement)||t.classList.remove("a11y-nav-child-open"))},n.closeAllMenus=function(){var e=this;this.menus.forEach(function(t){e.closeMenu(t)})},n.getMenuDepthFromEl=function(e){for(var t=0,n=e.parentElement;n&&n!==this.nav;)(n.classList.contains("a11y-nav-menu")||n===this.nav)&&t++,n=n.parentElement;return t},n.getMenuFromEl=function(e){var t;return null!=(t=this.menus.find(function(t){return t.el===e}))?t:null},n.getControlFromEl=function(e){var t;return null!=(t=this.controls.find(function(t){return t.el===e}))?t:null},n.getFocusableFromEl=function(e){var t;return null!=(t=this.focusables.find(function(t){return t===e}))?t:null},n.getControls=function(){return Array.from(this.nav.querySelectorAll("button[aria-expanded][aria-controls]")).map(function(e){var t=e.getAttribute("aria-controls"),n=document.getElementById(null!=t?t:"");if(n){var o={el:e,menu:{el:n,id:n.id,hadTabIndex:n.hasAttribute("tabindex")}};return o.menu.control=o,o}return null}).flatMap(function(e){return e?[e]:[]})},n.getFocusables=function(){return Array.from(this.nav.querySelectorAll("a, button"))},n.destroy=function(){var e=this;this.closeAllMenus(),this.controls.forEach(function(t){t.menu.el.classList.remove("a11y-nav-menu"),t.menu.hadTabIndex||t.menu.el.removeAttribute("tabindex"),t.el.removeEventListener("click",e.onButtonClick),t.el.removeEventListener("keydown",e.onButtonKeyDown)}),this.focusables.forEach(function(t){t.removeEventListener("keydown",e.onFocusableKeyDown)}),this.nav.removeEventListener("focusout",this.onBlur)},t}();
function t(){return t=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(t[o]=n[o])}return t},t.apply(this,arguments)}module.exports=/*#__PURE__*/function(){function e(e,n){this.nav=void 0,this.options=void 0,this.controls=void 0,this.menus=void 0,this.focusables=void 0,this.nav=e,this.options={animate:!0,duration:300,useArrowKeys:!0,closeOnBlur:!0,bodyClass:"a11y-nav-menu-open",focusOnOpen:!0},this.controls=this.getControls(),this.menus=this.controls.map(function(t){return t.menu}),this.focusables=this.getFocusables(),this.options=t({},this.options,n),this.onButtonClick=this.onButtonClick.bind(this),this.onButtonKeyDown=this.onButtonKeyDown.bind(this),this.onFocusableKeyDown=this.onFocusableKeyDown.bind(this),this.onBlur=this.onBlur.bind(this),this.init()}var n=e.prototype;return n.init=function(){var t=this;this.controls.forEach(function(e){e.menu.el.classList.add("a11y-nav-menu"),e.menu.el.setAttribute("tabindex","-1"),e.el.addEventListener("click",t.onButtonClick),e.el.addEventListener("keydown",t.onButtonKeyDown),"true"===e.el.getAttribute("aria-expanded")&&t.openMenu(e.menu,!0)}),this.focusables.forEach(function(e){e.addEventListener("keydown",t.onFocusableKeyDown)}),this.options.closeOnBlur&&this.nav.addEventListener("focusout",this.onBlur)},n.onButtonClick=function(t){var e=t.currentTarget,n=this.controls.find(function(t){return t.el===e}),o="true"===(null==n?void 0:n.el.getAttribute("aria-expanded"));null!=n&&n.menu&&this.toggleMenu(n.menu,!o)},n.onButtonKeyDown=function(t){var e=this,n=this.getControlFromEl(t.target);if(n){var o="true"===n.el.getAttribute("aria-expanded");if("Escape"===t.key)if(o)this.closeMenu(n.menu);else{var s=n.el.closest(".a11y-nav-active");if(s){var i=this.getMenuFromEl(s);i?(i.control.el.focus(),this.closeMenu(i)):(this.focusables[0].focus(),this.closeAllMenus())}else this.focusables[0].focus(),this.closeAllMenus()}else if("ArrowDown"===t.key&&o){var l;t.preventDefault(),null==(l=n.menu.el.querySelector("a, button"))||l.focus()}else{var a=this.focusables.filter(function(t){return e.getMenuDepthFromEl(t)===e.getMenuDepthFromEl(n.el)}),r=a.findIndex(function(t){return t===n.el});this.options.useArrowKeys&&this.controlFocusByKey(t,a.map(function(t){return t}),r)}}},n.onFocusableKeyDown=function(t){var e=this,n=this.getFocusableFromEl(t.target);if(n&&!this.controls.find(function(t){return t.el===n})){if("Escape"===t.key){var o=n.closest(".a11y-nav-active");if(o){var s=this.getMenuFromEl(o);s?(s.control.el.focus(),this.closeMenu(s)):(this.focusables[0].focus(),this.closeAllMenus())}else this.focusables[0].focus(),this.closeAllMenus()}var i=this.focusables.filter(function(t){return e.getMenuDepthFromEl(t)===e.getMenuDepthFromEl(n)}),l=i.findIndex(function(t){return t===n});this.options.useArrowKeys&&this.controlFocusByKey(t,i.map(function(t){return t}),l)}},n.onBlur=function(t){!this.nav.contains(t.relatedTarget)&&this.nav.querySelector(".a11y-nav-active")&&this.closeAllMenus()},n.controlFocusByKey=function(t,e,n){switch(t.key){case"ArrowUp":case"ArrowLeft":t.preventDefault(),n>-1&&e[Math.max(0,n-1)].focus();break;case"ArrowDown":case"ArrowRight":t.preventDefault(),n>-1&&e[Math.min(e.length-1,n+1)].focus()}},n.toggleMenu=function(t,e){e?this.openMenu(t):this.closeMenu(t)},n.openMenu=function(t,e){var n,o=this;void 0===e&&(e=!1),this.menus.forEach(function(e){e.el!==t.el&&e.el.classList.contains("a11y-nav-active")&&o.getMenuDepthFromEl(e.el)===o.getMenuDepthFromEl(t.el)&&o.closeMenu(e)}),t.el.classList.add("a11y-nav-active"),t.control.el.setAttribute("aria-expanded","true"),null==(n=t.el.parentElement)||n.classList.add("a11y-nav-child-open"),"string"==typeof this.options.bodyClass&&this.options.bodyClass.length>0&&document.body.classList.add(this.options.bodyClass),this.options.animate?(t.el.classList.add("a11y-nav-animate-in"),!e&&this.options.focusOnOpen&&setTimeout(function(){t.el.focus()},this.options.duration)):!e&&this.options.focusOnOpen&&t.el.focus()},n.closeMenu=function(t){var e=this;if(t.el.classList.contains("a11y-nav-active")){t.el.querySelectorAll(".a11y-nav-menu").forEach(function(t){var n=e.getMenuFromEl(t);n&&e.closeMenu(n)});var n,o=this.menus.some(function(e){return e.el.classList.contains("a11y-nav-active")&&e.el!==t.el});"string"!=typeof this.options.bodyClass||o||document.body.classList.remove(this.options.bodyClass),t.control.el.setAttribute("aria-expanded","false"),this.options.animate?(t.el.classList.remove("a11y-nav-animate-in"),t.el.classList.add("a11y-nav-animate-out"),setTimeout(function(){var e;t.el.classList.remove("a11y-nav-active"),t.el.classList.remove("a11y-nav-animate-out"),null==(e=t.el.parentElement)||e.classList.remove("a11y-nav-child-open")},this.options.duration)):(t.el.classList.remove("a11y-nav-active"),null==(n=t.el.parentElement)||n.classList.remove("a11y-nav-child-open"))}},n.closeAllMenus=function(){var t=this;this.menus.forEach(function(e){t.closeMenu(e)}),"string"==typeof this.options.bodyClass&&document.body.classList.remove(this.options.bodyClass)},n.getMenuDepthFromEl=function(t){for(var e=0,n=t.parentElement;n&&n!==this.nav;)(n.classList.contains("a11y-nav-menu")||n===this.nav)&&e++,n=n.parentElement;return e},n.getMenuFromEl=function(t){var e;return null!=(e=this.menus.find(function(e){return e.el===t}))?e:null},n.getControlFromEl=function(t){var e;return null!=(e=this.controls.find(function(e){return e.el===t}))?e:null},n.getFocusableFromEl=function(t){var e;return null!=(e=this.focusables.find(function(e){return e===t}))?e:null},n.getControls=function(){return Array.from(this.nav.querySelectorAll("button[aria-expanded][aria-controls]")).map(function(t){var e=t.getAttribute("aria-controls"),n=document.getElementById(null!=e?e:"");if(n){var o={el:t,menu:{el:n,id:n.id,hadTabIndex:n.hasAttribute("tabindex")}};return o.menu.control=o,o}return null}).flatMap(function(t){return t?[t]:[]})},n.getFocusables=function(){return Array.from(this.nav.querySelectorAll("a, button"))},n.destroy=function(){var t=this;this.closeAllMenus(),this.controls.forEach(function(e){e.menu.el.classList.remove("a11y-nav-menu"),e.menu.hadTabIndex||e.menu.el.removeAttribute("tabindex"),e.el.removeEventListener("click",t.onButtonClick),e.el.removeEventListener("keydown",t.onButtonKeyDown)}),this.focusables.forEach(function(e){e.removeEventListener("keydown",t.onFocusableKeyDown)}),this.nav.removeEventListener("focusout",this.onBlur)},e}();
//# sourceMappingURL=a11y-nav.cjs.map
2 changes: 1 addition & 1 deletion dist/a11y-nav.cjs.map

Large diffs are not rendered by default.

4 changes: 3 additions & 1 deletion dist/a11y-nav.d.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import './a11y-nav.css';
import "./a11y-nav.css";
interface A11YNavOptions {
animate?: boolean;
duration?: number;
useArrowKeys?: boolean;
closeOnBlur?: boolean;
bodyClass?: string | boolean;
focusOnOpen?: boolean;
}
interface Control {
el: HTMLButtonElement;
Expand Down Expand Up @@ -33,6 +34,7 @@ export default class A11YNav {
private openMenu;
private closeMenu;
closeAllMenus(): void;
/** Get the menu depth of an element */
private getMenuDepthFromEl;
private getMenuFromEl;
private getControlFromEl;
Expand Down
Loading

0 comments on commit 8c49858

Please sign in to comment.