UNPKG

futura.js

Version:

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

32 lines (30 loc) 12.5 kB
/*--------------------------------------------------------------------- FuturaJS v2.1.0 -----------------------------------------------------------------------*/ /** * @site : https://github.com/BlakvGhost/FuturaJS.git * @licence : MIT * @version : v2.1.0 */ class Exception$$module$lib$core$Exception{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.fJs=window.fJs??{};window.fJs.Exception=Exception$$module$lib$core$Exception;var module$lib$core$Exception={};module$lib$core$Exception.default=Exception$$module$lib$core$Exception;const STICKY_CLASS_LIST$$module$lib$core$Sticky="position-fixed w-100 start-0 top-0 shadow fv-zd animate__animated animate__fadeInDown".split(" "),EXCEPTION_ERROR$$module$lib$core$Sticky="Element options is empty"; class Sticky$$module$lib$core$Sticky{constructor(a={elt:"",class:"",callback:null,fallback:null}){if(""===a.elt)return new Exception$$module$lib$core$Exception(EXCEPTION_ERROR$$module$lib$core$Sticky);a.elt=document.querySelector(a.elt);this.options=a;this.run()}run(){let a=this.options;window.addEventListener("scroll",b=>{window.scrollY>=a.elt.getClientRects()[0].height?STICKY_CLASS_LIST$$module$lib$core$Sticky.forEach(c=>{a.elt.classList.add(c)})||(a.callback?a.callback(a.elt):!1):STICKY_CLASS_LIST$$module$lib$core$Sticky.forEach(c=> {a.elt.classList.remove(c)})||a.elt.classList.remove(a.class)||(a.fallback?a.fallback(a.elt):!1)})}}window.fJs.Sticky=Sticky$$module$lib$core$Sticky;var module$lib$core$Sticky={};module$lib$core$Sticky.default=Sticky$$module$lib$core$Sticky;const DEFAULT_INTERSECTION_OPTION$$module$lib$Utils={root:null,ratio:.2,rootMargin:"0px",threshold:.7,timeout:200},DATA_INTERSECTION_VISIBLE$$module$lib$Utils="data-fv-visible"; class Utils$$module$lib$Utils{IntersectionHandler(a={elt:"",visible:null,invisible:null,options:{}}){const b=a.options??DEFAULT_INTERSECTION_OPTION$$module$lib$Utils;if(IntersectionObserver){const c=new IntersectionObserver(function(d,f){d.forEach(function(g){let e=g.target;g.intersectionRatio>b.ratio?e.hasAttribute(DATA_INTERSECTION_VISIBLE$$module$lib$Utils)||(a.visible?a.visible(e):!1,e.setAttribute(DATA_INTERSECTION_VISIBLE$$module$lib$Utils,!0)):a.invisible?a.invisible(e):!1})},b);a.elt.forEach(function(d, f){c.observe(d)})}}}var module$lib$Utils={};module$lib$Utils.default=Utils$$module$lib$Utils;let _u$$module$lib$core$Intersection=new Utils$$module$lib$Utils;class Intersection$$module$lib$core$Intersection{constructor(a={elt:"",class:""}){a.___=document.querySelectorAll(a.elt);a.class=a.class.trim();this._=a;this.run()}run(){let a=this._,b=a.class.split(" ");_u$$module$lib$core$Intersection.IntersectionHandler({elt:this._.___,options:a,visible:c=>b.forEach(d=>c.classList.add(d))})}}window.fJs.Intersection=Intersection$$module$lib$core$Intersection;var module$lib$core$Intersection={}; module$lib$core$Intersection.default=Intersection$$module$lib$core$Intersection;const DATA_VALUE$$module$lib$core$NumberAutoCount="data-fv-data",COUNTDOWN_SELECTOR$$module$lib$core$NumberAutoCount="[data-fv-anim='countdown']";let _u$$module$lib$core$NumberAutoCount=new Utils$$module$lib$Utils; class NumberAutoCount$$module$lib$core$NumberAutoCount{constructor(a=200){this.timeout=a;this.___=document.querySelectorAll(COUNTDOWN_SELECTOR$$module$lib$core$NumberAutoCount);this.begin()}begin(){_u$$module$lib$core$NumberAutoCount.IntersectionHandler({elt:this.___,visible:a=>this.count(a)})}count(a){const b=a.getAttribute(DATA_VALUE$$module$lib$core$NumberAutoCount);let c=0,d=setInterval(()=>{c<=b?a.innerText=c:this.stopCount(d);c++},this.timeout)}stopCount(a){clearInterval(a)}} window.fJs.NumberAutoCount=NumberAutoCount$$module$lib$core$NumberAutoCount;new NumberAutoCount$$module$lib$core$NumberAutoCount;var module$lib$core$NumberAutoCount={};module$lib$core$NumberAutoCount.default=NumberAutoCount$$module$lib$core$NumberAutoCount;const DATA_VALUE$$module$lib$core$AutoWriteText="data-fv-data",AUTOWRITE_SELECTOR$$module$lib$core$AutoWriteText="[data-fv-anim='autowrite']";let _u$$module$lib$core$AutoWriteText=new Utils$$module$lib$Utils; class AutoWriteText$$module$lib$core$AutoWriteText{constructor(a={timeout:300,separator:"|"}){this.timeout=a.timeout??300;this.separator=a.separator??"|";this.___=document.querySelectorAll(AUTOWRITE_SELECTOR$$module$lib$core$AutoWriteText);this.begin()}begin(){_u$$module$lib$core$AutoWriteText.IntersectionHandler({elt:this.___,visible:a=>this.write(a)})}write(a){let b=0,c=a.getAttribute(DATA_VALUE$$module$lib$core$AutoWriteText),d=setInterval(()=>{let f=a.innerHTML.split(` ${this.separator}`);b<c.length? a.innerHTML=`${f[0]}${c[b]} ${this.separator}`:this.stopWrite(a,d);b++},this.timeout)}stopWrite(a,b){clearInterval(b);a.innerHTML=a.innerHTML.split(` ${this.separator}`)[0]}}window.fJs.AutoWriteText=AutoWriteText$$module$lib$core$AutoWriteText;new AutoWriteText$$module$lib$core$AutoWriteText;var module$lib$core$AutoWriteText={};module$lib$core$AutoWriteText.default=AutoWriteText$$module$lib$core$AutoWriteText;const DATA_VALUE$$module$lib$core$Tab="data-fv-data",DATA_TARGET$$module$lib$core$Tab="data-fv-target",PARENT_CLASS$$module$lib$core$Tab=".tab-init",TAB_SELECTOR$$module$lib$core$Tab="[data-fv-toggle='tab']",CONTENT_SELECTOR$$module$lib$core$Tab='[role="tabpanel"]',CONTENT_VISIBLE_CLASS$$module$lib$core$Tab="show fade active",TAB_VISIBLE_CLASS$$module$lib$core$Tab="btn-danger active-tab",ACTIVE_TAB_CLASS$$module$lib$core$Tab="active-tab",TAB_HIDDEN_CLASS$$module$lib$core$Tab="btn-light"; class Tab$$module$lib$core$Tab{constructor(){this.___=document.querySelectorAll(TAB_SELECTOR$$module$lib$core$Tab);this.begin()}begin(){this.___.forEach(function(a,b){b=$(a).parents(PARENT_CLASS$$module$lib$core$Tab);let c=b.find(a.getAttribute(DATA_TARGET$$module$lib$core$Tab)),d=b.find(TAB_SELECTOR$$module$lib$core$Tab),f=b.find(CONTENT_SELECTOR$$module$lib$core$Tab);a.addEventListener("click",function(){$(this).hasClass(ACTIVE_TAB_CLASS$$module$lib$core$Tab)||(d.each((g,e)=>{$(e).removeClass(TAB_VISIBLE_CLASS$$module$lib$core$Tab).addClass(TAB_HIDDEN_CLASS$$module$lib$core$Tab)&& f.eq(g).removeClass(CONTENT_VISIBLE_CLASS$$module$lib$core$Tab)}),$(this).addClass(TAB_VISIBLE_CLASS$$module$lib$core$Tab).removeClass(TAB_HIDDEN_CLASS$$module$lib$core$Tab),c.addClass(CONTENT_VISIBLE_CLASS$$module$lib$core$Tab))})})}}window.fJs.Tab=Tab$$module$lib$core$Tab;new Tab$$module$lib$core$Tab;var module$lib$core$Tab={};module$lib$core$Tab.default=Tab$$module$lib$core$Tab;const DATA_VISIBLE$$module$lib$FvCarousel$FvCarousel="data-fv-visible",DATA_POSITION$$module$lib$FvCarousel$FvCarousel="data-fv-position",SLIDE_ITEM_LABEL$$module$lib$FvCarousel$FvCarousel="aria-label",DIV_NODE$$module$lib$FvCarousel$FvCarousel="div",DOT_CLASS$$module$lib$FvCarousel$FvCarousel="fv-carousel-dots-item",DEFAULT_PARAM$$module$lib$FvCarousel$FvCarousel={items:2,margin:"5px",prev:".fv-carousel-control-prev",next:".fv-carousel-control-next",autoplay:!0,autoplaySpeed:"500ms",autoplayHoverPause:!0, timeout:5E3,allowDrag:!0,keyDirection:!0,direction:"horizontal",dots:{el:".fv-dots",direction:"vertical"}},CAROUSEL_STYLE$$module$lib$FvCarousel$FvCarousel="\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"; class FvCarousel$$module$lib$FvCarousel$FvCarousel{constructor(a,b=DEFAULT_PARAM$$module$lib$FvCarousel$FvCarousel){this._itemClass=".fv-carousel-item";this.___i=0;this.__=document.querySelector(a);this.___=this.__.querySelectorAll(this._itemClass);this.prevBtn=document.querySelector(b.prev);this.nextBtn=document.querySelector(b.next);this.dotsContainer=document.querySelector(b.dots.el);this.dotsDirection=b.dots.direction;this.slideDirection=b.direction;this.timeout=b.timeout??5E3;this.itemsCount= b.items??2;this.autoplaySpeed=b.autoplaySpeed??"500ms";this.elementMargin=b.margin;this.allowKeyDirection=void 0===b.keyDirection?!0:b.keyDirection;this.autoplay=void 0===b.autoplay?!0:b.autoplay;this.autoplayHoverPause=void 0===b.autoplayHoverPause?!0:b.autoplayHoverPause;this.allowDrag=void 0===b.allowDrag?!0:b.allowDrag;this.elementWidth="vertical"===b.direction?this.__.offsetWidth:this.__.offsetWidth/this.itemsCount;this.elementHeight=this.___[0].getBoundingClientRect().height;this.start()}start(){var a= document.createElement("style");a.innerHTML=CAROUSEL_STYLE$$module$lib$FvCarousel$FvCarousel;document.querySelector("head").append(a);this.__.classList.add("fv-carousel");a=document.createElement(DIV_NODE$$module$lib$FvCarousel$FvCarousel);a.classList.add("fv-carousel-inner");this.__.appendChild(a);let b=document.createElement(DIV_NODE$$module$lib$FvCarousel$FvCarousel);b.classList.add("fv-carousel-group",`direction-${this.slideDirection}`);a.appendChild(b);this.___.forEach((c,d)=>{b.appendChild(c)&& c.classList.add("fv-carousel-item");c.setAttribute(SLIDE_ITEM_LABEL$$module$lib$FvCarousel$FvCarousel,`${d+1}/${this.___.length}`);c.style.width=`${this.elementWidth}px`;c.style.margin=this.elementMargin});this.rowMain=b;this.autoplay?this.autoPlay():null;this.autoplayHoverPause?this.stopOnHover():!1;this.dotsContainer?this.dots():null;this.allowDrag?this.drag():null;this.allowKeyDirection?this.keyDirection():null;this.prevBtn?this.prevBtn.addEventListener("click",()=>this.prev()):null;this.nextBtn? this.nextBtn.addEventListener("click",()=>this.next()):null}autoPlay(){this.__autoplayId=setInterval(()=>{this.next()},this.timeout)}toIndex(a){this.rowMain.style.transition=`${this.autoplaySpeed} ease-in`;this.rowMain.style.transform=this.slideDirection.includes("horizontal")?`translate3d(-${a*this.elementWidth}px,0px,0px)`:`translate3d(0px,-${100*a}%,0px)`;this.rowMain.setAttribute(DATA_VISIBLE$$module$lib$FvCarousel$FvCarousel,a);this.dotsBgColor()}prev(){this.___i=0<this.___i?this.___i-1:this.___.length- 1;this.toIndex(this.___i);this.dotsBgColor()}next(){this.___i=this.___i<this.___.length-1?this.___i+1:0;this.toIndex(this.___i);this.dotsBgColor()}drag(){this.__.addEventListener("drag",a=>{a=a.pageX;0!==a?this.toIndex(a/1E3):!1});this.__.addEventListener("dragend",a=>{a.pageX<this.elementWidth/2?this.prev():this.next()})}keyDirection(){this.__.addEventListener("keyup",a=>{switch(a.code){case "ArrowRight":this.next();break;case "ArrowLeft":this.prev()}})}touchmove(){this.__.addEventListener("touchmove", a=>{a=a.pageX;0!==a?this.toIndex(a/1E3):!1})}stopOnHover(){this.__.addEventListener("mouseenter",()=>{clearInterval(this.__autoplayId)});this.__.addEventListener("mouseleave",()=>{this.autoPlay()})}dots(){this.dotsContainer.classList.add("fv-carousel-dots");let a=document.createElement(DIV_NODE$$module$lib$FvCarousel$FvCarousel);a.classList.add("fv-carousel-dots-group",`direction-${this.dotsDirection}`);this.___.forEach((b,c)=>{b=document.createElement(DIV_NODE$$module$lib$FvCarousel$FvCarousel); b.classList.add(DOT_CLASS$$module$lib$FvCarousel$FvCarousel);b.setAttribute(DATA_POSITION$$module$lib$FvCarousel$FvCarousel,c);0===c?b.classList.add("fv-dot-active"):b.classList.add("fv-dot-inactive");a.appendChild(b);b.addEventListener("click",()=>{this.toIndex(c);this.___i=c})});this.dotsContainer.appendChild(a)}dotsBgColor(){this.dotsContainer&&this.dotsContainer.querySelectorAll(`.${DOT_CLASS$$module$lib$FvCarousel$FvCarousel}`).forEach((a,b)=>{let c=parseInt(this.rowMain.getAttribute(DATA_VISIBLE$$module$lib$FvCarousel$FvCarousel)); a.setAttribute("class",`${DOT_CLASS$$module$lib$FvCarousel$FvCarousel} fv-dot-${c===b?"active":"inactive"}`)})}}window.FvCarousel=FvCarousel$$module$lib$FvCarousel$FvCarousel;var module$lib$FvCarousel$FvCarousel={};module$lib$FvCarousel$FvCarousel.default=FvCarousel$$module$lib$FvCarousel$FvCarousel;var module$fjs_init={};