mirror of https://github.com/lukechilds/docs.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1148 lines
33 KiB
1148 lines
33 KiB
/*! 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 ("<li " + (this$1.attrItem) + "=\"" + i + "\"><a href=\"#\"></a></li>"); }).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;
|
|
|
|
})));
|
|
|