-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathslider.min.js
1 lines (1 loc) · 22.9 KB
/
slider.min.js
1
import anime from"animejs";export class VJSlider{constructor(t,e){this.ele=t,this.previousImage=0,this.currentImage=0,this.randomId=null,this.options={padding:this.ele.getAttribute("padding")?parseInt(this.ele.getAttribute("padding")):0,cardbg:this.ele.getAttribute("cardbg")?this.ele.getAttribute("cardbg"):"black",speed:this.ele.getAttribute("speed")?parseInt(this.ele.getAttribute("speed")):400,height:this.ele.getAttribute("height")?parseInt(this.ele.getAttribute("height")):400,type:this.ele.getAttribute("type")?this.ele.getAttribute("type"):"slide",easing:this.ele.getAttribute("easing")?this.ele.getAttribute("easing"):"easeInOutQuart",size:this.ele.getAttribute("size")?this.ele.getAttribute("size"):"default",touch:!!this.ele.getAttribute("touch")&&("touch"===this.ele.getAttribute("touch")||"true"===this.ele.getAttribute("touch")),lazyload:!this.ele.getAttribute("lazyload")||("lazyload"===this.ele.getAttribute("lazyload")||"true"===this.ele.getAttribute("lazyload")),preload:!!this.ele.getAttribute("preload")&&("preload"===this.ele.getAttribute("preload")||"true"===this.ele.getAttribute("preload")),text:!this.ele.getAttribute("text")||("true"===this.ele.getAttribute("text")||"true"===this.ele.getAttribute("text")),controls:!!this.ele.getAttribute("controls")&&("controls"===this.ele.getAttribute("controls")||"true"===this.ele.getAttribute("controls")),dots:!!this.ele.getAttribute("dots")&&("dots"===this.ele.getAttribute("dots")||"true"===this.ele.getAttribute("dots")),arrowdots:this.ele.getAttribute("arrowdots")?"arrowdots"===this.ele.getAttribute("arrowdots")||"true"===this.ele.getAttribute("arrowdots"):null,autoplay:{active:!!this.ele.getAttribute("autoplay")&&("autoplay"===this.ele.getAttribute("autoplay")||"true"===this.ele.getAttribute("autoplay")),delay:this.ele.getAttribute("delay")?parseInt(this.ele.getAttribute("delay")):2e3,interval:this.ele.getAttribute("interval")?parseInt(this.ele.getAttribute("interval")):3e3,event:null},preloadCount:0,lazyloadCount:0,lazyloadThreshold:this.ele.getAttribute("threshold")?parseInt(this.ele.getAttribute("threshold")):700,lazyloadEvent:null,mockdelay:this.ele.getAttribute("mockdelay")?parseInt(this.ele.getAttribute("mockdelay")):0},this.animejsInstalled=!e,this.options.type=this.animejsInstalled?this.options.type:"slide",this.HTMLSnippets={dots:"▪",leftarrowdot:"◂",rightarrowdot:"▸",leftbtn:"<",rightbtn:">",lazyloader:'<span style="color: white">Please wait</span>'},this.cards={ele:null,to:null,bo:null,h:[],v:[]},this.buttons={next:null,prev:null,locked:!1},this.texts={header:null,footer:null,ele:[]},this.images=[],this.ele.querySelectorAll("data").forEach(t=>{switch((t.getAttribute("type")?t.getAttribute("type"):"image").toLowerCase()){case"image":const e=t.getAttribute("image"),i=t.getAttribute("header")?t.getAttribute("header"):"",s=t.getAttribute("footer")?t.getAttribute("footer"):"",a=t.getAttribute("easing")?t.getAttribute("easing"):"easeInOutQuart";e&&this.images.push({src:e,header:i,footer:s,easing:a});break;case"dots":this.HTMLSnippets.dots=t.getAttribute("html")?t.getAttribute("html"):"";break;case"leftarrowdot":this.HTMLSnippets.leftarrowdot=t.getAttribute("html")?t.getAttribute("html"):"";break;case"rightarrowdot":this.HTMLSnippets.rightarrowdot=t.getAttribute("html")?t.getAttribute("html"):"";break;case"rightbtn":this.HTMLSnippets.rightbtn=t.getAttribute("html")?t.getAttribute("html"):"";break;case"leftbtn":this.HTMLSnippets.leftbtn=t.getAttribute("html")?t.getAttribute("html"):"";break;case"lazyloader":this.HTMLSnippets.lazyloader=t.getAttribute("html")?t.getAttribute("html"):""}this.ele.removeChild(t)}),0===this.images.length&&(this.images=[{src:""}]),this.inputElements=[],this.init()}build(t,e=!0){let{randomId:i,options:s}=this;t.images&&(this.images=[],t.images.forEach(t=>{this.images.push({src:t.src,header:"",footer:"",easing:""})})),t.options&&(s.padding=t.options.padding?t.options.padding:s.padding,s.cardbg=t.options.cardbg?t.options.cardbg:s.cardbg,s.speed=t.options.speed?t.options.speed:s.speed,s.height=t.options.height?t.options.height:s.paddheighting,s.type=t.options.type?t.options.type:s.type,s.easing=t.options.easing?t.options.easing:s.easing,s.size=t.options.size?t.options.size:s.size,s.touch=t.options.touch?t.options.touch:s.touch,s.lazyload=t.options.lazyload?t.options.lazyload:s.lazyload,s.text=t.options.text?t.options.text:s.text,s.controls=t.options.controls?t.options.controls:s.controls,s.dots=t.options.dots?t.options.dots:s.dots,s.lazyloadThreshold=t.options.lazyloadThreshold?t.options.lazyloadThreshold:s.lazyloadThreshold,t.options.autoplay&&(s.autoplay.active=t.options.autoplay.active?t.options.autoplay.active:s.autoplay.active,s.autoplay.delay=t.options.autoplay.delay?t.options.autoplay.delay:s.autoplay.delay,s.autoplay.interval=t.options.autoplay.interval?t.options.autoplay.interval:s.autoplay.interval)),this.currentImage=e?0:this.currentImage,s.preloadCount=0,document.querySelectorAll(`#${i} .__si`).forEach(t=>{clearInterval(t.timerEvent)}),this.ele=document.querySelector(`#${i}`),this.ele.innerHTML="",this.init()}returnElement(){let{randomId:t}=this;return document.querySelector(`#${t}`)}currentProperties(){return this.options}slideData(){return{index:this.currentImage,current:this.images[this.currentImage],images:this.images}}update(t){return this.build(t,!1),this.options}destroy(t=(()=>{})){let{randomId:e}=this;this.ele=document.querySelector(`#${e}`),this.ele.parentNode.remove(),t()}getNext(t=1,e=this.currentImage){let{images:i,currentImage:s}=this;return e+t<i.length?e+t:this.getNext(t-i.length)}getPrev(t=1,e=this.currentImage){let{images:i,currentImage:s}=this;return s-t>=0?s-t:this.getPrev(t-i.length)}init(){this.buildLayout(),this.setActiveCard(),this.markActiveDot(),this.loadText(),this.lock(!1)}buildLayout(){let{randomId:t,ele:e,buttons:i,inputElements:s,cards:a,images:r,options:o}=this;this.randomId=null===t?`__slider_${Math.random().toString(36).substring(7)}`:t;let n="";for(var l=0;l<3;l++)n+=`<div class='__hs' style='width: calc(33.333334% - ${2*o.padding}px); height: calc(100% - ${2*o.padding}px); float: left; padding: ${o.padding}px; background-color: ${o.cardbg}'></div>`;let d="";for(l=0;l<3;l++)d+=`<div class='__vs' style='width: calc(100% - ${2*o.padding}px); height: calc(33.33334% - ${2*o.padding}px); float: block; padding: ${o.padding}px; background-color: white'></div>`;let c="";this.ele.querySelector("dots");o.arrowdots&&(c+=`<button class='vj-slider--dots-item __arrowdots'>${this.HTMLSnippets.leftarrowdot}</button>`);for(let t=0;t<r.length;t++)c+=`<button class='vj-slider--dots-item __dot'>${this.HTMLSnippets.dots}</button>`;o.arrowdots&&(c+=`<button class='vj-slider--dots-item __arrowdots'>${this.HTMLSnippets.rightarrowdot}</button>`);let h='<div style="display: none"><p class="__texts"></p><p class="__texts"></p></div>';o.text&&(h=" \n <div class='vj-slider--text-header-banner'>\n <p class='vj-slider--text-header __texts'></p>\n </div>\n <div class='vj-slider--text-footer-banner'>\n <p class='vj-slider--text-footer __texts'></p>\n </div> \n ");let u="";o.preload&&this.images.forEach((t,e)=>{u+=`<img id='pl_${e}' class='__si' src='${t.src}' style='position: absolute; z-index: -1; pointer-events: none' onload='${setTimeout(()=>{this.preloadComplete(e)},1)}'/>`});let g=document.createElement("div"),p="";if("v"===this.determineType()&&(p=`\n <div style='position: absolute; top: 0; left: 0; width: 100%; height: 300%; transform: translateY(-33.33334%); display: block'> \n ${d} \n </div>\n `),"h"===this.determineType()&&(p=`\n <div style='position: absolute; top: 0; left: 0; width: 300%; height: 100%; transform: translateX(-33.33334%)' z-index: -1'> \n ${n} \n </div>\n `),o.touch){let t="";for(l=0;l<r.length;l++)t+=`\n <div style='width: calc(${100/r.length}% - ${2*o.padding}px); height: calc(100% - ${2*o.padding}px); float: left;padding: ${o.padding}px;'>\n <div style='width: 100%;height: 100%; display: flex; align-items: center; justify-content: center;color:'>\n <div style='background: url(${r[l].src}) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width: 100%; height: 100%'></div>\n </div>\n </div>\n `;g.innerHTML=`\n \x3c!-- container --\x3e\n <div id='${this.randomId}' class='vj-slider--container' style='opacity: ${o.preload?0:1}'>\n <div class='vj-slider vj-slider--${"default"===o.size?"default":"small"===o.size?"small":"large"}'' style='width: 100%; padding: ${o.padding}px; position: relative; overflow-x: scroll; -webkit-overflow-scrolling: touch;'>\n <div style='position: absolute; top: 0; left: 0; width: ${100*r.length}%; height: 100%; display: block;'> \n ${t}\n </div>\n\n\n \x3c!-- TEXTS --\x3e\n ${h} \n </div>\n </div>\n `}else g.innerHTML=`\n \x3c!-- container --\x3e\n <div id='${this.randomId}' class='vj-slider--container' style='opacity: ${o.preload?0:1}'>\n <div class='vj-slider vj-slider--${"default"===o.size?"default":"small"===o.size?"small":"large"}'' style='width: calc(100% - ${2*o.padding}px); padding: ${o.padding}px; position: relative; overflow: hidden;'>\n \n <div class='__underlay'></div>\n ${p}\n <div class='__overlay' style='position: absolute; top: 0; left: 0; width: 100%; height: 100%'></div>\n\n <div class='__loading' style='position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none'>\n ${this.HTMLSnippets.lazyloader} \n </div> \n \n <div class='vj-slider--button-left __button '>\n <button class='icon'>\n ${this.HTMLSnippets.leftbtn}\n </button>\n </div>\n <div class='vj-slider--button-right __button'>\n <button class='icon'>\n ${this.HTMLSnippets.rightbtn}\n </button>\n </div> \n\n ${h}\n \n <div id='__ll_master' style='position: absolute; z-index: -1; pointer-events: none'></div>\n\n ${u}\n </div>\n \n <div class='vj-slider--dots-container'>\n ${c}\n </div> \n </div> \n `;e.parentNode.insertBefore(g,e),e.parentNode.removeChild(e),a.ele=document.querySelector(`#${this.randomId}`),a.h=[],a.v=[],document.querySelectorAll(`#${this.randomId} .__hs`).forEach(t=>{a.h.push(t)}),document.querySelectorAll(`#${this.randomId} .__vs`).forEach(t=>{a.v.push(t)}),document.querySelectorAll(`#${this.randomId} .__texts`).forEach((t,e)=>{t.updateText=(e=>{t.innerHTML=null==e||""===e?" ":e,this.animejsInstalled?anime({targets:t.parentElement,duration:300,easing:"easeInSine",opacity:null==e||""===e?0:1}):t.parentElement.style.opacity=null==e||""===e?0:1}),this.texts[0===e?"header":"footer"]=t,this.texts.ele.push(t)}),document.querySelectorAll(`#${this.randomId} .__button, #${this.randomId} .__arrowdots`).forEach((t,e)=>{s.push(t),t.addEventListener("click",()=>{clearInterval(this.options.autoplay.event),i.locked||(this.lock(!0),1===e||3===e?this.next():this.prev())})}),document.querySelectorAll(`#${this.randomId} .__dot`).forEach((t,e)=>{s.push(t),t.addEventListener("click",()=>{clearInterval(this.options.autoplay.event),i.locked||(e>this.currentImage&&(this.lock(!0),this.previousImage=this.currentImage,this.currentImage=e,this.setImageLoading(!0),this.setImageOnCard(0,e,()=>{this.animate(!1,()=>{})})),e<this.currentImage&&(this.lock(!0),this.previousImage=this.currentImage,this.currentImage=e,this.setImageOnCard(2,e,()=>{this.animate(!0,()=>{})})))})}),o.autoplay.active&&setTimeout(()=>{this.lock(!0),this.next(),this.options.autoplay.event=setInterval(()=>{i.locked||(this.lock(!0),this.next())},this.options.autoplay.interval)},this.options.autoplay.delay)}setActiveCard(t=(()=>{})){let{cards:e,currentImage:i}=this;e[this.determineType()].forEach((e,s)=>{1===s&&this.setImageOnCard(s,i,t)})}setImageOnCard(t=0,e=0,i=(()=>{})){let{cards:s,images:a,options:r}=this;setTimeout(()=>{s[this.determineType()][t].innerHTML=`\n <div id='ll_${t}${e}' style='width: calc(100%); height: calc(100%); overflow: hidden'>\n <div style='background: url(${a[e].src}) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width: 100%; height: 100%'></div>\n </div>\n `,this.preloadImage(a[e].src,()=>{i()})},r.mockdelay)}determineType(){let{options:t}=this;return"cascade"===t.type||"waterfall"===t.type?"v":"h"}preloadComplete(t){let{randomId:e}=this,i=document.querySelector(`#${e} #pl_${t}`);i?i.timerEvent=setInterval(()=>{i.height>0&&(clearInterval(i.timerEvent),this.preloadCompleteCheck())},10):clearInterval(i.timerEvent)}preloadCompleteCheck(){let{randomId:t,images:e,options:i}=this;i.preloadCount++,i.preloadCount===e.length&&setTimeout(()=>{document.querySelector(`#${t}`).style.opacity=1})}preloadImage(t,e=(()=>{}),i=!1){let{randomId:s,options:a}=this;if(a.lazyload){a.lazyloadCount++;let i=document.querySelector(`#${s} #__ll_master`);i?(i.innerHTML=`\n <img id='llc_${a.lazyloadCount}' class='__si' />\n `,setTimeout(()=>{let i=document.querySelector(`#${s} #llc_${a.lazyloadCount}`);i&&(i.src=t,i.timerEvent=setInterval(()=>{i.height>0&&(clearInterval(i.timerEvent),setTimeout(()=>{e()},1))}))})):e()}else e()}imageLoadedCheck(t){let{randomId:e,options:i}=this;clearInterval(this.options.lazyloadEvent),this.options.lazyloadEvent=setInterval(()=>{let i=!0;document.querySelectorAll(`#${e} .__preloadimgs`).forEach((t,e)=>{0===t.height&&(i=!1)}),i&&(clearInterval(this.options.lazyloadEvent),t())},1)}setImageLoading(t){let{randomId:e,options:i}=this;const s=()=>{let i=document.querySelector(`#${e} .__loading`);i&&(i.style.backgroundColor=`rgba(0, 0, 0, ${t?.5:0})`,i.style.opacity=t?1:0)};i.lazyload&&(t?i.lazyloadEvent=setTimeout(()=>{s()},i.lazyloadThreshold+i.speed):(s(),clearInterval(i.lazyloadEvent)))}removeImageOnCard(t=0){let{cards:e,images:i}=this;e[this.determineType()][t].innerHTML="\n <div style='width: 100%; height: 100%;'></div>\n "}setUnderlay(t,e,i=(()=>{})){let{randomId:s,options:a}=this,r=document.querySelector(`#${s} .__underlay`);this.preloadImage(t,()=>{r&&(r.setAttribute("style","position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 1"),r.innerHTML=`\n <div style='width: calc(100% - ${2*a.padding}px); height: calc(100% - ${2*a.padding}px); float: left;padding: ${a.padding}px;'>\n <div style='width: 100%;height: 100%; display: flex;align-items: center; justify-content: center;color: white;'>\n <div style='background: url(${t}) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width: 100%; height: 100%; opacity: 1'></div>\n </div>\n </div> \n `),i()})}hideUnderlay(){let{randomId:t}=this,e=document.querySelector(`#${t} .__underlay`);e&&(e.innerHTML="\n <div></div>\n ")}setOverlay(t,e=(()=>{})){let{options:i,randomId:s}=this,a=document.querySelector(`#${s} .__overlay`);a&&(a.innerHTML=`\n <div style='width: calc(100% - ${2*i.padding}px); height: calc(100% - ${2*i.padding}px); float: left;padding: ${i.padding}px;'>\n <div style='width: 100%;height: 100%; display: flex;align-items: center; justify-content: center;color: white;'>\n <div style='background: url(${t}) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width: 100%; height: 100%; opacity: 1;'></div>\n </div>\n </div> \n `),setTimeout(()=>{e()},100)}hideOverlay(){let{randomId:t}=this;document.querySelector(`#${t} .__overlay`).innerHTML="\n <div></div>\n "}animateText(t){let{options:e}=this;this.texts.ele.forEach((i,s)=>{this.animejsInstalled?anime.timeline().add({targets:i,duration:e.speed/2,easing:"easeInSine",translateX:t?0:0===s?5:-5,opacity:t?1:0,delay:s*e.speed/4,complete:()=>{t||this.loadText()}}):(i.style.transform=`translateX(${t?0:0===s?5:-5})`,i.style.opacity=t?1:0,t||this.loadText())})}loadText(){let{texts:t,images:e,currentImage:i}=this;t.header.updateText(e[i].header),t.footer.updateText(e[i].footer)}next(t=1){let{images:e}=this;this.previousImage=this.currentImage,this.currentImage=this.getNext(1),this.setImageLoading(!0),this.setImageOnCard(0,this.currentImage,()=>{this.animate(!1,()=>{})})}prev(t=1){let{images:e}=this;this.previousImage=this.currentImage,this.currentImage=this.getPrev(1),this.setImageLoading(!0),this.setImageOnCard(2,this.currentImage,()=>{this.animate(!0,()=>{})})}lock(t=!1){let{options:e,buttons:i,inputElements:s}=this;s.forEach(i=>{i.classList.contains("__button")&&i.setAttribute("style",`display: ${e.controls?"visible":"none"}; opacity: ${t?.65:1} `),i.classList.contains("__dot")&&i.setAttribute("style",`display: ${e.dots?"visible":"none"};`)}),i.locked=t}markActiveDot(){let{randomId:t,currentImage:e}=this;document.querySelectorAll(`#${t} .__dot`).forEach((t,i)=>{t.classList.remove("vj-slider--dots-item--active","vj-slider--dots-item--inactive"),t.classList.add(e===i?"vj-slider--dots-item--active":"vj-slider--dots-item--inactive")})}animate(t=!1,e=(()=>{})){let{images:i,currentImage:s,previousImage:a,randomId:r,cards:o,options:n}=this,l=document.querySelector(`#${r} .__overlay`),d=n.speed;this.markActiveDot(),this.animateText(!1);const c=()=>{this.lock(!1),this.setActiveCard(()=>{this.resetPosition(!1),e()})},h=()=>{this.animateText(!0)};if("h"===this.determineType())switch(n.type){case"slide":this.setUnderlay(i[s].src,d,()=>{o[this.determineType()].forEach((e,i)=>{this.setImageLoading(!1),this.animejsInstalled?anime({targets:e,duration:d,easing:n.easing,translateX:t?"-100%":"100%",complete:()=>{1===i&&(c(),h())}}):(e.style.transform=`translateX(${t?"-100%":"100%"})`,1===i&&(c(),h()))})});break;case"slip":this.hideOverlay(),anime({targets:document.querySelector(`#${r} .__overlay`),duration:0,translateX:t?"-100%":"100%"}),this.setOverlay(i[s].src,()=>{this.setImageLoading(!1),anime({targets:document.querySelector(`#${r} .__overlay`),easing:n.easing,duration:d,translateX:0,complete:()=>{this.setActiveCard(),this.lock(!1),h()}})});break;case"fade":l.style.opacity=1,this.setOverlay(i[a].src,()=>{this.setActiveCard(()=>{anime({targets:document.querySelector(`#${this.randomId} .__overlay`),duration:d,easing:n.easing,opacity:0,complete:()=>{this.lock(!1),this.setImageLoading(!1),h()}})})});break;case"grow":l.style.opacity=1,l.style.transform="scale(1) rotate(0)",this.setOverlay(i[a].src,()=>{this.setActiveCard(()=>{this.setImageLoading(!1),anime.timeline().add({targets:document.querySelector(`#${r} .__overlay`),duration:d,easing:n.easing,scale:t?.95:1.25,opacity:0,complete:()=>{this.lock(!1),h()}})})});break;case"skew":l.style.opacity=1,l.style.transform="scale(1) rotate(0)",this.setOverlay(i[a].src,()=>{this.setActiveCard(()=>{this.setImageLoading(!1),anime.timeline().add({targets:document.querySelector(`#${r} .__overlay`),duration:d,easing:n.easing,rotate:t?-20:20,scale:t?.95:1.25,opacity:0,complete:()=>{this.lock(!1),h()}})})});break;case"leaf":l.style.transform="translateX(0) translateY(0) scale(1) rotate(0)",l.style.opacity=1,this.setOverlay(i[a].src,()=>{this.setActiveCard(()=>{this.setImageLoading(!1),anime.timeline().add({targets:document.querySelector(`#${r} .__overlay`),duration:d,easing:n.easing,rotate:t?-45:45,scale:t?.9:1.25,translateX:t?"-50%":"50%",translateY:t?"-50%":"50%",opacity:0,complete:()=>{this.lock(!1),h()}})})});break;case"warpspeed":l.style.transform="scaleX(100)",l.style.opacity=1,this.setOverlay(i[s].src,()=>{this.setActiveCard(()=>{this.setImageLoading(!1),anime.timeline().add({targets:document.querySelector(`#${r} .__overlay`),duration:d,easing:n.easing,scaleX:5,opacity:0,complete:()=>{this.lock(!1),h()}})})});break;case"hyperzoom":l.style.transform="scale(100)",this.setOverlay(i[s].src,()=>{this.setActiveCard(()=>{this.setImageLoading(!1),anime.timeline().add({targets:document.querySelector(`#${r} .__overlay`),duration:d,easing:n.easing,scale:1,opacity:1,complete:()=>{this.lock(!1),h()}})})});break;case"newsroom":l.style.transform=`scale(10) rotate(${t?-240:240}deg)`,this.setOverlay(i[s].src,()=>{this.setActiveCard(()=>{this.setImageLoading(!1),anime.timeline().add({targets:document.querySelector(`#${r} .__overlay`),duration:d,easing:n.easing,scale:1,rotate:0,opacity:1,complete:()=>{this.lock(!1),h()}})})});break;case"flip":l.style.transform="scaleY(1)",this.setOverlay(i[a].src,()=>{this.setActiveCard(()=>{this.setImageLoading(!1),anime.timeline().add({targets:document.querySelector(`#${r} .__overlay`),duration:d,easing:n.easing,scaleY:0,complete:()=>{this.lock(!1),h()}})})});break;case"fold":l.style.transform="scaleX(1)",this.setOverlay(i[a].src,()=>{this.setActiveCard(()=>{this.setImageLoading(!1),anime.timeline().add({targets:document.querySelector(`#${r} .__overlay`),duration:d,easing:n.easing,scaleX:0,complete:()=>{this.lock(!1),h()}})})});break;case"unfold":l.style.transform="scaleX(0)",this.setOverlay(i[s].src,()=>{this.setImageLoading(!1),anime.timeline().add({targets:document.querySelector(`#${r} .__overlay`),duration:d,easing:n.easing,scaleX:1,complete:()=>{this.setActiveCard(),this.lock(!1),h()}})});break;case"unflip":l.style.transform="scaleY(0)",this.setOverlay(i[s].src,()=>{this.setImageLoading(!1),anime.timeline().add({targets:document.querySelector(`#${r} .__overlay`),duration:d,easing:n.easing,scaleY:1,complete:()=>{this.setActiveCard(),this.lock(!1),h()}})})}if("v"===this.determineType())switch(n.type){case"cascade":this.setUnderlay(i[s].src,d,()=>{o[this.determineType()].forEach((e,i)=>{this.setImageLoading(!1),anime({targets:e,duration:d,easing:n.easing,translateY:t?"-100%":"100%",complete:()=>{1===i&&(c(),h())}})})});break;case"waterfall":l.style.transform=`translateY(${t?"100%":"-100%"})`,this.hideOverlay(),this.setOverlay(i[s].src,()=>{this.setImageLoading(!1),anime({targets:document.querySelector(`#${r} .__overlay`),easing:n.easing,duration:d,translateY:0,complete:()=>{this.setActiveCard(),this.lock(!1),h()}})})}}resetPosition(t){let{cards:e}=this;e[this.determineType()].forEach((e,i)=>{e.style.transform="translate(0) scale(1)",e.style.opacity=t?0:1,0!==i&&2!==i||this.removeImageOnCard(i)})}};