uikit
Version:
UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.
1,683 lines (1,175 loc) • 55.8 kB
JavaScript
/*! UIkit 3.2.1 | http://www.getuikit.com | (c) 2014 - 2019 YOOtheme | MIT License */
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('uikit-util')) :
typeof define === 'function' && define.amd ? define('uikitlightbox', ['uikit-util'], factory) :
(global = global || self, global.UIkitLightbox = factory(global.UIkit.util));
}(this, function (uikitUtil) { 'use strict';
var Animations = {
slide: {
show: function(dir) {
return [
{transform: translate(dir * -100)},
{transform: translate()}
];
},
percent: function(current) {
return translated(current);
},
translate: function(percent, dir) {
return [
{transform: translate(dir * -100 * percent)},
{transform: translate(dir * 100 * (1 - percent))}
];
}
}
};
function translated(el) {
return Math.abs(uikitUtil.css(el, 'transform').split(',')[4] / el.offsetWidth) || 0;
}
function translate(value, unit) {
if ( value === void 0 ) value = 0;
if ( unit === void 0 ) unit = '%';
value += value ? unit : '';
return uikitUtil.isIE ? ("translateX(" + value + ")") : ("translate3d(" + value + ", 0, 0)"); // currently not translate3d in IE, translate3d within translate3d does not work while transitioning
}
function scale3d(value) {
return ("scale3d(" + value + ", " + value + ", 1)");
}
var Animations$1 = uikitUtil.assign({}, Animations, {
fade: {
show: function() {
return [
{opacity: 0},
{opacity: 1}
];
},
percent: function(current) {
return 1 - uikitUtil.css(current, 'opacity');
},
translate: function(percent) {
return [
{opacity: 1 - percent},
{opacity: percent}
];
}
},
scale: {
show: function() {
return [
{opacity: 0, transform: scale3d(1 - .2)},
{opacity: 1, transform: scale3d(1)}
];
},
percent: function(current) {
return 1 - uikitUtil.css(current, 'opacity');
},
translate: function(percent) {
return [
{opacity: 1 - percent, transform: scale3d(1 - .2 * percent)},
{opacity: percent, transform: scale3d(1 - .2 + .2 * percent)}
];
}
}
});
var Container = {
props: {
container: Boolean
},
data: {
container: true
},
computed: {
container: function(ref) {
var container = ref.container;
return container === true && this.$container || container && uikitUtil.$(container);
}
}
};
var Class = {
connected: function() {
!uikitUtil.hasClass(this.$el, this.$name) && uikitUtil.addClass(this.$el, this.$name);
}
};
var Togglable = {
props: {
cls: Boolean,
animation: 'list',
duration: Number,
origin: String,
transition: String,
queued: Boolean
},
data: {
cls: false,
animation: [false],
duration: 200,
origin: false,
transition: 'linear',
queued: false,
initProps: {
overflow: '',
height: '',
paddingTop: '',
paddingBottom: '',
marginTop: '',
marginBottom: ''
},
hideProps: {
overflow: 'hidden',
height: 0,
paddingTop: 0,
paddingBottom: 0,
marginTop: 0,
marginBottom: 0
}
},
computed: {
hasAnimation: function(ref) {
var animation = ref.animation;
return !!animation[0];
},
hasTransition: function(ref) {
var animation = ref.animation;
return this.hasAnimation && animation[0] === true;
}
},
methods: {
toggleElement: function(targets, show, animate) {
var this$1 = this;
return new uikitUtil.Promise(function (resolve) {
targets = uikitUtil.toNodes(targets);
var all = function (targets) { return uikitUtil.Promise.all(targets.map(function (el) { return this$1._toggleElement(el, show, animate); })); };
var toggled = targets.filter(function (el) { return this$1.isToggled(el); });
var untoggled = targets.filter(function (el) { return !uikitUtil.includes(toggled, el); });
var p;
if (!this$1.queued || !uikitUtil.isUndefined(animate) || !uikitUtil.isUndefined(show) || !this$1.hasAnimation || targets.length < 2) {
p = all(untoggled.concat(toggled));
} else {
var body = document.body;
var scroll = body.scrollTop;
var el = toggled[0];
var inProgress = uikitUtil.Animation.inProgress(el) && uikitUtil.hasClass(el, 'uk-animation-leave')
|| uikitUtil.Transition.inProgress(el) && el.style.height === '0px';
p = all(toggled);
if (!inProgress) {
p = p.then(function () {
var p = all(untoggled);
body.scrollTop = scroll;
return p;
});
}
}
p.then(resolve, uikitUtil.noop);
});
},
toggleNow: function(targets, show) {
var this$1 = this;
return new uikitUtil.Promise(function (resolve) { return uikitUtil.Promise.all(uikitUtil.toNodes(targets).map(function (el) { return this$1._toggleElement(el, show, false); })).then(resolve, uikitUtil.noop); });
},
isToggled: function(el) {
var nodes = uikitUtil.toNodes(el || this.$el);
return this.cls
? uikitUtil.hasClass(nodes, this.cls.split(' ')[0])
: !uikitUtil.hasAttr(nodes, 'hidden');
},
updateAria: function(el) {
if (this.cls === false) {
uikitUtil.attr(el, 'aria-hidden', !this.isToggled(el));
}
},
_toggleElement: function(el, show, animate) {
var this$1 = this;
show = uikitUtil.isBoolean(show)
? show
: uikitUtil.Animation.inProgress(el)
? uikitUtil.hasClass(el, 'uk-animation-leave')
: uikitUtil.Transition.inProgress(el)
? el.style.height === '0px'
: !this.isToggled(el);
if (!uikitUtil.trigger(el, ("before" + (show ? 'show' : 'hide')), [this])) {
return uikitUtil.Promise.reject();
}
var promise = (
uikitUtil.isFunction(animate)
? animate
: animate === false || !this.hasAnimation
? this._toggle
: this.hasTransition
? toggleHeight(this)
: toggleAnimation(this)
)(el, show);
uikitUtil.trigger(el, show ? 'show' : 'hide', [this]);
var final = function () {
uikitUtil.trigger(el, show ? 'shown' : 'hidden', [this$1]);
this$1.$update(el);
};
return promise ? promise.then(final) : uikitUtil.Promise.resolve(final());
},
_toggle: function(el, toggled) {
if (!el) {
return;
}
toggled = Boolean(toggled);
var changed;
if (this.cls) {
changed = uikitUtil.includes(this.cls, ' ') || toggled !== uikitUtil.hasClass(el, this.cls);
changed && uikitUtil.toggleClass(el, this.cls, uikitUtil.includes(this.cls, ' ') ? undefined : toggled);
} else {
changed = toggled === uikitUtil.hasAttr(el, 'hidden');
changed && uikitUtil.attr(el, 'hidden', !toggled ? '' : null);
}
uikitUtil.$$('[autofocus]', el).some(function (el) { return uikitUtil.isVisible(el) ? el.focus() || true : el.blur(); });
this.updateAria(el);
changed && this.$update(el);
}
}
};
function toggleHeight(ref) {
var isToggled = ref.isToggled;
var duration = ref.duration;
var initProps = ref.initProps;
var hideProps = ref.hideProps;
var transition = ref.transition;
var _toggle = ref._toggle;
return function (el, show) {
var inProgress = uikitUtil.Transition.inProgress(el);
var inner = el.hasChildNodes ? uikitUtil.toFloat(uikitUtil.css(el.firstElementChild, 'marginTop')) + uikitUtil.toFloat(uikitUtil.css(el.lastElementChild, 'marginBottom')) : 0;
var currentHeight = uikitUtil.isVisible(el) ? uikitUtil.height(el) + (inProgress ? 0 : inner) : 0;
uikitUtil.Transition.cancel(el);
if (!isToggled(el)) {
_toggle(el, true);
}
uikitUtil.height(el, '');
// Update child components first
uikitUtil.fastdom.flush();
var endHeight = uikitUtil.height(el) + (inProgress ? 0 : inner);
uikitUtil.height(el, currentHeight);
return (show
? uikitUtil.Transition.start(el, uikitUtil.assign({}, initProps, {overflow: 'hidden', height: endHeight}), Math.round(duration * (1 - currentHeight / endHeight)), transition)
: uikitUtil.Transition.start(el, hideProps, Math.round(duration * (currentHeight / endHeight)), transition).then(function () { return _toggle(el, false); })
).then(function () { return uikitUtil.css(el, initProps); });
};
}
function toggleAnimation(ref) {
var animation = ref.animation;
var duration = ref.duration;
var origin = ref.origin;
var _toggle = ref._toggle;
return function (el, show) {
uikitUtil.Animation.cancel(el);
if (show) {
_toggle(el, true);
return uikitUtil.Animation.in(el, animation[0], duration, origin);
}
return uikitUtil.Animation.out(el, animation[1] || animation[0], duration, origin).then(function () { return _toggle(el, false); });
};
}
function delayOn(el, type, fn) {
var off = uikitUtil.once(el, type, function () { return off = uikitUtil.on(el, type, fn); }
, true);
return function () { return off(); };
}
var active = [];
var Modal = {
mixins: [Class, Container, Togglable],
props: {
selPanel: String,
selClose: String,
escClose: Boolean,
bgClose: Boolean,
stack: Boolean
},
data: {
cls: 'uk-open',
escClose: true,
bgClose: true,
overlay: true,
stack: false
},
computed: {
panel: function(ref, $el) {
var selPanel = ref.selPanel;
return uikitUtil.$(selPanel, $el);
},
transitionElement: function() {
return this.panel;
},
bgClose: function(ref) {
var bgClose = ref.bgClose;
return bgClose && this.panel;
}
},
beforeDisconnect: function() {
if (this.isToggled()) {
this.toggleNow(this.$el, false);
}
},
events: [
{
name: 'click',
delegate: function() {
return this.selClose;
},
handler: function(e) {
e.preventDefault();
this.hide();
}
},
{
name: 'toggle',
self: true,
handler: function(e) {
if (e.defaultPrevented) {
return;
}
e.preventDefault();
this.toggle();
}
},
{
name: 'beforeshow',
self: true,
handler: function(e) {
if (uikitUtil.includes(active, this)) {
return false;
}
if (!this.stack && active.length) {
uikitUtil.Promise.all(active.map(function (modal) { return modal.hide(); })).then(this.show);
e.preventDefault();
} else {
active.push(this);
}
}
},
{
name: 'show',
self: true,
handler: function() {
var this$1 = this;
if (uikitUtil.width(window) - uikitUtil.width(document) && this.overlay) {
uikitUtil.css(document.body, 'overflowY', 'scroll');
}
uikitUtil.addClass(document.documentElement, this.clsPage);
if (this.bgClose) {
uikitUtil.once(this.$el, 'hide', delayOn(document, 'click', function (ref) {
var defaultPrevented = ref.defaultPrevented;
var target = ref.target;
var current = uikitUtil.last(active);
if (!defaultPrevented
&& current === this$1
&& (!current.overlay || uikitUtil.within(target, current.$el))
&& !uikitUtil.within(target, current.panel)
) {
current.hide();
}
}), {self: true});
}
if (this.escClose) {
uikitUtil.once(this.$el, 'hide', uikitUtil.on(document, 'keydown', function (e) {
var current = uikitUtil.last(active);
if (e.keyCode === 27 && current === this$1) {
e.preventDefault();
current.hide();
}
}), {self: true});
}
}
},
{
name: 'hidden',
self: true,
handler: function() {
var this$1 = this;
active.splice(active.indexOf(this), 1);
if (!active.length) {
uikitUtil.css(document.body, 'overflowY', '');
}
if (!active.some(function (modal) { return modal.clsPage === this$1.clsPage; })) {
uikitUtil.removeClass(document.documentElement, this.clsPage);
}
}
}
],
methods: {
toggle: function() {
return this.isToggled() ? this.hide() : this.show();
},
show: function() {
var this$1 = this;
if (this.container && this.$el.parentNode !== this.container) {
uikitUtil.append(this.container, this.$el);
return new uikitUtil.Promise(function (resolve) { return requestAnimationFrame(function () { return this$1.show().then(resolve); }
); }
);
}
return this.toggleElement(this.$el, true, animate(this));
},
hide: function() {
return this.toggleElement(this.$el, false, animate(this));
}
}
};
function animate(ref) {
var transitionElement = ref.transitionElement;
var _toggle = ref._toggle;
return function (el, show) { return new uikitUtil.Promise(function (resolve, reject) { return uikitUtil.once(el, 'show hide', function () {
el._reject && el._reject();
el._reject = reject;
_toggle(el, show);
var off = uikitUtil.once(transitionElement, 'transitionstart', function () {
uikitUtil.once(transitionElement, 'transitionend transitioncancel', resolve, {self: true});
clearTimeout(timer);
}, {self: true});
var timer = setTimeout(function () {
off();
resolve();
}, uikitUtil.toMs(uikitUtil.css(transitionElement, 'transitionDuration')));
}); }
); };
}
function Transitioner(prev, next, dir, ref) {
var animation = ref.animation;
var easing = ref.easing;
var percent = animation.percent;
var translate = animation.translate;
var show = animation.show; if ( show === void 0 ) show = uikitUtil.noop;
var props = show(dir);
var deferred = new uikitUtil.Deferred();
return {
dir: dir,
show: function(duration, percent, linear) {
var this$1 = this;
if ( percent === void 0 ) percent = 0;
var timing = linear ? 'linear' : easing;
duration -= Math.round(duration * uikitUtil.clamp(percent, -1, 1));
this.translate(percent);
triggerUpdate(next, 'itemin', {percent: percent, duration: duration, timing: timing, dir: dir});
triggerUpdate(prev, 'itemout', {percent: 1 - percent, duration: duration, timing: timing, dir: dir});
uikitUtil.Promise.all([
uikitUtil.Transition.start(next, props[1], duration, timing),
uikitUtil.Transition.start(prev, props[0], duration, timing)
]).then(function () {
this$1.reset();
deferred.resolve();
}, uikitUtil.noop);
return deferred.promise;
},
stop: function() {
return uikitUtil.Transition.stop([next, prev]);
},
cancel: function() {
uikitUtil.Transition.cancel([next, prev]);
},
reset: function() {
for (var prop in props[0]) {
uikitUtil.css([next, prev], prop, '');
}
},
forward: function(duration, percent) {
if ( percent === void 0 ) percent = this.percent();
uikitUtil.Transition.cancel([next, prev]);
return this.show(duration, percent, true);
},
translate: function(percent) {
this.reset();
var props = translate(percent, dir);
uikitUtil.css(next, props[1]);
uikitUtil.css(prev, props[0]);
triggerUpdate(next, 'itemtranslatein', {percent: percent, dir: dir});
triggerUpdate(prev, 'itemtranslateout', {percent: 1 - percent, dir: dir});
},
percent: function() {
return percent(prev || next, next, dir);
},
getDistance: function() {
return prev && prev.offsetWidth;
}
};
}
function triggerUpdate(el, type, data) {
uikitUtil.trigger(el, uikitUtil.createEvent(type, false, false, data));
}
var SliderAutoplay = {
props: {
autoplay: Boolean,
autoplayInterval: Number,
pauseOnHover: Boolean
},
data: {
autoplay: false,
autoplayInterval: 7000,
pauseOnHover: true
},
connected: function() {
this.autoplay && this.startAutoplay();
},
disconnected: function() {
this.stopAutoplay();
},
update: function() {
uikitUtil.attr(this.slides, 'tabindex', '-1');
},
events: [
{
name: 'visibilitychange',
el: document,
filter: function() {
return this.autoplay;
},
handler: function() {
if (document.hidden) {
this.stopAutoplay();
} else {
this.startAutoplay();
}
}
}
],
methods: {
startAutoplay: function() {
var this$1 = this;
this.stopAutoplay();
this.interval = setInterval(
function () { return (!this$1.draggable || !uikitUtil.$(':focus', this$1.$el))
&& (!this$1.pauseOnHover || !uikitUtil.matches(this$1.$el, ':hover'))
&& !this$1.stack.length
&& this$1.show('next'); },
this.autoplayInterval
);
},
stopAutoplay: function() {
this.interval && clearInterval(this.interval);
}
}
};
var SliderDrag = {
props: {
draggable: Boolean
},
data: {
draggable: true,
threshold: 10
},
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.getEventPos(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.selSlides;
},
handler: function(e) {
if (!this.draggable
|| !uikitUtil.isTouch(e) && hasTextNodesOnly(e.target)
|| uikitUtil.closest(e.target, uikitUtil.selInput)
|| e.button > 0
|| this.length < 2
) {
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.selSlides;
}
},
{
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.pointerMove !== 'touchmove'
? uikitUtil.on(document, uikitUtil.pointerMove, this.move, {passive: false})
: uikitUtil.noop;
this.unbindMove = function () {
off();
this$1.unbindMove = null;
};
uikitUtil.on(window, 'scroll', this.unbindMove);
uikitUtil.on(document, uikitUtil.pointerUp, this.end, true);
uikitUtil.css(this.list, 'userSelect', 'none');
},
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;
}
uikitUtil.css(this.list, 'pointerEvents', 'none');
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.drag -= width * this.dir;
prevIndex = nextIndex;
dis -= width;
nextIndex = this.getIndex(prevIndex + this.dir, prevIndex);
width = this._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.css(this.list, {userSelect: '', pointerEvents: ''});
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);
},
selNavItem: function(ref) {
var attrItem = ref.attrItem;
return ("[" + attrItem + "],[data-" + attrItem + "]");
},
navItems: function(_, $el) {
return uikitUtil.$$(this.selNavItem, $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.selNavItem, this.$el).concat(this.nav), 'uk-hidden', !this.maxIndex);
this.updateNav();
},
events: ['resize']
},
events: [
{
name: 'click',
delegate: function() {
return this.selNavItem;
},
handler: function(e) {
e.preventDefault();
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,
selSlides: String
},
data: function () { return ({
easing: 'ease',
finite: false,
velocity: 1,
index: 0,
prevIndex: -1,
stack: [],
percent: 0,
clsActive: 'uk-active',
clsActivated: false,
Transitioner: false,
transitionOptions: {}
}); },
connected: function() {
this.prevIndex = -1;
this.index = this.getValidIndex(this.index);
this.stack = [];
},
disconnected: function() {
uikitUtil.removeClass(this.slides, this.clsActive);
},
computed: {
duration: function(ref, $el) {
var velocity = ref.velocity;
return speedUp($el.offsetWidth / velocity);
},
list: function(ref, $el) {
var selList = ref.selList;
return uikitUtil.$(selList, $el);
},
maxIndex: function() {
return this.length - 1;
},
selSlides: function(ref) {
var selList = ref.selList;
var selSlides = ref.selSlides;
return (selList + " " + (selSlides || '> *'));
},
slides: {
get: function() {
return uikitUtil.$$(this.selSlides, this.$el);
},
watch: function() {
this.$reset();
}
},
length: function() {
return this.slides.length;
}
},
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 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 Slideshow = {
mixins: [Slider],
props: {
animation: String
},
data: {
animation: 'slide',
clsActivated: 'uk-transition-active',
Animations: Animations,
Transitioner: Transitioner
},
computed: {
animation: function(ref) {
var animation = ref.animation;
var Animations = ref.Animations;
return uikitUtil.assign(animation in Animations ? Animations[animation] : Animations.slide, {name: animation});
},
transitionOptions: function() {
return {animation: this.animation};
}
},
events: {
'itemshow itemhide itemshown itemhidden': function(ref) {
var target = ref.target;
this.$update(target);
},
beforeitemshow: function(ref) {
var target = ref.target;
uikitUtil.addClass(target, this.clsActive);
},
itemshown: function(ref) {
var target = ref.target;
uikitUtil.addClass(target, this.clsActivated);
},
itemhidden: function(ref) {
var target = ref.target;
uikitUtil.removeClass(target, this.clsActive, this.clsActivated);
}
}
};
var LightboxPanel = {
mixins: [Container, Modal, Togglable, Slideshow],
functional: true,
props: {
delayControls: Number,
preload: Number,
videoAutoplay: Boolean,
template: String
},
data: function () { return ({
preload: 1,
videoAutoplay: false,
delayControls: 3000,
items: [],
cls: 'uk-open',
clsPage: 'uk-lightbox-page',
selList: '.uk-lightbox-items',
attrItem: 'uk-lightbox-item',
selClose: '.uk-close-large',
selCaption: '.uk-lightbox-caption',
pauseOnHover: false,
velocity: 2,
Animations: Animations$1,
template: "<div class=\"uk-lightbox uk-overflow-hidden\"> <ul class=\"uk-lightbox-items\"></ul> <div class=\"uk-lightbox-toolbar uk-position-top uk-text-right uk-transition-slide-top uk-transition-opaque\"> <button class=\"uk-lightbox-toolbar-icon uk-close-large\" type=\"button\" uk-close></button> </div> <a class=\"uk-lightbox-button uk-position-center-left uk-position-medium uk-transition-fade\" href=\"#\" uk-slidenav-previous uk-lightbox-item=\"previous\"></a> <a class=\"uk-lightbox-button uk-position-center-right uk-position-medium uk-transition-fade\" href=\"#\" uk-slidenav-next uk-lightbox-item=\"next\"></a> <div class=\"uk-lightbox-toolbar uk-lightbox-caption uk-position-bottom uk-text-center uk-transition-slide-bottom uk-transition-opaque\"></div> </div>"
}); },
created: function() {
var $el = uikitUtil.$(this.template);
var list = uikitUtil.$(this.selList, $el);
this.items.forEach(function () { return uikitUtil.append(list, '<li></li>'); });
this.$mount(uikitUtil.append(this.container, $el));
},
computed: {
caption: function(ref, $el) {
var selCaption = ref.selCaption;
return uikitUtil.$('.uk-lightbox-caption', $el);
}
},
events: [
{
name: (uikitUtil.pointerMove + " " + uikitUtil.pointerDown + " keydown"),
handler: 'showControls'
},
{
name: 'click',
self: true,
delegate: function() {
return this.selSlides;
},
handler: function(e) {
if (e.defaultPrevented) {
return;
}
this.hide();
}
},
{
name: 'shown',
self: true,
handler: function() {
this.showControls();
}
},
{
name: 'hide',
self: true,
handler: function() {
this.hideControls();
uikitUtil.removeClass(this.slides, this.clsActive);
uikitUtil.Transition.stop(this.slides);
}
},
{
name: 'hidden',
self: true,
handler: function() {
this.$destroy(true);
}
},
{
name: 'keyup',
el: document,
handler: function(e) {
if (!this.isToggled(this.$el)) {
return;
}
switch (e.keyCode) {
case 37:
this.show('previous');
break;
case 39:
this.show('next');
break;
}
}
},
{
name: 'beforeitemshow',
handler: function(e) {
if (this.isToggled()) {
return;
}
this.draggable = false;
e.preventDefault();
this.toggleNow(this.$el, true);
this.animation = Animations$1['scale'];
uikitUtil.removeClass(e.target, this.clsActive);
this.stack.splice(1, 0, this.index);
}
},
{
name: 'itemshow',
handler: function(ref) {
var target = ref.target;
var i = uikitUtil.index(target);
var ref$1 = this.getItem(i);
var caption = ref$1.caption;
uikitUtil.css(this.caption, 'display', caption ? '' : 'none');
uikitUtil.html(this.caption, caption);
for (var j = 0; j <= this.preload; j++) {
this.loadItem(this.getIndex(i + j));
this.loadItem(this.getIndex(i - j));
}
}
},
{
name: 'itemshown',
handler: function() {
this.draggable = this.$props.draggable;
}
},
{
name: 'itemload',
handler: function(_, item) {
var this$1 = this;
var source = item.source;
var type = item.type;
var alt = item.alt;
this.setItem(item, '<span uk-spinner></span>');
if (!source) {
return;
}
var matches;
// Image
if (type === 'image' || source.match(/\.(jp(e)?g|png|gif|svg|webp)($|\?)/i)) {
uikitUtil.getImage(source).then(
function (img) { return this$1.setItem(item, ("<img width=\"" + (img.width) + "\" height=\"" + (img.height) + "\" src=\"" + source + "\" alt=\"" + (alt ? alt : '') + "\">")); },
function () { return this$1.setError(item); }
);
// Video
} else if (type === 'video' || source.match(/\.(mp4|webm|ogv)($|\?)/i)) {
var video = uikitUtil.$(("<video controls playsinline" + (item.poster ? (" poster=\"" + (item.poster) + "\"") : '') + " uk-video=\"" + (this.videoAutoplay) + "\"></video>"));
uikitUtil.attr(video, 'src', source);
uikitUtil.once(video, 'error loadedmetadata', function (type) {
if (type === 'error') {
this$1.setError(item);
} else {
uikitUtil.attr(video, {width: video.videoWidth, height: video.videoHeight});
this$1.setItem(item, video);
}
});
// Iframe
} else if (type === 'iframe' || source.match(/\.(html|php)($|\?)/i)) {
this.setItem(item, ("<iframe class=\"uk-lightbox-iframe\" src=\"" + source + "\" frameborder=\"0\" allowfullscreen></iframe>"));
// YouTube
} else if ((matches = source.match(/\/\/.*?youtube(-nocookie)?\.[a-z]+\/watch\?v=([^&\s]+)/) || source.match(/()youtu\.be\/(.*)/))) {
var id = matches[2];
var setIframe = function (width, height) {
if ( width === void 0 ) width = 640;
if ( height === void 0 ) height = 450;
return this$1.setItem(item, getIframe(("https://www.youtube" + (matches[1] || '') + ".com/embed/" + id), width, height, this$1.videoAutoplay));
};
uikitUtil.getImage(("https://img.youtube.com/vi/" + id + "/maxresdefault.jpg")).then(
function (ref) {
var width = ref.width;
var height = ref.height;
// YouTube default 404 thumb, fall back to low resolution
if (width === 120 && height === 90) {
uikitUtil.getImage(("https://im