UNPKG

uikit

Version:

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

3 lines (2 loc) • 14.1 kB
/*! UIkit 3.2.1 | http://www.getuikit.com | (c) 2014 - 2019 YOOtheme | MIT License */ !function(t,i){"object"==typeof exports&&"undefined"!=typeof module?module.exports=i(require("uikit-util")):"function"==typeof define&&define.amd?define("uikitslider",["uikit-util"],i):(t=t||self).UIkitSlider=i(t.UIkit.util)}(this,function(f){"use strict";function s(t){return.5*t+300}function l(t,i){return void 0===t&&(t=0),void 0===i&&(i="%"),t+=t?i:"",f.isIE?"translateX("+t+")":"translate3d("+t+", 0, 0)"}function u(t,i,e){var s=v(t,i);return e?s-function(t,i){return g(i).width/2-g(t).width/2}(t,i):Math.min(s,n(i))}function n(t){return Math.max(0,c(t)-g(t).width)}function c(t){return m(t).reduce(function(t,i){return g(i).width+t},0)}function v(t,i){return(f.position(t).left+(f.isRtl?g(t).width-g(i).width:0))*(f.isRtl?-1:1)}function g(t){return t.getBoundingClientRect()}function p(t,i,e){f.trigger(t,f.createEvent(i,!1,!1,e))}function m(t){return f.toNodes(t.children)}var t={mixins:[{connected:function(){f.hasClass(this.$el,this.$name)||f.addClass(this.$el,this.$name)}},{mixins:[{props:{autoplay:Boolean,autoplayInterval:Number,pauseOnHover:Boolean},data:{autoplay:!1,autoplayInterval:7e3,pauseOnHover:!0},connected:function(){this.autoplay&&this.startAutoplay()},disconnected:function(){this.stopAutoplay()},update:function(){f.attr(this.slides,"tabindex","-1")},events:[{name:"visibilitychange",el:document,filter:function(){return this.autoplay},handler:function(){document.hidden?this.stopAutoplay():this.startAutoplay()}}],methods:{startAutoplay:function(){var t=this;this.stopAutoplay(),this.interval=setInterval(function(){return(!t.draggable||!f.$(":focus",t.$el))&&(!t.pauseOnHover||!f.matches(t.$el,":hover"))&&!t.stack.length&&t.show("next")},this.autoplayInterval)},stopAutoplay:function(){this.interval&&clearInterval(this.interval)}}},{props:{draggable:Boolean},data:{draggable:!0,threshold:10},created:function(){var s=this;["start","move","end"].forEach(function(t){var e=s[t];s[t]=function(t){var i=f.getEventPos(t).x*(f.isRtl?-1:1);s.prevPos=i!==s.pos?s.pos:s.prevPos,s.pos=i,e(t)}})},events:[{name:f.pointerDown,delegate:function(){return this.selSlides},handler:function(t){!this.draggable||!f.isTouch(t)&&function(t){return!t.children.length&&t.childNodes.length}(t.target)||f.closest(t.target,f.selInput)||0<t.button||this.length<2||this.start(t)}},{name:"touchmove",passive:!1,handler:"move",delegate:function(){return this.selSlides}},{name:"dragstart",handler:function(t){t.preventDefault()}}],methods:{start:function(){var t=this;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;var i="touchmove"!==f.pointerMove?f.on(document,f.pointerMove,this.move,{passive:!1}):f.noop;this.unbindMove=function(){i(),t.unbindMove=null},f.on(window,"scroll",this.unbindMove),f.on(document,f.pointerUp,this.end,!0),f.css(this.list,"userSelect","none")},move:function(t){var i=this;if(this.unbindMove){var e=this.pos-this.drag;if(!(0==e||this.prevPos===this.pos||!this.dragging&&Math.abs(e)<this.threshold)){f.css(this.list,"pointerEvents","none"),t.cancelable&&t.preventDefault(),this.dragging=!0,this.dir=e<0?1:-1;for(var s=this.slides,n=this.prevIndex,r=Math.abs(e),h=this.getIndex(n+this.dir,n),a=this._getDistance(n,h)||s[n].offsetWidth;h!==n&&a<r;)this.drag-=a*this.dir,n=h,r-=a,h=this.getIndex(n+this.dir,n),a=this._getDistance(n,h)||s[n].offsetWidth;this.percent=r/a;var o,d=s[n],l=s[h],u=this.index!==h,c=n===h;[this.index,this.prevIndex].filter(function(t){return!f.includes([h,n],t)}).forEach(function(t){f.trigger(s[t],"itemhidden",[i]),c&&(o=!0,i.prevIndex=n)}),(this.index===n&&this.prevIndex!==n||o)&&f.trigger(s[this.index],"itemshown",[this]),u&&(this.prevIndex=n,this.index=h,c||f.trigger(d,"beforeitemhide",[this]),f.trigger(l,"beforeitemshow",[this])),this._transitioner=this._translate(Math.abs(this.percent),d,!c&&l),u&&(c||f.trigger(d,"itemhide",[this]),f.trigger(l,"itemshow",[this]))}}},end:function(){if(f.off(window,"scroll",this.unbindMove),this.unbindMove&&this.unbindMove(),f.off(document,f.pointerUp,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{var t=(f.isRtl?this.dir*(f.isRtl?1:-1):this.dir)<0==this.prevPos>this.pos;this.index=t?this.index:this.prevIndex,t&&(this.percent=1-this.percent),this.show(0<this.dir&&!t||this.dir<0&&t?"next":"previous",!0)}f.css(this.list,{userSelect:"",pointerEvents:""}),this.drag=this.percent=null}}},{data:{selNav:!1},computed:{nav:function(t,i){var e=t.selNav;return f.$(e,i)},selNavItem:function(t){var i=t.attrItem;return"["+i+"],[data-"+i+"]"},navItems:function(t,i){return f.$$(this.selNavItem,i)}},update:{write:function(){var e=this;this.nav&&this.length!==this.nav.children.length&&f.html(this.nav,this.slides.map(function(t,i){return"<li "+e.attrItem+'="'+i+'"><a href="#"></a></li>'}).join("")),f.toggleClass(f.$$(this.selNavItem,this.$el).concat(this.nav),"uk-hidden",!this.maxIndex),this.updateNav()},events:["resize"]},events:[{name:"click",delegate:function(){return this.selNavItem},handler:function(t){t.preventDefault(),this.show(f.data(t.current,this.attrItem))}},{name:"itemshow",handler:"updateNav"}],methods:{updateNav:function(){var e=this,s=this.getValidIndex();this.navItems.forEach(function(t){var i=f.data(t,e.attrItem);f.toggleClass(t,e.clsActive,f.toNumber(i)===s),f.toggleClass(t,"uk-invisible",e.finite&&("previous"===i&&0===s||"next"===i&&s>=e.maxIndex))})}}}],props:{clsActivated:Boolean,easing:String,index:Number,finite:Boolean,velocity:Number,selSlides:String},data:function(){return{easing:"ease",finite:!1,velocity:1,index:0,prevIndex:-1,stack:[],percent:0,clsActive:"uk-active",clsActivated:!1,Transitioner:!1,transitionOptions:{}}},connected:function(){this.prevIndex=-1,this.index=this.getValidIndex(this.index),this.stack=[]},disconnected:function(){f.removeClass(this.slides,this.clsActive)},computed:{duration:function(t,i){var e=t.velocity;return s(i.offsetWidth/e)},list:function(t,i){var e=t.selList;return f.$(e,i)},maxIndex:function(){return this.length-1},selSlides:function(t){return t.selList+" "+(t.selSlides||"> *")},slides:{get:function(){return f.$$(this.selSlides,this.$el)},watch:function(){this.$reset()}},length:function(){return this.slides.length}},events:{itemshown:function(){this.$update(this.list)}},methods:{show:function(t,i){var e=this;if(void 0===i&&(i=!1),!this.dragging&&this.length){var s=this.stack,n=i?0:s.length,r=function(){s.splice(n,1),s.length&&e.show(s.shift(),!0)};if(s[i?"unshift":"push"](t),!i&&1<s.length)2===s.length&&this._transitioner.forward(Math.min(this.duration,200));else{var h=this.index,a=f.hasClass(this.slides,this.clsActive)&&this.slides[h],o=this.getIndex(t,this.index),d=this.slides[o];if(a!==d){if(this.dir=function(t,i){return"next"===t?1:"previous"===t?-1:t<i?-1:1}(t,h),this.prevIndex=h,this.index=o,a&&f.trigger(a,"beforeitemhide",[this]),!f.trigger(d,"beforeitemshow",[this,a]))return this.index=this.prevIndex,void r();var l=this._show(a,d,i).then(function(){return a&&f.trigger(a,"itemhidden",[e]),f.trigger(d,"itemshown",[e]),new f.Promise(function(t){f.fastdom.write(function(){s.shift(),s.length?e.show(s.shift(),!0):e._transitioner=null,t()})})});return a&&f.trigger(a,"itemhide",[this]),f.trigger(d,"itemshow",[this]),l}r()}}},getIndex:function(t,i){return void 0===t&&(t=this.index),void 0===i&&(i=this.index),f.clamp(f.getIndex(t,this.slides,i,this.finite),0,this.maxIndex)},getValidIndex:function(t,i){return void 0===t&&(t=this.index),void 0===i&&(i=this.prevIndex),this.getIndex(t,i)},_show:function(t,i,e){if(this._transitioner=this._getTransitioner(t,i,this.dir,f.assign({easing:e?i.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)),!e&&!t)return this._transitioner.translate(1),f.Promise.resolve();var s=this.stack.length;return this._transitioner[1<s?"forward":"show"](1<s?Math.min(this.duration,75+75/(s-1)):this.duration,this.percent)},_getDistance:function(t,i){return this._getTransitioner(t,t!==i&&i).getDistance()},_translate:function(t,i,e){void 0===i&&(i=this.prevIndex),void 0===e&&(e=this.index);var s=this._getTransitioner(i!==e&&i,e);return s.translate(t),s},_getTransitioner:function(t,i,e,s){return void 0===t&&(t=this.prevIndex),void 0===i&&(i=this.index),void 0===e&&(e=this.dir||1),void 0===s&&(s=this.transitionOptions),new this.Transitioner(f.isNumber(t)?this.slides[t]:t,f.isNumber(i)?this.slides[i]:i,e*(f.isRtl?-1:1),s)}}},{update:{write:function(){if(!this.stack.length&&!this.dragging){var t=this.getValidIndex(this.index);~this.prevIndex&&this.index===t||this.show(t)}},events:["resize"]}}],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:function(n,s,r,t){var i=t.center,h=t.easing,a=t.list,o=new f.Deferred,e=n?u(n,a,i):u(s,a,i)+g(s).width*r,d=s?u(s,a,i):e+g(n).width*r*(f.isRtl?-1:1);return{dir:r,show:function(t,i,e){void 0===i&&(i=0);var s=e?"linear":h;return t-=Math.round(t*f.clamp(i,-1,1)),this.translate(i),n&&this.updateTranslates(),i=n?i:f.clamp(i,0,1),p(this.getItemIn(),"itemin",{percent:i,duration:t,timing:s,dir:r}),n&&p(this.getItemIn(!0),"itemout",{percent:1-i,duration:t,timing:s,dir:r}),f.Transition.start(a,{transform:l(-d*(f.isRtl?-1:1),"px")},t,s).then(o.resolve,f.noop),o.promise},stop:function(){return f.Transition.stop(a)},cancel:function(){f.Transition.cancel(a)},reset:function(){f.css(a,"transform","")},forward:function(t,i){return void 0===i&&(i=this.percent()),f.Transition.cancel(a),this.show(t,i,!0)},translate:function(t){var i=this.getDistance()*r*(f.isRtl?-1:1);f.css(a,"transform",l(f.clamp(i-i*t-d,-c(a),g(a).width)*(f.isRtl?-1:1),"px")),this.updateTranslates(),n&&(t=f.clamp(t,-1,1),p(this.getItemIn(),"itemtranslatein",{percent:t,dir:r}),p(this.getItemIn(!0),"itemtranslateout",{percent:1-t,dir:r}))},percent:function(){return Math.abs((f.css(a,"transform").split(",")[4]*(f.isRtl?-1:1)+e)/(d-e))},getDistance:function(){return Math.abs(d-e)},getItemIn:function(t){void 0===t&&(t=!1);var i=this.getActives(),e=f.sortBy(m(a),"offsetLeft"),s=f.index(e,i[0<r*(t?-1:1)?i.length-1:0]);return~s&&e[s+(n&&!t?r:0)]},getActives:function(){var e=u(n||s,a,i);return f.sortBy(m(a).filter(function(t){var i=v(t,a);return e<=i&&i+g(t).width<=g(a).width+e}),"offsetLeft")},updateTranslates:function(){var e=this.getActives();m(a).forEach(function(t){var i=f.includes(e,t);p(t,"itemtranslate"+(i?"in":"out"),{percent:i?1:0,dir:t.offsetLeft<=s.offsetLeft?1:-1})})}}}},computed:{avgWidth:function(){return c(this.list)/this.length},finite:function(t){return t.finite||Math.ceil(c(this.list))<g(this.list).width+function(t){return m(t).reduce(function(t,i){return Math.max(t,g(i).width)},0)}(this.list)+this.center},maxIndex:function(){if(!this.finite||this.center&&!this.sets)return this.length-1;if(this.center)return f.last(this.sets);f.css(this.slides,"order","");for(var t=n(this.list),i=this.length;i--;)if(v(this.list.children[i],this.list)<t)return Math.min(i+1,this.length-1);return 0},sets:function(t){var r=this,i=t.sets,h=g(this.list).width/(this.center?2:1),a=0,o=h,d=0;return i=i&&this.slides.reduce(function(t,i,e){var s=g(i).width;if(a<d+s&&(!r.center&&e>r.maxIndex&&(e=r.maxIndex),!f.includes(t,e))){var n=r.slides[e+1];r.center&&n&&s<o-g(n).width/2?o-=s:(o=h,t.push(e),a=d+h+(r.center?s/2:0))}return d+=s,t},[]),!f.isEmpty(i)&&i},transitionOptions:function(){return{center:this.center,list:this.list}}},connected:function(){f.toggleClass(this.$el,this.clsContainer,!f.$("."+this.clsContainer,this.$el))},update:{write:function(){var e=this;f.$$("["+this.attrItem+"],[data-"+this.attrItem+"]",this.$el).forEach(function(t){var i=f.data(t,e.attrItem);e.maxIndex&&f.toggleClass(t,"uk-hidden",f.isNumeric(i)&&(e.sets&&!f.includes(e.sets,f.toFloat(i))||i>e.maxIndex))}),!this.length||this.dragging||this.stack.length||this._getTransitioner().translate(1)},events:["resize"]},events:{beforeitemshow:function(t){!this.dragging&&this.sets&&this.stack.length<2&&!f.includes(this.sets,this.index)&&(this.index=this.getValidIndex());var i=Math.abs(this.index-this.prevIndex+(0<this.dir&&this.index<this.prevIndex||this.dir<0&&this.index>this.prevIndex?(this.maxIndex+1)*this.dir:0));if(!this.dragging&&1<i){for(var e=0;e<i;e++)this.stack.splice(1,0,0<this.dir?"next":"previous");t.preventDefault()}else this.duration=s(this.avgWidth/this.velocity)*(g(this.dir<0||!this.slides[this.prevIndex]?this.slides[this.index]:this.slides[this.prevIndex]).width/this.avgWidth),this.reorder()},itemshow:function(){f.isUndefined(this.prevIndex)||f.addClass(this._getTransitioner().getItemIn(),this.clsActive)},itemshown:function(){var i=this,e=this._getTransitioner(this.index).getActives();this.slides.forEach(function(t){return f.toggleClass(t,i.clsActive,f.includes(e,t))}),this.sets&&!f.includes(this.sets,f.toFloat(this.index))||this.slides.forEach(function(t){return f.toggleClass(t,i.clsActivated,f.includes(e,t))})}},methods:{reorder:function(){var e=this;if(f.css(this.slides,"order",""),!this.finite){var s=0<this.dir&&this.slides[this.prevIndex]?this.prevIndex:this.index;if(this.slides.forEach(function(t,i){return f.css(t,"order",0<e.dir&&i<s?1:e.dir<0&&i>=e.index?-1:"")}),this.center)for(var t=this.slides[s],i=g(this.list).width/2-g(t).width/2,n=0;0<i;){var r=this.getIndex(--n+s,s),h=this.slides[r];f.css(h,"order",s<r?-2:-1),i-=g(h).width}}},getValidIndex:function(t,i){if(void 0===t&&(t=this.index),void 0===i&&(i=this.prevIndex),t=this.getIndex(t,i),!this.sets)return t;var e;do{if(f.includes(this.sets,t))return t;e=t,t=this.getIndex(t+this.dir,i)}while(t!==e);return t}}};return"undefined"!=typeof window&&window.UIkit&&window.UIkit.component("slider",t),t});