uikit/dist/js/components/slideshow.min.js

UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.

/*! UIkit 3.14.1 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */(function(s,p){typeof exports=="object"&&typeof module<"u"?module.exports=p(require("uikit-util")):typeof define=="function"&&define.amd?define("uikitslideshow",["uikit-util"],p):(s=typeof globalThis<"u"?globalThis:s||self,s.UIkitSlideshow=p(s.UIkit.util))})(this,function(s){"use strict";var p={connected(){!s.hasClass(this.$el,this.$name)&&s.addClass(this.$el,this.$name)}},I={slide:{show(e){return[{transform:h(e*-100)},{transform:h()}]},percent(e){return v(e)},translate(e,t){return[{transform:h(t*-100*e)},{transform:h(t*100*(1-e))}]}}};function v(e){return Math.abs(s.css(e,"transform").split(",")[4]/e.offsetWidth)||0}function h(e,t){return e===void 0&&(e=0),t===void 0&&(t="%"),e+=e?t:"","translate3d("+e+", 0, 0)"}function w(e){return"scale3d("+e+", "+e+", 1)"}function b(e,t,n,i){let{animation:l,easing:r}=i;const{percent:a,translate:m,show:c=s.noop}=l,g=c(n),f=new s.Deferred;return{dir:n,show(o,d,E){d===void 0&&(d=0);const x=E?"linear":r;return o-=Math.round(o*s.clamp(d,-1,1)),this.translate(d),u(t,"itemin",{percent:d,duration:o,timing:x,dir:n}),u(e,"itemout",{percent:1-d,duration:o,timing:x,dir:n}),Promise.all([s.Transition.start(t,g[1],o,x),s.Transition.start(e,g[0],o,x)]).then(()=>{this.reset(),f.resolve()},s.noop),f.promise},cancel(){s.Transition.cancel([t,e])},reset(){for(const o in g[0])s.css([t,e],o,"")},forward(o,d){return d===void 0&&(d=this.percent()),s.Transition.cancel([t,e]),this.show(o,d,!0)},translate(o){this.reset();const d=m(o,n);s.css(t,d[1]),s.css(e,d[0]),u(t,"itemtranslatein",{percent:o,dir:n}),u(e,"itemtranslateout",{percent:1-o,dir:n})},percent(){return a(e||t,t,n)},getDistance(){return e?.offsetWidth}}}function u(e,t,n){s.trigger(e,s.createEvent(t,!1,!1,n))}var y={connected(){var e;this.registerObserver(s.observeResize(((e=this.$options.resizeTargets)==null?void 0:e.call(this))||this.$el,()=>this.$emit("resize")))}},A={props:{autoplay:Boolean,autoplayInterval:Number,pauseOnHover:Boolean},data:{autoplay:!1,autoplayInterval:7e3,pauseOnHover:!0},connected(){this.autoplay&&this.startAutoplay()},disconnected(){this.stopAutoplay()},update(){s.attr(this.slides,"tabindex","-1")},events:[{name:"visibilitychange",el(){return document},filter(){return this.autoplay},handler(){document.hidden?this.stopAutoplay():this.startAutoplay()}}],methods:{startAutoplay(){this.stopAutoplay(),this.interval=setInterval(()=>(!this.draggable||!s.$(":focus",this.$el))&&(!this.pauseOnHover||!s.matches(this.$el,":hover"))&&!this.stack.length&&this.show("next"),this.autoplayInterval)},stopAutoplay(){this.interval&&clearInterval(this.interval)}}},_={props:{draggable:Boolean},data:{draggable:!0,threshold:10},created(){for(const e of["start","move","end"]){const t=this[e];this[e]=n=>{const i=s.getEventPos(n).x*(s.isRtl?-1:1);this.prevPos=i===this.pos?this.prevPos:this.pos,this.pos=i,t(n)}}},events:[{name:s.pointerDown,delegate(){return this.selSlides},handler(e){!this.draggable||!s.isTouch(e)&&$(e.target)||s.closest(e.target,s.selInput)||e.button>0||this.length<2||this.start(e)}},{name:"dragstart",handler(e){e.preventDefault()}}],methods:{start(){this.drag=this.pos,this._transitioner?(this.percent=this._transitioner.percent(),this.drag+=this._transitioner.getDistance()*this.percent*this.dir,this._transitioner.cancel(),this._transitioner.translate(this.percent),this.dragging=!0,this.stack=[]):this.prevIndex=this.index,s.on(document,s.pointerMove,this.move,{passive:!1}),s.on(document,s.pointerUp+" "+s.pointerCancel+" input",this.end,!0),s.css(this.list,"userSelect","none")},move(e){const t=this.pos-this.drag;if(t===0||this.prevPos===this.pos||!this.dragging&&Math.abs(t)<this.threshold)return;s.css(this.list,"pointerEvents","none"),e.cancelable&&e.preventDefault(),this.dragging=!0,this.dir=t<0?1:-1;const{slides:n}=this;let{prevIndex:i}=this,l=Math.abs(t),r=this.getIndex(i+this.dir,i),a=this._getDistance(i,r)||n[i].offsetWidth;for(;r!==i&&l>a;)this.drag-=a*this.dir,i=r,l-=a,r=this.getIndex(i+this.dir,i),a=this._getDistance(i,r)||n[i].offsetWidth;this.percent=l/a;const m=n[i],c=n[r],g=this.index!==r,f=i===r;let o;[this.index,this.prevIndex].filter(d=>!s.includes([r,i],d)).forEach(d=>{s.trigger(n[d],"itemhidden",[this]),f&&(o=!0,this.prevIndex=i)}),(this.index===i&&this.prevIndex!==i||o)&&s.trigger(n[this.index],"itemshown",[this]),g&&(this.prevIndex=i,this.index=r,!f&&s.trigger(m,"beforeitemhide",[this]),s.trigger(c,"beforeitemshow",[this])),this._transitioner=this._translate(Math.abs(this.percent),m,!f&&c),g&&(!f&&s.trigger(m,"itemhide",[this]),s.trigger(c,"itemshow",[this]))},end(){if(s.off(document,s.pointerMove,this.move,{passive:!1}),s.off(document,s.pointerUp+" "+s.pointerCancel+" input",this.end,!0),this.dragging)if(this.dragging=null,this.index===this.prevIndex)this.percent=1-this.percent,this.dir*=-1,this._show(!1,this.index,!0),this._transitioner=null;else{const e=(s.isRtl?this.dir*(s.isRtl?1:-1):this.dir)<0==this.prevPos>this.pos;this.index=e?this.index:this.prevIndex,e&&(this.percent=1-this.percent),this.show(this.dir>0&&!e||this.dir<0&&e?"next":"previous",!0)}s.css(this.list,{userSelect:"",pointerEvents:""}),this.drag=this.percent=null}}};function $(e){return!e.children.length&&e.childNodes.length}var N={data:{selNav:!1},computed:{nav(e,t){let{selNav:n}=e;return s.$(n,t)},selNavItem(e){let{attrItem:t}=e;return"["+t+"],[data-"+t+"]"},navItems(e,t){return s.$$(this.selNavItem,t)}},update:{write(){this.nav&&this.length!==this.nav.children.length&&s.html(this.nav,this.slides.map((e,t)=>"<li "+this.attrItem+'="'+t+'"><a href></a></li>').join("")),this.navItems.concat(this.nav).forEach(e=>e&&(e.hidden=!this.maxIndex)),this.updateNav()},events:["resize"]},events:[{name:"click",delegate(){return this.selNavItem},handler(e){e.preventDefault(),this.show(s.data(e.current,this.attrItem))}},{name:"itemshow",handler:"updateNav"}],methods:{updateNav(){const e=this.getValidIndex();for(const t of this.navItems){const n=s.data(t,this.attrItem);s.toggleClass(t,this.clsActive,s.toNumber(n)===e),s.toggleClass(t,"uk-invisible",this.finite&&(n==="previous"&&e===0||n==="next"&&e>=this.maxIndex))}}}},S={mixins:[A,_,N,y],props:{clsActivated:Boolean,easing:String,index:Number,finite:Boolean,velocity:Number,selSlides:String},data:()=>({easing:"ease",finite:!1,velocity:1,index:0,prevIndex:-1,stack:[],percent:0,clsActive:"uk-active",clsActivated:!1,Transitioner:!1,transitionOptions:{}}),connected(){this.prevIndex=-1,this.index=this.getValidIndex(this.$props.index),this.stack=[]},disconnected(){s.removeClass(this.slides,this.clsActive)},computed:{duration(e,t){let{velocity:n}=e;return T(t.offsetWidth/n)},list(e,t){let{selList:n}=e;return s.$(n,t)},maxIndex(){return this.length-1},selSlides(e){let{selList:t,selSlides:n}=e;return t+" "+(n||"> *")},slides:{get(){return s.$$(this.selSlides,this.$el)},watch(){this.$reset()}},length(){return this.slides.length}},methods:{show(e,t){if(t===void 0&&(t=!1),this.dragging||!this.length)return;const{stack:n}=this,i=t?0:n.length,l=()=>{n.splice(i,1),n.length&&this.show(n.shift(),!0)};if(n[t?"unshift":"push"](e),!t&&n.length>1){n.length===2&&this._transitioner.forward(Math.min(this.duration,200));return}const r=this.getIndex(this.index),a=s.hasClass(this.slides,this.clsActive)&&this.slides[r],m=this.getIndex(e,this.index),c=this.slides[m];if(a===c){l();return}if(this.dir=C(e,r),this.prevIndex=r,this.index=m,a&&!s.trigger(a,"beforeitemhide",[this])||!s.trigger(c,"beforeitemshow",[this,a])){this.index=this.prevIndex,l();return}const g=this._show(a,c,t).then(()=>(a&&s.trigger(a,"itemhidden",[this]),s.trigger(c,"itemshown",[this]),new Promise(f=>{s.fastdom.write(()=>{n.shift(),n.length?this.show(n.shift(),!0):this._transitioner=null,f()})})));return a&&s.trigger(a,"itemhide",[this]),s.trigger(c,"itemshow",[this]),g},getIndex(e,t){return e===void 0&&(e=this.index),t===void 0&&(t=this.index),s.clamp(s.getIndex(e,this.slides,t,this.finite),0,this.maxIndex)},getValidIndex(e,t){return e===void 0&&(e=this.index),t===void 0&&(t=this.prevIndex),this.getIndex(e,t)},_show(e,t,n){if(this._transitioner=this._getTransitioner(e,t,this.dir,{easing:n?t.offsetWidth<600?"cubic-bezier(0.25, 0.46, 0.45, 0.94)":"cubic-bezier(0.165, 0.84, 0.44, 1)":this.easing,...this.transitionOptions}),!n&&!e)return this._translate(1),Promise.resolve();const{length:i}=this.stack;return this._transitioner[i>1?"forward":"show"](i>1?Math.min(this.duration,75+75/(i-1)):this.duration,this.percent)},_getDistance(e,t){return this._getTransitioner(e,e!==t&&t).getDistance()},_translate(e,t,n){t===void 0&&(t=this.prevIndex),n===void 0&&(n=this.index);const i=this._getTransitioner(t!==n?t:!1,n);return i.translate(e),i},_getTransitioner(e,t,n,i){return e===void 0&&(e=this.prevIndex),t===void 0&&(t=this.index),n===void 0&&(n=this.dir||1),i===void 0&&(i=this.transitionOptions),new this.Transitioner(s.isNumber(e)?this.slides[e]:e,s.isNumber(t)?this.slides[t]:t,n*(s.isRtl?-1:1),i)}}};function C(e,t){return e==="next"?1:e==="previous"||e<t?-1:1}function T(e){return .5*e+300}var D={mixins:[S],props:{animation:String},data:{animation:"slide",clsActivated:"uk-transition-active",Animations:I,Transitioner:b},computed:{animation(e){let{animation:t,Animations:n}=e;return{...n[t]||n.slide,name:t}},transitionOptions(){return{animation:this.animation}}},events:{beforeitemshow(e){let{target:t}=e;s.addClass(t,this.clsActive)},itemshown(e){let{target:t}=e;s.addClass(t,this.clsActivated)},itemhidden(e){let{target:t}=e;s.removeClass(t,this.clsActive,this.clsActivated)}}},H={...I,fade:{show(){return[{opacity:0,zIndex:0},{zIndex:-1}]},percent(e){return 1-s.css(e,"opacity")},translate(e){return[{opacity:1-e,zIndex:0},{zIndex:-1}]}},scale:{show(){return[{opacity:0,transform:w(1+.5),zIndex:0},{zIndex:-1}]},percent(e){return 1-s.css(e,"opacity")},translate(e){return[{opacity:1-e,transform:w(1+.5*e),zIndex:0},{zIndex:-1}]}},pull:{show(e){return e<0?[{transform:h(30),zIndex:-1},{transform:h(),zIndex:0}]:[{transform:h(-100),zIndex:0},{transform:h(),zIndex:-1}]},percent(e,t,n){return n<0?1-v(t):v(e)},translate(e,t){return t<0?[{transform:h(30*e),zIndex:-1},{transform:h(-100*(1-e)),zIndex:0}]:[{transform:h(-e*100),zIndex:0},{transform:h(30*(1-e)),zIndex:-1}]}},push:{show(e){return e<0?[{transform:h(100),zIndex:0},{transform:h(),zIndex:-1}]:[{transform:h(-30),zIndex:-1},{transform:h(),zIndex:0}]},percent(e,t,n){return n>0?1-v(t):v(e)},translate(e,t){return t<0?[{transform:h(e*100),zIndex:0},{transform:h(-30*(1-e)),zIndex:-1}]:[{transform:h(-30*e),zIndex:-1},{transform:h(100*(1-e)),zIndex:0}]}}},M={update:{write(){if(this.stack.length||this.dragging)return;const e=this.getValidIndex(this.index);(!~this.prevIndex||this.index!==e)&&this.show(e)},events:["resize"]}},O={methods:{lazyload(e,t){e===void 0&&(e=this.$el),t===void 0&&(t=this.$el),this.registerObserver(s.observeIntersection(e,(n,i)=>{for(const l of s.toNodes(s.isFunction(t)?t():t))s.$$('[loading="lazy"]',l).forEach(r=>s.removeAttr(r,"loading"));for(const l of n.filter(r=>{let{isIntersecting:a}=r;return a}).map(r=>{let{target:a}=r;return a}))i.unobserve(l)}))}}},P={mixins:[O],connected(){this.lazyload(this.slides,this.getAdjacentSlides)}},z={mixins:[p,D,M,P],props:{ratio:String,minHeight:Number,maxHeight:Number},data:{ratio:"16:9",minHeight:!1,maxHeight:!1,selList:".uk-slideshow-items",attrItem:"uk-slideshow-item",selNav:".uk-slideshow-nav",Animations:H},update:{read(){if(!this.list)return!1;let[e,t]=this.ratio.split(":").map(Number);return t=t*this.list.offsetWidth/e||0,this.minHeight&&(t=Math.max(this.minHeight,t)),this.maxHeight&&(t=Math.min(this.maxHeight,t)),{height:t-s.boxModelAdjust(this.list,"height","content-box")}},write(e){let{height:t}=e;t>0&&s.css(this.list,"minHeight",t)},events:["resize"]},methods:{getAdjacentSlides(){return[1,-1].map(e=>this.slides[this.getIndex(this.index+e)])}}};return typeof window<"u"&&window.UIkit&&window.UIkit.component("slideshow",z),z});