UNPKG

@stormid/toggle

Version:

Accessible DOM state toggling

3 lines (2 loc) 4.65 kB
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 a in n)({}).hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},e.apply(null,arguments)}var t={delay:0,startOpen:!1,local:!1,prehook:!1,callback:!1,focus:!0,trapTab:!1,closeOnBlur:!1,closeOnClick:!1,useHidden:!1};const n=["button","a"],a=["a[href]","area[href]","input:not([disabled])","select:not([disabled])","textarea:not([disabled])","button:not([disabled])","iframe","object","embed","[contenteditable]",'[tabindex]:not([tabindex="-1"])'],s={OPEN:"toggle.open",CLOSE:"toggle.close"},o=e=>()=>{const{toggles:t,node:n,settings:a}=e.getState();a.useHidden&&(n.hidden=!0),t.forEach(t=>{const a=n.getAttribute("id");if("BUTTON"!==t.tagName&&t.setAttribute("role","button"),!a)throw console.warn("The toggle target should have an id.");t.setAttribute("aria-controls",a),t.setAttribute("aria-expanded","false"),t.addEventListener("click",t=>{t.preventDefault(),i(e)()})})},l=t=>()=>{t.update(e({},t.getState(),{isOpen:!t.getState().isOpen}),[d,h(t),m(t),O(t)])},i=e=>()=>{const{node:t,toggles:n,settings:a,isOpen:s,classTarget:o,animatingClass:i}=e.getState();a.prehook&&"function"==typeof a.prehook&&a.prehook({node:t,toggles:n,isOpen:s}),o.classList.add(i);const c=()=>{l(e)(),a.callback&&"function"==typeof a.callback&&a.callback({node:t,toggles:n,isOpen:e.getState().isOpen})};s&&+a.delay>0?window.setTimeout(c,+a.delay):c()},c=e=>{const t=e.getAttribute("data-toggle"),a=e.getAttribute("data-toggle")&&[].slice.call(document.querySelectorAll((s=t,n.map(e=>`${e}.${s}`).join(", "))));var s;return a||console.warn(`Toggle cannot be initialised, no buttons or anchors found for ${e}. Does it have a data-toggle attribute that identifies toggle buttons?`),a},r=e=>[].slice.call(e.querySelectorAll(a.join(","))),d=({toggles:e,isOpen:t,node:n,classTarget:a,animatingClass:s,statusClass:o,settings:l})=>{e.forEach(e=>e.setAttribute("aria-expanded",t)),a.classList.remove(s),a.classList[t?"add":"remove"](o),l.useHidden&&(n.hidden=!t)},g=e=>t=>{switch(t.keyCode){case 27:t.preventDefault();break;case 9:u(e,t)}},u=(e,t)=>{const n=e.getState().focusableChildren,a=n.indexOf(document.activeElement);t.shiftKey&&0===a?(t.preventDefault(),n[n.length-1].focus()):t.shiftKey||a!==n.length-1||(t.preventDefault(),n[0].focus())},p=(e,t)=>e.reduce((e,n)=>((n===t||n.contains(t))&&(e=!0),e),!1),f=e=>t=>{const n=e.getState();n.node.contains(t.target)||p(n.toggles,t.target)||l(e)()},b=e=>t=>{const{node:n,toggles:a}=e.getState();n.contains(t.target)||p(a,t.target)||l(e)()},m=e=>()=>{const{settings:t,isOpen:n,focusInListener:a,clickListener:s}=e.getState();t.closeOnBlur&&document[(n?"add":"remove")+"EventListener"]("focusin",a),t.closeOnClick&&document[(n?"add":"remove")+"EventListener"]("click",s)},h=t=>()=>{const{isOpen:n,focusableChildren:a,settings:s,lastFocused:o,keyListener:l}=t.getState();if((s.focus||s.trapTab)&&0!==a.length)if(n){t.update(e({},t.getState(),{lastFocused:document.activeElement}));const n=()=>a[0].focus();if(s.delay?window.setTimeout(n,s.delay):n(),!s.trapTab)return;s.trapTab&&document.addEventListener("keydown",l)}else{if(!s.trapTab)return;document.removeEventListener("keydown",l);const n=()=>{o&&o.focus(),t.update(e({},t.getState(),{lastFocused:!1}))};s.delay?window.setTimeout(n,s.delay):n()}},O=e=>t=>{const n=new CustomEvent(s[t.isOpen?"OPEN":"CLOSE"],{bubbles:!0,detail:{getState:e.getState}});t.node.dispatchEvent(n)};var v=(n,a)=>{let s=(e=>"string"==typeof e?[].slice.call(document.querySelectorAll(e)):e instanceof Array?e:Object.prototype.isPrototypeOf.call(NodeList.prototype,e)?[].slice.call(e):e instanceof HTMLElement?[e]:[])(n);return 0===s.length?console.warn(`Toggle not initialised, no elements found for selector '${n}'`):s.map(n=>Object.create((({node:e,settings:t})=>{const n=(()=>{let e={};return{update:(t,n)=>{e=null!=t?t:e,n&&n.forEach(t=>t(e))},getState:()=>e}})(),{classTarget:a,statusClass:s,shouldStartOpen:d}=((e,t)=>{const n=t.local?e.parentNode:document.documentElement,a=t.local?"is--active":`on--${e.getAttribute("id")}`;return{classTarget:n,statusClass:a,shouldStartOpen:t.startOpen||n.classList.contains(a)}})(e,t);return n.update({node:e,settings:t,toggles:c(e),isOpen:!1,classTarget:a,statusClass:s,animatingClass:t.local?`animating--${e.getAttribute("id")}`:"is--animating",focusableChildren:r(e),lastFocused:!1,keyListener:g(n),focusInListener:f(n),clickListener:b(n)},[o(n),()=>{d&&i(n)()}]),{node:e,startToggle:i(n),toggle:l(n),getState:n.getState}})({settings:e({},t,a,n.dataset),node:n})))};export{v as default}; //# sourceMappingURL=index.modern.mjs.map