UNPKG

@stormid/tabs

Version:

Accessible tabbed panelled content areas

3 lines (2 loc) 4.61 kB
function t(){return t=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var a=arguments[e];for(var n in a)({}).hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},t.apply(null,arguments)}var e={tabSelector:"[role=tab]",activeClass:"is--active",updateURL:!0,activation:"auto",activeIndex:0,focusOnLoad:!1},a=function(t){return function(e){var a=e.tabs,n=e.panels;a[0].parentNode.setAttribute("role","tablist"),a.forEach(function(e,a){e.setAttribute("role","tab"),e.setAttribute("aria-selected",!1),n[a].setAttribute("aria-labelledby",e.getAttribute("id")),e.setAttribute("tabindex","-1"),n[a].setAttribute("role","tabpanel"),n[a].setAttribute("hidden","hidden"),n[a].setAttribute("tabindex","-1"),r(e,a,t),n[a].firstElementChild&&!n[a].firstElementChild.hasAttribute("tabindex")&&n[a].firstElementChild.setAttribute("tabindex","-1")})}},n=function(t){var e=t.activeTabIndex;return 0===e?t.tabs.length-1:e-1},i=function(t){var e=t.activeTabIndex;return e===t.tabs.length-1?0:e+1},r=function(e,a,r){var c="manual"===r.getState().settings.activation,o=c?function(){return u(r)}:s;e.addEventListener("keydown",function(e){var u=r.getState().activeIndex;switch(e.keyCode){case 37:r.update(t({},r.getState(),{activeTabIndex:n(r.getState()),activeIndex:c?r.getState().activeIndex:n(r.getState())}),[function(){return o(r,u)}]);break;case 39:r.update(t({},r.getState(),{activeTabIndex:i(r.getState()),activeIndex:c?r.getState().activeIndex:i(r.getState())}),[function(){return o(r,u)}]);break;case 13:u!==a&&r.update(t({},r.getState(),{activeIndex:a,activeTabIndex:a}),[function(){return s(r,u)}]);break;case 32:e.preventDefault(),u!==a&&r.update(t({},r.getState(),{activeIndex:a,activeTabIndex:a}),[function(){return s(r,u)}])}}),e.addEventListener("click",function(e){e.preventDefault();var n=r.getState().activeTabIndex;r.getState().activeIndex!==a&&r.update(t({},r.getState(),{activeIndex:a,activeTabIndex:a}),[function(){return s(r,n)}])},!1)},s=function(t,e){var a=t.getState(),n=a.activeIndex,i=a.settings,r=a.tabs;c(t.getState(),e),o(t)(t.getState()),u(t),i.updateURL&&window.history&&window.history.replaceState({URL:r[n].getAttribute("href")},"",r[n].getAttribute("href"))},c=function(t,e){var a=t.settings,n=t.tabs,i=t.panels;n[e].classList.remove(a.activeClass),n[e].setAttribute("tabindex","-1"),n[e].setAttribute("aria-selected",!1),i[e].classList.remove(a.activeClass),i[e].setAttribute("hidden","hidden"),i[e].setAttribute("tabindex","-1")},u=function(t){var e=t.getState(),a=e.tabs,n=e.activeTabIndex;window.setTimeout(function(){a[n].focus()},0)},o=function(e){return function(){var a=e.getState(),n=a.settings,i=a.tabs,r=a.panels,s=a.activeIndex,c=a.activeTabIndex,o=a.loaded;!function(t){var e=t.tabs,a=t.activeTabIndex;e[a].classList.add(t.settings.activeClass),e[a].setAttribute("tabindex",0)}({settings:n,tabs:i,activeTabIndex:c}),n.focusOnLoad&&!o&&u(e),i[c].setAttribute("aria-selected",!0),r[s].classList.add(n.activeClass),r[s].removeAttribute("hidden"),r[s].setAttribute("tabindex",0),e.update(t({},e.getState(),{loaded:!0}),[])}},d=function(n,i){var r=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===r.length?console.warn("Tabs not initialised, no elements found for selector '"+n+"'"):r.map(function(n){var r=function(t){var e,n=t.node,i=t.settings,r=(e={},{update:function(t,a){e=null!=t?t:e,a&&a.forEach(function(t){return t(e)})},getState:function(){return e}}),s=function(t,e){var a=[].slice.call(t.querySelectorAll(e.tabSelector)),n=a.map(function(t){return document.getElementById(t.getAttribute("href").substr(1))||console.warn("Tab panel not found for "+t)});return{tabs:a,panels:n}}(n,i),c=s.tabs,u=s.panels;if(!c.length||!u.length||u.includes(void 0))return!1;var d=function(t,e){return location.hash?function(t){var e=!!location.hash&&location.hash.slice(1);if(e)return t.reduce(function(t,a,n){return a.getAttribute("id")===e&&(t=n),t},void 0)}(t):e.getAttribute("data-active-index")?parseInt(e.getAttribute("data-active-index"),10):void 0}(u,n);return r.update({settings:i,node:n,activeIndex:void 0!==d?+d:+i.activeIndex,activeTabIndex:void 0!==d?+d:+i.activeIndex,tabs:c,panels:u,loaded:!1},[a(r),o(r)]),{getState:r.getState}}({settings:t({},e,n.dataset,i),node:n});return r?Object.create(r):void console.warn("Tab not initialised, required markup not found")}).filter(function(t){return void 0!==t})};export{d as default}; //# sourceMappingURL=index.modern.js.map