UNPKG

@stormid/toggle

Version:

Accessible DOM state toggling

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