forked from joomla/Component-Builder
10460 lines
272 KiB
JavaScript
10460 lines
272 KiB
JavaScript
/*! UIkit 3.0.0-beta.34 | http://www.getuikit.com | (c) 2014 - 2017 YOOtheme | MIT License */
|
|
|
|
(function (global, factory) {
|
|
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
|
|
typeof define === 'function' && define.amd ? define('uikit', factory) :
|
|
(global.UIkit = factory());
|
|
}(this, (function () { 'use strict';
|
|
|
|
/**
|
|
* Promises/A+ polyfill v1.1.4 (https://github.com/bramstein/promis)
|
|
*/
|
|
|
|
var RESOLVED = 0;
|
|
var REJECTED = 1;
|
|
var PENDING = 2;
|
|
|
|
var async = 'setImmediate' in window ? setImmediate : setTimeout;
|
|
|
|
function Promise$1(executor) {
|
|
|
|
this.state = PENDING;
|
|
this.value = undefined;
|
|
this.deferred = [];
|
|
|
|
var promise = this;
|
|
|
|
try {
|
|
executor(function (x) {
|
|
promise.resolve(x);
|
|
}, function (r) {
|
|
promise.reject(r);
|
|
});
|
|
} catch (e) {
|
|
promise.reject(e);
|
|
}
|
|
}
|
|
|
|
Promise$1.reject = function (r) {
|
|
return new Promise$1(function (resolve, reject) {
|
|
reject(r);
|
|
});
|
|
};
|
|
|
|
Promise$1.resolve = function (x) {
|
|
return new Promise$1(function (resolve, reject) {
|
|
resolve(x);
|
|
});
|
|
};
|
|
|
|
Promise$1.all = function all(iterable) {
|
|
return new Promise$1(function (resolve, reject) {
|
|
var count = 0, result = [];
|
|
|
|
if (iterable.length === 0) {
|
|
resolve(result);
|
|
}
|
|
|
|
function resolver(i) {
|
|
return function (x) {
|
|
result[i] = x;
|
|
count += 1;
|
|
|
|
if (count === iterable.length) {
|
|
resolve(result);
|
|
}
|
|
};
|
|
}
|
|
|
|
for (var i = 0; i < iterable.length; i += 1) {
|
|
Promise$1.resolve(iterable[i]).then(resolver(i), reject);
|
|
}
|
|
});
|
|
};
|
|
|
|
Promise$1.race = function race(iterable) {
|
|
return new Promise$1(function (resolve, reject) {
|
|
for (var i = 0; i < iterable.length; i += 1) {
|
|
Promise$1.resolve(iterable[i]).then(resolve, reject);
|
|
}
|
|
});
|
|
};
|
|
|
|
var p = Promise$1.prototype;
|
|
|
|
p.resolve = function resolve(x) {
|
|
var promise = this;
|
|
|
|
if (promise.state === PENDING) {
|
|
if (x === promise) {
|
|
throw new TypeError('Promise settled with itself.');
|
|
}
|
|
|
|
var called = false;
|
|
|
|
try {
|
|
var then = x && x.then;
|
|
|
|
if (x !== null && isObject(x) && isFunction(then)) {
|
|
then.call(x, function (x) {
|
|
if (!called) {
|
|
promise.resolve(x);
|
|
}
|
|
called = true;
|
|
|
|
}, function (r) {
|
|
if (!called) {
|
|
promise.reject(r);
|
|
}
|
|
called = true;
|
|
});
|
|
return;
|
|
}
|
|
} catch (e) {
|
|
if (!called) {
|
|
promise.reject(e);
|
|
}
|
|
return;
|
|
}
|
|
|
|
promise.state = RESOLVED;
|
|
promise.value = x;
|
|
promise.notify();
|
|
}
|
|
};
|
|
|
|
p.reject = function reject(reason) {
|
|
var promise = this;
|
|
|
|
if (promise.state === PENDING) {
|
|
if (reason === promise) {
|
|
throw new TypeError('Promise settled with itself.');
|
|
}
|
|
|
|
promise.state = REJECTED;
|
|
promise.value = reason;
|
|
promise.notify();
|
|
}
|
|
};
|
|
|
|
p.notify = function notify() {
|
|
var this$1 = this;
|
|
|
|
async(function () {
|
|
if (this$1.state !== PENDING) {
|
|
while (this$1.deferred.length) {
|
|
var deferred = this$1.deferred.shift(),
|
|
onResolved = deferred[0],
|
|
onRejected = deferred[1],
|
|
resolve = deferred[2],
|
|
reject = deferred[3];
|
|
|
|
try {
|
|
if (this$1.state === RESOLVED) {
|
|
if (isFunction(onResolved)) {
|
|
resolve(onResolved.call(undefined, this$1.value));
|
|
} else {
|
|
resolve(this$1.value);
|
|
}
|
|
} else if (this$1.state === REJECTED) {
|
|
if (isFunction(onRejected)) {
|
|
resolve(onRejected.call(undefined, this$1.value));
|
|
} else {
|
|
reject(this$1.value);
|
|
}
|
|
}
|
|
} catch (e) {
|
|
reject(e);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
};
|
|
|
|
p.then = function then(onResolved, onRejected) {
|
|
var this$1 = this;
|
|
|
|
return new Promise$1(function (resolve, reject) {
|
|
this$1.deferred.push([onResolved, onRejected, resolve, reject]);
|
|
this$1.notify();
|
|
});
|
|
};
|
|
|
|
p.catch = function (onRejected) {
|
|
return this.then(undefined, onRejected);
|
|
};
|
|
|
|
function bind(fn, context) {
|
|
return function (a) {
|
|
var l = arguments.length;
|
|
return l ? l > 1 ? fn.apply(context, arguments) : fn.call(context, a) : fn.call(context);
|
|
};
|
|
}
|
|
|
|
var hasOwnProperty = Object.prototype.hasOwnProperty;
|
|
|
|
function hasOwn(obj, key) {
|
|
return hasOwnProperty.call(obj, key);
|
|
}
|
|
|
|
var Promise = 'Promise' in window ? window.Promise : Promise$1;
|
|
|
|
var classifyRe = /(?:^|[-_\/])(\w)/g;
|
|
|
|
function classify(str) {
|
|
return str.replace(classifyRe, function (_, c) { return c ? c.toUpperCase() : ''; });
|
|
}
|
|
|
|
var hyphenateRe = /([a-z\d])([A-Z])/g;
|
|
|
|
function hyphenate(str) {
|
|
return str
|
|
.replace(hyphenateRe, '$1-$2')
|
|
.toLowerCase()
|
|
}
|
|
|
|
var camelizeRE = /-(\w)/g;
|
|
|
|
function camelize(str) {
|
|
return str.replace(camelizeRE, toUpper)
|
|
}
|
|
|
|
function toUpper(_, c) {
|
|
return c ? c.toUpperCase() : ''
|
|
}
|
|
|
|
function ucfirst(str) {
|
|
return str.length ? toUpper(null, str.charAt(0)) + str.slice(1) : '';
|
|
}
|
|
|
|
var strPrototype = String.prototype;
|
|
var startsWithFn = strPrototype.startsWith || function (search) { return this.lastIndexOf(search, 0) === 0; };
|
|
|
|
function startsWith(str, search) {
|
|
return startsWithFn.call(str, search);
|
|
}
|
|
|
|
var endsWithFn = strPrototype.endsWith || function (search) { return this.substr(-1 * search.length) === search; };
|
|
|
|
function endsWith(str, search) {
|
|
return endsWithFn.call(str, search);
|
|
}
|
|
|
|
var includesFn = function (search) { return ~this.indexOf(search); };
|
|
var includesStr = strPrototype.includes || includesFn;
|
|
var includesArray = Array.prototype.includes || includesFn;
|
|
|
|
function includes(obj, search) {
|
|
return obj && (isString(obj) ? includesStr : includesArray).call(obj, search);
|
|
}
|
|
|
|
var isArray = Array.isArray;
|
|
|
|
function isFunction(obj) {
|
|
return typeof obj === 'function';
|
|
}
|
|
|
|
function isObject(obj) {
|
|
return obj !== null && typeof obj === 'object';
|
|
}
|
|
|
|
function isPlainObject(obj) {
|
|
return isObject(obj) && Object.getPrototypeOf(obj) === Object.prototype;
|
|
}
|
|
|
|
function isWindow(obj) {
|
|
return isObject(obj) && obj === obj.window;
|
|
}
|
|
|
|
function isDocument(obj) {
|
|
return isObject(obj) && obj.nodeType === 9;
|
|
}
|
|
|
|
function isBoolean(value) {
|
|
return typeof value === 'boolean';
|
|
}
|
|
|
|
function isString(value) {
|
|
return typeof value === 'string';
|
|
}
|
|
|
|
function isNumber(value) {
|
|
return typeof value === 'number';
|
|
}
|
|
|
|
function isNumeric(value) {
|
|
return isNumber(value) || isString(value) && !isNaN(value - parseFloat(value));
|
|
}
|
|
|
|
function isUndefined(value) {
|
|
return value === void 0;
|
|
}
|
|
|
|
function toBoolean(value) {
|
|
return isBoolean(value)
|
|
? value
|
|
: value === 'true' || value === '1' || value === ''
|
|
? true
|
|
: value === 'false' || value === '0'
|
|
? false
|
|
: value;
|
|
}
|
|
|
|
function toNumber(value) {
|
|
var number = Number(value);
|
|
return !isNaN(number) ? number : false;
|
|
}
|
|
|
|
function toFloat(value) {
|
|
return parseFloat(value) || 0;
|
|
}
|
|
|
|
function toList(value) {
|
|
return isArray(value)
|
|
? value
|
|
: isString(value)
|
|
? value.split(',').map(function (value) { return isNumeric(value)
|
|
? toNumber(value)
|
|
: toBoolean(value.trim()); })
|
|
: [value];
|
|
}
|
|
|
|
var vars = {};
|
|
|
|
function toMedia(value) {
|
|
|
|
if (isString(value)) {
|
|
if (value[0] === '@') {
|
|
var name = "media-" + (value.substr(1));
|
|
value = vars[name] || (vars[name] = toFloat(getCssVar(name)));
|
|
} else if (isNaN(value)) {
|
|
return value;
|
|
}
|
|
}
|
|
|
|
return value && !isNaN(value) ? ("(min-width: " + value + "px)") : false;
|
|
}
|
|
|
|
function coerce(type, value, context) {
|
|
|
|
if (type === Boolean) {
|
|
return toBoolean(value);
|
|
} else if (type === Number) {
|
|
return toNumber(value);
|
|
} else if (type === 'query') {
|
|
return query(value, context);
|
|
} else if (type === 'list') {
|
|
return toList(value);
|
|
} else if (type === 'media') {
|
|
return toMedia(value);
|
|
}
|
|
|
|
return type ? type(value) : value;
|
|
}
|
|
|
|
function toMs(time) {
|
|
return !time
|
|
? 0
|
|
: endsWith(time, 'ms')
|
|
? toFloat(time)
|
|
: toFloat(time) * 1000;
|
|
}
|
|
|
|
function swap(value, a, b) {
|
|
return value.replace(new RegExp((a + "|" + b), 'mg'), function (match) {
|
|
return match === a ? b : a
|
|
});
|
|
}
|
|
|
|
var assign = Object.assign || function (target) {
|
|
var args = [], len = arguments.length - 1;
|
|
while ( len-- > 0 ) args[ len ] = arguments[ len + 1 ];
|
|
|
|
target = Object(target);
|
|
for (var i = 0; i < args.length; i++) {
|
|
var source = args[i];
|
|
if (source !== null) {
|
|
for (var key in source) {
|
|
if (hasOwn(source, key)) {
|
|
target[key] = source[key];
|
|
}
|
|
}
|
|
}
|
|
}
|
|
return target;
|
|
};
|
|
|
|
function each(obj, cb) {
|
|
for (var key in obj) {
|
|
if (cb.call(obj[key], obj[key], key) === false) {
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
function clamp(number, min, max) {
|
|
if ( min === void 0 ) min = 0;
|
|
if ( max === void 0 ) max = 1;
|
|
|
|
return Math.min(Math.max(number, min), max);
|
|
}
|
|
|
|
function noop() {}
|
|
|
|
function intersectRect(r1, r2) {
|
|
return r1.left <= r2.right &&
|
|
r2.left <= r1.right &&
|
|
r1.top <= r2.bottom &&
|
|
r2.top <= r1.bottom;
|
|
}
|
|
|
|
function pointInRect(point, rect) {
|
|
return intersectRect({top: point.y, bottom: point.y, left: point.x, right: point.x}, rect)
|
|
}
|
|
|
|
function ajax(url, options) {
|
|
return new Promise(function (resolve, reject) {
|
|
|
|
var env = assign({
|
|
data: null,
|
|
method: 'GET',
|
|
headers: {},
|
|
xhr: new XMLHttpRequest(),
|
|
beforeSend: noop,
|
|
responseType: ''
|
|
}, options);
|
|
|
|
var xhr = env.xhr;
|
|
|
|
env.beforeSend(env);
|
|
|
|
for (var prop in env) {
|
|
if (prop in xhr) {
|
|
try {
|
|
|
|
xhr[prop] = env[prop];
|
|
|
|
} catch (e) {}
|
|
}
|
|
}
|
|
|
|
xhr.open(env.method.toUpperCase(), url);
|
|
|
|
for (var header in env.headers) {
|
|
xhr.setRequestHeader(header, env.headers[header]);
|
|
}
|
|
|
|
on(xhr, 'load', function () {
|
|
|
|
if (xhr.status === 0 || xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
|
|
resolve(xhr);
|
|
} else {
|
|
reject(assign(Error(xhr.statusText), {
|
|
xhr: xhr,
|
|
status: xhr.status
|
|
}));
|
|
}
|
|
|
|
});
|
|
|
|
on(xhr, 'error', function () { return reject(assign(Error('Network Error'), {xhr: xhr})); });
|
|
on(xhr, 'timeout', function () { return reject(assign(Error('Network Timeout'), {xhr: xhr})); });
|
|
|
|
xhr.send(env.data);
|
|
});
|
|
}
|
|
|
|
var arrayProto = Array.prototype;
|
|
|
|
function $$1(selector, context) {
|
|
return !isString(selector)
|
|
? toNode(selector)
|
|
: isHtml(selector)
|
|
? toNode(fragment(selector))
|
|
: find(selector, context);
|
|
}
|
|
|
|
function $$(selector, context) {
|
|
return !isString(selector)
|
|
? toNodes(selector)
|
|
: isHtml(selector)
|
|
? toNodes(fragment(selector))
|
|
: findAll(selector, context);
|
|
}
|
|
|
|
function isHtml(str) {
|
|
return str[0] === '<' || str.match(/^\s*</);
|
|
}
|
|
|
|
function query(selector, context) {
|
|
return $$1(selector, isContextSelector(selector) ? context : doc);
|
|
}
|
|
|
|
function queryAll(selector, context) {
|
|
return $$(selector, isContextSelector(selector) ? context : doc);
|
|
}
|
|
|
|
function find(selector, context) {
|
|
return toNode(_query(selector, context, 'querySelector'));
|
|
}
|
|
|
|
function findAll(selector, context) {
|
|
return toNodes(_query(selector, context, 'querySelectorAll'));
|
|
}
|
|
|
|
function _query(selector, context, queryFn) {
|
|
if ( context === void 0 ) context = doc;
|
|
|
|
|
|
if (!selector || !isString(selector)) {
|
|
return null;
|
|
}
|
|
|
|
selector = selector.replace(contextSanitizeRe, '$1 *');
|
|
|
|
var removes;
|
|
|
|
if (isContextSelector(selector)) {
|
|
|
|
removes = [];
|
|
|
|
selector = selector.split(',').map(function (selector, i) {
|
|
|
|
var ctx = context;
|
|
|
|
selector = selector.trim();
|
|
|
|
if (selector[0] === '!') {
|
|
|
|
var selectors = selector.substr(1).trim().split(' ');
|
|
ctx = closest(context.parentNode, selectors[0]);
|
|
selector = selectors.slice(1).join(' ');
|
|
|
|
}
|
|
|
|
if (!ctx) {
|
|
return null;
|
|
}
|
|
|
|
if (!ctx.id) {
|
|
ctx.id = "uk-" + (Date.now()) + i;
|
|
removes.push(function () { return removeAttr(ctx, 'id'); });
|
|
}
|
|
|
|
return ("#" + (ctx.id) + " " + selector);
|
|
|
|
}).filter(Boolean).join(',');
|
|
|
|
context = doc;
|
|
|
|
}
|
|
|
|
try {
|
|
|
|
return context[queryFn](selector);
|
|
|
|
} catch (e) {
|
|
|
|
return null;
|
|
|
|
} finally {
|
|
|
|
removes && removes.forEach(function (remove) { return remove(); });
|
|
|
|
}
|
|
|
|
}
|
|
|
|
function filter(element, selector) {
|
|
return $$(element).filter(function (element) { return matches(element, selector); });
|
|
}
|
|
|
|
function within(element, selector) {
|
|
return !isString(selector)
|
|
? element === selector || toNode(selector).contains(toNode(element))
|
|
: matches(element, selector) || closest(element, selector);
|
|
}
|
|
|
|
var contextSelectorRe = /(^|,)\s*[!>+~]/;
|
|
var contextSanitizeRe = /([!>+~])(?=\s+[!>+~]|\s*$)/g;
|
|
|
|
function isContextSelector(selector) {
|
|
return isString(selector) && selector.match(contextSelectorRe);
|
|
}
|
|
|
|
var elProto = Element.prototype;
|
|
var matchesFn = elProto.matches || elProto.msMatchesSelector;
|
|
|
|
function matches(element, selector) {
|
|
return toNodes(element).some(function (element) { return matchesFn.call(element, selector); });
|
|
}
|
|
|
|
var closestFn = elProto.closest || function (selector) {
|
|
var ancestor = this;
|
|
|
|
do {
|
|
|
|
if (matches(ancestor, selector)) {
|
|
return ancestor;
|
|
}
|
|
|
|
ancestor = ancestor.parentNode;
|
|
|
|
} while (ancestor && ancestor.nodeType === 1);
|
|
};
|
|
|
|
function closest(element, selector) {
|
|
|
|
if (startsWith(selector, '>')) {
|
|
selector = selector.slice(1);
|
|
}
|
|
|
|
return isNode(element)
|
|
? element.parentNode && closestFn.call(element, selector)
|
|
: toNodes(element).map(function (element) { return element.parentNode && closestFn.call(element, selector); }).filter(Boolean);
|
|
}
|
|
|
|
function parents(element, selector) {
|
|
var elements = [], parent = toNode(element).parentNode;
|
|
|
|
while (parent && parent.nodeType === 1) {
|
|
|
|
if (matches(parent, selector)) {
|
|
elements.push(parent);
|
|
}
|
|
|
|
parent = parent.parentNode;
|
|
}
|
|
|
|
return elements;
|
|
}
|
|
|
|
function isJQuery(obj) {
|
|
return isObject(obj) && !!obj.jquery;
|
|
}
|
|
|
|
function isNode(element) {
|
|
return element instanceof Node || isObject(element) && element.nodeType === 1;
|
|
}
|
|
|
|
function isNodeCollection(element) {
|
|
return element instanceof NodeList || element instanceof HTMLCollection;
|
|
}
|
|
|
|
function toNode(element) {
|
|
return isNode(element) || isWindow(element) || isDocument(element)
|
|
? element
|
|
: isNodeCollection(element) || isJQuery(element)
|
|
? element[0]
|
|
: isArray(element)
|
|
? toNode(element[0])
|
|
: null;
|
|
}
|
|
|
|
function toNodes(element) {
|
|
return isNode(element)
|
|
? [element]
|
|
: isNodeCollection(element)
|
|
? arrayProto.slice.call(element)
|
|
: isArray(element)
|
|
? element.map(toNode).filter(Boolean)
|
|
: isJQuery(element)
|
|
? element.toArray()
|
|
: [];
|
|
}
|
|
|
|
function attr(element, name, value) {
|
|
|
|
if (isObject(name)) {
|
|
for (var key in name) {
|
|
attr(element, key, name[key]);
|
|
}
|
|
return;
|
|
}
|
|
|
|
if (isUndefined(value)) {
|
|
element = toNode(element);
|
|
return element && element.getAttribute(name);
|
|
} else {
|
|
toNodes(element).forEach(function (element) {
|
|
|
|
if (isFunction(value)) {
|
|
value = value.call(element, attr(element, name));
|
|
}
|
|
|
|
if (value === null) {
|
|
removeAttr(element, name);
|
|
} else {
|
|
element.setAttribute(name, value);
|
|
}
|
|
});
|
|
}
|
|
|
|
}
|
|
|
|
function hasAttr(element, name) {
|
|
return toNodes(element).some(function (element) { return element.hasAttribute(name); });
|
|
}
|
|
|
|
function removeAttr(element, name) {
|
|
element = toNodes(element);
|
|
name.split(' ').forEach(function (name) { return element.forEach(function (element) { return element.removeAttribute(name); }
|
|
); }
|
|
);
|
|
}
|
|
|
|
function filterAttr(element, attribute, pattern, replacement) {
|
|
attr(element, attribute, function (value) { return value ? value.replace(pattern, replacement) : value; });
|
|
}
|
|
|
|
function data(element, attribute) {
|
|
for (var i = 0, attrs = [attribute, ("data-" + attribute)]; i < attrs.length; i++) {
|
|
if (hasAttr(element, attrs[i])) {
|
|
return attr(element, attrs[i]);
|
|
}
|
|
}
|
|
}
|
|
|
|
var win = window;
|
|
var doc = document;
|
|
var docEl = doc.documentElement;
|
|
|
|
var isRtl = attr(docEl, 'dir') === 'rtl';
|
|
|
|
function isReady() {
|
|
return doc.readyState === 'complete' || doc.readyState !== 'loading' && !docEl.doScroll;
|
|
}
|
|
|
|
function ready(fn) {
|
|
|
|
if (isReady()) {
|
|
fn();
|
|
return;
|
|
}
|
|
|
|
var handle = function () {
|
|
unbind1();
|
|
unbind2();
|
|
fn();
|
|
},
|
|
unbind1 = on(doc, 'DOMContentLoaded', handle),
|
|
unbind2 = on(win, 'load', handle);
|
|
}
|
|
|
|
var transitioncancel = 'transitioncanceled';
|
|
|
|
function transition(element, props, duration, transition) {
|
|
if ( duration === void 0 ) duration = 400;
|
|
if ( transition === void 0 ) transition = 'linear';
|
|
|
|
|
|
return Promise.all(toNodes(element).map(function (element) { return new Promise(function (resolve, reject) {
|
|
|
|
for (var name in props) {
|
|
var value = css(element, name);
|
|
if (value === '') {
|
|
css(element, name, value);
|
|
}
|
|
}
|
|
|
|
var timer = setTimeout(function () { return trigger(element, transitionend); }, duration);
|
|
|
|
once(element, (transitionend + " " + transitioncancel), function (ref) {
|
|
var type = ref.type;
|
|
|
|
clearTimeout(timer);
|
|
removeClass(element, 'uk-transition');
|
|
css(element, 'transition', '');
|
|
type === transitioncancel ? reject() : resolve();
|
|
}, false, function (ref) {
|
|
var target = ref.target;
|
|
|
|
return element === target;
|
|
});
|
|
|
|
addClass(element, 'uk-transition');
|
|
css(element, assign({transition: ("all " + duration + "ms " + transition)}, props));
|
|
|
|
}); }
|
|
));
|
|
|
|
}
|
|
|
|
var Transition = {
|
|
|
|
start: transition,
|
|
|
|
stop: function stop(element) {
|
|
trigger(element, transitionend);
|
|
return Promise.resolve();
|
|
},
|
|
|
|
cancel: function cancel(element) {
|
|
trigger(element, transitioncancel);
|
|
},
|
|
|
|
inProgress: function inProgress(element) {
|
|
return hasClass(element, 'uk-transition');
|
|
}
|
|
|
|
};
|
|
|
|
var animationcancel = 'animationcancel';
|
|
var animationPrefix = 'uk-animation-';
|
|
var clsCancelAnimation = 'uk-cancel-animation';
|
|
|
|
function animate(element, animation, duration, origin, out) {
|
|
var arguments$1 = arguments;
|
|
if ( duration === void 0 ) duration = 200;
|
|
|
|
|
|
return Promise.all(toNodes(element).map(function (element) { return new Promise(function (resolve, reject) {
|
|
|
|
if (hasClass(element, clsCancelAnimation)) {
|
|
requestAnimationFrame(function () { return Promise.resolve().then(function () { return animate.apply(null, arguments$1).then(resolve, reject); }
|
|
); }
|
|
);
|
|
return;
|
|
}
|
|
|
|
var cls = animation + " " + animationPrefix + (out ? 'leave' : 'enter');
|
|
|
|
if (startsWith(animation, animationPrefix)) {
|
|
|
|
if (origin) {
|
|
cls += " " + animationPrefix + origin;
|
|
}
|
|
|
|
if (out) {
|
|
cls += " " + animationPrefix + "reverse";
|
|
}
|
|
|
|
}
|
|
|
|
reset();
|
|
|
|
once(element, ((animationend || 'animationend') + " " + animationcancel), function (ref) {
|
|
var type = ref.type;
|
|
|
|
|
|
var hasReset = false;
|
|
|
|
if (type === animationcancel) {
|
|
reject();
|
|
reset();
|
|
} else {
|
|
resolve();
|
|
Promise.resolve().then(function () {
|
|
hasReset = true;
|
|
reset();
|
|
});
|
|
}
|
|
|
|
requestAnimationFrame(function () {
|
|
if (!hasReset) {
|
|
addClass(element, clsCancelAnimation);
|
|
|
|
requestAnimationFrame(function () { return removeClass(element, clsCancelAnimation); });
|
|
}
|
|
});
|
|
|
|
}, false, function (ref) {
|
|
var target = ref.target;
|
|
|
|
return element === target;
|
|
});
|
|
|
|
css(element, 'animationDuration', (duration + "ms"));
|
|
addClass(element, cls);
|
|
|
|
if (!animationend) {
|
|
requestAnimationFrame(function () { return Animation.cancel(element); });
|
|
}
|
|
|
|
function reset() {
|
|
css(element, 'animationDuration', '');
|
|
removeClasses(element, (animationPrefix + "\\S*"));
|
|
}
|
|
|
|
}); }
|
|
));
|
|
|
|
}
|
|
|
|
var inProgress = new RegExp((animationPrefix + "(enter|leave)"));
|
|
var Animation = {
|
|
|
|
in: function in$1(element, animation, duration, origin) {
|
|
return animate(element, animation, duration, origin, false);
|
|
},
|
|
|
|
out: function out(element, animation, duration, origin) {
|
|
return animate(element, animation, duration, origin, true);
|
|
},
|
|
|
|
inProgress: function inProgress$1(element) {
|
|
return inProgress.test(attr(element, 'class'));
|
|
},
|
|
|
|
cancel: function cancel(element) {
|
|
trigger(element, animationcancel);
|
|
}
|
|
|
|
};
|
|
|
|
function isInView(element, top, left) {
|
|
if ( top === void 0 ) top = 0;
|
|
if ( left === void 0 ) left = 0;
|
|
|
|
return intersectRect(toNode(element).getBoundingClientRect(), {
|
|
top: top,
|
|
left: left,
|
|
bottom: top + height(win),
|
|
right: left + width(win)
|
|
});
|
|
}
|
|
|
|
function scrolledOver(element) {
|
|
|
|
element = toNode(element);
|
|
|
|
var elHeight = element.offsetHeight,
|
|
top = positionTop(element),
|
|
vp = height(win),
|
|
vh = vp + Math.min(0, top - vp),
|
|
diff = Math.max(0, vp - (height(doc) - (top + elHeight)));
|
|
|
|
return clamp(((vh + win.pageYOffset - top) / ((vh + (elHeight - (diff < vp ? diff : 0)) ) / 100)) / 100);
|
|
}
|
|
|
|
function positionTop(element) {
|
|
var top = 0;
|
|
|
|
do {
|
|
|
|
top += element.offsetTop;
|
|
|
|
} while (element = element.offsetParent);
|
|
|
|
return top;
|
|
}
|
|
|
|
function getIndex(i, elements, current) {
|
|
if ( current === void 0 ) current = 0;
|
|
|
|
|
|
elements = toNodes(elements);
|
|
|
|
var length = elements.length;
|
|
|
|
i = (isNumeric(i)
|
|
? toNumber(i)
|
|
: i === 'next'
|
|
? current + 1
|
|
: i === 'previous'
|
|
? current - 1
|
|
: index(elements, i)
|
|
) % length;
|
|
|
|
return i < 0 ? i + length : i;
|
|
}
|
|
|
|
var voidElements = {
|
|
area: true,
|
|
base: true,
|
|
br: true,
|
|
col: true,
|
|
embed: true,
|
|
hr: true,
|
|
img: true,
|
|
input: true,
|
|
keygen: true,
|
|
link: true,
|
|
menuitem: true,
|
|
meta: true,
|
|
param: true,
|
|
source: true,
|
|
track: true,
|
|
wbr: true
|
|
};
|
|
function isVoidElement(element) {
|
|
return voidElements[toNode(element).tagName.toLowerCase()];
|
|
}
|
|
|
|
var Dimensions = {
|
|
|
|
ratio: function ratio(dimensions, prop, value) {
|
|
|
|
var aProp = prop === 'width' ? 'height' : 'width';
|
|
|
|
return ( obj = {}, obj[aProp] = Math.round(value * dimensions[aProp] / dimensions[prop]), obj[prop] = value, obj );
|
|
var obj;
|
|
},
|
|
|
|
contain: function contain(dimensions, maxDimensions) {
|
|
var this$1 = this;
|
|
|
|
dimensions = assign({}, dimensions);
|
|
|
|
each(dimensions, function (_, prop) { return dimensions = dimensions[prop] > maxDimensions[prop]
|
|
? this$1.ratio(dimensions, prop, maxDimensions[prop])
|
|
: dimensions; }
|
|
);
|
|
|
|
return dimensions;
|
|
},
|
|
|
|
cover: function cover(dimensions, maxDimensions) {
|
|
var this$1 = this;
|
|
|
|
dimensions = this.contain(dimensions, maxDimensions);
|
|
|
|
each(dimensions, function (_, prop) { return dimensions = dimensions[prop] < maxDimensions[prop]
|
|
? this$1.ratio(dimensions, prop, maxDimensions[prop])
|
|
: dimensions; }
|
|
);
|
|
|
|
return dimensions;
|
|
}
|
|
|
|
};
|
|
|
|
function preventClick() {
|
|
|
|
var timer = setTimeout(function () { return trigger(doc, 'click'); }, 0);
|
|
|
|
once(doc, 'click', function (e) {
|
|
e.preventDefault();
|
|
e.stopImmediatePropagation();
|
|
|
|
clearTimeout(timer);
|
|
}, true);
|
|
|
|
}
|
|
|
|
function isVisible(element) {
|
|
return toNodes(element).some(function (element) { return element.offsetHeight; });
|
|
}
|
|
|
|
var selInput = 'input,select,textarea,button';
|
|
function isInput(element) {
|
|
return toNodes(element).some(function (element) { return matches(element, selInput); });
|
|
}
|
|
|
|
function empty(element) {
|
|
element = toNode(element);
|
|
element.innerHTML = '';
|
|
return element;
|
|
}
|
|
|
|
function html(parent, html) {
|
|
parent = toNode(parent);
|
|
return isUndefined(html)
|
|
? parent.innerHTML
|
|
: append(parent.hasChildNodes() ? empty(parent) : parent, html);
|
|
}
|
|
|
|
function prepend(parent, element) {
|
|
|
|
parent = toNode(parent);
|
|
|
|
if (!parent.hasChildNodes()) {
|
|
return append(parent, element);
|
|
} else {
|
|
return insertNodes(element, function (element) { return parent.insertBefore(element, parent.firstChild); });
|
|
}
|
|
}
|
|
|
|
function append(parent, element) {
|
|
parent = toNode(parent);
|
|
return insertNodes(element, function (element) { return parent.appendChild(element); });
|
|
}
|
|
|
|
function before(ref, element) {
|
|
ref = toNode(ref);
|
|
return insertNodes(element, function (element) { return ref.parentNode.insertBefore(element, ref); });
|
|
}
|
|
|
|
function after(ref, element) {
|
|
ref = toNode(ref);
|
|
return insertNodes(element, function (element) { return ref.nextSibling
|
|
? before(ref.nextSibling, element)
|
|
: append(ref.parentNode,element); }
|
|
);
|
|
}
|
|
|
|
function insertNodes(element, fn) {
|
|
element = isString(element) ? fragment(element) : element;
|
|
return 'length' in element ? toNodes(element).map(fn) : fn(element);
|
|
}
|
|
|
|
function remove(element) {
|
|
toNodes(element).map(function (element) { return element.parentNode && element.parentNode.removeChild(element); });
|
|
}
|
|
|
|
function wrapAll(element, structure) {
|
|
|
|
structure = toNode(before(element, structure));
|
|
|
|
while (structure.firstChild) {
|
|
structure = structure.firstChild;
|
|
}
|
|
|
|
append(structure, element);
|
|
|
|
return structure;
|
|
}
|
|
|
|
function wrapInner(element, structure) {
|
|
return toNodes(toNodes(element).map(function (element) { return element.hasChildNodes ? wrapAll(toNodes(element.childNodes), structure) : append(element, structure); }
|
|
));
|
|
}
|
|
|
|
function unwrap(element) {
|
|
toNodes(element)
|
|
.map(function (element) { return element.parentNode; })
|
|
.filter(function (value, index, self) { return self.indexOf(value) === index; })
|
|
.forEach(function (parent) {
|
|
before(parent, parent.childNodes);
|
|
remove(parent);
|
|
});
|
|
}
|
|
|
|
var fragmentRE = /^\s*<(\w+|!)[^>]*>/;
|
|
var singleTagRE = /^<(\w+)\s*\/?>(?:<\/\1>)?$/;
|
|
|
|
function fragment(html) {
|
|
|
|
var matches;
|
|
|
|
if (matches = singleTagRE.exec(html)) {
|
|
return doc.createElement(matches[1]);
|
|
}
|
|
|
|
var container = doc.createElement('div');
|
|
if (fragmentRE.test(html)) {
|
|
container.insertAdjacentHTML('beforeend', html.trim());
|
|
} else {
|
|
container.textContent = html;
|
|
}
|
|
|
|
return container.childNodes.length > 1 ? toNodes(container.childNodes) : container.firstChild;
|
|
|
|
}
|
|
|
|
function index(element, ref) {
|
|
return ref
|
|
? toNodes(element).indexOf(toNode(ref))
|
|
: toNodes((element = toNode(element)) && element.parentNode.children).indexOf(element);
|
|
}
|
|
|
|
var cssNumber = {
|
|
'animation-iteration-count': true,
|
|
'column-count': true,
|
|
'fill-opacity': true,
|
|
'flex-grow': true,
|
|
'flex-shrink': true,
|
|
'font-weight': true,
|
|
'line-height': true,
|
|
'opacity': true,
|
|
'order': true,
|
|
'orphans': true,
|
|
'widows': true,
|
|
'z-index': true,
|
|
'zoom': true
|
|
};
|
|
|
|
function css(element, property, value) {
|
|
|
|
return toNodes(element).map(function (element) {
|
|
|
|
if (isString(property)) {
|
|
|
|
property = propName(property);
|
|
|
|
if (isUndefined(value)) {
|
|
return getStyle(element, property);
|
|
} else if (!value && value !== 0) {
|
|
element.style.removeProperty(property);
|
|
} else {
|
|
element.style[property] = isNumeric(value) && !cssNumber[property] ? (value + "px") : value;
|
|
}
|
|
|
|
} else if (isArray(property)) {
|
|
|
|
var styles = getStyles(element);
|
|
|
|
return property.reduce(function (props, property) {
|
|
props[property] = propName(styles[property]);
|
|
return props;
|
|
}, {});
|
|
|
|
} else if (isObject(property)) {
|
|
each(property, function (value, property) { return css(element, property, value); });
|
|
}
|
|
|
|
return element;
|
|
|
|
})[0];
|
|
|
|
}
|
|
|
|
function getStyles(element, pseudoElt) {
|
|
element = toNode(element);
|
|
return element.ownerDocument.defaultView.getComputedStyle(element, pseudoElt);
|
|
}
|
|
|
|
function getStyle(element, property, pseudoElt) {
|
|
return getStyles(element, pseudoElt)[property];
|
|
}
|
|
|
|
var vars$1 = {};
|
|
|
|
function getCssVar(name) {
|
|
|
|
if (!(name in vars$1)) {
|
|
|
|
/* usage in css: .var-name:before { content:"xyz" } */
|
|
|
|
var element = append(docEl, doc.createElement('div'));
|
|
|
|
addClass(element, ("var-" + name));
|
|
|
|
try {
|
|
|
|
vars$1[name] = getStyle(element, 'content', ':before').replace(/^["'](.*)["']$/, '$1');
|
|
vars$1[name] = JSON.parse(vars$1[name]);
|
|
|
|
} catch (e) {}
|
|
|
|
docEl.removeChild(element);
|
|
|
|
}
|
|
|
|
return vars$1[name];
|
|
|
|
}
|
|
|
|
var cssProps = {};
|
|
|
|
function propName(name) {
|
|
|
|
var ret = cssProps[name];
|
|
if (!ret) {
|
|
ret = cssProps[name] = vendorPropName(name) || name;
|
|
}
|
|
return ret;
|
|
}
|
|
|
|
var cssPrefixes = ['webkit', 'moz', 'ms'];
|
|
var style = doc.createElement('div').style;
|
|
|
|
function vendorPropName(name) {
|
|
|
|
name = hyphenate(name);
|
|
|
|
if (name in style) {
|
|
return name;
|
|
}
|
|
|
|
var i = cssPrefixes.length, prefixedName;
|
|
|
|
while (i--) {
|
|
prefixedName = "-" + (cssPrefixes[i]) + name;
|
|
if (prefixedName in style) {
|
|
return prefixedName;
|
|
}
|
|
}
|
|
}
|
|
|
|
var supportsClassList;
|
|
var supportsMultiple;
|
|
var supportsForce;
|
|
|
|
function addClass(element) {
|
|
var args = [], len = arguments.length - 1;
|
|
while ( len-- > 0 ) args[ len ] = arguments[ len + 1 ];
|
|
|
|
apply(element, args, 'add');
|
|
}
|
|
|
|
function removeClass(element) {
|
|
var args = [], len = arguments.length - 1;
|
|
while ( len-- > 0 ) args[ len ] = arguments[ len + 1 ];
|
|
|
|
apply(element, args, 'remove');
|
|
}
|
|
|
|
function removeClasses(element, cls) {
|
|
filterAttr(element, 'class', new RegExp(("(^|\\s)" + cls + "(?!\\S)"), 'g'), '');
|
|
}
|
|
|
|
function replaceClass(element) {
|
|
var args = [], len = arguments.length - 1;
|
|
while ( len-- > 0 ) args[ len ] = arguments[ len + 1 ];
|
|
|
|
args[0] && removeClass(element, args[0]);
|
|
args[1] && addClass(element, args[1]);
|
|
}
|
|
|
|
function hasClass(element, cls) {
|
|
return supportsClassList && toNodes(element).some(function (element) { return element.classList.contains(cls); });
|
|
}
|
|
|
|
function toggleClass(element) {
|
|
var args = [], len = arguments.length - 1;
|
|
while ( len-- > 0 ) args[ len ] = arguments[ len + 1 ];
|
|
|
|
|
|
if (!supportsClassList || !args.length) {
|
|
return;
|
|
}
|
|
|
|
args = getArgs(args);
|
|
|
|
var force = !isString(args[args.length - 1]) ? args.pop() : undefined;
|
|
|
|
toNodes(element).forEach(function (ref) {
|
|
var classList = ref.classList;
|
|
|
|
for (var i = 0; i < args.length; i++) {
|
|
supportsForce
|
|
? classList.toggle(args[i], force)
|
|
: (classList[(!isUndefined(force) ? force : !classList.contains(args[i])) ? 'add' : 'remove'](args[i]));
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
function apply(element, args, fn) {
|
|
args = getArgs(args).filter(function (arg) { return arg; });
|
|
|
|
supportsClassList && args.length && toNodes(element).forEach(function (ref) {
|
|
var classList = ref.classList;
|
|
|
|
supportsMultiple
|
|
? classList[fn].apply(classList, args)
|
|
: args.forEach(function (cls) { return classList[fn](cls); });
|
|
});
|
|
}
|
|
|
|
function getArgs(args) {
|
|
return args.reduce(function (args, arg) {
|
|
args.push.apply(args, isString(arg) && includes(arg, ' ') ? arg.trim().split(' ') : [arg]);
|
|
return args;
|
|
}, []);
|
|
}
|
|
|
|
(function () {
|
|
|
|
var list = doc.createElement('_').classList;
|
|
if (list) {
|
|
list.add('a', 'b');
|
|
list.toggle('c', false);
|
|
supportsMultiple = list.contains('b');
|
|
supportsForce = !list.contains('c');
|
|
supportsClassList = true;
|
|
}
|
|
list = null;
|
|
|
|
})();
|
|
|
|
var Observer = win.MutationObserver || win.WebKitMutationObserver;
|
|
var requestAnimationFrame = win.requestAnimationFrame || (function (fn) { return setTimeout(fn, 1000 / 60); });
|
|
|
|
var hasTouchEvents = 'ontouchstart' in win;
|
|
var hasPointerEvents = win.PointerEvent;
|
|
var hasTouch = 'ontouchstart' in win
|
|
|| win.DocumentTouch && doc instanceof DocumentTouch
|
|
|| navigator.msPointerEnabled && navigator.msMaxTouchPoints // IE 10
|
|
|| navigator.pointerEnabled && navigator.maxTouchPoints; // IE >=11
|
|
|
|
var pointerDown = !hasTouch ? 'mousedown' : ("mousedown " + (hasTouchEvents ? 'touchstart' : 'pointerdown'));
|
|
var pointerMove = !hasTouch ? 'mousemove' : ("mousemove " + (hasTouchEvents ? 'touchmove' : 'pointermove'));
|
|
var pointerUp = !hasTouch ? 'mouseup' : ("mouseup " + (hasTouchEvents ? 'touchend' : 'pointerup'));
|
|
var pointerEnter = hasTouch && hasPointerEvents ? 'pointerenter' : 'mouseenter';
|
|
var pointerLeave = hasTouch && hasPointerEvents ? 'pointerleave' : 'mouseleave';
|
|
|
|
var transitionend = prefix('transition', 'transition-end');
|
|
var animationstart = prefix('animation', 'animation-start');
|
|
var animationend = prefix('animation', 'animation-end');
|
|
|
|
function getImage(src) {
|
|
|
|
return new Promise(function (resolve, reject) {
|
|
var img = new Image();
|
|
|
|
img.onerror = reject;
|
|
img.onload = function () { return resolve(img); };
|
|
|
|
img.src = src;
|
|
});
|
|
|
|
}
|
|
|
|
function prefix(name, event) {
|
|
|
|
var ucase = classify(name),
|
|
lowered = classify(event).toLowerCase(),
|
|
classified = classify(event),
|
|
element = doc.body || docEl,
|
|
names = ( obj = {}, obj[name] = lowered, obj[("Webkit" + ucase)] = ("webkit" + classified), obj[("Moz" + ucase)] = lowered, obj[("o" + ucase)] = ("o" + classified + " o" + lowered), obj );
|
|
var obj;
|
|
|
|
for (name in names) {
|
|
if (element.style[name] !== undefined) {
|
|
return names[name];
|
|
}
|
|
}
|
|
}
|
|
|
|
function on() {
|
|
var args = [], len = arguments.length;
|
|
while ( len-- ) args[ len ] = arguments[ len ];
|
|
|
|
|
|
var ref = getArgs$1(args);
|
|
var target = ref[0];
|
|
var type = ref[1];
|
|
var selector = ref[2];
|
|
var listener = ref[3];
|
|
var useCapture = ref[4];
|
|
|
|
target = toEventTarget(target);
|
|
|
|
if (selector) {
|
|
listener = delegate(target, selector, listener);
|
|
}
|
|
|
|
if (listener.length > 1) {
|
|
listener = detail(listener);
|
|
}
|
|
|
|
type.split(' ').forEach(function (type) { return target.addEventListener(type, listener, useCapture); });
|
|
return function () { return off(target, type, listener, useCapture); };
|
|
}
|
|
|
|
function off(target, type, listener, useCapture) {
|
|
if ( useCapture === void 0 ) useCapture = false;
|
|
|
|
type.split(' ').forEach(function (type) { return toEventTarget(target).removeEventListener(type, listener, useCapture); });
|
|
}
|
|
|
|
function once() {
|
|
var args = [], len = arguments.length;
|
|
while ( len-- ) args[ len ] = arguments[ len ];
|
|
|
|
|
|
var ref = getArgs$1(args);
|
|
var element = ref[0];
|
|
var type = ref[1];
|
|
var selector = ref[2];
|
|
var listener = ref[3];
|
|
var useCapture = ref[4];
|
|
var condition = ref[5];
|
|
var off = on(element, type, selector, function (e) {
|
|
var result = !condition || condition(e);
|
|
if (result) {
|
|
off();
|
|
listener(e, result);
|
|
}
|
|
}, useCapture);
|
|
|
|
return off;
|
|
}
|
|
|
|
function trigger(target, event, detail) {
|
|
return toEventTargets(target).reduce(function (notCanceled, target) { return notCanceled && target.dispatchEvent(createEvent(event, true, true, detail)); }
|
|
, true);
|
|
}
|
|
|
|
function createEvent(e, bubbles, cancelable, detail) {
|
|
if ( bubbles === void 0 ) bubbles = true;
|
|
if ( cancelable === void 0 ) cancelable = false;
|
|
|
|
if (isString(e)) {
|
|
var event = doc.createEvent('CustomEvent');
|
|
event.initCustomEvent(e, bubbles, cancelable, detail);
|
|
e = event;
|
|
}
|
|
|
|
return e;
|
|
}
|
|
|
|
function getArgs$1(args) {
|
|
|
|
if (isString(args[0])) {
|
|
args[0] = $$1(args[0]);
|
|
}
|
|
|
|
if (isFunction(args[2])) {
|
|
args.splice(2, 0, false);
|
|
}
|
|
return args;
|
|
}
|
|
|
|
function delegate(element, selector, listener) {
|
|
var this$1 = this;
|
|
|
|
return function (e) {
|
|
|
|
var target = e.target,
|
|
current = selector[0] === '>'
|
|
? $$(selector, element).filter(function (element) { return within(target, element); })[0]
|
|
: closest(target, selector);
|
|
|
|
if (current) {
|
|
e.delegate = element;
|
|
e.current = current;
|
|
|
|
listener.call(this$1, e);
|
|
}
|
|
}
|
|
}
|
|
|
|
function detail(listener) {
|
|
return function (e) { return isArray(e.detail) ? listener.apply(listener, [e].concat(e.detail)) : listener(e); };
|
|
}
|
|
|
|
function isEventTarget(target) {
|
|
return 'EventTarget' in win
|
|
? target instanceof EventTarget
|
|
: 'addEventListener' in target;
|
|
}
|
|
|
|
function toEventTarget(target) {
|
|
return isEventTarget(target) ? target : toNode(target);
|
|
}
|
|
|
|
function toEventTargets(target) {
|
|
return isEventTarget(target)
|
|
? [target]
|
|
: isArray(target)
|
|
? target.map(toEventTarget).filter(Boolean)
|
|
: toNodes(target);
|
|
}
|
|
|
|
/*
|
|
Based on:
|
|
Copyright (c) 2016 Wilson Page wilsonpage@me.com
|
|
https://github.com/wilsonpage/fastdom
|
|
*/
|
|
|
|
var fastdom = {
|
|
|
|
reads: [],
|
|
writes: [],
|
|
|
|
measure: function measure(task) {
|
|
this.reads.push(task);
|
|
scheduleFlush();
|
|
return task;
|
|
},
|
|
|
|
mutate: function mutate(task) {
|
|
this.writes.push(task);
|
|
scheduleFlush();
|
|
return task;
|
|
},
|
|
|
|
clear: function clear(task) {
|
|
return remove$1(this.reads, task) || remove$1(this.writes, task);
|
|
},
|
|
|
|
flush: function flush() {
|
|
|
|
runTasks(this.reads);
|
|
runTasks(this.writes.splice(0, this.writes.length));
|
|
|
|
this.scheduled = false;
|
|
|
|
if (this.reads.length || this.writes.length) {
|
|
scheduleFlush();
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
function scheduleFlush() {
|
|
if (!fastdom.scheduled) {
|
|
fastdom.scheduled = true;
|
|
requestAnimationFrame(fastdom.flush.bind(fastdom));
|
|
}
|
|
}
|
|
|
|
function runTasks(tasks) {
|
|
var task;
|
|
while (task = tasks.shift()) {
|
|
task();
|
|
}
|
|
}
|
|
|
|
function remove$1(array, item) {
|
|
var index = array.indexOf(item);
|
|
return !!~index && !!array.splice(index, 1);
|
|
}
|
|
|
|
function MouseTracker() {}
|
|
|
|
MouseTracker.prototype = {
|
|
|
|
positions: [],
|
|
position: null,
|
|
|
|
init: function init() {
|
|
var this$1 = this;
|
|
|
|
|
|
this.positions = [];
|
|
this.position = null;
|
|
|
|
var ticking = false;
|
|
this.unbind = on(doc, 'mousemove', function (e) {
|
|
|
|
if (ticking) {
|
|
return;
|
|
}
|
|
|
|
setTimeout(function () {
|
|
|
|
var time = Date.now(), length = this$1.positions.length;
|
|
if (length && (time - this$1.positions[length - 1].time > 100)) {
|
|
this$1.positions.splice(0, length);
|
|
}
|
|
|
|
this$1.positions.push({time: time, x: e.pageX, y: e.pageY});
|
|
|
|
if (this$1.positions.length > 5) {
|
|
this$1.positions.shift();
|
|
}
|
|
|
|
ticking = false;
|
|
}, 5);
|
|
|
|
ticking = true;
|
|
});
|
|
|
|
},
|
|
|
|
cancel: function cancel() {
|
|
if (this.unbind) {
|
|
this.unbind();
|
|
}
|
|
},
|
|
|
|
movesTo: function movesTo(target) {
|
|
|
|
if (this.positions.length < 2) {
|
|
return false;
|
|
}
|
|
|
|
var p = offset(target),
|
|
position = this.positions[this.positions.length - 1],
|
|
prevPos = this.positions[0];
|
|
|
|
if (p.left <= position.x && position.x <= p.right && p.top <= position.y && position.y <= p.bottom) {
|
|
return false;
|
|
}
|
|
|
|
var points = [
|
|
[{x: p.left, y: p.top}, {x: p.right, y: p.bottom}],
|
|
[{x: p.right, y: p.top}, {x: p.left, y: p.bottom}]
|
|
];
|
|
|
|
if (p.right <= position.x) {
|
|
|
|
} else if (p.left >= position.x) {
|
|
points[0].reverse();
|
|
points[1].reverse();
|
|
} else if (p.bottom <= position.y) {
|
|
points[0].reverse();
|
|
} else if (p.top >= position.y) {
|
|
points[1].reverse();
|
|
}
|
|
|
|
return !!points.reduce(function (result, point) {
|
|
return result + (slope(prevPos, point[0]) < slope(position, point[0]) && slope(prevPos, point[1]) > slope(position, point[1]));
|
|
}, 0);
|
|
}
|
|
|
|
};
|
|
|
|
function slope(a, b) {
|
|
return (b.y - a.y) / (b.x - a.x);
|
|
}
|
|
|
|
var strats = {};
|
|
|
|
// concat strategy
|
|
strats.args =
|
|
strats.created =
|
|
strats.events =
|
|
strats.init =
|
|
strats.ready =
|
|
strats.connected =
|
|
strats.disconnected =
|
|
strats.destroy = function (parentVal, childVal) {
|
|
|
|
parentVal = parentVal && !isArray(parentVal) ? [parentVal] : parentVal;
|
|
|
|
return childVal
|
|
? parentVal
|
|
? parentVal.concat(childVal)
|
|
: isArray(childVal)
|
|
? childVal
|
|
: [childVal]
|
|
: parentVal;
|
|
};
|
|
|
|
// update strategy
|
|
strats.update = function (parentVal, childVal) {
|
|
return strats.args(parentVal, isFunction(childVal) ? {read: childVal} : childVal);
|
|
};
|
|
|
|
// property strategy
|
|
strats.props = function (parentVal, childVal) {
|
|
|
|
if (isArray(childVal)) {
|
|
childVal = childVal.reduce(function (value, key) {
|
|
value[key] = String;
|
|
return value;
|
|
}, {});
|
|
}
|
|
|
|
return strats.methods(parentVal, childVal);
|
|
};
|
|
|
|
// extend strategy
|
|
strats.computed =
|
|
strats.defaults =
|
|
strats.methods = function (parentVal, childVal) {
|
|
return childVal
|
|
? parentVal
|
|
? assign({}, parentVal, childVal)
|
|
: childVal
|
|
: parentVal;
|
|
};
|
|
|
|
// default strategy
|
|
var defaultStrat = function (parentVal, childVal) {
|
|
return isUndefined(childVal) ? parentVal : childVal;
|
|
};
|
|
|
|
function mergeOptions(parent, child) {
|
|
|
|
var options = {}, key;
|
|
|
|
if (child.mixins) {
|
|
for (var i = 0, l = child.mixins.length; i < l; i++) {
|
|
parent = mergeOptions(parent, child.mixins[i]);
|
|
}
|
|
}
|
|
|
|
for (key in parent) {
|
|
mergeKey(key);
|
|
}
|
|
|
|
for (key in child) {
|
|
if (!hasOwn(parent, key)) {
|
|
mergeKey(key);
|
|
}
|
|
}
|
|
|
|
function mergeKey(key) {
|
|
options[key] = (strats[key] || defaultStrat)(parent[key], child[key]);
|
|
}
|
|
|
|
return options;
|
|
}
|
|
|
|
var id = 0;
|
|
|
|
var Player = function Player(el) {
|
|
this.id = ++id;
|
|
this.el = toNode(el);
|
|
};
|
|
|
|
Player.prototype.isVideo = function isVideo () {
|
|
return this.isYoutube() || this.isVimeo() || this.isHTML5();
|
|
};
|
|
|
|
Player.prototype.isHTML5 = function isHTML5 () {
|
|
return this.el.tagName === 'VIDEO';
|
|
};
|
|
|
|
Player.prototype.isIFrame = function isIFrame () {
|
|
return this.el.tagName === 'IFRAME';
|
|
};
|
|
|
|
Player.prototype.isYoutube = function isYoutube () {
|
|
return this.isIFrame() && !!this.el.src.match(/\/\/.*?youtube\.[a-z]+\/(watch\?v=[^&\s]+|embed)|youtu\.be\/.*/);
|
|
};
|
|
|
|
Player.prototype.isVimeo = function isVimeo () {
|
|
return this.isIFrame() && !!this.el.src.match(/vimeo\.com\/video\/.*/);
|
|
};
|
|
|
|
Player.prototype.enableApi = function enableApi () {
|
|
var this$1 = this;
|
|
|
|
|
|
if (this.ready) {
|
|
return this.ready;
|
|
}
|
|
|
|
var youtube = this.isYoutube(), vimeo = this.isVimeo(), poller;
|
|
|
|
if (youtube || vimeo) {
|
|
|
|
return this.ready = new Promise(function (resolve) {
|
|
|
|
once(this$1.el, 'load', function () {
|
|
if (youtube) {
|
|
var listener = function () { return post(this$1.el, {event: 'listening', id: this$1.id}); };
|
|
poller = setInterval(listener, 100);
|
|
listener();
|
|
}
|
|
});
|
|
|
|
listen(function (data) { return youtube && data.id === this$1.id && data.event === 'onReady' || vimeo && Number(data.player_id) === this$1.id; })
|
|
.then(function () {
|
|
resolve();
|
|
poller && clearInterval(poller);
|
|
});
|
|
|
|
attr(this$1.el, 'src', ("" + (this$1.el.src) + (includes(this$1.el.src, '?') ? '&' : '?') + (youtube ? 'enablejsapi=1' : ("api=1&player_id=" + id))));
|
|
|
|
});
|
|
|
|
}
|
|
|
|
return Promise.resolve();
|
|
|
|
};
|
|
|
|
Player.prototype.play = function play () {
|
|
var this$1 = this;
|
|
|
|
|
|
if (!this.isVideo()) {
|
|
return;
|
|
}
|
|
|
|
if (this.isIFrame()) {
|
|
this.enableApi().then(function () { return post(this$1.el, {func: 'playVideo', method: 'play'}); });
|
|
} else if (this.isHTML5()) {
|
|
this.el.play();
|
|
}
|
|
};
|
|
|
|
Player.prototype.pause = function pause () {
|
|
var this$1 = this;
|
|
|
|
|
|
if (!this.isVideo()) {
|
|
return;
|
|
}
|
|
|
|
if (this.isIFrame()) {
|
|
this.enableApi().then(function () { return post(this$1.el, {func: 'pauseVideo', method: 'pause'}); });
|
|
} else if (this.isHTML5()) {
|
|
this.el.pause();
|
|
}
|
|
};
|
|
|
|
Player.prototype.mute = function mute () {
|
|
var this$1 = this;
|
|
|
|
|
|
if (!this.isVideo()) {
|
|
return;
|
|
}
|
|
|
|
if (this.isIFrame()) {
|
|
this.enableApi().then(function () { return post(this$1.el, {func: 'mute', method: 'setVolume', value: 0}); });
|
|
} else if (this.isHTML5()) {
|
|
this.el.muted = true;
|
|
attr(this.el, 'muted', '');
|
|
}
|
|
|
|
};
|
|
|
|
function post(el, cmd) {
|
|
try {
|
|
el.contentWindow.postMessage(JSON.stringify(assign({event: 'command'}, cmd)), '*');
|
|
} catch (e) {}
|
|
}
|
|
|
|
function listen(cb) {
|
|
|
|
return new Promise(function (resolve) {
|
|
|
|
once(win, 'message', function (_, data) { return resolve(data); }, false, function (ref) {
|
|
var data = ref.data;
|
|
|
|
|
|
if (!data || !isString(data)) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
data = JSON.parse(data);
|
|
} catch (e) {
|
|
return;
|
|
}
|
|
|
|
return data && cb(data);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
var dirs = {
|
|
width: ['x', 'left', 'right'],
|
|
height: ['y', 'top', 'bottom']
|
|
};
|
|
|
|
function positionAt(element, target, elAttach, targetAttach, elOffset, targetOffset, flip, boundary) {
|
|
|
|
elAttach = getPos(elAttach);
|
|
targetAttach = getPos(targetAttach);
|
|
|
|
var flipped = {element: elAttach, target: targetAttach};
|
|
|
|
if (!element || !target) {
|
|
return flipped;
|
|
}
|
|
|
|
var dim = getDimensions(element),
|
|
targetDim = getDimensions(target),
|
|
position = targetDim;
|
|
|
|
moveTo(position, elAttach, dim, -1);
|
|
moveTo(position, targetAttach, targetDim, 1);
|
|
|
|
elOffset = getOffsets(elOffset, dim.width, dim.height);
|
|
targetOffset = getOffsets(targetOffset, targetDim.width, targetDim.height);
|
|
|
|
elOffset['x'] += targetOffset['x'];
|
|
elOffset['y'] += targetOffset['y'];
|
|
|
|
position.left += elOffset['x'];
|
|
position.top += elOffset['y'];
|
|
|
|
boundary = getDimensions(boundary || getWindow(element));
|
|
|
|
if (flip) {
|
|
each(dirs, function (ref, prop) {
|
|
var dir = ref[0];
|
|
var align = ref[1];
|
|
var alignFlip = ref[2];
|
|
|
|
|
|
if (!(flip === true || includes(flip, dir))) {
|
|
return;
|
|
}
|
|
|
|
var elemOffset = elAttach[dir] === align
|
|
? -dim[prop]
|
|
: elAttach[dir] === alignFlip
|
|
? dim[prop]
|
|
: 0,
|
|
targetOffset = targetAttach[dir] === align
|
|
? targetDim[prop]
|
|
: targetAttach[dir] === alignFlip
|
|
? -targetDim[prop]
|
|
: 0;
|
|
|
|
if (position[align] < boundary[align] || position[align] + dim[prop] > boundary[alignFlip]) {
|
|
|
|
var centerOffset = dim[prop] / 2,
|
|
centerTargetOffset = targetAttach[dir] === 'center' ? -targetDim[prop] / 2 : 0;
|
|
|
|
elAttach[dir] === 'center' && (
|
|
apply(centerOffset, centerTargetOffset)
|
|
|| apply(-centerOffset, -centerTargetOffset)
|
|
) || apply(elemOffset, targetOffset);
|
|
|
|
}
|
|
|
|
function apply(elemOffset, targetOffset) {
|
|
|
|
var newVal = position[align] + elemOffset + targetOffset - elOffset[dir] * 2;
|
|
|
|
if (newVal >= boundary[align] && newVal + dim[prop] <= boundary[alignFlip]) {
|
|
position[align] = newVal;
|
|
|
|
['element', 'target'].forEach(function (el) {
|
|
flipped[el][dir] = !elemOffset
|
|
? flipped[el][dir]
|
|
: flipped[el][dir] === dirs[prop][1]
|
|
? dirs[prop][2]
|
|
: dirs[prop][1];
|
|
});
|
|
|
|
return true;
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
}
|
|
|
|
offset(element, position);
|
|
|
|
return flipped;
|
|
}
|
|
|
|
function offset(element, coordinates) {
|
|
|
|
element = toNode(element);
|
|
|
|
if (coordinates) {
|
|
|
|
var currentOffset = offset(element),
|
|
pos = css(element, 'position');
|
|
|
|
['left', 'top'].forEach(function (prop) {
|
|
if (prop in coordinates) {
|
|
var value = css(element, prop);
|
|
element.style[prop] = ((coordinates[prop] - currentOffset[prop])
|
|
+ toFloat(pos === 'absolute' && value === 'auto' ? position(element)[prop] : value)) + "px";
|
|
}
|
|
});
|
|
|
|
return;
|
|
}
|
|
|
|
return getDimensions(element);
|
|
}
|
|
|
|
function getDimensions(element) {
|
|
|
|
element = toNode(element);
|
|
|
|
var ref = getWindow(element);
|
|
var top = ref.pageYOffset;
|
|
var left = ref.pageXOffset;
|
|
|
|
if (isWindow(element)) {
|
|
|
|
var height = element.innerHeight,
|
|
width = element.innerWidth;
|
|
|
|
return {
|
|
top: top,
|
|
left: left,
|
|
height: height,
|
|
width: width,
|
|
bottom: top + height,
|
|
right: left + width,
|
|
}
|
|
}
|
|
|
|
var display = false;
|
|
if (!isVisible(element)) {
|
|
display = element.style.display;
|
|
element.style.display = 'block';
|
|
}
|
|
|
|
var rect = element.getBoundingClientRect();
|
|
|
|
if (display !== false) {
|
|
element.style.display = display;
|
|
}
|
|
|
|
return {
|
|
height: rect.height,
|
|
width: rect.width,
|
|
top: rect.top + top,
|
|
left: rect.left + left,
|
|
bottom: rect.bottom + top,
|
|
right: rect.right + left,
|
|
}
|
|
}
|
|
|
|
function position(element) {
|
|
element = toNode(element);
|
|
|
|
var parent = offsetParent(element),
|
|
parentOffset = parent === docEl$1(element) ? {top: 0, left: 0} : offset(parent);
|
|
|
|
return ['top', 'left'].reduce(function (props, prop) {
|
|
var propName = ucfirst(prop);
|
|
props[prop] -= parentOffset[prop]
|
|
+ (toFloat(css(element, ("margin" + propName))) || 0)
|
|
+ (toFloat(css(parent, ("border" + propName + "Width"))) || 0);
|
|
return props;
|
|
}, offset(element));
|
|
}
|
|
|
|
function offsetParent(element) {
|
|
|
|
var parent = toNode(element).offsetParent;
|
|
|
|
while (parent && css(parent, 'position') === 'static') {
|
|
parent = parent.offsetParent;
|
|
}
|
|
|
|
return parent || docEl$1(element);
|
|
}
|
|
|
|
var height = dimension('height');
|
|
var width = dimension('width');
|
|
|
|
function dimension(prop) {
|
|
var propName = ucfirst(prop);
|
|
return function (element, value) {
|
|
|
|
element = toNode(element);
|
|
|
|
if (isUndefined(value)) {
|
|
|
|
if (isWindow(element)) {
|
|
return element[("inner" + propName)];
|
|
}
|
|
|
|
if (isDocument(element)) {
|
|
var doc = element.documentElement;
|
|
return Math.max(doc.offsetHeight, doc.scrollHeight);
|
|
}
|
|
|
|
value = css(element, prop);
|
|
value = value === 'auto' ? element[("offset" + propName)] : toFloat(value) || 0;
|
|
|
|
return getContentSize(prop, element, value);
|
|
|
|
} else {
|
|
|
|
css(element, prop, !value && value !== 0
|
|
? ''
|
|
: getContentSize(prop, element, value) + 'px'
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
function getContentSize(prop, element, value) {
|
|
return css(element, 'boxSizing') === 'border-box' ? dirs[prop].slice(1).map(ucfirst).reduce(function (value, prop) { return value
|
|
- toFloat(css(element, ("padding" + prop)))
|
|
- toFloat(css(element, ("border" + prop + "Width"))); }
|
|
, value) : value;
|
|
}
|
|
|
|
function getWindow(element) {
|
|
return isWindow(element) ? element : document$1(element).defaultView;
|
|
}
|
|
|
|
function moveTo(position, attach, dim, factor) {
|
|
each(dirs, function (ref, prop) {
|
|
var dir = ref[0];
|
|
var align = ref[1];
|
|
var alignFlip = ref[2];
|
|
|
|
if (attach[dir] === alignFlip) {
|
|
position[align] += dim[prop] * factor;
|
|
} else if (attach[dir] === 'center') {
|
|
position[align] += dim[prop] * factor / 2;
|
|
}
|
|
});
|
|
}
|
|
|
|
function getPos(pos) {
|
|
|
|
var x = /left|center|right/, y = /top|center|bottom/;
|
|
|
|
pos = (pos || '').split(' ');
|
|
|
|
if (pos.length === 1) {
|
|
pos = x.test(pos[0])
|
|
? pos.concat(['center'])
|
|
: y.test(pos[0])
|
|
? ['center'].concat(pos)
|
|
: ['center', 'center'];
|
|
}
|
|
|
|
return {
|
|
x: x.test(pos[0]) ? pos[0] : 'center',
|
|
y: y.test(pos[1]) ? pos[1] : 'center'
|
|
};
|
|
}
|
|
|
|
function getOffsets(offsets, width, height) {
|
|
|
|
var ref = (offsets || '').split(' ');
|
|
var x = ref[0];
|
|
var y = ref[1];
|
|
|
|
return {
|
|
x: x ? toFloat(x) * (endsWith(x, '%') ? width / 100 : 1) : 0,
|
|
y: y ? toFloat(y) * (endsWith(y, '%') ? height / 100 : 1) : 0
|
|
};
|
|
}
|
|
|
|
function flipPosition(pos) {
|
|
switch (pos) {
|
|
case 'left':
|
|
return 'right';
|
|
case 'right':
|
|
return 'left';
|
|
case 'top':
|
|
return 'bottom';
|
|
case 'bottom':
|
|
return 'top';
|
|
default:
|
|
return pos;
|
|
}
|
|
}
|
|
|
|
function document$1(element) {
|
|
return toNode(element).ownerDocument;
|
|
}
|
|
|
|
function docEl$1(element) {
|
|
return document$1(element).documentElement;
|
|
}
|
|
|
|
/*
|
|
Based on:
|
|
Copyright (c) 2010-2016 Thomas Fuchs
|
|
http://zeptojs.com/
|
|
*/
|
|
|
|
var touch = {};
|
|
var clickTimeout;
|
|
var swipeTimeout;
|
|
var tapTimeout;
|
|
var clicked;
|
|
|
|
function swipeDirection(ref) {
|
|
var x1 = ref.x1;
|
|
var x2 = ref.x2;
|
|
var y1 = ref.y1;
|
|
var y2 = ref.y2;
|
|
|
|
return Math.abs(x1 - x2) >= Math.abs(y1 - y2) ? (x1 - x2 > 0 ? 'Left' : 'Right') : (y1 - y2 > 0 ? 'Up' : 'Down');
|
|
}
|
|
|
|
function cancelAll() {
|
|
clickTimeout && clearTimeout(clickTimeout);
|
|
swipeTimeout && clearTimeout(swipeTimeout);
|
|
tapTimeout && clearTimeout(tapTimeout);
|
|
clickTimeout = swipeTimeout = tapTimeout = null;
|
|
touch = {};
|
|
}
|
|
|
|
ready(function () {
|
|
|
|
on(doc, 'click', function () { return clicked = true; }, true);
|
|
|
|
on(doc, pointerDown, function (e) {
|
|
|
|
var target = e.target;
|
|
var ref = getPos$1(e);
|
|
var x = ref.x;
|
|
var y = ref.y;
|
|
var now = Date.now();
|
|
|
|
touch.el = 'tagName' in target ? target : target.parentNode;
|
|
|
|
clickTimeout && clearTimeout(clickTimeout);
|
|
|
|
touch.x1 = x;
|
|
touch.y1 = y;
|
|
|
|
if (touch.last && now - touch.last <= 250) {
|
|
touch = {};
|
|
}
|
|
|
|
touch.last = now;
|
|
|
|
clicked = e.button > 0;
|
|
|
|
});
|
|
|
|
on(doc, pointerMove, function (e) {
|
|
|
|
var ref = getPos$1(e);
|
|
var x = ref.x;
|
|
var y = ref.y;
|
|
|
|
touch.x2 = x;
|
|
touch.y2 = y;
|
|
});
|
|
|
|
on(doc, pointerUp, function (ref) {
|
|
var target = ref.target;
|
|
|
|
|
|
// swipe
|
|
if (touch.x2 && Math.abs(touch.x1 - touch.x2) > 30 || touch.y2 && Math.abs(touch.y1 - touch.y2) > 30) {
|
|
|
|
swipeTimeout = setTimeout(function () {
|
|
if (touch.el) {
|
|
trigger(touch.el, 'swipe');
|
|
trigger(touch.el, ("swipe" + (swipeDirection(touch))));
|
|
}
|
|
touch = {};
|
|
});
|
|
|
|
// normal tap
|
|
} else if ('last' in touch) {
|
|
|
|
tapTimeout = setTimeout(function () { return touch.el && trigger(touch.el, 'tap'); });
|
|
|
|
// trigger single click after 350ms of inactivity
|
|
if (touch.el && within(target, touch.el)) {
|
|
clickTimeout = setTimeout(function () {
|
|
clickTimeout = null;
|
|
if (touch.el && !clicked) {
|
|
trigger(touch.el, 'click');
|
|
}
|
|
touch = {};
|
|
}, 350);
|
|
}
|
|
|
|
} else {
|
|
touch = {};
|
|
}
|
|
});
|
|
|
|
on(doc, 'touchcancel', cancelAll);
|
|
on(win, 'scroll', cancelAll);
|
|
});
|
|
|
|
var touching = false;
|
|
on(doc, 'touchstart', function () { return touching = true; }, true);
|
|
on(doc, 'click', function () {touching = false;});
|
|
on(doc, 'touchcancel', function () { return touching = false; }, true);
|
|
|
|
function isTouch(e) {
|
|
return touching || e.pointerType === 'touch';
|
|
}
|
|
|
|
function getPos$1(e) {
|
|
var touches = e.touches;
|
|
var changedTouches = e.changedTouches;
|
|
|
|
var ref = touches && touches[0] || changedTouches && changedTouches[0] || e;
|
|
var x = ref.pageX;
|
|
var y = ref.pageY;
|
|
return {x: x, y: y};
|
|
}
|
|
|
|
|
|
|
|
var util = Object.freeze({
|
|
bind: bind,
|
|
hasOwn: hasOwn,
|
|
Promise: Promise,
|
|
classify: classify,
|
|
hyphenate: hyphenate,
|
|
camelize: camelize,
|
|
ucfirst: ucfirst,
|
|
startsWith: startsWith,
|
|
endsWith: endsWith,
|
|
includes: includes,
|
|
isArray: isArray,
|
|
isFunction: isFunction,
|
|
isObject: isObject,
|
|
isPlainObject: isPlainObject,
|
|
isWindow: isWindow,
|
|
isDocument: isDocument,
|
|
isBoolean: isBoolean,
|
|
isString: isString,
|
|
isNumber: isNumber,
|
|
isNumeric: isNumeric,
|
|
isUndefined: isUndefined,
|
|
toBoolean: toBoolean,
|
|
toNumber: toNumber,
|
|
toFloat: toFloat,
|
|
toList: toList,
|
|
toMedia: toMedia,
|
|
coerce: coerce,
|
|
toMs: toMs,
|
|
swap: swap,
|
|
assign: assign,
|
|
each: each,
|
|
clamp: clamp,
|
|
noop: noop,
|
|
intersectRect: intersectRect,
|
|
pointInRect: pointInRect,
|
|
ajax: ajax,
|
|
$: $$1,
|
|
$$: $$,
|
|
query: query,
|
|
queryAll: queryAll,
|
|
filter: filter,
|
|
within: within,
|
|
matches: matches,
|
|
closest: closest,
|
|
parents: parents,
|
|
isJQuery: isJQuery,
|
|
toNode: toNode,
|
|
toNodes: toNodes,
|
|
attr: attr,
|
|
hasAttr: hasAttr,
|
|
removeAttr: removeAttr,
|
|
filterAttr: filterAttr,
|
|
data: data,
|
|
win: win,
|
|
doc: doc,
|
|
docEl: docEl,
|
|
isRtl: isRtl,
|
|
isReady: isReady,
|
|
ready: ready,
|
|
transition: transition,
|
|
Transition: Transition,
|
|
animate: animate,
|
|
Animation: Animation,
|
|
isInView: isInView,
|
|
scrolledOver: scrolledOver,
|
|
getIndex: getIndex,
|
|
isVoidElement: isVoidElement,
|
|
Dimensions: Dimensions,
|
|
preventClick: preventClick,
|
|
isVisible: isVisible,
|
|
selInput: selInput,
|
|
isInput: isInput,
|
|
empty: empty,
|
|
html: html,
|
|
prepend: prepend,
|
|
append: append,
|
|
before: before,
|
|
after: after,
|
|
remove: remove,
|
|
wrapAll: wrapAll,
|
|
wrapInner: wrapInner,
|
|
unwrap: unwrap,
|
|
fragment: fragment,
|
|
index: index,
|
|
css: css,
|
|
getStyles: getStyles,
|
|
getStyle: getStyle,
|
|
getCssVar: getCssVar,
|
|
addClass: addClass,
|
|
removeClass: removeClass,
|
|
removeClasses: removeClasses,
|
|
replaceClass: replaceClass,
|
|
hasClass: hasClass,
|
|
toggleClass: toggleClass,
|
|
Observer: Observer,
|
|
requestAnimationFrame: requestAnimationFrame,
|
|
hasTouch: hasTouch,
|
|
pointerDown: pointerDown,
|
|
pointerMove: pointerMove,
|
|
pointerUp: pointerUp,
|
|
pointerEnter: pointerEnter,
|
|
pointerLeave: pointerLeave,
|
|
transitionend: transitionend,
|
|
animationstart: animationstart,
|
|
animationend: animationend,
|
|
getImage: getImage,
|
|
on: on,
|
|
off: off,
|
|
once: once,
|
|
trigger: trigger,
|
|
createEvent: createEvent,
|
|
toEventTargets: toEventTargets,
|
|
fastdom: fastdom,
|
|
MouseTracker: MouseTracker,
|
|
mergeOptions: mergeOptions,
|
|
Player: Player,
|
|
positionAt: positionAt,
|
|
offset: offset,
|
|
position: position,
|
|
height: height,
|
|
width: width,
|
|
flipPosition: flipPosition,
|
|
isTouch: isTouch,
|
|
getPos: getPos$1
|
|
});
|
|
|
|
var boot = function (UIkit) {
|
|
|
|
var connect = UIkit.connect;
|
|
var disconnect = UIkit.disconnect;
|
|
|
|
if (Observer) {
|
|
|
|
if (doc.body) {
|
|
|
|
init();
|
|
|
|
} else {
|
|
|
|
(new Observer(function () {
|
|
|
|
if (doc.body) {
|
|
this.disconnect();
|
|
init();
|
|
}
|
|
|
|
})).observe(docEl, {childList: true, subtree: true});
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
ready(function () {
|
|
apply(doc.body, connect);
|
|
on(docEl, 'DOMNodeInserted', function (e) { return apply(e.target, connect); });
|
|
on(docEl, 'DOMNodeRemoved', function (e) { return apply(e.target, disconnect); });
|
|
});
|
|
|
|
}
|
|
|
|
function init() {
|
|
|
|
apply(doc.body, connect);
|
|
|
|
fastdom.flush();
|
|
|
|
(new Observer(function (mutations) { return mutations.forEach(function (ref) {
|
|
var addedNodes = ref.addedNodes;
|
|
var removedNodes = ref.removedNodes;
|
|
var target = ref.target;
|
|
|
|
|
|
for (var i = 0; i < addedNodes.length; i++) {
|
|
apply(addedNodes[i], connect);
|
|
}
|
|
|
|
for (i = 0; i < removedNodes.length; i++) {
|
|
apply(removedNodes[i], disconnect);
|
|
}
|
|
|
|
UIkit.update(createEvent('update', true, false, {mutation: true}), target, true);
|
|
|
|
}); }
|
|
)).observe(docEl, {
|
|
childList: true,
|
|
subtree: true,
|
|
characterData: true,
|
|
attributes: true,
|
|
attributeFilter: ['href']
|
|
});
|
|
|
|
UIkit._initialized = true;
|
|
}
|
|
|
|
function apply(node, fn) {
|
|
|
|
if (node.nodeType !== 1 || hasAttr(node, 'uk-no-boot')) {
|
|
return;
|
|
}
|
|
|
|
fn(node);
|
|
node = node.firstElementChild;
|
|
while (node) {
|
|
var next = node.nextElementSibling;
|
|
apply(node, fn);
|
|
node = next;
|
|
}
|
|
}
|
|
|
|
};
|
|
|
|
var globalAPI = function (UIkit) {
|
|
|
|
var DATA = UIkit.data;
|
|
|
|
UIkit.use = function (plugin) {
|
|
|
|
if (plugin.installed) {
|
|
return;
|
|
}
|
|
|
|
plugin.call(null, this);
|
|
plugin.installed = true;
|
|
|
|
return this;
|
|
};
|
|
|
|
UIkit.mixin = function (mixin, component) {
|
|
component = (isString(component) ? UIkit.components[component] : component) || this;
|
|
mixin = mergeOptions({}, mixin);
|
|
mixin.mixins = component.options.mixins;
|
|
delete component.options.mixins;
|
|
component.options = mergeOptions(mixin, component.options);
|
|
};
|
|
|
|
UIkit.extend = function (options) {
|
|
|
|
options = options || {};
|
|
|
|
var Super = this, name = options.name || Super.options.name;
|
|
var Sub = createClass(name || 'UIkitComponent');
|
|
|
|
Sub.prototype = Object.create(Super.prototype);
|
|
Sub.prototype.constructor = Sub;
|
|
Sub.options = mergeOptions(Super.options, options);
|
|
|
|
Sub['super'] = Super;
|
|
Sub.extend = Super.extend;
|
|
|
|
return Sub;
|
|
};
|
|
|
|
UIkit.update = function (e, element, parents) {
|
|
if ( parents === void 0 ) parents = false;
|
|
|
|
|
|
e = createEvent(e || 'update');
|
|
|
|
if (!element) {
|
|
|
|
update(UIkit.instances, e);
|
|
return;
|
|
|
|
}
|
|
|
|
element = toNode(element);
|
|
|
|
if (parents) {
|
|
|
|
do {
|
|
|
|
update(element[DATA], e);
|
|
element = element.parentNode;
|
|
|
|
} while (element)
|
|
|
|
} else {
|
|
|
|
apply(element, function (element) { return update(element[DATA], e); });
|
|
|
|
}
|
|
|
|
};
|
|
|
|
var container;
|
|
Object.defineProperty(UIkit, 'container', {
|
|
|
|
get: function get() {
|
|
return container || doc.body;
|
|
},
|
|
|
|
set: function set(element) {
|
|
container = element;
|
|
}
|
|
|
|
});
|
|
|
|
function createClass(name) {
|
|
return new Function(("return function " + (classify(name)) + " (options) { this._init(options); }"))();
|
|
}
|
|
|
|
function apply(node, fn) {
|
|
|
|
if (node.nodeType !== 1) {
|
|
return;
|
|
}
|
|
|
|
fn(node);
|
|
node = node.firstElementChild;
|
|
while (node) {
|
|
apply(node, fn);
|
|
node = node.nextElementSibling;
|
|
}
|
|
}
|
|
|
|
function update(data, e) {
|
|
|
|
if (!data) {
|
|
return;
|
|
}
|
|
|
|
for (var name in data) {
|
|
if (data[name]._isReady) {
|
|
data[name]._callUpdate(e);
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
var hooksAPI = function (UIkit) {
|
|
|
|
UIkit.prototype._callHook = function (hook) {
|
|
var this$1 = this;
|
|
|
|
|
|
var handlers = this.$options[hook];
|
|
|
|
if (handlers) {
|
|
handlers.forEach(function (handler) { return handler.call(this$1); });
|
|
}
|
|
};
|
|
|
|
UIkit.prototype._callReady = function () {
|
|
|
|
if (this._isReady) {
|
|
return;
|
|
}
|
|
|
|
this._isReady = true;
|
|
this._callHook('ready');
|
|
this._callUpdate();
|
|
};
|
|
|
|
UIkit.prototype._callConnected = function () {
|
|
var this$1 = this;
|
|
|
|
|
|
if (this._connected) {
|
|
return;
|
|
}
|
|
|
|
if (!includes(UIkit.elements, this.$options.el)) {
|
|
UIkit.elements.push(this.$options.el);
|
|
}
|
|
|
|
UIkit.instances[this._uid] = this;
|
|
|
|
this._initEvents();
|
|
|
|
this._callHook('connected');
|
|
this._connected = true;
|
|
|
|
this._initObserver();
|
|
|
|
if (!this._isReady) {
|
|
ready(function () { return this$1._callReady(); });
|
|
}
|
|
|
|
this._callUpdate();
|
|
};
|
|
|
|
UIkit.prototype._callDisconnected = function () {
|
|
|
|
if (!this._connected) {
|
|
return;
|
|
}
|
|
|
|
if (this._observer) {
|
|
this._observer.disconnect();
|
|
this._observer = null;
|
|
}
|
|
|
|
var index = UIkit.elements.indexOf(this.$options.el);
|
|
|
|
if (~index) {
|
|
UIkit.elements.splice(index, 1);
|
|
}
|
|
|
|
delete UIkit.instances[this._uid];
|
|
|
|
this._unbindEvents();
|
|
this._callHook('disconnected');
|
|
|
|
this._connected = false;
|
|
|
|
};
|
|
|
|
UIkit.prototype._callUpdate = function (e) {
|
|
var this$1 = this;
|
|
|
|
|
|
e = createEvent(e || 'update');
|
|
|
|
var type = e.type;
|
|
var detail = e.detail;
|
|
|
|
if (type === 'update' && detail && detail.mutation) {
|
|
this._computeds = {};
|
|
}
|
|
|
|
var updates = this.$options.update;
|
|
|
|
if (!updates) {
|
|
return;
|
|
}
|
|
|
|
updates.forEach(function (update, i) {
|
|
|
|
if (type !== 'update' && !includes(update.events, type)) {
|
|
return;
|
|
}
|
|
|
|
if (update.read && !includes(fastdom.reads, this$1._frames.reads[i])) {
|
|
this$1._frames.reads[i] = fastdom.measure(function () {
|
|
update.read.call(this$1, e);
|
|
delete this$1._frames.reads[i];
|
|
});
|
|
}
|
|
|
|
if (update.write && !includes(fastdom.writes, this$1._frames.writes[i])) {
|
|
this$1._frames.writes[i] = fastdom.mutate(function () {
|
|
update.write.call(this$1, e);
|
|
delete this$1._frames.writes[i];
|
|
});
|
|
}
|
|
|
|
});
|
|
|
|
};
|
|
|
|
};
|
|
|
|
var stateAPI = function (UIkit) {
|
|
|
|
var uid = 0;
|
|
|
|
UIkit.prototype.props = {};
|
|
|
|
UIkit.prototype._init = function (options) {
|
|
|
|
options = options || {};
|
|
options = this.$options = mergeOptions(this.constructor.options, options, this);
|
|
|
|
this.$el = null;
|
|
this.$name = UIkit.prefix + hyphenate(this.$options.name);
|
|
this.$props = {};
|
|
|
|
this._frames = {reads: {}, writes: {}};
|
|
this._events = [];
|
|
|
|
this._uid = uid++;
|
|
this._initData();
|
|
this._initMethods();
|
|
this._initComputeds();
|
|
this._callHook('created');
|
|
|
|
if (options.el) {
|
|
this.$mount(options.el);
|
|
}
|
|
};
|
|
|
|
UIkit.prototype._initData = function () {
|
|
var this$1 = this;
|
|
|
|
|
|
var ref = this.$options;
|
|
var defaults = ref.defaults;
|
|
var data$$1 = ref.data; if ( data$$1 === void 0 ) data$$1 = {};
|
|
var args = ref.args; if ( args === void 0 ) args = [];
|
|
var props = ref.props; if ( props === void 0 ) props = {};
|
|
var el = ref.el;
|
|
|
|
if (args.length && isArray(data$$1)) {
|
|
data$$1 = data$$1.slice(0, args.length).reduce(function (data$$1, value, index) {
|
|
if (isPlainObject(value)) {
|
|
assign(data$$1, value);
|
|
} else {
|
|
data$$1[args[index]] = value;
|
|
}
|
|
return data$$1;
|
|
}, {});
|
|
}
|
|
|
|
for (var key in defaults) {
|
|
this$1.$props[key] = this$1[key] = hasOwn(data$$1, key) && !isUndefined(data$$1[key])
|
|
? coerce(props[key], data$$1[key], el)
|
|
: isArray(defaults[key])
|
|
? defaults[key].concat()
|
|
: defaults[key];
|
|
}
|
|
};
|
|
|
|
UIkit.prototype._initMethods = function () {
|
|
var this$1 = this;
|
|
|
|
|
|
var methods = this.$options.methods;
|
|
|
|
if (methods) {
|
|
for (var key in methods) {
|
|
this$1[key] = bind(methods[key], this$1);
|
|
}
|
|
}
|
|
};
|
|
|
|
UIkit.prototype._initComputeds = function () {
|
|
var this$1 = this;
|
|
|
|
|
|
var computed = this.$options.computed;
|
|
|
|
this._computeds = {};
|
|
|
|
if (computed) {
|
|
for (var key in computed) {
|
|
registerComputed(this$1, key, computed[key]);
|
|
}
|
|
}
|
|
};
|
|
|
|
UIkit.prototype._initProps = function (props) {
|
|
var this$1 = this;
|
|
|
|
|
|
this._computeds = {};
|
|
assign(this.$props, props || getProps(this.$options, this.$name));
|
|
|
|
var exclude = [this.$options.computed, this.$options.methods];
|
|
for (var key in this$1.$props) {
|
|
if (notIn(exclude, key)) {
|
|
this$1[key] = this$1.$props[key];
|
|
}
|
|
}
|
|
};
|
|
|
|
UIkit.prototype._initEvents = function () {
|
|
var this$1 = this;
|
|
|
|
|
|
var events = this.$options.events;
|
|
|
|
if (events) {
|
|
|
|
events.forEach(function (event) {
|
|
|
|
if (!hasOwn(event, 'handler')) {
|
|
for (var key in event) {
|
|
registerEvent(this$1, event[key], key);
|
|
}
|
|
} else {
|
|
registerEvent(this$1, event);
|
|
}
|
|
|
|
});
|
|
}
|
|
};
|
|
|
|
UIkit.prototype._unbindEvents = function () {
|
|
this._events.forEach(function (unbind) { return unbind(); });
|
|
this._events = [];
|
|
};
|
|
|
|
UIkit.prototype._initObserver = function () {
|
|
var this$1 = this;
|
|
|
|
|
|
var ref = this.$options;
|
|
var attrs = ref.attrs;
|
|
var props = ref.props;
|
|
var el = ref.el;
|
|
if (this._observer || !props || !attrs || !Observer) {
|
|
return;
|
|
}
|
|
|
|
attrs = isArray(attrs) ? attrs : Object.keys(props).map(function (key) { return hyphenate(key); });
|
|
|
|
this._observer = new Observer(function () {
|
|
|
|
var data$$1 = getProps(this$1.$options, this$1.$name);
|
|
if (attrs.some(function (key) { return !isUndefined(data$$1[key]) && data$$1[key] !== this$1.$props[key]; })) {
|
|
this$1.$reset(data$$1);
|
|
}
|
|
|
|
});
|
|
|
|
this._observer.observe(el, {attributes: true, attributeFilter: attrs.concat([this.$name, ("data-" + (this.$name))])});
|
|
};
|
|
|
|
function getProps(opts, name) {
|
|
|
|
var data$$1 = {};
|
|
var args = opts.args; if ( args === void 0 ) args = [];
|
|
var props = opts.props; if ( props === void 0 ) props = {};
|
|
var el = opts.el;
|
|
var key, prop;
|
|
|
|
if (!props) {
|
|
return data$$1;
|
|
}
|
|
|
|
for (key in props) {
|
|
prop = hyphenate(key);
|
|
if (hasAttr(el, prop)) {
|
|
|
|
var value = coerce(props[key], attr(el, prop), el);
|
|
|
|
if (prop === 'target' && (!value || startsWith(value, '_'))) {
|
|
continue;
|
|
}
|
|
|
|
data$$1[key] = value;
|
|
}
|
|
}
|
|
|
|
var options = parseOptions(data(el, name), args);
|
|
|
|
for (key in options) {
|
|
prop = camelize(key);
|
|
if (props[prop] !== undefined) {
|
|
data$$1[prop] = coerce(props[prop], options[key], el);
|
|
}
|
|
}
|
|
|
|
return data$$1;
|
|
}
|
|
|
|
function parseOptions(options, args) {
|
|
if ( args === void 0 ) args = [];
|
|
|
|
|
|
try {
|
|
|
|
return !options
|
|
? {}
|
|
: startsWith(options, '{')
|
|
? JSON.parse(options)
|
|
: args.length && !includes(options, ':')
|
|
? (( obj = {}, obj[args[0]] = options, obj ))
|
|
: options.split(';').reduce(function (options, option) {
|
|
var ref = option.split(/:(.+)/);
|
|
var key = ref[0];
|
|
var value = ref[1];
|
|
if (key && value) {
|
|
options[key.trim()] = value.trim();
|
|
}
|
|
return options;
|
|
}, {});
|
|
var obj;
|
|
|
|
} catch (e) {
|
|
return {};
|
|
}
|
|
|
|
}
|
|
|
|
function registerComputed(component, key, cb) {
|
|
Object.defineProperty(component, key, {
|
|
|
|
enumerable: true,
|
|
|
|
get: function get() {
|
|
|
|
var _computeds = component._computeds;
|
|
var $props = component.$props;
|
|
var $el = component.$el;
|
|
|
|
if (!hasOwn(_computeds, key)) {
|
|
_computeds[key] = cb.call(component, $props, $el);
|
|
}
|
|
|
|
return _computeds[key];
|
|
},
|
|
|
|
set: function set(value) {
|
|
component._computeds[key] = value;
|
|
}
|
|
|
|
});
|
|
}
|
|
|
|
function registerEvent(component, event, key) {
|
|
|
|
if (!isPlainObject(event)) {
|
|
event = ({name: key, handler: event});
|
|
}
|
|
|
|
var name = event.name;
|
|
var el = event.el;
|
|
var delegate = event.delegate;
|
|
var self = event.self;
|
|
var filter = event.filter;
|
|
var handler = event.handler;
|
|
el = isFunction(el)
|
|
? el.call(component)
|
|
: el || component.$el;
|
|
|
|
if (isArray(el)) {
|
|
el.forEach(function (el) { return registerEvent(component, assign({}, event, {el: el}), key); });
|
|
return;
|
|
}
|
|
|
|
if (!el || filter && !filter.call(component)) {
|
|
return;
|
|
}
|
|
|
|
handler = detail(isString(handler) ? component[handler] : bind(handler, component));
|
|
|
|
if (self) {
|
|
handler = selfFilter(handler);
|
|
}
|
|
|
|
component._events.push(
|
|
on(
|
|
el,
|
|
name,
|
|
!delegate
|
|
? null
|
|
: isString(delegate)
|
|
? delegate
|
|
: delegate.call(component),
|
|
handler
|
|
)
|
|
);
|
|
|
|
}
|
|
|
|
function selfFilter(handler) {
|
|
return function selfHandler(e) {
|
|
if (e.target === e.currentTarget || e.target === e.current) {
|
|
return handler.call(null, e);
|
|
}
|
|
}
|
|
}
|
|
|
|
function notIn(options, key) {
|
|
return options.every(function (arr) { return !arr || !hasOwn(arr, key); });
|
|
}
|
|
|
|
function detail(listener) {
|
|
return function (e) { return isArray(e.detail) ? listener.apply(listener, [e].concat(e.detail)) : listener(e); };
|
|
}
|
|
|
|
};
|
|
|
|
var instanceAPI = function (UIkit) {
|
|
|
|
var DATA = UIkit.data;
|
|
|
|
UIkit.prototype.$mount = function (el) {
|
|
|
|
var name = this.$options.name;
|
|
|
|
if (!el[DATA]) {
|
|
el[DATA] = {};
|
|
}
|
|
|
|
if (el[DATA][name]) {
|
|
return;
|
|
}
|
|
|
|
el[DATA][name] = this;
|
|
|
|
this.$el = this.$options.el = this.$options.el || el;
|
|
|
|
this._initProps();
|
|
|
|
this._callHook('init');
|
|
|
|
if (within(el, docEl)) {
|
|
this._callConnected();
|
|
}
|
|
};
|
|
|
|
UIkit.prototype.$emit = function (e) {
|
|
this._callUpdate(e);
|
|
};
|
|
|
|
UIkit.prototype.$update = function (e, parents) {
|
|
UIkit.update(e, this.$options.el, parents);
|
|
};
|
|
|
|
UIkit.prototype.$reset = function (data) {
|
|
this._callDisconnected();
|
|
this._initProps(data);
|
|
this._callConnected();
|
|
};
|
|
|
|
UIkit.prototype.$destroy = function (removeEl) {
|
|
if ( removeEl === void 0 ) removeEl = false;
|
|
|
|
|
|
var ref = this.$options;
|
|
var el = ref.el;
|
|
var name = ref.name;
|
|
|
|
if (el) {
|
|
this._callDisconnected();
|
|
}
|
|
|
|
this._callHook('destroy');
|
|
|
|
if (!el || !el[DATA]) {
|
|
return;
|
|
}
|
|
|
|
delete el[DATA][name];
|
|
|
|
if (!Object.keys(el[DATA]).length) {
|
|
delete el[DATA];
|
|
}
|
|
|
|
if (removeEl) {
|
|
remove(this.$el);
|
|
}
|
|
};
|
|
|
|
};
|
|
|
|
var componentAPI = function (UIkit) {
|
|
|
|
var DATA = UIkit.data;
|
|
|
|
UIkit.components = {};
|
|
|
|
UIkit.component = function (id, options) {
|
|
|
|
var name = camelize(id);
|
|
|
|
if (isPlainObject(options)) {
|
|
options.name = name;
|
|
options = UIkit.extend(options);
|
|
} else if (isUndefined(options)) {
|
|
return UIkit.components[name]
|
|
} else {
|
|
options.options.name = name;
|
|
}
|
|
|
|
UIkit.components[name] = options;
|
|
|
|
UIkit[name] = function (element, data) {
|
|
var i = arguments.length, argsArray = Array(i);
|
|
while ( i-- ) argsArray[i] = arguments[i];
|
|
|
|
|
|
if (isPlainObject(element)) {
|
|
return new UIkit.components[name]({data: element});
|
|
}
|
|
|
|
if (UIkit.components[name].options.functional) {
|
|
return new UIkit.components[name]({data: [].concat( argsArray )});
|
|
}
|
|
|
|
return element && element.nodeType ? init(element) : $$(element).map(init)[0];
|
|
|
|
function init(element) {
|
|
return UIkit.getComponent(element, name) || new UIkit.components[name]({el: element, data: data || {}});
|
|
}
|
|
|
|
};
|
|
|
|
if (UIkit._initialized && !options.options.functional) {
|
|
fastdom.measure(function () { return UIkit[name](("[uk-" + id + "],[data-uk-" + id + "]")); });
|
|
}
|
|
|
|
return UIkit.components[name];
|
|
};
|
|
|
|
UIkit.getComponents = function (element) { return element && (element = isJQuery(element) ? element[0] : element) && element[DATA] || {}; };
|
|
UIkit.getComponent = function (element, name) { return UIkit.getComponents(element)[name]; };
|
|
|
|
UIkit.connect = function (node) {
|
|
|
|
var name;
|
|
|
|
if (node[DATA]) {
|
|
for (name in node[DATA]) {
|
|
node[DATA][name]._callConnected();
|
|
}
|
|
}
|
|
|
|
for (var i = 0; i < node.attributes.length; i++) {
|
|
|
|
name = node.attributes[i].name;
|
|
|
|
if (startsWith(name, 'uk-') || startsWith(name, 'data-uk-')) {
|
|
|
|
name = camelize(name.replace('data-uk-', '').replace('uk-', ''));
|
|
|
|
if (UIkit[name]) {
|
|
UIkit[name](node);
|
|
}
|
|
}
|
|
}
|
|
|
|
};
|
|
|
|
UIkit.disconnect = function (node) {
|
|
for (var name in node[DATA]) {
|
|
node[DATA][name]._callDisconnected();
|
|
}
|
|
};
|
|
|
|
};
|
|
|
|
var UIkit$2 = function (options) {
|
|
this._init(options);
|
|
};
|
|
|
|
UIkit$2.util = util;
|
|
UIkit$2.data = '__uikit__';
|
|
UIkit$2.prefix = 'uk-';
|
|
UIkit$2.options = {};
|
|
UIkit$2.instances = {};
|
|
UIkit$2.elements = [];
|
|
|
|
globalAPI(UIkit$2);
|
|
hooksAPI(UIkit$2);
|
|
stateAPI(UIkit$2);
|
|
instanceAPI(UIkit$2);
|
|
componentAPI(UIkit$2);
|
|
|
|
var Class = {
|
|
|
|
init: function init() {
|
|
addClass(this.$el, this.$name);
|
|
}
|
|
|
|
};
|
|
|
|
var Container = {
|
|
|
|
props: {
|
|
container: Boolean
|
|
},
|
|
|
|
defaults: {
|
|
container: true
|
|
},
|
|
|
|
computed: {
|
|
|
|
container: function container(ref) {
|
|
var container = ref.container;
|
|
|
|
return container === true && UIkit$2.container || container && $(container) || UIkit$2.container;
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
var Togglable = {
|
|
|
|
props: {
|
|
cls: Boolean,
|
|
animation: 'list',
|
|
duration: Number,
|
|
origin: String,
|
|
transition: String,
|
|
queued: Boolean
|
|
},
|
|
|
|
defaults: {
|
|
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 hasAnimation(ref) {
|
|
var animation = ref.animation;
|
|
|
|
return !!animation[0];
|
|
},
|
|
|
|
hasTransition: function hasTransition(ref) {
|
|
var animation = ref.animation;
|
|
|
|
return this.hasAnimation && animation[0] === true;
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
toggleElement: function toggleElement(targets, show, animate) {
|
|
var this$1 = this;
|
|
|
|
return new Promise(function (resolve) {
|
|
|
|
targets = toNodes(targets);
|
|
|
|
var all = function (targets) { return Promise.all(targets.map(function (el) { return this$1._toggleElement(el, show, animate); })); },
|
|
toggled = targets.filter(function (el) { return this$1.isToggled(el); }),
|
|
untoggled = targets.filter(function (el) { return !includes(toggled, el); }),
|
|
p;
|
|
|
|
if (!this$1.queued || !isUndefined(animate) || !isUndefined(show) || !this$1.hasAnimation || targets.length < 2) {
|
|
|
|
p = all(untoggled.concat(toggled));
|
|
|
|
} else {
|
|
|
|
var body = doc.body,
|
|
scroll = body.scrollTop,
|
|
el = toggled[0],
|
|
inProgress = Animation.inProgress(el) && hasClass(el, 'uk-animation-leave')
|
|
|| 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, noop);
|
|
|
|
});
|
|
},
|
|
|
|
toggleNow: function toggleNow(targets, show) {
|
|
var this$1 = this;
|
|
|
|
return new Promise(function (resolve) { return Promise.all(toNodes(targets).map(function (el) { return this$1._toggleElement(el, show, false); })).then(resolve, noop); });
|
|
},
|
|
|
|
isToggled: function isToggled(el) {
|
|
var nodes = toNodes(el || this.$el);
|
|
return this.cls
|
|
? hasClass(nodes, this.cls.split(' ')[0])
|
|
: !hasAttr(nodes, 'hidden');
|
|
},
|
|
|
|
updateAria: function updateAria(el) {
|
|
if (this.cls === false) {
|
|
attr(el, 'aria-hidden', !this.isToggled(el));
|
|
}
|
|
},
|
|
|
|
_toggleElement: function _toggleElement(el, show, animate) {
|
|
var this$1 = this;
|
|
|
|
|
|
show = isBoolean(show)
|
|
? show
|
|
: Animation.inProgress(el)
|
|
? hasClass(el, 'uk-animation-leave')
|
|
: Transition.inProgress(el)
|
|
? el.style.height === '0px'
|
|
: !this.isToggled(el);
|
|
|
|
if (!trigger(el, ("before" + (show ? 'show' : 'hide')), [this])) {
|
|
return Promise.reject();
|
|
}
|
|
|
|
var promise = (animate === false || !this.hasAnimation
|
|
? this._toggleImmediate
|
|
: this.hasTransition
|
|
? this._toggleHeight
|
|
: this._toggleAnimation
|
|
)(el, show);
|
|
|
|
trigger(el, show ? 'show' : 'hide', [this]);
|
|
|
|
return promise.then(function () {
|
|
trigger(el, show ? 'shown' : 'hidden', [this$1]);
|
|
UIkit$2.update(null, el);
|
|
});
|
|
},
|
|
|
|
_toggle: function _toggle(el, toggled) {
|
|
|
|
if (this.cls) {
|
|
toggleClass(el, this.cls, includes(this.cls, ' ') ? undefined : toggled);
|
|
} else {
|
|
attr(el, 'hidden', !toggled ? '' : null);
|
|
}
|
|
|
|
$$('[autofocus]', el).some(function (el) { return isVisible(el) && (el.focus() || true); });
|
|
|
|
this.updateAria(el);
|
|
UIkit$2.update(null, el);
|
|
},
|
|
|
|
_toggleImmediate: function _toggleImmediate(el, show) {
|
|
this._toggle(el, show);
|
|
return Promise.resolve();
|
|
},
|
|
|
|
_toggleHeight: function _toggleHeight(el, show) {
|
|
var this$1 = this;
|
|
|
|
|
|
var inProgress = Transition.inProgress(el),
|
|
inner = el.hasChildNodes ? toFloat(css(el.firstElementChild, 'marginTop')) + toFloat(css(el.lastElementChild, 'marginBottom')) : 0,
|
|
currentHeight = isVisible(el) ? height(el) + (inProgress ? 0 : inner) : 0,
|
|
endHeight;
|
|
|
|
Transition.cancel(el);
|
|
|
|
if (!this.isToggled(el)) {
|
|
this._toggle(el, true);
|
|
}
|
|
|
|
height(el, '');
|
|
|
|
// Update child components first
|
|
fastdom.flush();
|
|
|
|
endHeight = height(el) + (inProgress ? 0 : inner);
|
|
height(el, currentHeight);
|
|
|
|
return (show
|
|
? Transition.start(el, assign({}, this.initProps, {overflow: 'hidden', height: endHeight}), Math.round(this.duration * (1 - currentHeight / endHeight)), this.transition)
|
|
: Transition.start(el, this.hideProps, Math.round(this.duration * (currentHeight / endHeight)), this.transition).then(function () { return this$1._toggle(el, false); })
|
|
).then(function () { return css(el, this$1.initProps); });
|
|
|
|
},
|
|
|
|
_toggleAnimation: function _toggleAnimation(el, show) {
|
|
var this$1 = this;
|
|
|
|
|
|
Animation.cancel(el);
|
|
|
|
if (show) {
|
|
this._toggle(el, true);
|
|
return Animation.in(el, this.animation[0], this.duration, this.origin);
|
|
}
|
|
|
|
return Animation.out(el, this.animation[1] || this.animation[0], this.duration, this.origin).then(function () { return this$1._toggle(el, false); });
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
var active;
|
|
|
|
var Modal = {
|
|
|
|
mixins: [Class, Container, Togglable],
|
|
|
|
props: {
|
|
clsPanel: String,
|
|
selClose: String,
|
|
escClose: Boolean,
|
|
bgClose: Boolean,
|
|
stack: Boolean
|
|
},
|
|
|
|
defaults: {
|
|
cls: 'uk-open',
|
|
escClose: true,
|
|
bgClose: true,
|
|
overlay: true,
|
|
stack: false
|
|
},
|
|
|
|
computed: {
|
|
|
|
panel: function panel(ref, $el) {
|
|
var clsPanel = ref.clsPanel;
|
|
|
|
return $$1(("." + clsPanel), $el);
|
|
},
|
|
|
|
transitionElement: function transitionElement() {
|
|
return this.panel;
|
|
},
|
|
|
|
transitionDuration: function transitionDuration() {
|
|
return toMs(css(this.transitionElement, 'transitionDuration'));
|
|
}
|
|
|
|
},
|
|
|
|
events: [
|
|
|
|
{
|
|
|
|
name: 'click',
|
|
|
|
delegate: function delegate() {
|
|
return this.selClose;
|
|
},
|
|
|
|
handler: function handler(e) {
|
|
e.preventDefault();
|
|
this.hide();
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'toggle',
|
|
|
|
handler: function handler(e) {
|
|
|
|
if (e.defaultPrevented) {
|
|
return;
|
|
}
|
|
|
|
e.preventDefault();
|
|
this.toggle();
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'show',
|
|
|
|
self: true,
|
|
|
|
handler: function handler() {
|
|
|
|
if (!hasClass(docEl, this.clsPage)) {
|
|
this.scrollbarWidth = width(win) - docEl.offsetWidth;
|
|
css(doc.body, 'overflowY', this.scrollbarWidth && this.overlay ? 'scroll' : '');
|
|
}
|
|
|
|
addClass(docEl, this.clsPage);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'hidden',
|
|
|
|
self: true,
|
|
|
|
handler: function handler() {
|
|
var this$1 = this;
|
|
|
|
|
|
var found, prev = this.prev;
|
|
|
|
while (prev) {
|
|
|
|
if (prev.clsPage === this$1.clsPage) {
|
|
found = true;
|
|
break;
|
|
}
|
|
|
|
prev = prev.prev;
|
|
|
|
}
|
|
|
|
if (!found) {
|
|
removeClass(docEl, this.clsPage);
|
|
|
|
}
|
|
|
|
!this.prev && css(doc.body, 'overflowY', '');
|
|
}
|
|
|
|
}
|
|
|
|
],
|
|
|
|
methods: {
|
|
|
|
toggle: function toggle() {
|
|
return this.isToggled() ? this.hide() : this.show();
|
|
},
|
|
|
|
show: function show() {
|
|
|
|
if (this.isToggled()) {
|
|
return;
|
|
}
|
|
|
|
if (this.container && this.$el.parentNode !== this.container) {
|
|
append(this.container, this.$el);
|
|
this._callConnected();
|
|
}
|
|
|
|
var prev = active && active !== this && active;
|
|
|
|
active = this;
|
|
|
|
if (prev) {
|
|
if (this.stack) {
|
|
this.prev = prev;
|
|
} else {
|
|
prev.hide().then(this.show);
|
|
return;
|
|
}
|
|
}
|
|
|
|
registerEvents();
|
|
|
|
return this.toggleNow(this.$el, true);
|
|
},
|
|
|
|
hide: function hide() {
|
|
|
|
if (!this.isToggled()) {
|
|
return;
|
|
}
|
|
|
|
active = active && active !== this && active || this.prev;
|
|
|
|
if (!active) {
|
|
deregisterEvents();
|
|
}
|
|
|
|
return this.toggleNow(this.$el, false);
|
|
},
|
|
|
|
getActive: function getActive() {
|
|
return active;
|
|
},
|
|
|
|
_toggleImmediate: function _toggleImmediate(el, show) {
|
|
var this$1 = this;
|
|
|
|
return new Promise(function (resolve) { return requestAnimationFrame(function () {
|
|
this$1._toggle(el, show);
|
|
|
|
if (this$1.transitionDuration) {
|
|
once(this$1.transitionElement, transitionend, resolve, false, function (e) { return e.target === this$1.transitionElement; });
|
|
} else {
|
|
resolve();
|
|
}
|
|
}); }
|
|
);
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
var events;
|
|
|
|
function registerEvents() {
|
|
|
|
if (events) {
|
|
return;
|
|
}
|
|
|
|
events = [
|
|
on(docEl, 'click', function (ref) {
|
|
var target = ref.target;
|
|
var defaultPrevented = ref.defaultPrevented;
|
|
|
|
if (active && active.bgClose && !defaultPrevented && !within(target, active.panel)) {
|
|
active.hide();
|
|
}
|
|
}),
|
|
on(doc, 'keydown', function (e) {
|
|
if (e.keyCode === 27 && active && active.escClose) {
|
|
e.preventDefault();
|
|
active.hide();
|
|
}
|
|
})
|
|
];
|
|
}
|
|
|
|
function deregisterEvents() {
|
|
events && events.forEach(function (unbind) { return unbind(); });
|
|
events = null;
|
|
}
|
|
|
|
var Position = {
|
|
|
|
props: {
|
|
pos: String,
|
|
offset: null,
|
|
flip: Boolean,
|
|
clsPos: String
|
|
},
|
|
|
|
defaults: {
|
|
pos: ("bottom-" + (!isRtl ? 'left' : 'right')),
|
|
flip: true,
|
|
offset: false,
|
|
clsPos: ''
|
|
},
|
|
|
|
computed: {
|
|
|
|
pos: function pos(ref) {
|
|
var pos = ref.pos;
|
|
|
|
return (pos + (!includes(pos, '-') ? '-center' : '')).split('-');
|
|
},
|
|
|
|
dir: function dir() {
|
|
return this.pos[0];
|
|
},
|
|
|
|
align: function align() {
|
|
return this.pos[1];
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
positionAt: function positionAt$1(element, target, boundary) {
|
|
|
|
removeClasses(element, ((this.clsPos) + "-(top|bottom|left|right)(-[a-z]+)?"));
|
|
css(element, {top: '', left: ''});
|
|
|
|
var offset = toNumber(this.offset) || 0,
|
|
axis = this.getAxis();
|
|
var ref = positionAt(
|
|
element,
|
|
target,
|
|
axis === 'x' ? ((flipPosition(this.dir)) + " " + (this.align)) : ((this.align) + " " + (flipPosition(this.dir))),
|
|
axis === 'x' ? ((this.dir) + " " + (this.align)) : ((this.align) + " " + (this.dir)),
|
|
axis === 'x' ? ("" + (this.dir === 'left' ? -1 * offset : offset)) : (" " + (this.dir === 'top' ? -1 * offset : offset)),
|
|
null,
|
|
this.flip,
|
|
boundary
|
|
).target;
|
|
var x = ref.x;
|
|
var y = ref.y;
|
|
|
|
this.dir = axis === 'x' ? x : y;
|
|
this.align = axis === 'x' ? y : x;
|
|
|
|
toggleClass(element, ((this.clsPos) + "-" + (this.dir) + "-" + (this.align)), this.offset === false);
|
|
|
|
},
|
|
|
|
getAxis: function getAxis() {
|
|
return this.dir === 'top' || this.dir === 'bottom' ? 'y' : 'x';
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
var mixin = function (UIkit) {
|
|
|
|
UIkit.mixin.class = Class;
|
|
UIkit.mixin.container = Container;
|
|
UIkit.mixin.modal = Modal;
|
|
UIkit.mixin.position = Position;
|
|
UIkit.mixin.togglable = Togglable;
|
|
|
|
};
|
|
|
|
var Accordion = function (UIkit) {
|
|
|
|
UIkit.component('accordion', {
|
|
|
|
mixins: [Class, Togglable],
|
|
|
|
props: {
|
|
targets: String,
|
|
active: null,
|
|
collapsible: Boolean,
|
|
multiple: Boolean,
|
|
toggle: String,
|
|
content: String,
|
|
transition: String
|
|
},
|
|
|
|
defaults: {
|
|
targets: '> *',
|
|
active: false,
|
|
animation: [true],
|
|
collapsible: true,
|
|
multiple: false,
|
|
clsOpen: 'uk-open',
|
|
toggle: '> .uk-accordion-title',
|
|
content: '> .uk-accordion-content',
|
|
transition: 'ease'
|
|
},
|
|
|
|
computed: {
|
|
|
|
items: function items(ref, $el) {
|
|
var targets = ref.targets;
|
|
|
|
return $$(targets, $el);
|
|
}
|
|
|
|
},
|
|
|
|
events: [
|
|
|
|
{
|
|
|
|
name: 'click',
|
|
|
|
self: true,
|
|
|
|
delegate: function delegate() {
|
|
return ((this.targets) + " " + (this.$props.toggle));
|
|
},
|
|
|
|
handler: function handler(e) {
|
|
e.preventDefault();
|
|
this.toggle(index($$(((this.targets) + " " + (this.$props.toggle)), this.$el), e.current));
|
|
}
|
|
|
|
}
|
|
|
|
],
|
|
|
|
ready: function ready() {
|
|
var active = this.active !== false && this.items[Number(this.active)] && !hasClass(active, this.clsOpen);
|
|
if (active) {
|
|
this.toggle(active, false);
|
|
}
|
|
},
|
|
|
|
update: function update() {
|
|
var this$1 = this;
|
|
|
|
|
|
this.items.forEach(function (el) { return this$1.toggleNow($$1(this$1.content, el), hasClass(el, this$1.clsOpen)); });
|
|
|
|
var active = !this.collapsible && !hasClass(this.items, this.clsOpen) && this.items[0];
|
|
if (active) {
|
|
this.toggle(active, false);
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
|
|
toggle: function toggle(item, animate) {
|
|
var this$1 = this;
|
|
|
|
|
|
var index = getIndex(item, this.items),
|
|
active = filter(this.items, ("." + (this.clsOpen)));
|
|
|
|
item = this.items[index];
|
|
|
|
item && [item]
|
|
.concat(!this.multiple && !includes(active, item) && active || [])
|
|
.forEach(function (el) {
|
|
|
|
var isItem = el === item, state = isItem && !hasClass(el, this$1.clsOpen);
|
|
|
|
if (!state && isItem && !this$1.collapsible && active.length < 2) {
|
|
return;
|
|
}
|
|
|
|
toggleClass(el, this$1.clsOpen, state);
|
|
|
|
var content = el._wrapper ? el._wrapper.firstElementChild : $$1(this$1.content, el);
|
|
|
|
if (!el._wrapper) {
|
|
el._wrapper = wrapAll(content, '<div>');
|
|
attr(el._wrapper, 'hidden', state ? '' : null);
|
|
}
|
|
|
|
this$1._toggleImmediate(content, true);
|
|
this$1.toggleElement(el._wrapper, state, animate).then(function () {
|
|
if (hasClass(el, this$1.clsOpen) === state) {
|
|
|
|
if (!state) {
|
|
this$1._toggleImmediate(content, false);
|
|
}
|
|
|
|
el._wrapper = null;
|
|
unwrap(content);
|
|
}
|
|
});
|
|
|
|
});
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
};
|
|
|
|
var Alert = function (UIkit) {
|
|
|
|
UIkit.component('alert', {
|
|
|
|
attrs: true,
|
|
|
|
mixins: [Class, Togglable],
|
|
|
|
args: 'animation',
|
|
|
|
props: {
|
|
close: String
|
|
},
|
|
|
|
defaults: {
|
|
animation: [true],
|
|
selClose: '.uk-alert-close',
|
|
duration: 150,
|
|
hideProps: assign({opacity: 0}, Togglable.defaults.hideProps)
|
|
},
|
|
|
|
events: [
|
|
|
|
{
|
|
|
|
name: 'click',
|
|
|
|
delegate: function delegate() {
|
|
return this.selClose;
|
|
},
|
|
|
|
handler: function handler(e) {
|
|
e.preventDefault();
|
|
this.close();
|
|
}
|
|
|
|
}
|
|
|
|
],
|
|
|
|
methods: {
|
|
|
|
close: function close() {
|
|
var this$1 = this;
|
|
|
|
this.toggleElement(this.$el).then(function () { return this$1.$destroy(true); });
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
};
|
|
|
|
var Cover = function (UIkit) {
|
|
|
|
UIkit.component('cover', {
|
|
|
|
mixins: [Class, UIkit.components.video.options],
|
|
|
|
props: {
|
|
width: Number,
|
|
height: Number
|
|
},
|
|
|
|
defaults: {
|
|
automute: true
|
|
},
|
|
|
|
update: {
|
|
|
|
write: function write() {
|
|
|
|
var el = this.$el;
|
|
|
|
if (!isVisible(el)) {
|
|
return;
|
|
}
|
|
|
|
var ref = el.parentNode;
|
|
var height = ref.offsetHeight;
|
|
var width = ref.offsetWidth;
|
|
|
|
css(
|
|
css(el, {width: '', height: ''}),
|
|
Dimensions.cover(
|
|
{
|
|
width: this.width || el.clientWidth,
|
|
height: this.height || el.clientHeight
|
|
},
|
|
{
|
|
width: width + (width % 2 ? 1 : 0),
|
|
height: height + (height % 2 ? 1 : 0)
|
|
}
|
|
)
|
|
);
|
|
|
|
},
|
|
|
|
events: ['load', 'resize']
|
|
|
|
},
|
|
|
|
events: {
|
|
|
|
loadedmetadata: function loadedmetadata() {
|
|
this.$emit();
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
};
|
|
|
|
var Drop = function (UIkit) {
|
|
|
|
var active;
|
|
|
|
UIkit.component('drop', {
|
|
|
|
mixins: [Position, Togglable],
|
|
|
|
args: 'pos',
|
|
|
|
props: {
|
|
mode: 'list',
|
|
toggle: Boolean,
|
|
boundary: 'query',
|
|
boundaryAlign: Boolean,
|
|
delayShow: Number,
|
|
delayHide: Number,
|
|
clsDrop: String
|
|
},
|
|
|
|
defaults: {
|
|
mode: ['click', 'hover'],
|
|
toggle: true,
|
|
boundary: win,
|
|
boundaryAlign: false,
|
|
delayShow: 0,
|
|
delayHide: 800,
|
|
clsDrop: false,
|
|
hoverIdle: 200,
|
|
animation: ['uk-animation-fade'],
|
|
cls: 'uk-open'
|
|
},
|
|
|
|
init: function init() {
|
|
this.tracker = new MouseTracker();
|
|
this.clsDrop = this.clsDrop || ("uk-" + (this.$options.name));
|
|
this.clsPos = this.clsDrop;
|
|
|
|
addClass(this.$el, this.clsDrop);
|
|
},
|
|
|
|
ready: function ready() {
|
|
|
|
this.updateAria(this.$el);
|
|
|
|
if (this.toggle) {
|
|
this.toggle = UIkit.toggle(isString(this.toggle) ? query(this.toggle, this.$el) : this.$el.previousElementSibling, {target: this.$el, mode: this.mode});
|
|
}
|
|
|
|
},
|
|
|
|
events: [
|
|
|
|
{
|
|
|
|
name: 'click',
|
|
|
|
delegate: function delegate() {
|
|
return ("." + (this.clsDrop) + "-close");
|
|
},
|
|
|
|
handler: function handler(e) {
|
|
e.preventDefault();
|
|
this.hide(false);
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'click',
|
|
|
|
delegate: function delegate() {
|
|
return 'a[href^="#"]';
|
|
},
|
|
|
|
handler: function handler(e) {
|
|
|
|
if (e.defaultPrevented) {
|
|
return;
|
|
}
|
|
|
|
var id = e.target.hash;
|
|
|
|
if (!id) {
|
|
e.preventDefault();
|
|
}
|
|
|
|
if (!id || !within(id, this.$el)) {
|
|
this.hide(false);
|
|
}
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'beforescroll',
|
|
|
|
handler: function handler() {
|
|
this.hide(false);
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'toggle',
|
|
|
|
self: true,
|
|
|
|
handler: function handler(e, toggle) {
|
|
|
|
e.preventDefault();
|
|
|
|
if (this.isToggled()) {
|
|
this.hide(false);
|
|
} else {
|
|
this.show(toggle, false);
|
|
}
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: pointerEnter,
|
|
|
|
filter: function filter() {
|
|
return includes(this.mode, 'hover');
|
|
},
|
|
|
|
handler: function handler(e) {
|
|
|
|
if (isTouch(e)) {
|
|
return;
|
|
}
|
|
|
|
if (active
|
|
&& active !== this
|
|
&& active.toggle
|
|
&& includes(active.toggle.mode, 'hover')
|
|
&& !within(e.target, active.toggle.$el)
|
|
&& !pointInRect({x: e.pageX, y: e.pageY}, offset(active.$el))
|
|
) {
|
|
active.hide(false);
|
|
}
|
|
|
|
e.preventDefault();
|
|
this.show(this.toggle);
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'toggleshow',
|
|
|
|
handler: function handler(e, toggle) {
|
|
|
|
if (toggle && !includes(toggle.target, this.$el)) {
|
|
return;
|
|
}
|
|
|
|
e.preventDefault();
|
|
this.show(toggle || this.toggle);
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: ("togglehide " + pointerLeave),
|
|
|
|
handler: function handler(e, toggle) {
|
|
|
|
if (isTouch(e) || toggle && !includes(toggle.target, this.$el)) {
|
|
return;
|
|
}
|
|
|
|
e.preventDefault();
|
|
|
|
if (this.toggle && includes(this.toggle.mode, 'hover')) {
|
|
this.hide();
|
|
}
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'beforeshow',
|
|
|
|
self: true,
|
|
|
|
handler: function handler() {
|
|
this.clearTimers();
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'show',
|
|
|
|
self: true,
|
|
|
|
handler: function handler() {
|
|
this.tracker.init();
|
|
addClass(this.toggle.$el, this.cls);
|
|
attr(this.toggle.$el, 'aria-expanded', 'true');
|
|
registerEvent();
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'beforehide',
|
|
|
|
self: true,
|
|
|
|
handler: function handler() {
|
|
this.clearTimers();
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'hide',
|
|
|
|
handler: function handler(ref) {
|
|
var target = ref.target;
|
|
|
|
|
|
if (this.$el !== target) {
|
|
active = active === null && within(target, this.$el) && this.isToggled() ? this : active;
|
|
return;
|
|
}
|
|
|
|
active = this.isActive() ? null : active;
|
|
removeClass(this.toggle.$el, this.cls);
|
|
attr(this.toggle.$el, 'aria-expanded', 'false');
|
|
this.toggle.$el.blur();
|
|
$$('a, button', this.toggle.$el).forEach(function (el) { return el.blur(); });
|
|
this.tracker.cancel();
|
|
}
|
|
|
|
}
|
|
|
|
],
|
|
|
|
update: {
|
|
|
|
write: function write() {
|
|
|
|
if (this.isToggled() && !Animation.inProgress(this.$el)) {
|
|
this.position();
|
|
}
|
|
|
|
},
|
|
|
|
events: ['resize']
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
show: function show(toggle, delay) {
|
|
var this$1 = this;
|
|
if ( delay === void 0 ) delay = true;
|
|
|
|
|
|
var show = function () {
|
|
if (!this$1.isToggled()) {
|
|
this$1.position();
|
|
this$1.toggleElement(this$1.$el, true);
|
|
}
|
|
},
|
|
tryShow = function () {
|
|
|
|
this$1.toggle = toggle || this$1.toggle;
|
|
|
|
this$1.clearTimers();
|
|
|
|
if (this$1.isActive()) {
|
|
return;
|
|
} else if (delay && active && active !== this$1 && active.isDelaying) {
|
|
this$1.showTimer = setTimeout(this$1.show, 10);
|
|
return;
|
|
} else if (this$1.isParentOf(active)) {
|
|
|
|
if (active.hideTimer) {
|
|
active.hide(false);
|
|
} else {
|
|
return;
|
|
}
|
|
|
|
} else if (active && !this$1.isChildOf(active) && !this$1.isParentOf(active)) {
|
|
|
|
var prev;
|
|
while (active && active !== prev && !this$1.isChildOf(active)) {
|
|
prev = active;
|
|
active.hide(false);
|
|
}
|
|
|
|
}
|
|
|
|
if (delay && this$1.delayShow) {
|
|
this$1.showTimer = setTimeout(show, this$1.delayShow);
|
|
} else {
|
|
show();
|
|
}
|
|
|
|
active = this$1;
|
|
};
|
|
|
|
if (toggle && this.toggle && toggle.$el !== this.toggle.$el) {
|
|
|
|
once(this.$el, 'hide', tryShow);
|
|
this.hide(false);
|
|
|
|
} else {
|
|
tryShow();
|
|
}
|
|
},
|
|
|
|
hide: function hide(delay) {
|
|
var this$1 = this;
|
|
if ( delay === void 0 ) delay = true;
|
|
|
|
|
|
var hide = function () { return this$1.toggleNow(this$1.$el, false); };
|
|
|
|
this.clearTimers();
|
|
|
|
this.isDelaying = this.tracker.movesTo(this.$el);
|
|
|
|
if (delay && this.isDelaying) {
|
|
this.hideTimer = setTimeout(this.hide, this.hoverIdle);
|
|
} else if (delay && this.delayHide) {
|
|
this.hideTimer = setTimeout(hide, this.delayHide);
|
|
} else {
|
|
hide();
|
|
}
|
|
},
|
|
|
|
clearTimers: function clearTimers() {
|
|
clearTimeout(this.showTimer);
|
|
clearTimeout(this.hideTimer);
|
|
this.showTimer = null;
|
|
this.hideTimer = null;
|
|
this.isDelaying = false;
|
|
},
|
|
|
|
isActive: function isActive() {
|
|
return active === this;
|
|
},
|
|
|
|
isChildOf: function isChildOf(drop) {
|
|
return drop && drop !== this && within(this.$el, drop.$el);
|
|
},
|
|
|
|
isParentOf: function isParentOf(drop) {
|
|
return drop && drop !== this && within(drop.$el, this.$el);
|
|
},
|
|
|
|
position: function position() {
|
|
|
|
removeClasses(this.$el, ((this.clsDrop) + "-(stack|boundary)"));
|
|
css(this.$el, {top: '', left: '', display: 'block'});
|
|
toggleClass(this.$el, ((this.clsDrop) + "-boundary"), this.boundaryAlign);
|
|
|
|
var boundary = offset(this.boundary),
|
|
alignTo = this.boundaryAlign ? boundary : offset(this.toggle.$el);
|
|
|
|
if (this.align === 'justify') {
|
|
var prop = this.getAxis() === 'y' ? 'width' : 'height';
|
|
css(this.$el, prop, alignTo[prop]);
|
|
} else if (this.$el.offsetWidth > Math.max(boundary.right - alignTo.left, alignTo.right - boundary.left)) {
|
|
addClass(this.$el, ((this.clsDrop) + "-stack"));
|
|
trigger(this.$el, 'stack', [this]);
|
|
}
|
|
|
|
this.positionAt(this.$el, this.boundaryAlign ? this.boundary : this.toggle.$el, this.boundary);
|
|
|
|
css(this.$el, 'display', '');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
UIkit.drop.getActive = function () { return active; };
|
|
|
|
var registered;
|
|
|
|
function registerEvent() {
|
|
|
|
if (registered) {
|
|
return;
|
|
}
|
|
|
|
registered = true;
|
|
on(docEl, 'click', function (ref) {
|
|
var target = ref.target;
|
|
var defaultPrevented = ref.defaultPrevented;
|
|
|
|
var prev;
|
|
|
|
if (defaultPrevented) {
|
|
return;
|
|
}
|
|
|
|
while (active && active !== prev && !within(target, active.$el) && !(active.toggle && within(target, active.toggle.$el))) {
|
|
prev = active;
|
|
active.hide(false);
|
|
}
|
|
});
|
|
}
|
|
|
|
};
|
|
|
|
var Dropdown = function (UIkit) {
|
|
|
|
UIkit.component('dropdown', UIkit.components.drop.extend({name: 'dropdown'}));
|
|
|
|
};
|
|
|
|
var FormCustom = function (UIkit) {
|
|
|
|
UIkit.component('form-custom', {
|
|
|
|
mixins: [Class],
|
|
|
|
args: 'target',
|
|
|
|
props: {
|
|
target: Boolean
|
|
},
|
|
|
|
defaults: {
|
|
target: false
|
|
},
|
|
|
|
computed: {
|
|
|
|
input: function input(_, $el) {
|
|
return $$1(selInput, $el);
|
|
},
|
|
|
|
state: function state() {
|
|
return this.input.nextElementSibling;
|
|
},
|
|
|
|
target: function target(ref, $el) {
|
|
var target = ref.target;
|
|
|
|
return target && (target === true
|
|
&& this.input.parentNode === $el
|
|
&& this.input.nextElementSibling
|
|
|| query(target, $el));
|
|
}
|
|
|
|
},
|
|
|
|
connected: function connected() {
|
|
trigger(this.input, 'change');
|
|
},
|
|
|
|
events: [
|
|
|
|
{
|
|
|
|
name: 'focusin focusout mouseenter mouseleave',
|
|
|
|
delegate: selInput,
|
|
|
|
handler: function handler(ref) {
|
|
var type = ref.type;
|
|
var current = ref.current;
|
|
|
|
if (current === this.input) {
|
|
toggleClass(
|
|
this.state,
|
|
("uk-" + (includes(type, 'focus') ? 'focus' : 'hover')),
|
|
includes(['focusin', 'mouseenter'], type)
|
|
);
|
|
}
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'change',
|
|
|
|
handler: function handler() {
|
|
|
|
var target = this.target, input = this.input, option;
|
|
|
|
if (!target) {
|
|
return;
|
|
}
|
|
|
|
target[isInput(target) ? 'value' : 'textContent'] = input.files && input.files[0]
|
|
? input.files[0].name
|
|
: matches(input, 'select') && (option = $$('option', input).filter(function (el) { return el.selected; })[0])
|
|
? option.textContent
|
|
: input.value;
|
|
}
|
|
|
|
}
|
|
|
|
]
|
|
|
|
});
|
|
|
|
};
|
|
|
|
var Gif = function (UIkit) {
|
|
|
|
UIkit.component('gif', {
|
|
|
|
update: {
|
|
|
|
read: function read() {
|
|
|
|
var inview = isInView(this.$el);
|
|
|
|
if (!this.isInView && inview) {
|
|
this.$el.src = this.$el.src;
|
|
}
|
|
|
|
this.isInView = inview;
|
|
},
|
|
|
|
events: ['scroll', 'load', 'resize']
|
|
}
|
|
|
|
});
|
|
|
|
};
|
|
|
|
var Grid = function (UIkit) {
|
|
|
|
UIkit.component('grid', UIkit.components.margin.extend({
|
|
|
|
mixins: [Class],
|
|
|
|
name: 'grid',
|
|
|
|
defaults: {
|
|
margin: 'uk-grid-margin',
|
|
clsStack: 'uk-grid-stack'
|
|
},
|
|
|
|
update: {
|
|
|
|
write: function write() {
|
|
|
|
toggleClass(this.$el, this.clsStack, this.stacks);
|
|
|
|
},
|
|
|
|
events: ['load', 'resize']
|
|
|
|
}
|
|
|
|
}));
|
|
|
|
};
|
|
|
|
var HeightMatch = function (UIkit) {
|
|
|
|
UIkit.component('height-match', {
|
|
|
|
args: 'target',
|
|
|
|
props: {
|
|
target: String,
|
|
row: Boolean
|
|
},
|
|
|
|
defaults: {
|
|
target: '> *',
|
|
row: true
|
|
},
|
|
|
|
computed: {
|
|
|
|
elements: function elements(ref, $el) {
|
|
var target = ref.target;
|
|
|
|
return $$(target, $el);
|
|
}
|
|
|
|
},
|
|
|
|
update: {
|
|
|
|
read: function read() {
|
|
var this$1 = this;
|
|
|
|
|
|
var lastOffset = false;
|
|
|
|
css(this.elements, 'minHeight', '');
|
|
|
|
this.rows = !this.row
|
|
? [this.match(this.elements)]
|
|
: this.elements.reduce(function (rows, el) {
|
|
|
|
if (lastOffset !== el.offsetTop) {
|
|
rows.push([el]);
|
|
} else {
|
|
rows[rows.length - 1].push(el);
|
|
}
|
|
|
|
lastOffset = el.offsetTop;
|
|
|
|
return rows;
|
|
|
|
}, []).map(function (elements) { return this$1.match(elements); });
|
|
},
|
|
|
|
write: function write() {
|
|
|
|
this.rows.forEach(function (ref) {
|
|
var height = ref.height;
|
|
var elements = ref.elements;
|
|
|
|
return css(elements, 'minHeight', height);
|
|
});
|
|
|
|
},
|
|
|
|
events: ['load', 'resize']
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
match: function match(elements) {
|
|
|
|
if (elements.length < 2) {
|
|
return {};
|
|
}
|
|
|
|
var max = 0, heights = [];
|
|
|
|
elements
|
|
.forEach(function (el) {
|
|
|
|
var style, hidden;
|
|
|
|
if (!isVisible(el)) {
|
|
style = attr(el, 'style');
|
|
hidden = attr(el, 'hidden');
|
|
|
|
attr(el, {
|
|
style: ((style || '') + ";display:block !important;"),
|
|
hidden: null
|
|
});
|
|
}
|
|
|
|
max = Math.max(max, el.offsetHeight);
|
|
heights.push(el.offsetHeight);
|
|
|
|
if (!isUndefined(style)) {
|
|
attr(el, {style: style, hidden: hidden});
|
|
}
|
|
|
|
});
|
|
|
|
elements = elements.filter(function (el, i) { return heights[i] < max; });
|
|
|
|
return {height: max, elements: elements};
|
|
}
|
|
}
|
|
|
|
});
|
|
|
|
};
|
|
|
|
var HeightViewport = function (UIkit) {
|
|
|
|
UIkit.component('height-viewport', {
|
|
|
|
props: {
|
|
expand: Boolean,
|
|
offsetTop: Boolean,
|
|
offsetBottom: Boolean,
|
|
minHeight: Number
|
|
},
|
|
|
|
defaults: {
|
|
expand: false,
|
|
offsetTop: false,
|
|
offsetBottom: false,
|
|
minHeight: 0
|
|
},
|
|
|
|
update: {
|
|
|
|
write: function write() {
|
|
|
|
css(this.$el, 'boxSizing', 'border-box');
|
|
|
|
var viewport = height(win), minHeight, offsetTop = 0;
|
|
|
|
if (this.expand) {
|
|
|
|
css(this.$el, {height: '', minHeight: ''});
|
|
|
|
var diff = viewport - offsetHeight(docEl);
|
|
|
|
if (diff > 0) {
|
|
minHeight = offsetHeight(this.$el) + diff;
|
|
}
|
|
|
|
} else {
|
|
|
|
var top = offset(this.$el).top;
|
|
|
|
if (top < viewport / 2 && this.offsetTop) {
|
|
offsetTop += top;
|
|
}
|
|
|
|
if (this.offsetBottom === true) {
|
|
|
|
offsetTop += offsetHeight(this.$el.nextElementSibling);
|
|
|
|
} else if (isNumeric(this.offsetBottom)) {
|
|
|
|
offsetTop += (viewport / 100) * this.offsetBottom;
|
|
|
|
} else if (this.offsetBottom && endsWith(this.offsetBottom, 'px')) {
|
|
|
|
offsetTop += toFloat(this.offsetBottom);
|
|
|
|
} else if (isString(this.offsetBottom)) {
|
|
|
|
offsetTop += offsetHeight(query(this.offsetBottom, this.$el));
|
|
|
|
}
|
|
|
|
// on mobile devices (iOS and Android) window.innerHeight !== 100vh
|
|
minHeight = offsetTop ? ("calc(100vh - " + offsetTop + "px)") : '100vh';
|
|
|
|
}
|
|
|
|
if (!minHeight) {
|
|
return;
|
|
}
|
|
|
|
css(this.$el, {height: '', minHeight: minHeight});
|
|
|
|
var elHeight = this.$el.offsetHeight;
|
|
if (this.minHeight && this.minHeight > elHeight) {
|
|
css(this.$el, 'minHeight', this.minHeight);
|
|
}
|
|
|
|
// IE 10-11 fix (min-height on a flex container won't apply to its flex items)
|
|
if (viewport - offsetTop >= elHeight) {
|
|
css(this.$el, 'height', minHeight);
|
|
}
|
|
|
|
},
|
|
|
|
events: ['load', 'resize']
|
|
|
|
}
|
|
|
|
});
|
|
|
|
function offsetHeight(el) {
|
|
return el && el.offsetHeight || 0;
|
|
}
|
|
|
|
};
|
|
|
|
var Hover = function (UIkit) {
|
|
|
|
ready(function () {
|
|
|
|
if (!hasTouch) {
|
|
return;
|
|
}
|
|
|
|
var cls = 'uk-hover';
|
|
|
|
on(doc, 'tap', function (ref) {
|
|
var target = ref.target;
|
|
|
|
return $$(("." + cls)).forEach(function (_, el) { return !within(target, el) && removeClass(el, cls); }
|
|
);
|
|
}
|
|
);
|
|
|
|
Object.defineProperty(UIkit, 'hoverSelector', {
|
|
|
|
set: function set(selector) {
|
|
on(doc, 'tap', selector, function (ref) {
|
|
var current = ref.current;
|
|
|
|
return addClass(current, cls);
|
|
});
|
|
}
|
|
|
|
});
|
|
|
|
UIkit.hoverSelector = '.uk-animation-toggle, .uk-transition-toggle, [uk-hover]';
|
|
|
|
});
|
|
|
|
};
|
|
|
|
var closeIcon = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" xmlns=\"http://www.w3.org/2000/svg\"><line fill=\"none\" stroke=\"#000\" stroke-width=\"1.1\" x1=\"1\" y1=\"1\" x2=\"13\" y2=\"13\"></line><line fill=\"none\" stroke=\"#000\" stroke-width=\"1.1\" x1=\"13\" y1=\"1\" x2=\"1\" y2=\"13\"></line></svg>";
|
|
|
|
var closeLarge = "<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><line fill=\"none\" stroke=\"#000\" stroke-width=\"1.4\" x1=\"1\" y1=\"1\" x2=\"19\" y2=\"19\"></line><line fill=\"none\" stroke=\"#000\" stroke-width=\"1.4\" x1=\"19\" y1=\"1\" x2=\"1\" y2=\"19\"></line></svg>";
|
|
|
|
var marker = "<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><rect x=\"9\" y=\"4\" width=\"1\" height=\"11\"></rect><rect x=\"4\" y=\"9\" width=\"11\" height=\"1\"></rect></svg>";
|
|
|
|
var navbarToggleIcon = "<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><rect y=\"9\" width=\"20\" height=\"2\"></rect><rect y=\"3\" width=\"20\" height=\"2\"></rect><rect y=\"15\" width=\"20\" height=\"2\"></rect></svg>";
|
|
|
|
var overlayIcon = "<svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" xmlns=\"http://www.w3.org/2000/svg\"><rect x=\"19\" y=\"0\" width=\"1\" height=\"40\"></rect><rect x=\"0\" y=\"19\" width=\"40\" height=\"1\"></rect></svg>";
|
|
|
|
var paginationNext = "<svg width=\"7\" height=\"12\" viewBox=\"0 0 7 12\" xmlns=\"http://www.w3.org/2000/svg\"><polyline fill=\"none\" stroke=\"#000\" stroke-width=\"1.2\" points=\"1 1 6 6 1 11\"></polyline></svg>";
|
|
|
|
var paginationPrevious = "<svg width=\"7\" height=\"12\" viewBox=\"0 0 7 12\" xmlns=\"http://www.w3.org/2000/svg\"><polyline fill=\"none\" stroke=\"#000\" stroke-width=\"1.2\" points=\"6 1 1 6 6 11\"></polyline></svg>";
|
|
|
|
var searchIcon = "<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><circle fill=\"none\" stroke=\"#000\" stroke-width=\"1.1\" cx=\"9\" cy=\"9\" r=\"7\"></circle><path fill=\"none\" stroke=\"#000\" stroke-width=\"1.1\" d=\"M14,14 L18,18 L14,14 Z\"></path></svg>";
|
|
|
|
var searchLarge = "<svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" xmlns=\"http://www.w3.org/2000/svg\"><circle fill=\"none\" stroke=\"#000\" stroke-width=\"1.8\" cx=\"17.5\" cy=\"17.5\" r=\"16.5\"></circle><line fill=\"none\" stroke=\"#000\" stroke-width=\"1.8\" x1=\"38\" y1=\"39\" x2=\"29\" y2=\"30\"></line></svg>";
|
|
|
|
var searchNavbar = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><circle fill=\"none\" stroke=\"#000\" stroke-width=\"1.1\" cx=\"10.5\" cy=\"10.5\" r=\"9.5\"/><line fill=\"none\" stroke=\"#000\" stroke-width=\"1.1\" x1=\"23\" y1=\"23\" x2=\"17\" y2=\"17\"/></svg>";
|
|
|
|
var slidenavNext = "<svg width=\"14px\" height=\"24px\" viewBox=\"0 0 14 24\" xmlns=\"http://www.w3.org/2000/svg\"><polyline fill=\"none\" stroke=\"#000\" stroke-width=\"1.4\" points=\"1.225,23 12.775,12 1.225,1 \"></polyline></svg>";
|
|
|
|
var slidenavNextLarge = "<svg width=\"25px\" height=\"40px\" viewBox=\"0 0 25 40\" xmlns=\"http://www.w3.org/2000/svg\"><polyline fill=\"none\" stroke=\"#000\" stroke-width=\"2\" points=\"4.002,38.547 22.527,20.024 4,1.5 \"></polyline></svg>";
|
|
|
|
var slidenavPrevious = "<svg width=\"14px\" height=\"24px\" viewBox=\"0 0 14 24\" xmlns=\"http://www.w3.org/2000/svg\"><polyline fill=\"none\" stroke=\"#000\" stroke-width=\"1.4\" points=\"12.775,1 1.225,12 12.775,23 \"></polyline></svg>";
|
|
|
|
var slidenavPreviousLarge = "<svg width=\"25px\" height=\"40px\" viewBox=\"0 0 25 40\" xmlns=\"http://www.w3.org/2000/svg\"><polyline fill=\"none\" stroke=\"#000\" stroke-width=\"2\" points=\"20.527,1.5 2,20.024 20.525,38.547 \"></polyline></svg>";
|
|
|
|
var spinner = "<svg width=\"30\" height=\"30\" viewBox=\"0 0 30 30\" xmlns=\"http://www.w3.org/2000/svg\"><circle fill=\"none\" stroke=\"#000\" cx=\"15\" cy=\"15\" r=\"14\"></circle></svg>";
|
|
|
|
var totop = "<svg width=\"18\" height=\"10\" viewBox=\"0 0 18 10\" xmlns=\"http://www.w3.org/2000/svg\"><polyline fill=\"none\" stroke=\"#000\" stroke-width=\"1.2\" points=\"1 9 9 1 17 9 \"></polyline></svg>";
|
|
|
|
var Icon = function (UIkit) {
|
|
|
|
var parsed = {},
|
|
icons = {
|
|
spinner: spinner,
|
|
totop: totop,
|
|
marker: marker,
|
|
'close-icon': closeIcon,
|
|
'close-large': closeLarge,
|
|
'navbar-toggle-icon': navbarToggleIcon,
|
|
'overlay-icon': overlayIcon,
|
|
'pagination-next': paginationNext,
|
|
'pagination-previous': paginationPrevious,
|
|
'search-icon': searchIcon,
|
|
'search-large': searchLarge,
|
|
'search-navbar': searchNavbar,
|
|
'slidenav-next': slidenavNext,
|
|
'slidenav-next-large': slidenavNextLarge,
|
|
'slidenav-previous': slidenavPrevious,
|
|
'slidenav-previous-large': slidenavPreviousLarge
|
|
};
|
|
|
|
UIkit.component('icon', UIkit.components.svg.extend({
|
|
|
|
attrs: ['icon', 'ratio'],
|
|
|
|
mixins: [Class],
|
|
|
|
name: 'icon',
|
|
|
|
args: 'icon',
|
|
|
|
props: ['icon'],
|
|
|
|
defaults: {exclude: ['id', 'style', 'class', 'src', 'icon']},
|
|
|
|
init: function init() {
|
|
addClass(this.$el, 'uk-icon');
|
|
|
|
if (isRtl) {
|
|
this.icon = swap(swap(this.icon, 'left', 'right'), 'previous', 'next');
|
|
}
|
|
},
|
|
|
|
disconnected: function disconnected() {
|
|
delete this.delay;
|
|
},
|
|
|
|
methods: {
|
|
|
|
getSvg: function getSvg() {
|
|
|
|
var icon = getIcon(this.icon);
|
|
|
|
if (!icon) {
|
|
return Promise.reject('Icon not found.');
|
|
}
|
|
|
|
return Promise.resolve(icon);
|
|
}
|
|
|
|
}
|
|
|
|
}));
|
|
|
|
[
|
|
'marker',
|
|
'navbar-toggle-icon',
|
|
'overlay-icon',
|
|
'pagination-previous',
|
|
'pagination-next',
|
|
'totop'
|
|
].forEach(function (name) { return registerComponent(name); });
|
|
|
|
[
|
|
'slidenav-previous',
|
|
'slidenav-next'
|
|
].forEach(function (name) { return registerComponent(name, {
|
|
|
|
init: function init() {
|
|
addClass(this.$el, 'uk-slidenav');
|
|
|
|
if (hasClass(this.$el, 'uk-slidenav-large')) {
|
|
this.icon += '-large';
|
|
}
|
|
}
|
|
|
|
}); });
|
|
|
|
registerComponent('search-icon', {
|
|
|
|
init: function init() {
|
|
if (hasClass(this.$el, 'uk-search-icon') && parents(this.$el, '.uk-search-large').length) {
|
|
this.icon = 'search-large';
|
|
} else if (parents(this.$el, '.uk-search-navbar').length) {
|
|
this.icon = 'search-navbar';
|
|
}
|
|
}
|
|
|
|
});
|
|
|
|
registerComponent('close', {
|
|
|
|
init: function init() {
|
|
this.icon = "close-" + (hasClass(this.$el, 'uk-close-large') ? 'large' : 'icon');
|
|
}
|
|
|
|
});
|
|
|
|
registerComponent('spinner', {
|
|
|
|
connected: function connected() {
|
|
var this$1 = this;
|
|
|
|
this.svg.then(function (svg) { return this$1.ratio !== 1 && css($$1('circle', svg), 'stroke-width', 1 / this$1.ratio); }, noop);
|
|
}
|
|
|
|
});
|
|
|
|
UIkit.icon.add = function (added) {
|
|
Object.keys(added).forEach(function (name) {
|
|
icons[name] = added[name];
|
|
delete parsed[name];
|
|
});
|
|
|
|
if (UIkit._initialized) {
|
|
each(UIkit.instances, function (component) {
|
|
if (component.$options.name === 'icon') {
|
|
component.$reset();
|
|
}
|
|
});
|
|
}
|
|
};
|
|
|
|
function registerComponent(name, mixin$$1) {
|
|
|
|
UIkit.component(name, UIkit.components.icon.extend({
|
|
|
|
name: name,
|
|
|
|
mixins: mixin$$1 ? [mixin$$1] : [],
|
|
|
|
defaults: {
|
|
icon: name
|
|
}
|
|
|
|
}));
|
|
}
|
|
|
|
function getIcon(icon) {
|
|
|
|
if (!icons[icon]) {
|
|
return null;
|
|
}
|
|
|
|
if (!parsed[icon]) {
|
|
parsed[icon] = $$1(icons[icon].trim());
|
|
}
|
|
|
|
return parsed[icon];
|
|
}
|
|
|
|
};
|
|
|
|
var Leader = function (UIkit) {
|
|
|
|
UIkit.component('leader', {
|
|
|
|
mixins: [Class],
|
|
|
|
props: {
|
|
fill: String,
|
|
media: 'media'
|
|
},
|
|
|
|
defaults: {
|
|
fill: '',
|
|
media: false,
|
|
clsWrapper: 'uk-leader-fill',
|
|
clsHide: 'uk-leader-hide',
|
|
attrFill: 'data-fill'
|
|
},
|
|
|
|
computed: {
|
|
|
|
fill: function fill(ref) {
|
|
var fill = ref.fill;
|
|
|
|
return fill || getCssVar('leader-fill');
|
|
}
|
|
|
|
},
|
|
|
|
connected: function connected() {
|
|
this.wrapper = wrapInner(this.$el, ("<span class=\"" + (this.clsWrapper) + "\">"))[0];
|
|
},
|
|
|
|
disconnected: function disconnected() {
|
|
unwrap(this.wrapper.childNodes);
|
|
delete this._width;
|
|
},
|
|
|
|
update: [
|
|
|
|
{
|
|
|
|
read: function read() {
|
|
var prev = this._width;
|
|
this._width = Math.floor(this.$el.offsetWidth / 2);
|
|
this._changed = prev !== this._width;
|
|
this._hide = this.media && !win.matchMedia(this.media).matches;
|
|
},
|
|
|
|
write: function write() {
|
|
|
|
toggleClass(this.wrapper, this.clsHide, this._hide);
|
|
|
|
if (this._changed) {
|
|
attr(this.wrapper, this.attrFill, new Array(this._width).join(this.fill));
|
|
}
|
|
|
|
},
|
|
|
|
events: ['load', 'resize']
|
|
|
|
}
|
|
]
|
|
});
|
|
|
|
};
|
|
|
|
var Margin = function (UIkit) {
|
|
|
|
UIkit.component('margin', {
|
|
|
|
props: {
|
|
margin: String,
|
|
firstColumn: Boolean
|
|
},
|
|
|
|
defaults: {
|
|
margin: 'uk-margin-small-top',
|
|
firstColumn: 'uk-first-column'
|
|
},
|
|
|
|
update: {
|
|
|
|
read: function read() {
|
|
var this$1 = this;
|
|
|
|
|
|
var items = this.$el.children;
|
|
|
|
if (!items.length || !isVisible(this.$el)) {
|
|
this.rows = false;
|
|
return;
|
|
}
|
|
|
|
this.stacks = true;
|
|
|
|
var rows = [[]];
|
|
|
|
for (var i = 0; i < items.length; i++) {
|
|
|
|
var el = items[i],
|
|
dim = el.getBoundingClientRect();
|
|
|
|
if (!dim.height) {
|
|
continue;
|
|
}
|
|
|
|
for (var j = rows.length - 1; j >= 0; j--) {
|
|
|
|
var row = rows[j];
|
|
|
|
if (!row[0]) {
|
|
row.push(el);
|
|
break;
|
|
}
|
|
|
|
var leftDim = row[0].getBoundingClientRect();
|
|
|
|
if (dim.top >= Math.floor(leftDim.bottom)) {
|
|
rows.push([el]);
|
|
break;
|
|
}
|
|
|
|
if (Math.floor(dim.bottom) > leftDim.top) {
|
|
|
|
this$1.stacks = false;
|
|
|
|
if (dim.left < leftDim.left && !isRtl) {
|
|
row.unshift(el);
|
|
break;
|
|
}
|
|
|
|
row.push(el);
|
|
break;
|
|
}
|
|
|
|
if (j === 0) {
|
|
rows.unshift([el]);
|
|
break;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
this.rows = rows;
|
|
|
|
},
|
|
|
|
write: function write() {
|
|
var this$1 = this;
|
|
|
|
|
|
this.rows && this.rows.forEach(function (row, i) { return row.forEach(function (el, j) {
|
|
toggleClass(el, this$1.margin, i !== 0);
|
|
toggleClass(el, this$1.firstColumn, j === 0);
|
|
}); }
|
|
);
|
|
|
|
},
|
|
|
|
events: ['load', 'resize']
|
|
|
|
}
|
|
|
|
});
|
|
|
|
};
|
|
|
|
var Modal$1 = function (UIkit) {
|
|
|
|
UIkit.component('modal', {
|
|
|
|
mixins: [Modal],
|
|
|
|
defaults: {
|
|
clsPage: 'uk-modal-page',
|
|
clsPanel: 'uk-modal-dialog',
|
|
selClose: '.uk-modal-close, .uk-modal-close-default, .uk-modal-close-outside, .uk-modal-close-full'
|
|
},
|
|
|
|
events: [
|
|
|
|
{
|
|
name: 'show',
|
|
|
|
self: true,
|
|
|
|
handler: function handler() {
|
|
|
|
if (hasClass(this.panel, 'uk-margin-auto-vertical')) {
|
|
addClass(this.$el, 'uk-flex');
|
|
} else {
|
|
css(this.$el, 'display', 'block');
|
|
}
|
|
|
|
height(this.$el); // force reflow
|
|
}
|
|
},
|
|
|
|
{
|
|
name: 'hidden',
|
|
|
|
self: true,
|
|
|
|
handler: function handler() {
|
|
|
|
css(this.$el, 'display', '');
|
|
removeClass(this.$el, 'uk-flex');
|
|
|
|
}
|
|
}
|
|
|
|
]
|
|
|
|
});
|
|
|
|
UIkit.component('overflow-auto', {
|
|
|
|
mixins: [Class],
|
|
|
|
computed: {
|
|
|
|
modal: function modal(_, $el) {
|
|
return closest($el, '.uk-modal');
|
|
},
|
|
|
|
panel: function panel(_, $el) {
|
|
return closest($el, '.uk-modal-dialog');
|
|
}
|
|
|
|
},
|
|
|
|
connected: function connected() {
|
|
css(this.$el, 'minHeight', 150);
|
|
},
|
|
|
|
update: {
|
|
|
|
write: function write() {
|
|
|
|
if (!this.panel || !this.modal) {
|
|
return;
|
|
}
|
|
|
|
var current = css(this.$el, 'maxHeight');
|
|
|
|
css(css(this.$el, 'maxHeight', 150), 'maxHeight', Math.max(150, 150 + height(this.modal) - this.panel.offsetHeight));
|
|
if (current !== css(this.$el, 'maxHeight')) {
|
|
trigger(this.$el, 'resize');
|
|
}
|
|
},
|
|
|
|
events: ['load', 'resize']
|
|
|
|
}
|
|
|
|
});
|
|
|
|
UIkit.modal.dialog = function (content, options) {
|
|
|
|
var dialog = UIkit.modal((" <div class=\"uk-modal\"> <div class=\"uk-modal-dialog\">" + content + "</div> </div> "), options);
|
|
|
|
on(dialog.$el, 'hidden', function (ref) {
|
|
var target = ref.target;
|
|
var current = ref.current;
|
|
|
|
if (target === current) {
|
|
dialog.$destroy(true);
|
|
}
|
|
});
|
|
dialog.show();
|
|
|
|
return dialog;
|
|
};
|
|
|
|
UIkit.modal.alert = function (message, options) {
|
|
|
|
options = assign({bgClose: false, escClose: false, labels: UIkit.modal.labels}, options);
|
|
|
|
return new Promise(
|
|
function (resolve) { return on(UIkit.modal.dialog((" <div class=\"uk-modal-body\">" + (isString(message) ? message : html(message)) + "</div> <div class=\"uk-modal-footer uk-text-right\"> <button class=\"uk-button uk-button-primary uk-modal-close\" autofocus>" + (options.labels.ok) + "</button> </div> "), options).$el, 'hide', resolve); }
|
|
);
|
|
};
|
|
|
|
UIkit.modal.confirm = function (message, options) {
|
|
|
|
options = assign({bgClose: false, escClose: false, labels: UIkit.modal.labels}, options);
|
|
|
|
return new Promise(
|
|
function (resolve, reject) { return on(UIkit.modal.dialog((" <div class=\"uk-modal-body\">" + (isString(message) ? message : html(message)) + "</div> <div class=\"uk-modal-footer uk-text-right\"> <button class=\"uk-button uk-button-default uk-modal-close\">" + (options.labels.cancel) + "</button> <button class=\"uk-button uk-button-primary uk-modal-close\" autofocus>" + (options.labels.ok) + "</button> </div> "), options).$el, 'click', '.uk-modal-footer button', function (ref) {
|
|
var target = ref.target;
|
|
|
|
return index(target) === 0 ? reject() : resolve();
|
|
}); }
|
|
);
|
|
};
|
|
|
|
UIkit.modal.prompt = function (message, value, options) {
|
|
|
|
options = assign({bgClose: false, escClose: false, labels: UIkit.modal.labels}, options);
|
|
|
|
return new Promise(function (resolve) {
|
|
|
|
var resolved = false,
|
|
prompt = UIkit.modal.dialog((" <form class=\"uk-form-stacked\"> <div class=\"uk-modal-body\"> <label>" + (isString(message) ? message : html(message)) + "</label> <input class=\"uk-input\" autofocus> </div> <div class=\"uk-modal-footer uk-text-right\"> <button class=\"uk-button uk-button-default uk-modal-close\" type=\"button\">" + (options.labels.cancel) + "</button> <button class=\"uk-button uk-button-primary\">" + (options.labels.ok) + "</button> </div> </form> "), options),
|
|
input = $$1('input', prompt.$el);
|
|
|
|
input.value = value;
|
|
|
|
on(prompt.$el, 'submit', 'form', function (e) {
|
|
e.preventDefault();
|
|
resolve(input.value);
|
|
resolved = true;
|
|
prompt.hide();
|
|
});
|
|
on(prompt.$el, 'hide', function () {
|
|
if (!resolved) {
|
|
resolve(null);
|
|
}
|
|
});
|
|
|
|
});
|
|
};
|
|
|
|
UIkit.modal.labels = {
|
|
ok: 'Ok',
|
|
cancel: 'Cancel'
|
|
};
|
|
|
|
};
|
|
|
|
var Nav = function (UIkit) {
|
|
|
|
UIkit.component('nav', UIkit.components.accordion.extend({
|
|
|
|
name: 'nav',
|
|
|
|
defaults: {
|
|
targets: '> .uk-parent',
|
|
toggle: '> a',
|
|
content: '> ul'
|
|
}
|
|
|
|
}));
|
|
|
|
};
|
|
|
|
var Navbar = function (UIkit) {
|
|
|
|
UIkit.component('navbar', {
|
|
|
|
mixins: [Class],
|
|
|
|
props: {
|
|
dropdown: String,
|
|
mode: 'list',
|
|
align: String,
|
|
offset: Number,
|
|
boundary: Boolean,
|
|
boundaryAlign: Boolean,
|
|
clsDrop: String,
|
|
delayShow: Number,
|
|
delayHide: Number,
|
|
dropbar: Boolean,
|
|
dropbarMode: String,
|
|
dropbarAnchor: 'query',
|
|
duration: Number
|
|
},
|
|
|
|
defaults: {
|
|
dropdown: '.uk-navbar-nav > li',
|
|
align: !isRtl ? 'left' : 'right',
|
|
clsDrop: 'uk-navbar-dropdown',
|
|
mode: undefined,
|
|
offset: undefined,
|
|
delayShow: undefined,
|
|
delayHide: undefined,
|
|
boundaryAlign: undefined,
|
|
flip: 'x',
|
|
boundary: true,
|
|
dropbar: false,
|
|
dropbarMode: 'slide',
|
|
dropbarAnchor: false,
|
|
duration: 200,
|
|
},
|
|
|
|
computed: {
|
|
|
|
boundary: function boundary(ref, $el) {
|
|
var boundary = ref.boundary;
|
|
var boundaryAlign = ref.boundaryAlign;
|
|
|
|
return (boundary === true || boundaryAlign) ? $el : boundary
|
|
},
|
|
|
|
pos: function pos(ref) {
|
|
var align = ref.align;
|
|
|
|
return ("bottom-" + align);
|
|
}
|
|
|
|
},
|
|
|
|
ready: function ready() {
|
|
|
|
if (this.dropbar) {
|
|
UIkit.navbarDropbar(
|
|
query(this.dropbar, this.$el) || after(this.dropbarAnchor || this.$el, '<div></div>'),
|
|
{clsDrop: this.clsDrop, mode: this.dropbarMode, duration: this.duration, navbar: this}
|
|
);
|
|
}
|
|
|
|
},
|
|
|
|
update: function update() {
|
|
|
|
UIkit.drop(
|
|
$$(((this.dropdown) + " ." + (this.clsDrop)), this.$el).filter(function (el) { return !UIkit.getComponent(el, 'dropdown'); }),
|
|
assign({}, this.$props, {boundary: this.boundary, pos: this.pos})
|
|
);
|
|
|
|
},
|
|
|
|
events: [
|
|
|
|
{
|
|
name: 'mouseover',
|
|
|
|
delegate: function delegate() {
|
|
return this.dropdown;
|
|
},
|
|
|
|
handler: function handler(ref) {
|
|
var current = ref.current;
|
|
|
|
var active = this.getActive();
|
|
if (active && active.toggle && !within(active.toggle.$el, current) && !active.tracker.movesTo(active.$el)) {
|
|
active.hide(false);
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
],
|
|
|
|
methods: {
|
|
|
|
getActive: function getActive() {
|
|
var active = UIkit.drop.getActive();
|
|
return active && includes(active.mode, 'hover') && within(active.toggle.$el, this.$el) && active;
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
UIkit.component('navbar-dropbar', {
|
|
|
|
mixins: [Class],
|
|
|
|
defaults: {
|
|
clsDrop: '',
|
|
mode: 'slide',
|
|
navbar: null,
|
|
duration: 200
|
|
},
|
|
|
|
init: function init() {
|
|
|
|
if (this.mode === 'slide') {
|
|
addClass(this.$el, 'uk-navbar-dropbar-slide');
|
|
}
|
|
|
|
},
|
|
|
|
events: [
|
|
|
|
{
|
|
name: 'beforeshow',
|
|
|
|
el: function el() {
|
|
return this.navbar.$el;
|
|
},
|
|
|
|
handler: function handler(e, drop) {
|
|
var $el = drop.$el;
|
|
var dir = drop.dir;
|
|
if (dir === 'bottom' && !within($el, this.$el)) {
|
|
append(this.$el, $el);
|
|
drop.show();
|
|
e.preventDefault();
|
|
}
|
|
}
|
|
},
|
|
|
|
{
|
|
name: 'mouseleave',
|
|
|
|
handler: function handler() {
|
|
var active = this.navbar.getActive();
|
|
|
|
if (active && !matches(this.$el, ':hover')) {
|
|
active.hide();
|
|
}
|
|
}
|
|
},
|
|
|
|
{
|
|
name: 'show',
|
|
|
|
handler: function handler(_, ref) {
|
|
var $el = ref.$el;
|
|
|
|
this.clsDrop && addClass($el, ((this.clsDrop) + "-dropbar"));
|
|
this.transitionTo($el.offsetHeight + toFloat(css($el, 'margin-top')) + toFloat(css($el, 'margin-bottom')));
|
|
}
|
|
},
|
|
|
|
{
|
|
name: 'beforehide',
|
|
|
|
handler: function handler(e, ref) {
|
|
var $el = ref.$el;
|
|
|
|
|
|
var active = this.navbar.getActive();
|
|
|
|
if (matches(this.$el, ':hover') && active && active.$el === $el) {
|
|
e.preventDefault();
|
|
}
|
|
}
|
|
},
|
|
|
|
{
|
|
name: 'hide',
|
|
|
|
handler: function handler(_, ref) {
|
|
var $el = ref.$el;
|
|
|
|
|
|
var active = this.navbar.getActive();
|
|
|
|
if (!active || active && active.$el === $el) {
|
|
this.transitionTo(0);
|
|
}
|
|
}
|
|
}
|
|
|
|
],
|
|
|
|
methods: {
|
|
|
|
transitionTo: function transitionTo(newHeight) {
|
|
height(this.$el, isVisible(this.$el) ? height(this.$el) : 0);
|
|
Transition.cancel(this.$el);
|
|
return Transition.start(this.$el, {height: newHeight}, this.duration).catch(noop);
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
};
|
|
|
|
var scroll;
|
|
|
|
var Offcanvas = function (UIkit) {
|
|
|
|
UIkit.component('offcanvas', {
|
|
|
|
mixins: [Modal],
|
|
|
|
args: 'mode',
|
|
|
|
props: {
|
|
content: String,
|
|
mode: String,
|
|
flip: Boolean,
|
|
overlay: Boolean
|
|
},
|
|
|
|
defaults: {
|
|
content: '.uk-offcanvas-content',
|
|
mode: 'slide',
|
|
flip: false,
|
|
overlay: false,
|
|
clsPage: 'uk-offcanvas-page',
|
|
clsContainer: 'uk-offcanvas-container',
|
|
clsPanel: 'uk-offcanvas-bar',
|
|
clsFlip: 'uk-offcanvas-flip',
|
|
clsContent: 'uk-offcanvas-content',
|
|
clsContentAnimation: 'uk-offcanvas-content-animation',
|
|
clsSidebarAnimation: 'uk-offcanvas-bar-animation',
|
|
clsMode: 'uk-offcanvas',
|
|
clsOverlay: 'uk-offcanvas-overlay',
|
|
selClose: '.uk-offcanvas-close'
|
|
},
|
|
|
|
computed: {
|
|
|
|
content: function content(ref) {
|
|
var content = ref.content;
|
|
|
|
return $$1(content);
|
|
},
|
|
|
|
clsFlip: function clsFlip(ref) {
|
|
var flip = ref.flip;
|
|
var clsFlip = ref.clsFlip;
|
|
|
|
return flip ? clsFlip : '';
|
|
},
|
|
|
|
clsOverlay: function clsOverlay(ref) {
|
|
var overlay = ref.overlay;
|
|
var clsOverlay = ref.clsOverlay;
|
|
|
|
return overlay ? clsOverlay : '';
|
|
},
|
|
|
|
clsMode: function clsMode(ref) {
|
|
var mode = ref.mode;
|
|
var clsMode = ref.clsMode;
|
|
|
|
return (clsMode + "-" + mode);
|
|
},
|
|
|
|
clsSidebarAnimation: function clsSidebarAnimation(ref) {
|
|
var mode = ref.mode;
|
|
var clsSidebarAnimation = ref.clsSidebarAnimation;
|
|
|
|
return mode === 'none' || mode === 'reveal' ? '' : clsSidebarAnimation;
|
|
},
|
|
|
|
clsContentAnimation: function clsContentAnimation(ref) {
|
|
var mode = ref.mode;
|
|
var clsContentAnimation = ref.clsContentAnimation;
|
|
|
|
return mode !== 'push' && mode !== 'reveal' ? '' : clsContentAnimation
|
|
},
|
|
|
|
transitionElement: function transitionElement(ref) {
|
|
var mode = ref.mode;
|
|
|
|
return mode === 'reveal' ? this.panel.parentNode : this.panel;
|
|
}
|
|
|
|
},
|
|
|
|
update: {
|
|
|
|
write: function write() {
|
|
|
|
if (this.getActive() === this) {
|
|
|
|
if (this.overlay || this.clsContentAnimation) {
|
|
width(this.content, width(win) - this.scrollbarWidth);
|
|
}
|
|
|
|
if (this.overlay) {
|
|
height(this.content, height(win));
|
|
if (scroll) {
|
|
this.content.scrollTop = scroll.y;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
events: ['resize']
|
|
|
|
},
|
|
|
|
events: [
|
|
|
|
{
|
|
|
|
name: 'click',
|
|
|
|
delegate: function delegate() {
|
|
return 'a[href^="#"]';
|
|
},
|
|
|
|
handler: function handler(ref) {
|
|
var current = ref.current;
|
|
|
|
if (current.hash && $$1(current.hash, this.content)) {
|
|
scroll = null;
|
|
this.hide();
|
|
}
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'beforescroll',
|
|
|
|
filter: function filter() {
|
|
return this.overlay;
|
|
},
|
|
|
|
handler: function handler(e, scroll, target) {
|
|
if (scroll && target && this.isToggled() && $$1(target, this.content)) {
|
|
once(this.$el, 'hidden', function () { return scroll.scrollTo(target); });
|
|
e.preventDefault();
|
|
}
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
name: 'show',
|
|
|
|
self: true,
|
|
|
|
handler: function handler() {
|
|
|
|
scroll = scroll || {x: win.pageXOffset, y: win.pageYOffset};
|
|
|
|
if (this.mode === 'reveal' && !hasClass(this.panel, this.clsMode)) {
|
|
wrapAll(this.panel, '<div>');
|
|
addClass(this.panel.parentNode, this.clsMode);
|
|
}
|
|
|
|
css(docEl, 'overflowY', (!this.clsContentAnimation || this.flip) && this.scrollbarWidth && this.overlay ? 'scroll' : '');
|
|
addClass(doc.body, ((this.clsContainer) + " " + (this.clsFlip) + " " + (this.clsOverlay)));
|
|
height(doc.body); // force reflow
|
|
addClass(this.content, this.clsContentAnimation);
|
|
addClass(this.panel, ((this.clsSidebarAnimation) + " " + (this.mode !== 'reveal' ? this.clsMode : '')));
|
|
addClass(this.$el, this.clsOverlay);
|
|
css(this.$el, 'display', 'block');
|
|
height(this.$el); // force reflow
|
|
|
|
}
|
|
},
|
|
|
|
{
|
|
name: 'hide',
|
|
|
|
self: true,
|
|
|
|
handler: function handler() {
|
|
removeClass(this.content, this.clsContentAnimation);
|
|
|
|
var active = this.getActive();
|
|
if (this.mode === 'none' || active && active !== this && active !== this.prev) {
|
|
trigger(this.panel, transitionend);
|
|
}
|
|
}
|
|
},
|
|
|
|
{
|
|
name: 'hidden',
|
|
|
|
self: true,
|
|
|
|
handler: function handler() {
|
|
|
|
if (this.mode === 'reveal') {
|
|
unwrap(this.panel);
|
|
}
|
|
|
|
if (!this.overlay) {
|
|
scroll = {x: win.pageXOffset, y: win.pageYOffset};
|
|
} else if (!scroll) {
|
|
var ref = this.content;
|
|
var x = ref.scrollLeft;
|
|
var y = ref.scrollTop;
|
|
scroll = {x: x, y: y};
|
|
}
|
|
|
|
removeClass(this.panel, ((this.clsSidebarAnimation) + " " + (this.clsMode)));
|
|
removeClass(this.$el, this.clsOverlay);
|
|
css(this.$el, 'display', '');
|
|
removeClass(doc.body, ((this.clsContainer) + " " + (this.clsFlip) + " " + (this.clsOverlay)));
|
|
doc.body.scrollTop = scroll.y;
|
|
|
|
css(docEl, 'overflow-y', '');
|
|
|
|
width(this.content, '');
|
|
height(this.content, '');
|
|
|
|
win.scrollTo(scroll.x, scroll.y);
|
|
|
|
scroll = null;
|
|
|
|
}
|
|
},
|
|
|
|
{
|
|
name: 'swipeLeft swipeRight',
|
|
|
|
handler: function handler(e) {
|
|
|
|
if (this.isToggled() && isTouch(e) && (e.type === 'swipeLeft' && !this.flip || e.type === 'swipeRight' && this.flip)) {
|
|
this.hide();
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
]
|
|
|
|
});
|
|
|
|
};
|
|
|
|
var Responsive = function (UIkit) {
|
|
|
|
UIkit.component('responsive', {
|
|
|
|
props: ['width', 'height'],
|
|
|
|
init: function init() {
|
|
addClass(this.$el, 'uk-responsive-width');
|
|
},
|
|
|
|
update: {
|
|
|
|
read: function read() {
|
|
|
|
this.dim = isVisible(this.$el) && this.width && this.height
|
|
? {width: width(this.$el.parentNode), height: this.height}
|
|
: false;
|
|
|
|
},
|
|
|
|
write: function write() {
|
|
|
|
if (this.dim) {
|
|
height(this.$el, Dimensions.contain({height: this.height, width: this.width}, this.dim).height);
|
|
}
|
|
|
|
},
|
|
|
|
events: ['load', 'resize']
|
|
|
|
}
|
|
|
|
});
|
|
|
|
};
|
|
|
|
var Scroll = function (UIkit) {
|
|
|
|
UIkit.component('scroll', {
|
|
|
|
props: {
|
|
duration: Number,
|
|
offset: Number
|
|
},
|
|
|
|
defaults: {
|
|
duration: 1000,
|
|
offset: 0
|
|
},
|
|
|
|
methods: {
|
|
|
|
scrollTo: function scrollTo(el) {
|
|
var this$1 = this;
|
|
|
|
|
|
el = el && $$1(isString(el) ? el.replace(/\//g, '\\/') : el) || doc.body;
|
|
|
|
var target = offset(el).top - this.offset,
|
|
docHeight = height(doc),
|
|
winHeight = height(win);
|
|
|
|
if (target + winHeight > docHeight) {
|
|
target = docHeight - winHeight;
|
|
}
|
|
|
|
if (!trigger(this.$el, 'beforescroll', [this, el])) {
|
|
return;
|
|
}
|
|
|
|
var start = Date.now(),
|
|
startY = win.pageYOffset,
|
|
step = function () {
|
|
var currentY = startY + (target - startY) * ease(clamp((Date.now() - start) / this$1.duration));
|
|
|
|
win.scrollTo(win.pageXOffset, currentY);
|
|
|
|
// scroll more if we have not reached our destination
|
|
if (currentY !== target) {
|
|
requestAnimationFrame(step);
|
|
} else {
|
|
trigger(this$1.$el, 'scrolled', [this$1, el]);
|
|
}
|
|
};
|
|
|
|
step();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
events: {
|
|
|
|
click: function click(e) {
|
|
|
|
if (e.defaultPrevented) {
|
|
return;
|
|
}
|
|
|
|
e.preventDefault();
|
|
this.scrollTo(this.$el.hash);
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
function ease(k) {
|
|
return 0.5 * (1 - Math.cos(Math.PI * k));
|
|
}
|
|
|
|
};
|
|
|
|
var Scrollspy = function (UIkit) {
|
|
|
|
UIkit.component('scrollspy', {
|
|
|
|
args: 'cls',
|
|
|
|
props: {
|
|
cls: 'list',
|
|
target: String,
|
|
hidden: Boolean,
|
|
offsetTop: Number,
|
|
offsetLeft: Number,
|
|
repeat: Boolean,
|
|
delay: Number
|
|
},
|
|
|
|
defaults: {
|
|
cls: ['uk-scrollspy-inview'],
|
|
target: false,
|
|
hidden: true,
|
|
offsetTop: 0,
|
|
offsetLeft: 0,
|
|
repeat: false,
|
|
delay: 0,
|
|
inViewClass: 'uk-scrollspy-inview'
|
|
},
|
|
|
|
computed: {
|
|
|
|
elements: function elements(ref, $el) {
|
|
var target = ref.target;
|
|
|
|
return target && $$(target, $el) || [$el];
|
|
}
|
|
|
|
},
|
|
|
|
update: [
|
|
|
|
{
|
|
|
|
write: function write() {
|
|
if (this.hidden) {
|
|
css(filter(this.elements, (":not(." + (this.inViewClass) + ")")), 'visibility', 'hidden');
|
|
}
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
read: function read() {
|
|
var this$1 = this;
|
|
|
|
this.elements.forEach(function (el) {
|
|
|
|
if (!el._scrollspy) {
|
|
var cls = attr(el, 'uk-scrollspy-class');
|
|
el._scrollspy = {toggles: cls && cls.split(',') || this$1.cls};
|
|
}
|
|
|
|
el._scrollspy.show = isInView(el, this$1.offsetTop, this$1.offsetLeft);
|
|
|
|
});
|
|
},
|
|
|
|
write: function write() {
|
|
var this$1 = this;
|
|
|
|
|
|
var index = this.elements.length === 1 ? 1 : 0;
|
|
|
|
this.elements.forEach(function (el, i) {
|
|
|
|
var data = el._scrollspy, cls = data.toggles[i] || data.toggles[0];
|
|
|
|
if (data.show) {
|
|
|
|
if (!data.inview && !data.timer) {
|
|
|
|
var show = function () {
|
|
css(el, 'visibility', '');
|
|
addClass(el, this$1.inViewClass);
|
|
toggleClass(el, cls);
|
|
|
|
trigger(el, 'inview');
|
|
|
|
this$1.$update();
|
|
|
|
data.inview = true;
|
|
delete data.timer;
|
|
};
|
|
|
|
if (this$1.delay && index) {
|
|
data.timer = setTimeout(show, this$1.delay * index);
|
|
} else {
|
|
show();
|
|
}
|
|
|
|
index++;
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
if (data.inview && this$1.repeat) {
|
|
|
|
if (data.timer) {
|
|
clearTimeout(data.timer);
|
|
delete data.timer;
|
|
}
|
|
|
|
css(el, 'visibility', this$1.hidden ? 'hidden' : '');
|
|
removeClass(el, this$1.inViewClass);
|
|
toggleClass(el, cls);
|
|
|
|
trigger(el, 'outview');
|
|
|
|
this$1.$update();
|
|
|
|
data.inview = false;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
},
|
|
|
|
events: ['scroll', 'load', 'resize']
|
|
|
|
}
|
|
|
|
]
|
|
|
|
});
|
|
|
|
};
|
|
|
|
var ScrollspyNav = function (UIkit) {
|
|
|
|
UIkit.component('scrollspy-nav', {
|
|
|
|
props: {
|
|
cls: String,
|
|
closest: String,
|
|
scroll: Boolean,
|
|
overflow: Boolean,
|
|
offset: Number
|
|
},
|
|
|
|
defaults: {
|
|
cls: 'uk-active',
|
|
closest: false,
|
|
scroll: false,
|
|
overflow: true,
|
|
offset: 0
|
|
},
|
|
|
|
computed: {
|
|
|
|
links: function links(_, $el) {
|
|
return $$('a[href^="#"]', $el).filter(function (el) { return el.hash; });
|
|
},
|
|
|
|
elements: function elements() {
|
|
return this.closest ? closest(this.links, this.closest) : this.links;
|
|
},
|
|
|
|
targets: function targets() {
|
|
return $$(this.links.map(function (el) { return el.hash; }).join(','));
|
|
}
|
|
|
|
},
|
|
|
|
update: [
|
|
|
|
{
|
|
|
|
read: function read() {
|
|
if (this.scroll) {
|
|
UIkit.scroll(this.links, {offset: this.offset || 0});
|
|
}
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
read: function read() {
|
|
var this$1 = this;
|
|
|
|
|
|
var scroll = win.pageYOffset + this.offset + 1,
|
|
max = height(doc) - height(win) + this.offset;
|
|
|
|
this.active = false;
|
|
|
|
this.targets.every(function (el, i) {
|
|
|
|
var top = offset(el).top, last = i + 1 === this$1.targets.length;
|
|
if (!this$1.overflow && (i === 0 && top > scroll || last && top + el.offsetTop < scroll)) {
|
|
return false;
|
|
}
|
|
|
|
if (!last && offset(this$1.targets[i + 1]).top <= scroll) {
|
|
return true;
|
|
}
|
|
|
|
if (scroll >= max) {
|
|
for (var j = this$1.targets.length - 1; j > i; j--) {
|
|
if (isInView(this$1.targets[j])) {
|
|
el = this$1.targets[j];
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
return !(this$1.active = $$1(filter(this$1.links, ("[href=\"#" + (el.id) + "\"]"))));
|
|
|
|
});
|
|
|
|
},
|
|
|
|
write: function write() {
|
|
|
|
this.links.forEach(function (el) { return el.blur(); });
|
|
removeClass(this.elements, this.cls);
|
|
|
|
if (this.active) {
|
|
trigger(this.$el, 'active', [
|
|
this.active,
|
|
addClass(this.closest ? closest(this.active, this.closest) : this.active, this.cls)
|
|
]);
|
|
}
|
|
|
|
},
|
|
|
|
events: ['scroll', 'load', 'resize']
|
|
|
|
}
|
|
|
|
]
|
|
|
|
});
|
|
|
|
};
|
|
|
|
var Sticky = function (UIkit) {
|
|
|
|
UIkit.component('sticky', {
|
|
|
|
mixins: [Class],
|
|
|
|
attrs: true,
|
|
|
|
props: {
|
|
top: null,
|
|
bottom: Boolean,
|
|
offset: Number,
|
|
animation: String,
|
|
clsActive: String,
|
|
clsInactive: String,
|
|
clsFixed: String,
|
|
clsBelow: String,
|
|
selTarget: String,
|
|
widthElement: 'query',
|
|
showOnUp: Boolean,
|
|
media: 'media',
|
|
target: Number
|
|
},
|
|
|
|
defaults: {
|
|
top: 0,
|
|
bottom: false,
|
|
offset: 0,
|
|
animation: '',
|
|
clsActive: 'uk-active',
|
|
clsInactive: '',
|
|
clsFixed: 'uk-sticky-fixed',
|
|
clsBelow: 'uk-sticky-below',
|
|
selTarget: '',
|
|
widthElement: false,
|
|
showOnUp: false,
|
|
media: false,
|
|
target: false
|
|
},
|
|
|
|
computed: {
|
|
|
|
selTarget: function selTarget(ref, $el) {
|
|
var selTarget = ref.selTarget;
|
|
|
|
return selTarget && $$1(selTarget, $el) || $el;
|
|
}
|
|
|
|
},
|
|
|
|
connected: function connected() {
|
|
|
|
this.placeholder = $$1('<div class="uk-sticky-placeholder"></div>');
|
|
this.widthElement = this.$props.widthElement || this.placeholder;
|
|
|
|
if (!this.isActive) {
|
|
this.hide();
|
|
}
|
|
},
|
|
|
|
disconnected: function disconnected() {
|
|
|
|
if (this.isActive) {
|
|
this.isActive = false;
|
|
this.hide();
|
|
removeClass(this.$el, this.clsInactive);
|
|
}
|
|
|
|
remove(this.placeholder);
|
|
this.placeholder = null;
|
|
this.widthElement = null;
|
|
},
|
|
|
|
ready: function ready() {
|
|
var this$1 = this;
|
|
|
|
|
|
if (!(this.target && location.hash && win.pageYOffset > 0)) {
|
|
return;
|
|
}
|
|
|
|
var target = $$1(location.hash);
|
|
|
|
if (target) {
|
|
requestAnimationFrame(function () {
|
|
|
|
var top = offset(target).top,
|
|
elTop = offset(this$1.$el).top,
|
|
elHeight = this$1.$el.offsetHeight;
|
|
|
|
if (elTop + elHeight >= top && elTop <= top + target.offsetHeight) {
|
|
win.scrollTo(0, top - elHeight - this$1.target - this$1.offset);
|
|
}
|
|
|
|
});
|
|
}
|
|
|
|
},
|
|
|
|
events: [
|
|
|
|
{
|
|
name: 'active',
|
|
|
|
self: true,
|
|
|
|
handler: function handler() {
|
|
replaceClass(this.selTarget, this.clsInactive, this.clsActive);
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
name: 'inactive',
|
|
|
|
self: true,
|
|
|
|
handler: function handler() {
|
|
replaceClass(this.selTarget, this.clsActive, this.clsInactive);
|
|
}
|
|
|
|
}
|
|
|
|
],
|
|
|
|
update: [
|
|
|
|
{
|
|
|
|
write: function write() {
|
|
var this$1 = this;
|
|
|
|
|
|
var placeholder = this.placeholder,
|
|
outerHeight = (this.isActive ? placeholder : this.$el).offsetHeight, el;
|
|
|
|
css(placeholder, assign(
|
|
{height: css(this.$el, 'position') !== 'absolute' ? outerHeight : ''},
|
|
css(this.$el, ['marginTop', 'marginBottom', 'marginLeft', 'marginRight'])
|
|
));
|
|
|
|
if (!within(placeholder, docEl)) {
|
|
after(this.$el, placeholder);
|
|
attr(placeholder, 'hidden', '');
|
|
}
|
|
|
|
attr(this.widthElement, 'hidden', null);
|
|
this.width = this.widthElement.offsetWidth;
|
|
attr(this.widthElement, 'hidden', this.isActive ? null : '');
|
|
|
|
this.topOffset = offset(this.isActive ? placeholder : this.$el).top;
|
|
this.bottomOffset = this.topOffset + outerHeight;
|
|
|
|
['top', 'bottom'].forEach(function (prop) {
|
|
|
|
this$1[prop] = this$1.$props[prop];
|
|
|
|
if (!this$1[prop]) {
|
|
return;
|
|
}
|
|
|
|
if (isNumeric(this$1[prop])) {
|
|
|
|
this$1[prop] = this$1[(prop + "Offset")] + toFloat(this$1[prop]);
|
|
|
|
} else {
|
|
|
|
if (isString(this$1[prop]) && this$1[prop].match(/^-?\d+vh$/)) {
|
|
this$1[prop] = height(win) * toFloat(this$1[prop]) / 100;
|
|
} else {
|
|
|
|
el = this$1[prop] === true ? this$1.$el.parentNode : query(this$1[prop], this$1.$el);
|
|
|
|
if (el) {
|
|
this$1[prop] = offset(el).top + el.offsetHeight;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
this.top = Math.max(toFloat(this.top), this.topOffset) - this.offset;
|
|
this.bottom = this.bottom && this.bottom - outerHeight;
|
|
this.inactive = this.media && !win.matchMedia(this.media).matches;
|
|
|
|
if (this.isActive) {
|
|
this.update();
|
|
}
|
|
},
|
|
|
|
events: ['load', 'resize']
|
|
|
|
},
|
|
|
|
{
|
|
|
|
read: function read() {
|
|
this.offsetTop = offset(this.$el).top;
|
|
this.scroll = win.pageYOffset;
|
|
this.visible = isVisible(this.$el);
|
|
},
|
|
|
|
write: function write(ref) {
|
|
var this$1 = this;
|
|
if ( ref === void 0 ) ref = {};
|
|
var dir = ref.dir;
|
|
|
|
|
|
var scroll = this.scroll;
|
|
|
|
if (scroll < 0 || !this.visible || this.disabled || this.showOnUp && !dir) {
|
|
return;
|
|
}
|
|
|
|
if (this.inactive
|
|
|| scroll < this.top
|
|
|| this.showOnUp && (scroll <= this.top || dir === 'down' || dir === 'up' && !this.isActive && scroll <= this.bottomOffset)
|
|
) {
|
|
|
|
if (!this.isActive) {
|
|
return;
|
|
}
|
|
|
|
this.isActive = false;
|
|
|
|
if (this.animation && scroll > this.topOffset) {
|
|
Animation.cancel(this.$el);
|
|
Animation.out(this.$el, this.animation).then(function () { return this$1.hide(); }, noop);
|
|
} else {
|
|
this.hide();
|
|
}
|
|
|
|
} else if (this.isActive) {
|
|
|
|
this.update();
|
|
|
|
} else if (this.animation) {
|
|
|
|
Animation.cancel(this.$el);
|
|
this.show();
|
|
Animation.in(this.$el, this.animation).catch(noop);
|
|
|
|
} else {
|
|
this.show();
|
|
}
|
|
|
|
},
|
|
|
|
events: ['scroll']
|
|
|
|
} ],
|
|
|
|
methods: {
|
|
|
|
show: function show() {
|
|
|
|
this.isActive = true;
|
|
this.update();
|
|
attr(this.placeholder, 'hidden', null);
|
|
|
|
},
|
|
|
|
hide: function hide() {
|
|
|
|
if (!this.isActive || hasClass(this.selTarget, this.clsActive)) {
|
|
trigger(this.$el, 'inactive');
|
|
}
|
|
|
|
removeClass(this.$el, this.clsFixed, this.clsBelow);
|
|
css(this.$el, {position: '', top: '', width: ''});
|
|
attr(this.placeholder, 'hidden', '');
|
|
|
|
},
|
|
|
|
update: function update() {
|
|
|
|
var top = Math.max(0, this.offset), active = this.scroll > this.top;
|
|
|
|
if (this.bottom && this.scroll > this.bottom - this.offset) {
|
|
top = this.bottom - this.scroll;
|
|
}
|
|
|
|
css(this.$el, {
|
|
position: 'fixed',
|
|
top: (top + "px"),
|
|
width: this.width
|
|
});
|
|
|
|
if (hasClass(this.selTarget, this.clsActive)) {
|
|
|
|
if (!active) {
|
|
trigger(this.$el, 'inactive');
|
|
}
|
|
|
|
} else {
|
|
|
|
if (active) {
|
|
trigger(this.$el, 'active');
|
|
}
|
|
}
|
|
|
|
toggleClass(this.$el, this.clsBelow, this.scroll > this.bottomOffset);
|
|
addClass(this.$el, this.clsFixed);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
};
|
|
|
|
var svgs = {};
|
|
|
|
var Svg = function (UIkit) {
|
|
|
|
UIkit.component('svg', {
|
|
|
|
attrs: true,
|
|
|
|
props: {
|
|
id: String,
|
|
icon: String,
|
|
src: String,
|
|
style: String,
|
|
width: Number,
|
|
height: Number,
|
|
ratio: Number,
|
|
'class': String
|
|
},
|
|
|
|
defaults: {
|
|
ratio: 1,
|
|
id: false,
|
|
exclude: ['src'],
|
|
'class': ''
|
|
},
|
|
|
|
init: function init() {
|
|
this.class += ' uk-svg';
|
|
},
|
|
|
|
connected: function connected() {
|
|
var this$1 = this;
|
|
|
|
|
|
if (!this.icon && includes(this.src, '#')) {
|
|
|
|
var parts = this.src.split('#');
|
|
|
|
if (parts.length > 1) {
|
|
this.src = parts[0];
|
|
this.icon = parts[1];
|
|
}
|
|
}
|
|
|
|
this.svg = this.getSvg().then(function (svg) {
|
|
|
|
var el;
|
|
|
|
if (isString(svg)) {
|
|
|
|
if (this$1.icon && includes(svg, '<symbol')) {
|
|
svg = parseSymbols(svg, this$1.icon) || svg;
|
|
}
|
|
|
|
el = $$1(svg.substr(svg.indexOf('<svg')));
|
|
|
|
} else {
|
|
el = svg.cloneNode(true);
|
|
}
|
|
|
|
if (!el) {
|
|
return Promise.reject('SVG not found.');
|
|
}
|
|
|
|
var dimensions = attr(el, 'viewBox');
|
|
|
|
if (dimensions) {
|
|
dimensions = dimensions.split(' ');
|
|
this$1.width = this$1.$props.width || dimensions[2];
|
|
this$1.height = this$1.$props.height || dimensions[3];
|
|
}
|
|
|
|
this$1.width *= this$1.ratio;
|
|
this$1.height *= this$1.ratio;
|
|
|
|
for (var prop in this$1.$options.props) {
|
|
if (this$1[prop] && !includes(this$1.exclude, prop)) {
|
|
attr(el, prop, this$1[prop]);
|
|
}
|
|
}
|
|
|
|
if (!this$1.id) {
|
|
removeAttr(el, 'id');
|
|
}
|
|
|
|
if (this$1.width && !this$1.height) {
|
|
removeAttr(el, 'height');
|
|
}
|
|
|
|
if (this$1.height && !this$1.width) {
|
|
removeAttr(el, 'width');
|
|
}
|
|
|
|
var root = this$1.$el;
|
|
if (isVoidElement(root) || root.tagName === 'CANVAS') {
|
|
|
|
attr(root, {hidden: true, id: null});
|
|
|
|
var next = root.nextElementSibling;
|
|
if (next && el.isEqualNode(next)) {
|
|
el = next;
|
|
} else {
|
|
after(root, el);
|
|
}
|
|
|
|
} else {
|
|
|
|
var last = root.lastElementChild;
|
|
if (last && el.isEqualNode(last)) {
|
|
el = last;
|
|
} else {
|
|
append(root, el);
|
|
}
|
|
|
|
}
|
|
|
|
this$1.svgEl = el;
|
|
|
|
return el;
|
|
|
|
}, noop);
|
|
|
|
},
|
|
|
|
disconnected: function disconnected() {
|
|
var this$1 = this;
|
|
|
|
|
|
if (isVoidElement(this.$el)) {
|
|
attr(this.$el, {hidden: null, id: this.id || null});
|
|
}
|
|
|
|
if (this.svg) {
|
|
this.svg.then(function (svg) { return (!this$1._connected || svg !== this$1.svgEl) && remove(svg); }, noop);
|
|
}
|
|
|
|
this.svg = this.svgEl = null;
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
getSvg: function getSvg() {
|
|
var this$1 = this;
|
|
|
|
|
|
if (!this.src) {
|
|
return Promise.reject();
|
|
}
|
|
|
|
if (svgs[this.src]) {
|
|
return svgs[this.src];
|
|
}
|
|
|
|
svgs[this.src] = new Promise(function (resolve, reject) {
|
|
|
|
if (startsWith(this$1.src, 'data:')) {
|
|
resolve(decodeURIComponent(this$1.src.split(',')[1]));
|
|
} else {
|
|
|
|
ajax(this$1.src).then(
|
|
function (xhr) { return resolve(xhr.response); },
|
|
function () { return reject('SVG not found.'); }
|
|
);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
return svgs[this.src];
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
var symbolRe = /<symbol(.*?id=(['"])(.*?)\2[^]*?<\/)symbol>/g,
|
|
symbols = {};
|
|
|
|
function parseSymbols(svg, icon) {
|
|
|
|
if (!symbols[svg]) {
|
|
|
|
symbols[svg] = {};
|
|
|
|
var match;
|
|
while (match = symbolRe.exec(svg)) {
|
|
symbols[svg][match[3]] = "<svg xmlns=\"http://www.w3.org/2000/svg\"" + (match[1]) + "svg>";
|
|
}
|
|
|
|
}
|
|
|
|
return symbols[svg][icon];
|
|
}
|
|
|
|
};
|
|
|
|
var Switcher = function (UIkit) {
|
|
|
|
UIkit.component('switcher', {
|
|
|
|
mixins: [Togglable],
|
|
|
|
args: 'connect',
|
|
|
|
props: {
|
|
connect: String,
|
|
toggle: String,
|
|
active: Number,
|
|
swiping: Boolean
|
|
},
|
|
|
|
defaults: {
|
|
connect: '~.uk-switcher',
|
|
toggle: '> *',
|
|
active: 0,
|
|
swiping: true,
|
|
cls: 'uk-active',
|
|
clsContainer: 'uk-switcher',
|
|
attrItem: 'uk-switcher-item',
|
|
queued: true
|
|
},
|
|
|
|
computed: {
|
|
|
|
connects: function connects(ref, $el) {
|
|
var connect = ref.connect;
|
|
|
|
return queryAll(connect, $el);
|
|
},
|
|
|
|
toggles: function toggles(ref, $el) {
|
|
var toggle = ref.toggle;
|
|
|
|
return $$(toggle, $el);
|
|
}
|
|
|
|
},
|
|
|
|
events: [
|
|
|
|
{
|
|
|
|
name: 'click',
|
|
|
|
delegate: function delegate() {
|
|
return ((this.toggle) + ":not(.uk-disabled)");
|
|
},
|
|
|
|
handler: function handler(e) {
|
|
e.preventDefault();
|
|
this.show(e.current);
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
name: 'click',
|
|
|
|
el: function el() {
|
|
return this.connects;
|
|
},
|
|
|
|
delegate: function delegate() {
|
|
return ("[" + (this.attrItem) + "],[data-" + (this.attrItem) + "]");
|
|
},
|
|
|
|
handler: function handler(e) {
|
|
e.preventDefault();
|
|
this.show(data(e.current, this.attrItem));
|
|
}
|
|
},
|
|
|
|
{
|
|
name: 'swipeRight swipeLeft',
|
|
|
|
filter: function filter() {
|
|
return this.swiping;
|
|
},
|
|
|
|
el: function el() {
|
|
return this.connects;
|
|
},
|
|
|
|
handler: function handler(e) {
|
|
if (!isTouch(e)) {
|
|
return;
|
|
}
|
|
|
|
e.preventDefault();
|
|
if (!win.getSelection().toString()) {
|
|
this.show(e.type === 'swipeLeft' ? 'next' : 'previous');
|
|
}
|
|
}
|
|
}
|
|
|
|
],
|
|
|
|
update: function update() {
|
|
var this$1 = this;
|
|
|
|
|
|
this.connects.forEach(function (list) { return this$1.updateAria(list.children); });
|
|
this.show(filter(this.toggles, ("." + (this.cls)))[0] || this.toggles[this.active] || this.toggles[0]);
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
show: function show(item) {
|
|
var this$1 = this;
|
|
|
|
|
|
var length = this.toggles.length,
|
|
prev = this.connects.length && index(filter(this.connects[0].children, ("." + (this.cls)))[0]),
|
|
hasPrev = prev >= 0,
|
|
next = getIndex(item, this.toggles, prev),
|
|
dir = item === 'previous' ? -1 : 1,
|
|
toggle;
|
|
|
|
for (var i = 0; i < length; i++, next = (next + dir + length) % length) {
|
|
if (!matches(this$1.toggles[next], '.uk-disabled, [disabled]')) {
|
|
toggle = this$1.toggles[next];
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (!toggle || prev >= 0 && hasClass(toggle, this.cls) || prev === next) {
|
|
return;
|
|
}
|
|
|
|
removeClass(this.toggles, this.cls);
|
|
attr(this.toggles, 'aria-expanded', false);
|
|
addClass(toggle, this.cls);
|
|
attr(toggle, 'aria-expanded', true);
|
|
|
|
this.connects.forEach(function (list) {
|
|
if (!hasPrev) {
|
|
this$1.toggleNow(list.children[next]);
|
|
} else {
|
|
this$1.toggleElement([list.children[prev], list.children[next]]);
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
};
|
|
|
|
var Tab = function (UIkit) {
|
|
|
|
UIkit.component('tab', UIkit.components.switcher.extend({
|
|
|
|
mixins: [Class],
|
|
|
|
name: 'tab',
|
|
|
|
props: {
|
|
media: 'media'
|
|
},
|
|
|
|
defaults: {
|
|
media: 960,
|
|
attrItem: 'uk-tab-item'
|
|
},
|
|
|
|
init: function init() {
|
|
|
|
var cls = hasClass(this.$el, 'uk-tab-left')
|
|
? 'uk-tab-left'
|
|
: hasClass(this.$el, 'uk-tab-right')
|
|
? 'uk-tab-right'
|
|
: false;
|
|
|
|
if (cls) {
|
|
UIkit.toggle(this.$el, {cls: cls, mode: 'media', media: this.media});
|
|
}
|
|
}
|
|
|
|
}));
|
|
|
|
};
|
|
|
|
var Toggle = function (UIkit) {
|
|
|
|
UIkit.component('toggle', {
|
|
|
|
mixins: [UIkit.mixin.togglable],
|
|
|
|
args: 'target',
|
|
|
|
props: {
|
|
href: String,
|
|
target: null,
|
|
mode: 'list',
|
|
media: 'media'
|
|
},
|
|
|
|
defaults: {
|
|
href: false,
|
|
target: false,
|
|
mode: 'click',
|
|
queued: true,
|
|
media: false
|
|
},
|
|
|
|
computed: {
|
|
|
|
target: function target(ref, $el) {
|
|
var href = ref.href;
|
|
var target = ref.target;
|
|
|
|
target = queryAll(target || href, $el);
|
|
return target.length && target || [$el];
|
|
}
|
|
|
|
},
|
|
|
|
events: [
|
|
|
|
{
|
|
|
|
name: (pointerEnter + " " + pointerLeave),
|
|
|
|
filter: function filter() {
|
|
return includes(this.mode, 'hover');
|
|
},
|
|
|
|
handler: function handler(e) {
|
|
if (!isTouch(e)) {
|
|
this.toggle(("toggle" + (e.type === pointerEnter ? 'show' : 'hide')));
|
|
}
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'click',
|
|
|
|
filter: function filter() {
|
|
return includes(this.mode, 'click') || hasTouch;
|
|
},
|
|
|
|
handler: function handler(e) {
|
|
|
|
if (!isTouch(e) && !includes(this.mode, 'click')) {
|
|
return;
|
|
}
|
|
|
|
// TODO better isToggled handling
|
|
var link;
|
|
if (closest(e.target, 'a[href="#"], button')
|
|
|| (link = closest(e.target, 'a[href]')) && (
|
|
this.cls
|
|
|| !isVisible(this.target)
|
|
|| link.hash && matches(this.target, link.hash)
|
|
)
|
|
) {
|
|
e.preventDefault();
|
|
}
|
|
|
|
this.toggle();
|
|
}
|
|
|
|
}
|
|
],
|
|
|
|
update: {
|
|
|
|
write: function write() {
|
|
|
|
if (!includes(this.mode, 'media') || !this.media) {
|
|
return;
|
|
}
|
|
|
|
var toggled = this.isToggled(this.target);
|
|
if (win.matchMedia(this.media).matches ? !toggled : toggled) {
|
|
this.toggle();
|
|
}
|
|
|
|
},
|
|
|
|
events: ['load', 'resize']
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
toggle: function toggle(type) {
|
|
if (trigger(this.target, type || 'toggle', [this])) {
|
|
this.toggleElement(this.target);
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
};
|
|
|
|
var Video = function (UIkit) {
|
|
|
|
UIkit.component('video', {
|
|
|
|
props: {
|
|
automute: Boolean,
|
|
autoplay: Boolean,
|
|
},
|
|
|
|
defaults: {automute: false, autoplay: true},
|
|
|
|
ready: function ready() {
|
|
|
|
this.player = new Player(this.$el);
|
|
|
|
if (this.automute) {
|
|
this.player.mute();
|
|
}
|
|
|
|
},
|
|
|
|
update: {
|
|
|
|
write: function write() {
|
|
|
|
if (!this.player) {
|
|
return;
|
|
}
|
|
|
|
if (!isVisible(this.$el) || css(this.$el, 'visibility') === 'hidden') {
|
|
this.player.pause();
|
|
} else if (this.autoplay) {
|
|
this.player.play();
|
|
}
|
|
|
|
},
|
|
|
|
events: ['load']
|
|
|
|
},
|
|
|
|
});
|
|
|
|
};
|
|
|
|
var core = function (UIkit) {
|
|
|
|
var scroll = 0, started = 0;
|
|
|
|
on(win, 'load resize', UIkit.update);
|
|
on(win, 'scroll', function (e) {
|
|
e.dir = scroll < win.pageYOffset ? 'down' : 'up';
|
|
scroll = win.pageYOffset;
|
|
UIkit.update(e);
|
|
fastdom.flush();
|
|
});
|
|
|
|
animationstart && on(doc, animationstart, function (ref) {
|
|
var target = ref.target;
|
|
|
|
if ((css(target, 'animationName') || '').match(/^uk-.*(left|right)/)) {
|
|
started++;
|
|
doc.body.style.overflowX = 'hidden';
|
|
setTimeout(function () {
|
|
if (!--started) {
|
|
doc.body.style.overflowX = '';
|
|
}
|
|
}, toMs(css(target, 'animationDuration')) + 100);
|
|
}
|
|
}, true);
|
|
|
|
// core components
|
|
UIkit.use(Toggle);
|
|
UIkit.use(Accordion);
|
|
UIkit.use(Alert);
|
|
UIkit.use(Video);
|
|
UIkit.use(Cover);
|
|
UIkit.use(Drop);
|
|
UIkit.use(Dropdown);
|
|
UIkit.use(FormCustom);
|
|
UIkit.use(HeightMatch);
|
|
UIkit.use(HeightViewport);
|
|
UIkit.use(Hover);
|
|
UIkit.use(Margin);
|
|
UIkit.use(Gif);
|
|
UIkit.use(Grid);
|
|
UIkit.use(Leader);
|
|
UIkit.use(Modal$1);
|
|
UIkit.use(Nav);
|
|
UIkit.use(Navbar);
|
|
UIkit.use(Offcanvas);
|
|
UIkit.use(Responsive);
|
|
UIkit.use(Scroll);
|
|
UIkit.use(Scrollspy);
|
|
UIkit.use(ScrollspyNav);
|
|
UIkit.use(Sticky);
|
|
UIkit.use(Svg);
|
|
UIkit.use(Icon);
|
|
UIkit.use(Switcher);
|
|
UIkit.use(Tab);
|
|
|
|
};
|
|
|
|
UIkit$2.version = '3.0.0-beta.34';
|
|
|
|
mixin(UIkit$2);
|
|
core(UIkit$2);
|
|
|
|
function plugin(UIkit) {
|
|
|
|
if (plugin.installed) {
|
|
return;
|
|
}
|
|
|
|
var ref = UIkit.util;
|
|
var $ = ref.$;
|
|
var doc = ref.doc;
|
|
var empty = ref.empty;
|
|
var html = ref.html;
|
|
|
|
UIkit.component('countdown', {
|
|
|
|
mixins: [UIkit.mixin.class],
|
|
|
|
attrs: true,
|
|
|
|
props: {
|
|
date: String,
|
|
clsWrapper: String
|
|
},
|
|
|
|
defaults: {
|
|
date: '',
|
|
clsWrapper: '.uk-countdown-%unit%'
|
|
},
|
|
|
|
computed: {
|
|
|
|
date: function date(ref) {
|
|
var date = ref.date;
|
|
|
|
return Date.parse(date);
|
|
},
|
|
|
|
days: function days(ref, $el) {
|
|
var clsWrapper = ref.clsWrapper;
|
|
|
|
return $(clsWrapper.replace('%unit%', 'days'), $el);
|
|
},
|
|
|
|
hours: function hours(ref, $el) {
|
|
var clsWrapper = ref.clsWrapper;
|
|
|
|
return $(clsWrapper.replace('%unit%', 'hours'), $el);
|
|
},
|
|
|
|
minutes: function minutes(ref, $el) {
|
|
var clsWrapper = ref.clsWrapper;
|
|
|
|
return $(clsWrapper.replace('%unit%', 'minutes'), $el);
|
|
},
|
|
|
|
seconds: function seconds(ref, $el) {
|
|
var clsWrapper = ref.clsWrapper;
|
|
|
|
return $(clsWrapper.replace('%unit%', 'seconds'), $el);
|
|
},
|
|
|
|
units: function units() {
|
|
var this$1 = this;
|
|
|
|
return ['days', 'hours', 'minutes', 'seconds'].filter(function (unit) { return this$1[unit]; });
|
|
}
|
|
|
|
},
|
|
|
|
connected: function connected() {
|
|
this.start();
|
|
},
|
|
|
|
disconnected: function disconnected() {
|
|
var this$1 = this;
|
|
|
|
this.stop();
|
|
this.units.forEach(function (unit) { return empty(this$1[unit]); });
|
|
},
|
|
|
|
events: [
|
|
|
|
{
|
|
|
|
name: 'visibilitychange',
|
|
|
|
el: doc,
|
|
|
|
handler: function handler() {
|
|
if (doc.hidden) {
|
|
this.stop();
|
|
} else {
|
|
this.start();
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
],
|
|
|
|
update: {
|
|
|
|
write: function write() {
|
|
var this$1 = this;
|
|
|
|
|
|
var timespan = getTimeSpan(this.date);
|
|
|
|
if (timespan.total <= 0) {
|
|
|
|
this.stop();
|
|
|
|
timespan.days
|
|
= timespan.hours
|
|
= timespan.minutes
|
|
= timespan.seconds
|
|
= 0;
|
|
}
|
|
|
|
this.units.forEach(function (unit) {
|
|
|
|
var digits = String(Math.floor(timespan[unit]));
|
|
|
|
digits = digits.length < 2 ? ("0" + digits) : digits;
|
|
|
|
var el = this$1[unit];
|
|
if (el.textContent !== digits) {
|
|
digits = digits.split('');
|
|
|
|
if (digits.length !== el.children.length) {
|
|
html(el, digits.map(function () { return '<span></span>'; }).join(''));
|
|
}
|
|
|
|
digits.forEach(function (digit, i) { return el.children[i].textContent = digit; });
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
start: function start() {
|
|
var this$1 = this;
|
|
|
|
|
|
this.stop();
|
|
|
|
if (this.date && this.units.length) {
|
|
this.$emit();
|
|
this.timer = setInterval(function () { return this$1.$emit(); }, 1000);
|
|
}
|
|
|
|
},
|
|
|
|
stop: function stop() {
|
|
|
|
if (this.timer) {
|
|
clearInterval(this.timer);
|
|
this.timer = null;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
function getTimeSpan(date) {
|
|
|
|
var total = date - Date.now();
|
|
|
|
return {
|
|
total: total,
|
|
seconds: total / 1000 % 60,
|
|
minutes: total / 1000 / 60 % 60,
|
|
hours: total / 1000 / 60 / 60 % 24,
|
|
days: total / 1000 / 60 / 60 / 24
|
|
};
|
|
}
|
|
|
|
}
|
|
|
|
if (!true && typeof window !== 'undefined' && window.UIkit) {
|
|
window.UIkit.use(plugin);
|
|
}
|
|
|
|
function plugin$1(UIkit) {
|
|
|
|
if (plugin$1.installed) {
|
|
return;
|
|
}
|
|
|
|
var ref = UIkit.util;
|
|
var $$ = ref.$$;
|
|
var addClass = ref.addClass;
|
|
var css = ref.css;
|
|
var scrolledOver = ref.scrolledOver;
|
|
var toFloat = ref.toFloat;
|
|
var toNodes = ref.toNodes;
|
|
|
|
UIkit.component('grid-parallax', UIkit.components.grid.extend({
|
|
|
|
props: {
|
|
target: String,
|
|
translate: Number
|
|
},
|
|
|
|
defaults: {
|
|
target: false,
|
|
translate: 150
|
|
},
|
|
|
|
computed: {
|
|
|
|
translate: function translate(ref) {
|
|
var translate = ref.translate;
|
|
|
|
return Math.abs(translate);
|
|
},
|
|
|
|
items: function items(ref, $el) {
|
|
var target = ref.target;
|
|
|
|
return target ? $$(target, $el) : toNodes($el.children);
|
|
}
|
|
|
|
},
|
|
|
|
init: function init() {
|
|
addClass(this.$el, 'uk-grid');
|
|
},
|
|
|
|
disconnected: function disconnected() {
|
|
this.reset();
|
|
css(this.$el, 'marginBottom', '');
|
|
},
|
|
|
|
update: [
|
|
|
|
{
|
|
|
|
read: function read() {
|
|
this.columns = this.rows && this.rows[0] && this.rows[0].length || 0;
|
|
this.rows = this.rows && this.rows.map(function (elements) { return sortBy(elements, 'offsetLeft'); });
|
|
},
|
|
|
|
write: function write() {
|
|
css(this.$el, 'marginBottom', this.columns > 1
|
|
? this.translate + toFloat(css(css(this.$el, 'marginBottom', ''), 'marginBottom'))
|
|
: '');
|
|
},
|
|
|
|
events: ['load', 'resize']
|
|
},
|
|
|
|
{
|
|
|
|
read: function read() {
|
|
|
|
this.scrolled = scrolledOver(this.$el) * this.translate;
|
|
|
|
},
|
|
|
|
write: function write() {
|
|
var this$1 = this;
|
|
|
|
|
|
if (!this.rows || this.columns === 1 || !this.scrolled) {
|
|
return this.reset();
|
|
}
|
|
|
|
this.rows.forEach(function (row) { return row.forEach(function (el, i) { return css(el, 'transform', ("translateY(" + (i % 2 ? this$1.scrolled : this$1.scrolled / 8) + "px)")); }
|
|
); }
|
|
);
|
|
|
|
},
|
|
|
|
events: ['scroll', 'load', 'resize']
|
|
}
|
|
],
|
|
|
|
methods: {
|
|
|
|
reset: function reset() {
|
|
css(this.items, 'transform', '');
|
|
}
|
|
|
|
}
|
|
|
|
}));
|
|
|
|
UIkit.component('grid-parallax').options.update.unshift({
|
|
|
|
read: function read() {
|
|
this.reset();
|
|
},
|
|
|
|
events: ['load', 'resize']
|
|
|
|
});
|
|
|
|
function sortBy(collection, prop) {
|
|
return collection.sort(function (a, b) { return a[prop] > b[prop]
|
|
? 1
|
|
: b[prop] > a[prop]
|
|
? -1
|
|
: 0; }
|
|
)
|
|
}
|
|
|
|
}
|
|
|
|
if (!true && typeof window !== 'undefined' && window.UIkit) {
|
|
window.UIkit.use(plugin$1);
|
|
}
|
|
|
|
var Animations = function (UIkit) {
|
|
|
|
var ref = UIkit.util;
|
|
var css = ref.css;
|
|
|
|
var Animations = {
|
|
|
|
slide: {
|
|
|
|
show: function show(dir) {
|
|
return [
|
|
{transform: translate(dir * -100)},
|
|
{transform: translate()}
|
|
];
|
|
},
|
|
|
|
percent: function percent(current) {
|
|
return Animations.translated(current);
|
|
},
|
|
|
|
translate: function translate$1(percent, dir) {
|
|
return [
|
|
{transform: translate(dir * -100 * percent)},
|
|
{transform: translate(dir * 100 * (1 - percent))}
|
|
];
|
|
}
|
|
|
|
},
|
|
|
|
translated: function translated(el) {
|
|
return Math.abs(css(el, 'transform').split(',')[4] / el.offsetWidth)
|
|
}
|
|
|
|
};
|
|
|
|
return Animations;
|
|
|
|
};
|
|
|
|
function translate(value) {
|
|
if ( value === void 0 ) value = 0;
|
|
|
|
return ("translate(" + value + (value ? '%' : '') + ", 0)"); // currently not translate3d to support IE, translate3d within translate3d does not work while transitioning
|
|
}
|
|
|
|
function scale3d(value) {
|
|
return ("scale3d(" + value + ", " + value + ", 1)");
|
|
}
|
|
|
|
function plugin$3(UIkit) {
|
|
|
|
if (plugin$3.installed) {
|
|
return;
|
|
}
|
|
|
|
var ref = UIkit.util;
|
|
var $$ = ref.$$;
|
|
var $ = ref.$;
|
|
var addClass = ref.addClass;
|
|
var assign = ref.assign;
|
|
var createEvent = ref.createEvent;
|
|
var css = ref.css;
|
|
var data = ref.data;
|
|
var doc = ref.doc;
|
|
var endsWith = ref.endsWith;
|
|
var fastdom = ref.fastdom;
|
|
var getIndex = ref.getIndex;
|
|
var getPos = ref.getPos;
|
|
var hasClass = ref.hasClass;
|
|
var index = ref.index;
|
|
var isTouch = ref.isTouch;
|
|
var noop = ref.noop;
|
|
var off = ref.off;
|
|
var on = ref.on;
|
|
var pointerDown = ref.pointerDown;
|
|
var pointerMove = ref.pointerMove;
|
|
var pointerUp = ref.pointerUp;
|
|
var preventClick = ref.preventClick;
|
|
var Promise = ref.Promise;
|
|
var removeClass = ref.removeClass;
|
|
var toggleClass = ref.toggleClass;
|
|
var toNodes = ref.toNodes;
|
|
var Transition = ref.Transition;
|
|
var trigger = ref.trigger;
|
|
var win = ref.win;
|
|
|
|
var abs = Math.abs;
|
|
|
|
UIkit.mixin.slideshow = {
|
|
|
|
attrs: true,
|
|
|
|
props: {
|
|
autoplay: Boolean,
|
|
autoplayInterval: Number,
|
|
pauseOnHover: Boolean,
|
|
animation: String,
|
|
easing: String,
|
|
velocity: Number
|
|
},
|
|
|
|
defaults: {
|
|
autoplay: false,
|
|
autoplayInterval: 7000,
|
|
pauseOnHover: true,
|
|
animation: 'slide',
|
|
easing: 'ease',
|
|
velocity: 1,
|
|
index: 0,
|
|
stack: [],
|
|
threshold: 10,
|
|
percent: 0,
|
|
clsActive: 'uk-active',
|
|
clsActivated: 'uk-transition-active',
|
|
initialAnimation: false,
|
|
Animations: Animations(UIkit)
|
|
},
|
|
|
|
computed: {
|
|
|
|
list: function list(ref, $el) {
|
|
var selList = ref.selList;
|
|
|
|
return $(selList, $el);
|
|
},
|
|
|
|
slides: function slides() {
|
|
return toNodes(this.list.children);
|
|
},
|
|
|
|
animation: function animation(ref) {
|
|
var animation = ref.animation;
|
|
var Animations$$1 = ref.Animations;
|
|
|
|
return assign(animation in Animations$$1 ? Animations$$1[animation] : Animations$$1.slide, {name: animation});
|
|
},
|
|
|
|
duration: function duration(ref, $el) {
|
|
var velocity = ref.velocity;
|
|
|
|
return speedUp($el.offsetWidth / velocity);
|
|
}
|
|
|
|
},
|
|
|
|
init: function init() {
|
|
var this$1 = this;
|
|
|
|
['start', 'move', 'end'].forEach(function (key) {
|
|
var fn = this$1[key];
|
|
this$1[key] = function (e) {
|
|
|
|
var pos = getPos(e).x;
|
|
|
|
this$1.prevPos = pos !== this$1.pos ? this$1.pos : this$1.prevPos;
|
|
this$1.pos = pos;
|
|
|
|
fn(e);
|
|
};
|
|
});
|
|
},
|
|
|
|
connected: function connected() {
|
|
this.startAutoplay();
|
|
},
|
|
|
|
disconnected: function disconnected() {
|
|
this.stopAutoplay();
|
|
},
|
|
|
|
update: [
|
|
|
|
{
|
|
|
|
read: function read() {
|
|
delete this._computeds.duration;
|
|
},
|
|
|
|
events: ['load', 'resize']
|
|
|
|
}
|
|
|
|
],
|
|
|
|
events: [
|
|
|
|
{
|
|
|
|
name: 'click',
|
|
|
|
delegate: function delegate() {
|
|
return ("[" + (this.attrItem) + "],[data-" + (this.attrItem) + "]");
|
|
},
|
|
|
|
handler: function handler(e) {
|
|
e.preventDefault();
|
|
e.current.blur();
|
|
this.show(data(e.current, this.attrItem));
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: pointerDown,
|
|
|
|
delegate: function delegate() {
|
|
return ((this.selList) + " > *");
|
|
},
|
|
|
|
handler: function handler(e) {
|
|
if (isTouch(e) || !hasTextNodesOnly(e.target)) {
|
|
this.start(e);
|
|
}
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'visibilitychange',
|
|
|
|
el: doc,
|
|
|
|
handler: function handler() {
|
|
if (doc.hidden) {
|
|
this.stopAutoplay();
|
|
} else {
|
|
this.startAutoplay();
|
|
}
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: pointerDown,
|
|
handler: 'stopAutoplay'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'mouseenter',
|
|
|
|
filter: function filter() {
|
|
return this.autoplay;
|
|
},
|
|
|
|
handler: function handler() {
|
|
this.isHovering = true;
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'mouseleave',
|
|
|
|
filter: function filter() {
|
|
return this.autoplay;
|
|
},
|
|
|
|
handler: function handler() {
|
|
this.isHovering = false;
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'beforeitemshow',
|
|
|
|
self: true,
|
|
|
|
delegate: function delegate() {
|
|
return ((this.selList) + " > *");
|
|
},
|
|
|
|
handler: function handler(ref) {
|
|
var target = ref.target;
|
|
|
|
addClass(target, this.clsActive);
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'itemshown',
|
|
|
|
self: true,
|
|
|
|
delegate: function delegate() {
|
|
return ((this.selList) + " > *");
|
|
},
|
|
|
|
handler: function handler(ref) {
|
|
var target = ref.target;
|
|
|
|
addClass(target, this.clsActivated);
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'itemshow itemhide',
|
|
|
|
self: true,
|
|
|
|
delegate: function delegate() {
|
|
return ((this.selList) + " > *");
|
|
},
|
|
|
|
handler: function handler(ref) {
|
|
var type = ref.type;
|
|
var target = ref.target;
|
|
|
|
toggleClass($$(("[" + (this.attrItem) + "=\"" + (index(target)) + "\"],[data-" + (this.attrItem) + "=\"" + (index(target)) + "\"]"), this.$el), this.clsActive, endsWith(type, 'show'));
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'itemhidden',
|
|
|
|
self: true,
|
|
|
|
delegate: function delegate() {
|
|
return ((this.selList) + " > *");
|
|
},
|
|
|
|
handler: function handler(ref) {
|
|
var target = ref.target;
|
|
|
|
removeClass(target, this.clsActive);
|
|
removeClass(target, this.clsActivated);
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'itemshow itemhide itemshown itemhidden',
|
|
|
|
self: true,
|
|
|
|
delegate: function delegate() {
|
|
return ((this.selList) + " > *");
|
|
},
|
|
|
|
handler: function handler(ref) {
|
|
var target = ref.target;
|
|
|
|
UIkit.update(null, target);
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
name: 'dragstart',
|
|
|
|
handler: function handler(e) {
|
|
e.preventDefault();
|
|
}
|
|
}
|
|
|
|
],
|
|
|
|
methods: {
|
|
|
|
start: function start(e) {
|
|
|
|
if (e.button && e.button !== 0 || this.slides.length < 2) {
|
|
return;
|
|
}
|
|
|
|
if (this._animation && this._animation.animation !== this.animation) {
|
|
return;
|
|
}
|
|
|
|
var percent = 0;
|
|
if (this.stack.length) {
|
|
|
|
var ref = this._animation;
|
|
var dir = ref.dir;
|
|
var getPercent = ref.percent;
|
|
var cancel = ref.cancel;
|
|
var translate$$1 = ref.translate;
|
|
|
|
percent = getPercent() * dir;
|
|
|
|
this.percent = abs(percent) * -dir;
|
|
|
|
this.stack.splice(0, this.stack.length);
|
|
|
|
cancel();
|
|
translate$$1(abs(percent));
|
|
|
|
this.index = this.getIndex(this.index - dir);
|
|
this.dragging = true;
|
|
|
|
}
|
|
|
|
this.unbindMove = on(doc, pointerMove, this.move, {capture: true, passive: false});
|
|
on(win, 'scroll', this.unbindMove);
|
|
on(doc, pointerUp, this.end, true);
|
|
|
|
this.drag = this.pos + this.$el.offsetWidth * percent;
|
|
|
|
},
|
|
|
|
move: function move(e) {
|
|
var this$1 = this;
|
|
|
|
|
|
var distance = this.pos - this.drag;
|
|
|
|
if (this.prevPos === this.pos || !this.dragging && abs(distance) < this.threshold) {
|
|
return;
|
|
}
|
|
|
|
e.cancelable && e.preventDefault();
|
|
|
|
this.dragging = true;
|
|
|
|
var percent = distance / this.$el.offsetWidth;
|
|
|
|
if (this.percent === percent) {
|
|
return;
|
|
}
|
|
|
|
var prevIndex = this.getIndex(this.index - trunc(this.percent)),
|
|
index = this.getIndex(this.index - trunc(percent)),
|
|
current = this.slides[index],
|
|
dir = percent < 0 ? 1 : -1,
|
|
nextIndex = getIndex(percent < 0 ? 'next' : 'previous', this.slides, index),
|
|
next = this.slides[nextIndex];
|
|
|
|
this.slides.forEach(function (el, i) { return toggleClass(el, this$1.clsActive, i === index || i === nextIndex); });
|
|
|
|
this._animation && this._animation.reset();
|
|
|
|
if (index !== prevIndex) {
|
|
trigger(this.slides[prevIndex], 'itemhide', [this]);
|
|
trigger(current, 'itemshow', [this]);
|
|
}
|
|
|
|
this._animation = new Transitioner(this.animation, this.easing, current, next, dir, noop);
|
|
this._animation.translate(abs(percent % 1));
|
|
|
|
this.percent = percent;
|
|
|
|
UIkit.update(null, current);
|
|
UIkit.update(null, next);
|
|
},
|
|
|
|
end: function end() {
|
|
|
|
off(win, 'scroll', this.unbindMove);
|
|
this.unbindMove();
|
|
off(doc, pointerUp, this.end, true);
|
|
|
|
if (this.dragging) {
|
|
|
|
var percent = this.percent;
|
|
|
|
this.percent = abs(this.percent) % 1;
|
|
this.index = this.getIndex(this.index - trunc(percent));
|
|
|
|
if (this.percent < .1 || percent < 0 === this.pos > this.prevPos) {
|
|
this.index = this.getIndex(percent > 0 ? 'previous' : 'next');
|
|
this.percent = 1 - this.percent;
|
|
percent *= -1;
|
|
}
|
|
|
|
this._animation && this._animation.reset();
|
|
this.show(percent > 0 ? 'previous' : 'next', true);
|
|
|
|
preventClick();
|
|
|
|
}
|
|
|
|
this.drag
|
|
= this.dragging
|
|
= this.percent
|
|
= null;
|
|
|
|
},
|
|
|
|
show: function show(index, force) {
|
|
var this$1 = this;
|
|
if ( force === void 0 ) force = false;
|
|
|
|
|
|
if (!force && this.drag) {
|
|
return;
|
|
}
|
|
|
|
this.stack[force ? 'unshift' : 'push'](index);
|
|
|
|
if (!force && this.stack.length > 1) {
|
|
|
|
if (this.stack.length === 2) {
|
|
this._animation.forward(250);
|
|
}
|
|
|
|
return;
|
|
}
|
|
|
|
var prevIndex = this.index,
|
|
nextIndex = this.getIndex(index),
|
|
prev = hasClass(this.slides, 'uk-active') && this.slides[prevIndex],
|
|
next = this.slides[nextIndex];
|
|
|
|
if (prev === next) {
|
|
this.stack[force ? 'shift' : 'pop']();
|
|
return;
|
|
}
|
|
|
|
prev && trigger(prev, 'beforeitemhide', [this]);
|
|
trigger(next, 'beforeitemshow', [this]);
|
|
|
|
this.index = nextIndex;
|
|
|
|
var done = function () {
|
|
|
|
prev && trigger(prev, 'itemhidden', [this$1]);
|
|
trigger(next, 'itemshown', [this$1]);
|
|
|
|
fastdom.mutate(function () {
|
|
this$1.stack.shift();
|
|
if (this$1.stack.length) {
|
|
this$1.show(this$1.stack.shift(), true);
|
|
} else {
|
|
this$1._animation = null;
|
|
}
|
|
});
|
|
};
|
|
|
|
if (prev || this.initialAnimation) {
|
|
|
|
this._show(
|
|
!prev ? this.Animations[this.initialAnimation] : this.animation,
|
|
force ? 'cubic-bezier(0.165, 0.840, 0.440, 1.000)' : this.easing,
|
|
prev,
|
|
next,
|
|
getDirection(index, prevIndex),
|
|
this.stack.length > 1,
|
|
done
|
|
);
|
|
|
|
}
|
|
|
|
prev && trigger(prev, 'itemhide', [this]);
|
|
trigger(next, 'itemshow', [this]);
|
|
|
|
if (!prev && !this.initialAnimation) {
|
|
done();
|
|
}
|
|
|
|
prev && fastdom.flush(); // iOS 10+ will honor the video.play only if called from a gesture handler
|
|
|
|
},
|
|
|
|
_show: function _show(animation, easing, prev, next, dir, forward, done) {
|
|
|
|
this._animation = new Transitioner(
|
|
animation,
|
|
easing,
|
|
prev,
|
|
next,
|
|
dir,
|
|
done
|
|
);
|
|
|
|
this._animation.show(
|
|
prev === next
|
|
? 300
|
|
: forward
|
|
? 150
|
|
: this.duration,
|
|
this.percent,
|
|
forward
|
|
);
|
|
|
|
},
|
|
|
|
getIndex: function getIndex$1(index) {
|
|
if ( index === void 0 ) index = this.index;
|
|
|
|
return getIndex(index, this.slides, this.index);
|
|
},
|
|
|
|
startAutoplay: function startAutoplay() {
|
|
var this$1 = this;
|
|
|
|
|
|
this.stopAutoplay();
|
|
|
|
if (this.autoplay) {
|
|
this.interval = setInterval(function () {
|
|
if (!(this$1.isHovering && this$1.pauseOnHover) && !this$1.stack.length) {
|
|
this$1.show('next');
|
|
}
|
|
}, this.autoplayInterval);
|
|
}
|
|
|
|
},
|
|
|
|
stopAutoplay: function stopAutoplay() {
|
|
if (this.interval) {
|
|
clearInterval(this.interval);
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
function Transitioner(animation, easing, current, next, dir, cb) {
|
|
|
|
var percent = animation.percent;
|
|
var translate$$1 = animation.translate;
|
|
var show = animation.show;
|
|
var props = show(dir);
|
|
|
|
return {
|
|
|
|
animation: animation,
|
|
dir: dir,
|
|
current: current,
|
|
next: next,
|
|
|
|
show: function show(duration, percent, linear) {
|
|
var this$1 = this;
|
|
if ( percent === void 0 ) percent = 0;
|
|
|
|
|
|
var ease = linear ? 'linear' : easing;
|
|
duration -= Math.round(duration * percent);
|
|
|
|
this.translate(percent);
|
|
|
|
triggerUpdate(next, 'itemin', {percent: percent, duration: duration, ease: ease, dir: dir});
|
|
current && triggerUpdate(current, 'itemout', {percent: 1 - percent, duration: duration, ease: ease, dir: dir});
|
|
|
|
return Promise.all([
|
|
Transition.start(next, props[1], duration, ease),
|
|
current && Transition.start(current, props[0], duration, ease)
|
|
]).then(function () {
|
|
this$1.reset();
|
|
cb();
|
|
}, noop);
|
|
},
|
|
|
|
stop: function stop() {
|
|
return Transition.stop([next, current]);
|
|
},
|
|
|
|
cancel: function cancel() {
|
|
Transition.cancel([next, current]);
|
|
},
|
|
|
|
reset: function reset() {
|
|
for (var prop in props[0]) {
|
|
css([next, current], prop, '');
|
|
}
|
|
},
|
|
|
|
forward: function forward(duration) {
|
|
|
|
var percent = this.percent();
|
|
Transition.cancel([next, current]);
|
|
this.show(duration, percent, true);
|
|
|
|
},
|
|
|
|
translate: function translate$1(percent) {
|
|
|
|
var props = translate$$1(percent, dir);
|
|
css(next, props[1]);
|
|
current && css(current, props[0]);
|
|
triggerUpdate(next, 'itemtranslatein', {percent: percent, dir: dir});
|
|
current && triggerUpdate(current, 'itemtranslateout', {percent: 1 - percent, dir: dir});
|
|
},
|
|
|
|
percent: function percent$1() {
|
|
return percent(current, next, dir);
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
function triggerUpdate(el, type, data) {
|
|
trigger(el, createEvent(type, false, false, data));
|
|
}
|
|
|
|
// polyfill for Math.trunc (IE)
|
|
function trunc(x) {
|
|
return ~~x;
|
|
}
|
|
|
|
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)
|
|
}
|
|
|
|
function hasTextNodesOnly(el) {
|
|
return !el.children.length && el.childNodes.length;
|
|
}
|
|
|
|
}
|
|
|
|
var Animations$1 = function (UIkit) {
|
|
|
|
var mixin = UIkit.mixin;
|
|
var ref = UIkit.util;
|
|
var assign = ref.assign;
|
|
var css = ref.css;
|
|
|
|
return assign({}, mixin.slideshow.defaults.Animations, {
|
|
|
|
fade: {
|
|
|
|
show: function show() {
|
|
return [
|
|
{opacity: 0},
|
|
{opacity: 1}
|
|
];
|
|
},
|
|
|
|
percent: function percent(current) {
|
|
return 1 - css(current, 'opacity');
|
|
},
|
|
|
|
translate: function translate$$1(percent) {
|
|
return [
|
|
{opacity: 1 - percent},
|
|
{opacity: percent}
|
|
];
|
|
}
|
|
|
|
},
|
|
|
|
scale: {
|
|
|
|
show: function show() {
|
|
return [
|
|
{opacity: 0, transform: scale3d(1 - .2)},
|
|
{opacity: 1, transform: scale3d(1)}
|
|
];
|
|
},
|
|
|
|
percent: function percent(current) {
|
|
return 1 - css(current, 'opacity');
|
|
},
|
|
|
|
translate: function translate$$1(percent) {
|
|
return [
|
|
{opacity: 1 - percent, transform: scale3d(1 - .2 * percent)},
|
|
{opacity: percent, transform: scale3d(1 - .2 + .2 * percent)}
|
|
];
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
};
|
|
|
|
function plugin$2(UIkit) {
|
|
|
|
if (plugin$2.installed) {
|
|
return;
|
|
}
|
|
|
|
UIkit.use(plugin$3);
|
|
|
|
var mixin = UIkit.mixin;
|
|
var util = UIkit.util;
|
|
var $ = util.$;
|
|
var $$ = util.$$;
|
|
var addClass = util.addClass;
|
|
var ajax = util.ajax;
|
|
var append = util.append;
|
|
var assign = util.assign;
|
|
var attr = util.attr;
|
|
var css = util.css;
|
|
var doc = util.doc;
|
|
var docEl = util.docEl;
|
|
var data = util.data;
|
|
var getImage = util.getImage;
|
|
var html = util.html;
|
|
var index = util.index;
|
|
var on = util.on;
|
|
var pointerDown = util.pointerDown;
|
|
var pointerMove = util.pointerMove;
|
|
var removeClass = util.removeClass;
|
|
var Transition = util.Transition;
|
|
var trigger = util.trigger;
|
|
|
|
UIkit.component('lightbox', {
|
|
|
|
attrs: true,
|
|
|
|
props: {
|
|
animation: String,
|
|
toggle: String,
|
|
autoplay: Boolean,
|
|
autoplayInterval: Number,
|
|
videoAutoplay: Boolean
|
|
},
|
|
|
|
defaults: {
|
|
animation: undefined,
|
|
toggle: 'a',
|
|
autoplay: 0,
|
|
videoAutoplay: false
|
|
},
|
|
|
|
computed: {
|
|
|
|
toggles: function toggles(ref, $el) {
|
|
var this$1 = this;
|
|
var toggle = ref.toggle;
|
|
|
|
var toggles = $$(toggle, $el);
|
|
|
|
this._changed = !this._toggles
|
|
|| toggles.length !== this._toggles.length
|
|
|| toggles.some(function (el, i) { return el !== this$1._toggles[i]; });
|
|
|
|
return this._toggles = toggles;
|
|
}
|
|
|
|
},
|
|
|
|
disconnected: function disconnected() {
|
|
|
|
if (this.panel) {
|
|
this.panel.$destroy(true);
|
|
this.panel = null;
|
|
}
|
|
|
|
},
|
|
|
|
events: [
|
|
|
|
{
|
|
|
|
name: 'click',
|
|
|
|
delegate: function delegate() {
|
|
return ((this.toggle) + ":not(.uk-disabled)");
|
|
},
|
|
|
|
handler: function handler(e) {
|
|
e.preventDefault();
|
|
e.current.blur();
|
|
this.show(index(this.toggles, e.current));
|
|
}
|
|
|
|
}
|
|
|
|
],
|
|
|
|
update: function update() {
|
|
|
|
if (this.panel && this.animation) {
|
|
this.panel.$props.animation = this.animation;
|
|
this.panel.$emit();
|
|
}
|
|
|
|
if (!this.toggles.length || !this._changed || !this.panel) {
|
|
return;
|
|
}
|
|
|
|
this.panel.$destroy(true);
|
|
this._init();
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
_init: function _init() {
|
|
return this.panel = this.panel || UIkit.lightboxPanel(assign({}, this.$props, {
|
|
items: this.toggles.reduce(function (items, el) {
|
|
items.push(['href', 'caption', 'type', 'poster'].reduce(function (obj, attr) {
|
|
obj[attr === 'href' ? 'source' : attr] = data(el, attr);
|
|
return obj;
|
|
}, {}));
|
|
return items;
|
|
}, [])
|
|
}));
|
|
},
|
|
|
|
show: function show(index) {
|
|
|
|
if (!this.panel) {
|
|
this._init();
|
|
}
|
|
|
|
return this.panel.show(index);
|
|
|
|
},
|
|
|
|
hide: function hide() {
|
|
|
|
return this.panel && this.panel.hide();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
UIkit.component('lightbox-panel', {
|
|
|
|
mixins: [mixin.container, mixin.togglable, mixin.slideshow],
|
|
|
|
functional: true,
|
|
|
|
defaults: {
|
|
preload: 1,
|
|
videoAutoplay: false,
|
|
delayControls: 3000,
|
|
items: [],
|
|
cls: 'uk-open',
|
|
clsPage: 'uk-lightbox-page',
|
|
selList: '.uk-lightbox-items',
|
|
attrItem: 'uk-lightbox-item',
|
|
initialAnimation: 'scale',
|
|
pauseOnHover: false,
|
|
velocity: 2,
|
|
Animations: Animations$1(UIkit),
|
|
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 uk-toggle=\"!.uk-lightbox\"></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 created() {
|
|
var this$1 = this;
|
|
|
|
|
|
this.$mount(append(this.container, this.template));
|
|
|
|
this.caption = $('.uk-lightbox-caption', this.$el);
|
|
|
|
this.items.forEach(function (el, i) { return append(this$1.list, "<li></li>"); });
|
|
|
|
},
|
|
|
|
events: [
|
|
|
|
{
|
|
|
|
name: (pointerMove + " " + pointerDown + " keydown"),
|
|
|
|
handler: 'showControls'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'click',
|
|
|
|
self: true,
|
|
|
|
delegate: function delegate() {
|
|
return ((this.selList) + " > *");
|
|
},
|
|
|
|
handler: function handler(e) {
|
|
e.preventDefault();
|
|
this.hide();
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'show',
|
|
|
|
self: true,
|
|
|
|
handler: function handler() {
|
|
addClass(docEl, this.clsPage);
|
|
}
|
|
},
|
|
|
|
{
|
|
|
|
name: 'shown',
|
|
|
|
self: true,
|
|
|
|
handler: 'showControls'
|
|
},
|
|
|
|
{
|
|
|
|
name: 'hide',
|
|
|
|
self: true,
|
|
|
|
handler: 'hideControls'
|
|
},
|
|
|
|
{
|
|
|
|
name: 'hidden',
|
|
|
|
self: true,
|
|
|
|
handler: function handler() {
|
|
removeClass(docEl, this.clsPage);
|
|
}
|
|
},
|
|
|
|
{
|
|
|
|
name: 'keyup',
|
|
|
|
el: function el() {
|
|
return doc;
|
|
},
|
|
|
|
handler: function handler(e) {
|
|
|
|
if (!this.isToggled(this.$el)) {
|
|
return;
|
|
}
|
|
|
|
switch (e.keyCode) {
|
|
case 27:
|
|
this.hide();
|
|
break;
|
|
case 37:
|
|
this.show('previous');
|
|
break;
|
|
case 39:
|
|
this.show('next');
|
|
break;
|
|
}
|
|
}
|
|
},
|
|
|
|
{
|
|
|
|
name: 'toggle',
|
|
|
|
handler: function handler(e) {
|
|
e.preventDefault();
|
|
this.toggle();
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'beforeitemshow',
|
|
|
|
self: true,
|
|
|
|
delegate: function delegate() {
|
|
return ((this.selList) + " > *");
|
|
},
|
|
|
|
handler: function handler() {
|
|
if (!this.isToggled()) {
|
|
this.toggleNow(this.$el, true);
|
|
}
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'itemshow',
|
|
|
|
self: true,
|
|
|
|
delegate: function delegate() {
|
|
return ((this.selList) + " > *");
|
|
},
|
|
|
|
handler: function handler(ref) {
|
|
var this$1 = this;
|
|
var target = ref.target;
|
|
|
|
|
|
var i = index(target),
|
|
caption = this.getItem(i).caption;
|
|
css(this.caption, 'display', caption ? '' : 'none');
|
|
html(this.caption, caption);
|
|
|
|
for (var j = 0; j <= this.preload; j++) {
|
|
this$1.loadItem(this$1.getIndex(i + j));
|
|
this$1.loadItem(this$1.getIndex(i - j));
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'itemload',
|
|
|
|
handler: function handler(_, item) {
|
|
var this$1 = this;
|
|
|
|
|
|
var source = item.source;
|
|
var type = item.type;
|
|
var matches;
|
|
|
|
this.setItem(item, '<span uk-spinner></span>');
|
|
|
|
if (!source) {
|
|
return;
|
|
}
|
|
|
|
// Image
|
|
if (type === 'image' || source.match(/\.(jp(e)?g|png|gif|svg)$/i)) {
|
|
|
|
getImage(source).then(
|
|
function (img) { return this$1.setItem(item, ("<img width=\"" + (img.width) + "\" height=\"" + (img.height) + "\" src=\"" + source + "\">")); },
|
|
function () { return this$1.setError(item); }
|
|
);
|
|
|
|
// Video
|
|
} else if (type === 'video' || source.match(/\.(mp4|webm|ogv)$/i)) {
|
|
|
|
var video = $(("<video controls playsinline" + (item.poster ? (" poster=\"" + (item.poster) + "\"") : '') + " uk-video=\"autoplay: " + (this.videoAutoplay) + "\"></video>"));
|
|
attr(video, 'src', source);
|
|
|
|
on(video, 'error', function () { return this$1.setError(item); });
|
|
on(video, 'loadedmetadata', function () {
|
|
attr(video, {width: video.videoWidth, height: video.videoHeight});
|
|
this$1.setItem(item, video);
|
|
});
|
|
|
|
// Iframe
|
|
} else if (type === 'iframe') {
|
|
|
|
this.setItem(item, ("<iframe class=\"uk-lightbox-iframe\" src=\"" + source + "\" frameborder=\"0\" allowfullscreen></iframe>"));
|
|
|
|
// Youtube
|
|
} else if (matches = source.match(/\/\/.*?youtube\.[a-z]+\/watch\?v=([^&\s]+)/) || source.match(/youtu\.be\/(.*)/)) {
|
|
|
|
var id = matches[1],
|
|
setIframe = function (width, height) {
|
|
if ( width === void 0 ) width = 640;
|
|
if ( height === void 0 ) height = 450;
|
|
|
|
return this$1.setItem(item, getIframe(("//www.youtube.com/embed/" + id), width, height, this$1.videoAutoplay));
|
|
};
|
|
|
|
getImage(("//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 lowres
|
|
if (width === 120 && height === 90) {
|
|
getImage(("//img.youtube.com/vi/" + id + "/0.jpg")).then(
|
|
function (ref) {
|
|
var width = ref.width;
|
|
var height = ref.height;
|
|
|
|
return setIframe(width, height);
|
|
},
|
|
setIframe
|
|
);
|
|
} else {
|
|
setIframe(width, height);
|
|
}
|
|
},
|
|
setIframe
|
|
);
|
|
|
|
// Vimeo
|
|
} else if (matches = source.match(/(\/\/.*?)vimeo\.[a-z]+\/([0-9]+).*?/)) {
|
|
|
|
ajax(("//vimeo.com/api/oembed.json?maxwidth=1920&url=" + (encodeURI(source))), {responseType: 'json'})
|
|
.then(function (ref) {
|
|
var ref_response = ref.response;
|
|
var height = ref_response.height;
|
|
var width = ref_response.width;
|
|
|
|
return this$1.setItem(item, getIframe(("//player.vimeo.com/video/" + (matches[2])), width, height, this$1.videoAutoplay));
|
|
}
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
],
|
|
|
|
methods: {
|
|
|
|
toggle: function toggle() {
|
|
return this.isToggled() ? this.hide() : this.show();
|
|
},
|
|
|
|
hide: function hide() {
|
|
|
|
if (this.isToggled()) {
|
|
this.toggleNow(this.$el, false);
|
|
}
|
|
|
|
removeClass(this.slides, this.clsActive);
|
|
Transition.stop(this.slides);
|
|
|
|
delete this.index;
|
|
delete this.percent;
|
|
delete this._animation;
|
|
|
|
},
|
|
|
|
loadItem: function loadItem(index) {
|
|
if ( index === void 0 ) index = this.index;
|
|
|
|
|
|
var item = this.getItem(index);
|
|
|
|
if (item.content) {
|
|
return;
|
|
}
|
|
|
|
trigger(this.$el, 'itemload', [item]);
|
|
},
|
|
|
|
getItem: function getItem(index) {
|
|
if ( index === void 0 ) index = this.index;
|
|
|
|
return this.items[index] || {};
|
|
},
|
|
|
|
setItem: function setItem(item, content) {
|
|
assign(item, {content: content});
|
|
var el = html(this.slides[this.items.indexOf(item)], content);
|
|
trigger(this.$el, 'itemloaded', [this, el]);
|
|
UIkit.update(null, el);
|
|
},
|
|
|
|
setError: function setError(item) {
|
|
this.setItem(item, '<span uk-icon="icon: bolt; ratio: 2"></span>');
|
|
},
|
|
|
|
showControls: function showControls() {
|
|
|
|
clearTimeout(this.controlsTimer);
|
|
this.controlsTimer = setTimeout(this.hideControls, this.delayControls);
|
|
|
|
attr($$(("[" + (this.attrItem) + "],[data-" + (this.attrItem) + "]"), this.$el), 'hidden', this.items.length < 2 ? '' : null);
|
|
|
|
addClass(this.$el, 'uk-active uk-transition-active');
|
|
|
|
},
|
|
|
|
hideControls: function hideControls() {
|
|
removeClass(this.$el, 'uk-active uk-transition-active');
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
function getIframe(src, width, height, autoplay) {
|
|
return ("<iframe src=\"" + src + "\" width=\"" + width + "\" height=\"" + height + "\" style=\"max-width: 100%; box-sizing: border-box;\" frameborder=\"0\" allowfullscreen uk-video=\"autoplay: " + autoplay + "\" uk-responsive></iframe>");
|
|
}
|
|
|
|
}
|
|
|
|
if (!true && typeof window !== 'undefined' && window.UIkit) {
|
|
window.UIkit.use(plugin$2);
|
|
}
|
|
|
|
function plugin$4(UIkit) {
|
|
|
|
if (plugin$4.installed) {
|
|
return;
|
|
}
|
|
|
|
var ref = UIkit.util;
|
|
var append = ref.append;
|
|
var closest = ref.closest;
|
|
var css = ref.css;
|
|
var each = ref.each;
|
|
var pointerEnter = ref.pointerEnter;
|
|
var pointerLeave = ref.pointerLeave;
|
|
var remove = ref.remove;
|
|
var toFloat = ref.toFloat;
|
|
var Transition = ref.Transition;
|
|
var trigger = ref.trigger;
|
|
var containers = {};
|
|
|
|
UIkit.component('notification', {
|
|
|
|
functional: true,
|
|
|
|
args: ['message', 'status'],
|
|
|
|
defaults: {
|
|
message: '',
|
|
status: '',
|
|
timeout: 5000,
|
|
group: null,
|
|
pos: 'top-center',
|
|
clsClose: 'uk-notification-close',
|
|
clsMsg: 'uk-notification-message'
|
|
},
|
|
|
|
created: function created() {
|
|
|
|
if (!containers[this.pos]) {
|
|
containers[this.pos] = append(UIkit.container, ("<div class=\"uk-notification uk-notification-" + (this.pos) + "\"></div>"));
|
|
}
|
|
|
|
var container = css(containers[this.pos], 'display', 'block');
|
|
|
|
this.$mount(append(container,
|
|
("<div class=\"" + (this.clsMsg) + (this.status ? (" " + (this.clsMsg) + "-" + (this.status)) : '') + "\"> <a href=\"#\" class=\"" + (this.clsClose) + "\" data-uk-close></a> <div>" + (this.message) + "</div> </div>")
|
|
));
|
|
|
|
},
|
|
|
|
ready: function ready() {
|
|
var this$1 = this;
|
|
|
|
|
|
var marginBottom = toFloat(css(this.$el, 'marginBottom'));
|
|
Transition.start(
|
|
css(this.$el, {opacity: 0, marginTop: -1 * this.$el.offsetHeight, marginBottom: 0}),
|
|
{opacity: 1, marginTop: 0, marginBottom: marginBottom}
|
|
).then(function () {
|
|
if (this$1.timeout) {
|
|
this$1.timer = setTimeout(this$1.close, this$1.timeout);
|
|
}
|
|
});
|
|
|
|
},
|
|
|
|
events: ( obj = {
|
|
|
|
click: function click(e) {
|
|
if (closest(e.target, 'a[href="#"]')) {
|
|
e.preventDefault();
|
|
}
|
|
this.close();
|
|
}
|
|
|
|
}, obj[pointerEnter] = function () {
|
|
if (this.timer) {
|
|
clearTimeout(this.timer);
|
|
}
|
|
}, obj[pointerLeave] = function () {
|
|
if (this.timeout) {
|
|
this.timer = setTimeout(this.close, this.timeout);
|
|
}
|
|
}, obj ),
|
|
|
|
methods: {
|
|
|
|
close: function close(immediate) {
|
|
var this$1 = this;
|
|
|
|
|
|
var removeFn = function () {
|
|
|
|
trigger(this$1.$el, 'close', [this$1]);
|
|
remove(this$1.$el);
|
|
|
|
if (!containers[this$1.pos].children.length) {
|
|
css(containers[this$1.pos], 'display', 'none');
|
|
}
|
|
|
|
};
|
|
|
|
if (this.timer) {
|
|
clearTimeout(this.timer);
|
|
}
|
|
|
|
if (immediate) {
|
|
removeFn();
|
|
} else {
|
|
Transition.start(this.$el, {
|
|
opacity: 0,
|
|
marginTop: -1 * this.$el.offsetHeight,
|
|
marginBottom: 0
|
|
}).then(removeFn);
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
var obj;
|
|
|
|
UIkit.notification.closeAll = function (group, immediate) {
|
|
each(UIkit.instances, function (component) {
|
|
if (component.$options.name === 'notification' && (!group || group === component.group)) {
|
|
component.close(immediate);
|
|
}
|
|
});
|
|
};
|
|
|
|
}
|
|
|
|
if (!true && typeof window !== 'undefined' && window.UIkit) {
|
|
window.UIkit.use(plugin$4);
|
|
}
|
|
|
|
function plugin$5(UIkit) {
|
|
|
|
if (plugin$5.installed) {
|
|
return;
|
|
}
|
|
|
|
var mixin = UIkit.mixin;
|
|
var util = UIkit.util;
|
|
var clamp = util.clamp;
|
|
var css = util.css;
|
|
var Dimensions = util.Dimensions;
|
|
var each = util.each;
|
|
var getImage = util.getImage;
|
|
var includes = util.includes;
|
|
var isNumber = util.isNumber;
|
|
var isUndefined = util.isUndefined;
|
|
var scrolledOver = util.scrolledOver;
|
|
var toFloat = util.toFloat;
|
|
var query = util.query;
|
|
var win = util.win;
|
|
|
|
var props = ['x', 'y', 'bgx', 'bgy', 'rotate', 'scale', 'color', 'backgroundColor', 'borderColor', 'opacity', 'blur', 'hue', 'grayscale', 'invert', 'saturate', 'sepia', 'fopacity'];
|
|
|
|
mixin.parallax = {
|
|
|
|
props: props.reduce(function (props, prop) {
|
|
props[prop] = 'list';
|
|
return props;
|
|
}, {
|
|
media: 'media'
|
|
}),
|
|
|
|
defaults: props.reduce(function (defaults, prop) {
|
|
defaults[prop] = undefined;
|
|
return defaults;
|
|
}, {
|
|
media: false
|
|
}),
|
|
|
|
computed: {
|
|
|
|
props: function props$1(properties, $el) {
|
|
var this$1 = this;
|
|
|
|
|
|
return props.reduce(function (props, prop) {
|
|
|
|
if (isUndefined(properties[prop])) {
|
|
return props;
|
|
}
|
|
|
|
var isColor = prop.match(/color/i),
|
|
isCssProp = isColor || prop === 'opacity',
|
|
steps = properties[prop].slice(0),
|
|
pos, bgPos, diff;
|
|
|
|
if (isCssProp) {
|
|
css($el, prop, '');
|
|
}
|
|
|
|
if (steps.length < 2) {
|
|
steps.unshift((prop === 'scale'
|
|
? 1
|
|
: isCssProp
|
|
? css($el, prop)
|
|
: 0) || 0);
|
|
}
|
|
|
|
var unit = includes(steps.join(''), '%') ? '%' : 'px';
|
|
|
|
if (isColor) {
|
|
|
|
var color = $el.style.color;
|
|
steps = steps.map(function (step) { return parseColor($el, step); });
|
|
$el.style.color = color;
|
|
|
|
} else {
|
|
|
|
steps = steps.map(toFloat);
|
|
|
|
}
|
|
|
|
if (prop.match(/^bg/)) {
|
|
|
|
css($el, ("background-position-" + (prop[2])), '');
|
|
bgPos = css($el, 'backgroundPosition').split(' ')[prop[2] === 'x' ? 0 : 1]; // IE 11 can't read background-position-[x|y]
|
|
|
|
if (this$1.covers) {
|
|
|
|
var min = Math.min.apply(Math, steps),
|
|
max = Math.max.apply(Math, steps),
|
|
down = steps.indexOf(min) < steps.indexOf(max);
|
|
|
|
diff = max - min;
|
|
|
|
steps = steps.map(function (step) { return step - (down ? min : max); });
|
|
pos = (down ? -diff : 0) + "px";
|
|
|
|
} else {
|
|
|
|
pos = bgPos;
|
|
|
|
}
|
|
}
|
|
|
|
props[prop] = {steps: steps, unit: unit, pos: pos, bgPos: bgPos, diff: diff};
|
|
|
|
return props;
|
|
|
|
}, {});
|
|
|
|
},
|
|
|
|
bgProps: function bgProps() {
|
|
var this$1 = this;
|
|
|
|
return ['bgx', 'bgy'].filter(function (bg) { return bg in this$1.props; });
|
|
},
|
|
|
|
covers: function covers(_, $el) {
|
|
return css($el.style.backgroundSize !== '' ? css($el, 'backgroundSize', '') : $el, 'backgroundSize') === 'cover';
|
|
}
|
|
|
|
},
|
|
|
|
disconnected: function disconnected() {
|
|
delete this._image;
|
|
},
|
|
|
|
update: [
|
|
|
|
{
|
|
|
|
read: function read() {
|
|
var this$1 = this;
|
|
|
|
|
|
delete this._computeds.props;
|
|
|
|
this._active = !this.media || win.matchMedia(this.media).matches;
|
|
|
|
if (this._image) {
|
|
this._image.dimEl = {
|
|
width: this.$el.offsetWidth,
|
|
height: this.$el.offsetHeight
|
|
};
|
|
}
|
|
|
|
if (!isUndefined(this._image) || !this.covers || !this.bgProps.length) {
|
|
return;
|
|
}
|
|
|
|
var src = css(this.$el, 'backgroundImage').replace(/^none|url\(["']?(.+?)["']?\)$/, '$1');
|
|
|
|
if (!src) {
|
|
return;
|
|
}
|
|
|
|
this._image = false;
|
|
|
|
getImage(src).then(function (img) {
|
|
this$1._image = {
|
|
width: img.naturalWidth,
|
|
height: img.naturalHeight
|
|
};
|
|
|
|
this$1.$emit();
|
|
});
|
|
|
|
},
|
|
|
|
write: function write() {
|
|
var this$1 = this;
|
|
|
|
|
|
if (!this._image) {
|
|
return;
|
|
}
|
|
|
|
if (!this._active) {
|
|
css(this.$el, {backgroundSize: '', backgroundRepeat: ''});
|
|
return;
|
|
}
|
|
|
|
var image = this._image,
|
|
dimEl = image.dimEl,
|
|
dim = Dimensions.cover(image, dimEl);
|
|
|
|
this.bgProps.forEach(function (prop) {
|
|
|
|
var ref = this$1.props[prop];
|
|
var diff = ref.diff;
|
|
var bgPos = ref.bgPos;
|
|
var steps = ref.steps;
|
|
var attr = prop === 'bgy' ? 'height' : 'width',
|
|
span = dim[attr] - dimEl[attr];
|
|
|
|
if (!bgPos.match(/%$|0px/)) {
|
|
return;
|
|
}
|
|
|
|
if (span < diff) {
|
|
dimEl[attr] = dim[attr] + diff - span;
|
|
} else if (span > diff) {
|
|
|
|
bgPos = parseFloat(bgPos);
|
|
|
|
if (bgPos) {
|
|
this$1.props[prop].steps = steps.map(function (step) { return step - (span - diff) / (100 / bgPos); });
|
|
}
|
|
}
|
|
|
|
dim = Dimensions.cover(image, dimEl);
|
|
});
|
|
|
|
css(this.$el, {
|
|
backgroundSize: ((dim.width) + "px " + (dim.height) + "px"),
|
|
backgroundRepeat: 'no-repeat'
|
|
});
|
|
|
|
},
|
|
|
|
events: ['load', 'resize']
|
|
|
|
}
|
|
|
|
],
|
|
|
|
methods: {
|
|
|
|
reset: function reset() {
|
|
var this$1 = this;
|
|
|
|
each(this.getCss(0), function (_, prop) { return css(this$1.$el, prop, ''); });
|
|
},
|
|
|
|
getCss: function getCss(percent) {
|
|
|
|
var translated = false,
|
|
props = this.props;
|
|
|
|
return Object.keys(props).reduce(function (css, prop) {
|
|
|
|
var ref = props[prop];
|
|
var steps = ref.steps;
|
|
var unit = ref.unit;
|
|
var pos = ref.pos;
|
|
var value = getValue(steps, percent);
|
|
|
|
switch (prop) {
|
|
|
|
// transforms
|
|
case 'x':
|
|
case 'y':
|
|
|
|
if (translated) {
|
|
break;
|
|
}
|
|
|
|
var ref$1 = ['x', 'y'].map(function (dir) { return prop === dir
|
|
? value + unit
|
|
: props[dir]
|
|
? getValue(props[dir].steps, percent) + props[dir].unit
|
|
: 0; }
|
|
);
|
|
var x = ref$1[0];
|
|
var y = ref$1[1];
|
|
|
|
translated = css.transform += " translate3d(" + x + ", " + y + ", 0)";
|
|
break;
|
|
case 'rotate':
|
|
css.transform += " rotate(" + value + "deg)";
|
|
break;
|
|
case 'scale':
|
|
css.transform += " scale(" + value + ")";
|
|
break;
|
|
|
|
// bg image
|
|
case 'bgy':
|
|
case 'bgx':
|
|
css[("background-position-" + (prop[2]))] = "calc(" + pos + " + " + (value + unit) + ")";
|
|
break;
|
|
|
|
// color
|
|
case 'color':
|
|
case 'backgroundColor':
|
|
case 'borderColor':
|
|
|
|
var ref$2 = getStep(steps, percent);
|
|
var start = ref$2[0];
|
|
var end = ref$2[1];
|
|
var p = ref$2[2];
|
|
|
|
css[prop] = "rgba(" + (start.map(function (value, i) {
|
|
value = value + p * (end[i] - value);
|
|
return i === 3 ? toFloat(value) : parseInt(value, 10);
|
|
}).join(',')) + ")";
|
|
break;
|
|
|
|
// CSS Filter
|
|
case 'blur':
|
|
css.filter += " blur(" + value + "px)";
|
|
break;
|
|
case 'hue':
|
|
css.filter += " hue-rotate(" + value + "deg)";
|
|
break;
|
|
case 'fopacity':
|
|
css.filter += " opacity(" + value + "%)";
|
|
break;
|
|
case 'grayscale':
|
|
case 'invert':
|
|
case 'saturate':
|
|
case 'sepia':
|
|
css.filter += " " + prop + "(" + value + "%)";
|
|
break;
|
|
|
|
default:
|
|
css[prop] = value;
|
|
}
|
|
|
|
return css;
|
|
|
|
}, {transform: '', filter: ''});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
UIkit.component('parallax', {
|
|
|
|
mixins: [mixin.parallax],
|
|
|
|
props: {
|
|
target: String,
|
|
viewport: Number,
|
|
easing: Number,
|
|
},
|
|
|
|
defaults: {
|
|
target: false,
|
|
viewport: 1,
|
|
easing: 1,
|
|
},
|
|
|
|
computed: {
|
|
|
|
target: function target(ref, $el) {
|
|
var target = ref.target;
|
|
|
|
return target && query(target, $el) || $el;
|
|
}
|
|
|
|
},
|
|
|
|
disconnected: function disconnected() {
|
|
delete this._prev;
|
|
},
|
|
|
|
update: [
|
|
|
|
{
|
|
|
|
read: function read() {
|
|
|
|
this._percent = ease(scrolledOver(this.target) / (this.viewport || 1), this.easing);
|
|
|
|
},
|
|
|
|
write: function write(ref) {
|
|
var type = ref.type;
|
|
|
|
|
|
if (type !== 'scroll') {
|
|
delete this._prev;
|
|
}
|
|
|
|
if (!this._active) {
|
|
this.reset();
|
|
return;
|
|
}
|
|
|
|
if (this._prev !== this._percent) {
|
|
css(this.$el, this.getCss(this._percent));
|
|
this._prev = this._percent;
|
|
}
|
|
|
|
},
|
|
|
|
events: ['scroll', 'load', 'resize']
|
|
}
|
|
|
|
]
|
|
|
|
});
|
|
|
|
function ease(percent, easing) {
|
|
return clamp(percent * (1 - (easing - easing * percent)))
|
|
}
|
|
|
|
function parseColor(el, color) {
|
|
return css(css(el, 'color', color), 'color').split(/[(),]/g).slice(1, -1).concat(1).slice(0, 4).map(function (n) { return toFloat(n); });
|
|
}
|
|
|
|
function getStep(steps, percent) {
|
|
var count = steps.length - 1,
|
|
index = Math.min(Math.floor(count * percent), count - 1),
|
|
step = steps.slice(index, index + 2);
|
|
|
|
step.push(percent === 1 ? 1 : percent % (1 / count) * count);
|
|
|
|
return step;
|
|
}
|
|
|
|
function getValue(steps, percent) {
|
|
var ref = getStep(steps, percent);
|
|
var start = ref[0];
|
|
var end = ref[1];
|
|
var p = ref[2];
|
|
return (isNumber(start)
|
|
? start + Math.abs(start - end) * p * (start < end ? 1 : -1)
|
|
: +end
|
|
).toFixed(2);
|
|
}
|
|
|
|
}
|
|
|
|
if (!true && typeof window !== 'undefined' && window.UIkit) {
|
|
window.UIkit.use(plugin$5);
|
|
}
|
|
|
|
var Animations$2 = function (UIkit) {
|
|
|
|
var mixin = UIkit.mixin;
|
|
var ref = UIkit.util;
|
|
var assign = ref.assign;
|
|
var css = ref.css;
|
|
|
|
var Animations$$1 = assign({}, mixin.slideshow.defaults.Animations, {
|
|
|
|
fade: {
|
|
|
|
show: function show() {
|
|
return [
|
|
{opacity: 0, zIndex: 0},
|
|
{zIndex: -1}
|
|
];
|
|
},
|
|
|
|
percent: function percent(current) {
|
|
return 1 - css(current, 'opacity');
|
|
},
|
|
|
|
translate: function translate$$1(percent) {
|
|
return [
|
|
{opacity: 1 - percent, zIndex: 0},
|
|
{zIndex: -1}
|
|
];
|
|
}
|
|
|
|
},
|
|
|
|
scale: {
|
|
|
|
show: function show() {
|
|
return [
|
|
{opacity: 0, transform: scale3d(1 + .5), zIndex: 0},
|
|
{zIndex: -1}
|
|
];
|
|
},
|
|
|
|
percent: function percent(current) {
|
|
return 1 - css(current, 'opacity');
|
|
},
|
|
|
|
translate: function translate$$1(percent) {
|
|
return [
|
|
{opacity: 1 - percent, transform: scale3d(1 + .5 * percent), zIndex: 0},
|
|
{zIndex: -1}
|
|
];
|
|
}
|
|
|
|
},
|
|
|
|
pull: {
|
|
|
|
show: function show(dir) {
|
|
return dir < 0
|
|
? [
|
|
{transform: translate(30), zIndex: -1},
|
|
{transform: translate(), zIndex: 0} ]
|
|
: [
|
|
{transform: translate(-100), zIndex: 0},
|
|
{transform: translate(), zIndex: -1}
|
|
];
|
|
},
|
|
|
|
percent: function percent(current, next, dir) {
|
|
return dir < 0
|
|
? 1 - Animations$$1.translated(next)
|
|
: Animations$$1.translated(current);
|
|
},
|
|
|
|
translate: function translate$1(percent, dir) {
|
|
return dir < 0
|
|
? [
|
|
{transform: translate(30 * percent), zIndex: -1},
|
|
{transform: translate(-100 * (1 - percent)), zIndex: 0} ]
|
|
: [
|
|
{transform: translate(-percent * 100), zIndex: 0},
|
|
{transform: translate(30 * (1 - percent)), zIndex: -1}
|
|
];
|
|
}
|
|
|
|
},
|
|
|
|
push: {
|
|
|
|
show: function show(dir) {
|
|
return dir < 0
|
|
? [
|
|
{transform: translate(100), zIndex: 0},
|
|
{transform: translate(), zIndex: -1} ]
|
|
: [
|
|
{transform: translate(-30), zIndex: -1},
|
|
{transform: translate(), zIndex: 0}
|
|
];
|
|
},
|
|
|
|
percent: function percent(current, next, dir) {
|
|
return dir > 0
|
|
? 1 - Animations$$1.translated(next)
|
|
: Animations$$1.translated(current);
|
|
},
|
|
|
|
translate: function translate$2(percent, dir) {
|
|
return dir < 0
|
|
? [
|
|
{transform: translate(percent * 100), zIndex: 0},
|
|
{transform: translate(-30 * (1 - percent)), zIndex: -1} ]
|
|
: [
|
|
{transform: translate(-30 * percent), zIndex: -1},
|
|
{transform: translate(100 * (1 - percent)), zIndex: 0}
|
|
];
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
return Animations$$1;
|
|
|
|
};
|
|
|
|
function plugin$6(UIkit) {
|
|
|
|
if (plugin$6.installed) {
|
|
return;
|
|
}
|
|
|
|
UIkit.use(plugin$5);
|
|
UIkit.use(plugin$3);
|
|
|
|
var mixin = UIkit.mixin;
|
|
var ref = UIkit.util;
|
|
var closest = ref.closest;
|
|
var css = ref.css;
|
|
var fastdom = ref.fastdom;
|
|
var endsWith = ref.endsWith;
|
|
var height = ref.height;
|
|
var noop = ref.noop;
|
|
var Transition = ref.Transition;
|
|
|
|
UIkit.component('slideshow', {
|
|
|
|
mixins: [mixin.class, mixin.slideshow],
|
|
|
|
props: {
|
|
ratio: String,
|
|
minHeight: Boolean,
|
|
maxHeight: Boolean,
|
|
},
|
|
|
|
defaults: {
|
|
ratio: '16:9',
|
|
minHeight: false,
|
|
maxHeight: false,
|
|
selList: '.uk-slideshow-items',
|
|
attrItem: 'uk-slideshow-item',
|
|
Animations: Animations$2(UIkit)
|
|
},
|
|
|
|
ready: function ready() {
|
|
var this$1 = this;
|
|
|
|
fastdom.mutate(function () { return this$1.show(this$1.index); });
|
|
},
|
|
|
|
update: {
|
|
|
|
read: function read() {
|
|
|
|
var ref = this.ratio.split(':').map(Number);
|
|
var width = ref[0];
|
|
var height = ref[1];
|
|
this.height = height * this.$el.offsetWidth / width;
|
|
|
|
if (this.minHeight) {
|
|
this.height = Math.max(this.minHeight, this.height);
|
|
}
|
|
|
|
if (this.maxHeight) {
|
|
this.height = Math.min(this.maxHeight, this.height);
|
|
}
|
|
|
|
},
|
|
|
|
write: function write() {
|
|
height(this.list, Math.floor(this.height));
|
|
},
|
|
|
|
events: ['load', 'resize']
|
|
|
|
}
|
|
|
|
});
|
|
|
|
UIkit.component('slideshow-parallax', {
|
|
|
|
mixins: [mixin.parallax],
|
|
|
|
computed: {
|
|
|
|
item: function item() {
|
|
var slideshow = UIkit.getComponent(closest(this.$el, '.uk-slideshow'), 'slideshow');
|
|
return slideshow && closest(this.$el, ((slideshow.selList) + " > *"));
|
|
}
|
|
|
|
},
|
|
|
|
events: [
|
|
|
|
{
|
|
|
|
name: 'itemshown',
|
|
|
|
self: true,
|
|
|
|
el: function el() {
|
|
return this.item;
|
|
},
|
|
|
|
handler: function handler() {
|
|
css(this.$el, this.getCss(.5));
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
name: 'itemin itemout',
|
|
|
|
self: true,
|
|
|
|
el: function el() {
|
|
return this.item;
|
|
},
|
|
|
|
handler: function handler(ref) {
|
|
var type = ref.type;
|
|
var ref_detail = ref.detail;
|
|
var percent = ref_detail.percent;
|
|
var duration = ref_detail.duration;
|
|
var ease = ref_detail.ease;
|
|
var dir = ref_detail.dir;
|
|
|
|
|
|
Transition.cancel(this.$el);
|
|
css(this.$el, this.getCss(getCurrent(type, dir, percent)));
|
|
|
|
Transition.start(this.$el, this.getCss(isIn(type)
|
|
? .5
|
|
: dir > 0
|
|
? 1
|
|
: 0
|
|
), duration, ease).catch(noop);
|
|
|
|
}
|
|
},
|
|
|
|
{
|
|
name: 'transitioncanceled transitionend',
|
|
|
|
self: true,
|
|
|
|
el: function el() {
|
|
return this.item;
|
|
},
|
|
|
|
handler: function handler() {
|
|
Transition.cancel(this.$el);
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
name: 'itemtranslatein itemtranslateout',
|
|
|
|
self: true,
|
|
|
|
el: function el() {
|
|
return this.item;
|
|
},
|
|
|
|
handler: function handler(ref) {
|
|
var type = ref.type;
|
|
var ref_detail = ref.detail;
|
|
var percent = ref_detail.percent;
|
|
var dir = ref_detail.dir;
|
|
|
|
Transition.cancel(this.$el);
|
|
css(this.$el, this.getCss(getCurrent(type, dir, percent)));
|
|
}
|
|
}
|
|
|
|
]
|
|
|
|
});
|
|
|
|
function isIn(type) {
|
|
return endsWith(type, 'in');
|
|
}
|
|
|
|
function getCurrent(type, dir, percent) {
|
|
|
|
percent /= 2;
|
|
|
|
return !isIn(type)
|
|
? dir < 0
|
|
? percent
|
|
: 1 - percent
|
|
: dir < 0
|
|
? 1 - percent
|
|
: percent;
|
|
}
|
|
|
|
}
|
|
|
|
if (!true && typeof window !== 'undefined' && window.UIkit) {
|
|
window.UIkit.use(plugin$6);
|
|
}
|
|
|
|
function plugin$7(UIkit) {
|
|
|
|
if (plugin$7.installed) {
|
|
return;
|
|
}
|
|
|
|
var mixin = UIkit.mixin;
|
|
var util = UIkit.util;
|
|
var addClass = util.addClass;
|
|
var after = util.after;
|
|
var assign = util.assign;
|
|
var append = util.append;
|
|
var attr = util.attr;
|
|
var before = util.before;
|
|
var closest = util.closest;
|
|
var css = util.css;
|
|
var doc = util.doc;
|
|
var docEl = util.docEl;
|
|
var height = util.height;
|
|
var fastdom = util.fastdom;
|
|
var getPos = util.getPos;
|
|
var includes = util.includes;
|
|
var index = util.index;
|
|
var isInput = util.isInput;
|
|
var noop = util.noop;
|
|
var offset = util.offset;
|
|
var off = util.off;
|
|
var on = util.on;
|
|
var pointerDown = util.pointerDown;
|
|
var pointerMove = util.pointerMove;
|
|
var pointerUp = util.pointerUp;
|
|
var position = util.position;
|
|
var preventClick = util.preventClick;
|
|
var Promise = util.Promise;
|
|
var remove = util.remove;
|
|
var removeClass = util.removeClass;
|
|
var toggleClass = util.toggleClass;
|
|
var toNodes = util.toNodes;
|
|
var Transition = util.Transition;
|
|
var trigger = util.trigger;
|
|
var win = util.win;
|
|
var within = util.within;
|
|
|
|
UIkit.component('sortable', {
|
|
|
|
mixins: [mixin.class],
|
|
|
|
props: {
|
|
group: String,
|
|
animation: Number,
|
|
threshold: Number,
|
|
clsItem: String,
|
|
clsPlaceholder: String,
|
|
clsDrag: String,
|
|
clsDragState: String,
|
|
clsBase: String,
|
|
clsNoDrag: String,
|
|
clsEmpty: String,
|
|
clsCustom: String,
|
|
handle: String
|
|
},
|
|
|
|
defaults: {
|
|
group: false,
|
|
animation: 150,
|
|
threshold: 5,
|
|
clsItem: 'uk-sortable-item',
|
|
clsPlaceholder: 'uk-sortable-placeholder',
|
|
clsDrag: 'uk-sortable-drag',
|
|
clsDragState: 'uk-drag',
|
|
clsBase: 'uk-sortable',
|
|
clsNoDrag: 'uk-sortable-nodrag',
|
|
clsEmpty: 'uk-sortable-empty',
|
|
clsCustom: '',
|
|
handle: false
|
|
},
|
|
|
|
init: function init() {
|
|
var this$1 = this;
|
|
|
|
['init', 'start', 'move', 'end'].forEach(function (key) {
|
|
var fn = this$1[key];
|
|
this$1[key] = function (e) {
|
|
this$1.scrollY = win.scrollY;
|
|
var ref = getPos(e);
|
|
var x = ref.x;
|
|
var y = ref.y;
|
|
this$1.pos = {x: x, y: y};
|
|
|
|
fn(e);
|
|
};
|
|
});
|
|
},
|
|
|
|
events: ( obj = {}, obj[pointerDown] = 'init', obj ),
|
|
|
|
update: {
|
|
|
|
write: function write() {
|
|
|
|
if (this.clsEmpty) {
|
|
toggleClass(this.$el, this.clsEmpty, !this.$el.children.length);
|
|
}
|
|
|
|
if (!this.drag) {
|
|
return;
|
|
}
|
|
|
|
offset(this.drag, {top: this.pos.y + this.origin.top, left: this.pos.x + this.origin.left});
|
|
|
|
var top = offset(this.drag).top,
|
|
bottom = top + this.drag.offsetHeight,
|
|
scroll;
|
|
|
|
if (top > 0 && top < this.scrollY) {
|
|
scroll = this.scrollY - 5;
|
|
} else if (bottom < height(doc) && bottom > height(win) + this.scrollY) {
|
|
scroll = this.scrollY + 5;
|
|
}
|
|
|
|
scroll && setTimeout(function () { return win.scrollTo(win.scrollX, scroll); }, 5);
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
init: function init(e) {
|
|
|
|
var target = e.target;
|
|
var button = e.button;
|
|
var defaultPrevented = e.defaultPrevented;
|
|
var placeholder = toNodes(this.$el.children).filter(function (el) { return within(target, el); })[0];
|
|
|
|
if (!placeholder
|
|
|| isInput(e.target)
|
|
|| this.handle && !within(target, this.handle)
|
|
|| button !== 0
|
|
|| within(target, ("." + (this.clsNoDrag)))
|
|
|| defaultPrevented
|
|
) {
|
|
return;
|
|
}
|
|
|
|
e.preventDefault();
|
|
|
|
this.touched = [this];
|
|
this.placeholder = placeholder;
|
|
this.origin = assign({target: target, index: index(placeholder)}, this.pos);
|
|
|
|
on(docEl, pointerMove, this.move);
|
|
on(docEl, pointerUp, this.end);
|
|
on(win, 'scroll', this.scroll);
|
|
|
|
if (!this.threshold) {
|
|
this.start(e);
|
|
}
|
|
|
|
},
|
|
|
|
start: function start(e) {
|
|
|
|
this.drag = append(UIkit.container, this.placeholder.outerHTML.replace(/^<li/i, '<div').replace(/li>$/i, 'div>'));
|
|
|
|
css(this.drag, assign({
|
|
boxSizing: 'border-box',
|
|
width: this.placeholder.offsetWidth,
|
|
height: this.placeholder.offsetHeight
|
|
}, css(this.placeholder, ['paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom'])));
|
|
attr(this.drag, 'uk-no-boot', '');
|
|
addClass(this.drag, ((this.clsDrag) + " " + (this.clsCustom)));
|
|
|
|
height(this.drag.firstElementChild, height(this.placeholder.firstElementChild));
|
|
|
|
var ref = offset(this.placeholder);
|
|
var left = ref.left;
|
|
var top = ref.top;
|
|
assign(this.origin, {left: left - this.pos.x, top: top - this.pos.y});
|
|
|
|
addClass(this.placeholder, this.clsPlaceholder);
|
|
addClass(this.$el.children, this.clsItem);
|
|
addClass(docEl, this.clsDragState);
|
|
|
|
trigger(this.$el, 'start', [this, this.placeholder, this.drag]);
|
|
|
|
this.move(e);
|
|
},
|
|
|
|
move: function move(e) {
|
|
|
|
if (!this.drag) {
|
|
|
|
if (Math.abs(this.pos.x - this.origin.x) > this.threshold || Math.abs(this.pos.y - this.origin.y) > this.threshold) {
|
|
this.start(e);
|
|
}
|
|
|
|
return;
|
|
}
|
|
|
|
this.$emit();
|
|
|
|
var target = e.type === 'mousemove' ? e.target : doc.elementFromPoint(this.pos.x - doc.body.scrollLeft, this.pos.y - doc.body.scrollTop),
|
|
sortable = getSortable(target),
|
|
previous = getSortable(this.placeholder),
|
|
move = sortable !== previous;
|
|
|
|
if (!sortable || within(target, this.placeholder) || move && (!sortable.group || sortable.group !== previous.group)) {
|
|
return;
|
|
}
|
|
|
|
target = sortable.$el === target.parentNode && target || toNodes(sortable.$el.children).filter(function (element) { return within(target, element); })[0];
|
|
|
|
if (move) {
|
|
previous.remove(this.placeholder);
|
|
} else if (!target) {
|
|
return;
|
|
}
|
|
|
|
sortable.insert(this.placeholder, target);
|
|
|
|
if (!includes(this.touched, sortable)) {
|
|
this.touched.push(sortable);
|
|
}
|
|
|
|
},
|
|
|
|
scroll: function scroll() {
|
|
var scroll = win.scrollY;
|
|
if (scroll !== this.scrollY) {
|
|
this.pos.y += scroll - this.scrollY;
|
|
this.scrollY = scroll;
|
|
this.$emit();
|
|
}
|
|
},
|
|
|
|
end: function end(e) {
|
|
|
|
off(docEl, pointerMove, this.move);
|
|
off(docEl, pointerUp, this.end);
|
|
off(win, 'scroll', this.scroll);
|
|
|
|
if (!this.drag) {
|
|
|
|
if (e.type !== 'mouseup' && within(e.target, 'a[href]')) {
|
|
location.href = closest(e.target, 'a[href]').href;
|
|
}
|
|
|
|
return;
|
|
}
|
|
|
|
preventClick();
|
|
|
|
var sortable = getSortable(this.placeholder);
|
|
|
|
if (this === sortable) {
|
|
if (this.origin.index !== index(this.placeholder)) {
|
|
trigger(this.$el, 'moved', [this, this.placeholder]);
|
|
}
|
|
} else {
|
|
trigger(sortable.$el, 'added', [sortable, this.placeholder]);
|
|
trigger(this.$el, 'removed', [this, this.placeholder]);
|
|
}
|
|
|
|
trigger(this.$el, 'stop', [this]);
|
|
|
|
remove(this.drag);
|
|
this.drag = null;
|
|
|
|
var classes = this.touched.map(function (sortable) { return ((sortable.clsPlaceholder) + " " + (sortable.clsItem)); }).join(' ');
|
|
this.touched.forEach(function (sortable) { return removeClass(sortable.$el.children, classes); });
|
|
|
|
removeClass(docEl, this.clsDragState);
|
|
|
|
},
|
|
|
|
insert: function insert(element, target) {
|
|
var this$1 = this;
|
|
|
|
|
|
addClass(this.$el.children, this.clsItem);
|
|
|
|
var insert = function () {
|
|
|
|
if (target) {
|
|
|
|
if (!within(element, this$1.$el) || isPredecessor(element, target)) {
|
|
before(target, element);
|
|
} else {
|
|
after(target, element);
|
|
}
|
|
|
|
} else {
|
|
append(this$1.$el, element);
|
|
}
|
|
|
|
};
|
|
|
|
if (this.animation) {
|
|
this.animate(insert);
|
|
} else {
|
|
insert();
|
|
}
|
|
|
|
},
|
|
|
|
remove: function remove$1(element) {
|
|
|
|
if (!within(element, this.$el)) {
|
|
return;
|
|
}
|
|
|
|
if (this.animation) {
|
|
this.animate(function () { return remove(element); });
|
|
} else {
|
|
remove(element);
|
|
}
|
|
|
|
},
|
|
|
|
animate: function animate(action) {
|
|
var this$1 = this;
|
|
|
|
|
|
var props = [],
|
|
children = toNodes(this.$el.children),
|
|
reset = {position: '', width: '', height: '', pointerEvents: '', top: '', left: '', bottom: '', right: ''};
|
|
|
|
children.forEach(function (el) {
|
|
props.push(assign({
|
|
position: 'absolute',
|
|
pointerEvents: 'none',
|
|
width: el.offsetWidth,
|
|
height: el.offsetHeight
|
|
}, position(el)));
|
|
});
|
|
|
|
action();
|
|
|
|
children.forEach(Transition.cancel);
|
|
css(this.$el.children, reset);
|
|
this.$update('update', true);
|
|
fastdom.flush();
|
|
|
|
css(this.$el, 'minHeight', height(this.$el));
|
|
|
|
var positions = children.map(function (el) { return position(el); });
|
|
Promise.all(children.map(function (el, i) { return Transition.start(css(el, props[i]), positions[i], this$1.animation); }))
|
|
.then(function () {
|
|
css(this$1.$el, 'minHeight', '');
|
|
css(children, reset);
|
|
this$1.$update('update', true);
|
|
fastdom.flush();
|
|
}, noop);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
var obj;
|
|
|
|
function getSortable(element) {
|
|
return element && (UIkit.getComponent(element, 'sortable') || getSortable(element.parentNode));
|
|
}
|
|
|
|
function isPredecessor(element, target) {
|
|
return element.parentNode === target.parentNode && index(element) > index(target);
|
|
}
|
|
|
|
}
|
|
|
|
if (!true && typeof window !== 'undefined' && window.UIkit) {
|
|
window.UIkit.use(plugin$7);
|
|
}
|
|
|
|
function plugin$8(UIkit) {
|
|
|
|
if (plugin$8.installed) {
|
|
return;
|
|
}
|
|
|
|
var util = UIkit.util;
|
|
var mixin = UIkit.mixin;
|
|
var append = util.append;
|
|
var attr = util.attr;
|
|
var doc = util.doc;
|
|
var fastdom = util.fastdom;
|
|
var flipPosition = util.flipPosition;
|
|
var includes = util.includes;
|
|
var isTouch = util.isTouch;
|
|
var isVisible = util.isVisible;
|
|
var matches = util.matches;
|
|
var on = util.on;
|
|
var pointerDown = util.pointerDown;
|
|
var pointerEnter = util.pointerEnter;
|
|
var pointerLeave = util.pointerLeave;
|
|
var remove = util.remove;
|
|
var within = util.within;
|
|
|
|
var actives = [];
|
|
|
|
UIkit.component('tooltip', {
|
|
|
|
attrs: true,
|
|
|
|
mixins: [mixin.container, mixin.togglable, mixin.position],
|
|
|
|
props: {
|
|
delay: Number,
|
|
title: String
|
|
},
|
|
|
|
defaults: {
|
|
pos: 'top',
|
|
title: '',
|
|
delay: 0,
|
|
animation: ['uk-animation-scale-up'],
|
|
duration: 100,
|
|
cls: 'uk-active',
|
|
clsPos: 'uk-tooltip'
|
|
},
|
|
|
|
connected: function connected() {
|
|
var this$1 = this;
|
|
|
|
fastdom.mutate(function () { return attr(this$1.$el, {title: null, 'aria-expanded': false}); });
|
|
},
|
|
|
|
disconnected: function disconnected() {
|
|
this.hide();
|
|
},
|
|
|
|
methods: {
|
|
|
|
show: function show() {
|
|
var this$1 = this;
|
|
|
|
|
|
if (includes(actives, this)) {
|
|
return;
|
|
}
|
|
|
|
actives.forEach(function (active) { return active.hide(); });
|
|
actives.push(this);
|
|
|
|
this._unbind = on(doc, 'click', function (e) { return !within(e.target, this$1.$el) && this$1.hide(); });
|
|
|
|
clearTimeout(this.showTimer);
|
|
|
|
this.tooltip = append(this.container, ("<div class=\"" + (this.clsPos) + "\" aria-hidden><div class=\"" + (this.clsPos) + "-inner\">" + (this.title) + "</div></div>"));
|
|
|
|
attr(this.$el, 'aria-expanded', true);
|
|
|
|
this.positionAt(this.tooltip, this.$el);
|
|
|
|
this.origin = this.getAxis() === 'y' ? ((flipPosition(this.dir)) + "-" + (this.align)) : ((this.align) + "-" + (flipPosition(this.dir)));
|
|
|
|
this.showTimer = setTimeout(function () {
|
|
|
|
this$1.toggleElement(this$1.tooltip, true);
|
|
|
|
this$1.hideTimer = setInterval(function () {
|
|
|
|
if (!isVisible(this$1.$el)) {
|
|
this$1.hide();
|
|
}
|
|
|
|
}, 150);
|
|
|
|
}, this.delay);
|
|
},
|
|
|
|
hide: function hide() {
|
|
|
|
var index = actives.indexOf(this);
|
|
|
|
if (!~index || matches(this.$el, 'input') && this.$el === doc.activeElement) {
|
|
return;
|
|
}
|
|
|
|
actives.splice(index, 1);
|
|
|
|
clearTimeout(this.showTimer);
|
|
clearInterval(this.hideTimer);
|
|
attr(this.$el, 'aria-expanded', false);
|
|
this.toggleElement(this.tooltip, false);
|
|
this.tooltip && remove(this.tooltip);
|
|
this.tooltip = false;
|
|
this._unbind();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
events: ( obj = {
|
|
|
|
'blur': 'hide'
|
|
|
|
}, obj[("focus " + pointerEnter + " " + pointerDown)] = function (e) {
|
|
if (e.type !== pointerDown || !isTouch(e)) {
|
|
this.show();
|
|
}
|
|
}, obj[pointerLeave] = function (e) {
|
|
if (!isTouch(e)) {
|
|
this.hide();
|
|
}
|
|
}, obj )
|
|
|
|
});
|
|
var obj;
|
|
|
|
}
|
|
|
|
if (!true && typeof window !== 'undefined' && window.UIkit) {
|
|
window.UIkit.use(plugin$8);
|
|
}
|
|
|
|
function plugin$9(UIkit) {
|
|
|
|
if (plugin$9.installed) {
|
|
return;
|
|
}
|
|
|
|
var ref = UIkit.util;
|
|
var addClass = ref.addClass;
|
|
var ajax = ref.ajax;
|
|
var matches = ref.matches;
|
|
var noop = ref.noop;
|
|
var on = ref.on;
|
|
var removeClass = ref.removeClass;
|
|
var trigger = ref.trigger;
|
|
|
|
UIkit.component('upload', {
|
|
|
|
props: {
|
|
allow: String,
|
|
clsDragover: String,
|
|
concurrent: Number,
|
|
mime: String,
|
|
msgInvalidMime: String,
|
|
msgInvalidName: String,
|
|
multiple: Boolean,
|
|
name: String,
|
|
params: Object,
|
|
type: String,
|
|
url: String
|
|
},
|
|
|
|
defaults: {
|
|
allow: false,
|
|
clsDragover: 'uk-dragover',
|
|
concurrent: 1,
|
|
mime: false,
|
|
msgInvalidMime: 'Invalid File Type: %s',
|
|
msgInvalidName: 'Invalid File Name: %s',
|
|
multiple: false,
|
|
name: 'files[]',
|
|
params: {},
|
|
type: 'POST',
|
|
url: '',
|
|
abort: noop,
|
|
beforeAll: noop,
|
|
beforeSend: noop,
|
|
complete: noop,
|
|
completeAll: noop,
|
|
error: noop,
|
|
fail: noop,
|
|
load: noop,
|
|
loadEnd: noop,
|
|
loadStart: noop,
|
|
progress: noop
|
|
},
|
|
|
|
events: {
|
|
|
|
change: function change(e) {
|
|
|
|
if (!matches(e.target, 'input[type="file"]')) {
|
|
return;
|
|
}
|
|
|
|
e.preventDefault();
|
|
|
|
if (e.target.files) {
|
|
this.upload(e.target.files);
|
|
}
|
|
|
|
e.target.value = '';
|
|
},
|
|
|
|
drop: function drop(e) {
|
|
stop(e);
|
|
|
|
var transfer = e.dataTransfer;
|
|
|
|
if (!transfer || !transfer.files) {
|
|
return;
|
|
}
|
|
|
|
removeClass(this.$el, this.clsDragover);
|
|
|
|
this.upload(transfer.files);
|
|
},
|
|
|
|
dragenter: function dragenter(e) {
|
|
stop(e);
|
|
},
|
|
|
|
dragover: function dragover(e) {
|
|
stop(e);
|
|
addClass(this.$el, this.clsDragover);
|
|
},
|
|
|
|
dragleave: function dragleave(e) {
|
|
stop(e);
|
|
removeClass(this.$el, this.clsDragover);
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
upload: function upload(files) {
|
|
var this$1 = this;
|
|
|
|
|
|
if (!files.length) {
|
|
return;
|
|
}
|
|
|
|
trigger(this.$el, 'upload', [files]);
|
|
|
|
for (var i = 0; i < files.length; i++) {
|
|
|
|
if (this$1.allow) {
|
|
if (!match(this$1.allow, files[i].name)) {
|
|
this$1.fail(this$1.msgInvalidName.replace(/%s/, this$1.allow));
|
|
return;
|
|
}
|
|
}
|
|
|
|
if (this$1.mime) {
|
|
if (!match(this$1.mime, files[i].type)) {
|
|
this$1.fail(this$1.msgInvalidMime.replace(/%s/, this$1.mime));
|
|
return;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
if (!this.multiple) {
|
|
files = [files[0]];
|
|
}
|
|
|
|
this.beforeAll(this, files);
|
|
|
|
var chunks = chunk(files, this.concurrent),
|
|
upload = function (files) {
|
|
|
|
var data = new FormData();
|
|
|
|
files.forEach(function (file) { return data.append(this$1.name, file); });
|
|
|
|
for (var key in this$1.params) {
|
|
data.append(key, this$1.params[key]);
|
|
}
|
|
|
|
ajax(this$1.url, {
|
|
data: data,
|
|
method: this$1.type,
|
|
beforeSend: function (env) {
|
|
|
|
var xhr = env.xhr;
|
|
xhr.upload && on(xhr.upload, 'progress', this$1.progress);
|
|
['loadStart', 'load', 'loadEnd', 'abort'].forEach(function (type) { return on(xhr, type.toLowerCase(), this$1[type]); }
|
|
);
|
|
|
|
this$1.beforeSend(env);
|
|
|
|
}
|
|
}).then(
|
|
function (xhr) {
|
|
|
|
this$1.complete(xhr);
|
|
|
|
if (chunks.length) {
|
|
upload(chunks.shift());
|
|
} else {
|
|
this$1.completeAll(xhr);
|
|
}
|
|
|
|
},
|
|
function (e) { return this$1.error(e.message); }
|
|
);
|
|
|
|
};
|
|
|
|
upload(chunks.shift());
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
function match(pattern, path) {
|
|
return path.match(new RegExp(("^" + (pattern.replace(/\//g, '\\/').replace(/\*\*/g, '(\\/[^\\/]+)*').replace(/\*/g, '[^\\/]+').replace(/((?!\\))\?/g, '$1.')) + "$"), 'i'));
|
|
}
|
|
|
|
function chunk(files, size) {
|
|
var chunks = [];
|
|
for (var i = 0; i < files.length; i += size) {
|
|
var chunk = [];
|
|
for (var j = 0; j < size; j++) {
|
|
chunk.push(files[i + j]);
|
|
}
|
|
chunks.push(chunk);
|
|
}
|
|
return chunks;
|
|
}
|
|
|
|
function stop(e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
}
|
|
|
|
}
|
|
|
|
if (!true && typeof window !== 'undefined' && window.UIkit) {
|
|
window.UIkit.use(plugin$9);
|
|
}
|
|
|
|
UIkit$2.use(plugin);
|
|
UIkit$2.use(plugin$1);
|
|
UIkit$2.use(plugin$2);
|
|
UIkit$2.use(plugin$4);
|
|
UIkit$2.use(plugin$5);
|
|
UIkit$2.use(plugin$6);
|
|
UIkit$2.use(plugin$7);
|
|
UIkit$2.use(plugin$8);
|
|
UIkit$2.use(plugin$9);
|
|
|
|
{
|
|
boot(UIkit$2);
|
|
}
|
|
|
|
return UIkit$2;
|
|
|
|
})));
|