/*! UIkit 3.0.0-rc.17 | http://www.getuikit.com | (c) 2014 - 2018 YOOtheme | MIT License */ (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('uikit-util')) : typeof define === 'function' && define.amd ? define('uikitslider', ['uikit-util'], factory) : (global.UIkitSlider = factory(global.UIkit.util)); }(this, (function (uikitUtil) { 'use strict'; var Class = { connected: function() { uikitUtil.addClass(this.$el, this.$name); } }; var SliderAutoplay = { props: { autoplay: Boolean, autoplayInterval: Number, pauseOnHover: Boolean }, data: { autoplay: false, autoplayInterval: 7000, pauseOnHover: true }, connected: function() { this.startAutoplay(); }, disconnected: function() { this.stopAutoplay(); }, events: [ { name: 'visibilitychange', el: document, handler: function() { if (document.hidden) { this.stopAutoplay(); } else { this.startAutoplay(); } } }, { name: uikitUtil.pointerDown, handler: 'stopAutoplay' }, { name: 'mouseenter', filter: function() { return this.autoplay; }, handler: function() { this.isHovering = true; } }, { name: 'mouseleave', filter: function() { return this.autoplay; }, handler: function() { this.isHovering = false; } } ], methods: { startAutoplay: function() { var this$1 = this; this.stopAutoplay(); if (this.autoplay) { this.interval = setInterval( function () { return !(this$1.isHovering && this$1.pauseOnHover) && !this$1.stack.length && this$1.show('next'); }, this.autoplayInterval ); } }, stopAutoplay: function() { if (this.interval) { clearInterval(this.interval); } } } }; var SliderDrag = { data: { threshold: 10, preventCatch: false }, created: function() { var this$1 = this; ['start', 'move', 'end'].forEach(function (key) { var fn = this$1[key]; this$1[key] = function (e) { var pos = uikitUtil.getPos(e).x * (uikitUtil.isRtl ? -1 : 1); this$1.prevPos = pos !== this$1.pos ? this$1.pos : this$1.prevPos; this$1.pos = pos; fn(e); }; }); }, events: [ { name: uikitUtil.pointerDown, delegate: function() { return this.slidesSelector; }, handler: function(e) { if (!uikitUtil.isTouch(e) && hasTextNodesOnly(e.target) || e.button > 0 || this.length < 2 || this.preventCatch ) { return; } this.start(e); } }, { // Workaround for iOS 11 bug: https://bugs.webkit.org/show_bug.cgi?id=184250 name: 'touchmove', passive: false, handler: 'move', delegate: function() { return this.slidesSelector; } }, { name: 'dragstart', handler: function(e) { e.preventDefault(); } } ], methods: { start: function() { var this$1 = this; this.drag = this.pos; if (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 = true; this.stack = []; } else { this.prevIndex = this.index; } // See above workaround notice var off = uikitUtil.on(document, uikitUtil.pointerMove.replace(' touchmove', ''), this.move, {passive: false}); this.unbindMove = function () { off(); this$1.unbindMove = null; }; uikitUtil.on(window, 'scroll', this.unbindMove); uikitUtil.on(document, uikitUtil.pointerUp, this.end, true); }, move: function(e) { var this$1 = this; // See above workaround notice if (!this.unbindMove) { return; } var distance = this.pos - this.drag; if (distance === 0 || this.prevPos === this.pos || !this.dragging && Math.abs(distance) < this.threshold) { return; } e.cancelable && e.preventDefault(); this.dragging = true; this.dir = (distance < 0 ? 1 : -1); var ref = this; var slides = ref.slides; var ref$1 = this; var prevIndex = ref$1.prevIndex; var dis = Math.abs(distance); var nextIndex = this.getIndex(prevIndex + this.dir, prevIndex); var width = this._getDistance(prevIndex, nextIndex) || slides[prevIndex].offsetWidth; while (nextIndex !== prevIndex && dis > width) { this$1.drag -= width * this$1.dir; prevIndex = nextIndex; dis -= width; nextIndex = this$1.getIndex(prevIndex + this$1.dir, prevIndex); width = this$1._getDistance(prevIndex, nextIndex) || slides[prevIndex].offsetWidth; } this.percent = dis / width; var prev = slides[prevIndex]; var next = slides[nextIndex]; var changed = this.index !== nextIndex; var edge = prevIndex === nextIndex; var itemShown; [this.index, this.prevIndex].filter(function (i) { return !uikitUtil.includes([nextIndex, prevIndex], i); }).forEach(function (i) { uikitUtil.trigger(slides[i], 'itemhidden', [this$1]); if (edge) { itemShown = true; this$1.prevIndex = prevIndex; } }); if (this.index === prevIndex && this.prevIndex !== prevIndex || itemShown) { uikitUtil.trigger(slides[this.index], 'itemshown', [this]); } if (changed) { this.prevIndex = prevIndex; this.index = nextIndex; !edge && uikitUtil.trigger(prev, 'beforeitemhide', [this]); uikitUtil.trigger(next, 'beforeitemshow', [this]); } this._transitioner = this._translate(Math.abs(this.percent), prev, !edge && next); if (changed) { !edge && uikitUtil.trigger(prev, 'itemhide', [this]); uikitUtil.trigger(next, 'itemshow', [this]); } }, end: function() { uikitUtil.off(window, 'scroll', this.unbindMove); this.unbindMove && this.unbindMove(); uikitUtil.off(document, uikitUtil.pointerUp, this.end, true); if (this.dragging) { this.dragging = null; if (this.index === this.prevIndex) { this.percent = 1 - this.percent; this.dir *= -1; this._show(false, this.index, true); this._transitioner = null; } else { var dirChange = (uikitUtil.isRtl ? this.dir * (uikitUtil.isRtl ? 1 : -1) : this.dir) < 0 === this.prevPos > this.pos; this.index = dirChange ? this.index : this.prevIndex; if (dirChange) { this.percent = 1 - this.percent; } this.show(this.dir > 0 && !dirChange || this.dir < 0 && dirChange ? 'next' : 'previous', true); } uikitUtil.preventClick(); } this.drag = this.percent = null; } } }; function hasTextNodesOnly(el) { return !el.children.length && el.childNodes.length; } var SliderNav = { data: { selNav: false }, computed: { nav: function(ref, $el) { var selNav = ref.selNav; return uikitUtil.$(selNav, $el); }, navItemSelector: function(ref) { var attrItem = ref.attrItem; return ("[" + attrItem + "],[data-" + attrItem + "]"); }, navItems: function(_, $el) { return uikitUtil.$$(this.navItemSelector, $el); } }, update: { write: function() { var this$1 = this; if (this.nav && this.length !== this.nav.children.length) { uikitUtil.html(this.nav, this.slides.map(function (_, i) { return ("
  • "); }).join('')); } uikitUtil.toggleClass(uikitUtil.$$(this.navItemSelector, this.$el).concat(this.nav), 'uk-hidden', !this.maxIndex); this.updateNav(); }, events: ['load', 'resize'] }, events: [ { name: 'click', delegate: function() { return this.navItemSelector; }, handler: function(e) { e.preventDefault(); e.current.blur(); this.show(uikitUtil.data(e.current, this.attrItem)); } }, { name: 'itemshow', handler: 'updateNav' } ], methods: { updateNav: function() { var this$1 = this; var i = this.getValidIndex(); this.navItems.forEach(function (el) { var cmd = uikitUtil.data(el, this$1.attrItem); uikitUtil.toggleClass(el, this$1.clsActive, uikitUtil.toNumber(cmd) === i); uikitUtil.toggleClass(el, 'uk-invisible', this$1.finite && (cmd === 'previous' && i === 0 || cmd === 'next' && i >= this$1.maxIndex)); }); } } }; var Slider = { mixins: [SliderAutoplay, SliderDrag, SliderNav], props: { clsActivated: Boolean, easing: String, index: Number, finite: Boolean, velocity: Number }, data: function () { return ({ easing: 'ease', finite: false, velocity: 1, index: 0, stack: [], percent: 0, clsActive: 'uk-active', clsActivated: false, Transitioner: false, transitionOptions: {} }); }, computed: { duration: function(ref, $el) { var velocity = ref.velocity; return speedUp($el.offsetWidth / velocity); }, length: function() { return this.slides.length; }, list: function(ref, $el) { var selList = ref.selList; return uikitUtil.$(selList, $el); }, maxIndex: function() { return this.length - 1; }, slidesSelector: function(ref) { var selList = ref.selList; return (selList + " > *"); }, slides: function() { return uikitUtil.toNodes(this.list.children); } }, events: { itemshown: function() { this.$update(this.list); } }, methods: { show: function(index, force) { var this$1 = this; if ( force === void 0 ) force = false; if (this.dragging || !this.length) { return; } var ref = this; var stack = ref.stack; var queueIndex = force ? 0 : stack.length; var reset = function () { stack.splice(queueIndex, 1); if (stack.length) { this$1.show(stack.shift(), true); } }; stack[force ? 'unshift' : 'push'](index); if (!force && stack.length > 1) { if (stack.length === 2) { this._transitioner.forward(Math.min(this.duration, 200)); } return; } var prevIndex = this.index; var prev = uikitUtil.hasClass(this.slides, this.clsActive) && this.slides[prevIndex]; var nextIndex = this.getIndex(index, this.index); var next = this.slides[nextIndex]; if (prev === next) { reset(); return; } this.dir = getDirection(index, prevIndex); this.prevIndex = prevIndex; this.index = nextIndex; prev && uikitUtil.trigger(prev, 'beforeitemhide', [this]); if (!uikitUtil.trigger(next, 'beforeitemshow', [this, prev])) { this.index = this.prevIndex; reset(); return; } var promise = this._show(prev, next, force).then(function () { prev && uikitUtil.trigger(prev, 'itemhidden', [this$1]); uikitUtil.trigger(next, 'itemshown', [this$1]); return new uikitUtil.Promise(function (resolve) { uikitUtil.fastdom.write(function () { stack.shift(); if (stack.length) { this$1.show(stack.shift(), true); } else { this$1._transitioner = null; } resolve(); }); }); }); prev && uikitUtil.trigger(prev, 'itemhide', [this]); uikitUtil.trigger(next, 'itemshow', [this]); return promise; }, getIndex: function(index, prev) { if ( index === void 0 ) index = this.index; if ( prev === void 0 ) prev = this.index; return uikitUtil.clamp(uikitUtil.getIndex(index, this.slides, prev, this.finite), 0, this.maxIndex); }, getValidIndex: function(index, prevIndex) { if ( index === void 0 ) index = this.index; if ( prevIndex === void 0 ) prevIndex = this.prevIndex; return this.getIndex(index, prevIndex); }, _show: function(prev, next, force) { this._transitioner = this._getTransitioner( prev, next, this.dir, uikitUtil.assign({ easing: force ? next.offsetWidth < 600 ? 'cubic-bezier(0.25, 0.46, 0.45, 0.94)' /* easeOutQuad */ : 'cubic-bezier(0.165, 0.84, 0.44, 1)' /* easeOutQuart */ : this.easing }, this.transitionOptions) ); if (!force && !prev) { this._transitioner.translate(1); return uikitUtil.Promise.resolve(); } var ref = this.stack; var length = ref.length; return this._transitioner[length > 1 ? 'forward' : 'show'](length > 1 ? Math.min(this.duration, 75 + 75 / (length - 1)) : this.duration, this.percent); }, _getDistance: function(prev, next) { return new this._getTransitioner(prev, prev !== next && next).getDistance(); }, _translate: function(percent, prev, next) { if ( prev === void 0 ) prev = this.prevIndex; if ( next === void 0 ) next = this.index; var transitioner = this._getTransitioner(prev !== next ? prev : false, next); transitioner.translate(percent); return transitioner; }, _getTransitioner: function(prev, next, dir, options) { if ( prev === void 0 ) prev = this.prevIndex; if ( next === void 0 ) next = this.index; if ( dir === void 0 ) dir = this.dir || 1; if ( options === void 0 ) options = this.transitionOptions; return new this.Transitioner( uikitUtil.isNumber(prev) ? this.slides[prev] : prev, uikitUtil.isNumber(next) ? this.slides[next] : next, dir * (uikitUtil.isRtl ? -1 : 1), options ); } } }; function getDirection(index, prevIndex) { return index === 'next' ? 1 : index === 'previous' ? -1 : index < prevIndex ? -1 : 1; } function speedUp(x) { return .5 * x + 300; // parabola through (400,500; 600,600; 1800,1200) } var SliderReactive = { update: { write: function() { if (this.stack.length || this.dragging) { return; } var index = this.getValidIndex(); delete this.index; uikitUtil.removeClass(this.slides, this.clsActive, this.clsActivated); this.show(index); }, events: ['load', 'resize'] } }; function translate(value, unit) { if ( value === void 0 ) value = 0; if ( unit === void 0 ) unit = '%'; return ("translateX(" + value + (value ? unit : '') + ")"); // currently not translate3d to support IE, translate3d within translate3d does not work while transitioning } function Transitioner (prev, next, dir, ref) { var center = ref.center; var easing = ref.easing; var list = ref.list; var deferred = new uikitUtil.Deferred(); var from = prev ? getLeft(prev, list, center) : getLeft(next, list, center) + bounds(next).width * dir; var to = next ? getLeft(next, list, center) : from + bounds(prev).width * dir * (uikitUtil.isRtl ? -1 : 1); return { dir: dir, show: function(duration, percent, linear) { if ( percent === void 0 ) percent = 0; var timing = linear ? 'linear' : easing; duration -= Math.round(duration * uikitUtil.clamp(percent, -1, 1)); this.translate(percent); prev && this.updateTranslates(); percent = prev ? percent : uikitUtil.clamp(percent, 0, 1); triggerUpdate(this.getItemIn(), 'itemin', {percent: percent, duration: duration, timing: timing, dir: dir}); prev && triggerUpdate(this.getItemIn(true), 'itemout', {percent: 1 - percent, duration: duration, timing: timing, dir: dir}); uikitUtil.Transition .start(list, {transform: translate(-to * (uikitUtil.isRtl ? -1 : 1), 'px')}, duration, timing) .then(deferred.resolve, uikitUtil.noop); return deferred.promise; }, stop: function() { return uikitUtil.Transition.stop(list); }, cancel: function() { uikitUtil.Transition.cancel(list); }, reset: function() { uikitUtil.css(list, 'transform', ''); }, forward: function(duration, percent) { if ( percent === void 0 ) percent = this.percent(); uikitUtil.Transition.cancel(list); return this.show(duration, percent, true); }, translate: function(percent) { var distance = this.getDistance() * dir * (uikitUtil.isRtl ? -1 : 1); uikitUtil.css(list, 'transform', translate(uikitUtil.clamp( -to + (distance - distance * percent), -getWidth(list), bounds(list).width ) * (uikitUtil.isRtl ? -1 : 1), 'px')); this.updateTranslates(); if (prev) { percent = uikitUtil.clamp(percent, -1, 1); triggerUpdate(this.getItemIn(), 'itemtranslatein', {percent: percent, dir: dir}); triggerUpdate(this.getItemIn(true), 'itemtranslateout', {percent: 1 - percent, dir: dir}); } }, percent: function() { return Math.abs((uikitUtil.css(list, 'transform').split(',')[4] * (uikitUtil.isRtl ? -1 : 1) + from) / (to - from)); }, getDistance: function() { return Math.abs(to - from); }, getItemIn: function(out) { if ( out === void 0 ) out = false; var actives = this.getActives(); var all = uikitUtil.sortBy(slides(list), 'offsetLeft'); var i = uikitUtil.index(all, actives[dir * (out ? -1 : 1) > 0 ? actives.length - 1 : 0]); return ~i && all[i + (prev && !out ? dir : 0)]; }, getActives: function() { var left = getLeft(prev || next, list, center); return uikitUtil.sortBy(slides(list).filter(function (slide) { var slideLeft = getElLeft(slide, list); return slideLeft >= left && slideLeft + bounds(slide).width <= bounds(list).width + left; }), 'offsetLeft'); }, updateTranslates: function() { var actives = this.getActives(); slides(list).forEach(function (slide) { var isActive = uikitUtil.includes(actives, slide); triggerUpdate(slide, ("itemtranslate" + (isActive ? 'in' : 'out')), { percent: isActive ? 1 : 0, dir: slide.offsetLeft <= next.offsetLeft ? 1 : -1 }); }); } }; } function getLeft(el, list, center) { var left = getElLeft(el, list); return center ? left - centerEl(el, list) : Math.min(left, getMax(list)); } function getMax(list) { return Math.max(0, getWidth(list) - bounds(list).width); } function getWidth(list) { return slides(list).reduce(function (right, el) { return bounds(el).width + right; }, 0); } function getMaxWidth(list) { return slides(list).reduce(function (right, el) { return Math.max(right, bounds(el).width); }, 0); } function centerEl(el, list) { return bounds(list).width / 2 - bounds(el).width / 2; } function getElLeft(el, list) { return (uikitUtil.position(el).left + (uikitUtil.isRtl ? bounds(el).width - bounds(list).width : 0)) * (uikitUtil.isRtl ? -1 : 1); } function bounds(el) { return el.getBoundingClientRect(); } function triggerUpdate(el, type, data) { uikitUtil.trigger(el, uikitUtil.createEvent(type, false, false, data)); } function slides(list) { return uikitUtil.toNodes(list.children); } var Component = { mixins: [Class, Slider, SliderReactive], props: { center: Boolean, sets: Boolean, }, data: { center: false, sets: false, attrItem: 'uk-slider-item', selList: '.uk-slider-items', selNav: '.uk-slider-nav', clsContainer: 'uk-slider-container', Transitioner: Transitioner }, computed: { avgWidth: function() { return getWidth(this.list) / this.length; }, finite: function(ref) { var finite = ref.finite; return finite || getWidth(this.list) < bounds(this.list).width + getMaxWidth(this.list) + this.center; }, maxIndex: function() { var this$1 = this; if (!this.finite || this.center && !this.sets) { return this.length - 1; } if (this.center) { return this.sets[this.sets.length - 1]; } uikitUtil.css(this.slides, 'order', ''); var max = getMax(this.list); var i = this.length; while (i--) { if (getElLeft(this$1.list.children[i], this$1.list) < max) { return Math.min(i + 1, this$1.length - 1); } } return 0; }, sets: function(ref) { var this$1 = this; var sets = ref.sets; var width = bounds(this.list).width / (this.center ? 2 : 1); var left = 0; var leftCenter = width; var slideLeft = 0; sets = sets && this.slides.reduce(function (sets, slide, i) { var ref = bounds(slide); var slideWidth = ref.width; var slideRight = slideLeft + slideWidth; if (slideRight > left) { if (!this$1.center && i > this$1.maxIndex) { i = this$1.maxIndex; } if (!uikitUtil.includes(sets, i)) { var cmp = this$1.slides[i + 1]; if (this$1.center && cmp && slideWidth < leftCenter - bounds(cmp).width / 2) { leftCenter -= slideWidth; } else { leftCenter = width; sets.push(i); left = slideLeft + width + (this$1.center ? slideWidth / 2 : 0); } } } slideLeft += slideWidth; return sets; }, []); return sets && sets.length && sets; }, transitionOptions: function() { return { center: this.center, list: this.list }; } }, connected: function() { uikitUtil.toggleClass(this.$el, this.clsContainer, !uikitUtil.$(("." + (this.clsContainer)), this.$el)); }, update: { write: function() { var this$1 = this; uikitUtil.$$(("[" + (this.attrItem) + "],[data-" + (this.attrItem) + "]"), this.$el).forEach(function (el) { var index = uikitUtil.data(el, this$1.attrItem); this$1.maxIndex && uikitUtil.toggleClass(el, 'uk-hidden', uikitUtil.isNumeric(index) && (this$1.sets && !uikitUtil.includes(this$1.sets, uikitUtil.toFloat(index)) || index > this$1.maxIndex)); }); }, events: ['load', 'resize'] }, events: { beforeitemshow: function(e) { var this$1 = this; if (!this.dragging && this.sets && this.stack.length < 2 && !uikitUtil.includes(this.sets, this.index)) { this.index = this.getValidIndex(); } var diff = 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 && diff > 1) { for (var i = 0; i < diff; i++) { this$1.stack.splice(1, 0, this$1.dir > 0 ? 'next' : 'previous'); } e.preventDefault(); return; } this.duration = speedUp(this.avgWidth / this.velocity) * (bounds( this.dir < 0 || !this.slides[this.prevIndex] ? this.slides[this.index] : this.slides[this.prevIndex] ).width / this.avgWidth); this.reorder(); }, itemshow: function() { !uikitUtil.isUndefined(this.prevIndex) && uikitUtil.addClass(this._getTransitioner().getItemIn(), this.clsActive); }, itemshown: function() { var this$1 = this; var actives = this._getTransitioner(this.index).getActives(); this.slides.forEach(function (slide) { return uikitUtil.toggleClass(slide, this$1.clsActive, uikitUtil.includes(actives, slide)); }); (!this.sets || uikitUtil.includes(this.sets, uikitUtil.toFloat(this.index))) && this.slides.forEach(function (slide) { return uikitUtil.toggleClass(slide, this$1.clsActivated, uikitUtil.includes(actives, slide)); }); } }, methods: { reorder: function() { var this$1 = this; uikitUtil.css(this.slides, 'order', ''); if (this.finite) { return; } var index = this.dir > 0 && this.slides[this.prevIndex] ? this.prevIndex : this.index; this.slides.forEach(function (slide, i) { return uikitUtil.css(slide, 'order', this$1.dir > 0 && i < index ? 1 : this$1.dir < 0 && i >= this$1.index ? -1 : '' ); } ); if (!this.center) { return; } var next = this.slides[index]; var width = bounds(this.list).width / 2 - bounds(next).width / 2; var j = 0; while (width > 0) { var slideIndex = this$1.getIndex(--j + index, index); var slide = this$1.slides[slideIndex]; uikitUtil.css(slide, 'order', slideIndex > index ? -2 : -1); width -= bounds(slide).width; } }, getValidIndex: function(index, prevIndex) { var this$1 = this; if ( index === void 0 ) index = this.index; if ( prevIndex === void 0 ) prevIndex = this.prevIndex; index = this.getIndex(index, prevIndex); if (!this.sets) { return index; } var prev; do { if (uikitUtil.includes(this$1.sets, index)) { return index; } prev = index; index = this$1.getIndex(index + this$1.dir, prevIndex); } while (index !== prev); return index; } } }; /* global UIkit, 'slider' */ if (typeof window !== 'undefined' && window.UIkit) { window.UIkit.component('slider', Component); } return Component; })));