uikit/dist/js/components/slider.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(e,v){typeof exports=="object"&&typeof module<"u"?module.exports=v(require("uikit-util")):typeof define=="function"&&define.amd?define("uikitslider",["uikit-util"],v):(e=typeof globalThis<"u"?globalThis:e||self,e.UIkitSlider=v(e.UIkit.util))})(this,function(e){"use strict";var v={connected(){!e.hasClass(this.$el,this.$name)&&e.addClass(this.$el,this.$name)}},S={connected(){var s;this.registerObserver(e.observeResize(((s=this.$options.resizeTargets)==null?void 0:s.call(this))||this.$el,()=>this.$emit("resize")))}},R={props:{autoplay:Boolean,autoplayInterval:Number,pauseOnHover:Boolean},data:{autoplay:!1,autoplayInterval:7e3,pauseOnHover:!0},connected(){this.autoplay&&this.startAutoplay()},disconnected(){this.stopAutoplay()},update(){e.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||!e.$(":focus",this.$el))&&(!this.pauseOnHover||!e.matches(this.$el,":hover"))&&!this.stack.length&&this.show("next"),this.autoplayInterval)},stopAutoplay(){this.interval&&clearInterval(this.interval)}}},D={props:{draggable:Boolean},data:{draggable:!0,threshold:10},created(){for(const s of["start","move","end"]){const t=this[s];this[s]=n=>{const i=e.getEventPos(n).x*(e.isRtl?-1:1);this.prevPos=i===this.pos?this.prevPos:this.pos,this.pos=i,t(n)}}},events:[{name:e.pointerDown,delegate(){return this.selSlides},handler(s){!this.draggable||!e.isTouch(s)&&T(s.target)||e.closest(s.target,e.selInput)||s.button>0||this.length<2||this.start(s)}},{name:"dragstart",handler(s){s.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,e.on(document,e.pointerMove,this.move,{passive:!1}),e.on(document,e.pointerUp+" "+e.pointerCancel+" input",this.end,!0),e.css(this.list,"userSelect","none")},move(s){const t=this.pos-this.drag;if(t===0||this.prevPos===this.pos||!this.dragging&&Math.abs(t)<this.threshold)return;e.css(this.list,"pointerEvents","none"),s.cancelable&&s.preventDefault(),this.dragging=!0,this.dir=t<0?1:-1;const{slides:n}=this;let{prevIndex:i}=this,d=Math.abs(t),r=this.getIndex(i+this.dir,i),h=this._getDistance(i,r)||n[i].offsetWidth;for(;r!==i&&d>h;)this.drag-=h*this.dir,i=r,d-=h,r=this.getIndex(i+this.dir,i),h=this._getDistance(i,r)||n[i].offsetWidth;this.percent=d/h;const l=n[i],c=n[r],f=this.index!==r,o=i===r;let a;[this.index,this.prevIndex].filter(g=>!e.includes([r,i],g)).forEach(g=>{e.trigger(n[g],"itemhidden",[this]),o&&(a=!0,this.prevIndex=i)}),(this.index===i&&this.prevIndex!==i||a)&&e.trigger(n[this.index],"itemshown",[this]),f&&(this.prevIndex=i,this.index=r,!o&&e.trigger(l,"beforeitemhide",[this]),e.trigger(c,"beforeitemshow",[this])),this._transitioner=this._translate(Math.abs(this.percent),l,!o&&c),f&&(!o&&e.trigger(l,"itemhide",[this]),e.trigger(c,"itemshow",[this]))},end(){if(e.off(document,e.pointerMove,this.move,{passive:!1}),e.off(document,e.pointerUp+" "+e.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 s=(e.isRtl?this.dir*(e.isRtl?1:-1):this.dir)<0==this.prevPos>this.pos;this.index=s?this.index:this.prevIndex,s&&(this.percent=1-this.percent),this.show(this.dir>0&&!s||this.dir<0&&s?"next":"previous",!0)}e.css(this.list,{userSelect:"",pointerEvents:""}),this.drag=this.percent=null}}};function T(s){return!s.children.length&&s.childNodes.length}var z={data:{selNav:!1},computed:{nav(s,t){let{selNav:n}=s;return e.$(n,t)},selNavItem(s){let{attrItem:t}=s;return"["+t+"],[data-"+t+"]"},navItems(s,t){return e.$$(this.selNavItem,t)}},update:{write(){this.nav&&this.length!==this.nav.children.length&&e.html(this.nav,this.slides.map((s,t)=>"<li "+this.attrItem+'="'+t+'"><a href></a></li>').join("")),this.navItems.concat(this.nav).forEach(s=>s&&(s.hidden=!this.maxIndex)),this.updateNav()},events:["resize"]},events:[{name:"click",delegate(){return this.selNavItem},handler(s){s.preventDefault(),this.show(e.data(s.current,this.attrItem))}},{name:"itemshow",handler:"updateNav"}],methods:{updateNav(){const s=this.getValidIndex();for(const t of this.navItems){const n=e.data(t,this.attrItem);e.toggleClass(t,this.clsActive,e.toNumber(n)===s),e.toggleClass(t,"uk-invisible",this.finite&&(n==="previous"&&s===0||n==="next"&&s>=this.maxIndex))}}}},O={mixins:[R,D,z,S],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(){e.removeClass(this.slides,this.clsActive)},computed:{duration(s,t){let{velocity:n}=s;return b(t.offsetWidth/n)},list(s,t){let{selList:n}=s;return e.$(n,t)},maxIndex(){return this.length-1},selSlides(s){let{selList:t,selSlides:n}=s;return t+" "+(n||"> *")},slides:{get(){return e.$$(this.selSlides,this.$el)},watch(){this.$reset()}},length(){return this.slides.length}},methods:{show(s,t){if(t===void 0&&(t=!1),this.dragging||!this.length)return;const{stack:n}=this,i=t?0:n.length,d=()=>{n.splice(i,1),n.length&&this.show(n.shift(),!0)};if(n[t?"unshift":"push"](s),!t&&n.length>1){n.length===2&&this._transitioner.forward(Math.min(this.duration,200));return}const r=this.getIndex(this.index),h=e.hasClass(this.slides,this.clsActive)&&this.slides[r],l=this.getIndex(s,this.index),c=this.slides[l];if(h===c){d();return}if(this.dir=W(s,r),this.prevIndex=r,this.index=l,h&&!e.trigger(h,"beforeitemhide",[this])||!e.trigger(c,"beforeitemshow",[this,h])){this.index=this.prevIndex,d();return}const f=this._show(h,c,t).then(()=>(h&&e.trigger(h,"itemhidden",[this]),e.trigger(c,"itemshown",[this]),new Promise(o=>{e.fastdom.write(()=>{n.shift(),n.length?this.show(n.shift(),!0):this._transitioner=null,o()})})));return h&&e.trigger(h,"itemhide",[this]),e.trigger(c,"itemshow",[this]),f},getIndex(s,t){return s===void 0&&(s=this.index),t===void 0&&(t=this.index),e.clamp(e.getIndex(s,this.slides,t,this.finite),0,this.maxIndex)},getValidIndex(s,t){return s===void 0&&(s=this.index),t===void 0&&(t=this.prevIndex),this.getIndex(s,t)},_show(s,t,n){if(this._transitioner=this._getTransitioner(s,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&&!s)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(s,t){return this._getTransitioner(s,s!==t&&t).getDistance()},_translate(s,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(s),i},_getTransitioner(s,t,n,i){return s===void 0&&(s=this.prevIndex),t===void 0&&(t=this.index),n===void 0&&(n=this.dir||1),i===void 0&&(i=this.transitionOptions),new this.Transitioner(e.isNumber(s)?this.slides[s]:s,e.isNumber(t)?this.slides[t]:t,n*(e.isRtl?-1:1),i)}}};function W(s,t){return s==="next"?1:s==="previous"||s<t?-1:1}function b(s){return .5*s+300}var E={update:{write(){if(this.stack.length||this.dragging)return;const s=this.getValidIndex(this.index);(!~this.prevIndex||this.index!==s)&&this.show(s)},events:["resize"]}},P={methods:{lazyload(s,t){s===void 0&&(s=this.$el),t===void 0&&(t=this.$el),this.registerObserver(e.observeIntersection(s,(n,i)=>{for(const d of e.toNodes(e.isFunction(t)?t():t))e.$$('[loading="lazy"]',d).forEach(r=>e.removeAttr(r,"loading"));for(const d of n.filter(r=>{let{isIntersecting:h}=r;return h}).map(r=>{let{target:h}=r;return h}))i.unobserve(d)}))}}},B={mixins:[P],connected(){this.lazyload(this.slides,this.getAdjacentSlides)}};function y(s,t){return s===void 0&&(s=0),t===void 0&&(t="%"),s+=s?t:"","translate3d("+s+", 0, 0)"}function L(s,t,n,i){let{center:d,easing:r,list:h}=i;const l=new e.Deferred,c=s?p(s,h,d):p(t,h,d)+e.dimensions(t).width*n,f=t?p(t,h,d):c+e.dimensions(s).width*n*(e.isRtl?-1:1);return{dir:n,show(o,a,g){a===void 0&&(a=0);const m=g?"linear":r;return o-=Math.round(o*e.clamp(a,-1,1)),this.translate(a),a=s?a:e.clamp(a,0,1),u(this.getItemIn(),"itemin",{percent:a,duration:o,timing:m,dir:n}),s&&u(this.getItemIn(!0),"itemout",{percent:1-a,duration:o,timing:m,dir:n}),e.Transition.start(h,{transform:y(-f*(e.isRtl?-1:1),"px")},o,m).then(l.resolve,e.noop),l.promise},cancel(){e.Transition.cancel(h)},reset(){e.css(h,"transform","")},forward(o,a){return a===void 0&&(a=this.percent()),e.Transition.cancel(h),this.show(o,a,!0)},translate(o){const a=this.getDistance()*n*(e.isRtl?-1:1);e.css(h,"transform",y(e.clamp(-f+(a-a*o),-I(h),e.dimensions(h).width)*(e.isRtl?-1:1),"px"));const g=this.getActives(),m=this.getItemIn(),H=this.getItemIn(!0);o=s?e.clamp(o,-1,1):0;for(const x of e.children(h)){const C=e.includes(g,x),M=x===m,N=x===H,q=M||!N&&(C||n*(e.isRtl?-1:1)===-1^w(x,h)>w(s||t));u(x,"itemtranslate"+(q?"in":"out"),{dir:n,percent:N?1-o:M?o:C?1:0})}},percent(){return Math.abs((e.css(h,"transform").split(",")[4]*(e.isRtl?-1:1)+c)/(f-c))},getDistance(){return Math.abs(f-c)},getItemIn(o){o===void 0&&(o=!1);let a=this.getActives(),g=_(h,p(t||s,h,d));if(o){const m=a;a=g,g=m}return g[e.findIndex(g,m=>!e.includes(a,m))]},getActives(){return _(h,p(s||t,h,d))}}}function p(s,t,n){const i=w(s,t);return n?i-V(s,t):Math.min(i,A(t))}function A(s){return Math.max(0,I(s)-e.dimensions(s).width)}function I(s){return e.children(s).reduce((t,n)=>e.dimensions(n).width+t,0)}function V(s,t){return e.dimensions(t).width/2-e.dimensions(s).width/2}function w(s,t){return s&&(e.position(s).left+(e.isRtl?e.dimensions(s).width-e.dimensions(t).width:0))*(e.isRtl?-1:1)||0}function _(s,t){t-=1;const n=e.dimensions(s).width,i=t+n+2;return e.children(s).filter(d=>{const r=w(d,s),h=r+Math.min(e.dimensions(d).width,n);return r>=t&&h<=i})}function u(s,t,n){e.trigger(s,e.createEvent(t,!1,!1,n))}var $={mixins:[v,O,E,B],props:{center:Boolean,sets:Boolean},data:{center:!1,sets:!1,attrItem:"uk-slider-item",selList:".uk-slider-items",selNav:".uk-slider-nav",clsContainer:"uk-slider-container",Transitioner:L},computed:{avgWidth(){return I(this.list)/this.length},finite(s){let{finite:t}=s;return t||Math.ceil(I(this.list))<Math.trunc(e.dimensions(this.list).width+j(this.list)+this.center)},maxIndex(){if(!this.finite||this.center&&!this.sets)return this.length-1;if(this.center)return e.last(this.sets);let s=0;const t=A(this.list),n=e.findIndex(this.slides,i=>{if(s>=t)return!0;s+=e.dimensions(i).width});return~n?n:this.length-1},sets(s){let{sets:t}=s;if(!t)return;let n=0;const i=[],d=e.dimensions(this.list).width;for(let r=0;r<this.slides.length;r++){const h=e.dimensions(this.slides[r]).width;n+h>d&&(n=0),this.center?n<d/2&&n+h+e.dimensions(this.slides[+r+1]).width/2>d/2&&(i.push(+r),n=d/2-h/2):n===0&&i.push(Math.min(+r,this.maxIndex)),n+=h}if(i.length)return i},transitionOptions(){return{center:this.center,list:this.list}}},connected(){e.toggleClass(this.$el,this.clsContainer,!e.$("."+this.clsContainer,this.$el))},update:{write(){for(const s of this.navItems){const t=e.toNumber(e.data(s,this.attrItem));t!==!1&&(s.hidden=!this.maxIndex||t>this.maxIndex||this.sets&&!e.includes(this.sets,t))}this.length&&!this.dragging&&!this.stack.length&&(this.reorder(),this._translate(1)),this.updateActiveClasses()},events:["resize"]},events:{beforeitemshow(s){!this.dragging&&this.sets&&this.stack.length<2&&!e.includes(this.sets,this.index)&&(this.index=this.getValidIndex());const t=Math.abs(this.index-this.prevIndex+(this.dir>0&&this.index<this.prevIndex||this.dir<0&&this.index>this.prevIndex?(this.maxIndex+1)*this.dir:0));if(!this.dragging&&t>1){for(let i=0;i<t;i++)this.stack.splice(1,0,this.dir>0?"next":"previous");s.preventDefault();return}const n=this.dir<0||!this.slides[this.prevIndex]?this.index:this.prevIndex;this.duration=b(this.avgWidth/this.velocity)*(e.dimensions(this.slides[n]).width/this.avgWidth),this.reorder()},itemshow(){~this.prevIndex&&e.addClass(this._getTransitioner().getItemIn(),this.clsActive)},itemshown(){this.updateActiveClasses()}},methods:{reorder(){if(this.finite){e.css(this.slides,"order","");return}const s=this.dir>0&&this.slides[this.prevIndex]?this.prevIndex:this.index;if(this.slides.forEach((d,r)=>e.css(d,"order",this.dir>0&&r<s?1:this.dir<0&&r>=this.index?-1:"")),!this.center)return;const t=this.slides[s];let n=e.dimensions(this.list).width/2-e.dimensions(t).width/2,i=0;for(;n>0;){const d=this.getIndex(--i+s,s),r=this.slides[d];e.css(r,"order",d>s?-2:-1),n-=e.dimensions(r).width}},updateActiveClasses(){const s=this._getTransitioner(this.index).getActives(),t=[this.clsActive,(!this.sets||e.includes(this.sets,e.toFloat(this.index)))&&this.clsActivated||""];for(const n of this.slides)e.toggleClass(n,t,e.includes(s,n))},getValidIndex(s,t){if(s===void 0&&(s=this.index),t===void 0&&(t=this.prevIndex),s=this.getIndex(s,t),!this.sets)return s;let n;do{if(e.includes(this.sets,s))return s;n=s,s=this.getIndex(s+this.dir,t)}while(s!==n);return s},getAdjacentSlides(){const{width:s}=e.dimensions(this.list),t=-s,n=s*2,i=e.dimensions(this.slides[this.index]).width,d=this.center?s/2-i/2:0,r=new Set;for(const h of[-1,1]){let l=d+(h>0?i:0),c=0;do{const f=this.slides[this.getIndex(this.index+h+c++*h)];l+=e.dimensions(f).width*h,r.add(f)}while(this.slides.length>c&&l>t&&l<n)}return Array.from(r)}}};function j(s){return Math.max(0,...e.children(s).map(t=>e.dimensions(t).width))}return typeof window<"u"&&window.UIkit&&window.UIkit.component("slider",$),$});