axentix/dist/components/caroulix/caroulix.min.js

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

(function(r,h){typeof exports=="object"&&typeof module!="undefined"?module.exports=h():typeof define=="function"&&define.amd?define(h):(r=typeof globalThis!="undefined"?globalThis:r||self,r.Caroulix=h())})(this,function(){"use strict";var wt=Object.defineProperty;var it=r=>{throw TypeError(r)};var Tt=(r,h,d)=>h in r?wt(r,h,{enumerable:!0,configurable:!0,writable:!0,value:d}):r[h]=d;var H=(r,h,d)=>Tt(r,typeof h!="symbol"?h+"":h,d),G=(r,h,d)=>h.has(r)||it("Cannot "+d);var e=(r,h,d)=>(G(r,h,"read from private field"),d?d.call(r):h.get(r)),c=(r,h,d)=>h.has(r)?it("Cannot add the same private member more than once"):h instanceof WeakSet?h.add(r):h.set(r,d),o=(r,h,d,I)=>(G(r,h,"write to private field"),I?I.call(r,d):h.set(r,d),d),l=(r,h,d)=>(G(r,h,"access private method"),d);var J=(r,h,d,I)=>({set _(W){o(r,h,W,d)},get _(){return e(r,h,I)}});var T,L,u,C,S,D,N,O,g,X,A,b,E,R,$,k,P,m,F,Y,x,z,v,a,st,nt,K,M,U,ot,at,rt,ht,lt,Q,B,V;const r=[],h={components:[],plugins:[],prefix:"ax",mode:""},d=i=>h.components.find(n=>n.name===i).class,I=()=>{const i=h.components.filter(t=>t.dataDetection),n=h.plugins.filter(t=>t.dataDetection);return[...i,...n].map(t=>t.name)},W=(i,n)=>{if(!i.name||!i.class){console.error(`[Axentix] Error registering ${n} : Missing required parameters.`);return}if(h[n].some(t=>t.name===i.name)){console.error(`[Axentix] Error registering ${n} : Already exist.`);return}i.autoInit&&(i.autoInit.selector=i.autoInit.selector+=":not(.no-axentix-init)"),h[n].push(i)},ct=i=>{W(i,"components")},dt=i=>i.replace(/[\w]([A-Z])/g,n=>n[0]+"-"+n[1]).toLowerCase(),ut=(i,n="")=>{const t=dt(i);return n?n+"-"+t:t},pt=(i,n,t,s,f="")=>{const p=n[0].toUpperCase()+n.slice(1).toLowerCase();I().includes(p)&&t!=="Collapsible"&&p!=="Sidenav"&&(i[n]=d(p).getDefaultOptions());const y=f?f+"-"+n:n,q=_(i[n],t,s,y);if(!(Object.keys(q).length===0&&i.constructor===Object))return q},_=(i,n,t,s="")=>Object.keys(i).reduce((f,p)=>{if(typeof i[p]=="object"&&i[p]!==null){const y=pt(i,p,n,t,s);y&&(f[p]=y)}else if(i[p]!==null){const y="data-"+n.toLowerCase()+"-"+ut(p,s);if(t.hasAttribute(y)){const q=t.getAttribute(y);f[p]=typeof i[p]=="number"?Number(q):q,typeof i[p]=="boolean"&&(f[p]=q==="true")}}return f},{}),ft=(i,n)=>{const t=Object.assign({},d(i).getDefaultOptions());return _(t,i,n)},vt=()=>{document.querySelectorAll("[data-ax]").forEach(n=>{let t=n.dataset.ax;if(t=t[0].toUpperCase()+t.slice(1).toLowerCase(),!I().includes(t)){console.error(`[Axentix] Error: ${t} component doesn't exist. 
 Did you forget to register him ?`,n);return}try{const s=d(t);new s(`#${n.id}`)}catch(s){console.error("[Axentix] Data: Unable to load "+t,s)}})},xt=()=>{try{new Axentix.Axentix("all")}catch(i){console.error("[Axentix] Unable to auto init.",i)}};document.addEventListener("DOMContentLoaded",()=>{document.documentElement.dataset.axentix&&xt(),vt()});const j=(...i)=>i.reduce((n,t)=>{for(let s in t)n[s]=typeof t[s]=="object"&&t[s]!==null?j(n[s],t[s]):t[s];return n},{}),gt=(i,n,t)=>j(d(i).getDefaultOptions(),ft(i,t),n),w=(i,n,t)=>{const s=new CustomEvent("ax."+n,{detail:t||{},bubbles:!0});i.dispatchEvent(s)},mt=()=>"ontouchstart"in window||navigator.maxTouchPoints>0||navigator.msMaxTouchPoints>0,yt=()=>!!window.PointerEvent&&"maxTouchPoints"in window.navigator&&window.navigator.maxTouchPoints>=0,Lt=()=>mt()?"touch":yt()?"pointer":"mouse",bt=i=>{const n=r.find(t=>t.type!=="Toast"&&"#"+t.instance.el.id===i);return n?n.instance:!1},tt=i=>i.targetTouches&&i.targetTouches.length>=1?i.targetTouches[0].clientY:i.changedTouches&&i.changedTouches.length>=1?i.changedTouches[0].pageY:i.clientY,et=i=>i.targetTouches&&i.targetTouches.length>=1?i.targetTouches[0].clientX:i.changedTouches&&i.changedTouches.length>=1?i.changedTouches[0].pageX:i.clientX;class Et{constructor(){H(this,"el")}removeListeners(){}setupListeners(){}setup(){}preventDbInstance(n){if(n&&bt(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=r.findIndex(t=>t.instance.el.id===this.el.id);r.splice(n,1)}}const It={animationDuration:500,height:"",backToOpposite:!0,enableTouch:!0,indicators:{enabled:!1,isFlat:!1,customClasses:""},autoplay:{enabled:!0,interval:5e3,side:"right"}};class Z extends Et{constructor(t,s){super();c(this,a);H(this,"options");H(this,"activeIndex");c(this,T,0);c(this,L,!1);c(this,u);c(this,C,0);c(this,S,0);c(this,D,!1);c(this,N,!1);c(this,O,!1);c(this,g,0);c(this,X,0);c(this,A);c(this,b);c(this,E);c(this,R);c(this,$);c(this,k);c(this,P);c(this,m);c(this,F,0);c(this,Y,0);c(this,x);c(this,z);c(this,v);try{this.preventDbInstance(t),r.push({type:"Caroulix",instance:this}),this.el=document.querySelector(t),this.options=gt("Caroulix",s,this.el),this.setup()}catch(f){console.error("[Axentix] Caroulix init error",f)}}setup(){w(this.el,"caroulix.setup"),this.options.autoplay.side=this.options.autoplay.side.toLowerCase(),["right","left"].includes(this.options.autoplay.side)||(this.options.autoplay.side="right"),this.activeIndex=0,o(this,T,0),o(this,L,!1),o(this,v,Lt()),o(this,u,l(this,a,st).call(this)),this.options.indicators.enabled&&l(this,a,ht).call(this);const s=this.el.querySelector(".active");s?this.activeIndex=e(this,u).indexOf(s):e(this,u)[0].classList.add("active"),l(this,a,nt).call(this),e(this,C)===0&&l(this,a,U).call(this),this.setupListeners(),this.options.autoplay.enabled&&this.play()}setupListeners(){o(this,A,l(this,a,U).bind(this)),window.addEventListener("resize",e(this,A)),e(this,E)&&(o(this,R,this.next.bind(this,1)),e(this,E).addEventListener("click",e(this,R))),e(this,b)&&(o(this,$,this.prev.bind(this,1)),e(this,b).addEventListener("click",e(this,$))),this.options.enableTouch&&(o(this,k,l(this,a,ot).bind(this)),o(this,P,l(this,a,at).bind(this)),o(this,m,l(this,a,rt).bind(this)),this.el.addEventListener(`${e(this,v)}${e(this,v)==="touch"?"start":"down"}`,e(this,k)),this.el.addEventListener(`${e(this,v)}move`,e(this,P)),this.el.addEventListener(`${e(this,v)}${e(this,v)==="touch"?"end":"up"}`,e(this,m)),this.el.addEventListener(e(this,v)==="pointer"?"pointerleave":"mouseleave",e(this,m)))}removeListeners(){window.removeEventListener("resize",e(this,A)),o(this,A,void 0),e(this,E)&&(e(this,E).removeEventListener("click",e(this,R)),o(this,R,void 0)),e(this,b)&&(e(this,b).removeEventListener("click",e(this,$)),o(this,$,void 0)),this.options.enableTouch&&(this.el.removeEventListener(`${e(this,v)}${e(this,v)==="pointer"?"down":"start"}`,e(this,k)),this.el.removeEventListener(`${e(this,v)}move`,e(this,P)),this.el.removeEventListener(`${e(this,v)}${e(this,v)==="touch"?"end":"up"}`,e(this,m)),this.el.removeEventListener(e(this,v)==="pointer"?"pointerleave":"mouseleave",e(this,m)),o(this,k,void 0),o(this,P,void 0),o(this,m,void 0))}goTo(t){if(t===this.activeIndex)return;(t>this.activeIndex?"right":"left")==="left"?this.prev(Math.abs(this.activeIndex-t)):this.next(Math.abs(this.activeIndex-t)),this.options.indicators.enabled&&l(this,a,Q).call(this)}play(){this.options.autoplay.enabled&&(this.stop(),o(this,z,setInterval(()=>{this.options.autoplay.side==="right"?this.next(1,!1):this.prev(1,!1)},this.options.autoplay.interval)))}stop(){this.options.autoplay.enabled&&clearInterval(e(this,z))}next(t=1,s=!0){e(this,D)||this.activeIndex===e(this,u).length-1&&!this.options.backToOpposite||(w(this.el,"caroulix.next",{step:t}),o(this,L,!0),s&&this.options.autoplay.enabled&&this.stop(),this.activeIndex<e(this,u).length-1?this.activeIndex+=t:this.options.backToOpposite&&(this.activeIndex=0),l(this,a,V).call(this),l(this,a,M).call(this),s&&this.options.autoplay.enabled&&this.play())}prev(t=1,s=!0){e(this,D)||this.activeIndex===0&&!this.options.backToOpposite||(w(this.el,"caroulix.prev",{step:t}),o(this,L,!0),s&&this.options.autoplay.enabled&&this.stop(),this.activeIndex>0?this.activeIndex-=t:this.options.backToOpposite&&(this.activeIndex=e(this,u).length-1),l(this,a,V).call(this),l(this,a,M).call(this),s&&this.options.autoplay.enabled&&this.play())}}return T=new WeakMap,L=new WeakMap,u=new WeakMap,C=new WeakMap,S=new WeakMap,D=new WeakMap,N=new WeakMap,O=new WeakMap,g=new WeakMap,X=new WeakMap,A=new WeakMap,b=new WeakMap,E=new WeakMap,R=new WeakMap,$=new WeakMap,k=new WeakMap,P=new WeakMap,m=new WeakMap,F=new WeakMap,Y=new WeakMap,x=new WeakMap,z=new WeakMap,v=new WeakMap,a=new WeakSet,st=function(){return Array.from(this.el.children).reduce((t,s)=>(s.classList.contains("caroulix-item")&&t.push(s),s.classList.contains("caroulix-prev")&&o(this,b,s),s.classList.contains("caroulix-next")&&o(this,E,s),t),[])},nt=function(){o(this,C,0),o(this,S,0),e(this,u).forEach(t=>{const s=t.querySelector("img, video");s&&(J(this,C)._++,s.complete?l(this,a,K).call(this,s,!0):(s.loadRef=l(this,a,K).bind(this,s),s.addEventListener("load",s.loadRef)))})},K=function(t,s){J(this,S)._++,s||(t.removeEventListener("load",t.loadRef),t.loadRef=void 0),e(this,C)==e(this,S)&&(l(this,a,U).call(this),l(this,a,M).call(this,!0))},M=function(t=!1){const s=this.el.getBoundingClientRect().width;e(this,u).forEach((p,y)=>{p.style.transform=`translateX(${s*y-s*this.activeIndex-e(this,T)}px)`}),this.options.indicators.enabled&&l(this,a,Q).call(this),e(this,u).find(p=>p.classList.contains("active")).classList.remove("active"),e(this,u)[this.activeIndex].classList.add("active"),setTimeout(()=>{o(this,L,!1)},this.options.animationDuration),t&&setTimeout(()=>l(this,a,B).call(this,this.options.animationDuration),50)},U=function(){if(o(this,D,!0),this.el.style.transitionDuration="",this.options.autoplay.enabled&&this.play(),this.options.height)this.el.style.height=this.options.height;else{const t=e(this,u).map(f=>f.offsetHeight),s=Math.max(...t);this.el.style.height=s+"px"}l(this,a,M).call(this),setTimeout(()=>{this.el.style.transitionDuration=this.options.animationDuration+"ms",o(this,D,!1)},50)},ot=function(t){t.target.closest(".caroulix-arrow")||t.target.closest(".caroulix-indicators")||e(this,L)||(t.type!=="touchstart"&&t.preventDefault(),this.options.autoplay.enabled&&this.stop(),l(this,a,B).call(this,0),o(this,O,!0),o(this,N,!1),o(this,g,0),o(this,X,0),o(this,F,et(t)),o(this,Y,tt(t)))},at=function(t){if(!e(this,O)||e(this,N))return;let s=et(t),f=tt(t);if(o(this,g,e(this,F)-s),o(this,X,Math.abs(e(this,Y)-f)),t.type==="touchmove"&&e(this,X)>Math.abs(e(this,g)))return o(this,N,!0),o(this,g,0),!1;t.cancelable&&t.preventDefault(),o(this,T,e(this,g)),l(this,a,M).call(this)},rt=function(t){if(!(t.target.closest(".caroulix-arrow")||t.target.closest(".caroulix-indicators"))&&(t.cancelable&&t.preventDefault(),e(this,O))){l(this,a,B).call(this,this.options.animationDuration);let s=this.el.getBoundingClientRect().width;o(this,O,!1);const f=s*15/100;this.activeIndex!==e(this,u).length-1&&e(this,g)>f?this.next():this.activeIndex!==0&&e(this,g)<-f&&this.prev(),o(this,g,0),o(this,T,0),l(this,a,M).call(this),this.options.autoplay.enabled&&this.play()}},ht=function(){o(this,x,document.createElement("ul")),e(this,x).classList.add("caroulix-indicators"),this.options.indicators.isFlat&&e(this,x).classList.add("caroulix-flat"),this.options.indicators.customClasses&&(e(this,x).className=`${e(this,x).className} ${this.options.indicators.customClasses}`);for(let t=0;t<e(this,u).length;t++){const s=document.createElement("li");s.triggerRef=l(this,a,lt).bind(this,t),s.addEventListener("click",s.triggerRef),e(this,x).appendChild(s)}this.el.appendChild(e(this,x))},lt=function(t,s){s.preventDefault(),t!==this.activeIndex&&this.goTo(t)},Q=function(){Array.from(e(this,x).children).forEach(t=>t.removeAttribute("class")),e(this,x).children[this.activeIndex].classList.add("active")},B=function(t){this.el.style.transitionDuration=t+"ms"},V=function(){w(this.el,"caroulix.slide",{nextElement:e(this,u)[this.activeIndex],currentElement:e(this,u)[e(this,u).findIndex(t=>t.classList.contains("active"))]})},H(Z,"getDefaultOptions",()=>It),ct({class:Z,name:"Caroulix",dataDetection:!0,autoInit:{enabled:!0,selector:".caroulix"}}),Z});