UNPKG

uikit

Version:

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

3 lines (2 loc) • 12 kB
/*! UIkit 3.6.19 | https://www.getuikit.com | (c) 2014 - 2021 YOOtheme | MIT License */ !function(t,i){"object"==typeof exports&&"undefined"!=typeof module?module.exports=i(require("uikit-util")):"function"==typeof define&&define.amd?define("uikitslideshow",["uikit-util"],i):(t="undefined"!=typeof globalThis?globalThis:t||self).UIkitSlideshow=i(t.UIkit.util)}(this,function(c){"use strict";var t={connected:function(){c.hasClass(this.$el,this.$name)||c.addClass(this.$el,this.$name)}},i={slide:{show:function(t){return[{transform:e(-100*t)},{transform:e()}]},percent:n,translate:function(t,i){return[{transform:e(-100*i*t)},{transform:e(100*i*(1-t))}]}}};function n(t){return Math.abs(c.css(t,"transform").split(",")[4]/t.offsetWidth)||0}function e(t,i){return void 0===t&&(t=0),void 0===i&&(i="%"),t+=t?i:"",c.isIE?"translateX("+t+")":"translate3d("+t+", 0, 0)"}function s(t){return"scale3d("+t+", "+t+", 1)"}function u(t,i,e){c.trigger(t,c.createEvent(i,!1,!1,e))}var r={mixins:[{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(){c.attr(this.slides,"tabindex","-1")},events:[{name:"visibilitychange",el:function(){return 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||!c.$(":focus",t.$el))&&(!t.pauseOnHover||!c.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 n=this;["start","move","end"].forEach(function(t){var e=n[t];n[t]=function(t){var i=c.getEventPos(t).x*(c.isRtl?-1:1);n.prevPos=i!==n.pos?n.pos:n.prevPos,n.pos=i,e(t)}})},events:[{name:c.pointerDown,delegate:function(){return this.selSlides},handler:function(t){var i;!this.draggable||!c.isTouch(t)&&(!(i=t.target).children.length&&i.childNodes.length)||c.closest(t.target,c.selInput)||0<t.button||this.length<2||this.start(t)}},{name:"dragstart",handler:function(t){t.preventDefault()}}],methods:{start:function(){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,c.on(document,c.pointerMove,this.move,{passive:!1}),c.on(document,c.pointerUp+" "+c.pointerCancel+" input",this.end,!0),c.css(this.list,"userSelect","none")},move:function(t){var i=this,e=this.pos-this.drag;if(!(0==e||this.prevPos===this.pos||!this.dragging&&Math.abs(e)<this.threshold)){c.css(this.list,"pointerEvents","none"),t.cancelable&&t.preventDefault(),this.dragging=!0,this.dir=e<0?1:-1;for(var n=this.slides,s=this.prevIndex,r=Math.abs(e),a=this.getIndex(s+this.dir,s),o=this._getDistance(s,a)||n[s].offsetWidth;a!==s&&o<r;)this.drag-=o*this.dir,s=a,r-=o,a=this.getIndex(s+this.dir,s),o=this._getDistance(s,a)||n[s].offsetWidth;this.percent=r/o;var h,d=n[s],t=n[a],e=this.index!==a,u=s===a;[this.index,this.prevIndex].filter(function(t){return!c.includes([a,s],t)}).forEach(function(t){c.trigger(n[t],"itemhidden",[i]),u&&(h=!0,i.prevIndex=s)}),(this.index===s&&this.prevIndex!==s||h)&&c.trigger(n[this.index],"itemshown",[this]),e&&(this.prevIndex=s,this.index=a,u||c.trigger(d,"beforeitemhide",[this]),c.trigger(t,"beforeitemshow",[this])),this._transitioner=this._translate(Math.abs(this.percent),d,!u&&t),e&&(u||c.trigger(d,"itemhide",[this]),c.trigger(t,"itemshow",[this]))}},end:function(){var t;c.off(document,c.pointerMove,this.move,{passive:!1}),c.off(document,c.pointerUp+" "+c.pointerCancel+" input",this.end,!0),this.dragging&&(this.dragging=null,this.index===this.prevIndex?(this.percent=1-this.percent,this.dir*=-1,this._show(!1,this.index,!0),this._transitioner=null):(t=(c.isRtl?this.dir*(c.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))),c.css(this.list,{userSelect:"",pointerEvents:""}),this.drag=this.percent=null}}},{data:{selNav:!1},computed:{nav:function(t,i){t=t.selNav;return c.$(t,i)},selNavItem:function(t){t=t.attrItem;return"["+t+"],[data-"+t+"]"},navItems:function(t,i){return c.$$(this.selNavItem,i)}},update:{write:function(){var e=this;this.nav&&this.length!==this.nav.children.length&&c.html(this.nav,this.slides.map(function(t,i){return"<li "+e.attrItem+'="'+i+'"><a href></a></li>'}).join("")),this.navItems.concat(this.nav).forEach(function(t){return t&&(t.hidden=!e.maxIndex)}),this.updateNav()},events:["resize"]},events:[{name:"click",delegate:function(){return this.selNavItem},handler:function(t){t.preventDefault(),this.show(c.data(t.current,this.attrItem))}},{name:"itemshow",handler:"updateNav"}],methods:{updateNav:function(){var e=this,n=this.getValidIndex();this.navItems.forEach(function(t){var i=c.data(t,e.attrItem);c.toggleClass(t,e.clsActive,c.toNumber(i)===n),c.toggleClass(t,"uk-invisible",e.finite&&("previous"===i&&0===n||"next"===i&&n>=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.$props.index),this.stack=[]},disconnected:function(){c.removeClass(this.slides,this.clsActive)},computed:{duration:function(t,i){t=t.velocity;return i.offsetWidth/t*.5+300},list:function(t,i){t=t.selList;return c.$(t,i)},maxIndex:function(){return this.length-1},selSlides:function(t){return t.selList+" "+(t.selSlides||"> *")},slides:{get:function(){return c.$$(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 n=this.stack,s=i?0:n.length,r=function(){n.splice(s,1),n.length&&e.show(n.shift(),!0)};if(n[i?"unshift":"push"](t),!i&&1<n.length)2===n.length&&this._transitioner.forward(Math.min(this.duration,200));else{var a,o=this.getIndex(this.index),h=c.hasClass(this.slides,this.clsActive)&&this.slides[o],d=this.getIndex(t,this.index),u=this.slides[d];if(h!==u){if(this.dir=(a=o,"next"!==(t=t)&&("previous"===t||t<a)?-1:1),this.prevIndex=o,this.index=d,h&&!c.trigger(h,"beforeitemhide",[this])||!c.trigger(u,"beforeitemshow",[this,h]))return this.index=this.prevIndex,void r();i=this._show(h,u,i).then(function(){return h&&c.trigger(h,"itemhidden",[e]),c.trigger(u,"itemshown",[e]),new c.Promise(function(t){c.fastdom.write(function(){n.shift(),n.length?e.show(n.shift(),!0):e._transitioner=null,t()})})});return h&&c.trigger(h,"itemhide",[this]),c.trigger(u,"itemshow",[this]),i}r()}}},getIndex:function(t,i){return void 0===t&&(t=this.index),void 0===i&&(i=this.index),c.clamp(c.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,c.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._translate(1),c.Promise.resolve();t=this.stack.length;return this._transitioner[1<t?"forward":"show"](1<t?Math.min(this.duration,75+75/(t-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);e=this._getTransitioner(i!==e&&i,e);return e.translate(t),e},_getTransitioner:function(t,i,e,n){return void 0===t&&(t=this.prevIndex),void 0===i&&(i=this.index),void 0===e&&(e=this.dir||1),void 0===n&&(n=this.transitionOptions),new this.Transitioner(c.isNumber(t)?this.slides[t]:t,c.isNumber(i)?this.slides[i]:i,e*(c.isRtl?-1:1),n)}}}],props:{animation:String},data:{animation:"slide",clsActivated:"uk-transition-active",Animations:i,Transitioner:function(s,r,a,t){var i=t.animation,o=t.easing,e=i.percent,n=i.translate,h=(i=void 0===(i=i.show)?c.noop:i)(a),d=new c.Deferred;return{dir:a,show:function(t,i,e){var n=this;void 0===i&&(i=0);e=e?"linear":o;return t-=Math.round(t*c.clamp(i,-1,1)),this.translate(i),u(r,"itemin",{percent:i,duration:t,timing:e,dir:a}),u(s,"itemout",{percent:1-i,duration:t,timing:e,dir:a}),c.Promise.all([c.Transition.start(r,h[1],t,e),c.Transition.start(s,h[0],t,e)]).then(function(){n.reset(),d.resolve()},c.noop),d.promise},cancel:function(){c.Transition.cancel([r,s])},reset:function(){for(var t in h[0])c.css([r,s],t,"")},forward:function(t,i){return void 0===i&&(i=this.percent()),c.Transition.cancel([r,s]),this.show(t,i,!0)},translate:function(t){this.reset();var i=n(t,a);c.css(r,i[1]),c.css(s,i[0]),u(r,"itemtranslatein",{percent:t,dir:a}),u(s,"itemtranslateout",{percent:1-t,dir:a})},percent:function(){return e(s||r,r,a)},getDistance:function(){return s&&s.offsetWidth}}}},computed:{animation:function(t){var i=t.animation,t=t.Animations;return c.assign(t[i]||t.slide,{name:i})},transitionOptions:function(){return{animation:this.animation}}},events:{"itemshow itemhide itemshown itemhidden":function(t){t=t.target;this.$update(t)},beforeitemshow:function(t){t=t.target;c.addClass(t,this.clsActive)},itemshown:function(t){t=t.target;c.addClass(t,this.clsActivated)},itemhidden:function(t){t=t.target;c.removeClass(t,this.clsActive,this.clsActivated)}}},i=c.assign({},i,{fade:{show:function(){return[{opacity:0,zIndex:0},{zIndex:-1}]},percent:function(t){return 1-c.css(t,"opacity")},translate:function(t){return[{opacity:1-t,zIndex:0},{zIndex:-1}]}},scale:{show:function(){return[{opacity:0,transform:s(1.5),zIndex:0},{zIndex:-1}]},percent:function(t){return 1-c.css(t,"opacity")},translate:function(t){return[{opacity:1-t,transform:s(1+.5*t),zIndex:0},{zIndex:-1}]}},pull:{show:function(t){return t<0?[{transform:e(30),zIndex:-1},{transform:e(),zIndex:0}]:[{transform:e(-100),zIndex:0},{transform:e(),zIndex:-1}]},percent:function(t,i,e){return e<0?1-n(i):n(t)},translate:function(t,i){return i<0?[{transform:e(30*t),zIndex:-1},{transform:e(-100*(1-t)),zIndex:0}]:[{transform:e(100*-t),zIndex:0},{transform:e(30*(1-t)),zIndex:-1}]}},push:{show:function(t){return t<0?[{transform:e(100),zIndex:0},{transform:e(),zIndex:-1}]:[{transform:e(-30),zIndex:-1},{transform:e(),zIndex:0}]},percent:function(t,i,e){return 0<e?1-n(i):n(t)},translate:function(t,i){return i<0?[{transform:e(100*t),zIndex:0},{transform:e(-30*(1-t)),zIndex:-1}]:[{transform:e(-30*t),zIndex:-1},{transform:e(100*(1-t)),zIndex:0}]}}}),i={mixins:[t,r,{update:{write:function(){var t;this.stack.length||this.dragging||(t=this.getValidIndex(this.index),~this.prevIndex&&this.index===t||this.show(t))},events:["resize"]}}],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:i},update:{read:function(){var t=this.ratio.split(":").map(Number),i=t[0],t=(t=t[1])*this.list.offsetWidth/i||0;return this.minHeight&&(t=Math.max(this.minHeight,t)),{height:(t=this.maxHeight?Math.min(this.maxHeight,t):t)-c.boxModelAdjust(this.list,"height","content-box")}},write:function(t){t=t.height;0<t&&c.css(this.list,"minHeight",t)},events:["resize"]}};return"undefined"!=typeof window&&window.UIkit&&window.UIkit.component("slideshow",i),i});