@stormid/tabs/dist/index.modern.mjs

Accessible tabbed panelled content areas

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