axentix/dist/components/tab/tab.min.js

Axentix is a framework mixing fully customizable components & utility-first classes, leaving the design choice to the developer.

(function(l,o){typeof exports=="object"&&typeof module!="undefined"?module.exports=o():typeof define=="function"&&define.amd?define(o):(l=typeof globalThis!="undefined"?globalThis:l||self,l.Tab=o())})(this,function(){"use strict";var ft=Object.defineProperty;var F=l=>{throw TypeError(l)};var pt=(l,o,d)=>o in l?ft(l,o,{enumerable:!0,configurable:!0,writable:!0,value:d}):l[o]=d;var M=(l,o,d)=>pt(l,typeof o!="symbol"?o+"":o,d),z=(l,o,d)=>o.has(l)||F("Cannot "+d);var e=(l,o,d)=>(z(l,o,"read from private field"),d?d.call(l):o.get(l)),u=(l,o,d)=>o.has(l)?F("Cannot add the same private member more than once"):o instanceof WeakSet?o.add(l):o.set(l,d),a=(l,o,d,L)=>(z(l,o,"write to private field"),L?L.call(l,d):o.set(l,d),d),m=(l,o,d)=>(z(l,o,"access private method"),d);var x,f,v,p,R,S,I,C,D,E,T,g,O,q,k,b,c,V,Z,G,H,J,P,W,K,Q,X,Y,_;const l=[],o={components:[],plugins:[],prefix:"ax",mode:""},d=s=>`--${o.prefix}-${s}`,L=s=>o.components.find(n=>n.name===s).class,B=()=>{const s=o.components.filter(t=>t.dataDetection),n=o.plugins.filter(t=>t.dataDetection);return[...s,...n].map(t=>t.name)},j=(s,n)=>{if(!s.name||!s.class){console.error(`[Axentix] Error registering ${n} : Missing required parameters.`);return}if(o[n].some(t=>t.name===s.name)){console.error(`[Axentix] Error registering ${n} : Already exist.`);return}s.autoInit&&(s.autoInit.selector=s.autoInit.selector+=":not(.no-axentix-init)"),o[n].push(s)},tt=s=>{j(s,"components")},et=s=>s.replace(/[\w]([A-Z])/g,n=>n[0]+"-"+n[1]).toLowerCase(),it=(s,n="")=>{const t=et(s);return n?n+"-"+t:t},st=(s,n,t,i,r="")=>{const h=n[0].toUpperCase()+n.slice(1).toLowerCase();B().includes(h)&&t!=="Collapsible"&&h!=="Sidenav"&&(s[n]=L(h).getDefaultOptions());const y=r?r+"-"+n:n,A=N(s[n],t,i,y);if(!(Object.keys(A).length===0&&s.constructor===Object))return A},N=(s,n,t,i="")=>Object.keys(s).reduce((r,h)=>{if(typeof s[h]=="object"&&s[h]!==null){const y=st(s,h,n,t,i);y&&(r[h]=y)}else if(s[h]!==null){const y="data-"+n.toLowerCase()+"-"+it(h,i);if(t.hasAttribute(y)){const A=t.getAttribute(y);r[h]=typeof s[h]=="number"?Number(A):A,typeof s[h]=="boolean"&&(r[h]=A==="true")}}return r},{}),nt=(s,n)=>{const t=Object.assign({},L(s).getDefaultOptions());return N(t,s,n)},rt=()=>{document.querySelectorAll("[data-ax]").forEach(n=>{let t=n.dataset.ax;if(t=t[0].toUpperCase()+t.slice(1).toLowerCase(),!B().includes(t)){console.error(`[Axentix] Error: ${t} component doesn't exist. 
 Did you forget to register him ?`,n);return}try{const i=L(t);new i(`#${n.id}`)}catch(i){console.error("[Axentix] Data: Unable to load "+t,i)}})},ot=()=>{try{new Axentix.Axentix("all")}catch(s){console.error("[Axentix] Unable to auto init.",s)}};document.addEventListener("DOMContentLoaded",()=>{document.documentElement.dataset.axentix&&ot(),rt()});const U=(...s)=>s.reduce((n,t)=>{for(let i in t)n[i]=typeof t[i]=="object"&&t[i]!==null?U(n[i],t[i]):t[i];return n},{}),at=(s,n,t)=>U(L(s).getDefaultOptions(),nt(s,t),n),lt=(s,n=document.createElement("div"))=>(s[0].parentElement.insertBefore(n,s[0]),s.forEach(i=>n.appendChild(i)),n),w=(s,n,t)=>{const i=new CustomEvent("ax."+n,{detail:t||{},bubbles:!0});s.dispatchEvent(i)},ht=s=>{const n=l.find(t=>t.type!=="Toast"&&"#"+t.instance.el.id===s);return n?n.instance:!1};class ct{constructor(){M(this,"el")}removeListeners(){}setupListeners(){}setup(){}preventDbInstance(n){if(n&&ht(n))throw new Error(`Instance already exist on ${n}`)}sync(){w(this.el,"component.sync"),this.removeListeners(),this.setupListeners()}reset(){w(this.el,"component.reset"),this.removeListeners(),this.setup()}destroy(){w(this.el,"component.destroy"),this.removeListeners();const n=l.findIndex(t=>t.instance.el.id===this.el.id);l.splice(n,1)}}const dt={animationDuration:300,animationType:"none",disableActiveBar:!1,caroulix:{animationDuration:300,backToOpposite:!1,enableTouch:!1,autoplay:{enabled:!1}}};class $ extends ct{constructor(t,i){super();u(this,c);M(this,"options");u(this,x);u(this,f);u(this,v);u(this,p,0);u(this,R);u(this,S);u(this,I);u(this,C);u(this,D);u(this,E);u(this,T);u(this,g);u(this,O);u(this,q,!1);u(this,k);u(this,b,!1);try{this.preventDbInstance(t),l.push({type:"Tab",instance:this}),this.el=document.querySelector(t),this.options=at("Tab",i,this.el),this.setup()}catch(r){console.error("[Axentix] Tab init error",r)}}setup(){w(this.el,"tab.setup"),["none","slide"].includes(this.options.animationType)||(this.options.animationType="none"),a(this,b,!1),a(this,x,this.el.querySelector(".tab-arrow")),a(this,f,this.el.querySelectorAll(".tab-menu .tab-link")),a(this,v,this.el.querySelector(".tab-menu")),a(this,p,0),a(this,g,m(this,c,G).call(this)),e(this,x)&&(m(this,c,W).call(this),a(this,R,this.el.querySelector(".tab-arrow .tab-prev")),a(this,S,this.el.querySelector(".tab-arrow .tab-next"))),this.setupListeners(),e(this,v).style.transitionDuration=this.options.animationDuration+"ms",this.options.animationType==="slide"?m(this,c,J).call(this):this.updateActiveElement()}setupListeners(){e(this,f).forEach(t=>{t.listenerRef=m(this,c,X).bind(this,t),t.addEventListener("click",t.listenerRef)}),a(this,T,m(this,c,V).bind(this)),window.addEventListener("resize",e(this,T)),e(this,x)&&(a(this,D,m(this,c,W).bind(this)),window.addEventListener("resize",e(this,D)),a(this,I,m(this,c,K).bind(this)),a(this,C,m(this,c,Q).bind(this)),e(this,R).addEventListener("click",e(this,I)),e(this,S).addEventListener("click",e(this,C)))}removeListeners(){e(this,f).forEach(t=>{t.removeEventListener("click",t.listenerRef),t.listenerRef=void 0}),window.removeEventListener("resize",e(this,T)),a(this,T,void 0),e(this,x)&&(window.removeEventListener("resize",e(this,D)),a(this,D,void 0),e(this,R).removeEventListener("click",e(this,I)),e(this,S).removeEventListener("click",e(this,C)),a(this,I,void 0),a(this,C,void 0)),e(this,E)&&(this.el.removeEventListener("ax.caroulix.slide",e(this,E)),a(this,E,void 0))}select(t){if(e(this,b))return;a(this,b,!0);const i=this.el.querySelector('.tab-menu a[href="#'+t+'"]');if(a(this,p,Array.from(e(this,f)).findIndex(r=>r.children[0]===i)),w(i,"tab.select",{currentIndex:e(this,p)}),m(this,c,P).call(this,i.parentElement),e(this,q)){e(this,g).forEach(h=>h.id===t?h.classList.add("active"):"");const r=L("Caroulix");a(this,k,new r("#"+e(this,O).id,this.options.caroulix,this.el,!0)),a(this,E,m(this,c,Z).bind(this)),this.el.addEventListener("ax.caroulix.slide",e(this,E)),a(this,q,!1),a(this,b,!1);return}if(this.options.animationType==="slide"){const r=e(this,g).findIndex(h=>h.id===t);e(this,k).goTo(r),setTimeout(()=>{a(this,b,!1)},this.options.animationDuration)}else m(this,c,H).call(this),e(this,g).forEach(r=>{r.id===t&&(r.style.display="block")}),a(this,b,!1)}updateActiveElement(){let t;e(this,f).forEach((r,h)=>{r.classList.contains("active")&&(t=r,a(this,p,h))}),t||(t=e(this,f).item(0),a(this,p,0));const i=t.children[0].getAttribute("href");this.select(i.split("#")[1])}prev(t=1){if(e(this,b))return;const i=m(this,c,Y).call(this,t);a(this,p,i),w(this.el,"tab.prev",{step:t});const r=e(this,f)[i].children[0].getAttribute("href");this.select(r.split("#")[1])}next(t=1){if(e(this,b))return;const i=m(this,c,_).call(this,t);a(this,p,i),w(this.el,"tab.next",{step:t});const r=e(this,f)[i].children[0].getAttribute("href");this.select(r.split("#")[1])}}return x=new WeakMap,f=new WeakMap,v=new WeakMap,p=new WeakMap,R=new WeakMap,S=new WeakMap,I=new WeakMap,C=new WeakMap,D=new WeakMap,E=new WeakMap,T=new WeakMap,g=new WeakMap,O=new WeakMap,q=new WeakMap,k=new WeakMap,b=new WeakMap,c=new WeakSet,V=function(){this.updateActiveElement();for(let t=100;t<500;t+=100)setTimeout(()=>{this.updateActiveElement()},t)},Z=function(){e(this,p)!==e(this,k).activeIndex&&(a(this,p,e(this,k).activeIndex),m(this,c,P).call(this,e(this,f)[e(this,p)]))},G=function(){return Array.from(e(this,f)).map(t=>{const i=t.children[0].getAttribute("href");return this.el.querySelector(i)})},H=function(){e(this,g).forEach(t=>t.style.display="none")},J=function(){e(this,g).forEach(i=>i.classList.add("caroulix-item")),a(this,O,lt(e(this,g))),e(this,O).classList.add("caroulix");const t=Math.random().toString().split(".")[1];e(this,O).id="tab-caroulix-"+t,a(this,q,!0),this.options.animationDuration!==300&&(this.options.caroulix.animationDuration=this.options.animationDuration),this.updateActiveElement()},P=function(t){if(e(this,f).forEach(i=>i.classList.remove("active")),!this.options.disableActiveBar){const i=t.getBoundingClientRect(),r=i.left,h=e(this,v).getBoundingClientRect().left,y=r-h+e(this,v).scrollLeft,A=i.width,ut=e(this,v).clientWidth-y-A;e(this,v).style.setProperty(d("tab-bar-left-offset"),Math.floor(y)+"px"),e(this,v).style.setProperty(d("tab-bar-right-offset"),Math.ceil(ut)+"px")}t.classList.add("active")},W=function(){const t=Array.from(e(this,f)).reduce((r,h)=>(r+=h.clientWidth,r),0),i=e(this,x).clientWidth;t>i?e(this,x).classList.contains("tab-arrow-show")||e(this,x).classList.add("tab-arrow-show"):e(this,x).classList.contains("tab-arrow-show")&&e(this,x).classList.remove("tab-arrow-show")},K=function(t){t.preventDefault(),e(this,v).scrollLeft-=40},Q=function(t){t.preventDefault(),e(this,v).scrollLeft+=40},X=function(t,i){if(i.preventDefault(),e(this,b)||t.classList.contains("active"))return;const r=t.children[0].getAttribute("href");this.select(r.split("#")[1])},Y=function(t){let i=0,r=e(this,p);for(let h=0;h<t;h++)r>0?(i=r-1,r--):(r=e(this,f).length-1,i=r);return i},_=function(t){let i=0,r=e(this,p);for(let h=0;h<t;h++)r<e(this,f).length-1?(i=r+1,r++):(r=0,i=r);return i},M($,"getDefaultOptions",()=>dt),tt({class:$,name:"Tab",dataDetection:!0,autoInit:{enabled:!0,selector:".tab"}}),$});