@stormid/tabs
Version:
Accessible tabbed panelled content areas
3 lines (2 loc) • 4.76 kB
JavaScript
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t||self).Tabs=e()}(this,function(){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={tabSelector:"[role=tab]",activeClass:"is--active",updateURL:!0,activation:"auto",activeIndex:0,focusOnLoad:!1},n=function(t){return function(e){var n=e.tabs,a=e.panels;n[0].parentNode.setAttribute("role","tablist"),n.forEach(function(e,n){e.setAttribute("role","tab"),e.setAttribute("aria-selected",!1),a[n].setAttribute("aria-labelledby",e.getAttribute("id")),e.setAttribute("tabindex","-1"),a[n].setAttribute("role","tabpanel"),a[n].setAttribute("hidden","hidden"),a[n].setAttribute("tabindex","-1"),r(e,n,t),a[n].firstElementChild&&!a[n].firstElementChild.hasAttribute("tabindex")&&a[n].firstElementChild.setAttribute("tabindex","-1")})}},a=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,n,r){var o="manual"===r.getState().settings.activation,u=o?function(){return c(r)}:s;e.addEventListener("keydown",function(e){var c=r.getState().activeIndex;switch(e.keyCode){case 37:r.update(t({},r.getState(),{activeTabIndex:a(r.getState()),activeIndex:o?r.getState().activeIndex:a(r.getState())}),[function(){return u(r,c)}]);break;case 39:r.update(t({},r.getState(),{activeTabIndex:i(r.getState()),activeIndex:o?r.getState().activeIndex:i(r.getState())}),[function(){return u(r,c)}]);break;case 13:c!==n&&r.update(t({},r.getState(),{activeIndex:n,activeTabIndex:n}),[function(){return s(r,c)}]);break;case 32:e.preventDefault(),c!==n&&r.update(t({},r.getState(),{activeIndex:n,activeTabIndex:n}),[function(){return s(r,c)}])}}),e.addEventListener("click",function(e){e.preventDefault();var a=r.getState().activeTabIndex;r.getState().activeIndex!==n&&r.update(t({},r.getState(),{activeIndex:n,activeTabIndex:n}),[function(){return s(r,a)}])},!1)},s=function(t,e){var n=t.getState(),a=n.activeIndex,i=n.settings,r=n.tabs;o(t.getState(),e),u(t)(t.getState()),c(t),i.updateURL&&window.history&&window.history.replaceState({URL:r[a].getAttribute("href")},"",r[a].getAttribute("href"))},o=function(t,e){var n=t.settings,a=t.tabs,i=t.panels;a[e].classList.remove(n.activeClass),a[e].setAttribute("tabindex","-1"),a[e].setAttribute("aria-selected",!1),i[e].classList.remove(n.activeClass),i[e].setAttribute("hidden","hidden"),i[e].setAttribute("tabindex","-1")},c=function(t){var e=t.getState(),n=e.tabs,a=e.activeTabIndex;window.setTimeout(function(){n[a].focus()},0)},u=function(e){return function(){var n=e.getState(),a=n.settings,i=n.tabs,r=n.panels,s=n.activeIndex,o=n.activeTabIndex,u=n.loaded;!function(t){var e=t.tabs,n=t.activeTabIndex;e[n].classList.add(t.settings.activeClass),e[n].setAttribute("tabindex",0)}({settings:a,tabs:i,activeTabIndex:o}),a.focusOnLoad&&!u&&c(e),i[o].setAttribute("aria-selected",!0),r[s].classList.add(a.activeClass),r[s].removeAttribute("hidden"),r[s].setAttribute("tabindex",0),e.update(t({},e.getState(),{loaded:!0}),[])}};return function(a,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]:[]}(a);return 0===r.length?console.warn("Tabs not initialised, no elements found for selector '"+a+"'"):r.map(function(a){var r=function(t){var e,a=t.node,i=t.settings,r=(e={},{update:function(t,n){e=null!=t?t:e,n&&n.forEach(function(t){return t(e)})},getState:function(){return e}}),s=function(t,e){var n=[].slice.call(t.querySelectorAll(e.tabSelector)),a=n.map(function(t){return document.getElementById(t.getAttribute("href").substr(1))||console.warn("Tab panel not found for "+t)});return{tabs:n,panels:a}}(a,i),o=s.tabs,c=s.panels;if(!o.length||!c.length||c.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,n,a){return n.getAttribute("id")===e&&(t=a),t},void 0)}(t):e.getAttribute("data-active-index")?parseInt(e.getAttribute("data-active-index"),10):void 0}(c,a);return r.update({settings:i,node:a,activeIndex:void 0!==d?+d:+i.activeIndex,activeTabIndex:void 0!==d?+d:+i.activeIndex,tabs:o,panels:c,loaded:!1},[n(r),u(r)]),{getState:r.getState}}({settings:t({},e,a.dataset,i),node:a});return r?Object.create(r):void console.warn("Tab not initialised, required markup not found")}).filter(function(t){return void 0!==t})}});
//# sourceMappingURL=index.umd.js.map