-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy patha11y-accordion-tabs.min.js
1 lines (1 loc) · 7.03 KB
/
a11y-accordion-tabs.min.js
1
!function(){"use strict";function e(t,e){t&&(this.el=t,this.tabTriggers=this.el.getElementsByClassName("js-tabs-trigger"),this.tabPanels=this.el.getElementsByClassName("js-tabs-panel"),this.accordionTriggers=this.el.getElementsByClassName("js-accordion-trigger"),this.options=this._extend({breakpoint:640,tabsAllowed:!0,selectedTab:0,startCollapsed:!1},e),"true"==t.getAttribute("data-tabs-allowed")?this.options.tabsAllowed=!0:"false"==t.getAttribute("data-tabs-allowed")&&(this.options.tabsAllowed=!1),t.getAttribute("data-breakpoint")&&(this.options.breakpoint=parseInt(t.getAttribute("data-breakpoint"))),t.getAttribute("data-selected-tab")&&(this.options.selectedTab=parseInt(t.getAttribute("data-selected-tab"))),"true"==t.getAttribute("data-start-collapsed")?this.options.startCollapsed=!0:"false"==t.getAttribute("data-start-collapsed")&&(this.options.startCollapsed=!1),0!==this.tabTriggers.length&&this.tabTriggers.length===this.tabPanels.length&&this._init())}e.prototype._init=function(){var t=this;this.tabTriggersLength=this.tabTriggers.length,this.accordionTriggersLength=this.accordionTriggers.length,this.selectedTab=0,this.prevSelectedTab=null,this.clickListener=this._clickEvent.bind(this),this.keydownListener=this._keydownEvent.bind(this),this.keys={prev:37,next:39,space:32,enter:13},window.innerWidth>=this.options.breakpoint&&this.options.tabsAllowed?this.isAccordion=!1:this.isAccordion=!0;for(var e=0;e<this.tabTriggersLength;e++)this.tabTriggers[e].index=e,this.tabTriggers[e].addEventListener("click",this.clickListener,!1),this.tabTriggers[e].addEventListener("keydown",this.keydownListener,!1),this.tabTriggers[e].classList.contains("is-selected")&&(this.selectedTab=e),this._hide(e);for(e=0;e<this.accordionTriggersLength;e++)this.accordionTriggers[e].index=e,this.accordionTriggers[e].addEventListener("click",this.clickListener,!1),this.accordionTriggers[e].addEventListener("keydown",this.keydownListener,!1),this.accordionTriggers[e].classList.contains("is-selected")&&(this.selectedTab=e);isNaN(this.options.selectedTab)||(this.selectedTab=this.options.selectedTab<this.tabTriggersLength?this.options.selectedTab:this.tabTriggersLength-1),this.el.classList.add("is-initialized"),this.options.tabsAllowed&&this.el.classList.add("tabs-allowed"),this.options.startCollapsed&&this.isAccordion||this.selectTab(this.selectedTab,!1);var s=this._debounce(function(){window.innerWidth>=t.options.breakpoint&&t.options.tabsAllowed?(t.isAccordion=!1,t.options.tabsAllowed&&t.el.classList.add("tabs-allowed"),t.selectTab(t.selectedTab)):(t.isAccordion=!0,t.el.classList.remove("tabs-allowed"),t.options.startCollapsed||t.selectTab(t.selectedTab))},50);window.addEventListener("resize",s)},e.prototype._clickEvent=function(t){t.preventDefault();var e=this._getClosest(t.target,".js-tabs-trigger"),s=0;null==e?(e=this._getClosest(t.target,".js-accordion-trigger"),s=this._getClosest(e,".js-tabs-panel"),this.isAccordion=!0):this.isAccordion=!1;var i=null!=t.target.index?t.target.index:s.index;i===this.selectedTab&&!this.isAccordion||this.selectTab(i,!0)},e.prototype._keydownEvent=function(t){var e;if(t.keyCode===this.keys.prev||t.keyCode===this.keys.next||t.keyCode===this.keys.space||t.keyCode===this.keys.enter){if(t.preventDefault(),t.keyCode===this.keys.prev&&0<t.target.index&&!this.isAccordion)e=t.target.index-1;else if(t.keyCode===this.keys.next&&t.target.index<this.tabTriggersLength-1&&!this.isAccordion)e=t.target.index+1;else{if(t.keyCode!==this.keys.space&&t.keyCode!==this.keys.enter)return;e=t.target.index}this.selectTab(e,!0)}},e.prototype._show=function(t,e){this.tabPanels[t].removeAttribute("tabindex"),this.tabTriggers[t].removeAttribute("tabindex"),this.tabTriggers[t].classList.add("is-selected"),this.tabTriggers[t].setAttribute("aria-selected",!0),this.accordionTriggers[t].setAttribute("aria-expanded",!0);var s=this.tabPanels[t].getElementsByClassName("content")[0];s.setAttribute("aria-hidden",!1),s.classList.remove("is-hidden"),s.classList.add("is-open"),this.tabPanels[t].classList.remove("is-hidden"),this.tabPanels[t].classList.add("is-open"),e&&this.tabTriggers[t].focus()},e.prototype._hide=function(t){this.tabTriggers[t].classList.remove("is-selected"),this.tabTriggers[t].setAttribute("aria-selected",!1),this.tabTriggers[t].setAttribute("tabindex",-1),this.accordionTriggers[t].setAttribute("aria-expanded",!1);var e=this.tabPanels[t].getElementsByClassName("content")[0];e.setAttribute("aria-hidden",!0),e.classList.remove("is-open"),e.classList.add("is-hidden"),this.tabPanels[t].classList.remove("is-open"),this.tabPanels[t].classList.add("is-hidden"),this.tabPanels[t].setAttribute("tabindex",-1)},e.prototype.selectTab=function(t,e){if(null===t){if(this.isAccordion)return;t=0}if(!this.tabPanels[t].classList.contains("is-hidden")&&e)return t===this.selectedTab?this.selectedTab=null:(this.selectedTab=null,this.prevSelectedTab=t),void this._hide(t);if(this.isAccordion)this.prevSelectedTab=this.selectedTab,this.selectedTab=t;else{if(null!==this.prevSelectedTab&&this.isAccordion)this._hide(this.selectedTab);else for(var s=0;s<this.tabTriggersLength;s++)s!==t&&this._hide(s);this.prevSelectedTab=this.selectedTab,this.selectedTab=t}this._show(this.selectedTab,e)},e.prototype.destroy=function(){for(var t=0;t<this.tabTriggersLength;t++)this.tabTriggers[t].classList.remove("is-selected"),this.tabTriggers[t].removeAttribute("aria-selected"),this.tabTriggers[t].removeAttribute("tabindex"),this.tabPanels[t].classList.remove("is-hidden"),this.tabPanels[t].removeAttribute("aria-hidden"),this.tabPanels[t].removeAttribute("tabindex"),this.tabTriggers[t].removeEventListener("click",this.clickListener,!1),this.tabTriggers[t].removeEventListener("keydown",this.keydownListener,!1),delete this.tabTriggers[t].index;this.el.classList.remove("is-initialized")},e.prototype._getClosest=function(t,e){for(Element.prototype.matches||(Element.prototype.matches=Element.prototype.matchesSelector||Element.prototype.mozMatchesSelector||Element.prototype.msMatchesSelector||Element.prototype.oMatchesSelector||Element.prototype.webkitMatchesSelector||function(t){for(var e=(this.document||this.ownerDocument).querySelectorAll(t),s=e.length;0<=--s&&e.item(s)!==this;);return-1<s});t&&t!==document;t=t.parentNode)if(t.matches(e))return t;return null},e.prototype._extend=function(){var s={},i=!1,t=0,e=arguments.length;"[object Boolean]"===Object.prototype.toString.call(arguments[0])&&(i=arguments[0],t++);for(;t<e;t++){!function(t){for(var e in t)Object.prototype.hasOwnProperty.call(t,e)&&(i&&"[object Object]"===Object.prototype.toString.call(t[e])?s[e]=extend(!0,s[e],t[e]):s[e]=t[e])}(arguments[t])}return s},e.prototype._debounce=function(i,r,a){var o;return function(){var t=this,e=arguments,s=a&&!o;clearTimeout(o),o=setTimeout(function(){o=null,a||i.apply(t,e)},r),s&&i.apply(t,e)}};var t=Array.prototype.slice;function s(){t.call(document.querySelectorAll(".js-tabs")).forEach(function(t){new e(t)})}"undefined"!=typeof Document&&("loading"!==document.readyState?s():document.addEventListener("DOMContentLoaded",s)),"undefined"!=typeof self&&(self.AccordionTabs=e),"object"==typeof module&&module.exports&&(module.exports=e)}();