futura.js/dist/futurajs-all.min.js

A small JavaScript library for common tasks such as Carousel, Exception, Animation handler and more...

/*---------------------------------------------------------------------
	FuturaJS v1.0.0
-----------------------------------------------------------------------*/

/**
 * @site : https://github.com/BlakvGhost/FuturaJS.git
 * @licence : MIT
 * @version : v1.0.0
 */
class h{constructor(a){console.error("---------- FuturaJs -----------\n \n \t AN ERROR WAS OCCURRED\n\nFile : \nMessage : "+(a+"\nLine : \n \n \nVisit web site for help -> https://js.futura-vision.com"));document}}window.g=window.g??{};window.g.T=h;const k="position-fixed w-100 start-0 top-0 shadow fv-zd animate__animated animate__fadeInDown".split(" ");
class l{constructor(a={h:"",l:"",G:null,fallback:null}){if(""===a.h)return new h("Element options is empty");a.h=document.querySelector(a.h);this.options=a;this.F()}F(){let a=this.options;window.addEventListener("scroll",()=>{window.scrollY>=a.h.getClientRects()[0].height?k.forEach(b=>{a.h.classList.add(b)})||(a.G?a.G(a.h):!1):k.forEach(b=>{a.h.classList.remove(b)})||a.h.classList.remove(a.l)||(a.fallback?a.fallback(a.h):!1)})}}window.g.W=l;const m={root:null,ratio:.2,rootMargin:"0px",threshold:.7,timeout:200};function n(a={h:"",visible:null,H:null,options:{}}){const b=a.options??m;if(IntersectionObserver){const c=new IntersectionObserver(function(d){d.forEach(function(e){let f=e.target;e.intersectionRatio>b.ratio?f.hasAttribute("data-fv-visible")||(a.visible?a.visible(f):!1,f.setAttribute("data-fv-visible",!0)):a.H?a.H(f):!1})},b);a.h.forEach(function(d){c.observe(d)})}};class p{constructor(a={h:"",l:""}){a.i=document.querySelectorAll(a.h);a.l=a.l.trim();this.g=a;this.F()}F(){let a=this.g,b=a.l.split(" ");n({h:this.g.i,options:a,visible:c=>b.forEach(d=>c.classList.add(d))})}}window.g.U=p;function q(a){n({h:a.i,visible:b=>r(a,b)})}function r(a,b){const c=b.getAttribute("data-fv-data");let d=0,e=setInterval(()=>{d<=c?b.innerText=d:clearInterval(e);d++},a.timeout)}class t{constructor(a=200){this.timeout=a;this.i=document.querySelectorAll("[data-fv-anim='countdown']");q(this)}}window.g.V=t;new t;function u(a){n({h:a.i,visible:b=>a.write(b)})}class v{constructor(a={timeout:300,separator:"|"}){this.timeout=a.timeout??300;this.separator=a.separator??"|";this.i=document.querySelectorAll("[data-fv-anim='autowrite']");u(this)}write(a){let b=0,c=a.getAttribute("data-fv-data"),d=setInterval(()=>{let e=a.innerHTML.split(` ${this.separator}`);b<c.length?a.innerHTML=`${e[0]}${c[b]} ${this.separator}`:(clearInterval(d),a.innerHTML=a.innerHTML.split(` ${this.separator}`)[0]);b++},this.timeout)}}
window.g.S=v;new v;const w={items:2,margin:"5px",o:".fv-carousel-control-prev",next:".fv-carousel-control-next",autoplay:!0,C:"500ms",u:!0,timeout:5E3,s:!0,B:!0,direction:"horizontal",v:{O:".fv-dots",direction:"vertical"}};function x(a){a.P=setInterval(()=>{a.next()},a.timeout)}function y(a){a.g.addEventListener("mouseenter",()=>{clearInterval(a.P)});a.g.addEventListener("mouseleave",()=>{x(a)})}
function z(a){a.g.addEventListener("drag",b=>{b=b.pageX;0!==b?A(a,b/1E3):!1});a.g.addEventListener("dragend",b=>{b.pageX<a.D/2?a.o():a.next()})}function B(a){a.m&&a.m.querySelectorAll(".fv-carousel-dots-item").forEach((b,c)=>{c=parseInt(a.A.getAttribute("data-fv-visible"))===c?"active":"inactive";b.setAttribute("class",`${"fv-carousel-dots-item"} fv-dot-${c}`)})}
function A(a,b){a.A.style.transition=`${a.C} ease-in`;a.A.style.transform=a.K.includes("horizontal")?`translate3d(-${b*a.D}px,0px,0px)`:`translate3d(0px,-${100*b}%,0px)`;a.A.setAttribute("data-fv-visible",b);B(a)}
class C{constructor(a,b=w){this.j=0;this.g=document.querySelector(a);this.i=this.g.querySelectorAll(".fv-carousel-item");this.J=document.querySelector(b.o);this.I=document.querySelector(b.next);this.m=document.querySelector(b.v.O);this.L=b.v.direction;this.K=b.direction;this.timeout=b.timeout??5E3;this.N=b.items??2;this.C=b.C??"500ms";this.M=b.margin;this.R=void 0===b.B?!0:b.B;this.autoplay=void 0===b.autoplay?!0:b.autoplay;this.u=void 0===b.u?!0:b.u;this.s=void 0===b.s?!0:b.s;this.D="vertical"===
b.direction?this.g.offsetWidth:this.g.offsetWidth/this.N;this.i[0].getBoundingClientRect();this.start()}start(){var a=document.createElement("style");a.innerHTML="\n    .fv-carousel {overflow: hidden;max-width:100%;height: 100%;}\n    .fv-carousel-inner {width: 100%;height: 100%;overflow: hidden;padding: 0;}\n    .fv-carousel-group {width: 100%;height: 100%;display: flex;flex-wrap: nowrap;}\n    .fv-carousel-item {flex: 0 0 auto;width: 100%;height: 100%;display: block; }\n    .direction-horizontal {flex-direction: row}\n    .direction-vertical {flex-direction: column}\n    .fv-carousel-dots {z-index: 6}\n    .fv-carousel-dots-group {display: flex;justify-content: space-between;height: 100%;width: 100%;}\n    .fv-carousel-dots-item {margin: .5rem!important;height:10px;width:10px;border-radius:50%;}\n    .fv-dot-active {background-color: red;}\n    .fv-dot-inactive {background-color: silver;}\n";
document.querySelector("head").append(a);this.g.classList.add("fv-carousel");a=document.createElement("div");a.classList.add("fv-carousel-inner");this.g.appendChild(a);let b=document.createElement("div");b.classList.add("fv-carousel-group",`direction-${this.K}`);a.appendChild(b);this.i.forEach((c,d)=>{b.appendChild(c)&&c.classList.add("fv-carousel-item");c.setAttribute("aria-label",`${d+1}/${this.i.length}`);c.style.width=`${this.D}px`;c.style.margin=this.M});this.A=b;this.autoplay?x(this):null;this.u?
y(this):!1;this.m?this.v():null;this.s?z(this):null;this.R?this.B():null;this.J?this.J.addEventListener("click",()=>this.o()):null;this.I?this.I.addEventListener("click",()=>this.next()):null}o(){this.j=0<this.j?this.j-1:this.i.length-1;A(this,this.j);B(this)}next(){this.j=this.j<this.i.length-1?this.j+1:0;A(this,this.j);B(this)}B(){this.g.addEventListener("keyup",a=>{switch(a.code){case "ArrowRight":this.next();break;case "ArrowLeft":this.o()}})}v(){this.m.classList.add("fv-carousel-dots");let a=
document.createElement("div");a.classList.add("fv-carousel-dots-group",`direction-${this.L}`);this.i.forEach((b,c)=>{b=document.createElement("div");b.classList.add("fv-carousel-dots-item");b.setAttribute("data-fv-position",c);0===c?b.classList.add("fv-dot-active"):b.classList.add("fv-dot-inactive");a.appendChild(b);b.addEventListener("click",()=>{A(this,c);this.j=c})});this.m.appendChild(a)}}window.j=C;