12369 lines
339 KiB
JavaScript
12369 lines
339 KiB
JavaScript
/*! UIkit 3.6.22 | https://www.getuikit.com | (c) 2014 - 2021 YOOtheme | MIT License */
|
|
|
|
(function (global, factory) {
|
|
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
|
|
typeof define === 'function' && define.amd ? define('uikit', factory) :
|
|
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.UIkit = factory());
|
|
}(this, (function () { 'use strict';
|
|
|
|
var objPrototype = Object.prototype;
|
|
var hasOwnProperty = objPrototype.hasOwnProperty;
|
|
|
|
function hasOwn(obj, key) {
|
|
return hasOwnProperty.call(obj, key);
|
|
}
|
|
|
|
var hyphenateRe = /\B([A-Z])/g;
|
|
|
|
var hyphenate = memoize(function (str) { return str
|
|
.replace(hyphenateRe, '-$1')
|
|
.toLowerCase(); }
|
|
);
|
|
|
|
var camelizeRe = /-(\w)/g;
|
|
|
|
var camelize = memoize(function (str) { return str.replace(camelizeRe, toUpper); }
|
|
);
|
|
|
|
var ucfirst = memoize(function (str) { return str.length ? toUpper(null, str.charAt(0)) + str.slice(1) : ''; }
|
|
);
|
|
|
|
function toUpper(_, c) {
|
|
return c ? c.toUpperCase() : '';
|
|
}
|
|
|
|
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(-search.length) === search; };
|
|
|
|
function endsWith(str, search) {
|
|
return endsWithFn.call(str, search);
|
|
}
|
|
|
|
var arrPrototype = Array.prototype;
|
|
|
|
var includesFn = function (search, i) { return !!~this.indexOf(search, i); };
|
|
var includesStr = strPrototype.includes || includesFn;
|
|
var includesArray = arrPrototype.includes || includesFn;
|
|
|
|
function includes(obj, search) {
|
|
return obj && (isString(obj) ? includesStr : includesArray).call(obj, search);
|
|
}
|
|
|
|
var findIndexFn = arrPrototype.findIndex || function (predicate) {
|
|
var arguments$1 = arguments;
|
|
|
|
for (var i = 0; i < this.length; i++) {
|
|
if (predicate.call(arguments$1[1], this[i], i, this)) {
|
|
return i;
|
|
}
|
|
}
|
|
return -1;
|
|
};
|
|
|
|
function findIndex(array, predicate) {
|
|
return findIndexFn.call(array, predicate);
|
|
}
|
|
|
|
var isArray = Array.isArray;
|
|
|
|
function isFunction(obj) {
|
|
return typeof obj === 'function';
|
|
}
|
|
|
|
function isObject(obj) {
|
|
return obj !== null && typeof obj === 'object';
|
|
}
|
|
|
|
var toString = objPrototype.toString;
|
|
function isPlainObject(obj) {
|
|
return toString.call(obj) === '[object Object]';
|
|
}
|
|
|
|
function isWindow(obj) {
|
|
return isObject(obj) && obj === obj.window;
|
|
}
|
|
|
|
function isDocument(obj) {
|
|
return nodeType(obj) === 9;
|
|
}
|
|
|
|
function isNode(obj) {
|
|
return nodeType(obj) >= 1;
|
|
}
|
|
|
|
function isElement(obj) {
|
|
return nodeType(obj) === 1;
|
|
}
|
|
|
|
function nodeType(obj) {
|
|
return !isWindow(obj) && isObject(obj) && obj.nodeType;
|
|
}
|
|
|
|
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 isEmpty(obj) {
|
|
return !(isArray(obj)
|
|
? obj.length
|
|
: isObject(obj)
|
|
? Object.keys(obj).length
|
|
: false
|
|
);
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
var toArray = Array.from || (function (value) { return arrPrototype.slice.call(value); });
|
|
|
|
function toNode(element) {
|
|
return toNodes(element)[0];
|
|
}
|
|
|
|
function toNodes(element) {
|
|
return element && (isNode(element) ? [element] : toArray(element).filter(isNode)) || [];
|
|
}
|
|
|
|
function toWindow(element) {
|
|
if (isWindow(element)) {
|
|
return element;
|
|
}
|
|
|
|
element = toNode(element);
|
|
|
|
return element
|
|
? (isDocument(element)
|
|
? element
|
|
: element.ownerDocument
|
|
).defaultView
|
|
: window;
|
|
}
|
|
|
|
function toMs(time) {
|
|
return !time
|
|
? 0
|
|
: endsWith(time, 'ms')
|
|
? toFloat(time)
|
|
: toFloat(time) * 1000;
|
|
}
|
|
|
|
function isEqual(value, other) {
|
|
return value === other
|
|
|| isObject(value)
|
|
&& isObject(other)
|
|
&& Object.keys(value).length === Object.keys(other).length
|
|
&& each(value, function (val, key) { return val === other[key]; });
|
|
}
|
|
|
|
function swap(value, a, b) {
|
|
return value.replace(
|
|
new RegExp((a + "|" + b), 'g'),
|
|
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 last(array) {
|
|
return array[array.length - 1];
|
|
}
|
|
|
|
function each(obj, cb) {
|
|
for (var key in obj) {
|
|
if (false === cb(obj[key], key)) {
|
|
return false;
|
|
}
|
|
}
|
|
return true;
|
|
}
|
|
|
|
function sortBy$1(array, prop) {
|
|
return array.slice().sort(function (ref, ref$1) {
|
|
var propA = ref[prop]; if ( propA === void 0 ) propA = 0;
|
|
var propB = ref$1[prop]; if ( propB === void 0 ) propB = 0;
|
|
|
|
return propA > propB
|
|
? 1
|
|
: propB > propA
|
|
? -1
|
|
: 0;
|
|
}
|
|
);
|
|
}
|
|
|
|
function uniqueBy(array, prop) {
|
|
var seen = new Set();
|
|
return array.filter(function (ref) {
|
|
var check = ref[prop];
|
|
|
|
return seen.has(check)
|
|
? false
|
|
: seen.add(check) || true;
|
|
} // IE 11 does not return the Set object
|
|
);
|
|
}
|
|
|
|
function clamp(number, min, max) {
|
|
if ( min === void 0 ) min = 0;
|
|
if ( max === void 0 ) max = 1;
|
|
|
|
return Math.min(Math.max(toNumber(number) || 0, min), max);
|
|
}
|
|
|
|
function noop() {}
|
|
|
|
function intersectRect() {
|
|
var rects = [], len = arguments.length;
|
|
while ( len-- ) rects[ len ] = arguments[ len ];
|
|
|
|
return [['bottom', 'top'], ['right', 'left']].every(function (ref) {
|
|
var minProp = ref[0];
|
|
var maxProp = ref[1];
|
|
|
|
return Math.min.apply(Math, rects.map(function (ref) {
|
|
var min = ref[minProp];
|
|
|
|
return min;
|
|
})) - Math.max.apply(Math, rects.map(function (ref) {
|
|
var max = ref[maxProp];
|
|
|
|
return max;
|
|
})) > 0;
|
|
}
|
|
);
|
|
}
|
|
|
|
function pointInRect(point, rect) {
|
|
return point.x <= rect.right &&
|
|
point.x >= rect.left &&
|
|
point.y <= rect.bottom &&
|
|
point.y >= rect.top;
|
|
}
|
|
|
|
var Dimensions = {
|
|
|
|
ratio: function(dimensions, prop, value) {
|
|
var obj;
|
|
|
|
|
|
var aProp = prop === 'width' ? 'height' : 'width';
|
|
|
|
return ( obj = {}, obj[aProp] = dimensions[prop] ? Math.round(value * dimensions[aProp] / dimensions[prop]) : dimensions[aProp], obj[prop] = value, obj );
|
|
},
|
|
|
|
contain: function(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(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 getIndex(i, elements, current, finite) {
|
|
if ( current === void 0 ) current = 0;
|
|
if ( finite === void 0 ) finite = false;
|
|
|
|
|
|
elements = toNodes(elements);
|
|
|
|
var length = elements.length;
|
|
|
|
i = isNumeric(i)
|
|
? toNumber(i)
|
|
: i === 'next'
|
|
? current + 1
|
|
: i === 'previous'
|
|
? current - 1
|
|
: elements.indexOf(toNode(i));
|
|
|
|
if (finite) {
|
|
return clamp(i, 0, length - 1);
|
|
}
|
|
|
|
i %= length;
|
|
|
|
return i < 0 ? i + length : i;
|
|
}
|
|
|
|
function memoize(fn) {
|
|
var cache = Object.create(null);
|
|
return function (key) { return cache[key] || (cache[key] = fn(key)); };
|
|
}
|
|
|
|
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.hasAttribute(name) && element.removeAttribute(name); }
|
|
); }
|
|
);
|
|
}
|
|
|
|
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]);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* global DocumentTouch */
|
|
|
|
var inBrowser = typeof window !== 'undefined';
|
|
var isIE = inBrowser && /msie|trident/i.test(window.navigator.userAgent);
|
|
var isRtl = inBrowser && attr(document.documentElement, 'dir') === 'rtl';
|
|
|
|
var hasTouchEvents = inBrowser && 'ontouchstart' in window;
|
|
var hasPointerEvents = inBrowser && window.PointerEvent;
|
|
var hasTouch = inBrowser && (hasTouchEvents
|
|
|| window.DocumentTouch && document instanceof DocumentTouch
|
|
|| navigator.maxTouchPoints); // IE >=11
|
|
|
|
var pointerDown = hasPointerEvents ? 'pointerdown' : hasTouchEvents ? 'touchstart' : 'mousedown';
|
|
var pointerMove = hasPointerEvents ? 'pointermove' : hasTouchEvents ? 'touchmove' : 'mousemove';
|
|
var pointerUp = hasPointerEvents ? 'pointerup' : hasTouchEvents ? 'touchend' : 'mouseup';
|
|
var pointerEnter = hasPointerEvents ? 'pointerenter' : hasTouchEvents ? '' : 'mouseenter';
|
|
var pointerLeave = hasPointerEvents ? 'pointerleave' : hasTouchEvents ? '' : 'mouseleave';
|
|
var pointerCancel = hasPointerEvents ? 'pointercancel' : 'touchcancel';
|
|
|
|
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 toNodes(element).some(function (element) { return voidElements[element.tagName.toLowerCase()]; });
|
|
}
|
|
|
|
function isVisible(element) {
|
|
return toNodes(element).some(function (element) { return element.offsetWidth || element.offsetHeight || element.getClientRects().length; });
|
|
}
|
|
|
|
var selInput = 'input,select,textarea,button';
|
|
function isInput(element) {
|
|
return toNodes(element).some(function (element) { return matches(element, selInput); });
|
|
}
|
|
|
|
function isFocusable(element) {
|
|
return isInput(element) || matches(element, 'a[href],button') || hasAttr(element, 'tabindex');
|
|
}
|
|
|
|
function parent(element) {
|
|
element = toNode(element);
|
|
return element && isElement(element.parentNode) && element.parentNode;
|
|
}
|
|
|
|
function filter$1(element, selector) {
|
|
return toNodes(element).filter(function (element) { return matches(element, selector); });
|
|
}
|
|
|
|
var elProto = inBrowser ? Element.prototype : {};
|
|
var matchesFn = elProto.matches || elProto.webkitMatchesSelector || elProto.msMatchesSelector || noop;
|
|
|
|
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;
|
|
}
|
|
|
|
} while ((ancestor = parent(ancestor)));
|
|
};
|
|
|
|
function closest(element, selector) {
|
|
|
|
if (startsWith(selector, '>')) {
|
|
selector = selector.slice(1);
|
|
}
|
|
|
|
return isElement(element)
|
|
? closestFn.call(element, selector)
|
|
: toNodes(element).map(function (element) { return closest(element, selector); }).filter(Boolean);
|
|
}
|
|
|
|
function within(element, selector) {
|
|
return !isString(selector)
|
|
? element === selector || (isDocument(selector)
|
|
? selector.documentElement
|
|
: toNode(selector)).contains(toNode(element)) // IE 11 document does not implement contains
|
|
: matches(element, selector) || !!closest(element, selector);
|
|
}
|
|
|
|
function parents(element, selector) {
|
|
var elements = [];
|
|
|
|
while ((element = parent(element))) {
|
|
if (!selector || matches(element, selector)) {
|
|
elements.push(element);
|
|
}
|
|
}
|
|
|
|
return elements;
|
|
}
|
|
|
|
function children(element, selector) {
|
|
element = toNode(element);
|
|
var children = element ? toNodes(element.children) : [];
|
|
return selector ? filter$1(children, selector) : children;
|
|
}
|
|
|
|
function index(element, ref) {
|
|
return ref
|
|
? toNodes(element).indexOf(toNode(ref))
|
|
: children(parent(element)).indexOf(element);
|
|
}
|
|
|
|
function query(selector, context) {
|
|
return toNode(selector) || find(selector, getContext(selector, context));
|
|
}
|
|
|
|
function queryAll(selector, context) {
|
|
var nodes = toNodes(selector);
|
|
return nodes.length && nodes || findAll(selector, getContext(selector, context));
|
|
}
|
|
|
|
function getContext(selector, context) {
|
|
if ( context === void 0 ) context = document;
|
|
|
|
return isString(selector) && isContextSelector(selector) || isDocument(context)
|
|
? context
|
|
: context.ownerDocument;
|
|
}
|
|
|
|
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 = document;
|
|
|
|
|
|
if (!selector || !isString(selector)) {
|
|
return null;
|
|
}
|
|
|
|
selector = selector.replace(contextSanitizeRe, '$1 *');
|
|
|
|
if (isContextSelector(selector)) {
|
|
|
|
selector = splitSelector(selector).map(function (selector, i) {
|
|
|
|
var ctx = context;
|
|
|
|
if (selector[0] === '!') {
|
|
|
|
var selectors = selector.substr(1).trim().split(' ');
|
|
ctx = closest(parent(context), selectors[0]);
|
|
selector = selectors.slice(1).join(' ').trim();
|
|
|
|
}
|
|
|
|
if (selector[0] === '-') {
|
|
|
|
var selectors$1 = selector.substr(1).trim().split(' ');
|
|
var prev = (ctx || context).previousElementSibling;
|
|
ctx = matches(prev, selector.substr(1)) ? prev : null;
|
|
selector = selectors$1.slice(1).join(' ');
|
|
|
|
}
|
|
|
|
if (!ctx) {
|
|
return null;
|
|
}
|
|
|
|
return ((domPath(ctx)) + " " + selector);
|
|
|
|
}).filter(Boolean).join(',');
|
|
|
|
context = document;
|
|
|
|
}
|
|
|
|
try {
|
|
|
|
return context[queryFn](selector);
|
|
|
|
} catch (e) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
var contextSelectorRe = /(^|[^\\],)\s*[!>+~-]/;
|
|
var contextSanitizeRe = /([!>+~-])(?=\s+[!>+~-]|\s*$)/g;
|
|
|
|
var isContextSelector = memoize(function (selector) { return selector.match(contextSelectorRe); });
|
|
|
|
var selectorRe = /.*?[^\\](?:,|$)/g;
|
|
|
|
var splitSelector = memoize(function (selector) { return selector.match(selectorRe).map(function (selector) { return selector.replace(/,$/, '').trim(); }
|
|
); }
|
|
);
|
|
|
|
function domPath(element) {
|
|
var names = [];
|
|
while (element.parentNode) {
|
|
if (element.id) {
|
|
names.unshift(("#" + (escape(element.id))));
|
|
break;
|
|
} else {
|
|
var tagName = element.tagName;
|
|
if (tagName !== 'HTML') {
|
|
tagName += ":nth-child(" + (index(element) + 1) + ")";
|
|
}
|
|
names.unshift(tagName);
|
|
element = element.parentNode;
|
|
}
|
|
}
|
|
return names.join(' > ');
|
|
}
|
|
|
|
var escapeFn = inBrowser && window.CSS && CSS.escape || function (css) { return css.replace(/([^\x7f-\uFFFF\w-])/g, function (match) { return ("\\" + match); }); };
|
|
function escape(css) {
|
|
return isString(css) ? escapeFn.call(null, css) : '';
|
|
}
|
|
|
|
function on() {
|
|
var args = [], len = arguments.length;
|
|
while ( len-- ) args[ len ] = arguments[ len ];
|
|
|
|
|
|
var ref = getArgs(args);
|
|
var targets = ref[0];
|
|
var type = ref[1];
|
|
var selector = ref[2];
|
|
var listener = ref[3];
|
|
var useCapture = ref[4];
|
|
|
|
targets = toEventTargets(targets);
|
|
|
|
if (listener.length > 1) {
|
|
listener = detail(listener);
|
|
}
|
|
|
|
if (useCapture && useCapture.self) {
|
|
listener = selfFilter(listener);
|
|
}
|
|
|
|
if (selector) {
|
|
listener = delegate(selector, listener);
|
|
}
|
|
|
|
useCapture = useCaptureFilter(useCapture);
|
|
|
|
type.split(' ').forEach(function (type) { return targets.forEach(function (target) { return target.addEventListener(type, listener, useCapture); }
|
|
); }
|
|
);
|
|
return function () { return off(targets, type, listener, useCapture); };
|
|
}
|
|
|
|
function off(targets, type, listener, useCapture) {
|
|
if ( useCapture === void 0 ) useCapture = false;
|
|
|
|
useCapture = useCaptureFilter(useCapture);
|
|
targets = toEventTargets(targets);
|
|
type.split(' ').forEach(function (type) { return targets.forEach(function (target) { return target.removeEventListener(type, listener, useCapture); }
|
|
); }
|
|
);
|
|
}
|
|
|
|
function once() {
|
|
var args = [], len = arguments.length;
|
|
while ( len-- ) args[ len ] = arguments[ len ];
|
|
|
|
|
|
var ref = getArgs(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(targets, event, detail) {
|
|
return toEventTargets(targets).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 = document.createEvent('CustomEvent'); // IE 11
|
|
event.initCustomEvent(e, bubbles, cancelable, detail);
|
|
e = event;
|
|
}
|
|
|
|
return e;
|
|
}
|
|
|
|
function getArgs(args) {
|
|
if (isFunction(args[2])) {
|
|
args.splice(2, 0, false);
|
|
}
|
|
return args;
|
|
}
|
|
|
|
function delegate(selector, listener) {
|
|
var this$1 = this;
|
|
|
|
return function (e) {
|
|
|
|
var current = selector[0] === '>'
|
|
? findAll(selector, e.currentTarget).reverse().filter(function (element) { return within(e.target, element); })[0]
|
|
: closest(e.target, selector);
|
|
|
|
if (current) {
|
|
e.current = current;
|
|
listener.call(this$1, e);
|
|
}
|
|
|
|
};
|
|
}
|
|
|
|
function detail(listener) {
|
|
return function (e) { return isArray(e.detail) ? listener.apply(void 0, [ e ].concat( e.detail )) : listener(e); };
|
|
}
|
|
|
|
function selfFilter(listener) {
|
|
return function (e) {
|
|
if (e.target === e.currentTarget || e.target === e.current) {
|
|
return listener.call(null, e);
|
|
}
|
|
};
|
|
}
|
|
|
|
function useCaptureFilter(options) {
|
|
return options && isIE && !isBoolean(options)
|
|
? !!options.capture
|
|
: options;
|
|
}
|
|
|
|
function isEventTarget(target) {
|
|
return target && 'addEventListener' in target;
|
|
}
|
|
|
|
function toEventTarget(target) {
|
|
return isEventTarget(target) ? target : toNode(target);
|
|
}
|
|
|
|
function toEventTargets(target) {
|
|
return isArray(target)
|
|
? target.map(toEventTarget).filter(Boolean)
|
|
: isString(target)
|
|
? findAll(target)
|
|
: isEventTarget(target)
|
|
? [target]
|
|
: toNodes(target);
|
|
}
|
|
|
|
function isTouch(e) {
|
|
return e.pointerType === 'touch' || !!e.touches;
|
|
}
|
|
|
|
function getEventPos(e) {
|
|
var touches = e.touches;
|
|
var changedTouches = e.changedTouches;
|
|
var ref = touches && touches[0] || changedTouches && changedTouches[0] || e;
|
|
var x = ref.clientX;
|
|
var y = ref.clientY;
|
|
|
|
return {x: x, y: y};
|
|
}
|
|
|
|
/* global setImmediate */
|
|
|
|
var Promise$1 = inBrowser && window.Promise || PromiseFn;
|
|
|
|
var Deferred = function() {
|
|
var this$1 = this;
|
|
|
|
this.promise = new Promise$1(function (resolve, reject) {
|
|
this$1.reject = reject;
|
|
this$1.resolve = resolve;
|
|
});
|
|
};
|
|
|
|
/**
|
|
* Promises/A+ polyfill v1.1.4 (https://github.com/bramstein/promis)
|
|
*/
|
|
|
|
var RESOLVED = 0;
|
|
var REJECTED = 1;
|
|
var PENDING = 2;
|
|
|
|
var async = inBrowser && window.setImmediate || setTimeout;
|
|
|
|
function PromiseFn(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);
|
|
}
|
|
}
|
|
|
|
PromiseFn.reject = function (r) {
|
|
return new PromiseFn(function (resolve, reject) {
|
|
reject(r);
|
|
});
|
|
};
|
|
|
|
PromiseFn.resolve = function (x) {
|
|
return new PromiseFn(function (resolve, reject) {
|
|
resolve(x);
|
|
});
|
|
};
|
|
|
|
PromiseFn.all = function all(iterable) {
|
|
return new PromiseFn(function (resolve, reject) {
|
|
var result = [];
|
|
var count = 0;
|
|
|
|
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) {
|
|
PromiseFn.resolve(iterable[i]).then(resolver(i), reject);
|
|
}
|
|
});
|
|
};
|
|
|
|
PromiseFn.race = function race(iterable) {
|
|
return new PromiseFn(function (resolve, reject) {
|
|
for (var i = 0; i < iterable.length; i += 1) {
|
|
PromiseFn.resolve(iterable[i]).then(resolve, reject);
|
|
}
|
|
});
|
|
};
|
|
|
|
var p = PromiseFn.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 ref = this$1.deferred.shift();
|
|
var onResolved = ref[0];
|
|
var onRejected = ref[1];
|
|
var resolve = ref[2];
|
|
var reject = ref[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 PromiseFn(function (resolve, reject) {
|
|
this$1.deferred.push([onResolved, onRejected, resolve, reject]);
|
|
this$1.notify();
|
|
});
|
|
};
|
|
|
|
p.catch = function (onRejected) {
|
|
return this.then(undefined, onRejected);
|
|
};
|
|
|
|
function ajax(url, options) {
|
|
|
|
var env = assign({
|
|
data: null,
|
|
method: 'GET',
|
|
headers: {},
|
|
xhr: new XMLHttpRequest(),
|
|
beforeSend: noop,
|
|
responseType: ''
|
|
}, options);
|
|
|
|
return Promise$1.resolve()
|
|
.then(function () { return env.beforeSend(env); })
|
|
.then(function () { return send(url, env); });
|
|
}
|
|
|
|
function send(url, env) {
|
|
return new Promise$1(function (resolve, reject) {
|
|
var xhr = env.xhr;
|
|
|
|
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) {
|
|
|
|
// IE 11 does not support responseType 'json'
|
|
if (env.responseType === 'json' && isString(xhr.response)) {
|
|
xhr = assign(copyXhr(xhr), {response: JSON.parse(xhr.response)});
|
|
}
|
|
|
|
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);
|
|
});
|
|
}
|
|
|
|
function getImage(src, srcset, sizes) {
|
|
|
|
return new Promise$1(function (resolve, reject) {
|
|
var img = new Image();
|
|
|
|
img.onerror = function (e) { return reject(e); };
|
|
img.onload = function () { return resolve(img); };
|
|
|
|
sizes && (img.sizes = sizes);
|
|
srcset && (img.srcset = srcset);
|
|
img.src = src;
|
|
});
|
|
|
|
}
|
|
|
|
function copyXhr(source) {
|
|
var target = {};
|
|
for (var key in source) {
|
|
target[key] = source[key];
|
|
}
|
|
return target;
|
|
}
|
|
|
|
function ready(fn) {
|
|
|
|
if (document.readyState !== 'loading') {
|
|
fn();
|
|
return;
|
|
}
|
|
|
|
var unbind = on(document, 'DOMContentLoaded', function () {
|
|
unbind();
|
|
fn();
|
|
});
|
|
}
|
|
|
|
function empty(element) {
|
|
element = $(element);
|
|
element.innerHTML = '';
|
|
return element;
|
|
}
|
|
|
|
function html(parent, html) {
|
|
parent = $(parent);
|
|
return isUndefined(html)
|
|
? parent.innerHTML
|
|
: append(parent.hasChildNodes() ? empty(parent) : parent, html);
|
|
}
|
|
|
|
function prepend(parent, element) {
|
|
|
|
parent = $(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 = $(parent);
|
|
return insertNodes(element, function (element) { return parent.appendChild(element); });
|
|
}
|
|
|
|
function before(ref, element) {
|
|
ref = $(ref);
|
|
return insertNodes(element, function (element) { return ref.parentNode.insertBefore(element, ref); });
|
|
}
|
|
|
|
function after(ref, element) {
|
|
ref = $(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 element
|
|
? 'length' in element
|
|
? toNodes(element).map(fn)
|
|
: fn(element)
|
|
: null;
|
|
}
|
|
|
|
function remove$1(element) {
|
|
toNodes(element).forEach(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(parent)
|
|
.filter(function (value, index, self) { return self.indexOf(value) === index; })
|
|
.forEach(function (parent) {
|
|
before(parent, parent.childNodes);
|
|
remove$1(parent);
|
|
});
|
|
}
|
|
|
|
var fragmentRe = /^\s*<(\w+|!)[^>]*>/;
|
|
var singleTagRe = /^<(\w+)\s*\/?>(?:<\/\1>)?$/;
|
|
|
|
function fragment(html) {
|
|
|
|
var matches = singleTagRe.exec(html);
|
|
if (matches) {
|
|
return document.createElement(matches[1]);
|
|
}
|
|
|
|
var container = document.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 apply$1(node, fn) {
|
|
|
|
if (!isElement(node)) {
|
|
return;
|
|
}
|
|
|
|
fn(node);
|
|
node = node.firstElementChild;
|
|
while (node) {
|
|
var next = node.nextElementSibling;
|
|
apply$1(node, fn);
|
|
node = next;
|
|
}
|
|
}
|
|
|
|
function $(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 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) {
|
|
attr(element, 'class', function (value) { return (value || '').replace(new RegExp(("\\b" + cls + "\\b"), '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) {
|
|
var assign;
|
|
|
|
(assign = getClasses(cls), cls = assign[0]);
|
|
var nodes = toNodes(element);
|
|
for (var n = 0; n < nodes.length; n++) {
|
|
if (cls && nodes[n].classList.contains(cls)) {
|
|
return true;
|
|
}
|
|
}
|
|
return false;
|
|
}
|
|
|
|
function toggleClass(element, cls, force) {
|
|
|
|
cls = getClasses(cls);
|
|
|
|
var nodes = toNodes(element);
|
|
for (var n = 0; n < nodes.length; n++) {
|
|
var list = nodes[n].classList;
|
|
for (var i = 0; i < cls.length; i++) {
|
|
if (isUndefined(force)) {
|
|
list.toggle(cls[i]);
|
|
} else if (supports.Force) {
|
|
list.toggle(cls[i], !!force);
|
|
} else {
|
|
list[force ? 'add' : 'remove'](cls[i]);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function apply(element, args, fn) {
|
|
var ref;
|
|
|
|
|
|
args = args.reduce(function (args, arg) { return args.concat(getClasses(arg)); }, []);
|
|
|
|
var nodes = toNodes(element);
|
|
var loop = function ( n ) {
|
|
if (supports.Multiple) {
|
|
(ref = nodes[n].classList)[fn].apply(ref, args);
|
|
} else {
|
|
args.forEach(function (cls) { return nodes[n].classList[fn](cls); });
|
|
}
|
|
};
|
|
|
|
for (var n = 0; n < nodes.length; n++) loop( n );
|
|
}
|
|
|
|
function getClasses(str) {
|
|
return String(str).split(/\s|,/).filter(Boolean);
|
|
}
|
|
|
|
// IE 11
|
|
var supports = {
|
|
|
|
get Multiple() {
|
|
return this.get('Multiple');
|
|
},
|
|
|
|
get Force() {
|
|
return this.get('Force');
|
|
},
|
|
|
|
get: function(key) {
|
|
|
|
var ref = document.createElement('_');
|
|
var classList = ref.classList;
|
|
classList.add('a', 'b');
|
|
classList.toggle('c', false);
|
|
supports = {
|
|
Multiple: classList.contains('b'),
|
|
Force: !classList.contains('c')
|
|
};
|
|
|
|
return supports[key];
|
|
}
|
|
|
|
};
|
|
|
|
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,
|
|
'stroke-dasharray': true,
|
|
'stroke-dashoffset': true,
|
|
'widows': true,
|
|
'z-index': true,
|
|
'zoom': true
|
|
};
|
|
|
|
function css(element, property, value, priority) {
|
|
if ( priority === void 0 ) priority = '';
|
|
|
|
|
|
return toNodes(element).map(function (element) {
|
|
|
|
if (isString(property)) {
|
|
|
|
property = propName(property);
|
|
|
|
if (isUndefined(value)) {
|
|
return getStyle(element, property);
|
|
} else if (!value && !isNumber(value)) {
|
|
element.style.removeProperty(property);
|
|
} else {
|
|
element.style.setProperty(property, isNumeric(value) && !cssNumber[property] ? (value + "px") : value, priority);
|
|
}
|
|
|
|
} else if (isArray(property)) {
|
|
|
|
var styles = getStyles(element);
|
|
|
|
return property.reduce(function (props, property) {
|
|
props[property] = styles[propName(property)];
|
|
return props;
|
|
}, {});
|
|
|
|
} else if (isObject(property)) {
|
|
priority = value;
|
|
each(property, function (value, property) { return css(element, property, value, priority); });
|
|
}
|
|
|
|
return element;
|
|
|
|
})[0];
|
|
|
|
}
|
|
|
|
function getStyles(element, pseudoElt) {
|
|
return toWindow(element).getComputedStyle(element, pseudoElt);
|
|
}
|
|
|
|
function getStyle(element, property, pseudoElt) {
|
|
return getStyles(element, pseudoElt)[property];
|
|
}
|
|
|
|
var parseCssVar = memoize(function (name) {
|
|
/* usage in css: .uk-name:before { content:"xyz" } */
|
|
|
|
var element = append(document.documentElement, document.createElement('div'));
|
|
|
|
addClass(element, ("uk-" + name));
|
|
|
|
name = getStyle(element, 'content', ':before').replace(/^["'](.*)["']$/, '$1');
|
|
|
|
remove$1(element);
|
|
|
|
return name;
|
|
});
|
|
|
|
function getCssVar(name) {
|
|
return !isIE
|
|
? getStyles(document.documentElement).getPropertyValue(("--uk-" + name))
|
|
: parseCssVar(name);
|
|
}
|
|
|
|
// https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-setproperty
|
|
var propName = memoize(function (name) { return vendorPropName(name); });
|
|
|
|
var cssPrefixes = ['webkit', 'moz', 'ms'];
|
|
|
|
function vendorPropName(name) {
|
|
|
|
name = hyphenate(name);
|
|
|
|
var ref = document.documentElement;
|
|
var style = ref.style;
|
|
|
|
if (name in style) {
|
|
return name;
|
|
}
|
|
|
|
var i = cssPrefixes.length, prefixedName;
|
|
|
|
while (i--) {
|
|
prefixedName = "-" + (cssPrefixes[i]) + "-" + name;
|
|
if (prefixedName in style) {
|
|
return prefixedName;
|
|
}
|
|
}
|
|
}
|
|
|
|
function transition(element, props, duration, timing) {
|
|
if ( duration === void 0 ) duration = 400;
|
|
if ( timing === void 0 ) timing = 'linear';
|
|
|
|
|
|
return Promise$1.all(toNodes(element).map(function (element) { return new Promise$1(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 transitioncanceled', function (ref) {
|
|
var type = ref.type;
|
|
|
|
clearTimeout(timer);
|
|
removeClass(element, 'uk-transition');
|
|
css(element, {
|
|
transitionProperty: '',
|
|
transitionDuration: '',
|
|
transitionTimingFunction: ''
|
|
});
|
|
type === 'transitioncanceled' ? reject() : resolve(element);
|
|
}, {self: true});
|
|
|
|
addClass(element, 'uk-transition');
|
|
css(element, assign({
|
|
transitionProperty: Object.keys(props).map(propName).join(','),
|
|
transitionDuration: (duration + "ms"),
|
|
transitionTimingFunction: timing
|
|
}, props));
|
|
|
|
}); }
|
|
));
|
|
|
|
}
|
|
|
|
var Transition = {
|
|
|
|
start: transition,
|
|
|
|
stop: function(element) {
|
|
trigger(element, 'transitionend');
|
|
return Promise$1.resolve();
|
|
},
|
|
|
|
cancel: function(element) {
|
|
trigger(element, 'transitioncanceled');
|
|
},
|
|
|
|
inProgress: function(element) {
|
|
return hasClass(element, 'uk-transition');
|
|
}
|
|
|
|
};
|
|
|
|
var animationPrefix = 'uk-animation-';
|
|
|
|
function animate$1(element, animation, duration, origin, out) {
|
|
if ( duration === void 0 ) duration = 200;
|
|
|
|
|
|
return Promise$1.all(toNodes(element).map(function (element) { return new Promise$1(function (resolve, reject) {
|
|
|
|
trigger(element, 'animationcanceled');
|
|
var timer = setTimeout(function () { return trigger(element, 'animationend'); }, duration);
|
|
|
|
once(element, 'animationend animationcanceled', function (ref) {
|
|
var type = ref.type;
|
|
|
|
|
|
clearTimeout(timer);
|
|
|
|
type === 'animationcanceled' ? reject() : resolve(element);
|
|
|
|
css(element, 'animationDuration', '');
|
|
removeClasses(element, (animationPrefix + "\\S*"));
|
|
|
|
}, {self: true});
|
|
|
|
css(element, 'animationDuration', (duration + "ms"));
|
|
addClass(element, animation, animationPrefix + (out ? 'leave' : 'enter'));
|
|
|
|
if (startsWith(animation, animationPrefix)) {
|
|
origin && addClass(element, ("uk-transform-origin-" + origin));
|
|
out && addClass(element, (animationPrefix + "reverse"));
|
|
}
|
|
|
|
}); }
|
|
));
|
|
|
|
}
|
|
|
|
var inProgress = new RegExp((animationPrefix + "(enter|leave)"));
|
|
var Animation = {
|
|
|
|
in: animate$1,
|
|
|
|
out: function(element, animation, duration, origin) {
|
|
return animate$1(element, animation, duration, origin, true);
|
|
},
|
|
|
|
inProgress: function(element) {
|
|
return inProgress.test(attr(element, 'class'));
|
|
},
|
|
|
|
cancel: function(element) {
|
|
trigger(element, 'animationcanceled');
|
|
}
|
|
|
|
};
|
|
|
|
var dirs$1 = {
|
|
width: ['left', 'right'],
|
|
height: ['top', 'bottom']
|
|
};
|
|
|
|
function dimensions(element) {
|
|
|
|
var rect = isElement(element)
|
|
? toNode(element).getBoundingClientRect()
|
|
: {height: height(element), width: width(element), top: 0, left: 0};
|
|
|
|
return {
|
|
height: rect.height,
|
|
width: rect.width,
|
|
top: rect.top,
|
|
left: rect.left,
|
|
bottom: rect.top + rect.height,
|
|
right: rect.left + rect.width
|
|
};
|
|
}
|
|
|
|
function offset(element, coordinates) {
|
|
|
|
var currentOffset = dimensions(element);
|
|
var ref = toWindow(element);
|
|
var pageYOffset = ref.pageYOffset;
|
|
var pageXOffset = ref.pageXOffset;
|
|
var offsetBy = {height: pageYOffset, width: pageXOffset};
|
|
|
|
for (var dir in dirs$1) {
|
|
for (var i in dirs$1[dir]) {
|
|
currentOffset[dirs$1[dir][i]] += offsetBy[dir];
|
|
}
|
|
}
|
|
|
|
if (!coordinates) {
|
|
return currentOffset;
|
|
}
|
|
|
|
var pos = css(element, 'position');
|
|
|
|
each(css(element, ['left', 'top']), function (value, prop) { return css(element, prop, coordinates[prop]
|
|
- currentOffset[prop]
|
|
+ toFloat(pos === 'absolute' && value === 'auto'
|
|
? position(element)[prop]
|
|
: value)
|
|
); }
|
|
);
|
|
}
|
|
|
|
function position(element) {
|
|
|
|
var ref = offset(element);
|
|
var top = ref.top;
|
|
var left = ref.left;
|
|
|
|
var ref$1 = toNode(element);
|
|
var ref$1_ownerDocument = ref$1.ownerDocument;
|
|
var body = ref$1_ownerDocument.body;
|
|
var documentElement = ref$1_ownerDocument.documentElement;
|
|
var offsetParent = ref$1.offsetParent;
|
|
var parent = offsetParent || documentElement;
|
|
|
|
while (parent && (parent === body || parent === documentElement) && css(parent, 'position') === 'static') {
|
|
parent = parent.parentNode;
|
|
}
|
|
|
|
if (isElement(parent)) {
|
|
var parentOffset = offset(parent);
|
|
top -= parentOffset.top + toFloat(css(parent, 'borderTopWidth'));
|
|
left -= parentOffset.left + toFloat(css(parent, 'borderLeftWidth'));
|
|
}
|
|
|
|
return {
|
|
top: top - toFloat(css(element, 'marginTop')),
|
|
left: left - toFloat(css(element, 'marginLeft'))
|
|
};
|
|
}
|
|
|
|
function offsetPosition(element) {
|
|
var offset = [0, 0];
|
|
|
|
element = toNode(element);
|
|
|
|
do {
|
|
|
|
offset[0] += element.offsetTop;
|
|
offset[1] += element.offsetLeft;
|
|
|
|
if (css(element, 'position') === 'fixed') {
|
|
var win = toWindow(element);
|
|
offset[0] += win.pageYOffset;
|
|
offset[1] += win.pageXOffset;
|
|
return offset;
|
|
}
|
|
|
|
} while ((element = element.offsetParent));
|
|
|
|
return offset;
|
|
}
|
|
|
|
var height = dimension('height');
|
|
var width = dimension('width');
|
|
|
|
function dimension(prop) {
|
|
var propName = ucfirst(prop);
|
|
return function (element, value) {
|
|
|
|
if (isUndefined(value)) {
|
|
|
|
if (isWindow(element)) {
|
|
return element[("inner" + propName)];
|
|
}
|
|
|
|
if (isDocument(element)) {
|
|
var doc = element.documentElement;
|
|
return Math.max(doc[("offset" + propName)], doc[("scroll" + propName)]);
|
|
}
|
|
|
|
element = toNode(element);
|
|
|
|
value = css(element, prop);
|
|
value = value === 'auto' ? element[("offset" + propName)] : toFloat(value) || 0;
|
|
|
|
return value - boxModelAdjust(element, prop);
|
|
|
|
} else {
|
|
|
|
return css(element, prop, !value && value !== 0
|
|
? ''
|
|
: +value + boxModelAdjust(element, prop) + 'px'
|
|
);
|
|
|
|
}
|
|
|
|
};
|
|
}
|
|
|
|
function boxModelAdjust(element, prop, sizing) {
|
|
if ( sizing === void 0 ) sizing = 'border-box';
|
|
|
|
return css(element, 'boxSizing') === sizing
|
|
? dirs$1[prop].map(ucfirst).reduce(function (value, prop) { return value
|
|
+ toFloat(css(element, ("padding" + prop)))
|
|
+ toFloat(css(element, ("border" + prop + "Width"))); }
|
|
, 0)
|
|
: 0;
|
|
}
|
|
|
|
function flipPosition(pos) {
|
|
for (var dir in dirs$1) {
|
|
for (var i in dirs$1[dir]) {
|
|
if (dirs$1[dir][i] === pos) {
|
|
return dirs$1[dir][1 - i];
|
|
}
|
|
}
|
|
}
|
|
return pos;
|
|
}
|
|
|
|
function toPx(value, property, element) {
|
|
if ( property === void 0 ) property = 'width';
|
|
if ( element === void 0 ) element = window;
|
|
|
|
return isNumeric(value)
|
|
? +value
|
|
: endsWith(value, 'vh')
|
|
? percent(height(toWindow(element)), value)
|
|
: endsWith(value, 'vw')
|
|
? percent(width(toWindow(element)), value)
|
|
: endsWith(value, '%')
|
|
? percent(dimensions(element)[property], value)
|
|
: toFloat(value);
|
|
}
|
|
|
|
function percent(base, value) {
|
|
return base * toFloat(value) / 100;
|
|
}
|
|
|
|
/*
|
|
Based on:
|
|
Copyright (c) 2016 Wilson Page wilsonpage@me.com
|
|
https://github.com/wilsonpage/fastdom
|
|
*/
|
|
|
|
var fastdom = {
|
|
|
|
reads: [],
|
|
writes: [],
|
|
|
|
read: function(task) {
|
|
this.reads.push(task);
|
|
scheduleFlush();
|
|
return task;
|
|
},
|
|
|
|
write: function(task) {
|
|
this.writes.push(task);
|
|
scheduleFlush();
|
|
return task;
|
|
},
|
|
|
|
clear: function(task) {
|
|
remove(this.reads, task);
|
|
remove(this.writes, task);
|
|
},
|
|
|
|
flush: flush
|
|
|
|
};
|
|
|
|
function flush(recursion) {
|
|
if ( recursion === void 0 ) recursion = 1;
|
|
|
|
runTasks(fastdom.reads);
|
|
runTasks(fastdom.writes.splice(0));
|
|
|
|
fastdom.scheduled = false;
|
|
|
|
if (fastdom.reads.length || fastdom.writes.length) {
|
|
scheduleFlush(recursion + 1);
|
|
}
|
|
}
|
|
|
|
var RECURSION_LIMIT = 4;
|
|
function scheduleFlush(recursion) {
|
|
|
|
if (fastdom.scheduled) {
|
|
return;
|
|
}
|
|
|
|
fastdom.scheduled = true;
|
|
if (recursion && recursion < RECURSION_LIMIT) {
|
|
Promise$1.resolve().then(function () { return flush(recursion); });
|
|
} else {
|
|
requestAnimationFrame(function () { return flush(); });
|
|
}
|
|
|
|
}
|
|
|
|
function runTasks(tasks) {
|
|
var task;
|
|
while ((task = tasks.shift())) {
|
|
try {
|
|
task();
|
|
} catch (e) {
|
|
console.error(e);
|
|
}
|
|
}
|
|
}
|
|
|
|
function remove(array, item) {
|
|
var index = array.indexOf(item);
|
|
return ~index && array.splice(index, 1);
|
|
}
|
|
|
|
function MouseTracker() {}
|
|
|
|
MouseTracker.prototype = {
|
|
|
|
positions: [],
|
|
|
|
init: function() {
|
|
var this$1 = this;
|
|
|
|
|
|
this.positions = [];
|
|
|
|
var position;
|
|
this.unbind = on(document, 'mousemove', function (e) { return position = getEventPos(e); });
|
|
this.interval = setInterval(function () {
|
|
|
|
if (!position) {
|
|
return;
|
|
}
|
|
|
|
this$1.positions.push(position);
|
|
|
|
if (this$1.positions.length > 5) {
|
|
this$1.positions.shift();
|
|
}
|
|
}, 50);
|
|
|
|
},
|
|
|
|
cancel: function() {
|
|
this.unbind && this.unbind();
|
|
this.interval && clearInterval(this.interval);
|
|
},
|
|
|
|
movesTo: function(target) {
|
|
|
|
if (this.positions.length < 2) {
|
|
return false;
|
|
}
|
|
|
|
var p = target.getBoundingClientRect();
|
|
var left = p.left;
|
|
var right = p.right;
|
|
var top = p.top;
|
|
var bottom = p.bottom;
|
|
|
|
var ref = this.positions;
|
|
var prevPosition = ref[0];
|
|
var position = last(this.positions);
|
|
var path = [prevPosition, position];
|
|
|
|
if (pointInRect(position, p)) {
|
|
return false;
|
|
}
|
|
|
|
var diagonals = [[{x: left, y: top}, {x: right, y: bottom}], [{x: left, y: bottom}, {x: right, y: top}]];
|
|
|
|
return diagonals.some(function (diagonal) {
|
|
var intersection = intersect(path, diagonal);
|
|
return intersection && pointInRect(intersection, p);
|
|
});
|
|
}
|
|
|
|
};
|
|
|
|
// Inspired by http://paulbourke.net/geometry/pointlineplane/
|
|
function intersect(ref, ref$1) {
|
|
var ref_0 = ref[0];
|
|
var x1 = ref_0.x;
|
|
var y1 = ref_0.y;
|
|
var ref_1 = ref[1];
|
|
var x2 = ref_1.x;
|
|
var y2 = ref_1.y;
|
|
var ref$1_0 = ref$1[0];
|
|
var x3 = ref$1_0.x;
|
|
var y3 = ref$1_0.y;
|
|
var ref$1_1 = ref$1[1];
|
|
var x4 = ref$1_1.x;
|
|
var y4 = ref$1_1.y;
|
|
|
|
|
|
var denominator = (y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1);
|
|
|
|
// Lines are parallel
|
|
if (denominator === 0) {
|
|
return false;
|
|
}
|
|
|
|
var ua = ((x4 - x3) * (y1 - y3) - (y4 - y3) * (x1 - x3)) / denominator;
|
|
|
|
if (ua < 0) {
|
|
return false;
|
|
}
|
|
|
|
// Return an object with the x and y coordinates of the intersection
|
|
return {x: x1 + ua * (x2 - x1), y: y1 + ua * (y2 - y1)};
|
|
}
|
|
|
|
var strats = {};
|
|
|
|
strats.events =
|
|
strats.created =
|
|
strats.beforeConnect =
|
|
strats.connected =
|
|
strats.beforeDisconnect =
|
|
strats.disconnected =
|
|
strats.destroy = concatStrat;
|
|
|
|
// args strategy
|
|
strats.args = function (parentVal, childVal) {
|
|
return childVal !== false && concatStrat(childVal || parentVal);
|
|
};
|
|
|
|
// update strategy
|
|
strats.update = function (parentVal, childVal) {
|
|
return sortBy$1(concatStrat(parentVal, isFunction(childVal) ? {read: childVal} : childVal), 'order');
|
|
};
|
|
|
|
// 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.methods = function (parentVal, childVal) {
|
|
return childVal
|
|
? parentVal
|
|
? assign({}, parentVal, childVal)
|
|
: childVal
|
|
: parentVal;
|
|
};
|
|
|
|
// data strategy
|
|
strats.data = function (parentVal, childVal, vm) {
|
|
|
|
if (!vm) {
|
|
|
|
if (!childVal) {
|
|
return parentVal;
|
|
}
|
|
|
|
if (!parentVal) {
|
|
return childVal;
|
|
}
|
|
|
|
return function (vm) {
|
|
return mergeFnData(parentVal, childVal, vm);
|
|
};
|
|
|
|
}
|
|
|
|
return mergeFnData(parentVal, childVal, vm);
|
|
};
|
|
|
|
function mergeFnData(parentVal, childVal, vm) {
|
|
return strats.computed(
|
|
isFunction(parentVal)
|
|
? parentVal.call(vm, vm)
|
|
: parentVal,
|
|
isFunction(childVal)
|
|
? childVal.call(vm, vm)
|
|
: childVal
|
|
);
|
|
}
|
|
|
|
// concat strategy
|
|
function concatStrat(parentVal, childVal) {
|
|
|
|
parentVal = parentVal && !isArray(parentVal) ? [parentVal] : parentVal;
|
|
|
|
return childVal
|
|
? parentVal
|
|
? parentVal.concat(childVal)
|
|
: isArray(childVal)
|
|
? childVal
|
|
: [childVal]
|
|
: parentVal;
|
|
}
|
|
|
|
// default strategy
|
|
function defaultStrat(parentVal, childVal) {
|
|
return isUndefined(childVal) ? parentVal : childVal;
|
|
}
|
|
|
|
function mergeOptions(parent, child, vm) {
|
|
|
|
var options = {};
|
|
|
|
if (isFunction(child)) {
|
|
child = child.options;
|
|
}
|
|
|
|
if (child.extends) {
|
|
parent = mergeOptions(parent, child.extends, vm);
|
|
}
|
|
|
|
if (child.mixins) {
|
|
for (var i = 0, l = child.mixins.length; i < l; i++) {
|
|
parent = mergeOptions(parent, child.mixins[i], vm);
|
|
}
|
|
}
|
|
|
|
for (var key in parent) {
|
|
mergeKey(key);
|
|
}
|
|
|
|
for (var key$1 in child) {
|
|
if (!hasOwn(parent, key$1)) {
|
|
mergeKey(key$1);
|
|
}
|
|
}
|
|
|
|
function mergeKey(key) {
|
|
options[key] = (strats[key] || defaultStrat)(parent[key], child[key], vm);
|
|
}
|
|
|
|
return options;
|
|
}
|
|
|
|
function parseOptions(options, args) {
|
|
var obj;
|
|
|
|
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 && !isUndefined(value)) {
|
|
options[key.trim()] = value.trim();
|
|
}
|
|
return options;
|
|
}, {});
|
|
|
|
} catch (e) {
|
|
return {};
|
|
}
|
|
|
|
}
|
|
|
|
function play(el) {
|
|
|
|
if (isIFrame(el)) {
|
|
call(el, {func: 'playVideo', method: 'play'});
|
|
}
|
|
|
|
if (isHTML5(el)) {
|
|
try {
|
|
el.play().catch(noop);
|
|
} catch (e) {}
|
|
}
|
|
|
|
}
|
|
|
|
function pause(el) {
|
|
|
|
if (isIFrame(el)) {
|
|
call(el, {func: 'pauseVideo', method: 'pause'});
|
|
}
|
|
|
|
if (isHTML5(el)) {
|
|
el.pause();
|
|
}
|
|
|
|
}
|
|
|
|
function mute(el) {
|
|
|
|
if (isIFrame(el)) {
|
|
call(el, {func: 'mute', method: 'setVolume', value: 0});
|
|
}
|
|
|
|
if (isHTML5(el)) {
|
|
el.muted = true;
|
|
}
|
|
|
|
}
|
|
|
|
function isHTML5(el) {
|
|
return el && el.tagName === 'VIDEO';
|
|
}
|
|
|
|
function isIFrame(el) {
|
|
return el && el.tagName === 'IFRAME' && (isYoutube(el) || isVimeo(el));
|
|
}
|
|
|
|
function isYoutube(el) {
|
|
return !!el.src.match(/\/\/.*?youtube(-nocookie)?\.[a-z]+\/(watch\?v=[^&\s]+|embed)|youtu\.be\/.*/);
|
|
}
|
|
|
|
function isVimeo(el) {
|
|
return !!el.src.match(/vimeo\.com\/video\/.*/);
|
|
}
|
|
|
|
function call(el, cmd) {
|
|
enableApi(el).then(function () { return post(el, cmd); });
|
|
}
|
|
|
|
function post(el, cmd) {
|
|
try {
|
|
el.contentWindow.postMessage(JSON.stringify(assign({event: 'command'}, cmd)), '*');
|
|
} catch (e) {}
|
|
}
|
|
|
|
var stateKey$1 = '_ukPlayer';
|
|
var counter = 0;
|
|
function enableApi(el) {
|
|
|
|
if (el[stateKey$1]) {
|
|
return el[stateKey$1];
|
|
}
|
|
|
|
var youtube = isYoutube(el);
|
|
var vimeo = isVimeo(el);
|
|
|
|
var id = ++counter;
|
|
var poller;
|
|
|
|
return el[stateKey$1] = new Promise$1(function (resolve) {
|
|
|
|
youtube && once(el, 'load', function () {
|
|
var listener = function () { return post(el, {event: 'listening', id: id}); };
|
|
poller = setInterval(listener, 100);
|
|
listener();
|
|
});
|
|
|
|
once(window, 'message', resolve, false, function (ref) {
|
|
var data = ref.data;
|
|
|
|
|
|
try {
|
|
data = JSON.parse(data);
|
|
return data && (youtube && data.id === id && data.event === 'onReady' || vimeo && Number(data.player_id) === id);
|
|
} catch (e) {}
|
|
|
|
});
|
|
|
|
el.src = "" + (el.src) + (includes(el.src, '?') ? '&' : '?') + (youtube ? 'enablejsapi=1' : ("api=1&player_id=" + id));
|
|
|
|
}).then(function () { return clearInterval(poller); });
|
|
}
|
|
|
|
function isInView(element, offsetTop, offsetLeft) {
|
|
if ( offsetTop === void 0 ) offsetTop = 0;
|
|
if ( offsetLeft === void 0 ) offsetLeft = 0;
|
|
|
|
|
|
if (!isVisible(element)) {
|
|
return false;
|
|
}
|
|
|
|
return intersectRect.apply(void 0, scrollParents(element).map(function (parent) {
|
|
|
|
var ref = offset(getViewport$1(parent));
|
|
var top = ref.top;
|
|
var left = ref.left;
|
|
var bottom = ref.bottom;
|
|
var right = ref.right;
|
|
|
|
return {
|
|
top: top - offsetTop,
|
|
left: left - offsetLeft,
|
|
bottom: bottom + offsetTop,
|
|
right: right + offsetLeft
|
|
};
|
|
}).concat(offset(element)));
|
|
}
|
|
|
|
function scrollTop(element, top) {
|
|
|
|
if (isWindow(element) || isDocument(element)) {
|
|
element = getScrollingElement(element);
|
|
} else {
|
|
element = toNode(element);
|
|
}
|
|
|
|
element.scrollTop = top;
|
|
}
|
|
|
|
function scrollIntoView(element, ref) {
|
|
if ( ref === void 0 ) ref = {};
|
|
var offsetBy = ref.offset; if ( offsetBy === void 0 ) offsetBy = 0;
|
|
|
|
|
|
if (!isVisible(element)) {
|
|
return;
|
|
}
|
|
|
|
var parents = scrollParents(element);
|
|
var diff = 0;
|
|
return parents.reduce(function (fn, scrollElement, i) {
|
|
|
|
var scrollTop = scrollElement.scrollTop;
|
|
var scrollHeight = scrollElement.scrollHeight;
|
|
var maxScroll = scrollHeight - getViewportClientHeight(scrollElement);
|
|
|
|
var top = Math.ceil(
|
|
offset(parents[i - 1] || element).top
|
|
- offset(getViewport$1(scrollElement)).top
|
|
- offsetBy
|
|
+ diff
|
|
+ scrollTop
|
|
);
|
|
|
|
if (top > maxScroll) {
|
|
diff = top - maxScroll;
|
|
top = maxScroll;
|
|
} else {
|
|
diff = 0;
|
|
}
|
|
|
|
return function () { return scrollTo(scrollElement, top - scrollTop).then(fn); };
|
|
|
|
}, function () { return Promise$1.resolve(); })();
|
|
|
|
function scrollTo(element, top) {
|
|
return new Promise$1(function (resolve) {
|
|
|
|
var scroll = element.scrollTop;
|
|
var duration = getDuration(Math.abs(top));
|
|
var start = Date.now();
|
|
|
|
(function step() {
|
|
|
|
var percent = ease(clamp((Date.now() - start) / duration));
|
|
|
|
scrollTop(element, scroll + top * percent);
|
|
|
|
// scroll more if we have not reached our destination
|
|
if (percent !== 1) {
|
|
requestAnimationFrame(step);
|
|
} else {
|
|
resolve();
|
|
}
|
|
|
|
})();
|
|
});
|
|
}
|
|
|
|
function getDuration(dist) {
|
|
return 40 * Math.pow(dist, .375);
|
|
}
|
|
|
|
function ease(k) {
|
|
return 0.5 * (1 - Math.cos(Math.PI * k));
|
|
}
|
|
|
|
}
|
|
|
|
function scrolledOver(element, heightOffset) {
|
|
if ( heightOffset === void 0 ) heightOffset = 0;
|
|
|
|
|
|
if (!isVisible(element)) {
|
|
return 0;
|
|
}
|
|
|
|
var ref = scrollParents(element, /auto|scroll/, true);
|
|
var scrollElement = ref[0];
|
|
var scrollHeight = scrollElement.scrollHeight;
|
|
var scrollTop = scrollElement.scrollTop;
|
|
var clientHeight = getViewportClientHeight(scrollElement);
|
|
var viewportTop = offsetPosition(element)[0] - scrollTop - offsetPosition(scrollElement)[0];
|
|
var viewportDist = Math.min(clientHeight, viewportTop + scrollTop);
|
|
|
|
var top = viewportTop - viewportDist;
|
|
var dist = Math.min(
|
|
element.offsetHeight + heightOffset + viewportDist,
|
|
scrollHeight - (viewportTop + scrollTop),
|
|
scrollHeight - clientHeight
|
|
);
|
|
|
|
return clamp(-1 * top / dist);
|
|
}
|
|
|
|
function scrollParents(element, overflowRe, scrollable) {
|
|
if ( overflowRe === void 0 ) overflowRe = /auto|scroll|hidden/;
|
|
if ( scrollable === void 0 ) scrollable = false;
|
|
|
|
var scrollEl = getScrollingElement(element);
|
|
|
|
var ancestors = parents(element).reverse();
|
|
ancestors = ancestors.slice(ancestors.indexOf(scrollEl) + 1);
|
|
|
|
var fixedIndex = findIndex(ancestors, function (el) { return css(el, 'position') === 'fixed'; });
|
|
if (~fixedIndex) {
|
|
ancestors = ancestors.slice(fixedIndex);
|
|
}
|
|
|
|
return [scrollEl].concat(ancestors.filter(function (parent) { return overflowRe.test(css(parent, 'overflow')) && (!scrollable || parent.scrollHeight > getViewportClientHeight(parent)); })
|
|
).reverse();
|
|
}
|
|
|
|
function getViewport$1(scrollElement) {
|
|
return scrollElement === getScrollingElement(scrollElement) ? window : scrollElement;
|
|
}
|
|
|
|
// iOS 12 returns <body> as scrollingElement
|
|
function getViewportClientHeight(scrollElement) {
|
|
return (scrollElement === getScrollingElement(scrollElement) ? document.documentElement : scrollElement).clientHeight;
|
|
}
|
|
|
|
function getScrollingElement(element) {
|
|
var ref = toWindow(element);
|
|
var document = ref.document;
|
|
return document.scrollingElement || document.documentElement;
|
|
}
|
|
|
|
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 = offset(element);
|
|
var targetDim = offset(target);
|
|
var 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'];
|
|
|
|
if (flip) {
|
|
|
|
var boundaries = scrollParents(element).map(getViewport$1);
|
|
|
|
if (boundary && !includes(boundaries, boundary)) {
|
|
boundaries.unshift(boundary);
|
|
}
|
|
|
|
boundaries = boundaries.map(function (el) { return offset(el); });
|
|
|
|
each(dirs, function (ref, prop) {
|
|
var dir = ref[0];
|
|
var align = ref[1];
|
|
var alignFlip = ref[2];
|
|
|
|
|
|
if (!(flip === true || includes(flip, dir))) {
|
|
return;
|
|
}
|
|
|
|
boundaries.some(function (boundary) {
|
|
|
|
var elemOffset = elAttach[dir] === align
|
|
? -dim[prop]
|
|
: elAttach[dir] === alignFlip
|
|
? dim[prop]
|
|
: 0;
|
|
|
|
var 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;
|
|
var centerTargetOffset = targetAttach[dir] === 'center' ? -targetDim[prop] / 2 : 0;
|
|
|
|
return elAttach[dir] === 'center' && (
|
|
apply(centerOffset, centerTargetOffset)
|
|
|| apply(-centerOffset, -centerTargetOffset)
|
|
) || apply(elemOffset, targetOffset);
|
|
|
|
}
|
|
|
|
function apply(elemOffset, targetOffset) {
|
|
|
|
var newVal = toFloat((position[align] + elemOffset + targetOffset - elOffset[dir] * 2).toFixed(4));
|
|
|
|
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 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/;
|
|
var 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
|
|
};
|
|
}
|
|
|
|
var util = /*#__PURE__*/Object.freeze({
|
|
__proto__: null,
|
|
ajax: ajax,
|
|
getImage: getImage,
|
|
transition: transition,
|
|
Transition: Transition,
|
|
animate: animate$1,
|
|
Animation: Animation,
|
|
attr: attr,
|
|
hasAttr: hasAttr,
|
|
removeAttr: removeAttr,
|
|
data: data,
|
|
addClass: addClass,
|
|
removeClass: removeClass,
|
|
removeClasses: removeClasses,
|
|
replaceClass: replaceClass,
|
|
hasClass: hasClass,
|
|
toggleClass: toggleClass,
|
|
dimensions: dimensions,
|
|
offset: offset,
|
|
position: position,
|
|
offsetPosition: offsetPosition,
|
|
height: height,
|
|
width: width,
|
|
boxModelAdjust: boxModelAdjust,
|
|
flipPosition: flipPosition,
|
|
toPx: toPx,
|
|
ready: ready,
|
|
empty: empty,
|
|
html: html,
|
|
prepend: prepend,
|
|
append: append,
|
|
before: before,
|
|
after: after,
|
|
remove: remove$1,
|
|
wrapAll: wrapAll,
|
|
wrapInner: wrapInner,
|
|
unwrap: unwrap,
|
|
fragment: fragment,
|
|
apply: apply$1,
|
|
$: $,
|
|
$$: $$,
|
|
inBrowser: inBrowser,
|
|
isIE: isIE,
|
|
isRtl: isRtl,
|
|
hasTouch: hasTouch,
|
|
pointerDown: pointerDown,
|
|
pointerMove: pointerMove,
|
|
pointerUp: pointerUp,
|
|
pointerEnter: pointerEnter,
|
|
pointerLeave: pointerLeave,
|
|
pointerCancel: pointerCancel,
|
|
on: on,
|
|
off: off,
|
|
once: once,
|
|
trigger: trigger,
|
|
createEvent: createEvent,
|
|
toEventTargets: toEventTargets,
|
|
isTouch: isTouch,
|
|
getEventPos: getEventPos,
|
|
fastdom: fastdom,
|
|
isVoidElement: isVoidElement,
|
|
isVisible: isVisible,
|
|
selInput: selInput,
|
|
isInput: isInput,
|
|
isFocusable: isFocusable,
|
|
parent: parent,
|
|
filter: filter$1,
|
|
matches: matches,
|
|
closest: closest,
|
|
within: within,
|
|
parents: parents,
|
|
children: children,
|
|
index: index,
|
|
hasOwn: hasOwn,
|
|
hyphenate: hyphenate,
|
|
camelize: camelize,
|
|
ucfirst: ucfirst,
|
|
startsWith: startsWith,
|
|
endsWith: endsWith,
|
|
includes: includes,
|
|
findIndex: findIndex,
|
|
isArray: isArray,
|
|
isFunction: isFunction,
|
|
isObject: isObject,
|
|
isPlainObject: isPlainObject,
|
|
isWindow: isWindow,
|
|
isDocument: isDocument,
|
|
isNode: isNode,
|
|
isElement: isElement,
|
|
isBoolean: isBoolean,
|
|
isString: isString,
|
|
isNumber: isNumber,
|
|
isNumeric: isNumeric,
|
|
isEmpty: isEmpty,
|
|
isUndefined: isUndefined,
|
|
toBoolean: toBoolean,
|
|
toNumber: toNumber,
|
|
toFloat: toFloat,
|
|
toArray: toArray,
|
|
toNode: toNode,
|
|
toNodes: toNodes,
|
|
toWindow: toWindow,
|
|
toMs: toMs,
|
|
isEqual: isEqual,
|
|
swap: swap,
|
|
assign: assign,
|
|
last: last,
|
|
each: each,
|
|
sortBy: sortBy$1,
|
|
uniqueBy: uniqueBy,
|
|
clamp: clamp,
|
|
noop: noop,
|
|
intersectRect: intersectRect,
|
|
pointInRect: pointInRect,
|
|
Dimensions: Dimensions,
|
|
getIndex: getIndex,
|
|
memoize: memoize,
|
|
MouseTracker: MouseTracker,
|
|
mergeOptions: mergeOptions,
|
|
parseOptions: parseOptions,
|
|
play: play,
|
|
pause: pause,
|
|
mute: mute,
|
|
positionAt: positionAt,
|
|
Promise: Promise$1,
|
|
Deferred: Deferred,
|
|
query: query,
|
|
queryAll: queryAll,
|
|
find: find,
|
|
findAll: findAll,
|
|
escape: escape,
|
|
css: css,
|
|
getCssVar: getCssVar,
|
|
propName: propName,
|
|
isInView: isInView,
|
|
scrollTop: scrollTop,
|
|
scrollIntoView: scrollIntoView,
|
|
scrolledOver: scrolledOver,
|
|
scrollParents: scrollParents,
|
|
getViewport: getViewport$1,
|
|
getViewportClientHeight: getViewportClientHeight
|
|
});
|
|
|
|
function globalAPI (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.component(component) : component) || this;
|
|
component.options = mergeOptions(component.options, mixin);
|
|
};
|
|
|
|
UIkit.extend = function (options) {
|
|
|
|
options = options || {};
|
|
|
|
var Super = this;
|
|
var Sub = function UIkitComponent(options) {
|
|
this._init(options);
|
|
};
|
|
|
|
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 (element, e) {
|
|
|
|
element = element ? toNode(element) : document.body;
|
|
|
|
parents(element).reverse().forEach(function (element) { return update(element[DATA], e); });
|
|
apply$1(element, function (element) { return update(element[DATA], e); });
|
|
|
|
};
|
|
|
|
var container;
|
|
Object.defineProperty(UIkit, 'container', {
|
|
|
|
get: function() {
|
|
return container || document.body;
|
|
},
|
|
|
|
set: function(element) {
|
|
container = $(element);
|
|
}
|
|
|
|
});
|
|
|
|
function update(data, e) {
|
|
|
|
if (!data) {
|
|
return;
|
|
}
|
|
|
|
for (var name in data) {
|
|
if (data[name]._connected) {
|
|
data[name]._callUpdate(e);
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
function hooksAPI (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._callConnected = function () {
|
|
|
|
if (this._connected) {
|
|
return;
|
|
}
|
|
|
|
this._data = {};
|
|
this._computeds = {};
|
|
|
|
this._initProps();
|
|
|
|
this._callHook('beforeConnect');
|
|
this._connected = true;
|
|
|
|
this._initEvents();
|
|
this._initObservers();
|
|
|
|
this._callHook('connected');
|
|
this._callUpdate();
|
|
};
|
|
|
|
UIkit.prototype._callDisconnected = function () {
|
|
|
|
if (!this._connected) {
|
|
return;
|
|
}
|
|
|
|
this._callHook('beforeDisconnect');
|
|
this._disconnectObservers();
|
|
this._unbindEvents();
|
|
this._callHook('disconnected');
|
|
|
|
this._connected = false;
|
|
delete this._watch;
|
|
|
|
};
|
|
|
|
UIkit.prototype._callUpdate = function (e) {
|
|
var this$1 = this;
|
|
if ( e === void 0 ) e = 'update';
|
|
|
|
|
|
if (!this._connected) {
|
|
return;
|
|
}
|
|
|
|
if (e === 'update' || e === 'resize') {
|
|
this._callWatches();
|
|
}
|
|
|
|
if (!this.$options.update) {
|
|
return;
|
|
}
|
|
|
|
if (!this._updates) {
|
|
this._updates = new Set();
|
|
fastdom.read(function () {
|
|
runUpdates.call(this$1, this$1._updates);
|
|
delete this$1._updates;
|
|
});
|
|
}
|
|
|
|
this._updates.add(e.type || e);
|
|
};
|
|
|
|
UIkit.prototype._callWatches = function () {
|
|
var this$1 = this;
|
|
|
|
|
|
if (this._watch) {
|
|
return;
|
|
}
|
|
|
|
var initital = !hasOwn(this, '_watch');
|
|
|
|
this._watch = fastdom.read(function () {
|
|
|
|
var ref = this$1;
|
|
var computed = ref.$options.computed;
|
|
var _computeds = ref._computeds;
|
|
|
|
for (var key in computed) {
|
|
|
|
var hasPrev = hasOwn(_computeds, key);
|
|
var prev = _computeds[key];
|
|
|
|
delete _computeds[key];
|
|
|
|
var ref$1 = computed[key];
|
|
var watch = ref$1.watch;
|
|
var immediate = ref$1.immediate;
|
|
if (watch && (
|
|
initital && immediate
|
|
|| hasPrev && !isEqual(prev, this$1[key])
|
|
)) {
|
|
watch.call(this$1, this$1[key], prev);
|
|
}
|
|
|
|
}
|
|
|
|
this$1._watch = null;
|
|
|
|
});
|
|
|
|
};
|
|
|
|
function runUpdates(types) {
|
|
var this$1 = this;
|
|
|
|
|
|
var updates = this.$options.update;
|
|
|
|
var loop = function ( i ) {
|
|
var ref = updates[i];
|
|
var read = ref.read;
|
|
var write = ref.write;
|
|
var events = ref.events;
|
|
|
|
if (!types.has('update') && (!events || !events.some(function (type) { return types.has(type); }))) {
|
|
return;
|
|
}
|
|
|
|
var result = (void 0);
|
|
if (read) {
|
|
|
|
result = read.call(this$1, this$1._data, types);
|
|
|
|
if (result && isPlainObject(result)) {
|
|
assign(this$1._data, result);
|
|
}
|
|
}
|
|
|
|
if (write && result !== false) {
|
|
fastdom.write(function () { return write.call(this$1, this$1._data, types); });
|
|
}
|
|
|
|
};
|
|
|
|
for (var i = 0; i < updates.length; i++) loop( i );
|
|
}
|
|
}
|
|
|
|
function stateAPI (UIkit) {
|
|
|
|
var uid = 0;
|
|
|
|
UIkit.prototype._init = function (options) {
|
|
|
|
options = options || {};
|
|
options.data = normalizeData(options, this.constructor.options);
|
|
|
|
this.$options = mergeOptions(this.constructor.options, options, this);
|
|
this.$el = null;
|
|
this.$props = {};
|
|
|
|
this._uid = uid++;
|
|
this._initData();
|
|
this._initMethods();
|
|
this._initComputeds();
|
|
this._callHook('created');
|
|
|
|
if (options.el) {
|
|
this.$mount(options.el);
|
|
}
|
|
};
|
|
|
|
UIkit.prototype._initData = function () {
|
|
|
|
var ref = this.$options;
|
|
var data = ref.data; if ( data === void 0 ) data = {};
|
|
|
|
for (var key in data) {
|
|
this.$props[key] = this[key] = data[key];
|
|
}
|
|
};
|
|
|
|
UIkit.prototype._initMethods = function () {
|
|
|
|
var ref = this.$options;
|
|
var methods = ref.methods;
|
|
|
|
if (methods) {
|
|
for (var key in methods) {
|
|
this[key] = methods[key].bind(this);
|
|
}
|
|
}
|
|
};
|
|
|
|
UIkit.prototype._initComputeds = function () {
|
|
|
|
var ref = this.$options;
|
|
var computed = ref.computed;
|
|
|
|
this._computeds = {};
|
|
|
|
if (computed) {
|
|
for (var key in computed) {
|
|
registerComputed(this, key, computed[key]);
|
|
}
|
|
}
|
|
};
|
|
|
|
UIkit.prototype._initProps = function (props) {
|
|
|
|
var key;
|
|
|
|
props = props || getProps(this.$options, this.$name);
|
|
|
|
for (key in props) {
|
|
if (!isUndefined(props[key])) {
|
|
this.$props[key] = props[key];
|
|
}
|
|
}
|
|
|
|
var exclude = [this.$options.computed, this.$options.methods];
|
|
for (key in this.$props) {
|
|
if (key in props && notIn(exclude, key)) {
|
|
this[key] = this.$props[key];
|
|
}
|
|
}
|
|
};
|
|
|
|
UIkit.prototype._initEvents = function () {
|
|
var this$1 = this;
|
|
|
|
|
|
this._events = [];
|
|
|
|
var ref = this.$options;
|
|
var events = ref.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(); });
|
|
delete this._events;
|
|
};
|
|
|
|
UIkit.prototype._initObservers = function () {
|
|
this._observers = [
|
|
initChildListObserver(this),
|
|
initPropsObserver(this)
|
|
];
|
|
};
|
|
|
|
UIkit.prototype._disconnectObservers = function () {
|
|
this._observers.forEach(function (observer) { return observer && observer.disconnect(); }
|
|
);
|
|
};
|
|
|
|
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;
|
|
|
|
if (!props) {
|
|
return data$1;
|
|
}
|
|
|
|
for (var key in props) {
|
|
var prop = hyphenate(key);
|
|
var value = data(el, prop);
|
|
|
|
if (isUndefined(value)) {
|
|
continue;
|
|
}
|
|
|
|
value = props[key] === Boolean && value === ''
|
|
? true
|
|
: coerce(props[key], value);
|
|
|
|
if (prop === 'target' && (!value || startsWith(value, '_'))) {
|
|
continue;
|
|
}
|
|
|
|
data$1[key] = value;
|
|
}
|
|
|
|
var options = parseOptions(data(el, name), args);
|
|
|
|
for (var key$1 in options) {
|
|
var prop$1 = camelize(key$1);
|
|
if (props[prop$1] !== undefined) {
|
|
data$1[prop$1] = coerce(props[prop$1], options[key$1]);
|
|
}
|
|
}
|
|
|
|
return data$1;
|
|
}
|
|
|
|
function registerComputed(component, key, cb) {
|
|
Object.defineProperty(component, key, {
|
|
|
|
enumerable: true,
|
|
|
|
get: function() {
|
|
|
|
var _computeds = component._computeds;
|
|
var $props = component.$props;
|
|
var $el = component.$el;
|
|
|
|
if (!hasOwn(_computeds, key)) {
|
|
_computeds[key] = (cb.get || cb).call(component, $props, $el);
|
|
}
|
|
|
|
return _computeds[key];
|
|
},
|
|
|
|
set: function(value) {
|
|
|
|
var _computeds = component._computeds;
|
|
|
|
_computeds[key] = cb.set ? cb.set.call(component, value) : value;
|
|
|
|
if (isUndefined(_computeds[key])) {
|
|
delete _computeds[key];
|
|
}
|
|
}
|
|
|
|
});
|
|
}
|
|
|
|
function registerEvent(component, event, key) {
|
|
|
|
if (!isPlainObject(event)) {
|
|
event = ({name: key, handler: event});
|
|
}
|
|
|
|
var name = event.name;
|
|
var el = event.el;
|
|
var handler = event.handler;
|
|
var capture = event.capture;
|
|
var passive = event.passive;
|
|
var delegate = event.delegate;
|
|
var filter = event.filter;
|
|
var self = event.self;
|
|
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;
|
|
}
|
|
|
|
component._events.push(
|
|
on(
|
|
el,
|
|
name,
|
|
!delegate
|
|
? null
|
|
: isString(delegate)
|
|
? delegate
|
|
: delegate.call(component),
|
|
isString(handler) ? component[handler] : handler.bind(component),
|
|
{passive: passive, capture: capture, self: self}
|
|
)
|
|
);
|
|
|
|
}
|
|
|
|
function notIn(options, key) {
|
|
return options.every(function (arr) { return !arr || !hasOwn(arr, key); });
|
|
}
|
|
|
|
function coerce(type, value) {
|
|
|
|
if (type === Boolean) {
|
|
return toBoolean(value);
|
|
} else if (type === Number) {
|
|
return toNumber(value);
|
|
} else if (type === 'list') {
|
|
return toList(value);
|
|
}
|
|
|
|
return type ? type(value) : value;
|
|
}
|
|
|
|
function toList(value) {
|
|
return isArray(value)
|
|
? value
|
|
: isString(value)
|
|
? value.split(/,(?![^(]*\))/).map(function (value) { return isNumeric(value)
|
|
? toNumber(value)
|
|
: toBoolean(value.trim()); })
|
|
: [value];
|
|
}
|
|
|
|
function normalizeData(ref, ref$1) {
|
|
var data = ref.data;
|
|
var args = ref$1.args;
|
|
var props = ref$1.props; if ( props === void 0 ) props = {};
|
|
|
|
data = isArray(data)
|
|
? !isEmpty(args)
|
|
? data.slice(0, args.length).reduce(function (data, value, index) {
|
|
if (isPlainObject(value)) {
|
|
assign(data, value);
|
|
} else {
|
|
data[args[index]] = value;
|
|
}
|
|
return data;
|
|
}, {})
|
|
: undefined
|
|
: data;
|
|
|
|
if (data) {
|
|
for (var key in data) {
|
|
if (isUndefined(data[key])) {
|
|
delete data[key];
|
|
} else {
|
|
data[key] = props[key] ? coerce(props[key], data[key]) : data[key];
|
|
}
|
|
}
|
|
}
|
|
|
|
return data;
|
|
}
|
|
|
|
function initChildListObserver(component) {
|
|
var ref = component.$options;
|
|
var el = ref.el;
|
|
|
|
var observer = new MutationObserver(function () { return component.$emit(); });
|
|
observer.observe(el, {
|
|
childList: true,
|
|
subtree: true
|
|
});
|
|
|
|
return observer;
|
|
}
|
|
|
|
function initPropsObserver(component) {
|
|
|
|
var $name = component.$name;
|
|
var $options = component.$options;
|
|
var $props = component.$props;
|
|
var attrs = $options.attrs;
|
|
var props = $options.props;
|
|
var el = $options.el;
|
|
|
|
if (!props || attrs === false) {
|
|
return;
|
|
}
|
|
|
|
var attributes = isArray(attrs) ? attrs : Object.keys(props);
|
|
var filter = attributes.map(function (key) { return hyphenate(key); }).concat($name);
|
|
|
|
var observer = new MutationObserver(function (records) {
|
|
var data = getProps($options, $name);
|
|
if (records.some(function (ref) {
|
|
var attributeName = ref.attributeName;
|
|
|
|
var prop = attributeName.replace('data-', '');
|
|
return (prop === $name ? attributes : [camelize(prop), camelize(attributeName)]).some(function (prop) { return !isUndefined(data[prop]) && data[prop] !== $props[prop]; }
|
|
);
|
|
})) {
|
|
component.$reset();
|
|
}
|
|
});
|
|
|
|
observer.observe(el, {
|
|
attributes: true,
|
|
attributeFilter: filter.concat(filter.map(function (key) { return ("data-" + key); }))
|
|
});
|
|
|
|
return observer;
|
|
}
|
|
}
|
|
|
|
function instanceAPI (UIkit) {
|
|
|
|
var DATA = UIkit.data;
|
|
|
|
UIkit.prototype.$create = function (component, element, data) {
|
|
return UIkit[component](element, data);
|
|
};
|
|
|
|
UIkit.prototype.$mount = function (el) {
|
|
|
|
var ref = this.$options;
|
|
var name = ref.name;
|
|
|
|
if (!el[DATA]) {
|
|
el[DATA] = {};
|
|
}
|
|
|
|
if (el[DATA][name]) {
|
|
return;
|
|
}
|
|
|
|
el[DATA][name] = this;
|
|
|
|
this.$el = this.$options.el = this.$options.el || el;
|
|
|
|
if (within(el, document)) {
|
|
this._callConnected();
|
|
}
|
|
};
|
|
|
|
UIkit.prototype.$reset = function () {
|
|
this._callDisconnected();
|
|
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 (!isEmpty(el[DATA])) {
|
|
delete el[DATA];
|
|
}
|
|
|
|
if (removeEl) {
|
|
remove$1(this.$el);
|
|
}
|
|
};
|
|
|
|
UIkit.prototype.$emit = function (e) {
|
|
this._callUpdate(e);
|
|
};
|
|
|
|
UIkit.prototype.$update = function (element, e) {
|
|
if ( element === void 0 ) element = this.$el;
|
|
|
|
UIkit.update(element, e);
|
|
};
|
|
|
|
UIkit.prototype.$getComponent = UIkit.getComponent;
|
|
|
|
var componentName = memoize(function (name) { return UIkit.prefix + hyphenate(name); });
|
|
Object.defineProperties(UIkit.prototype, {
|
|
|
|
$container: Object.getOwnPropertyDescriptor(UIkit, 'container'),
|
|
|
|
$name: {
|
|
|
|
get: function() {
|
|
return componentName(this.$options.name);
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
function componentAPI (UIkit) {
|
|
|
|
var DATA = UIkit.data;
|
|
|
|
var components = {};
|
|
|
|
UIkit.component = function (name, options) {
|
|
|
|
var id = hyphenate(name);
|
|
|
|
name = camelize(id);
|
|
|
|
if (!options) {
|
|
|
|
if (isPlainObject(components[name])) {
|
|
components[name] = UIkit.extend(components[name]);
|
|
}
|
|
|
|
return components[name];
|
|
|
|
}
|
|
|
|
UIkit[name] = function (element, data) {
|
|
var i = arguments.length, argsArray = Array(i);
|
|
while ( i-- ) argsArray[i] = arguments[i];
|
|
|
|
|
|
var component = UIkit.component(name);
|
|
|
|
return component.options.functional
|
|
? new component({data: isPlainObject(element) ? element : [].concat( argsArray )})
|
|
: !element ? init(element) : $$(element).map(init)[0];
|
|
|
|
function init(element) {
|
|
|
|
var instance = UIkit.getComponent(element, name);
|
|
|
|
if (instance) {
|
|
if (!data) {
|
|
return instance;
|
|
} else {
|
|
instance.$destroy();
|
|
}
|
|
}
|
|
|
|
return new component({el: element, data: data});
|
|
|
|
}
|
|
|
|
};
|
|
|
|
var opt = isPlainObject(options) ? assign({}, options) : options.options;
|
|
|
|
opt.name = name;
|
|
|
|
if (opt.install) {
|
|
opt.install(UIkit, opt, name);
|
|
}
|
|
|
|
if (UIkit._initialized && !opt.functional) {
|
|
fastdom.read(function () { return UIkit[name](("[uk-" + id + "],[data-uk-" + id + "]")); });
|
|
}
|
|
|
|
return components[name] = isPlainObject(options) ? opt : options;
|
|
};
|
|
|
|
UIkit.getComponents = function (element) { return element && element[DATA] || {}; };
|
|
UIkit.getComponent = function (element, name) { return UIkit.getComponents(element)[name]; };
|
|
|
|
UIkit.connect = function (node) {
|
|
|
|
if (node[DATA]) {
|
|
for (var name in node[DATA]) {
|
|
node[DATA][name]._callConnected();
|
|
}
|
|
}
|
|
|
|
for (var i = 0; i < node.attributes.length; i++) {
|
|
|
|
var name$1 = getComponentName(node.attributes[i].name);
|
|
|
|
if (name$1 && name$1 in components) {
|
|
UIkit[name$1](node);
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
UIkit.disconnect = function (node) {
|
|
for (var name in node[DATA]) {
|
|
node[DATA][name]._callDisconnected();
|
|
}
|
|
};
|
|
|
|
}
|
|
|
|
var getComponentName = memoize(function (attribute) {
|
|
return startsWith(attribute, 'uk-') || startsWith(attribute, 'data-uk-')
|
|
? camelize(attribute.replace('data-uk-', '').replace('uk-', ''))
|
|
: false;
|
|
});
|
|
|
|
var UIkit = function (options) {
|
|
this._init(options);
|
|
};
|
|
|
|
UIkit.util = util;
|
|
UIkit.data = '__uikit__';
|
|
UIkit.prefix = 'uk-';
|
|
UIkit.options = {};
|
|
UIkit.version = '3.6.22';
|
|
|
|
globalAPI(UIkit);
|
|
hooksAPI(UIkit);
|
|
stateAPI(UIkit);
|
|
componentAPI(UIkit);
|
|
instanceAPI(UIkit);
|
|
|
|
function Core (UIkit) {
|
|
|
|
if (!inBrowser) {
|
|
return;
|
|
}
|
|
|
|
// throttle 'resize'
|
|
var pendingResize;
|
|
var handleResize = function () {
|
|
if (pendingResize) {
|
|
return;
|
|
}
|
|
pendingResize = true;
|
|
fastdom.write(function () { return pendingResize = false; });
|
|
UIkit.update(null, 'resize');
|
|
};
|
|
|
|
on(window, 'load resize', handleResize);
|
|
on(document, 'loadedmetadata load', handleResize, true);
|
|
|
|
if ('ResizeObserver' in window) {
|
|
(new ResizeObserver(handleResize)).observe(document.documentElement);
|
|
}
|
|
|
|
// throttle `scroll` event (Safari triggers multiple `scroll` events per frame)
|
|
var pending;
|
|
on(window, 'scroll', function (e) {
|
|
|
|
if (pending) {
|
|
return;
|
|
}
|
|
pending = true;
|
|
fastdom.write(function () { return pending = false; });
|
|
|
|
UIkit.update(null, e.type);
|
|
|
|
}, {passive: true, capture: true});
|
|
|
|
var started = 0;
|
|
on(document, 'animationstart', function (ref) {
|
|
var target = ref.target;
|
|
|
|
if ((css(target, 'animationName') || '').match(/^uk-.*(left|right)/)) {
|
|
|
|
started++;
|
|
css(document.documentElement, 'overflowX', 'hidden');
|
|
setTimeout(function () {
|
|
if (!--started) {
|
|
css(document.documentElement, 'overflowX', '');
|
|
}
|
|
}, toMs(css(target, 'animationDuration')) + 100);
|
|
}
|
|
}, true);
|
|
|
|
on(document, pointerDown, function (e) {
|
|
|
|
if (!isTouch(e)) {
|
|
return;
|
|
}
|
|
|
|
// Handle Swipe Gesture
|
|
var pos = getEventPos(e);
|
|
var target = 'tagName' in e.target ? e.target : parent(e.target);
|
|
once(document, (pointerUp + " " + pointerCancel + " scroll"), function (e) {
|
|
|
|
var ref = getEventPos(e);
|
|
var x = ref.x;
|
|
var y = ref.y;
|
|
|
|
// swipe
|
|
if (e.type !== 'scroll' && target && x && Math.abs(pos.x - x) > 100 || y && Math.abs(pos.y - y) > 100) {
|
|
|
|
setTimeout(function () {
|
|
trigger(target, 'swipe');
|
|
trigger(target, ("swipe" + (swipeDirection(pos.x, pos.y, x, y))));
|
|
});
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}, {passive: true});
|
|
|
|
}
|
|
|
|
function swipeDirection(x1, y1, x2, y2) {
|
|
return Math.abs(x1 - x2) >= Math.abs(y1 - y2)
|
|
? x1 - x2 > 0
|
|
? 'Left'
|
|
: 'Right'
|
|
: y1 - y2 > 0
|
|
? 'Up'
|
|
: 'Down';
|
|
}
|
|
|
|
function boot (UIkit) {
|
|
|
|
var connect = UIkit.connect;
|
|
var disconnect = UIkit.disconnect;
|
|
|
|
if (!inBrowser || !window.MutationObserver) {
|
|
return;
|
|
}
|
|
|
|
fastdom.read(function () {
|
|
|
|
if (document.body) {
|
|
apply$1(document.body, connect);
|
|
}
|
|
|
|
new MutationObserver(function (records) { return records.forEach(applyChildListMutation); }
|
|
).observe(document, {
|
|
childList: true,
|
|
subtree: true
|
|
});
|
|
|
|
new MutationObserver(function (records) { return records.forEach(applyAttributeMutation); }
|
|
).observe(document, {
|
|
attributes: true,
|
|
subtree: true
|
|
});
|
|
|
|
UIkit._initialized = true;
|
|
});
|
|
|
|
function applyChildListMutation(ref) {
|
|
var addedNodes = ref.addedNodes;
|
|
var removedNodes = ref.removedNodes;
|
|
|
|
for (var i = 0; i < addedNodes.length; i++) {
|
|
apply$1(addedNodes[i], connect);
|
|
}
|
|
|
|
for (var i$1 = 0; i$1 < removedNodes.length; i$1++) {
|
|
apply$1(removedNodes[i$1], disconnect);
|
|
}
|
|
}
|
|
|
|
function applyAttributeMutation(ref) {
|
|
var target = ref.target;
|
|
var attributeName = ref.attributeName;
|
|
|
|
|
|
var name = getComponentName(attributeName);
|
|
|
|
if (!name || !(name in UIkit)) {
|
|
return;
|
|
}
|
|
|
|
if (hasAttr(target, attributeName)) {
|
|
UIkit[name](target);
|
|
return;
|
|
}
|
|
|
|
var component = UIkit.getComponent(target, name);
|
|
|
|
if (component) {
|
|
component.$destroy();
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
var Class = {
|
|
|
|
connected: function() {
|
|
!hasClass(this.$el, this.$name) && addClass(this.$el, this.$name);
|
|
}
|
|
|
|
};
|
|
|
|
var Togglable = {
|
|
|
|
props: {
|
|
cls: Boolean,
|
|
animation: 'list',
|
|
duration: Number,
|
|
origin: String,
|
|
transition: String
|
|
},
|
|
|
|
data: {
|
|
cls: false,
|
|
animation: [false],
|
|
duration: 200,
|
|
origin: false,
|
|
transition: 'linear',
|
|
clsEnter: 'uk-togglabe-enter',
|
|
clsLeave: 'uk-togglabe-leave',
|
|
|
|
initProps: {
|
|
overflow: '',
|
|
height: '',
|
|
paddingTop: '',
|
|
paddingBottom: '',
|
|
marginTop: '',
|
|
marginBottom: ''
|
|
},
|
|
|
|
hideProps: {
|
|
overflow: 'hidden',
|
|
height: 0,
|
|
paddingTop: 0,
|
|
paddingBottom: 0,
|
|
marginTop: 0,
|
|
marginBottom: 0
|
|
}
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
hasAnimation: function(ref) {
|
|
var animation = ref.animation;
|
|
|
|
return !!animation[0];
|
|
},
|
|
|
|
hasTransition: function(ref) {
|
|
var animation = ref.animation;
|
|
|
|
return this.hasAnimation && animation[0] === true;
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
toggleElement: function(targets, toggle, animate) {
|
|
var this$1 = this;
|
|
|
|
return new Promise$1(function (resolve) { return Promise$1.all(toNodes(targets).map(function (el) {
|
|
|
|
var show = isBoolean(toggle) ? toggle : !this$1.isToggled(el);
|
|
|
|
if (!trigger(el, ("before" + (show ? 'show' : 'hide')), [this$1])) {
|
|
return Promise$1.reject();
|
|
}
|
|
|
|
var promise = (
|
|
isFunction(animate)
|
|
? animate
|
|
: animate === false || !this$1.hasAnimation
|
|
? this$1._toggle
|
|
: this$1.hasTransition
|
|
? toggleHeight(this$1)
|
|
: toggleAnimation(this$1)
|
|
)(el, show);
|
|
|
|
var cls = show ? this$1.clsEnter : this$1.clsLeave;
|
|
|
|
addClass(el, cls);
|
|
|
|
trigger(el, show ? 'show' : 'hide', [this$1]);
|
|
|
|
var done = function () {
|
|
removeClass(el, cls);
|
|
trigger(el, show ? 'shown' : 'hidden', [this$1]);
|
|
this$1.$update(el);
|
|
};
|
|
|
|
return promise ? promise.then(done, function () {
|
|
removeClass(el, cls);
|
|
return Promise$1.reject();
|
|
}) : done();
|
|
|
|
})).then(resolve, noop); }
|
|
);
|
|
},
|
|
|
|
isToggled: function(el) {
|
|
if ( el === void 0 ) el = this.$el;
|
|
|
|
return hasClass(el, this.clsEnter)
|
|
? true
|
|
: hasClass(el, this.clsLeave)
|
|
? false
|
|
: this.cls
|
|
? hasClass(el, this.cls.split(' ')[0])
|
|
: !hasAttr(el, 'hidden');
|
|
},
|
|
|
|
_toggle: function(el, toggled) {
|
|
|
|
if (!el) {
|
|
return;
|
|
}
|
|
|
|
toggled = Boolean(toggled);
|
|
|
|
var changed;
|
|
if (this.cls) {
|
|
changed = includes(this.cls, ' ') || toggled !== hasClass(el, this.cls);
|
|
changed && toggleClass(el, this.cls, includes(this.cls, ' ') ? undefined : toggled);
|
|
} else {
|
|
changed = toggled === el.hidden;
|
|
changed && (el.hidden = !toggled);
|
|
}
|
|
|
|
$$('[autofocus]', el).some(function (el) { return isVisible(el) ? el.focus() || true : el.blur(); });
|
|
|
|
if (changed) {
|
|
trigger(el, 'toggled', [toggled, this]);
|
|
this.$update(el);
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
function toggleHeight(ref) {
|
|
var isToggled = ref.isToggled;
|
|
var duration = ref.duration;
|
|
var initProps = ref.initProps;
|
|
var hideProps = ref.hideProps;
|
|
var transition = ref.transition;
|
|
var _toggle = ref._toggle;
|
|
|
|
return function (el, show) {
|
|
|
|
var inProgress = Transition.inProgress(el);
|
|
var inner = el.hasChildNodes ? toFloat(css(el.firstElementChild, 'marginTop')) + toFloat(css(el.lastElementChild, 'marginBottom')) : 0;
|
|
var currentHeight = isVisible(el) ? height(el) + (inProgress ? 0 : inner) : 0;
|
|
|
|
Transition.cancel(el);
|
|
|
|
if (!isToggled(el)) {
|
|
_toggle(el, true);
|
|
}
|
|
|
|
height(el, '');
|
|
|
|
// Update child components first
|
|
fastdom.flush();
|
|
|
|
var endHeight = height(el) + (inProgress ? 0 : inner);
|
|
height(el, currentHeight);
|
|
|
|
return (show
|
|
? Transition.start(el, assign({}, initProps, {overflow: 'hidden', height: endHeight}), Math.round(duration * (1 - currentHeight / endHeight)), transition)
|
|
: Transition.start(el, hideProps, Math.round(duration * (currentHeight / endHeight)), transition).then(function () { return _toggle(el, false); })
|
|
).then(function () { return css(el, initProps); });
|
|
|
|
};
|
|
}
|
|
|
|
function toggleAnimation(cmp) {
|
|
return function (el, show) {
|
|
|
|
Animation.cancel(el);
|
|
|
|
var animation = cmp.animation;
|
|
var duration = cmp.duration;
|
|
var _toggle = cmp._toggle;
|
|
|
|
if (show) {
|
|
_toggle(el, true);
|
|
return Animation.in(el, animation[0], duration, cmp.origin);
|
|
}
|
|
|
|
return Animation.out(el, animation[1] || animation[0], duration, cmp.origin).then(function () { return _toggle(el, false); });
|
|
};
|
|
}
|
|
|
|
var Accordion = {
|
|
|
|
mixins: [Class, Togglable],
|
|
|
|
props: {
|
|
targets: String,
|
|
active: null,
|
|
collapsible: Boolean,
|
|
multiple: Boolean,
|
|
toggle: String,
|
|
content: String,
|
|
transition: String,
|
|
offset: Number
|
|
},
|
|
|
|
data: {
|
|
targets: '> *',
|
|
active: false,
|
|
animation: [true],
|
|
collapsible: true,
|
|
multiple: false,
|
|
clsOpen: 'uk-open',
|
|
toggle: '> .uk-accordion-title',
|
|
content: '> .uk-accordion-content',
|
|
transition: 'ease',
|
|
offset: 0
|
|
},
|
|
|
|
computed: {
|
|
|
|
items: {
|
|
|
|
get: function(ref, $el) {
|
|
var targets = ref.targets;
|
|
|
|
return $$(targets, $el);
|
|
},
|
|
|
|
watch: function(items, prev) {
|
|
var this$1 = this;
|
|
|
|
|
|
items.forEach(function (el) { return hide($(this$1.content, el), !hasClass(el, this$1.clsOpen)); });
|
|
|
|
if (prev || hasClass(items, this.clsOpen)) {
|
|
return;
|
|
}
|
|
|
|
var active = this.active !== false && items[Number(this.active)]
|
|
|| !this.collapsible && items[0];
|
|
|
|
if (active) {
|
|
this.toggle(active, false);
|
|
}
|
|
|
|
},
|
|
|
|
immediate: true
|
|
|
|
},
|
|
|
|
toggles: function(ref) {
|
|
var toggle = ref.toggle;
|
|
|
|
return this.items.map(function (item) { return $(toggle, item); });
|
|
}
|
|
|
|
},
|
|
|
|
events: [
|
|
|
|
{
|
|
|
|
name: 'click',
|
|
|
|
delegate: function() {
|
|
return ((this.targets) + " " + (this.$props.toggle));
|
|
},
|
|
|
|
handler: function(e) {
|
|
e.preventDefault();
|
|
this.toggle(index(this.toggles, e.current));
|
|
}
|
|
|
|
}
|
|
|
|
],
|
|
|
|
methods: {
|
|
|
|
toggle: function(item, animate) {
|
|
var this$1 = this;
|
|
|
|
|
|
var items = [this.items[getIndex(item, this.items)]];
|
|
var activeItems = filter$1(this.items, ("." + (this.clsOpen)));
|
|
|
|
if (!this.multiple && !includes(activeItems, items[0])) {
|
|
items = items.concat(activeItems);
|
|
}
|
|
|
|
if (!this.collapsible && activeItems.length < 2 && !filter$1(items, (":not(." + (this.clsOpen) + ")")).length) {
|
|
return;
|
|
}
|
|
|
|
items.forEach(function (el) { return this$1.toggleElement(el, !hasClass(el, this$1.clsOpen), function (el, show) {
|
|
|
|
toggleClass(el, this$1.clsOpen, show);
|
|
attr($(this$1.$props.toggle, el), 'aria-expanded', show);
|
|
|
|
var content = $(("" + (el._wrapper ? '> * ' : '') + (this$1.content)), el);
|
|
|
|
if (animate === false || !this$1.hasTransition) {
|
|
hide(content, !show);
|
|
return;
|
|
}
|
|
|
|
if (!el._wrapper) {
|
|
el._wrapper = wrapAll(content, ("<div" + (show ? ' hidden' : '') + ">"));
|
|
}
|
|
|
|
hide(content, false);
|
|
return toggleHeight(this$1)(el._wrapper, show).then(function () {
|
|
hide(content, !show);
|
|
delete el._wrapper;
|
|
unwrap(content);
|
|
|
|
if (show) {
|
|
var toggle = $(this$1.$props.toggle, el);
|
|
if (!isInView(toggle)) {
|
|
scrollIntoView(toggle, {offset: this$1.offset});
|
|
}
|
|
}
|
|
});
|
|
}); });
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
function hide(el, hide) {
|
|
el && (el.hidden = hide);
|
|
}
|
|
|
|
var alert = {
|
|
|
|
mixins: [Class, Togglable],
|
|
|
|
args: 'animation',
|
|
|
|
props: {
|
|
close: String
|
|
},
|
|
|
|
data: {
|
|
animation: [true],
|
|
selClose: '.uk-alert-close',
|
|
duration: 150,
|
|
hideProps: assign({opacity: 0}, Togglable.data.hideProps)
|
|
},
|
|
|
|
events: [
|
|
|
|
{
|
|
|
|
name: 'click',
|
|
|
|
delegate: function() {
|
|
return this.selClose;
|
|
},
|
|
|
|
handler: function(e) {
|
|
e.preventDefault();
|
|
this.close();
|
|
}
|
|
|
|
}
|
|
|
|
],
|
|
|
|
methods: {
|
|
|
|
close: function() {
|
|
var this$1 = this;
|
|
|
|
this.toggleElement(this.$el).then(function () { return this$1.$destroy(true); });
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
var Video = {
|
|
|
|
args: 'autoplay',
|
|
|
|
props: {
|
|
automute: Boolean,
|
|
autoplay: Boolean
|
|
},
|
|
|
|
data: {
|
|
automute: false,
|
|
autoplay: true
|
|
},
|
|
|
|
computed: {
|
|
|
|
inView: function(ref) {
|
|
var autoplay = ref.autoplay;
|
|
|
|
return autoplay === 'inview';
|
|
}
|
|
|
|
},
|
|
|
|
connected: function() {
|
|
|
|
if (this.inView && !hasAttr(this.$el, 'preload')) {
|
|
this.$el.preload = 'none';
|
|
}
|
|
|
|
if (this.automute) {
|
|
mute(this.$el);
|
|
}
|
|
|
|
},
|
|
|
|
update: {
|
|
|
|
read: function() {
|
|
return {
|
|
visible: isVisible(this.$el) && css(this.$el, 'visibility') !== 'hidden',
|
|
inView: this.inView && isInView(this.$el)
|
|
};
|
|
},
|
|
|
|
write: function(ref) {
|
|
var visible = ref.visible;
|
|
var inView = ref.inView;
|
|
|
|
|
|
if (!visible || this.inView && !inView) {
|
|
pause(this.$el);
|
|
} else if (this.autoplay === true || this.inView && inView) {
|
|
play(this.$el);
|
|
}
|
|
|
|
},
|
|
|
|
events: ['resize', 'scroll']
|
|
|
|
}
|
|
|
|
};
|
|
|
|
var cover = {
|
|
|
|
mixins: [Class, Video],
|
|
|
|
props: {
|
|
width: Number,
|
|
height: Number
|
|
},
|
|
|
|
data: {
|
|
automute: true
|
|
},
|
|
|
|
update: {
|
|
|
|
read: function() {
|
|
|
|
var el = this.$el;
|
|
var ref = getPositionedParent(el) || parent(el);
|
|
var height = ref.offsetHeight;
|
|
var width = ref.offsetWidth;
|
|
var dim = Dimensions.cover(
|
|
{
|
|
width: this.width || el.naturalWidth || el.videoWidth || el.clientWidth,
|
|
height: this.height || el.naturalHeight || el.videoHeight || el.clientHeight
|
|
},
|
|
{
|
|
width: width + (width % 2 ? 1 : 0),
|
|
height: height + (height % 2 ? 1 : 0)
|
|
}
|
|
);
|
|
|
|
if (!dim.width || !dim.height) {
|
|
return false;
|
|
}
|
|
|
|
return dim;
|
|
},
|
|
|
|
write: function(ref) {
|
|
var height = ref.height;
|
|
var width = ref.width;
|
|
|
|
css(this.$el, {height: height, width: width});
|
|
},
|
|
|
|
events: ['resize']
|
|
|
|
}
|
|
|
|
};
|
|
|
|
function getPositionedParent(el) {
|
|
while ((el = parent(el))) {
|
|
if (css(el, 'position') !== 'static') {
|
|
return el;
|
|
}
|
|
}
|
|
}
|
|
|
|
var Position = {
|
|
|
|
props: {
|
|
pos: String,
|
|
offset: null,
|
|
flip: Boolean,
|
|
clsPos: String
|
|
},
|
|
|
|
data: {
|
|
pos: ("bottom-" + (!isRtl ? 'left' : 'right')),
|
|
flip: true,
|
|
offset: false,
|
|
clsPos: ''
|
|
},
|
|
|
|
computed: {
|
|
|
|
pos: function(ref) {
|
|
var pos = ref.pos;
|
|
|
|
return (pos + (!includes(pos, '-') ? '-center' : '')).split('-');
|
|
},
|
|
|
|
dir: function() {
|
|
return this.pos[0];
|
|
},
|
|
|
|
align: function() {
|
|
return this.pos[1];
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
positionAt: function(element, target, boundary) {
|
|
|
|
removeClasses(element, ((this.clsPos) + "-(top|bottom|left|right)(-[a-z]+)?"));
|
|
|
|
var ref = this;
|
|
var offset$1 = ref.offset;
|
|
var axis = this.getAxis();
|
|
|
|
if (!isNumeric(offset$1)) {
|
|
var node = $(offset$1);
|
|
offset$1 = node
|
|
? offset(node)[axis === 'x' ? 'left' : 'top'] - offset(target)[axis === 'x' ? 'right' : 'bottom']
|
|
: 0;
|
|
}
|
|
|
|
var ref$1 = 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' ? -offset$1 : offset$1)) : (" " + (this.dir === 'top' ? -offset$1 : offset$1)),
|
|
null,
|
|
this.flip,
|
|
boundary
|
|
).target;
|
|
var x = ref$1.x;
|
|
var y = ref$1.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() {
|
|
return this.dir === 'top' || this.dir === 'bottom' ? 'y' : 'x';
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
var active$1;
|
|
|
|
var drop = {
|
|
|
|
mixins: [Position, Togglable],
|
|
|
|
args: 'pos',
|
|
|
|
props: {
|
|
mode: 'list',
|
|
toggle: Boolean,
|
|
boundary: Boolean,
|
|
boundaryAlign: Boolean,
|
|
delayShow: Number,
|
|
delayHide: Number,
|
|
clsDrop: String
|
|
},
|
|
|
|
data: {
|
|
mode: ['click', 'hover'],
|
|
toggle: '- *',
|
|
boundary: true,
|
|
boundaryAlign: false,
|
|
delayShow: 0,
|
|
delayHide: 800,
|
|
clsDrop: false,
|
|
animation: ['uk-animation-fade'],
|
|
cls: 'uk-open'
|
|
},
|
|
|
|
computed: {
|
|
|
|
boundary: function(ref, $el) {
|
|
var boundary = ref.boundary;
|
|
|
|
return boundary === true ? window : query(boundary, $el);
|
|
},
|
|
|
|
clsDrop: function(ref) {
|
|
var clsDrop = ref.clsDrop;
|
|
|
|
return clsDrop || ("uk-" + (this.$options.name));
|
|
},
|
|
|
|
clsPos: function() {
|
|
return this.clsDrop;
|
|
}
|
|
|
|
},
|
|
|
|
created: function() {
|
|
this.tracker = new MouseTracker();
|
|
},
|
|
|
|
connected: function() {
|
|
|
|
addClass(this.$el, this.clsDrop);
|
|
|
|
var ref = this.$props;
|
|
var toggle = ref.toggle;
|
|
this.toggle = toggle && this.$create('toggle', query(toggle, this.$el), {
|
|
target: this.$el,
|
|
mode: this.mode
|
|
});
|
|
|
|
},
|
|
|
|
disconnected: function() {
|
|
if (this.isActive()) {
|
|
active$1 = null;
|
|
}
|
|
},
|
|
|
|
events: [
|
|
|
|
{
|
|
|
|
name: 'click',
|
|
|
|
delegate: function() {
|
|
return ("." + (this.clsDrop) + "-close");
|
|
},
|
|
|
|
handler: function(e) {
|
|
e.preventDefault();
|
|
this.hide(false);
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'click',
|
|
|
|
delegate: function() {
|
|
return 'a[href^="#"]';
|
|
},
|
|
|
|
handler: function(ref) {
|
|
var defaultPrevented = ref.defaultPrevented;
|
|
var hash = ref.current.hash;
|
|
|
|
if (!defaultPrevented && hash && !within(hash, this.$el)) {
|
|
this.hide(false);
|
|
}
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'beforescroll',
|
|
|
|
handler: function() {
|
|
this.hide(false);
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'toggle',
|
|
|
|
self: true,
|
|
|
|
handler: function(e, toggle) {
|
|
|
|
e.preventDefault();
|
|
|
|
if (this.isToggled()) {
|
|
this.hide(false);
|
|
} else {
|
|
this.show(toggle, false);
|
|
}
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'toggleshow',
|
|
|
|
self: true,
|
|
|
|
handler: function(e, toggle) {
|
|
e.preventDefault();
|
|
this.show(toggle);
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'togglehide',
|
|
|
|
self: true,
|
|
|
|
handler: function(e) {
|
|
e.preventDefault();
|
|
this.hide();
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: (pointerEnter + " focusin"),
|
|
|
|
filter: function() {
|
|
return includes(this.mode, 'hover');
|
|
},
|
|
|
|
handler: function(e) {
|
|
if (!isTouch(e)) {
|
|
this.clearTimers();
|
|
}
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: (pointerLeave + " focusout"),
|
|
|
|
filter: function() {
|
|
return includes(this.mode, 'hover');
|
|
},
|
|
|
|
handler: function(e) {
|
|
if (!isTouch(e) && e.relatedTarget) {
|
|
this.hide();
|
|
}
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'toggled',
|
|
|
|
self: true,
|
|
|
|
handler: function(e, toggled) {
|
|
|
|
if (!toggled) {
|
|
return;
|
|
}
|
|
|
|
this.clearTimers();
|
|
this.position();
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'show',
|
|
|
|
self: true,
|
|
|
|
handler: function() {
|
|
var this$1 = this;
|
|
|
|
|
|
active$1 = this;
|
|
|
|
this.tracker.init();
|
|
|
|
once(this.$el, 'hide', on(document, pointerDown, function (ref) {
|
|
var target = ref.target;
|
|
|
|
return !within(target, this$1.$el) && once(document, (pointerUp + " " + pointerCancel + " scroll"), function (ref) {
|
|
var defaultPrevented = ref.defaultPrevented;
|
|
var type = ref.type;
|
|
var newTarget = ref.target;
|
|
|
|
if (!defaultPrevented && type === pointerUp && target === newTarget && !(this$1.toggle && within(target, this$1.toggle.$el))) {
|
|
this$1.hide(false);
|
|
}
|
|
}, true);
|
|
}
|
|
), {self: true});
|
|
|
|
once(this.$el, 'hide', on(document, 'keydown', function (e) {
|
|
if (e.keyCode === 27) {
|
|
this$1.hide(false);
|
|
}
|
|
}), {self: true});
|
|
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'beforehide',
|
|
|
|
self: true,
|
|
|
|
handler: function() {
|
|
this.clearTimers();
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'hide',
|
|
|
|
handler: function(ref) {
|
|
var target = ref.target;
|
|
|
|
|
|
if (this.$el !== target) {
|
|
active$1 = active$1 === null && within(target, this.$el) && this.isToggled() ? this : active$1;
|
|
return;
|
|
}
|
|
|
|
active$1 = this.isActive() ? null : active$1;
|
|
this.tracker.cancel();
|
|
}
|
|
|
|
}
|
|
|
|
],
|
|
|
|
update: {
|
|
|
|
write: function() {
|
|
|
|
if (this.isToggled() && !hasClass(this.$el, this.clsEnter)) {
|
|
this.position();
|
|
}
|
|
|
|
},
|
|
|
|
events: ['resize']
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
show: function(toggle, delay) {
|
|
var this$1 = this;
|
|
if ( toggle === void 0 ) toggle = this.toggle;
|
|
if ( delay === void 0 ) delay = true;
|
|
|
|
|
|
if (this.isToggled() && toggle && this.toggle && toggle.$el !== this.toggle.$el) {
|
|
this.hide(false);
|
|
}
|
|
|
|
this.toggle = toggle;
|
|
|
|
this.clearTimers();
|
|
|
|
if (this.isActive()) {
|
|
return;
|
|
}
|
|
|
|
if (active$1) {
|
|
|
|
if (delay && active$1.isDelaying) {
|
|
this.showTimer = setTimeout(this.show, 10);
|
|
return;
|
|
}
|
|
|
|
var prev;
|
|
while (active$1 && prev !== active$1 && !within(this.$el, active$1.$el)) {
|
|
prev = active$1;
|
|
active$1.hide(false);
|
|
}
|
|
|
|
}
|
|
|
|
this.showTimer = setTimeout(function () { return !this$1.isToggled() && this$1.toggleElement(this$1.$el, true); }, delay && this.delayShow || 0);
|
|
|
|
},
|
|
|
|
hide: function(delay) {
|
|
var this$1 = this;
|
|
if ( delay === void 0 ) delay = true;
|
|
|
|
|
|
var hide = function () { return this$1.toggleElement(this$1.$el, false, false); };
|
|
|
|
this.clearTimers();
|
|
|
|
this.isDelaying = getPositionedElements(this.$el).some(function (el) { return this$1.tracker.movesTo(el); });
|
|
|
|
if (delay && this.isDelaying) {
|
|
this.hideTimer = setTimeout(this.hide, 50);
|
|
} else if (delay && this.delayHide) {
|
|
this.hideTimer = setTimeout(hide, this.delayHide);
|
|
} else {
|
|
hide();
|
|
}
|
|
},
|
|
|
|
clearTimers: function() {
|
|
clearTimeout(this.showTimer);
|
|
clearTimeout(this.hideTimer);
|
|
this.showTimer = null;
|
|
this.hideTimer = null;
|
|
this.isDelaying = false;
|
|
},
|
|
|
|
isActive: function() {
|
|
return active$1 === this;
|
|
},
|
|
|
|
position: function() {
|
|
|
|
removeClass(this.$el, ((this.clsDrop) + "-stack"));
|
|
toggleClass(this.$el, ((this.clsDrop) + "-boundary"), this.boundaryAlign);
|
|
|
|
var boundary = offset(this.boundary);
|
|
var 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.boundary && this.$el.offsetWidth > Math.max(boundary.right - alignTo.left, alignTo.right - boundary.left)) {
|
|
addClass(this.$el, ((this.clsDrop) + "-stack"));
|
|
}
|
|
|
|
this.positionAt(this.$el, this.boundaryAlign ? this.boundary : this.toggle.$el, this.boundary);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
function getPositionedElements(el) {
|
|
var result = [];
|
|
apply$1(el, function (el) { return css(el, 'position') !== 'static' && result.push(el); });
|
|
return result;
|
|
}
|
|
|
|
var formCustom = {
|
|
|
|
mixins: [Class],
|
|
|
|
args: 'target',
|
|
|
|
props: {
|
|
target: Boolean
|
|
},
|
|
|
|
data: {
|
|
target: false
|
|
},
|
|
|
|
computed: {
|
|
|
|
input: function(_, $el) {
|
|
return $(selInput, $el);
|
|
},
|
|
|
|
state: function() {
|
|
return this.input.nextElementSibling;
|
|
},
|
|
|
|
target: function(ref, $el) {
|
|
var target = ref.target;
|
|
|
|
return target && (target === true
|
|
&& parent(this.input) === $el
|
|
&& this.input.nextElementSibling
|
|
|| query(target, $el));
|
|
}
|
|
|
|
},
|
|
|
|
update: function() {
|
|
|
|
var ref = this;
|
|
var target = ref.target;
|
|
var input = ref.input;
|
|
|
|
if (!target) {
|
|
return;
|
|
}
|
|
|
|
var option;
|
|
var prop = isInput(target) ? 'value' : 'textContent';
|
|
var prev = target[prop];
|
|
var value = input.files && input.files[0]
|
|
? input.files[0].name
|
|
: matches(input, 'select') && (option = $$('option', input).filter(function (el) { return el.selected; })[0]) // eslint-disable-line prefer-destructuring
|
|
? option.textContent
|
|
: input.value;
|
|
|
|
if (prev !== value) {
|
|
target[prop] = value;
|
|
}
|
|
|
|
},
|
|
|
|
events: [
|
|
|
|
{
|
|
name: 'change',
|
|
|
|
handler: function() {
|
|
this.$update();
|
|
}
|
|
},
|
|
|
|
{
|
|
name: 'reset',
|
|
|
|
el: function() {
|
|
return closest(this.$el, 'form');
|
|
},
|
|
|
|
handler: function() {
|
|
this.$update();
|
|
}
|
|
}
|
|
|
|
]
|
|
|
|
};
|
|
|
|
// Deprecated
|
|
var gif = {
|
|
|
|
update: {
|
|
|
|
read: function(data) {
|
|
|
|
var inview = isInView(this.$el);
|
|
|
|
if (!inview || data.isInView === inview) {
|
|
return false;
|
|
}
|
|
|
|
data.isInView = inview;
|
|
},
|
|
|
|
write: function() {
|
|
this.$el.src = '' + this.$el.src; // force self-assign
|
|
},
|
|
|
|
events: ['scroll', 'resize']
|
|
}
|
|
|
|
};
|
|
|
|
var Margin = {
|
|
|
|
props: {
|
|
margin: String,
|
|
firstColumn: Boolean
|
|
},
|
|
|
|
data: {
|
|
margin: 'uk-margin-small-top',
|
|
firstColumn: 'uk-first-column'
|
|
},
|
|
|
|
update: {
|
|
|
|
read: function() {
|
|
|
|
var rows = getRows(this.$el.children);
|
|
|
|
return {
|
|
rows: rows,
|
|
columns: getColumns(rows)
|
|
};
|
|
},
|
|
|
|
write: function(ref) {
|
|
var columns = ref.columns;
|
|
var rows = ref.rows;
|
|
|
|
for (var i = 0; i < rows.length; i++) {
|
|
for (var j = 0; j < rows[i].length; j++) {
|
|
toggleClass(rows[i][j], this.margin, i !== 0);
|
|
toggleClass(rows[i][j], this.firstColumn, !!~columns[0].indexOf(rows[i][j]));
|
|
}
|
|
}
|
|
},
|
|
|
|
events: ['resize']
|
|
|
|
}
|
|
|
|
};
|
|
|
|
function getRows(items) {
|
|
return sortBy(items, 'top', 'bottom');
|
|
}
|
|
|
|
function getColumns(rows) {
|
|
|
|
var columns = [];
|
|
|
|
for (var i = 0; i < rows.length; i++) {
|
|
var sorted = sortBy(rows[i], 'left', 'right');
|
|
for (var j = 0; j < sorted.length; j++) {
|
|
columns[j] = !columns[j] ? sorted[j] : columns[j].concat(sorted[j]);
|
|
}
|
|
}
|
|
|
|
return isRtl
|
|
? columns.reverse()
|
|
: columns;
|
|
}
|
|
|
|
function sortBy(items, startProp, endProp) {
|
|
|
|
var sorted = [[]];
|
|
|
|
for (var i = 0; i < items.length; i++) {
|
|
|
|
var el = items[i];
|
|
|
|
if (!isVisible(el)) {
|
|
continue;
|
|
}
|
|
|
|
var dim = getOffset(el);
|
|
|
|
for (var j = sorted.length - 1; j >= 0; j--) {
|
|
|
|
var current = sorted[j];
|
|
|
|
if (!current[0]) {
|
|
current.push(el);
|
|
break;
|
|
}
|
|
|
|
var startDim = (void 0);
|
|
if (current[0].offsetParent === el.offsetParent) {
|
|
startDim = getOffset(current[0]);
|
|
} else {
|
|
dim = getOffset(el, true);
|
|
startDim = getOffset(current[0], true);
|
|
}
|
|
|
|
if (dim[startProp] >= startDim[endProp] - 1 && dim[startProp] !== startDim[startProp]) {
|
|
sorted.push([el]);
|
|
break;
|
|
}
|
|
|
|
if (dim[endProp] - 1 > startDim[startProp] || dim[startProp] === startDim[startProp]) {
|
|
current.push(el);
|
|
break;
|
|
}
|
|
|
|
if (j === 0) {
|
|
sorted.unshift([el]);
|
|
break;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return sorted;
|
|
}
|
|
|
|
function getOffset(element, offset) {
|
|
var assign;
|
|
|
|
if ( offset === void 0 ) offset = false;
|
|
|
|
var offsetTop = element.offsetTop;
|
|
var offsetLeft = element.offsetLeft;
|
|
var offsetHeight = element.offsetHeight;
|
|
var offsetWidth = element.offsetWidth;
|
|
|
|
if (offset) {
|
|
(assign = offsetPosition(element), offsetTop = assign[0], offsetLeft = assign[1]);
|
|
}
|
|
|
|
return {
|
|
top: offsetTop,
|
|
left: offsetLeft,
|
|
bottom: offsetTop + offsetHeight,
|
|
right: offsetLeft + offsetWidth
|
|
};
|
|
}
|
|
|
|
var grid = {
|
|
|
|
extends: Margin,
|
|
|
|
mixins: [Class],
|
|
|
|
name: 'grid',
|
|
|
|
props: {
|
|
masonry: Boolean,
|
|
parallax: Number
|
|
},
|
|
|
|
data: {
|
|
margin: 'uk-grid-margin',
|
|
clsStack: 'uk-grid-stack',
|
|
masonry: false,
|
|
parallax: 0
|
|
},
|
|
|
|
connected: function() {
|
|
this.masonry && addClass(this.$el, 'uk-flex-top uk-flex-wrap-top');
|
|
},
|
|
|
|
update: [
|
|
|
|
{
|
|
|
|
write: function(ref) {
|
|
var columns = ref.columns;
|
|
|
|
toggleClass(this.$el, this.clsStack, columns.length < 2);
|
|
},
|
|
|
|
events: ['resize']
|
|
|
|
},
|
|
|
|
{
|
|
|
|
read: function(data) {
|
|
|
|
var columns = data.columns;
|
|
var rows = data.rows;
|
|
|
|
// Filter component makes elements positioned absolute
|
|
if (!columns.length || !this.masonry && !this.parallax || positionedAbsolute(this.$el)) {
|
|
data.translates = false;
|
|
return false;
|
|
}
|
|
|
|
var translates = false;
|
|
|
|
var nodes = children(this.$el);
|
|
var columnHeights = getColumnHeights(columns);
|
|
var margin = getMarginTop(nodes, this.margin) * (rows.length - 1);
|
|
var elHeight = Math.max.apply(Math, columnHeights) + margin;
|
|
|
|
if (this.masonry) {
|
|
columns = columns.map(function (column) { return sortBy$1(column, 'offsetTop'); });
|
|
translates = getTranslates(rows, columns);
|
|
}
|
|
|
|
var padding = Math.abs(this.parallax);
|
|
if (padding) {
|
|
padding = columnHeights.reduce(function (newPadding, hgt, i) { return Math.max(newPadding, hgt + margin + (i % 2 ? padding : padding / 8) - elHeight); }
|
|
, 0);
|
|
}
|
|
|
|
return {padding: padding, columns: columns, translates: translates, height: translates ? elHeight : ''};
|
|
|
|
},
|
|
|
|
write: function(ref) {
|
|
var height = ref.height;
|
|
var padding = ref.padding;
|
|
|
|
|
|
css(this.$el, 'paddingBottom', padding || '');
|
|
height !== false && css(this.$el, 'height', height);
|
|
|
|
},
|
|
|
|
events: ['resize']
|
|
|
|
},
|
|
|
|
{
|
|
|
|
read: function(ref) {
|
|
var height$1 = ref.height;
|
|
|
|
|
|
if (positionedAbsolute(this.$el)) {
|
|
return false;
|
|
}
|
|
|
|
return {
|
|
scrolled: this.parallax
|
|
? scrolledOver(this.$el, height$1 ? height$1 - height(this.$el) : 0) * Math.abs(this.parallax)
|
|
: false
|
|
};
|
|
},
|
|
|
|
write: function(ref) {
|
|
var columns = ref.columns;
|
|
var scrolled = ref.scrolled;
|
|
var translates = ref.translates;
|
|
|
|
|
|
if (scrolled === false && !translates) {
|
|
return;
|
|
}
|
|
|
|
columns.forEach(function (column, i) { return column.forEach(function (el, j) { return css(el, 'transform', !scrolled && !translates ? '' : ("translateY(" + ((translates && -translates[i][j]) + (scrolled ? i % 2 ? scrolled : scrolled / 8 : 0)) + "px)")); }
|
|
); }
|
|
);
|
|
|
|
},
|
|
|
|
events: ['scroll', 'resize']
|
|
|
|
}
|
|
|
|
]
|
|
|
|
};
|
|
|
|
function positionedAbsolute(el) {
|
|
return children(el).some(function (el) { return css(el, 'position') === 'absolute'; });
|
|
}
|
|
|
|
function getTranslates(rows, columns) {
|
|
|
|
var rowHeights = rows.map(function (row) { return Math.max.apply(Math, row.map(function (el) { return el.offsetHeight; })); }
|
|
);
|
|
|
|
return columns.map(function (elements) {
|
|
var prev = 0;
|
|
return elements.map(function (element, row) { return prev += row
|
|
? rowHeights[row - 1] - elements[row - 1].offsetHeight
|
|
: 0; }
|
|
);
|
|
});
|
|
}
|
|
|
|
function getMarginTop(nodes, cls) {
|
|
|
|
var ref = nodes.filter(function (el) { return hasClass(el, cls); });
|
|
var node = ref[0];
|
|
|
|
return toFloat(node
|
|
? css(node, 'marginTop')
|
|
: css(nodes[0], 'paddingLeft'));
|
|
}
|
|
|
|
function getColumnHeights(columns) {
|
|
return columns.map(function (column) { return column.reduce(function (sum, el) { return sum + el.offsetHeight; }, 0); }
|
|
);
|
|
}
|
|
|
|
// IE 11 fix (min-height on a flex container won't apply to its flex items)
|
|
var FlexBug = isIE ? {
|
|
|
|
props: {
|
|
selMinHeight: String
|
|
},
|
|
|
|
data: {
|
|
selMinHeight: false,
|
|
forceHeight: false
|
|
},
|
|
|
|
computed: {
|
|
|
|
elements: function(ref, $el) {
|
|
var selMinHeight = ref.selMinHeight;
|
|
|
|
return selMinHeight ? $$(selMinHeight, $el) : [$el];
|
|
}
|
|
|
|
},
|
|
|
|
update: [
|
|
|
|
{
|
|
|
|
read: function() {
|
|
css(this.elements, 'height', '');
|
|
},
|
|
|
|
order: -5,
|
|
|
|
events: ['resize']
|
|
|
|
},
|
|
|
|
{
|
|
|
|
write: function() {
|
|
var this$1 = this;
|
|
|
|
this.elements.forEach(function (el) {
|
|
var height = toFloat(css(el, 'minHeight'));
|
|
if (height && (this$1.forceHeight || Math.round(height + boxModelAdjust(el, 'height', 'content-box')) >= el.offsetHeight)) {
|
|
css(el, 'height', height);
|
|
}
|
|
});
|
|
},
|
|
|
|
order: 5,
|
|
|
|
events: ['resize']
|
|
|
|
}
|
|
|
|
]
|
|
|
|
} : {};
|
|
|
|
var heightMatch = {
|
|
|
|
mixins: [FlexBug],
|
|
|
|
args: 'target',
|
|
|
|
props: {
|
|
target: String,
|
|
row: Boolean
|
|
},
|
|
|
|
data: {
|
|
target: '> *',
|
|
row: true,
|
|
forceHeight: true
|
|
},
|
|
|
|
computed: {
|
|
|
|
elements: function(ref, $el) {
|
|
var target = ref.target;
|
|
|
|
return $$(target, $el);
|
|
}
|
|
|
|
},
|
|
|
|
update: {
|
|
|
|
read: function() {
|
|
return {
|
|
rows: (this.row ? getRows(this.elements) : [this.elements]).map(match$1)
|
|
};
|
|
},
|
|
|
|
write: function(ref) {
|
|
var rows = ref.rows;
|
|
|
|
rows.forEach(function (ref) {
|
|
var heights = ref.heights;
|
|
var elements = ref.elements;
|
|
|
|
return elements.forEach(function (el, i) { return css(el, 'minHeight', heights[i]); }
|
|
);
|
|
}
|
|
);
|
|
},
|
|
|
|
events: ['resize']
|
|
|
|
}
|
|
|
|
};
|
|
|
|
function match$1(elements) {
|
|
|
|
if (elements.length < 2) {
|
|
return {heights: [''], elements: elements};
|
|
}
|
|
|
|
var heights = elements.map(getHeight);
|
|
var max = Math.max.apply(Math, heights);
|
|
var hasMinHeight = elements.some(function (el) { return el.style.minHeight; });
|
|
var hasShrunk = elements.some(function (el, i) { return !el.style.minHeight && heights[i] < max; });
|
|
|
|
if (hasMinHeight && hasShrunk) {
|
|
css(elements, 'minHeight', '');
|
|
heights = elements.map(getHeight);
|
|
max = Math.max.apply(Math, heights);
|
|
}
|
|
|
|
heights = elements.map(function (el, i) { return heights[i] === max && toFloat(el.style.minHeight).toFixed(2) !== max.toFixed(2) ? '' : max; }
|
|
);
|
|
|
|
return {heights: heights, elements: elements};
|
|
}
|
|
|
|
function getHeight(element) {
|
|
|
|
var style = false;
|
|
if (!isVisible(element)) {
|
|
style = element.style.display;
|
|
css(element, 'display', 'block', 'important');
|
|
}
|
|
|
|
var height = dimensions(element).height - boxModelAdjust(element, 'height', 'content-box');
|
|
|
|
if (style !== false) {
|
|
css(element, 'display', style);
|
|
}
|
|
|
|
return height;
|
|
}
|
|
|
|
var heightViewport = {
|
|
|
|
mixins: [FlexBug],
|
|
|
|
props: {
|
|
expand: Boolean,
|
|
offsetTop: Boolean,
|
|
offsetBottom: Boolean,
|
|
minHeight: Number
|
|
},
|
|
|
|
data: {
|
|
expand: false,
|
|
offsetTop: false,
|
|
offsetBottom: false,
|
|
minHeight: 0
|
|
},
|
|
|
|
update: {
|
|
|
|
read: function(ref) {
|
|
var prev = ref.minHeight;
|
|
|
|
|
|
if (!isVisible(this.$el)) {
|
|
return false;
|
|
}
|
|
|
|
var minHeight = '';
|
|
var box = boxModelAdjust(this.$el, 'height', 'content-box');
|
|
|
|
if (this.expand) {
|
|
|
|
minHeight = height(window) - (dimensions(document.documentElement).height - dimensions(this.$el).height) - box || '';
|
|
|
|
} else {
|
|
|
|
// on mobile devices (iOS and Android) window.innerHeight !== 100vh
|
|
minHeight = 'calc(100vh';
|
|
|
|
if (this.offsetTop) {
|
|
|
|
var ref$1 = offset(this.$el);
|
|
var top = ref$1.top;
|
|
minHeight += top > 0 && top < height(window) / 2 ? (" - " + top + "px") : '';
|
|
|
|
}
|
|
|
|
if (this.offsetBottom === true) {
|
|
|
|
minHeight += " - " + (dimensions(this.$el.nextElementSibling).height) + "px";
|
|
|
|
} else if (isNumeric(this.offsetBottom)) {
|
|
|
|
minHeight += " - " + (this.offsetBottom) + "vh";
|
|
|
|
} else if (this.offsetBottom && endsWith(this.offsetBottom, 'px')) {
|
|
|
|
minHeight += " - " + (toFloat(this.offsetBottom)) + "px";
|
|
|
|
} else if (isString(this.offsetBottom)) {
|
|
|
|
minHeight += " - " + (dimensions(query(this.offsetBottom, this.$el)).height) + "px";
|
|
|
|
}
|
|
|
|
minHeight += (box ? (" - " + box + "px") : '') + ")";
|
|
|
|
}
|
|
|
|
return {minHeight: minHeight, prev: prev};
|
|
},
|
|
|
|
write: function(ref) {
|
|
var minHeight = ref.minHeight;
|
|
var prev = ref.prev;
|
|
|
|
|
|
css(this.$el, {minHeight: minHeight});
|
|
|
|
if (minHeight !== prev) {
|
|
this.$update(this.$el, 'resize');
|
|
}
|
|
|
|
if (this.minHeight && toFloat(css(this.$el, 'minHeight')) < this.minHeight) {
|
|
css(this.$el, 'minHeight', this.minHeight);
|
|
}
|
|
|
|
},
|
|
|
|
events: ['resize']
|
|
|
|
}
|
|
|
|
};
|
|
|
|
var SVG = {
|
|
|
|
args: 'src',
|
|
|
|
props: {
|
|
id: Boolean,
|
|
icon: String,
|
|
src: String,
|
|
style: String,
|
|
width: Number,
|
|
height: Number,
|
|
ratio: Number,
|
|
class: String,
|
|
strokeAnimation: Boolean,
|
|
focusable: Boolean, // IE 11
|
|
attributes: 'list'
|
|
},
|
|
|
|
data: {
|
|
ratio: 1,
|
|
include: ['style', 'class', 'focusable'],
|
|
class: '',
|
|
strokeAnimation: false
|
|
},
|
|
|
|
beforeConnect: function() {
|
|
this.class += ' uk-svg';
|
|
},
|
|
|
|
connected: function() {
|
|
var this$1 = this;
|
|
var assign;
|
|
|
|
|
|
if (!this.icon && includes(this.src, '#')) {
|
|
(assign = this.src.split('#'), this.src = assign[0], this.icon = assign[1]);
|
|
}
|
|
|
|
this.svg = this.getSvg().then(function (el) {
|
|
|
|
if (this$1._connected) {
|
|
|
|
var svg = insertSVG(el, this$1.$el);
|
|
|
|
if (this$1.svgEl && svg !== this$1.svgEl) {
|
|
remove$1(this$1.svgEl);
|
|
}
|
|
|
|
this$1.applyAttributes(svg, el);
|
|
this$1.$emit();
|
|
return this$1.svgEl = svg;
|
|
}
|
|
|
|
}, noop);
|
|
|
|
},
|
|
|
|
disconnected: function() {
|
|
var this$1 = this;
|
|
|
|
|
|
this.svg.then(function (svg) {
|
|
if (!this$1._connected) {
|
|
|
|
if (isVoidElement(this$1.$el)) {
|
|
this$1.$el.hidden = false;
|
|
}
|
|
|
|
remove$1(svg);
|
|
this$1.svgEl = null;
|
|
}
|
|
});
|
|
|
|
this.svg = null;
|
|
|
|
},
|
|
|
|
update: {
|
|
|
|
read: function() {
|
|
return !!(this.strokeAnimation && this.svgEl && isVisible(this.svgEl));
|
|
},
|
|
|
|
write: function() {
|
|
applyAnimation(this.svgEl);
|
|
},
|
|
|
|
type: ['resize']
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
getSvg: function() {
|
|
var this$1 = this;
|
|
|
|
return loadSVG(this.src).then(function (svg) { return parseSVG(svg, this$1.icon) || Promise$1.reject('SVG not found.'); }
|
|
);
|
|
},
|
|
|
|
applyAttributes: function(el, ref) {
|
|
var this$1 = this;
|
|
|
|
|
|
for (var prop in this.$options.props) {
|
|
if (includes(this.include, prop) && (prop in this)) {
|
|
attr(el, prop, this[prop]);
|
|
}
|
|
}
|
|
|
|
for (var attribute in this.attributes) {
|
|
var ref$1 = this.attributes[attribute].split(':', 2);
|
|
var prop$1 = ref$1[0];
|
|
var value = ref$1[1];
|
|
attr(el, prop$1, value);
|
|
}
|
|
|
|
if (!this.id) {
|
|
removeAttr(el, 'id');
|
|
}
|
|
|
|
var props = ['width', 'height'];
|
|
var dimensions = props.map(function (prop) { return this$1[prop]; });
|
|
|
|
if (!dimensions.some(function (val) { return val; })) {
|
|
dimensions = props.map(function (prop) { return attr(ref, prop); });
|
|
}
|
|
|
|
var viewBox = attr(ref, 'viewBox');
|
|
if (viewBox && !dimensions.some(function (val) { return val; })) {
|
|
dimensions = viewBox.split(' ').slice(2);
|
|
}
|
|
|
|
dimensions.forEach(function (val, i) { return attr(el, props[i], toFloat(val) * this$1.ratio || null); }
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
var loadSVG = memoize(function (src) { return new Promise$1(function (resolve, reject) {
|
|
|
|
if (!src) {
|
|
reject();
|
|
return;
|
|
}
|
|
|
|
if (startsWith(src, 'data:')) {
|
|
resolve(decodeURIComponent(src.split(',')[1]));
|
|
} else {
|
|
|
|
ajax(src).then(
|
|
function (xhr) { return resolve(xhr.response); },
|
|
function () { return reject('SVG not found.'); }
|
|
);
|
|
|
|
}
|
|
}); }
|
|
);
|
|
|
|
function parseSVG(svg, icon) {
|
|
|
|
if (icon && includes(svg, '<symbol')) {
|
|
svg = parseSymbols(svg, icon) || svg;
|
|
}
|
|
|
|
svg = $(svg.substr(svg.indexOf('<svg')));
|
|
return svg && svg.hasChildNodes() && svg;
|
|
}
|
|
|
|
var symbolRe = /<symbol([^]*?id=(['"])(.+?)\2[^]*?<\/)symbol>/g;
|
|
var symbols = {};
|
|
|
|
function parseSymbols(svg, icon) {
|
|
|
|
if (!symbols[svg]) {
|
|
|
|
symbols[svg] = {};
|
|
|
|
symbolRe.lastIndex = 0;
|
|
|
|
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];
|
|
}
|
|
|
|
function applyAnimation(el) {
|
|
|
|
var length = getMaxPathLength(el);
|
|
|
|
if (length) {
|
|
el.style.setProperty('--uk-animation-stroke', length);
|
|
}
|
|
|
|
}
|
|
|
|
function getMaxPathLength(el) {
|
|
return Math.ceil(Math.max.apply(Math, [ 0 ].concat( $$('[stroke]', el).map(function (stroke) {
|
|
try {
|
|
return stroke.getTotalLength();
|
|
} catch (e) {
|
|
return 0;
|
|
}
|
|
}) )));
|
|
}
|
|
|
|
function insertSVG(el, root) {
|
|
|
|
if (isVoidElement(root) || root.tagName === 'CANVAS') {
|
|
|
|
root.hidden = true;
|
|
|
|
var next = root.nextElementSibling;
|
|
return equals(el, next)
|
|
? next
|
|
: after(root, el);
|
|
|
|
}
|
|
|
|
var last = root.lastElementChild;
|
|
return equals(el, last)
|
|
? last
|
|
: append(root, el);
|
|
}
|
|
|
|
function equals(el, other) {
|
|
return isSVG(el) && isSVG(other) && innerHTML(el) === innerHTML(other);
|
|
}
|
|
|
|
function isSVG(el) {
|
|
return el && el.tagName === 'svg';
|
|
}
|
|
|
|
function innerHTML(el) {
|
|
return (el.innerHTML || (new XMLSerializer()).serializeToString(el).replace(/<svg.*?>(.*?)<\/svg>/g, '$1')).replace(/\s/g, '');
|
|
}
|
|
|
|
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 fill=\"none\" stroke=\"#000\" stroke-width=\"1.1\" x1=\"13\" y1=\"1\" x2=\"1\" y2=\"13\"/></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 fill=\"none\" stroke=\"#000\" stroke-width=\"1.4\" x1=\"19\" y1=\"1\" x2=\"1\" y2=\"19\"/></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 x=\"4\" y=\"9\" width=\"11\" height=\"1\"/></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 y=\"3\" width=\"20\" height=\"2\"/><rect y=\"15\" width=\"20\" height=\"2\"/></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 x=\"0\" y=\"19\" width=\"40\" height=\"1\"/></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\"/></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\"/></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\"/><path fill=\"none\" stroke=\"#000\" stroke-width=\"1.1\" d=\"M14,14 L18,18 L14,14 Z\"/></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\"/><line fill=\"none\" stroke=\"#000\" stroke-width=\"1.8\" x1=\"38\" y1=\"39\" x2=\"29\" y2=\"30\"/></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=\"14\" height=\"24\" 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 \"/></svg>";
|
|
|
|
var slidenavNextLarge = "<svg width=\"25\" height=\"40\" 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 \"/></svg>";
|
|
|
|
var slidenavPrevious = "<svg width=\"14\" height=\"24\" 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 \"/></svg>";
|
|
|
|
var slidenavPreviousLarge = "<svg width=\"25\" height=\"40\" 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 \"/></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\"/></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 \"/></svg>";
|
|
|
|
var 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
|
|
};
|
|
|
|
var Icon = {
|
|
|
|
install: install$3,
|
|
|
|
extends: SVG,
|
|
|
|
args: 'icon',
|
|
|
|
props: ['icon'],
|
|
|
|
data: {
|
|
include: ['focusable']
|
|
},
|
|
|
|
isIcon: true,
|
|
|
|
beforeConnect: function() {
|
|
addClass(this.$el, 'uk-icon');
|
|
},
|
|
|
|
methods: {
|
|
|
|
getSvg: function() {
|
|
|
|
var icon = getIcon(this.icon);
|
|
|
|
if (!icon) {
|
|
return Promise$1.reject('Icon not found.');
|
|
}
|
|
|
|
return Promise$1.resolve(icon);
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
var IconComponent = {
|
|
|
|
args: false,
|
|
|
|
extends: Icon,
|
|
|
|
data: function (vm) { return ({
|
|
icon: hyphenate(vm.constructor.options.name)
|
|
}); },
|
|
|
|
beforeConnect: function() {
|
|
addClass(this.$el, this.$name);
|
|
}
|
|
|
|
};
|
|
|
|
var Slidenav = {
|
|
|
|
extends: IconComponent,
|
|
|
|
beforeConnect: function() {
|
|
addClass(this.$el, 'uk-slidenav');
|
|
},
|
|
|
|
computed: {
|
|
|
|
icon: function(ref, $el) {
|
|
var icon = ref.icon;
|
|
|
|
return hasClass($el, 'uk-slidenav-large')
|
|
? (icon + "-large")
|
|
: icon;
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
var Search = {
|
|
|
|
extends: IconComponent,
|
|
|
|
computed: {
|
|
|
|
icon: function(ref, $el) {
|
|
var icon = ref.icon;
|
|
|
|
return hasClass($el, 'uk-search-icon') && parents($el, '.uk-search-large').length
|
|
? 'search-large'
|
|
: parents($el, '.uk-search-navbar').length
|
|
? 'search-navbar'
|
|
: icon;
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
var Close = {
|
|
|
|
extends: IconComponent,
|
|
|
|
computed: {
|
|
|
|
icon: function() {
|
|
return ("close-" + (hasClass(this.$el, 'uk-close-large') ? 'large' : 'icon'));
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
var Spinner = {
|
|
|
|
extends: IconComponent,
|
|
|
|
connected: function() {
|
|
var this$1 = this;
|
|
|
|
this.svg.then(function (svg) { return svg && this$1.ratio !== 1 && css($('circle', svg), 'strokeWidth', 1 / this$1.ratio); });
|
|
}
|
|
|
|
};
|
|
|
|
var parsed = {};
|
|
function install$3(UIkit) {
|
|
UIkit.icon.add = function (name, svg) {
|
|
var obj;
|
|
|
|
|
|
var added = isString(name) ? (( obj = {}, obj[name] = svg, obj )) : name;
|
|
each(added, function (svg, name) {
|
|
icons[name] = svg;
|
|
delete parsed[name];
|
|
});
|
|
|
|
if (UIkit._initialized) {
|
|
apply$1(document.body, function (el) { return each(UIkit.getComponents(el), function (cmp) {
|
|
cmp.$options.isIcon && cmp.icon in added && cmp.$reset();
|
|
}); }
|
|
);
|
|
}
|
|
};
|
|
}
|
|
|
|
function getIcon(icon) {
|
|
|
|
if (!icons[icon]) {
|
|
return null;
|
|
}
|
|
|
|
if (!parsed[icon]) {
|
|
parsed[icon] = $((icons[applyRtl(icon)] || icons[icon]).trim());
|
|
}
|
|
|
|
return parsed[icon].cloneNode(true);
|
|
}
|
|
|
|
function applyRtl(icon) {
|
|
return isRtl ? swap(swap(icon, 'left', 'right'), 'previous', 'next') : icon;
|
|
}
|
|
|
|
var img = {
|
|
|
|
args: 'dataSrc',
|
|
|
|
props: {
|
|
dataSrc: String,
|
|
dataSrcset: Boolean,
|
|
sizes: String,
|
|
width: Number,
|
|
height: Number,
|
|
offsetTop: String,
|
|
offsetLeft: String,
|
|
target: String
|
|
},
|
|
|
|
data: {
|
|
dataSrc: '',
|
|
dataSrcset: false,
|
|
sizes: false,
|
|
width: false,
|
|
height: false,
|
|
offsetTop: '50vh',
|
|
offsetLeft: '50vw',
|
|
target: false
|
|
},
|
|
|
|
computed: {
|
|
|
|
cacheKey: function(ref) {
|
|
var dataSrc = ref.dataSrc;
|
|
|
|
return ((this.$name) + "." + dataSrc);
|
|
},
|
|
|
|
width: function(ref) {
|
|
var width = ref.width;
|
|
var dataWidth = ref.dataWidth;
|
|
|
|
return width || dataWidth;
|
|
},
|
|
|
|
height: function(ref) {
|
|
var height = ref.height;
|
|
var dataHeight = ref.dataHeight;
|
|
|
|
return height || dataHeight;
|
|
},
|
|
|
|
sizes: function(ref) {
|
|
var sizes = ref.sizes;
|
|
var dataSizes = ref.dataSizes;
|
|
|
|
return sizes || dataSizes;
|
|
},
|
|
|
|
isImg: function(_, $el) {
|
|
return isImg($el);
|
|
},
|
|
|
|
target: {
|
|
|
|
get: function(ref) {
|
|
var target = ref.target;
|
|
|
|
return [this.$el ].concat( queryAll(target, this.$el));
|
|
},
|
|
|
|
watch: function() {
|
|
this.observe();
|
|
}
|
|
|
|
},
|
|
|
|
offsetTop: function(ref) {
|
|
var offsetTop = ref.offsetTop;
|
|
|
|
return toPx(offsetTop, 'height');
|
|
},
|
|
|
|
offsetLeft: function(ref) {
|
|
var offsetLeft = ref.offsetLeft;
|
|
|
|
return toPx(offsetLeft, 'width');
|
|
}
|
|
|
|
},
|
|
|
|
connected: function() {
|
|
|
|
if (!window.IntersectionObserver) {
|
|
setSrcAttrs(this.$el, this.dataSrc, this.dataSrcset, this.sizes);
|
|
return;
|
|
}
|
|
|
|
if (storage[this.cacheKey]) {
|
|
setSrcAttrs(this.$el, storage[this.cacheKey], this.dataSrcset, this.sizes);
|
|
} else if (this.isImg && this.width && this.height) {
|
|
setSrcAttrs(this.$el, getPlaceholderImage(this.width, this.height, this.sizes));
|
|
}
|
|
|
|
this.observer = new IntersectionObserver(this.load, {
|
|
rootMargin: ((this.offsetTop) + "px " + (this.offsetLeft) + "px")
|
|
});
|
|
|
|
requestAnimationFrame(this.observe);
|
|
|
|
},
|
|
|
|
disconnected: function() {
|
|
this.observer && this.observer.disconnect();
|
|
},
|
|
|
|
update: {
|
|
|
|
read: function(ref) {
|
|
var this$1 = this;
|
|
var image = ref.image;
|
|
|
|
|
|
if (!this.observer) {
|
|
return false;
|
|
}
|
|
|
|
if (!image && document.readyState === 'complete') {
|
|
this.load(this.observer.takeRecords());
|
|
}
|
|
|
|
if (this.isImg) {
|
|
return false;
|
|
}
|
|
|
|
image && image.then(function (img) { return img && img.currentSrc !== '' && setSrcAttrs(this$1.$el, currentSrc(img)); });
|
|
|
|
},
|
|
|
|
write: function(data) {
|
|
|
|
if (this.dataSrcset && window.devicePixelRatio !== 1) {
|
|
|
|
var bgSize = css(this.$el, 'backgroundSize');
|
|
if (bgSize.match(/^(auto\s?)+$/) || toFloat(bgSize) === data.bgSize) {
|
|
data.bgSize = getSourceSize(this.dataSrcset, this.sizes);
|
|
css(this.$el, 'backgroundSize', ((data.bgSize) + "px"));
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
events: ['resize']
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
load: function(entries) {
|
|
var this$1 = this;
|
|
|
|
|
|
// Old chromium based browsers (UC Browser) did not implement `isIntersecting`
|
|
if (!entries.some(function (entry) { return isUndefined(entry.isIntersecting) || entry.isIntersecting; })) {
|
|
return;
|
|
}
|
|
|
|
this._data.image = getImage(this.dataSrc, this.dataSrcset, this.sizes).then(function (img) {
|
|
|
|
setSrcAttrs(this$1.$el, currentSrc(img), img.srcset, img.sizes);
|
|
storage[this$1.cacheKey] = currentSrc(img);
|
|
return img;
|
|
|
|
}, function (e) { return trigger(this$1.$el, new e.constructor(e.type, e)); });
|
|
|
|
this.observer.disconnect();
|
|
},
|
|
|
|
observe: function() {
|
|
var this$1 = this;
|
|
|
|
if (this._connected && !this._data.image) {
|
|
this.target.forEach(function (el) { return this$1.observer.observe(el); });
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
function setSrcAttrs(el, src, srcset, sizes) {
|
|
|
|
if (isImg(el)) {
|
|
sizes && (el.sizes = sizes);
|
|
srcset && (el.srcset = srcset);
|
|
src && (el.src = src);
|
|
} else if (src) {
|
|
|
|
var change = !includes(el.style.backgroundImage, src);
|
|
if (change) {
|
|
css(el, 'backgroundImage', ("url(" + (escape(src)) + ")"));
|
|
trigger(el, createEvent('load', false));
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
function getPlaceholderImage(width, height, sizes) {
|
|
var assign;
|
|
|
|
|
|
if (sizes) {
|
|
((assign = Dimensions.ratio({width: width, height: height}, 'width', toPx(sizesToPixel(sizes))), width = assign.width, height = assign.height));
|
|
}
|
|
|
|
return ("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"" + width + "\" height=\"" + height + "\"></svg>");
|
|
}
|
|
|
|
var sizesRe = /\s*(.*?)\s*(\w+|calc\(.*?\))\s*(?:,|$)/g;
|
|
function sizesToPixel(sizes) {
|
|
var matches;
|
|
|
|
sizesRe.lastIndex = 0;
|
|
|
|
while ((matches = sizesRe.exec(sizes))) {
|
|
if (!matches[1] || window.matchMedia(matches[1]).matches) {
|
|
matches = evaluateSize(matches[2]);
|
|
break;
|
|
}
|
|
}
|
|
|
|
return matches || '100vw';
|
|
}
|
|
|
|
var sizeRe = /\d+(?:\w+|%)/g;
|
|
var additionRe = /[+-]?(\d+)/g;
|
|
function evaluateSize(size) {
|
|
return startsWith(size, 'calc')
|
|
? size
|
|
.slice(5, -1)
|
|
.replace(sizeRe, function (size) { return toPx(size); })
|
|
.replace(/ /g, '')
|
|
.match(additionRe)
|
|
.reduce(function (a, b) { return a + +b; }, 0)
|
|
: size;
|
|
}
|
|
|
|
var srcSetRe = /\s+\d+w\s*(?:,|$)/g;
|
|
function getSourceSize(srcset, sizes) {
|
|
var srcSize = toPx(sizesToPixel(sizes));
|
|
var descriptors = (srcset.match(srcSetRe) || []).map(toFloat).sort(function (a, b) { return a - b; });
|
|
|
|
return descriptors.filter(function (size) { return size >= srcSize; })[0] || descriptors.pop() || '';
|
|
}
|
|
|
|
function isImg(el) {
|
|
return el.tagName === 'IMG';
|
|
}
|
|
|
|
function currentSrc(el) {
|
|
return el.currentSrc || el.src;
|
|
}
|
|
|
|
var key = '__test__';
|
|
var storage;
|
|
|
|
// workaround for Safari's private browsing mode and accessing sessionStorage in Blink
|
|
try {
|
|
storage = window.sessionStorage || {};
|
|
storage[key] = 1;
|
|
delete storage[key];
|
|
} catch (e) {
|
|
storage = {};
|
|
}
|
|
|
|
var Media = {
|
|
|
|
props: {
|
|
media: Boolean
|
|
},
|
|
|
|
data: {
|
|
media: false
|
|
},
|
|
|
|
computed: {
|
|
|
|
matchMedia: function() {
|
|
var media = toMedia(this.media);
|
|
return !media || window.matchMedia(media).matches;
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
function toMedia(value) {
|
|
|
|
if (isString(value)) {
|
|
if (value[0] === '@') {
|
|
var name = "breakpoint-" + (value.substr(1));
|
|
value = toFloat(getCssVar(name));
|
|
} else if (isNaN(value)) {
|
|
return value;
|
|
}
|
|
}
|
|
|
|
return value && !isNaN(value) ? ("(min-width: " + value + "px)") : false;
|
|
}
|
|
|
|
var leader = {
|
|
|
|
mixins: [Class, Media],
|
|
|
|
props: {
|
|
fill: String
|
|
},
|
|
|
|
data: {
|
|
fill: '',
|
|
clsWrapper: 'uk-leader-fill',
|
|
clsHide: 'uk-leader-hide',
|
|
attrFill: 'data-fill'
|
|
},
|
|
|
|
computed: {
|
|
|
|
fill: function(ref) {
|
|
var fill = ref.fill;
|
|
|
|
return fill || getCssVar('leader-fill-content');
|
|
}
|
|
|
|
},
|
|
|
|
connected: function() {
|
|
var assign;
|
|
|
|
(assign = wrapInner(this.$el, ("<span class=\"" + (this.clsWrapper) + "\">")), this.wrapper = assign[0]);
|
|
},
|
|
|
|
disconnected: function() {
|
|
unwrap(this.wrapper.childNodes);
|
|
},
|
|
|
|
update: {
|
|
|
|
read: function(ref) {
|
|
var changed = ref.changed;
|
|
var width = ref.width;
|
|
|
|
|
|
var prev = width;
|
|
|
|
width = Math.floor(this.$el.offsetWidth / 2);
|
|
|
|
return {
|
|
width: width,
|
|
fill: this.fill,
|
|
changed: changed || prev !== width,
|
|
hide: !this.matchMedia
|
|
};
|
|
},
|
|
|
|
write: function(data) {
|
|
|
|
toggleClass(this.wrapper, this.clsHide, data.hide);
|
|
|
|
if (data.changed) {
|
|
data.changed = false;
|
|
attr(this.wrapper, this.attrFill, new Array(data.width).join(data.fill));
|
|
}
|
|
|
|
},
|
|
|
|
events: ['resize']
|
|
|
|
}
|
|
|
|
};
|
|
|
|
var Container = {
|
|
|
|
props: {
|
|
container: Boolean
|
|
},
|
|
|
|
data: {
|
|
container: true
|
|
},
|
|
|
|
computed: {
|
|
|
|
container: function(ref) {
|
|
var container = ref.container;
|
|
|
|
return container === true && this.$container || container && $(container);
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
var active = [];
|
|
|
|
var Modal = {
|
|
|
|
mixins: [Class, Container, Togglable],
|
|
|
|
props: {
|
|
selPanel: String,
|
|
selClose: String,
|
|
escClose: Boolean,
|
|
bgClose: Boolean,
|
|
stack: Boolean
|
|
},
|
|
|
|
data: {
|
|
cls: 'uk-open',
|
|
escClose: true,
|
|
bgClose: true,
|
|
overlay: true,
|
|
stack: false
|
|
},
|
|
|
|
computed: {
|
|
|
|
panel: function(ref, $el) {
|
|
var selPanel = ref.selPanel;
|
|
|
|
return $(selPanel, $el);
|
|
},
|
|
|
|
transitionElement: function() {
|
|
return this.panel;
|
|
},
|
|
|
|
bgClose: function(ref) {
|
|
var bgClose = ref.bgClose;
|
|
|
|
return bgClose && this.panel;
|
|
}
|
|
|
|
},
|
|
|
|
beforeDisconnect: function() {
|
|
if (this.isToggled()) {
|
|
this.toggleElement(this.$el, false, false);
|
|
}
|
|
},
|
|
|
|
events: [
|
|
|
|
{
|
|
|
|
name: 'click',
|
|
|
|
delegate: function() {
|
|
return this.selClose;
|
|
},
|
|
|
|
handler: function(e) {
|
|
e.preventDefault();
|
|
this.hide();
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'toggle',
|
|
|
|
self: true,
|
|
|
|
handler: function(e) {
|
|
|
|
if (e.defaultPrevented) {
|
|
return;
|
|
}
|
|
|
|
e.preventDefault();
|
|
|
|
if (this.isToggled() === includes(active, this)) {
|
|
this.toggle();
|
|
}
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
name: 'beforeshow',
|
|
|
|
self: true,
|
|
|
|
handler: function(e) {
|
|
|
|
if (includes(active, this)) {
|
|
return false;
|
|
}
|
|
|
|
if (!this.stack && active.length) {
|
|
Promise$1.all(active.map(function (modal) { return modal.hide(); })).then(this.show);
|
|
e.preventDefault();
|
|
} else {
|
|
active.push(this);
|
|
}
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'show',
|
|
|
|
self: true,
|
|
|
|
handler: function() {
|
|
var this$1 = this;
|
|
|
|
|
|
var docEl = document.documentElement;
|
|
|
|
if (width(window) > docEl.clientWidth && this.overlay) {
|
|
css(document.body, 'overflowY', 'scroll');
|
|
}
|
|
|
|
if (this.stack) {
|
|
css(this.$el, 'zIndex', toFloat(css(this.$el, 'zIndex')) + active.length);
|
|
}
|
|
|
|
addClass(docEl, this.clsPage);
|
|
|
|
if (this.bgClose) {
|
|
once(this.$el, 'hide', on(document, pointerDown, function (ref) {
|
|
var target = ref.target;
|
|
|
|
|
|
if (last(active) !== this$1 || this$1.overlay && !within(target, this$1.$el) || within(target, this$1.panel)) {
|
|
return;
|
|
}
|
|
|
|
once(document, (pointerUp + " " + pointerCancel + " scroll"), function (ref) {
|
|
var defaultPrevented = ref.defaultPrevented;
|
|
var type = ref.type;
|
|
var newTarget = ref.target;
|
|
|
|
if (!defaultPrevented && type === pointerUp && target === newTarget) {
|
|
this$1.hide();
|
|
}
|
|
}, true);
|
|
|
|
}), {self: true});
|
|
}
|
|
|
|
if (this.escClose) {
|
|
once(this.$el, 'hide', on(document, 'keydown', function (e) {
|
|
if (e.keyCode === 27 && last(active) === this$1) {
|
|
this$1.hide();
|
|
}
|
|
}), {self: true});
|
|
}
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'hidden',
|
|
|
|
self: true,
|
|
|
|
handler: function() {
|
|
var this$1 = this;
|
|
|
|
|
|
if (includes(active, this)) {
|
|
active.splice(active.indexOf(this), 1);
|
|
}
|
|
|
|
if (!active.length) {
|
|
css(document.body, 'overflowY', '');
|
|
}
|
|
|
|
css(this.$el, 'zIndex', '');
|
|
|
|
if (!active.some(function (modal) { return modal.clsPage === this$1.clsPage; })) {
|
|
removeClass(document.documentElement, this.clsPage);
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
],
|
|
|
|
methods: {
|
|
|
|
toggle: function() {
|
|
return this.isToggled() ? this.hide() : this.show();
|
|
},
|
|
|
|
show: function() {
|
|
var this$1 = this;
|
|
|
|
if (this.container && parent(this.$el) !== this.container) {
|
|
append(this.container, this.$el);
|
|
return new Promise$1(function (resolve) { return requestAnimationFrame(function () { return this$1.show().then(resolve); }
|
|
); }
|
|
);
|
|
}
|
|
|
|
return this.toggleElement(this.$el, true, animate(this));
|
|
},
|
|
|
|
hide: function() {
|
|
return this.toggleElement(this.$el, false, animate(this));
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
function animate(ref) {
|
|
var transitionElement = ref.transitionElement;
|
|
var _toggle = ref._toggle;
|
|
|
|
return function (el, show) { return new Promise$1(function (resolve, reject) { return once(el, 'show hide', function () {
|
|
el._reject && el._reject();
|
|
el._reject = reject;
|
|
|
|
_toggle(el, show);
|
|
|
|
var off = once(transitionElement, 'transitionstart', function () {
|
|
once(transitionElement, 'transitionend transitioncancel', resolve, {self: true});
|
|
clearTimeout(timer);
|
|
}, {self: true});
|
|
|
|
var timer = setTimeout(function () {
|
|
off();
|
|
resolve();
|
|
}, toMs(css(transitionElement, 'transitionDuration')));
|
|
|
|
}); }
|
|
).then(function () { return delete el._reject; }); };
|
|
}
|
|
|
|
var modal = {
|
|
|
|
install: install$2,
|
|
|
|
mixins: [Modal],
|
|
|
|
data: {
|
|
clsPage: 'uk-modal-page',
|
|
selPanel: '.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() {
|
|
|
|
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() {
|
|
|
|
css(this.$el, 'display', '');
|
|
removeClass(this.$el, 'uk-flex');
|
|
|
|
}
|
|
}
|
|
|
|
]
|
|
|
|
};
|
|
|
|
function install$2(ref) {
|
|
var modal = ref.modal;
|
|
|
|
|
|
modal.dialog = function (content, options) {
|
|
|
|
var dialog = modal(
|
|
("<div class=\"uk-modal\"> <div class=\"uk-modal-dialog\">" + content + "</div> </div>"),
|
|
options
|
|
);
|
|
|
|
dialog.show();
|
|
|
|
on(dialog.$el, 'hidden', function () { return Promise$1.resolve().then(function () { return dialog.$destroy(true); }
|
|
); }, {self: true}
|
|
);
|
|
|
|
return dialog;
|
|
};
|
|
|
|
modal.alert = function (message, options) {
|
|
return openDialog(
|
|
function (ref) {
|
|
var labels = ref.labels;
|
|
|
|
return ("<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>" + (labels.ok) + "</button> </div>");
|
|
},
|
|
options,
|
|
function (deferred) { return deferred.resolve(); }
|
|
);
|
|
};
|
|
|
|
modal.confirm = function (message, options) {
|
|
return openDialog(
|
|
function (ref) {
|
|
var labels = ref.labels;
|
|
|
|
return ("<form> <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\" type=\"button\">" + (labels.cancel) + "</button> <button class=\"uk-button uk-button-primary\" autofocus>" + (labels.ok) + "</button> </div> </form>");
|
|
},
|
|
options,
|
|
function (deferred) { return deferred.reject(); }
|
|
);
|
|
};
|
|
|
|
modal.prompt = function (message, value, options) {
|
|
return openDialog(
|
|
function (ref) {
|
|
var labels = ref.labels;
|
|
|
|
return ("<form class=\"uk-form-stacked\"> <div class=\"uk-modal-body\"> <label>" + (isString(message) ? message : html(message)) + "</label> <input class=\"uk-input\" value=\"" + (value || '') + "\" autofocus> </div> <div class=\"uk-modal-footer uk-text-right\"> <button class=\"uk-button uk-button-default uk-modal-close\" type=\"button\">" + (labels.cancel) + "</button> <button class=\"uk-button uk-button-primary\">" + (labels.ok) + "</button> </div> </form>");
|
|
},
|
|
options,
|
|
function (deferred) { return deferred.resolve(null); },
|
|
function (dialog) { return $('input', dialog.$el).value; }
|
|
);
|
|
};
|
|
|
|
modal.labels = {
|
|
ok: 'Ok',
|
|
cancel: 'Cancel'
|
|
};
|
|
|
|
function openDialog(tmpl, options, hideFn, submitFn) {
|
|
|
|
options = assign({bgClose: false, escClose: true, labels: modal.labels}, options);
|
|
|
|
var dialog = modal.dialog(tmpl(options), options);
|
|
var deferred = new Deferred();
|
|
|
|
var resolved = false;
|
|
|
|
on(dialog.$el, 'submit', 'form', function (e) {
|
|
e.preventDefault();
|
|
deferred.resolve(submitFn && submitFn(dialog));
|
|
resolved = true;
|
|
dialog.hide();
|
|
});
|
|
|
|
on(dialog.$el, 'hide', function () { return !resolved && hideFn(deferred); });
|
|
|
|
deferred.promise.dialog = dialog;
|
|
|
|
return deferred.promise;
|
|
}
|
|
|
|
}
|
|
|
|
var nav = {
|
|
|
|
extends: Accordion,
|
|
|
|
data: {
|
|
targets: '> .uk-parent',
|
|
toggle: '> a',
|
|
content: '> ul'
|
|
}
|
|
|
|
};
|
|
|
|
var navbar = {
|
|
|
|
mixins: [Class, FlexBug],
|
|
|
|
props: {
|
|
dropdown: String,
|
|
mode: 'list',
|
|
align: String,
|
|
offset: Number,
|
|
boundary: Boolean,
|
|
boundaryAlign: Boolean,
|
|
clsDrop: String,
|
|
delayShow: Number,
|
|
delayHide: Number,
|
|
dropbar: Boolean,
|
|
dropbarMode: String,
|
|
dropbarAnchor: Boolean,
|
|
duration: Number
|
|
},
|
|
|
|
data: {
|
|
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,
|
|
forceHeight: true,
|
|
selMinHeight: '.uk-navbar-nav > li > a, .uk-navbar-item, .uk-navbar-toggle'
|
|
},
|
|
|
|
computed: {
|
|
|
|
boundary: function(ref, $el) {
|
|
var boundary = ref.boundary;
|
|
var boundaryAlign = ref.boundaryAlign;
|
|
|
|
return (boundary === true || boundaryAlign) ? $el : boundary;
|
|
},
|
|
|
|
dropbarAnchor: function(ref, $el) {
|
|
var dropbarAnchor = ref.dropbarAnchor;
|
|
|
|
return query(dropbarAnchor, $el);
|
|
},
|
|
|
|
pos: function(ref) {
|
|
var align = ref.align;
|
|
|
|
return ("bottom-" + align);
|
|
},
|
|
|
|
dropbar: {
|
|
|
|
get: function(ref) {
|
|
var dropbar = ref.dropbar;
|
|
|
|
|
|
if (!dropbar) {
|
|
return null;
|
|
}
|
|
|
|
dropbar = this._dropbar || query(dropbar, this.$el) || $('+ .uk-navbar-dropbar', this.$el);
|
|
|
|
return dropbar ? dropbar : (this._dropbar = $('<div></div>'));
|
|
|
|
},
|
|
|
|
watch: function(dropbar) {
|
|
addClass(dropbar, 'uk-navbar-dropbar');
|
|
},
|
|
|
|
immediate: true
|
|
|
|
},
|
|
|
|
dropdowns: {
|
|
|
|
get: function(ref, $el) {
|
|
var dropdown = ref.dropdown;
|
|
var clsDrop = ref.clsDrop;
|
|
|
|
return $$((dropdown + " ." + clsDrop), $el);
|
|
},
|
|
|
|
watch: function(dropdowns) {
|
|
var this$1 = this;
|
|
|
|
this.$create(
|
|
'drop',
|
|
dropdowns.filter(function (el) { return !this$1.getDropdown(el); }),
|
|
assign({}, this.$props, {boundary: this.boundary, pos: this.pos, offset: this.dropbar || this.offset})
|
|
);
|
|
},
|
|
|
|
immediate: true
|
|
|
|
}
|
|
|
|
},
|
|
|
|
disconnected: function() {
|
|
this.dropbar && remove$1(this.dropbar);
|
|
delete this._dropbar;
|
|
},
|
|
|
|
events: [
|
|
|
|
{
|
|
name: 'mouseover',
|
|
|
|
delegate: function() {
|
|
return this.dropdown;
|
|
},
|
|
|
|
handler: function(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);
|
|
}
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
name: 'mouseleave',
|
|
|
|
el: function() {
|
|
return this.dropbar;
|
|
},
|
|
|
|
handler: function() {
|
|
var active = this.getActive();
|
|
|
|
if (active && !this.dropdowns.some(function (el) { return matches(el, ':hover'); })) {
|
|
active.hide();
|
|
}
|
|
}
|
|
},
|
|
|
|
{
|
|
name: 'beforeshow',
|
|
|
|
capture: true,
|
|
|
|
filter: function() {
|
|
return this.dropbar;
|
|
},
|
|
|
|
handler: function() {
|
|
|
|
if (!parent(this.dropbar)) {
|
|
after(this.dropbarAnchor || this.$el, this.dropbar);
|
|
}
|
|
|
|
}
|
|
},
|
|
|
|
{
|
|
name: 'show',
|
|
|
|
filter: function() {
|
|
return this.dropbar;
|
|
},
|
|
|
|
handler: function(_, ref) {
|
|
var $el = ref.$el;
|
|
var dir = ref.dir;
|
|
|
|
if (!hasClass($el, this.clsDrop)) {
|
|
return;
|
|
}
|
|
|
|
if (this.dropbarMode === 'slide') {
|
|
addClass(this.dropbar, 'uk-navbar-dropbar-slide');
|
|
}
|
|
|
|
this.clsDrop && addClass($el, ((this.clsDrop) + "-dropbar"));
|
|
|
|
if (dir === 'bottom') {
|
|
this.transitionTo($el.offsetHeight + toFloat(css($el, 'marginTop')) + toFloat(css($el, 'marginBottom')), $el);
|
|
}
|
|
}
|
|
},
|
|
|
|
{
|
|
name: 'beforehide',
|
|
|
|
filter: function() {
|
|
return this.dropbar;
|
|
},
|
|
|
|
handler: function(e, ref) {
|
|
var $el = ref.$el;
|
|
|
|
|
|
var active = this.getActive();
|
|
|
|
if (matches(this.dropbar, ':hover') && active && active.$el === $el) {
|
|
e.preventDefault();
|
|
}
|
|
}
|
|
},
|
|
|
|
{
|
|
name: 'hide',
|
|
|
|
filter: function() {
|
|
return this.dropbar;
|
|
},
|
|
|
|
handler: function(_, ref) {
|
|
var $el = ref.$el;
|
|
|
|
if (!hasClass($el, this.clsDrop)) {
|
|
return;
|
|
}
|
|
|
|
var active = this.getActive();
|
|
|
|
if (!active || active && active.$el === $el) {
|
|
this.transitionTo(0);
|
|
}
|
|
}
|
|
}
|
|
|
|
],
|
|
|
|
methods: {
|
|
|
|
getActive: function() {
|
|
var ref = this.dropdowns.map(this.getDropdown).filter(function (drop) { return drop && drop.isActive(); });
|
|
var active = ref[0];
|
|
return active && includes(active.mode, 'hover') && within(active.toggle.$el, this.$el) && active;
|
|
},
|
|
|
|
transitionTo: function(newHeight, el) {
|
|
var this$1 = this;
|
|
|
|
|
|
var ref = this;
|
|
var dropbar = ref.dropbar;
|
|
var oldHeight = isVisible(dropbar) ? height(dropbar) : 0;
|
|
|
|
el = oldHeight < newHeight && el;
|
|
|
|
css(el, 'clip', ("rect(0," + (el.offsetWidth) + "px," + oldHeight + "px,0)"));
|
|
|
|
height(dropbar, oldHeight);
|
|
|
|
Transition.cancel([el, dropbar]);
|
|
return Promise$1.all([
|
|
Transition.start(dropbar, {height: newHeight}, this.duration),
|
|
Transition.start(el, {clip: ("rect(0," + (el.offsetWidth) + "px," + newHeight + "px,0)")}, this.duration)
|
|
])
|
|
.catch(noop)
|
|
.then(function () {
|
|
css(el, {clip: ''});
|
|
this$1.$update(dropbar);
|
|
});
|
|
},
|
|
|
|
getDropdown: function(el) {
|
|
return this.$getComponent(el, 'drop') || this.$getComponent(el, 'dropdown');
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
var offcanvas = {
|
|
|
|
mixins: [Modal],
|
|
|
|
args: 'mode',
|
|
|
|
props: {
|
|
mode: String,
|
|
flip: Boolean,
|
|
overlay: Boolean
|
|
},
|
|
|
|
data: {
|
|
mode: 'slide',
|
|
flip: false,
|
|
overlay: false,
|
|
clsPage: 'uk-offcanvas-page',
|
|
clsContainer: 'uk-offcanvas-container',
|
|
selPanel: '.uk-offcanvas-bar',
|
|
clsFlip: 'uk-offcanvas-flip',
|
|
clsContainerAnimation: 'uk-offcanvas-container-animation',
|
|
clsSidebarAnimation: 'uk-offcanvas-bar-animation',
|
|
clsMode: 'uk-offcanvas',
|
|
clsOverlay: 'uk-offcanvas-overlay',
|
|
selClose: '.uk-offcanvas-close',
|
|
container: false
|
|
},
|
|
|
|
computed: {
|
|
|
|
clsFlip: function(ref) {
|
|
var flip = ref.flip;
|
|
var clsFlip = ref.clsFlip;
|
|
|
|
return flip ? clsFlip : '';
|
|
},
|
|
|
|
clsOverlay: function(ref) {
|
|
var overlay = ref.overlay;
|
|
var clsOverlay = ref.clsOverlay;
|
|
|
|
return overlay ? clsOverlay : '';
|
|
},
|
|
|
|
clsMode: function(ref) {
|
|
var mode = ref.mode;
|
|
var clsMode = ref.clsMode;
|
|
|
|
return (clsMode + "-" + mode);
|
|
},
|
|
|
|
clsSidebarAnimation: function(ref) {
|
|
var mode = ref.mode;
|
|
var clsSidebarAnimation = ref.clsSidebarAnimation;
|
|
|
|
return mode === 'none' || mode === 'reveal' ? '' : clsSidebarAnimation;
|
|
},
|
|
|
|
clsContainerAnimation: function(ref) {
|
|
var mode = ref.mode;
|
|
var clsContainerAnimation = ref.clsContainerAnimation;
|
|
|
|
return mode !== 'push' && mode !== 'reveal' ? '' : clsContainerAnimation;
|
|
},
|
|
|
|
transitionElement: function(ref) {
|
|
var mode = ref.mode;
|
|
|
|
return mode === 'reveal' ? parent(this.panel) : this.panel;
|
|
}
|
|
|
|
},
|
|
|
|
update: {
|
|
|
|
read: function() {
|
|
if (this.isToggled() && !isVisible(this.$el)) {
|
|
this.hide();
|
|
}
|
|
},
|
|
|
|
events: ['resize']
|
|
|
|
},
|
|
|
|
events: [
|
|
|
|
{
|
|
|
|
name: 'click',
|
|
|
|
delegate: function() {
|
|
return 'a[href^="#"]';
|
|
},
|
|
|
|
handler: function(ref) {
|
|
var hash = ref.current.hash;
|
|
var defaultPrevented = ref.defaultPrevented;
|
|
|
|
if (!defaultPrevented && hash && $(hash, document.body)) {
|
|
this.hide();
|
|
}
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
name: 'touchstart',
|
|
|
|
passive: true,
|
|
|
|
el: function() {
|
|
return this.panel;
|
|
},
|
|
|
|
handler: function(ref) {
|
|
var targetTouches = ref.targetTouches;
|
|
|
|
|
|
if (targetTouches.length === 1) {
|
|
this.clientY = targetTouches[0].clientY;
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
name: 'touchmove',
|
|
|
|
self: true,
|
|
passive: false,
|
|
|
|
filter: function() {
|
|
return this.overlay;
|
|
},
|
|
|
|
handler: function(e) {
|
|
e.cancelable && e.preventDefault();
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
name: 'touchmove',
|
|
|
|
passive: false,
|
|
|
|
el: function() {
|
|
return this.panel;
|
|
},
|
|
|
|
handler: function(e) {
|
|
|
|
if (e.targetTouches.length !== 1) {
|
|
return;
|
|
}
|
|
|
|
var clientY = event.targetTouches[0].clientY - this.clientY;
|
|
var ref = this.panel;
|
|
var scrollTop = ref.scrollTop;
|
|
var scrollHeight = ref.scrollHeight;
|
|
var clientHeight = ref.clientHeight;
|
|
|
|
if (clientHeight >= scrollHeight
|
|
|| scrollTop === 0 && clientY > 0
|
|
|| scrollHeight - scrollTop <= clientHeight && clientY < 0
|
|
) {
|
|
e.cancelable && e.preventDefault();
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
name: 'show',
|
|
|
|
self: true,
|
|
|
|
handler: function() {
|
|
|
|
if (this.mode === 'reveal' && !hasClass(parent(this.panel), this.clsMode)) {
|
|
wrapAll(this.panel, '<div>');
|
|
addClass(parent(this.panel), this.clsMode);
|
|
}
|
|
|
|
css(document.documentElement, 'overflowY', this.overlay ? 'hidden' : '');
|
|
addClass(document.body, this.clsContainer, this.clsFlip);
|
|
css(document.body, 'touch-action', 'pan-y pinch-zoom');
|
|
css(this.$el, 'display', 'block');
|
|
addClass(this.$el, this.clsOverlay);
|
|
addClass(this.panel, this.clsSidebarAnimation, this.mode !== 'reveal' ? this.clsMode : '');
|
|
|
|
height(document.body); // force reflow
|
|
addClass(document.body, this.clsContainerAnimation);
|
|
|
|
this.clsContainerAnimation && suppressUserScale();
|
|
|
|
|
|
}
|
|
},
|
|
|
|
{
|
|
name: 'hide',
|
|
|
|
self: true,
|
|
|
|
handler: function() {
|
|
removeClass(document.body, this.clsContainerAnimation);
|
|
css(document.body, 'touch-action', '');
|
|
}
|
|
},
|
|
|
|
{
|
|
name: 'hidden',
|
|
|
|
self: true,
|
|
|
|
handler: function() {
|
|
|
|
this.clsContainerAnimation && resumeUserScale();
|
|
|
|
if (this.mode === 'reveal') {
|
|
unwrap(this.panel);
|
|
}
|
|
|
|
removeClass(this.panel, this.clsSidebarAnimation, this.clsMode);
|
|
removeClass(this.$el, this.clsOverlay);
|
|
css(this.$el, 'display', '');
|
|
removeClass(document.body, this.clsContainer, this.clsFlip);
|
|
|
|
css(document.documentElement, 'overflowY', '');
|
|
|
|
}
|
|
},
|
|
|
|
{
|
|
name: 'swipeLeft swipeRight',
|
|
|
|
handler: function(e) {
|
|
|
|
if (this.isToggled() && endsWith(e.type, 'Left') ^ this.flip) {
|
|
this.hide();
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
]
|
|
|
|
};
|
|
|
|
// Chrome in responsive mode zooms page upon opening offcanvas
|
|
function suppressUserScale() {
|
|
getViewport().content += ',user-scalable=0';
|
|
}
|
|
|
|
function resumeUserScale() {
|
|
var viewport = getViewport();
|
|
viewport.content = viewport.content.replace(/,user-scalable=0$/, '');
|
|
}
|
|
|
|
function getViewport() {
|
|
return $('meta[name="viewport"]', document.head) || append(document.head, '<meta name="viewport">');
|
|
}
|
|
|
|
var overflowAuto = {
|
|
|
|
mixins: [Class],
|
|
|
|
props: {
|
|
selContainer: String,
|
|
selContent: String
|
|
},
|
|
|
|
data: {
|
|
selContainer: '.uk-modal',
|
|
selContent: '.uk-modal-dialog'
|
|
},
|
|
|
|
computed: {
|
|
|
|
container: function(ref, $el) {
|
|
var selContainer = ref.selContainer;
|
|
|
|
return closest($el, selContainer);
|
|
},
|
|
|
|
content: function(ref, $el) {
|
|
var selContent = ref.selContent;
|
|
|
|
return closest($el, selContent);
|
|
}
|
|
|
|
},
|
|
|
|
connected: function() {
|
|
css(this.$el, 'minHeight', 150);
|
|
},
|
|
|
|
update: {
|
|
|
|
read: function() {
|
|
|
|
if (!this.content || !this.container || !isVisible(this.$el)) {
|
|
return false;
|
|
}
|
|
|
|
return {
|
|
current: toFloat(css(this.$el, 'maxHeight')),
|
|
max: Math.max(150, height(this.container) - (dimensions(this.content).height - height(this.$el)))
|
|
};
|
|
},
|
|
|
|
write: function(ref) {
|
|
var current = ref.current;
|
|
var max = ref.max;
|
|
|
|
css(this.$el, 'maxHeight', max);
|
|
if (Math.round(current) !== Math.round(max)) {
|
|
trigger(this.$el, 'resize');
|
|
}
|
|
},
|
|
|
|
events: ['resize']
|
|
|
|
}
|
|
|
|
};
|
|
|
|
var responsive = {
|
|
|
|
props: ['width', 'height'],
|
|
|
|
connected: function() {
|
|
addClass(this.$el, 'uk-responsive-width');
|
|
},
|
|
|
|
update: {
|
|
|
|
read: function() {
|
|
return isVisible(this.$el) && this.width && this.height
|
|
? {width: width(parent(this.$el)), height: this.height}
|
|
: false;
|
|
},
|
|
|
|
write: function(dim) {
|
|
height(this.$el, Dimensions.contain({
|
|
height: this.height,
|
|
width: this.width
|
|
}, dim).height);
|
|
},
|
|
|
|
events: ['resize']
|
|
|
|
}
|
|
|
|
};
|
|
|
|
var scroll = {
|
|
|
|
props: {
|
|
offset: Number
|
|
},
|
|
|
|
data: {
|
|
offset: 0
|
|
},
|
|
|
|
methods: {
|
|
|
|
scrollTo: function(el) {
|
|
var this$1 = this;
|
|
|
|
|
|
el = el && $(el) || document.body;
|
|
|
|
if (trigger(this.$el, 'beforescroll', [this, el])) {
|
|
scrollIntoView(el, {offset: this.offset}).then(function () { return trigger(this$1.$el, 'scrolled', [this$1, el]); }
|
|
);
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
events: {
|
|
|
|
click: function(e) {
|
|
|
|
if (e.defaultPrevented) {
|
|
return;
|
|
}
|
|
|
|
e.preventDefault();
|
|
this.scrollTo(("#" + (escape(decodeURIComponent((this.$el.hash || '').substr(1))))));
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
var stateKey = '_ukScrollspy';
|
|
var scrollspy = {
|
|
|
|
args: 'cls',
|
|
|
|
props: {
|
|
cls: String,
|
|
target: String,
|
|
hidden: Boolean,
|
|
offsetTop: Number,
|
|
offsetLeft: Number,
|
|
repeat: Boolean,
|
|
delay: Number
|
|
},
|
|
|
|
data: function () { return ({
|
|
cls: false,
|
|
target: false,
|
|
hidden: true,
|
|
offsetTop: 0,
|
|
offsetLeft: 0,
|
|
repeat: false,
|
|
delay: 0,
|
|
inViewClass: 'uk-scrollspy-inview'
|
|
}); },
|
|
|
|
computed: {
|
|
|
|
elements: {
|
|
|
|
get: function(ref, $el) {
|
|
var target = ref.target;
|
|
|
|
return target ? $$(target, $el) : [$el];
|
|
},
|
|
|
|
watch: function(elements) {
|
|
if (this.hidden) {
|
|
css(filter$1(elements, (":not(." + (this.inViewClass) + ")")), 'visibility', 'hidden');
|
|
}
|
|
},
|
|
|
|
immediate: true
|
|
|
|
}
|
|
|
|
},
|
|
|
|
disconnected: function() {
|
|
var this$1 = this;
|
|
|
|
this.elements.forEach(function (el) {
|
|
removeClass(el, this$1.inViewClass, el[stateKey] ? el[stateKey].cls : '');
|
|
delete el[stateKey];
|
|
});
|
|
},
|
|
|
|
update: [
|
|
|
|
{
|
|
|
|
read: function(data$1) {
|
|
var this$1 = this;
|
|
|
|
|
|
// Let child components be applied at least once first
|
|
if (!data$1.update) {
|
|
Promise$1.resolve().then(function () {
|
|
this$1.$emit();
|
|
data$1.update = true;
|
|
});
|
|
return false;
|
|
}
|
|
|
|
this.elements.forEach(function (el) {
|
|
|
|
if (!el[stateKey]) {
|
|
el[stateKey] = {cls: data(el, 'uk-scrollspy-class') || this$1.cls};
|
|
}
|
|
|
|
el[stateKey].show = isInView(el, this$1.offsetTop, this$1.offsetLeft);
|
|
|
|
});
|
|
|
|
},
|
|
|
|
write: function(data) {
|
|
var this$1 = this;
|
|
|
|
|
|
this.elements.forEach(function (el) {
|
|
|
|
var state = el[stateKey];
|
|
|
|
if (state.show && !state.inview && !state.queued) {
|
|
|
|
state.queued = true;
|
|
|
|
data.promise = (data.promise || Promise$1.resolve()).then(function () { return new Promise$1(function (resolve) { return setTimeout(resolve, this$1.delay); }
|
|
); }
|
|
).then(function () {
|
|
this$1.toggle(el, true);
|
|
setTimeout(function () {
|
|
state.queued = false;
|
|
this$1.$emit();
|
|
}, 300);
|
|
});
|
|
|
|
} else if (!state.show && state.inview && !state.queued && this$1.repeat) {
|
|
|
|
this$1.toggle(el, false);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
},
|
|
|
|
events: ['scroll', 'resize']
|
|
|
|
}
|
|
|
|
],
|
|
|
|
methods: {
|
|
|
|
toggle: function(el, inview) {
|
|
|
|
var state = el[stateKey];
|
|
|
|
state.off && state.off();
|
|
|
|
css(el, 'visibility', !inview && this.hidden ? 'hidden' : '');
|
|
|
|
toggleClass(el, this.inViewClass, inview);
|
|
toggleClass(el, state.cls);
|
|
|
|
if (/\buk-animation-/.test(state.cls)) {
|
|
state.off = once(el, 'animationcancel animationend', function () { return removeClasses(el, 'uk-animation-\\w*'); }
|
|
);
|
|
}
|
|
|
|
trigger(el, inview ? 'inview' : 'outview');
|
|
|
|
state.inview = inview;
|
|
|
|
this.$update(el);
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
var scrollspyNav = {
|
|
|
|
props: {
|
|
cls: String,
|
|
closest: String,
|
|
scroll: Boolean,
|
|
overflow: Boolean,
|
|
offset: Number
|
|
},
|
|
|
|
data: {
|
|
cls: 'uk-active',
|
|
closest: false,
|
|
scroll: false,
|
|
overflow: true,
|
|
offset: 0
|
|
},
|
|
|
|
computed: {
|
|
|
|
links: {
|
|
|
|
get: function(_, $el) {
|
|
return $$('a[href^="#"]', $el).filter(function (el) { return el.hash; });
|
|
},
|
|
|
|
watch: function(links) {
|
|
if (this.scroll) {
|
|
this.$create('scroll', links, {offset: this.offset || 0});
|
|
}
|
|
},
|
|
|
|
immediate: true
|
|
|
|
},
|
|
|
|
targets: function() {
|
|
return $$(this.links.map(function (el) { return escape(el.hash).substr(1); }).join(','));
|
|
},
|
|
|
|
elements: function(ref) {
|
|
var selector = ref.closest;
|
|
|
|
return closest(this.links, selector || '*');
|
|
}
|
|
|
|
},
|
|
|
|
update: [
|
|
|
|
{
|
|
|
|
read: function() {
|
|
var this$1 = this;
|
|
|
|
|
|
var ref = this.targets;
|
|
var length = ref.length;
|
|
|
|
if (!length || !isVisible(this.$el)) {
|
|
return false;
|
|
}
|
|
|
|
var ref$1 = scrollParents(this.targets, /auto|scroll/, true);
|
|
var scrollElement = ref$1[0];
|
|
var scrollTop = scrollElement.scrollTop;
|
|
var scrollHeight = scrollElement.scrollHeight;
|
|
var max = scrollHeight - getViewportClientHeight(scrollElement);
|
|
var active = false;
|
|
|
|
if (scrollTop === max) {
|
|
active = length - 1;
|
|
} else {
|
|
|
|
this.targets.every(function (el, i) {
|
|
if (offset(el).top - offset(getViewport$1(scrollElement)).top - this$1.offset <= 0) {
|
|
active = i;
|
|
return true;
|
|
}
|
|
});
|
|
|
|
if (active === false && this.overflow) {
|
|
active = 0;
|
|
}
|
|
}
|
|
|
|
return {active: active};
|
|
},
|
|
|
|
write: function(ref) {
|
|
var active = ref.active;
|
|
|
|
|
|
this.links.forEach(function (el) { return el.blur(); });
|
|
removeClass(this.elements, this.cls);
|
|
|
|
if (active !== false) {
|
|
trigger(this.$el, 'active', [active, addClass(this.elements[active], this.cls)]);
|
|
}
|
|
|
|
},
|
|
|
|
events: ['scroll', 'resize']
|
|
|
|
}
|
|
|
|
]
|
|
|
|
};
|
|
|
|
var sticky = {
|
|
|
|
mixins: [Class, Media],
|
|
|
|
props: {
|
|
top: null,
|
|
bottom: Boolean,
|
|
offset: String,
|
|
animation: String,
|
|
clsActive: String,
|
|
clsInactive: String,
|
|
clsFixed: String,
|
|
clsBelow: String,
|
|
selTarget: String,
|
|
widthElement: Boolean,
|
|
showOnUp: Boolean,
|
|
targetOffset: Number
|
|
},
|
|
|
|
data: {
|
|
top: 0,
|
|
bottom: false,
|
|
offset: 0,
|
|
animation: '',
|
|
clsActive: 'uk-active',
|
|
clsInactive: '',
|
|
clsFixed: 'uk-sticky-fixed',
|
|
clsBelow: 'uk-sticky-below',
|
|
selTarget: '',
|
|
widthElement: false,
|
|
showOnUp: false,
|
|
targetOffset: false
|
|
},
|
|
|
|
computed: {
|
|
|
|
offset: function(ref) {
|
|
var offset = ref.offset;
|
|
|
|
return toPx(offset);
|
|
},
|
|
|
|
selTarget: function(ref, $el) {
|
|
var selTarget = ref.selTarget;
|
|
|
|
return selTarget && $(selTarget, $el) || $el;
|
|
},
|
|
|
|
widthElement: function(ref, $el) {
|
|
var widthElement = ref.widthElement;
|
|
|
|
return query(widthElement, $el) || this.placeholder;
|
|
},
|
|
|
|
isActive: {
|
|
|
|
get: function() {
|
|
return hasClass(this.selTarget, this.clsActive);
|
|
},
|
|
|
|
set: function(value) {
|
|
if (value && !this.isActive) {
|
|
replaceClass(this.selTarget, this.clsInactive, this.clsActive);
|
|
trigger(this.$el, 'active');
|
|
} else if (!value && !hasClass(this.selTarget, this.clsInactive)) {
|
|
replaceClass(this.selTarget, this.clsActive, this.clsInactive);
|
|
trigger(this.$el, 'inactive');
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
connected: function() {
|
|
this.placeholder = $('+ .uk-sticky-placeholder', this.$el) || $('<div class="uk-sticky-placeholder"></div>');
|
|
this.isFixed = false;
|
|
this.isActive = false;
|
|
},
|
|
|
|
disconnected: function() {
|
|
|
|
if (this.isFixed) {
|
|
this.hide();
|
|
removeClass(this.selTarget, this.clsInactive);
|
|
}
|
|
|
|
remove$1(this.placeholder);
|
|
this.placeholder = null;
|
|
this.widthElement = null;
|
|
},
|
|
|
|
events: [
|
|
|
|
{
|
|
|
|
name: 'load hashchange popstate',
|
|
|
|
el: function() {
|
|
return window;
|
|
},
|
|
|
|
handler: function() {
|
|
var this$1 = this;
|
|
|
|
|
|
if (!(this.targetOffset !== false && location.hash && window.pageYOffset > 0)) {
|
|
return;
|
|
}
|
|
|
|
var target = $(location.hash);
|
|
|
|
if (target) {
|
|
fastdom.read(function () {
|
|
|
|
var ref = offset(target);
|
|
var top = ref.top;
|
|
var elTop = offset(this$1.$el).top;
|
|
var elHeight = this$1.$el.offsetHeight;
|
|
|
|
if (this$1.isFixed && elTop + elHeight >= top && elTop <= top + target.offsetHeight) {
|
|
scrollTop(window, top - elHeight - (isNumeric(this$1.targetOffset) ? this$1.targetOffset : 0) - this$1.offset);
|
|
}
|
|
|
|
});
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
],
|
|
|
|
update: [
|
|
|
|
{
|
|
|
|
read: function(ref, types) {
|
|
var height = ref.height;
|
|
|
|
|
|
this.inactive = !this.matchMedia || !isVisible(this.$el);
|
|
|
|
if (this.inactive) {
|
|
return false;
|
|
}
|
|
|
|
if (this.isActive && types.has('resize')) {
|
|
this.hide();
|
|
height = this.$el.offsetHeight;
|
|
this.show();
|
|
}
|
|
|
|
height = !this.isActive ? this.$el.offsetHeight : height;
|
|
|
|
this.topOffset = offset(this.isFixed ? this.placeholder : this.$el).top;
|
|
this.bottomOffset = this.topOffset + height;
|
|
|
|
var bottom = parseProp('bottom', this);
|
|
|
|
this.top = Math.max(toFloat(parseProp('top', this)), this.topOffset) - this.offset;
|
|
this.bottom = bottom && bottom - this.$el.offsetHeight;
|
|
this.width = dimensions(isVisible(this.widthElement) ? this.widthElement : this.$el).width;
|
|
|
|
return {
|
|
height: height,
|
|
top: offsetPosition(this.placeholder)[0],
|
|
margins: css(this.$el, ['marginTop', 'marginBottom', 'marginLeft', 'marginRight'])
|
|
};
|
|
},
|
|
|
|
write: function(ref) {
|
|
var height = ref.height;
|
|
var margins = ref.margins;
|
|
|
|
|
|
var ref$1 = this;
|
|
var placeholder = ref$1.placeholder;
|
|
|
|
css(placeholder, assign({height: height}, margins));
|
|
|
|
if (!within(placeholder, document)) {
|
|
after(this.$el, placeholder);
|
|
placeholder.hidden = true;
|
|
}
|
|
|
|
this.isActive = !!this.isActive; // force self-assign
|
|
|
|
},
|
|
|
|
events: ['resize']
|
|
|
|
},
|
|
|
|
{
|
|
|
|
read: function(ref) {
|
|
var scroll = ref.scroll; if ( scroll === void 0 ) scroll = 0;
|
|
|
|
|
|
this.scroll = window.pageYOffset;
|
|
|
|
return {
|
|
dir: scroll <= this.scroll ? 'down' : 'up',
|
|
scroll: this.scroll
|
|
};
|
|
},
|
|
|
|
write: function(data, types) {
|
|
var this$1 = this;
|
|
|
|
|
|
var now = Date.now();
|
|
var isScrollUpdate = types.has('scroll');
|
|
var initTimestamp = data.initTimestamp; if ( initTimestamp === void 0 ) initTimestamp = 0;
|
|
var dir = data.dir;
|
|
var lastDir = data.lastDir;
|
|
var lastScroll = data.lastScroll;
|
|
var scroll = data.scroll;
|
|
var top = data.top;
|
|
|
|
data.lastScroll = scroll;
|
|
|
|
if (scroll < 0 || scroll === lastScroll && isScrollUpdate || this.showOnUp && !isScrollUpdate && !this.isFixed) {
|
|
return;
|
|
}
|
|
|
|
if (now - initTimestamp > 300 || dir !== lastDir) {
|
|
data.initScroll = scroll;
|
|
data.initTimestamp = now;
|
|
}
|
|
|
|
data.lastDir = dir;
|
|
|
|
if (this.showOnUp && !this.isFixed && Math.abs(data.initScroll - scroll) <= 30 && Math.abs(lastScroll - scroll) <= 10) {
|
|
return;
|
|
}
|
|
|
|
if (this.inactive
|
|
|| scroll < this.top
|
|
|| this.showOnUp && (scroll <= this.top || dir === 'down' && isScrollUpdate || dir === 'up' && !this.isFixed && scroll <= this.bottomOffset)
|
|
) {
|
|
|
|
if (!this.isFixed) {
|
|
|
|
if (Animation.inProgress(this.$el) && top > scroll) {
|
|
Animation.cancel(this.$el);
|
|
this.hide();
|
|
}
|
|
|
|
return;
|
|
}
|
|
|
|
this.isFixed = 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.isFixed) {
|
|
|
|
this.update();
|
|
|
|
} else if (this.animation) {
|
|
|
|
Animation.cancel(this.$el);
|
|
this.show();
|
|
Animation.in(this.$el, this.animation).catch(noop);
|
|
|
|
} else {
|
|
this.show();
|
|
}
|
|
|
|
},
|
|
|
|
events: ['resize', 'scroll']
|
|
|
|
}
|
|
|
|
],
|
|
|
|
methods: {
|
|
|
|
show: function() {
|
|
|
|
this.isFixed = true;
|
|
this.update();
|
|
this.placeholder.hidden = false;
|
|
|
|
},
|
|
|
|
hide: function() {
|
|
|
|
this.isActive = false;
|
|
removeClass(this.$el, this.clsFixed, this.clsBelow);
|
|
css(this.$el, {position: '', top: '', width: ''});
|
|
this.placeholder.hidden = true;
|
|
|
|
},
|
|
|
|
update: function() {
|
|
|
|
var active = this.top !== 0 || this.scroll > this.top;
|
|
var top = Math.max(0, this.offset);
|
|
|
|
if (isNumeric(this.bottom) && this.scroll > this.bottom - this.offset) {
|
|
top = this.bottom - this.scroll;
|
|
}
|
|
|
|
css(this.$el, {
|
|
position: 'fixed',
|
|
top: (top + "px"),
|
|
width: this.width
|
|
});
|
|
|
|
this.isActive = active;
|
|
toggleClass(this.$el, this.clsBelow, this.scroll > this.bottomOffset);
|
|
addClass(this.$el, this.clsFixed);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
function parseProp(prop, ref) {
|
|
var $props = ref.$props;
|
|
var $el = ref.$el;
|
|
var propOffset = ref[(prop + "Offset")];
|
|
|
|
|
|
var value = $props[prop];
|
|
|
|
if (!value) {
|
|
return;
|
|
}
|
|
|
|
if (isString(value) && value.match(/^-?\d/)) {
|
|
|
|
return propOffset + toPx(value);
|
|
|
|
} else {
|
|
|
|
return offset(value === true ? parent($el) : query(value, $el)).bottom;
|
|
|
|
}
|
|
}
|
|
|
|
var Switcher = {
|
|
|
|
mixins: [Togglable],
|
|
|
|
args: 'connect',
|
|
|
|
props: {
|
|
connect: String,
|
|
toggle: String,
|
|
active: Number,
|
|
swiping: Boolean
|
|
},
|
|
|
|
data: {
|
|
connect: '~.uk-switcher',
|
|
toggle: '> * > :first-child',
|
|
active: 0,
|
|
swiping: true,
|
|
cls: 'uk-active',
|
|
attrItem: 'uk-switcher-item'
|
|
},
|
|
|
|
computed: {
|
|
|
|
connects: {
|
|
|
|
get: function(ref, $el) {
|
|
var connect = ref.connect;
|
|
|
|
return queryAll(connect, $el);
|
|
},
|
|
|
|
watch: function(connects) {
|
|
var this$1 = this;
|
|
|
|
|
|
if (this.swiping) {
|
|
css(connects, 'touch-action', 'pan-y pinch-zoom');
|
|
}
|
|
|
|
var index = this.index();
|
|
this.connects.forEach(function (el) { return children(el).forEach(function (child, i) { return toggleClass(child, this$1.cls, i === index); }
|
|
); }
|
|
);
|
|
|
|
},
|
|
|
|
immediate: true
|
|
|
|
},
|
|
|
|
toggles: {
|
|
|
|
get: function(ref, $el) {
|
|
var toggle = ref.toggle;
|
|
|
|
return $$(toggle, $el).filter(function (el) { return !matches(el, '.uk-disabled *, .uk-disabled, [disabled]'); });
|
|
},
|
|
|
|
watch: function(toggles) {
|
|
var active = this.index();
|
|
this.show(~active ? active : toggles[this.active] || toggles[0]);
|
|
},
|
|
|
|
immediate: true
|
|
|
|
},
|
|
|
|
children: function() {
|
|
var this$1 = this;
|
|
|
|
return children(this.$el).filter(function (child) { return this$1.toggles.some(function (toggle) { return within(toggle, child); }); });
|
|
}
|
|
|
|
},
|
|
|
|
events: [
|
|
|
|
{
|
|
|
|
name: 'click',
|
|
|
|
delegate: function() {
|
|
return this.toggle;
|
|
},
|
|
|
|
handler: function(e) {
|
|
e.preventDefault();
|
|
this.show(e.current);
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
name: 'click',
|
|
|
|
el: function() {
|
|
return this.connects;
|
|
},
|
|
|
|
delegate: function() {
|
|
return ("[" + (this.attrItem) + "],[data-" + (this.attrItem) + "]");
|
|
},
|
|
|
|
handler: function(e) {
|
|
e.preventDefault();
|
|
this.show(data(e.current, this.attrItem));
|
|
}
|
|
},
|
|
|
|
{
|
|
name: 'swipeRight swipeLeft',
|
|
|
|
filter: function() {
|
|
return this.swiping;
|
|
},
|
|
|
|
el: function() {
|
|
return this.connects;
|
|
},
|
|
|
|
handler: function(ref) {
|
|
var type = ref.type;
|
|
|
|
this.show(endsWith(type, 'Left') ? 'next' : 'previous');
|
|
}
|
|
}
|
|
|
|
],
|
|
|
|
methods: {
|
|
|
|
index: function() {
|
|
var this$1 = this;
|
|
|
|
return findIndex(this.children, function (el) { return hasClass(el, this$1.cls); });
|
|
},
|
|
|
|
show: function(item) {
|
|
var this$1 = this;
|
|
|
|
|
|
var prev = this.index();
|
|
var next = getIndex(
|
|
this.children[getIndex(item, this.toggles, prev)],
|
|
children(this.$el)
|
|
);
|
|
|
|
if (prev === next) {
|
|
return;
|
|
}
|
|
|
|
this.children.forEach(function (child, i) {
|
|
toggleClass(child, this$1.cls, next === i);
|
|
attr(this$1.toggles[i], 'aria-expanded', next === i);
|
|
});
|
|
|
|
this.connects.forEach(function (ref) {
|
|
var children = ref.children;
|
|
|
|
return this$1.toggleElement(toNodes(children).filter(function (child) { return hasClass(child, this$1.cls); }
|
|
), false, prev >= 0).then(function () { return this$1.toggleElement(children[next], true, prev >= 0); }
|
|
);
|
|
}
|
|
);
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
var tab = {
|
|
|
|
mixins: [Class],
|
|
|
|
extends: Switcher,
|
|
|
|
props: {
|
|
media: Boolean
|
|
},
|
|
|
|
data: {
|
|
media: 960,
|
|
attrItem: 'uk-tab-item'
|
|
},
|
|
|
|
connected: function() {
|
|
|
|
var cls = hasClass(this.$el, 'uk-tab-left')
|
|
? 'uk-tab-left'
|
|
: hasClass(this.$el, 'uk-tab-right')
|
|
? 'uk-tab-right'
|
|
: false;
|
|
|
|
if (cls) {
|
|
this.$create('toggle', this.$el, {cls: cls, mode: 'media', media: this.media});
|
|
}
|
|
}
|
|
|
|
};
|
|
|
|
var toggle = {
|
|
|
|
mixins: [Media, Togglable],
|
|
|
|
args: 'target',
|
|
|
|
props: {
|
|
href: String,
|
|
target: null,
|
|
mode: 'list',
|
|
queued: Boolean
|
|
},
|
|
|
|
data: {
|
|
href: false,
|
|
target: false,
|
|
mode: 'click',
|
|
queued: true
|
|
},
|
|
|
|
connected: function() {
|
|
if (!isFocusable(this.$el)) {
|
|
attr(this.$el, 'tabindex', '0');
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
|
|
target: {
|
|
|
|
get: function(ref, $el) {
|
|
var href = ref.href;
|
|
var target = ref.target;
|
|
|
|
target = queryAll(target || href, $el);
|
|
return target.length && target || [$el];
|
|
},
|
|
|
|
watch: function() {
|
|
this.updateAria();
|
|
},
|
|
|
|
immediate: true
|
|
|
|
}
|
|
|
|
},
|
|
|
|
events: [
|
|
|
|
{
|
|
|
|
name: (pointerEnter + " " + pointerLeave + " focus blur"),
|
|
|
|
filter: function() {
|
|
return includes(this.mode, 'hover');
|
|
},
|
|
|
|
handler: function(e) {
|
|
if (!isTouch(e)) {
|
|
this.toggle(("toggle" + (includes([pointerEnter, 'focus'], e.type) ? 'show' : 'hide')));
|
|
}
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'click',
|
|
|
|
filter: function() {
|
|
return includes(this.mode, 'click') || hasTouch && includes(this.mode, 'hover');
|
|
},
|
|
|
|
handler: function(e) {
|
|
|
|
var link;
|
|
if (closest(e.target, 'a[href="#"], a[href=""]')
|
|
|| (link = closest(e.target, 'a[href]')) && (
|
|
!isToggled(this.target, this.cls)
|
|
|| link.hash && matches(this.target, link.hash)
|
|
)
|
|
) {
|
|
e.preventDefault();
|
|
}
|
|
|
|
this.toggle();
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'toggled',
|
|
|
|
self: true,
|
|
|
|
el: function() {
|
|
return this.target;
|
|
},
|
|
|
|
handler: function(e, toggled) {
|
|
this.updateAria(toggled);
|
|
}
|
|
}
|
|
|
|
],
|
|
|
|
update: {
|
|
|
|
read: function() {
|
|
return includes(this.mode, 'media') && this.media
|
|
? {match: this.matchMedia}
|
|
: false;
|
|
},
|
|
|
|
write: function(ref) {
|
|
var match = ref.match;
|
|
|
|
|
|
var toggled = this.isToggled(this.target);
|
|
if (match ? !toggled : toggled) {
|
|
this.toggle();
|
|
}
|
|
|
|
},
|
|
|
|
events: ['resize']
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
toggle: function(type) {
|
|
var this$1 = this;
|
|
|
|
|
|
if (!trigger(this.target, type || 'toggle', [this])) {
|
|
return;
|
|
}
|
|
|
|
if (!this.queued) {
|
|
return this.toggleElement(this.target);
|
|
}
|
|
|
|
var leaving = this.target.filter(function (el) { return hasClass(el, this$1.clsLeave); });
|
|
|
|
if (leaving.length) {
|
|
this.target.forEach(function (el) {
|
|
var isLeaving = includes(leaving, el);
|
|
this$1.toggleElement(el, isLeaving, isLeaving);
|
|
});
|
|
return;
|
|
}
|
|
|
|
var toggled = this.target.filter(this.isToggled);
|
|
this.toggleElement(toggled, false).then(function () { return this$1.toggleElement(this$1.target.filter(function (el) { return !includes(toggled, el); }
|
|
), true); }
|
|
);
|
|
|
|
},
|
|
|
|
updateAria: function(toggled) {
|
|
attr(this.$el, 'aria-expanded', isBoolean(toggled)
|
|
? toggled
|
|
: isToggled(this.target, this.cls)
|
|
);
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
// TODO improve isToggled handling
|
|
function isToggled(target, cls) {
|
|
return cls
|
|
? hasClass(target, cls.split(' ')[0])
|
|
: isVisible(target);
|
|
}
|
|
|
|
var components$1 = /*#__PURE__*/Object.freeze({
|
|
__proto__: null,
|
|
Accordion: Accordion,
|
|
Alert: alert,
|
|
Cover: cover,
|
|
Drop: drop,
|
|
Dropdown: drop,
|
|
FormCustom: formCustom,
|
|
Gif: gif,
|
|
Grid: grid,
|
|
HeightMatch: heightMatch,
|
|
HeightViewport: heightViewport,
|
|
Icon: Icon,
|
|
Img: img,
|
|
Leader: leader,
|
|
Margin: Margin,
|
|
Modal: modal,
|
|
Nav: nav,
|
|
Navbar: navbar,
|
|
Offcanvas: offcanvas,
|
|
OverflowAuto: overflowAuto,
|
|
Responsive: responsive,
|
|
Scroll: scroll,
|
|
Scrollspy: scrollspy,
|
|
ScrollspyNav: scrollspyNav,
|
|
Sticky: sticky,
|
|
Svg: SVG,
|
|
Switcher: Switcher,
|
|
Tab: tab,
|
|
Toggle: toggle,
|
|
Video: Video,
|
|
Close: Close,
|
|
Spinner: Spinner,
|
|
SlidenavNext: Slidenav,
|
|
SlidenavPrevious: Slidenav,
|
|
SearchIcon: Search,
|
|
Marker: IconComponent,
|
|
NavbarToggleIcon: IconComponent,
|
|
OverlayIcon: IconComponent,
|
|
PaginationNext: IconComponent,
|
|
PaginationPrevious: IconComponent,
|
|
Totop: IconComponent
|
|
});
|
|
|
|
// register components
|
|
each(components$1, function (component, name) { return UIkit.component(name, component); }
|
|
);
|
|
|
|
// core functionality
|
|
UIkit.use(Core);
|
|
|
|
boot(UIkit);
|
|
|
|
var countdown = {
|
|
|
|
mixins: [Class],
|
|
|
|
props: {
|
|
date: String,
|
|
clsWrapper: String
|
|
},
|
|
|
|
data: {
|
|
date: '',
|
|
clsWrapper: '.uk-countdown-%unit%'
|
|
},
|
|
|
|
computed: {
|
|
|
|
date: function(ref) {
|
|
var date = ref.date;
|
|
|
|
return Date.parse(date);
|
|
},
|
|
|
|
days: function(ref, $el) {
|
|
var clsWrapper = ref.clsWrapper;
|
|
|
|
return $(clsWrapper.replace('%unit%', 'days'), $el);
|
|
},
|
|
|
|
hours: function(ref, $el) {
|
|
var clsWrapper = ref.clsWrapper;
|
|
|
|
return $(clsWrapper.replace('%unit%', 'hours'), $el);
|
|
},
|
|
|
|
minutes: function(ref, $el) {
|
|
var clsWrapper = ref.clsWrapper;
|
|
|
|
return $(clsWrapper.replace('%unit%', 'minutes'), $el);
|
|
},
|
|
|
|
seconds: function(ref, $el) {
|
|
var clsWrapper = ref.clsWrapper;
|
|
|
|
return $(clsWrapper.replace('%unit%', 'seconds'), $el);
|
|
},
|
|
|
|
units: function() {
|
|
var this$1 = this;
|
|
|
|
return ['days', 'hours', 'minutes', 'seconds'].filter(function (unit) { return this$1[unit]; });
|
|
}
|
|
|
|
},
|
|
|
|
connected: function() {
|
|
this.start();
|
|
},
|
|
|
|
disconnected: function() {
|
|
var this$1 = this;
|
|
|
|
this.stop();
|
|
this.units.forEach(function (unit) { return empty(this$1[unit]); });
|
|
},
|
|
|
|
events: [
|
|
|
|
{
|
|
|
|
name: 'visibilitychange',
|
|
|
|
el: function() {
|
|
return document;
|
|
},
|
|
|
|
handler: function() {
|
|
if (document.hidden) {
|
|
this.stop();
|
|
} else {
|
|
this.start();
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
],
|
|
|
|
update: {
|
|
|
|
write: function() {
|
|
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() {
|
|
|
|
this.stop();
|
|
|
|
if (this.date && this.units.length) {
|
|
this.$update();
|
|
this.timer = setInterval(this.$update, 1000);
|
|
}
|
|
|
|
},
|
|
|
|
stop: function() {
|
|
|
|
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
|
|
};
|
|
}
|
|
|
|
var clsLeave = 'uk-transition-leave';
|
|
var clsEnter = 'uk-transition-enter';
|
|
|
|
function fade(action, target, duration, stagger) {
|
|
if ( stagger === void 0 ) stagger = 0;
|
|
|
|
|
|
var index = transitionIndex(target, true);
|
|
var propsIn = {opacity: 1};
|
|
var propsOut = {opacity: 0};
|
|
|
|
var wrapIndexFn = function (fn) { return function () { return index === transitionIndex(target) ? fn() : Promise$1.reject(); }; };
|
|
|
|
var leaveFn = wrapIndexFn(function () {
|
|
|
|
addClass(target, clsLeave);
|
|
|
|
return Promise$1.all(getTransitionNodes(target).map(function (child, i) { return new Promise$1(function (resolve) { return setTimeout(function () { return Transition.start(child, propsOut, duration / 2, 'ease').then(resolve); }, i * stagger); }
|
|
); }
|
|
)).then(function () { return removeClass(target, clsLeave); });
|
|
|
|
});
|
|
|
|
var enterFn = wrapIndexFn(function () {
|
|
|
|
var oldHeight = height(target);
|
|
|
|
addClass(target, clsEnter);
|
|
action();
|
|
|
|
css(children(target), {opacity: 0});
|
|
|
|
// Ensure UIkit updates have propagated
|
|
return new Promise$1(function (resolve) { return requestAnimationFrame(function () {
|
|
|
|
var nodes = children(target);
|
|
var newHeight = height(target);
|
|
|
|
// Ensure Grid cells do not stretch when height is applied
|
|
css(target, 'alignContent', 'flex-start');
|
|
height(target, oldHeight);
|
|
|
|
var transitionNodes = getTransitionNodes(target);
|
|
css(nodes, propsOut);
|
|
|
|
var transitions = transitionNodes.map(function (child, i) { return new Promise$1(function (resolve) { return setTimeout(function () { return Transition.start(child, propsIn, duration / 2, 'ease').then(resolve); }, i * stagger); }
|
|
); }
|
|
);
|
|
|
|
if (oldHeight !== newHeight) {
|
|
transitions.push(Transition.start(target, {height: newHeight}, duration / 2 + transitionNodes.length * stagger, 'ease'));
|
|
}
|
|
|
|
Promise$1.all(transitions).then(function () {
|
|
removeClass(target, clsEnter);
|
|
if (index === transitionIndex(target)) {
|
|
css(target, {height: '', alignContent: ''});
|
|
css(nodes, {opacity: ''});
|
|
delete target.dataset.transition;
|
|
}
|
|
resolve();
|
|
});
|
|
}); }
|
|
);
|
|
});
|
|
|
|
return hasClass(target, clsLeave)
|
|
? waitTransitionend(target).then(enterFn)
|
|
: hasClass(target, clsEnter)
|
|
? waitTransitionend(target).then(leaveFn).then(enterFn)
|
|
: leaveFn().then(enterFn);
|
|
}
|
|
|
|
function transitionIndex(target, next) {
|
|
if (next) {
|
|
target.dataset.transition = 1 + transitionIndex(target);
|
|
}
|
|
|
|
return toNumber(target.dataset.transition) || 0;
|
|
}
|
|
|
|
function waitTransitionend(target) {
|
|
return Promise$1.all(children(target).filter(Transition.inProgress).map(function (el) { return new Promise$1(function (resolve) { return once(el, 'transitionend transitioncanceled', resolve); }); }
|
|
));
|
|
}
|
|
|
|
function getTransitionNodes(target) {
|
|
return getRows(children(target)).reduce(function (nodes, row) { return nodes.concat(sortBy$1(row.filter(function (el) { return isInView(el); }), 'offsetLeft')); }, []);
|
|
}
|
|
|
|
function slide (action, target, duration) {
|
|
|
|
return new Promise$1(function (resolve) { return requestAnimationFrame(function () {
|
|
|
|
var nodes = children(target);
|
|
|
|
// Get current state
|
|
var currentProps = nodes.map(function (el) { return getProps(el, true); });
|
|
var targetProps = css(target, ['height', 'padding']);
|
|
|
|
// Cancel previous animations
|
|
Transition.cancel(target);
|
|
nodes.forEach(Transition.cancel);
|
|
reset(target);
|
|
|
|
// Adding, sorting, removing nodes
|
|
action();
|
|
|
|
// Find new nodes
|
|
nodes = nodes.concat(children(target).filter(function (el) { return !includes(nodes, el); }));
|
|
|
|
// Wait for update to propagate
|
|
Promise$1.resolve().then(function () {
|
|
|
|
// Force update
|
|
fastdom.flush();
|
|
|
|
// Get new state
|
|
var targetPropsTo = css(target, ['height', 'padding']);
|
|
var ref = getTransitionProps(target, nodes, currentProps);
|
|
var propsTo = ref[0];
|
|
var propsFrom = ref[1];
|
|
|
|
// Reset to previous state
|
|
nodes.forEach(function (el, i) { return propsFrom[i] && css(el, propsFrom[i]); });
|
|
css(target, assign({display: 'block'}, targetProps));
|
|
|
|
// Start transitions on next frame
|
|
requestAnimationFrame(function () {
|
|
|
|
var transitions = nodes.map(function (el, i) { return parent(el) === target && Transition.start(el, propsTo[i], duration, 'ease'); }
|
|
).concat(Transition.start(target, targetPropsTo, duration, 'ease'));
|
|
|
|
Promise$1.all(transitions).then(function () {
|
|
nodes.forEach(function (el, i) { return parent(el) === target && css(el, 'display', propsTo[i].opacity === 0 ? 'none' : ''); });
|
|
reset(target);
|
|
}, noop).then(resolve);
|
|
|
|
});
|
|
});
|
|
}); });
|
|
}
|
|
|
|
function getProps(el, opacity) {
|
|
|
|
var zIndex = css(el, 'zIndex');
|
|
|
|
return isVisible(el)
|
|
? assign({
|
|
display: '',
|
|
opacity: opacity ? css(el, 'opacity') : '0',
|
|
pointerEvents: 'none',
|
|
position: 'absolute',
|
|
zIndex: zIndex === 'auto' ? index(el) : zIndex
|
|
}, getPositionWithMargin(el))
|
|
: false;
|
|
}
|
|
|
|
function getTransitionProps(target, nodes, currentProps) {
|
|
|
|
var propsTo = nodes.map(function (el, i) { return parent(el) && i in currentProps
|
|
? currentProps[i]
|
|
? isVisible(el)
|
|
? getPositionWithMargin(el)
|
|
: {opacity: 0}
|
|
: {opacity: isVisible(el) ? 1 : 0}
|
|
: false; });
|
|
|
|
var propsFrom = propsTo.map(function (props, i) {
|
|
|
|
var from = parent(nodes[i]) === target && (currentProps[i] || getProps(nodes[i]));
|
|
|
|
if (!from) {
|
|
return false;
|
|
}
|
|
|
|
if (!props) {
|
|
delete from.opacity;
|
|
} else if (!('opacity' in props)) {
|
|
var opacity = from.opacity;
|
|
|
|
if (opacity % 1) {
|
|
props.opacity = 1;
|
|
} else {
|
|
delete from.opacity;
|
|
}
|
|
}
|
|
|
|
return from;
|
|
});
|
|
|
|
return [propsTo, propsFrom];
|
|
}
|
|
|
|
function reset(el) {
|
|
css(el.children, {
|
|
height: '',
|
|
left: '',
|
|
opacity: '',
|
|
pointerEvents: '',
|
|
position: '',
|
|
top: '',
|
|
marginTop: '',
|
|
marginLeft: '',
|
|
transform: '',
|
|
width: '',
|
|
zIndex: ''
|
|
});
|
|
css(el, {height: '', display: '', padding: ''});
|
|
}
|
|
|
|
function getPositionWithMargin(el) {
|
|
var ref = offset(el);
|
|
var height = ref.height;
|
|
var width = ref.width;
|
|
var ref$1 = position(el);
|
|
var top = ref$1.top;
|
|
var left = ref$1.left;
|
|
var ref$2 = css(el, ['marginTop', 'marginLeft']);
|
|
var marginLeft = ref$2.marginLeft;
|
|
var marginTop = ref$2.marginTop;
|
|
|
|
return {top: top, left: left, height: height, width: width, marginLeft: marginLeft, marginTop: marginTop, transform: ''};
|
|
}
|
|
|
|
var Animate = {
|
|
|
|
props: {
|
|
duration: Number,
|
|
animation: Boolean
|
|
},
|
|
|
|
data: {
|
|
duration: 150,
|
|
animation: 'slide'
|
|
},
|
|
|
|
methods: {
|
|
|
|
animate: function(action, target) {
|
|
var this$1 = this;
|
|
if ( target === void 0 ) target = this.$el;
|
|
|
|
|
|
var name = this.animation;
|
|
var animationFn = name === 'fade'
|
|
? fade
|
|
: name === 'delayed-fade'
|
|
? function () {
|
|
var args = [], len = arguments.length;
|
|
while ( len-- ) args[ len ] = arguments[ len ];
|
|
|
|
return fade.apply(void 0, args.concat( [40] ));
|
|
}
|
|
: !name
|
|
? function () {
|
|
action();
|
|
return Promise$1.resolve();
|
|
}
|
|
: slide;
|
|
|
|
return animationFn(action, target, this.duration)
|
|
.then(function () { return this$1.$update(target, 'resize'); }, noop);
|
|
}
|
|
|
|
}
|
|
};
|
|
|
|
var filter = {
|
|
|
|
mixins: [Animate],
|
|
|
|
args: 'target',
|
|
|
|
props: {
|
|
target: Boolean,
|
|
selActive: Boolean
|
|
},
|
|
|
|
data: {
|
|
target: null,
|
|
selActive: false,
|
|
attrItem: 'uk-filter-control',
|
|
cls: 'uk-active',
|
|
duration: 250
|
|
},
|
|
|
|
computed: {
|
|
|
|
toggles: {
|
|
|
|
get: function(ref, $el) {
|
|
var attrItem = ref.attrItem;
|
|
|
|
return $$(("[" + attrItem + "],[data-" + attrItem + "]"), $el);
|
|
},
|
|
|
|
watch: function() {
|
|
var this$1 = this;
|
|
|
|
|
|
this.updateState();
|
|
|
|
if (this.selActive !== false) {
|
|
var actives = $$(this.selActive, this.$el);
|
|
this.toggles.forEach(function (el) { return toggleClass(el, this$1.cls, includes(actives, el)); });
|
|
}
|
|
|
|
},
|
|
|
|
immediate: true
|
|
|
|
},
|
|
|
|
children: {
|
|
|
|
get: function(ref, $el) {
|
|
var target = ref.target;
|
|
|
|
return $$((target + " > *"), $el);
|
|
},
|
|
|
|
watch: function(list, old) {
|
|
if (old && !isEqualList(list, old)) {
|
|
this.updateState();
|
|
}
|
|
},
|
|
|
|
immediate: true
|
|
|
|
}
|
|
|
|
},
|
|
|
|
events: [
|
|
|
|
{
|
|
|
|
name: 'click',
|
|
|
|
delegate: function() {
|
|
return ("[" + (this.attrItem) + "],[data-" + (this.attrItem) + "]");
|
|
},
|
|
|
|
handler: function(e) {
|
|
|
|
e.preventDefault();
|
|
this.apply(e.current);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
],
|
|
|
|
methods: {
|
|
|
|
apply: function(el) {
|
|
var prevState = this.getState();
|
|
var newState = mergeState(el, this.attrItem, this.getState());
|
|
|
|
if (!isEqualState(prevState, newState)) {
|
|
this.setState(newState);
|
|
}
|
|
},
|
|
|
|
getState: function() {
|
|
var this$1 = this;
|
|
|
|
return this.toggles
|
|
.filter(function (item) { return hasClass(item, this$1.cls); })
|
|
.reduce(function (state, el) { return mergeState(el, this$1.attrItem, state); }, {filter: {'': ''}, sort: []});
|
|
},
|
|
|
|
setState: function(state, animate) {
|
|
var this$1 = this;
|
|
if ( animate === void 0 ) animate = true;
|
|
|
|
|
|
state = assign({filter: {'': ''}, sort: []}, state);
|
|
|
|
trigger(this.$el, 'beforeFilter', [this, state]);
|
|
|
|
this.toggles.forEach(function (el) { return toggleClass(el, this$1.cls, !!matchFilter(el, this$1.attrItem, state)); });
|
|
|
|
Promise$1.all($$(this.target, this.$el).map(function (target) {
|
|
var filterFn = function () {
|
|
applyState(state, target, children(target));
|
|
this$1.$update(this$1.$el);
|
|
};
|
|
return animate ? this$1.animate(filterFn, target) : filterFn();
|
|
})).then(function () { return trigger(this$1.$el, 'afterFilter', [this$1]); });
|
|
|
|
},
|
|
|
|
updateState: function() {
|
|
var this$1 = this;
|
|
|
|
fastdom.write(function () { return this$1.setState(this$1.getState(), false); });
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
function getFilter(el, attr) {
|
|
return parseOptions(data(el, attr), ['filter']);
|
|
}
|
|
|
|
function isEqualState(stateA, stateB) {
|
|
return ['filter', 'sort'].every(function (prop) { return isEqual(stateA[prop], stateB[prop]); });
|
|
}
|
|
|
|
function applyState(state, target, children) {
|
|
var selector = getSelector(state);
|
|
|
|
children.forEach(function (el) { return css(el, 'display', selector && !matches(el, selector) ? 'none' : ''); });
|
|
|
|
var ref = state.sort;
|
|
var sort = ref[0];
|
|
var order = ref[1];
|
|
|
|
if (sort) {
|
|
var sorted = sortItems(children, sort, order);
|
|
if (!isEqual(sorted, children)) {
|
|
append(target, sorted);
|
|
}
|
|
}
|
|
}
|
|
|
|
function mergeState(el, attr, state) {
|
|
|
|
var filterBy = getFilter(el, attr);
|
|
var filter = filterBy.filter;
|
|
var group = filterBy.group;
|
|
var sort = filterBy.sort;
|
|
var order = filterBy.order; if ( order === void 0 ) order = 'asc';
|
|
|
|
if (filter || isUndefined(sort)) {
|
|
|
|
if (group) {
|
|
|
|
if (filter) {
|
|
delete state.filter[''];
|
|
state.filter[group] = filter;
|
|
} else {
|
|
delete state.filter[group];
|
|
|
|
if (isEmpty(state.filter) || '' in state.filter) {
|
|
state.filter = {'': filter || ''};
|
|
}
|
|
|
|
}
|
|
|
|
} else {
|
|
state.filter = {'': filter || ''};
|
|
}
|
|
|
|
}
|
|
|
|
if (!isUndefined(sort)) {
|
|
state.sort = [sort, order];
|
|
}
|
|
|
|
return state;
|
|
}
|
|
|
|
function matchFilter(el, attr, ref) {
|
|
var stateFilter = ref.filter; if ( stateFilter === void 0 ) stateFilter = {'': ''};
|
|
var ref_sort = ref.sort;
|
|
var stateSort = ref_sort[0];
|
|
var stateOrder = ref_sort[1];
|
|
|
|
|
|
var ref$1 = getFilter(el, attr);
|
|
var filter = ref$1.filter; if ( filter === void 0 ) filter = '';
|
|
var group = ref$1.group; if ( group === void 0 ) group = '';
|
|
var sort = ref$1.sort;
|
|
var order = ref$1.order; if ( order === void 0 ) order = 'asc';
|
|
|
|
return isUndefined(sort)
|
|
? group in stateFilter && filter === stateFilter[group]
|
|
|| !filter && group && !(group in stateFilter) && !stateFilter['']
|
|
: stateSort === sort && stateOrder === order;
|
|
}
|
|
|
|
function isEqualList(listA, listB) {
|
|
return listA.length === listB.length
|
|
&& listA.every(function (el) { return ~listB.indexOf(el); });
|
|
}
|
|
|
|
function getSelector(ref) {
|
|
var filter = ref.filter;
|
|
|
|
var selector = '';
|
|
each(filter, function (value) { return selector += value || ''; });
|
|
return selector;
|
|
}
|
|
|
|
function sortItems(nodes, sort, order) {
|
|
return assign([], nodes).sort(function (a, b) { return data(a, sort).localeCompare(data(b, sort), undefined, {numeric: true}) * (order === 'asc' || -1); });
|
|
}
|
|
|
|
var Animations$2 = {
|
|
|
|
slide: {
|
|
|
|
show: function(dir) {
|
|
return [
|
|
{transform: translate(dir * -100)},
|
|
{transform: translate()}
|
|
];
|
|
},
|
|
|
|
percent: function(current) {
|
|
return translated(current);
|
|
},
|
|
|
|
translate: function(percent, dir) {
|
|
return [
|
|
{transform: translate(dir * -100 * percent)},
|
|
{transform: translate(dir * 100 * (1 - percent))}
|
|
];
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
function translated(el) {
|
|
return Math.abs(css(el, 'transform').split(',')[4] / el.offsetWidth) || 0;
|
|
}
|
|
|
|
function translate(value, unit) {
|
|
if ( value === void 0 ) value = 0;
|
|
if ( unit === void 0 ) unit = '%';
|
|
|
|
value += value ? unit : '';
|
|
return isIE ? ("translateX(" + value + ")") : ("translate3d(" + value + ", 0, 0)"); // currently not translate3d in IE, translate3d within translate3d does not work while transitioning
|
|
}
|
|
|
|
function scale3d(value) {
|
|
return ("scale3d(" + value + ", " + value + ", 1)");
|
|
}
|
|
|
|
var Animations$1 = assign({}, Animations$2, {
|
|
|
|
fade: {
|
|
|
|
show: function() {
|
|
return [
|
|
{opacity: 0},
|
|
{opacity: 1}
|
|
];
|
|
},
|
|
|
|
percent: function(current) {
|
|
return 1 - css(current, 'opacity');
|
|
},
|
|
|
|
translate: function(percent) {
|
|
return [
|
|
{opacity: 1 - percent},
|
|
{opacity: percent}
|
|
];
|
|
}
|
|
|
|
},
|
|
|
|
scale: {
|
|
|
|
show: function() {
|
|
return [
|
|
{opacity: 0, transform: scale3d(1 - .2)},
|
|
{opacity: 1, transform: scale3d(1)}
|
|
];
|
|
},
|
|
|
|
percent: function(current) {
|
|
return 1 - css(current, 'opacity');
|
|
},
|
|
|
|
translate: function(percent) {
|
|
return [
|
|
{opacity: 1 - percent, transform: scale3d(1 - .2 * percent)},
|
|
{opacity: percent, transform: scale3d(1 - .2 + .2 * percent)}
|
|
];
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
function Transitioner$1(prev, next, dir, ref) {
|
|
var animation = ref.animation;
|
|
var easing = ref.easing;
|
|
|
|
|
|
var percent = animation.percent;
|
|
var translate = animation.translate;
|
|
var show = animation.show; if ( show === void 0 ) show = noop;
|
|
var props = show(dir);
|
|
var deferred = new Deferred();
|
|
|
|
return {
|
|
|
|
dir: dir,
|
|
|
|
show: function(duration, percent, linear) {
|
|
var this$1 = this;
|
|
if ( percent === void 0 ) percent = 0;
|
|
|
|
|
|
var timing = linear ? 'linear' : easing;
|
|
duration -= Math.round(duration * clamp(percent, -1, 1));
|
|
|
|
this.translate(percent);
|
|
|
|
triggerUpdate$1(next, 'itemin', {percent: percent, duration: duration, timing: timing, dir: dir});
|
|
triggerUpdate$1(prev, 'itemout', {percent: 1 - percent, duration: duration, timing: timing, dir: dir});
|
|
|
|
Promise$1.all([
|
|
Transition.start(next, props[1], duration, timing),
|
|
Transition.start(prev, props[0], duration, timing)
|
|
]).then(function () {
|
|
this$1.reset();
|
|
deferred.resolve();
|
|
}, noop);
|
|
|
|
return deferred.promise;
|
|
},
|
|
|
|
cancel: function() {
|
|
Transition.cancel([next, prev]);
|
|
},
|
|
|
|
reset: function() {
|
|
for (var prop in props[0]) {
|
|
css([next, prev], prop, '');
|
|
}
|
|
},
|
|
|
|
forward: function(duration, percent) {
|
|
if ( percent === void 0 ) percent = this.percent();
|
|
|
|
Transition.cancel([next, prev]);
|
|
return this.show(duration, percent, true);
|
|
},
|
|
|
|
translate: function(percent) {
|
|
|
|
this.reset();
|
|
|
|
var props = translate(percent, dir);
|
|
css(next, props[1]);
|
|
css(prev, props[0]);
|
|
triggerUpdate$1(next, 'itemtranslatein', {percent: percent, dir: dir});
|
|
triggerUpdate$1(prev, 'itemtranslateout', {percent: 1 - percent, dir: dir});
|
|
|
|
},
|
|
|
|
percent: function() {
|
|
return percent(prev || next, next, dir);
|
|
},
|
|
|
|
getDistance: function() {
|
|
return prev && prev.offsetWidth;
|
|
}
|
|
|
|
};
|
|
|
|
}
|
|
|
|
function triggerUpdate$1(el, type, data) {
|
|
trigger(el, createEvent(type, false, false, data));
|
|
}
|
|
|
|
var SliderAutoplay = {
|
|
|
|
props: {
|
|
autoplay: Boolean,
|
|
autoplayInterval: Number,
|
|
pauseOnHover: Boolean
|
|
},
|
|
|
|
data: {
|
|
autoplay: false,
|
|
autoplayInterval: 7000,
|
|
pauseOnHover: true
|
|
},
|
|
|
|
connected: function() {
|
|
this.autoplay && this.startAutoplay();
|
|
},
|
|
|
|
disconnected: function() {
|
|
this.stopAutoplay();
|
|
},
|
|
|
|
update: function() {
|
|
attr(this.slides, 'tabindex', '-1');
|
|
},
|
|
|
|
events: [
|
|
|
|
{
|
|
|
|
name: 'visibilitychange',
|
|
|
|
el: function() {
|
|
return document;
|
|
},
|
|
|
|
filter: function() {
|
|
return this.autoplay;
|
|
},
|
|
|
|
handler: function() {
|
|
if (document.hidden) {
|
|
this.stopAutoplay();
|
|
} else {
|
|
this.startAutoplay();
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
],
|
|
|
|
methods: {
|
|
|
|
startAutoplay: function() {
|
|
var this$1 = this;
|
|
|
|
|
|
this.stopAutoplay();
|
|
|
|
this.interval = setInterval(
|
|
function () { return (!this$1.draggable || !$(':focus', this$1.$el))
|
|
&& (!this$1.pauseOnHover || !matches(this$1.$el, ':hover'))
|
|
&& !this$1.stack.length
|
|
&& this$1.show('next'); },
|
|
this.autoplayInterval
|
|
);
|
|
|
|
},
|
|
|
|
stopAutoplay: function() {
|
|
this.interval && clearInterval(this.interval);
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
var SliderDrag = {
|
|
|
|
props: {
|
|
draggable: Boolean
|
|
},
|
|
|
|
data: {
|
|
draggable: true,
|
|
threshold: 10
|
|
},
|
|
|
|
created: function() {
|
|
var this$1 = this;
|
|
|
|
|
|
['start', 'move', 'end'].forEach(function (key) {
|
|
|
|
var fn = this$1[key];
|
|
this$1[key] = function (e) {
|
|
|
|
var pos = getEventPos(e).x * (isRtl ? -1 : 1);
|
|
|
|
this$1.prevPos = pos !== this$1.pos ? this$1.pos : this$1.prevPos;
|
|
this$1.pos = pos;
|
|
|
|
fn(e);
|
|
};
|
|
|
|
});
|
|
|
|
},
|
|
|
|
events: [
|
|
|
|
{
|
|
|
|
name: pointerDown,
|
|
|
|
delegate: function() {
|
|
return this.selSlides;
|
|
},
|
|
|
|
handler: function(e) {
|
|
|
|
if (!this.draggable
|
|
|| !isTouch(e) && hasTextNodesOnly(e.target)
|
|
|| closest(e.target, selInput)
|
|
|| e.button > 0
|
|
|| this.length < 2
|
|
) {
|
|
return;
|
|
}
|
|
|
|
this.start(e);
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
name: 'dragstart',
|
|
|
|
handler: function(e) {
|
|
e.preventDefault();
|
|
}
|
|
}
|
|
|
|
],
|
|
|
|
methods: {
|
|
|
|
start: function() {
|
|
|
|
this.drag = this.pos;
|
|
|
|
if (this._transitioner) {
|
|
|
|
this.percent = this._transitioner.percent();
|
|
this.drag += this._transitioner.getDistance() * this.percent * this.dir;
|
|
|
|
this._transitioner.cancel();
|
|
this._transitioner.translate(this.percent);
|
|
|
|
this.dragging = true;
|
|
|
|
this.stack = [];
|
|
|
|
} else {
|
|
this.prevIndex = this.index;
|
|
}
|
|
|
|
on(document, pointerMove, this.move, {passive: false});
|
|
|
|
// 'input' event is triggered by video controls
|
|
on(document, (pointerUp + " " + pointerCancel + " input"), this.end, true);
|
|
|
|
css(this.list, 'userSelect', 'none');
|
|
|
|
},
|
|
|
|
move: function(e) {
|
|
var this$1 = this;
|
|
|
|
|
|
var distance = this.pos - this.drag;
|
|
|
|
if (distance === 0 || this.prevPos === this.pos || !this.dragging && Math.abs(distance) < this.threshold) {
|
|
return;
|
|
}
|
|
|
|
// prevent click event
|
|
css(this.list, 'pointerEvents', 'none');
|
|
|
|
e.cancelable && e.preventDefault();
|
|
|
|
this.dragging = true;
|
|
this.dir = (distance < 0 ? 1 : -1);
|
|
|
|
var ref = this;
|
|
var slides = ref.slides;
|
|
var ref$1 = this;
|
|
var prevIndex = ref$1.prevIndex;
|
|
var dis = Math.abs(distance);
|
|
var nextIndex = this.getIndex(prevIndex + this.dir, prevIndex);
|
|
var width = this._getDistance(prevIndex, nextIndex) || slides[prevIndex].offsetWidth;
|
|
|
|
while (nextIndex !== prevIndex && dis > width) {
|
|
|
|
this.drag -= width * this.dir;
|
|
|
|
prevIndex = nextIndex;
|
|
dis -= width;
|
|
nextIndex = this.getIndex(prevIndex + this.dir, prevIndex);
|
|
width = this._getDistance(prevIndex, nextIndex) || slides[prevIndex].offsetWidth;
|
|
|
|
}
|
|
|
|
this.percent = dis / width;
|
|
|
|
var prev = slides[prevIndex];
|
|
var next = slides[nextIndex];
|
|
var changed = this.index !== nextIndex;
|
|
var edge = prevIndex === nextIndex;
|
|
|
|
var itemShown;
|
|
|
|
[this.index, this.prevIndex].filter(function (i) { return !includes([nextIndex, prevIndex], i); }).forEach(function (i) {
|
|
trigger(slides[i], 'itemhidden', [this$1]);
|
|
|
|
if (edge) {
|
|
itemShown = true;
|
|
this$1.prevIndex = prevIndex;
|
|
}
|
|
|
|
});
|
|
|
|
if (this.index === prevIndex && this.prevIndex !== prevIndex || itemShown) {
|
|
trigger(slides[this.index], 'itemshown', [this]);
|
|
}
|
|
|
|
if (changed) {
|
|
this.prevIndex = prevIndex;
|
|
this.index = nextIndex;
|
|
|
|
!edge && trigger(prev, 'beforeitemhide', [this]);
|
|
trigger(next, 'beforeitemshow', [this]);
|
|
}
|
|
|
|
this._transitioner = this._translate(Math.abs(this.percent), prev, !edge && next);
|
|
|
|
if (changed) {
|
|
!edge && trigger(prev, 'itemhide', [this]);
|
|
trigger(next, 'itemshow', [this]);
|
|
}
|
|
|
|
},
|
|
|
|
end: function() {
|
|
|
|
off(document, pointerMove, this.move, {passive: false});
|
|
off(document, (pointerUp + " " + pointerCancel + " input"), this.end, true);
|
|
|
|
if (this.dragging) {
|
|
|
|
this.dragging = null;
|
|
|
|
if (this.index === this.prevIndex) {
|
|
this.percent = 1 - this.percent;
|
|
this.dir *= -1;
|
|
this._show(false, this.index, true);
|
|
this._transitioner = null;
|
|
} else {
|
|
|
|
var dirChange = (isRtl ? this.dir * (isRtl ? 1 : -1) : this.dir) < 0 === this.prevPos > this.pos;
|
|
this.index = dirChange ? this.index : this.prevIndex;
|
|
|
|
if (dirChange) {
|
|
this.percent = 1 - this.percent;
|
|
}
|
|
|
|
this.show(this.dir > 0 && !dirChange || this.dir < 0 && dirChange ? 'next' : 'previous', true);
|
|
}
|
|
|
|
}
|
|
|
|
css(this.list, {userSelect: '', pointerEvents: ''});
|
|
|
|
this.drag
|
|
= this.percent
|
|
= null;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
function hasTextNodesOnly(el) {
|
|
return !el.children.length && el.childNodes.length;
|
|
}
|
|
|
|
var SliderNav = {
|
|
|
|
data: {
|
|
selNav: false
|
|
},
|
|
|
|
computed: {
|
|
|
|
nav: function(ref, $el) {
|
|
var selNav = ref.selNav;
|
|
|
|
return $(selNav, $el);
|
|
},
|
|
|
|
selNavItem: function(ref) {
|
|
var attrItem = ref.attrItem;
|
|
|
|
return ("[" + attrItem + "],[data-" + attrItem + "]");
|
|
},
|
|
|
|
navItems: function(_, $el) {
|
|
return $$(this.selNavItem, $el);
|
|
}
|
|
|
|
},
|
|
|
|
update: {
|
|
|
|
write: function() {
|
|
var this$1 = this;
|
|
|
|
|
|
if (this.nav && this.length !== this.nav.children.length) {
|
|
html(this.nav, this.slides.map(function (_, i) { return ("<li " + (this$1.attrItem) + "=\"" + i + "\"><a href></a></li>"); }).join(''));
|
|
}
|
|
|
|
this.navItems.concat(this.nav).forEach(function (el) { return el && (el.hidden = !this$1.maxIndex); });
|
|
|
|
this.updateNav();
|
|
|
|
},
|
|
|
|
events: ['resize']
|
|
|
|
},
|
|
|
|
events: [
|
|
|
|
{
|
|
|
|
name: 'click',
|
|
|
|
delegate: function() {
|
|
return this.selNavItem;
|
|
},
|
|
|
|
handler: function(e) {
|
|
e.preventDefault();
|
|
this.show(data(e.current, this.attrItem));
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'itemshow',
|
|
handler: 'updateNav'
|
|
|
|
}
|
|
|
|
],
|
|
|
|
methods: {
|
|
|
|
updateNav: function() {
|
|
var this$1 = this;
|
|
|
|
|
|
var i = this.getValidIndex();
|
|
this.navItems.forEach(function (el) {
|
|
|
|
var cmd = data(el, this$1.attrItem);
|
|
|
|
toggleClass(el, this$1.clsActive, toNumber(cmd) === i);
|
|
toggleClass(el, 'uk-invisible', this$1.finite && (cmd === 'previous' && i === 0 || cmd === 'next' && i >= this$1.maxIndex));
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
var Slider = {
|
|
|
|
mixins: [SliderAutoplay, SliderDrag, SliderNav],
|
|
|
|
props: {
|
|
clsActivated: Boolean,
|
|
easing: String,
|
|
index: Number,
|
|
finite: Boolean,
|
|
velocity: Number,
|
|
selSlides: String
|
|
},
|
|
|
|
data: function () { return ({
|
|
easing: 'ease',
|
|
finite: false,
|
|
velocity: 1,
|
|
index: 0,
|
|
prevIndex: -1,
|
|
stack: [],
|
|
percent: 0,
|
|
clsActive: 'uk-active',
|
|
clsActivated: false,
|
|
Transitioner: false,
|
|
transitionOptions: {}
|
|
}); },
|
|
|
|
connected: function() {
|
|
this.prevIndex = -1;
|
|
this.index = this.getValidIndex(this.$props.index);
|
|
this.stack = [];
|
|
},
|
|
|
|
disconnected: function() {
|
|
removeClass(this.slides, this.clsActive);
|
|
},
|
|
|
|
computed: {
|
|
|
|
duration: function(ref, $el) {
|
|
var velocity = ref.velocity;
|
|
|
|
return speedUp($el.offsetWidth / velocity);
|
|
},
|
|
|
|
list: function(ref, $el) {
|
|
var selList = ref.selList;
|
|
|
|
return $(selList, $el);
|
|
},
|
|
|
|
maxIndex: function() {
|
|
return this.length - 1;
|
|
},
|
|
|
|
selSlides: function(ref) {
|
|
var selList = ref.selList;
|
|
var selSlides = ref.selSlides;
|
|
|
|
return (selList + " " + (selSlides || '> *'));
|
|
},
|
|
|
|
slides: {
|
|
|
|
get: function() {
|
|
return $$(this.selSlides, this.$el);
|
|
},
|
|
|
|
watch: function() {
|
|
this.$reset();
|
|
}
|
|
|
|
},
|
|
|
|
length: function() {
|
|
return this.slides.length;
|
|
}
|
|
|
|
},
|
|
|
|
events: {
|
|
|
|
itemshown: function() {
|
|
this.$update(this.list);
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
show: function(index, force) {
|
|
var this$1 = this;
|
|
if ( force === void 0 ) force = false;
|
|
|
|
|
|
if (this.dragging || !this.length) {
|
|
return;
|
|
}
|
|
|
|
var ref = this;
|
|
var stack = ref.stack;
|
|
var queueIndex = force ? 0 : stack.length;
|
|
var reset = function () {
|
|
stack.splice(queueIndex, 1);
|
|
|
|
if (stack.length) {
|
|
this$1.show(stack.shift(), true);
|
|
}
|
|
};
|
|
|
|
stack[force ? 'unshift' : 'push'](index);
|
|
|
|
if (!force && stack.length > 1) {
|
|
|
|
if (stack.length === 2) {
|
|
this._transitioner.forward(Math.min(this.duration, 200));
|
|
}
|
|
|
|
return;
|
|
}
|
|
|
|
var prevIndex = this.getIndex(this.index);
|
|
var prev = hasClass(this.slides, this.clsActive) && this.slides[prevIndex];
|
|
var nextIndex = this.getIndex(index, this.index);
|
|
var next = this.slides[nextIndex];
|
|
|
|
if (prev === next) {
|
|
reset();
|
|
return;
|
|
}
|
|
|
|
this.dir = getDirection(index, prevIndex);
|
|
this.prevIndex = prevIndex;
|
|
this.index = nextIndex;
|
|
|
|
if (prev && !trigger(prev, 'beforeitemhide', [this])
|
|
|| !trigger(next, 'beforeitemshow', [this, prev])
|
|
) {
|
|
this.index = this.prevIndex;
|
|
reset();
|
|
return;
|
|
}
|
|
|
|
var promise = this._show(prev, next, force).then(function () {
|
|
|
|
prev && trigger(prev, 'itemhidden', [this$1]);
|
|
trigger(next, 'itemshown', [this$1]);
|
|
|
|
return new Promise$1(function (resolve) {
|
|
fastdom.write(function () {
|
|
stack.shift();
|
|
if (stack.length) {
|
|
this$1.show(stack.shift(), true);
|
|
} else {
|
|
this$1._transitioner = null;
|
|
}
|
|
resolve();
|
|
});
|
|
});
|
|
|
|
});
|
|
|
|
prev && trigger(prev, 'itemhide', [this]);
|
|
trigger(next, 'itemshow', [this]);
|
|
|
|
return promise;
|
|
|
|
},
|
|
|
|
getIndex: function(index, prev) {
|
|
if ( index === void 0 ) index = this.index;
|
|
if ( prev === void 0 ) prev = this.index;
|
|
|
|
return clamp(getIndex(index, this.slides, prev, this.finite), 0, this.maxIndex);
|
|
},
|
|
|
|
getValidIndex: function(index, prevIndex) {
|
|
if ( index === void 0 ) index = this.index;
|
|
if ( prevIndex === void 0 ) prevIndex = this.prevIndex;
|
|
|
|
return this.getIndex(index, prevIndex);
|
|
},
|
|
|
|
_show: function(prev, next, force) {
|
|
|
|
this._transitioner = this._getTransitioner(
|
|
prev,
|
|
next,
|
|
this.dir,
|
|
assign({
|
|
easing: force
|
|
? next.offsetWidth < 600
|
|
? 'cubic-bezier(0.25, 0.46, 0.45, 0.94)' /* easeOutQuad */
|
|
: 'cubic-bezier(0.165, 0.84, 0.44, 1)' /* easeOutQuart */
|
|
: this.easing
|
|
}, this.transitionOptions)
|
|
);
|
|
|
|
if (!force && !prev) {
|
|
this._translate(1);
|
|
return Promise$1.resolve();
|
|
}
|
|
|
|
var ref = this.stack;
|
|
var length = ref.length;
|
|
return this._transitioner[length > 1 ? 'forward' : 'show'](length > 1 ? Math.min(this.duration, 75 + 75 / (length - 1)) : this.duration, this.percent);
|
|
|
|
},
|
|
|
|
_getDistance: function(prev, next) {
|
|
return this._getTransitioner(prev, prev !== next && next).getDistance();
|
|
},
|
|
|
|
_translate: function(percent, prev, next) {
|
|
if ( prev === void 0 ) prev = this.prevIndex;
|
|
if ( next === void 0 ) next = this.index;
|
|
|
|
var transitioner = this._getTransitioner(prev !== next ? prev : false, next);
|
|
transitioner.translate(percent);
|
|
return transitioner;
|
|
},
|
|
|
|
_getTransitioner: function(prev, next, dir, options) {
|
|
if ( prev === void 0 ) prev = this.prevIndex;
|
|
if ( next === void 0 ) next = this.index;
|
|
if ( dir === void 0 ) dir = this.dir || 1;
|
|
if ( options === void 0 ) options = this.transitionOptions;
|
|
|
|
return new this.Transitioner(
|
|
isNumber(prev) ? this.slides[prev] : prev,
|
|
isNumber(next) ? this.slides[next] : next,
|
|
dir * (isRtl ? -1 : 1),
|
|
options
|
|
);
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
function getDirection(index, prevIndex) {
|
|
return index === 'next'
|
|
? 1
|
|
: index === 'previous'
|
|
? -1
|
|
: index < prevIndex
|
|
? -1
|
|
: 1;
|
|
}
|
|
|
|
function speedUp(x) {
|
|
return .5 * x + 300; // parabola through (400,500; 600,600; 1800,1200)
|
|
}
|
|
|
|
var Slideshow = {
|
|
|
|
mixins: [Slider],
|
|
|
|
props: {
|
|
animation: String
|
|
},
|
|
|
|
data: {
|
|
animation: 'slide',
|
|
clsActivated: 'uk-transition-active',
|
|
Animations: Animations$2,
|
|
Transitioner: Transitioner$1
|
|
},
|
|
|
|
computed: {
|
|
|
|
animation: function(ref) {
|
|
var animation = ref.animation;
|
|
var Animations = ref.Animations;
|
|
|
|
return assign(Animations[animation] || Animations.slide, {name: animation});
|
|
},
|
|
|
|
transitionOptions: function() {
|
|
return {animation: this.animation};
|
|
}
|
|
|
|
},
|
|
|
|
events: {
|
|
|
|
'itemshow itemhide itemshown itemhidden': function(ref) {
|
|
var target = ref.target;
|
|
|
|
this.$update(target);
|
|
},
|
|
|
|
beforeitemshow: function(ref) {
|
|
var target = ref.target;
|
|
|
|
addClass(target, this.clsActive);
|
|
},
|
|
|
|
itemshown: function(ref) {
|
|
var target = ref.target;
|
|
|
|
addClass(target, this.clsActivated);
|
|
},
|
|
|
|
itemhidden: function(ref) {
|
|
var target = ref.target;
|
|
|
|
removeClass(target, this.clsActive, this.clsActivated);
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
var LightboxPanel = {
|
|
|
|
mixins: [Container, Modal, Togglable, Slideshow],
|
|
|
|
functional: true,
|
|
|
|
props: {
|
|
delayControls: Number,
|
|
preload: Number,
|
|
videoAutoplay: Boolean,
|
|
template: String
|
|
},
|
|
|
|
data: function () { return ({
|
|
preload: 1,
|
|
videoAutoplay: false,
|
|
delayControls: 3000,
|
|
items: [],
|
|
cls: 'uk-open',
|
|
clsPage: 'uk-lightbox-page',
|
|
selList: '.uk-lightbox-items',
|
|
attrItem: 'uk-lightbox-item',
|
|
selClose: '.uk-close-large',
|
|
selCaption: '.uk-lightbox-caption',
|
|
pauseOnHover: false,
|
|
velocity: 2,
|
|
Animations: Animations$1,
|
|
template: "<div class=\"uk-lightbox uk-overflow-hidden\"> <ul class=\"uk-lightbox-items\"></ul> <div class=\"uk-lightbox-toolbar uk-position-top uk-text-right uk-transition-slide-top uk-transition-opaque\"> <button class=\"uk-lightbox-toolbar-icon uk-close-large\" type=\"button\" uk-close></button> </div> <a class=\"uk-lightbox-button uk-position-center-left uk-position-medium uk-transition-fade\" href uk-slidenav-previous uk-lightbox-item=\"previous\"></a> <a class=\"uk-lightbox-button uk-position-center-right uk-position-medium uk-transition-fade\" href uk-slidenav-next uk-lightbox-item=\"next\"></a> <div class=\"uk-lightbox-toolbar uk-lightbox-caption uk-position-bottom uk-text-center uk-transition-slide-bottom uk-transition-opaque\"></div> </div>"
|
|
}); },
|
|
|
|
created: function() {
|
|
|
|
var $el = $(this.template);
|
|
var list = $(this.selList, $el);
|
|
this.items.forEach(function () { return append(list, '<li>'); });
|
|
|
|
this.$mount(append(this.container, $el));
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
caption: function(ref, $el) {
|
|
var selCaption = ref.selCaption;
|
|
|
|
return $(selCaption, $el);
|
|
}
|
|
|
|
},
|
|
|
|
events: [
|
|
|
|
{
|
|
|
|
name: (pointerMove + " " + pointerDown + " keydown"),
|
|
|
|
handler: 'showControls'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'click',
|
|
|
|
self: true,
|
|
|
|
delegate: function() {
|
|
return this.selSlides;
|
|
},
|
|
|
|
handler: function(e) {
|
|
|
|
if (e.defaultPrevented) {
|
|
return;
|
|
}
|
|
|
|
this.hide();
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'shown',
|
|
|
|
self: true,
|
|
|
|
handler: function() {
|
|
this.showControls();
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'hide',
|
|
|
|
self: true,
|
|
|
|
handler: function() {
|
|
|
|
this.hideControls();
|
|
|
|
removeClass(this.slides, this.clsActive);
|
|
Transition.stop(this.slides);
|
|
|
|
}
|
|
},
|
|
|
|
{
|
|
|
|
name: 'hidden',
|
|
|
|
self: true,
|
|
|
|
handler: function() {
|
|
this.$destroy(true);
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'keyup',
|
|
|
|
el: function() {
|
|
return document;
|
|
},
|
|
|
|
handler: function(e) {
|
|
|
|
if (!this.isToggled(this.$el) || !this.draggable) {
|
|
return;
|
|
}
|
|
|
|
switch (e.keyCode) {
|
|
case 37:
|
|
this.show('previous');
|
|
break;
|
|
case 39:
|
|
this.show('next');
|
|
break;
|
|
}
|
|
}
|
|
},
|
|
|
|
{
|
|
|
|
name: 'beforeitemshow',
|
|
|
|
handler: function(e) {
|
|
|
|
if (this.isToggled()) {
|
|
return;
|
|
}
|
|
|
|
this.draggable = false;
|
|
|
|
e.preventDefault();
|
|
|
|
this.toggleElement(this.$el, true, false);
|
|
|
|
this.animation = Animations$1['scale'];
|
|
removeClass(e.target, this.clsActive);
|
|
this.stack.splice(1, 0, this.index);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'itemshow',
|
|
|
|
handler: function() {
|
|
|
|
html(this.caption, this.getItem().caption || '');
|
|
|
|
for (var j = -this.preload; j <= this.preload; j++) {
|
|
this.loadItem(this.index + j);
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'itemshown',
|
|
|
|
handler: function() {
|
|
this.draggable = this.$props.draggable;
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'itemload',
|
|
|
|
handler: function(_, item) {
|
|
var this$1 = this;
|
|
|
|
|
|
var src = item.source;
|
|
var type = item.type;
|
|
var alt = item.alt; if ( alt === void 0 ) alt = '';
|
|
var poster = item.poster;
|
|
var attrs = item.attrs; if ( attrs === void 0 ) attrs = {};
|
|
|
|
this.setItem(item, '<span uk-spinner></span>');
|
|
|
|
if (!src) {
|
|
return;
|
|
}
|
|
|
|
var matches;
|
|
var iframeAttrs = {
|
|
frameborder: '0',
|
|
allow: 'autoplay',
|
|
allowfullscreen: '',
|
|
style: 'max-width: 100%; box-sizing: border-box;',
|
|
'uk-responsive': '',
|
|
'uk-video': ("" + (this.videoAutoplay))
|
|
};
|
|
|
|
// Image
|
|
if (type === 'image' || src.match(/\.(avif|jpe?g|a?png|gif|svg|webp)($|\?)/i)) {
|
|
|
|
getImage(src, attrs.srcset, attrs.size).then(
|
|
function (ref) {
|
|
var width = ref.width;
|
|
var height = ref.height;
|
|
|
|
return this$1.setItem(item, createEl('img', assign({src: src, width: width, height: height, alt: alt}, attrs)));
|
|
},
|
|
function () { return this$1.setError(item); }
|
|
);
|
|
|
|
// Video
|
|
} else if (type === 'video' || src.match(/\.(mp4|webm|ogv)($|\?)/i)) {
|
|
|
|
var video = createEl('video', assign({
|
|
src: src,
|
|
poster: poster,
|
|
controls: '',
|
|
playsinline: '',
|
|
'uk-video': ("" + (this.videoAutoplay))
|
|
}, attrs));
|
|
|
|
on(video, 'loadedmetadata', function () {
|
|
attr(video, {width: video.videoWidth, height: video.videoHeight});
|
|
this$1.setItem(item, video);
|
|
});
|
|
on(video, 'error', function () { return this$1.setError(item); });
|
|
|
|
// Iframe
|
|
} else if (type === 'iframe' || src.match(/\.(html|php)($|\?)/i)) {
|
|
|
|
this.setItem(item, createEl('iframe', assign({
|
|
src: src,
|
|
frameborder: '0',
|
|
allowfullscreen: '',
|
|
class: 'uk-lightbox-iframe'
|
|
}, attrs)));
|
|
|
|
// YouTube
|
|
} else if ((matches = src.match(/\/\/(?:.*?youtube(-nocookie)?\..*?[?&]v=|youtu\.be\/)([\w-]{11})[&?]?(.*)?/))) {
|
|
|
|
this.setItem(item, createEl('iframe', assign({
|
|
src: ("https://www.youtube" + (matches[1] || '') + ".com/embed/" + (matches[2]) + (matches[3] ? ("?" + (matches[3])) : '')),
|
|
width: 1920,
|
|
height: 1080
|
|
}, iframeAttrs, attrs)));
|
|
|
|
// Vimeo
|
|
} else if ((matches = src.match(/\/\/.*?vimeo\.[a-z]+\/(\d+)[&?]?(.*)?/))) {
|
|
|
|
ajax(("https://vimeo.com/api/oembed.json?maxwidth=1920&url=" + (encodeURI(src))), {
|
|
responseType: 'json',
|
|
withCredentials: false
|
|
}).then(
|
|
function (ref) {
|
|
var ref_response = ref.response;
|
|
var height = ref_response.height;
|
|
var width = ref_response.width;
|
|
|
|
return this$1.setItem(item, createEl('iframe', assign({
|
|
src: ("https://player.vimeo.com/video/" + (matches[1]) + (matches[2] ? ("?" + (matches[2])) : '')),
|
|
width: width,
|
|
height: height
|
|
}, iframeAttrs, attrs)));
|
|
},
|
|
function () { return this$1.setError(item); }
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
],
|
|
|
|
methods: {
|
|
|
|
loadItem: function(index) {
|
|
if ( index === void 0 ) index = this.index;
|
|
|
|
|
|
var item = this.getItem(index);
|
|
|
|
if (!this.getSlide(item).childElementCount) {
|
|
trigger(this.$el, 'itemload', [item]);
|
|
}
|
|
},
|
|
|
|
getItem: function(index) {
|
|
if ( index === void 0 ) index = this.index;
|
|
|
|
return this.items[getIndex(index, this.slides)];
|
|
},
|
|
|
|
setItem: function(item, content) {
|
|
trigger(this.$el, 'itemloaded', [this, html(this.getSlide(item), content) ]);
|
|
},
|
|
|
|
getSlide: function(item) {
|
|
return this.slides[this.items.indexOf(item)];
|
|
},
|
|
|
|
setError: function(item) {
|
|
this.setItem(item, '<span uk-icon="icon: bolt; ratio: 2"></span>');
|
|
},
|
|
|
|
showControls: function() {
|
|
|
|
clearTimeout(this.controlsTimer);
|
|
this.controlsTimer = setTimeout(this.hideControls, this.delayControls);
|
|
|
|
addClass(this.$el, 'uk-active', 'uk-transition-active');
|
|
|
|
},
|
|
|
|
hideControls: function() {
|
|
removeClass(this.$el, 'uk-active', 'uk-transition-active');
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
function createEl(tag, attrs) {
|
|
var el = fragment(("<" + tag + ">"));
|
|
attr(el, attrs);
|
|
return el;
|
|
}
|
|
|
|
var lightbox = {
|
|
|
|
install: install$1,
|
|
|
|
props: {toggle: String},
|
|
|
|
data: {toggle: 'a'},
|
|
|
|
computed: {
|
|
|
|
toggles: {
|
|
|
|
get: function(ref, $el) {
|
|
var toggle = ref.toggle;
|
|
|
|
return $$(toggle, $el);
|
|
},
|
|
|
|
watch: function() {
|
|
this.hide();
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
disconnected: function() {
|
|
this.hide();
|
|
},
|
|
|
|
events: [
|
|
|
|
{
|
|
|
|
name: 'click',
|
|
|
|
delegate: function() {
|
|
return ((this.toggle) + ":not(.uk-disabled)");
|
|
},
|
|
|
|
handler: function(e) {
|
|
e.preventDefault();
|
|
this.show(e.current);
|
|
}
|
|
|
|
}
|
|
|
|
],
|
|
|
|
methods: {
|
|
|
|
show: function(index) {
|
|
var this$1 = this;
|
|
|
|
|
|
var items = uniqueBy(this.toggles.map(toItem), 'source');
|
|
|
|
if (isElement(index)) {
|
|
var ref = toItem(index);
|
|
var source = ref.source;
|
|
index = findIndex(items, function (ref) {
|
|
var src = ref.source;
|
|
|
|
return source === src;
|
|
});
|
|
}
|
|
|
|
this.panel = this.panel || this.$create('lightboxPanel', assign({}, this.$props, {items: items}));
|
|
|
|
on(this.panel.$el, 'hidden', function () { return this$1.panel = false; });
|
|
|
|
return this.panel.show(index);
|
|
|
|
},
|
|
|
|
hide: function() {
|
|
|
|
return this.panel && this.panel.hide();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
function install$1(UIkit, Lightbox) {
|
|
|
|
if (!UIkit.lightboxPanel) {
|
|
UIkit.component('lightboxPanel', LightboxPanel);
|
|
}
|
|
|
|
assign(
|
|
Lightbox.props,
|
|
UIkit.component('lightboxPanel').options.props
|
|
);
|
|
|
|
}
|
|
|
|
function toItem(el) {
|
|
|
|
var item = {};
|
|
|
|
['href', 'caption', 'type', 'poster', 'alt', 'attrs'].forEach(function (attr) {
|
|
item[attr === 'href' ? 'source' : attr] = data(el, attr);
|
|
});
|
|
|
|
item.attrs = parseOptions(item.attrs);
|
|
|
|
return item;
|
|
}
|
|
|
|
var obj$1;
|
|
|
|
var notification = {
|
|
|
|
mixins: [Container],
|
|
|
|
functional: true,
|
|
|
|
args: ['message', 'status'],
|
|
|
|
data: {
|
|
message: '',
|
|
status: '',
|
|
timeout: 5000,
|
|
group: null,
|
|
pos: 'top-center',
|
|
clsContainer: 'uk-notification',
|
|
clsClose: 'uk-notification-close',
|
|
clsMsg: 'uk-notification-message'
|
|
},
|
|
|
|
install: install,
|
|
|
|
computed: {
|
|
|
|
marginProp: function(ref) {
|
|
var pos = ref.pos;
|
|
|
|
return ("margin" + (startsWith(pos, 'top') ? 'Top' : 'Bottom'));
|
|
},
|
|
|
|
startProps: function() {
|
|
var obj;
|
|
|
|
return ( obj = {opacity: 0}, obj[this.marginProp] = -this.$el.offsetHeight, obj );
|
|
}
|
|
|
|
},
|
|
|
|
created: function() {
|
|
|
|
var container = $(("." + (this.clsContainer) + "-" + (this.pos)), this.container)
|
|
|| append(this.container, ("<div class=\"" + (this.clsContainer) + " " + (this.clsContainer) + "-" + (this.pos) + "\" style=\"display: block\"></div>"));
|
|
|
|
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>")
|
|
));
|
|
|
|
},
|
|
|
|
connected: function() {
|
|
var this$1 = this;
|
|
var obj;
|
|
|
|
|
|
var margin = toFloat(css(this.$el, this.marginProp));
|
|
Transition.start(
|
|
css(this.$el, this.startProps),
|
|
( obj = {opacity: 1}, obj[this.marginProp] = margin, obj )
|
|
).then(function () {
|
|
if (this$1.timeout) {
|
|
this$1.timer = setTimeout(this$1.close, this$1.timeout);
|
|
}
|
|
});
|
|
|
|
},
|
|
|
|
events: ( obj$1 = {
|
|
|
|
click: function(e) {
|
|
if (closest(e.target, 'a[href="#"],a[href=""]')) {
|
|
e.preventDefault();
|
|
}
|
|
this.close();
|
|
}
|
|
|
|
}, obj$1[pointerEnter] = function () {
|
|
if (this.timer) {
|
|
clearTimeout(this.timer);
|
|
}
|
|
}, obj$1[pointerLeave] = function () {
|
|
if (this.timeout) {
|
|
this.timer = setTimeout(this.close, this.timeout);
|
|
}
|
|
}, obj$1 ),
|
|
|
|
methods: {
|
|
|
|
close: function(immediate) {
|
|
var this$1 = this;
|
|
|
|
|
|
var removeFn = function (el) {
|
|
|
|
var container = parent(el);
|
|
|
|
trigger(el, 'close', [this$1]);
|
|
remove$1(el);
|
|
|
|
if (container && !container.hasChildNodes()) {
|
|
remove$1(container);
|
|
}
|
|
|
|
};
|
|
|
|
if (this.timer) {
|
|
clearTimeout(this.timer);
|
|
}
|
|
|
|
if (immediate) {
|
|
removeFn(this.$el);
|
|
} else {
|
|
Transition.start(this.$el, this.startProps).then(removeFn);
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
function install(UIkit) {
|
|
UIkit.notification.closeAll = function (group, immediate) {
|
|
apply$1(document.body, function (el) {
|
|
var notification = UIkit.getComponent(el, 'notification');
|
|
if (notification && (!group || group === notification.group)) {
|
|
notification.close(immediate);
|
|
}
|
|
});
|
|
};
|
|
}
|
|
|
|
var props = ['x', 'y', 'bgx', 'bgy', 'rotate', 'scale', 'color', 'backgroundColor', 'borderColor', 'opacity', 'blur', 'hue', 'grayscale', 'invert', 'saturate', 'sepia', 'fopacity', 'stroke'];
|
|
|
|
var Parallax = {
|
|
|
|
mixins: [Media],
|
|
|
|
props: props.reduce(function (props, prop) {
|
|
props[prop] = 'list';
|
|
return props;
|
|
}, {}),
|
|
|
|
data: props.reduce(function (data, prop) {
|
|
data[prop] = undefined;
|
|
return data;
|
|
}, {}),
|
|
|
|
computed: {
|
|
|
|
props: function(properties, $el) {
|
|
var this$1 = this;
|
|
|
|
|
|
return props.reduce(function (props, prop) {
|
|
|
|
if (isUndefined(properties[prop])) {
|
|
return props;
|
|
}
|
|
|
|
var isColor = prop.match(/color/i);
|
|
var isCssProp = isColor || prop === 'opacity';
|
|
|
|
var pos, bgPos, diff;
|
|
var steps = properties[prop].slice();
|
|
|
|
if (isCssProp) {
|
|
css($el, prop, '');
|
|
}
|
|
|
|
if (steps.length < 2) {
|
|
steps.unshift((prop === 'scale'
|
|
? 1
|
|
: isCssProp
|
|
? css($el, prop)
|
|
: 0) || 0);
|
|
}
|
|
|
|
var unit = getUnit(steps);
|
|
|
|
if (isColor) {
|
|
|
|
var ref = $el.style;
|
|
var color = ref.color;
|
|
steps = steps.map(function (step) { return parseColor($el, step); });
|
|
$el.style.color = color;
|
|
|
|
} else if (startsWith(prop, 'bg')) {
|
|
|
|
var attr = prop === 'bgy' ? 'height' : 'width';
|
|
steps = steps.map(function (step) { return toPx(step, attr, this$1.$el); });
|
|
|
|
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);
|
|
var max = Math.max.apply(Math, steps);
|
|
var 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;
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
steps = steps.map(toFloat);
|
|
|
|
}
|
|
|
|
if (prop === 'stroke') {
|
|
|
|
if (!steps.some(function (step) { return step; })) {
|
|
return props;
|
|
}
|
|
|
|
var length = getMaxPathLength(this$1.$el);
|
|
css($el, 'strokeDasharray', length);
|
|
|
|
if (unit === '%') {
|
|
steps = steps.map(function (step) { return step * length / 100; });
|
|
}
|
|
|
|
steps = steps.reverse();
|
|
|
|
prop = 'strokeDashoffset';
|
|
}
|
|
|
|
props[prop] = {steps: steps, unit: unit, pos: pos, bgPos: bgPos, diff: diff};
|
|
|
|
return props;
|
|
|
|
}, {});
|
|
|
|
},
|
|
|
|
bgProps: function() {
|
|
var this$1 = this;
|
|
|
|
return ['bgx', 'bgy'].filter(function (bg) { return bg in this$1.props; });
|
|
},
|
|
|
|
covers: function(_, $el) {
|
|
return covers($el);
|
|
}
|
|
|
|
},
|
|
|
|
disconnected: function() {
|
|
delete this._image;
|
|
},
|
|
|
|
update: {
|
|
|
|
read: function(data) {
|
|
var this$1 = this;
|
|
|
|
|
|
if (!this.matchMedia) {
|
|
return;
|
|
}
|
|
|
|
if (!data.image && this.covers && this.bgProps.length) {
|
|
var src = css(this.$el, 'backgroundImage').replace(/^none|url\(["']?(.+?)["']?\)$/, '$1');
|
|
|
|
if (src) {
|
|
var img = new Image();
|
|
img.src = src;
|
|
data.image = img;
|
|
|
|
if (!img.naturalWidth) {
|
|
img.onload = function () { return this$1.$update(); };
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
var image = data.image;
|
|
|
|
if (!image || !image.naturalWidth) {
|
|
return;
|
|
}
|
|
|
|
var dimEl = {
|
|
width: this.$el.offsetWidth,
|
|
height: this.$el.offsetHeight
|
|
};
|
|
var dimImage = {
|
|
width: image.naturalWidth,
|
|
height: image.naturalHeight
|
|
};
|
|
|
|
var dim = Dimensions.cover(dimImage, 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';
|
|
var span = dim[attr] - dimEl[attr];
|
|
|
|
if (span < diff) {
|
|
dimEl[attr] = dim[attr] + diff - span;
|
|
} else if (span > diff) {
|
|
|
|
var posPercentage = dimEl[attr] / toPx(bgPos, attr, this$1.$el);
|
|
|
|
if (posPercentage) {
|
|
this$1.props[prop].steps = steps.map(function (step) { return step - (span - diff) / posPercentage; });
|
|
}
|
|
}
|
|
|
|
dim = Dimensions.cover(dimImage, dimEl);
|
|
});
|
|
|
|
data.dim = dim;
|
|
},
|
|
|
|
write: function(ref) {
|
|
var dim = ref.dim;
|
|
|
|
|
|
if (!this.matchMedia) {
|
|
css(this.$el, {backgroundSize: '', backgroundRepeat: ''});
|
|
return;
|
|
}
|
|
|
|
dim && css(this.$el, {
|
|
backgroundSize: ((dim.width) + "px " + (dim.height) + "px"),
|
|
backgroundRepeat: 'no-repeat'
|
|
});
|
|
|
|
},
|
|
|
|
events: ['resize']
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
reset: function() {
|
|
var this$1 = this;
|
|
|
|
each(this.getCss(0), function (_, prop) { return css(this$1.$el, prop, ''); });
|
|
},
|
|
|
|
getCss: function(percent) {
|
|
|
|
var ref = this;
|
|
var props = ref.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': {
|
|
unit = unit || 'px';
|
|
css.transform += " translate" + (ucfirst(prop)) + "(" + (toFloat(value).toFixed(unit === 'px' ? 0 : 2)) + unit + ")";
|
|
break;
|
|
}
|
|
case 'rotate':
|
|
unit = unit || 'deg';
|
|
css.transform += " rotate(" + (value + unit) + ")";
|
|
break;
|
|
case 'scale':
|
|
css.transform += " scale(" + value + ")";
|
|
break;
|
|
|
|
// bg image
|
|
case 'bgy':
|
|
case 'bgx':
|
|
css[("background-position-" + (prop[2]))] = "calc(" + pos + " + " + value + "px)";
|
|
break;
|
|
|
|
// color
|
|
case 'color':
|
|
case 'backgroundColor':
|
|
case 'borderColor': {
|
|
|
|
var ref$1 = getStep(steps, percent);
|
|
var start = ref$1[0];
|
|
var end = ref$1[1];
|
|
var p = ref$1[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':
|
|
unit = unit || 'px';
|
|
css.filter += " blur(" + (value + unit) + ")";
|
|
break;
|
|
case 'hue':
|
|
unit = unit || 'deg';
|
|
css.filter += " hue-rotate(" + (value + unit) + ")";
|
|
break;
|
|
case 'fopacity':
|
|
unit = unit || '%';
|
|
css.filter += " opacity(" + (value + unit) + ")";
|
|
break;
|
|
case 'grayscale':
|
|
case 'invert':
|
|
case 'saturate':
|
|
case 'sepia':
|
|
unit = unit || '%';
|
|
css.filter += " " + prop + "(" + (value + unit) + ")";
|
|
break;
|
|
default:
|
|
css[prop] = value;
|
|
}
|
|
|
|
return css;
|
|
|
|
}, {transform: '', filter: ''});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
function parseColor(el, color) {
|
|
return css(css(el, 'color', color), 'color')
|
|
.split(/[(),]/g)
|
|
.slice(1, -1)
|
|
.concat(1)
|
|
.slice(0, 4)
|
|
.map(toFloat);
|
|
}
|
|
|
|
function getStep(steps, percent) {
|
|
var count = steps.length - 1;
|
|
var index = Math.min(Math.floor(count * percent), count - 1);
|
|
var step = steps.slice(index, index + 2);
|
|
|
|
step.push(percent === 1 ? 1 : percent % (1 / count) * count);
|
|
|
|
return step;
|
|
}
|
|
|
|
function getValue(steps, percent, digits) {
|
|
if ( digits === void 0 ) digits = 2;
|
|
|
|
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(digits);
|
|
}
|
|
|
|
function getUnit(steps) {
|
|
return steps.reduce(function (unit, step) { return isString(step) && step.replace(/-|\d/g, '').trim() || unit; }, '');
|
|
}
|
|
|
|
function covers(el) {
|
|
var ref = el.style;
|
|
var backgroundSize = ref.backgroundSize;
|
|
var covers = css(css(el, 'backgroundSize', ''), 'backgroundSize') === 'cover';
|
|
el.style.backgroundSize = backgroundSize;
|
|
return covers;
|
|
}
|
|
|
|
var parallax = {
|
|
|
|
mixins: [Parallax],
|
|
|
|
props: {
|
|
target: String,
|
|
viewport: Number,
|
|
easing: Number
|
|
},
|
|
|
|
data: {
|
|
target: false,
|
|
viewport: 1,
|
|
easing: 1
|
|
},
|
|
|
|
computed: {
|
|
|
|
target: function(ref, $el) {
|
|
var target = ref.target;
|
|
|
|
return getOffsetElement(target && query(target, $el) || $el);
|
|
}
|
|
|
|
},
|
|
|
|
update: {
|
|
|
|
read: function(ref, types) {
|
|
var percent = ref.percent;
|
|
|
|
|
|
if (!types.has('scroll')) {
|
|
percent = false;
|
|
}
|
|
|
|
if (!this.matchMedia) {
|
|
return;
|
|
}
|
|
|
|
var prev = percent;
|
|
percent = ease(scrolledOver(this.target) / (this.viewport || 1), this.easing);
|
|
|
|
return {
|
|
percent: percent,
|
|
style: prev !== percent ? this.getCss(percent) : false
|
|
};
|
|
},
|
|
|
|
write: function(ref) {
|
|
var style = ref.style;
|
|
|
|
|
|
if (!this.matchMedia) {
|
|
this.reset();
|
|
return;
|
|
}
|
|
|
|
style && css(this.$el, style);
|
|
|
|
},
|
|
|
|
events: ['scroll', 'resize']
|
|
}
|
|
|
|
};
|
|
|
|
function ease(percent, easing) {
|
|
return clamp(percent * (1 - (easing - easing * percent)));
|
|
}
|
|
|
|
// SVG elements do not inherit from HTMLElement
|
|
function getOffsetElement(el) {
|
|
return el
|
|
? 'offsetTop' in el
|
|
? el
|
|
: getOffsetElement(parent(el))
|
|
: document.body;
|
|
}
|
|
|
|
var SliderReactive = {
|
|
|
|
update: {
|
|
|
|
write: function() {
|
|
|
|
if (this.stack.length || this.dragging) {
|
|
return;
|
|
}
|
|
|
|
var index = this.getValidIndex(this.index);
|
|
|
|
if (!~this.prevIndex || this.index !== index) {
|
|
this.show(index);
|
|
}
|
|
|
|
},
|
|
|
|
events: ['resize']
|
|
|
|
}
|
|
|
|
};
|
|
|
|
function Transitioner (prev, next, dir, ref) {
|
|
var center = ref.center;
|
|
var easing = ref.easing;
|
|
var list = ref.list;
|
|
|
|
|
|
var deferred = new Deferred();
|
|
|
|
var from = prev
|
|
? getLeft(prev, list, center)
|
|
: getLeft(next, list, center) + dimensions(next).width * dir;
|
|
var to = next
|
|
? getLeft(next, list, center)
|
|
: from + dimensions(prev).width * dir * (isRtl ? -1 : 1);
|
|
|
|
return {
|
|
|
|
dir: dir,
|
|
|
|
show: function(duration, percent, linear) {
|
|
if ( percent === void 0 ) percent = 0;
|
|
|
|
|
|
var timing = linear ? 'linear' : easing;
|
|
duration -= Math.round(duration * clamp(percent, -1, 1));
|
|
|
|
this.translate(percent);
|
|
|
|
percent = prev ? percent : clamp(percent, 0, 1);
|
|
triggerUpdate(this.getItemIn(), 'itemin', {percent: percent, duration: duration, timing: timing, dir: dir});
|
|
prev && triggerUpdate(this.getItemIn(true), 'itemout', {percent: 1 - percent, duration: duration, timing: timing, dir: dir});
|
|
|
|
Transition
|
|
.start(list, {transform: translate(-to * (isRtl ? -1 : 1), 'px')}, duration, timing)
|
|
.then(deferred.resolve, noop);
|
|
|
|
return deferred.promise;
|
|
|
|
},
|
|
|
|
cancel: function() {
|
|
Transition.cancel(list);
|
|
},
|
|
|
|
reset: function() {
|
|
css(list, 'transform', '');
|
|
},
|
|
|
|
forward: function(duration, percent) {
|
|
if ( percent === void 0 ) percent = this.percent();
|
|
|
|
Transition.cancel(list);
|
|
return this.show(duration, percent, true);
|
|
},
|
|
|
|
translate: function(percent) {
|
|
|
|
var distance = this.getDistance() * dir * (isRtl ? -1 : 1);
|
|
|
|
css(list, 'transform', translate(clamp(
|
|
-to + (distance - distance * percent),
|
|
-getWidth(list),
|
|
dimensions(list).width
|
|
) * (isRtl ? -1 : 1), 'px'));
|
|
|
|
var actives = this.getActives();
|
|
var itemIn = this.getItemIn();
|
|
var itemOut = this.getItemIn(true);
|
|
|
|
percent = prev ? clamp(percent, -1, 1) : 0;
|
|
|
|
children(list).forEach(function (slide, i) {
|
|
var isActive = includes(actives, slide);
|
|
var isIn = slide === itemIn;
|
|
var isOut = slide === itemOut;
|
|
var translateIn = isIn || !isOut && (isActive || dir * (isRtl ? -1 : 1) === -1 ^ getElLeft(slide, list) > getElLeft(prev || next));
|
|
|
|
triggerUpdate(slide, ("itemtranslate" + (translateIn ? 'in' : 'out')), {
|
|
dir: dir,
|
|
percent: isOut
|
|
? 1 - percent
|
|
: isIn
|
|
? percent
|
|
: isActive
|
|
? 1
|
|
: 0
|
|
});
|
|
});
|
|
|
|
},
|
|
|
|
percent: function() {
|
|
return Math.abs((css(list, 'transform').split(',')[4] * (isRtl ? -1 : 1) + from) / (to - from));
|
|
},
|
|
|
|
getDistance: function() {
|
|
return Math.abs(to - from);
|
|
},
|
|
|
|
getItemIn: function(out) {
|
|
if ( out === void 0 ) out = false;
|
|
|
|
|
|
var actives = this.getActives();
|
|
var nextActives = inView(list, getLeft(next || prev, list, center));
|
|
|
|
if (out) {
|
|
var temp = actives;
|
|
actives = nextActives;
|
|
nextActives = temp;
|
|
}
|
|
|
|
return nextActives[findIndex(nextActives, function (el) { return !includes(actives, el); })];
|
|
|
|
},
|
|
|
|
getActives: function() {
|
|
return inView(list, getLeft(prev || next, list, center));
|
|
}
|
|
|
|
};
|
|
|
|
}
|
|
|
|
function getLeft(el, list, center) {
|
|
|
|
var left = getElLeft(el, list);
|
|
|
|
return center
|
|
? left - centerEl(el, list)
|
|
: Math.min(left, getMax(list));
|
|
|
|
}
|
|
|
|
function getMax(list) {
|
|
return Math.max(0, getWidth(list) - dimensions(list).width);
|
|
}
|
|
|
|
function getWidth(list) {
|
|
return children(list).reduce(function (right, el) { return dimensions(el).width + right; }, 0);
|
|
}
|
|
|
|
function centerEl(el, list) {
|
|
return dimensions(list).width / 2 - dimensions(el).width / 2;
|
|
}
|
|
|
|
function getElLeft(el, list) {
|
|
return el && (position(el).left + (isRtl ? dimensions(el).width - dimensions(list).width : 0)) * (isRtl ? -1 : 1) || 0;
|
|
}
|
|
|
|
function inView(list, listLeft) {
|
|
|
|
listLeft -= 1;
|
|
var listRight = listLeft + dimensions(list).width + 2;
|
|
|
|
return children(list).filter(function (slide) {
|
|
var slideLeft = getElLeft(slide, list);
|
|
var slideRight = slideLeft + dimensions(slide).width;
|
|
|
|
return slideLeft >= listLeft && slideRight <= listRight;
|
|
});
|
|
}
|
|
|
|
function triggerUpdate(el, type, data) {
|
|
trigger(el, createEvent(type, false, false, data));
|
|
}
|
|
|
|
var slider = {
|
|
|
|
mixins: [Class, Slider, SliderReactive],
|
|
|
|
props: {
|
|
center: Boolean,
|
|
sets: Boolean
|
|
},
|
|
|
|
data: {
|
|
center: false,
|
|
sets: false,
|
|
attrItem: 'uk-slider-item',
|
|
selList: '.uk-slider-items',
|
|
selNav: '.uk-slider-nav',
|
|
clsContainer: 'uk-slider-container',
|
|
Transitioner: Transitioner
|
|
},
|
|
|
|
computed: {
|
|
|
|
avgWidth: function() {
|
|
return getWidth(this.list) / this.length;
|
|
},
|
|
|
|
finite: function(ref) {
|
|
var finite = ref.finite;
|
|
|
|
return finite || Math.ceil(getWidth(this.list)) < dimensions(this.list).width + getMaxElWidth(this.list) + this.center;
|
|
},
|
|
|
|
maxIndex: function() {
|
|
|
|
if (!this.finite || this.center && !this.sets) {
|
|
return this.length - 1;
|
|
}
|
|
|
|
if (this.center) {
|
|
return last(this.sets);
|
|
}
|
|
|
|
var lft = 0;
|
|
var max = getMax(this.list);
|
|
var index = findIndex(this.slides, function (el) {
|
|
|
|
if (lft >= max) {
|
|
return true;
|
|
}
|
|
|
|
lft += dimensions(el).width;
|
|
|
|
});
|
|
|
|
return ~index ? index : this.length - 1;
|
|
},
|
|
|
|
sets: function(ref) {
|
|
var this$1 = this;
|
|
var sets = ref.sets;
|
|
|
|
|
|
if (!sets) {
|
|
return;
|
|
}
|
|
|
|
var width = dimensions(this.list).width / (this.center ? 2 : 1);
|
|
|
|
var left = 0;
|
|
var leftCenter = width;
|
|
var slideLeft = 0;
|
|
|
|
sets = sortBy$1(this.slides, 'offsetLeft').reduce(function (sets, slide, i) {
|
|
|
|
var slideWidth = dimensions(slide).width;
|
|
var slideRight = slideLeft + slideWidth;
|
|
|
|
if (slideRight > left) {
|
|
|
|
if (!this$1.center && i > this$1.maxIndex) {
|
|
i = this$1.maxIndex;
|
|
}
|
|
|
|
if (!includes(sets, i)) {
|
|
|
|
var cmp = this$1.slides[i + 1];
|
|
if (this$1.center && cmp && slideWidth < leftCenter - dimensions(cmp).width / 2) {
|
|
leftCenter -= slideWidth;
|
|
} else {
|
|
leftCenter = width;
|
|
sets.push(i);
|
|
left = slideLeft + width + (this$1.center ? slideWidth / 2 : 0);
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
slideLeft += slideWidth;
|
|
|
|
return sets;
|
|
|
|
}, []);
|
|
|
|
return !isEmpty(sets) && sets;
|
|
|
|
},
|
|
|
|
transitionOptions: function() {
|
|
return {
|
|
center: this.center,
|
|
list: this.list
|
|
};
|
|
}
|
|
|
|
},
|
|
|
|
connected: function() {
|
|
toggleClass(this.$el, this.clsContainer, !$(("." + (this.clsContainer)), this.$el));
|
|
},
|
|
|
|
update: {
|
|
|
|
write: function() {
|
|
var this$1 = this;
|
|
|
|
this.navItems.forEach(function (el) {
|
|
var index = toNumber(data(el, this$1.attrItem));
|
|
if (index !== false) {
|
|
el.hidden = !this$1.maxIndex || index > this$1.maxIndex || this$1.sets && !includes(this$1.sets, index);
|
|
}
|
|
});
|
|
|
|
if (this.length && !this.dragging && !this.stack.length) {
|
|
this.reorder();
|
|
this._translate(1);
|
|
}
|
|
|
|
var actives = this._getTransitioner(this.index).getActives();
|
|
this.slides.forEach(function (slide) { return toggleClass(slide, this$1.clsActive, includes(actives, slide)); });
|
|
|
|
if (this.clsActivated && (!this.sets || includes(this.sets, toFloat(this.index)))) {
|
|
this.slides.forEach(function (slide) { return toggleClass(slide, this$1.clsActivated || '', includes(actives, slide)); });
|
|
}
|
|
},
|
|
|
|
events: ['resize']
|
|
|
|
},
|
|
|
|
events: {
|
|
|
|
beforeitemshow: function(e) {
|
|
|
|
if (!this.dragging && this.sets && this.stack.length < 2 && !includes(this.sets, this.index)) {
|
|
this.index = this.getValidIndex();
|
|
}
|
|
|
|
var diff = Math.abs(
|
|
this.index
|
|
- this.prevIndex
|
|
+ (this.dir > 0 && this.index < this.prevIndex || this.dir < 0 && this.index > this.prevIndex ? (this.maxIndex + 1) * this.dir : 0)
|
|
);
|
|
|
|
if (!this.dragging && diff > 1) {
|
|
|
|
for (var i = 0; i < diff; i++) {
|
|
this.stack.splice(1, 0, this.dir > 0 ? 'next' : 'previous');
|
|
}
|
|
|
|
e.preventDefault();
|
|
return;
|
|
}
|
|
|
|
var index = this.dir < 0 || !this.slides[this.prevIndex] ? this.index : this.prevIndex;
|
|
this.duration = speedUp(this.avgWidth / this.velocity) * (dimensions(this.slides[index]).width / this.avgWidth);
|
|
|
|
this.reorder();
|
|
|
|
},
|
|
|
|
itemshow: function() {
|
|
~this.prevIndex && addClass(this._getTransitioner().getItemIn(), this.clsActive);
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
reorder: function() {
|
|
var this$1 = this;
|
|
|
|
|
|
if (this.finite) {
|
|
css(this.slides, 'order', '');
|
|
return;
|
|
}
|
|
|
|
var index = this.dir > 0 && this.slides[this.prevIndex] ? this.prevIndex : this.index;
|
|
|
|
this.slides.forEach(function (slide, i) { return css(slide, 'order', this$1.dir > 0 && i < index
|
|
? 1
|
|
: this$1.dir < 0 && i >= this$1.index
|
|
? -1
|
|
: ''
|
|
); }
|
|
);
|
|
|
|
if (!this.center) {
|
|
return;
|
|
}
|
|
|
|
var next = this.slides[index];
|
|
var width = dimensions(this.list).width / 2 - dimensions(next).width / 2;
|
|
var j = 0;
|
|
|
|
while (width > 0) {
|
|
var slideIndex = this.getIndex(--j + index, index);
|
|
var slide = this.slides[slideIndex];
|
|
|
|
css(slide, 'order', slideIndex > index ? -2 : -1);
|
|
width -= dimensions(slide).width;
|
|
}
|
|
|
|
},
|
|
|
|
getValidIndex: function(index, prevIndex) {
|
|
if ( index === void 0 ) index = this.index;
|
|
if ( prevIndex === void 0 ) prevIndex = this.prevIndex;
|
|
|
|
|
|
index = this.getIndex(index, prevIndex);
|
|
|
|
if (!this.sets) {
|
|
return index;
|
|
}
|
|
|
|
var prev;
|
|
|
|
do {
|
|
|
|
if (includes(this.sets, index)) {
|
|
return index;
|
|
}
|
|
|
|
prev = index;
|
|
index = this.getIndex(index + this.dir, prevIndex);
|
|
|
|
} while (index !== prev);
|
|
|
|
return index;
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
function getMaxElWidth(list) {
|
|
return Math.max.apply(Math, [ 0 ].concat( children(list).map(function (el) { return dimensions(el).width; }) ));
|
|
}
|
|
|
|
var sliderParallax = {
|
|
|
|
mixins: [Parallax],
|
|
|
|
data: {
|
|
selItem: '!li'
|
|
},
|
|
|
|
computed: {
|
|
|
|
item: function(ref, $el) {
|
|
var selItem = ref.selItem;
|
|
|
|
return query(selItem, $el);
|
|
}
|
|
|
|
},
|
|
|
|
events: [
|
|
|
|
{
|
|
name: 'itemin itemout',
|
|
|
|
self: true,
|
|
|
|
el: function() {
|
|
return this.item;
|
|
},
|
|
|
|
handler: function(ref) {
|
|
var this$1 = this;
|
|
var type = ref.type;
|
|
var ref_detail = ref.detail;
|
|
var percent = ref_detail.percent;
|
|
var duration = ref_detail.duration;
|
|
var timing = ref_detail.timing;
|
|
var dir = ref_detail.dir;
|
|
|
|
|
|
fastdom.read(function () {
|
|
var propsFrom = this$1.getCss(getCurrentPercent(type, dir, percent));
|
|
var propsTo = this$1.getCss(isIn(type) ? .5 : dir > 0 ? 1 : 0);
|
|
fastdom.write(function () {
|
|
css(this$1.$el, propsFrom);
|
|
Transition.start(this$1.$el, propsTo, duration, timing).catch(noop);
|
|
});
|
|
});
|
|
|
|
}
|
|
},
|
|
|
|
{
|
|
name: 'transitioncanceled transitionend',
|
|
|
|
self: true,
|
|
|
|
el: function() {
|
|
return this.item;
|
|
},
|
|
|
|
handler: function() {
|
|
Transition.cancel(this.$el);
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
name: 'itemtranslatein itemtranslateout',
|
|
|
|
self: true,
|
|
|
|
el: function() {
|
|
return this.item;
|
|
},
|
|
|
|
handler: function(ref) {
|
|
var this$1 = this;
|
|
var type = ref.type;
|
|
var ref_detail = ref.detail;
|
|
var percent = ref_detail.percent;
|
|
var dir = ref_detail.dir;
|
|
|
|
fastdom.read(function () {
|
|
var props = this$1.getCss(getCurrentPercent(type, dir, percent));
|
|
fastdom.write(function () { return css(this$1.$el, props); });
|
|
});
|
|
}
|
|
}
|
|
|
|
]
|
|
|
|
};
|
|
|
|
function isIn(type) {
|
|
return endsWith(type, 'in');
|
|
}
|
|
|
|
function getCurrentPercent(type, dir, percent) {
|
|
|
|
percent /= 2;
|
|
|
|
return !isIn(type)
|
|
? dir < 0
|
|
? percent
|
|
: 1 - percent
|
|
: dir < 0
|
|
? 1 - percent
|
|
: percent;
|
|
}
|
|
|
|
var Animations = assign({}, Animations$2, {
|
|
|
|
fade: {
|
|
|
|
show: function() {
|
|
return [
|
|
{opacity: 0, zIndex: 0},
|
|
{zIndex: -1}
|
|
];
|
|
},
|
|
|
|
percent: function(current) {
|
|
return 1 - css(current, 'opacity');
|
|
},
|
|
|
|
translate: function(percent) {
|
|
return [
|
|
{opacity: 1 - percent, zIndex: 0},
|
|
{zIndex: -1}
|
|
];
|
|
}
|
|
|
|
},
|
|
|
|
scale: {
|
|
|
|
show: function() {
|
|
return [
|
|
{opacity: 0, transform: scale3d(1 + .5), zIndex: 0},
|
|
{zIndex: -1}
|
|
];
|
|
},
|
|
|
|
percent: function(current) {
|
|
return 1 - css(current, 'opacity');
|
|
},
|
|
|
|
translate: function(percent) {
|
|
return [
|
|
{opacity: 1 - percent, transform: scale3d(1 + .5 * percent), zIndex: 0},
|
|
{zIndex: -1}
|
|
];
|
|
}
|
|
|
|
},
|
|
|
|
pull: {
|
|
|
|
show: function(dir) {
|
|
return dir < 0
|
|
? [
|
|
{transform: translate(30), zIndex: -1},
|
|
{transform: translate(), zIndex: 0}
|
|
]
|
|
: [
|
|
{transform: translate(-100), zIndex: 0},
|
|
{transform: translate(), zIndex: -1}
|
|
];
|
|
},
|
|
|
|
percent: function(current, next, dir) {
|
|
return dir < 0
|
|
? 1 - translated(next)
|
|
: translated(current);
|
|
},
|
|
|
|
translate: function(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(dir) {
|
|
return dir < 0
|
|
? [
|
|
{transform: translate(100), zIndex: 0},
|
|
{transform: translate(), zIndex: -1}
|
|
]
|
|
: [
|
|
{transform: translate(-30), zIndex: -1},
|
|
{transform: translate(), zIndex: 0}
|
|
];
|
|
},
|
|
|
|
percent: function(current, next, dir) {
|
|
return dir > 0
|
|
? 1 - translated(next)
|
|
: translated(current);
|
|
},
|
|
|
|
translate: function(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}
|
|
];
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
var slideshow = {
|
|
|
|
mixins: [Class, Slideshow, SliderReactive],
|
|
|
|
props: {
|
|
ratio: String,
|
|
minHeight: Number,
|
|
maxHeight: Number
|
|
},
|
|
|
|
data: {
|
|
ratio: '16:9',
|
|
minHeight: false,
|
|
maxHeight: false,
|
|
selList: '.uk-slideshow-items',
|
|
attrItem: 'uk-slideshow-item',
|
|
selNav: '.uk-slideshow-nav',
|
|
Animations: Animations
|
|
},
|
|
|
|
update: {
|
|
|
|
read: function() {
|
|
|
|
var ref = this.ratio.split(':').map(Number);
|
|
var width = ref[0];
|
|
var height = ref[1];
|
|
|
|
height = height * this.list.offsetWidth / width || 0;
|
|
|
|
if (this.minHeight) {
|
|
height = Math.max(this.minHeight, height);
|
|
}
|
|
|
|
if (this.maxHeight) {
|
|
height = Math.min(this.maxHeight, height);
|
|
}
|
|
|
|
return {height: height - boxModelAdjust(this.list, 'height', 'content-box')};
|
|
},
|
|
|
|
write: function(ref) {
|
|
var height = ref.height;
|
|
|
|
height > 0 && css(this.list, 'minHeight', height);
|
|
},
|
|
|
|
events: ['resize']
|
|
|
|
}
|
|
|
|
};
|
|
|
|
var sortable = {
|
|
|
|
mixins: [Class, Animate],
|
|
|
|
props: {
|
|
group: String,
|
|
threshold: Number,
|
|
clsItem: String,
|
|
clsPlaceholder: String,
|
|
clsDrag: String,
|
|
clsDragState: String,
|
|
clsBase: String,
|
|
clsNoDrag: String,
|
|
clsEmpty: String,
|
|
clsCustom: String,
|
|
handle: String
|
|
},
|
|
|
|
data: {
|
|
group: false,
|
|
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,
|
|
pos: {}
|
|
},
|
|
|
|
created: function() {
|
|
var this$1 = this;
|
|
|
|
['init', 'start', 'move', 'end'].forEach(function (key) {
|
|
var fn = this$1[key];
|
|
this$1[key] = function (e) {
|
|
assign(this$1.pos, getEventPos(e));
|
|
fn(e);
|
|
};
|
|
});
|
|
},
|
|
|
|
events: {
|
|
|
|
name: pointerDown,
|
|
passive: false,
|
|
handler: 'init'
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
target: function() {
|
|
return (this.$el.tBodies || [this.$el])[0];
|
|
},
|
|
|
|
items: function() {
|
|
return children(this.target);
|
|
},
|
|
|
|
isEmpty: {
|
|
|
|
get: function() {
|
|
return isEmpty(this.items);
|
|
},
|
|
|
|
watch: function(empty) {
|
|
toggleClass(this.target, this.clsEmpty, empty);
|
|
},
|
|
|
|
immediate: true
|
|
|
|
},
|
|
|
|
handles: {
|
|
|
|
get: function(ref, el) {
|
|
var handle = ref.handle;
|
|
|
|
return handle ? $$(handle, el) : this.items;
|
|
},
|
|
|
|
watch: function(handles, prev) {
|
|
css(prev, {touchAction: '', userSelect: ''});
|
|
css(handles, {touchAction: hasTouch ? 'none' : '', userSelect: 'none'}); // touchAction set to 'none' causes a performance drop in Chrome 80
|
|
},
|
|
|
|
immediate: true
|
|
|
|
}
|
|
|
|
},
|
|
|
|
update: {
|
|
|
|
write: function(data) {
|
|
|
|
if (!this.drag || !parent(this.placeholder)) {
|
|
return;
|
|
}
|
|
|
|
var ref = this;
|
|
var ref_pos = ref.pos;
|
|
var x = ref_pos.x;
|
|
var y = ref_pos.y;
|
|
var ref_origin = ref.origin;
|
|
var offsetTop = ref_origin.offsetTop;
|
|
var offsetLeft = ref_origin.offsetLeft;
|
|
var placeholder = ref.placeholder;
|
|
|
|
css(this.drag, {
|
|
top: y - offsetTop,
|
|
left: x - offsetLeft
|
|
});
|
|
|
|
var sortable = this.getSortable(document.elementFromPoint(x, y));
|
|
|
|
if (!sortable) {
|
|
return;
|
|
}
|
|
|
|
var items = sortable.items;
|
|
|
|
if (items.some(Transition.inProgress)) {
|
|
return;
|
|
}
|
|
|
|
var target = findTarget(items, {x: x, y: y});
|
|
|
|
if (items.length && (!target || target === placeholder)) {
|
|
return;
|
|
}
|
|
|
|
var previous = this.getSortable(placeholder);
|
|
var insertTarget = findInsertTarget(sortable.target, target, placeholder, x, y, sortable === previous && data.moved !== target);
|
|
|
|
if (insertTarget === false) {
|
|
return;
|
|
}
|
|
|
|
if (insertTarget && placeholder === insertTarget) {
|
|
return;
|
|
}
|
|
|
|
if (sortable !== previous) {
|
|
previous.remove(placeholder);
|
|
data.moved = target;
|
|
} else {
|
|
delete data.moved;
|
|
}
|
|
|
|
sortable.insert(placeholder, insertTarget);
|
|
|
|
this.touched.add(sortable);
|
|
},
|
|
|
|
events: ['move']
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
init: function(e) {
|
|
|
|
var target = e.target;
|
|
var button = e.button;
|
|
var defaultPrevented = e.defaultPrevented;
|
|
var ref = this.items.filter(function (el) { return within(target, el); });
|
|
var placeholder = ref[0];
|
|
|
|
if (!placeholder
|
|
|| defaultPrevented
|
|
|| button > 0
|
|
|| isInput(target)
|
|
|| within(target, ("." + (this.clsNoDrag)))
|
|
|| this.handle && !within(target, this.handle)
|
|
) {
|
|
return;
|
|
}
|
|
|
|
e.preventDefault();
|
|
|
|
this.touched = new Set([this]);
|
|
this.placeholder = placeholder;
|
|
this.origin = assign({target: target, index: index(placeholder)}, this.pos);
|
|
|
|
on(document, pointerMove, this.move);
|
|
on(document, pointerUp, this.end);
|
|
|
|
if (!this.threshold) {
|
|
this.start(e);
|
|
}
|
|
|
|
},
|
|
|
|
start: function(e) {
|
|
|
|
this.drag = appendDrag(this.$container, this.placeholder);
|
|
var ref = this.placeholder.getBoundingClientRect();
|
|
var left = ref.left;
|
|
var top = ref.top;
|
|
assign(this.origin, {offsetLeft: this.pos.x - left, offsetTop: this.pos.y - top});
|
|
|
|
addClass(this.drag, this.clsDrag, this.clsCustom);
|
|
addClass(this.placeholder, this.clsPlaceholder);
|
|
addClass(this.items, this.clsItem);
|
|
addClass(document.documentElement, this.clsDragState);
|
|
|
|
trigger(this.$el, 'start', [this, this.placeholder]);
|
|
|
|
trackScroll(this.pos);
|
|
|
|
this.move(e);
|
|
},
|
|
|
|
move: function(e) {
|
|
|
|
if (this.drag) {
|
|
this.$emit('move');
|
|
} else if (Math.abs(this.pos.x - this.origin.x) > this.threshold || Math.abs(this.pos.y - this.origin.y) > this.threshold) {
|
|
this.start(e);
|
|
}
|
|
|
|
},
|
|
|
|
end: function() {
|
|
var this$1 = this;
|
|
|
|
|
|
off(document, pointerMove, this.move);
|
|
off(document, pointerUp, this.end);
|
|
off(window, 'scroll', this.scroll);
|
|
|
|
if (!this.drag) {
|
|
return;
|
|
}
|
|
|
|
untrackScroll();
|
|
|
|
var sortable = this.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, this.placeholder]);
|
|
|
|
remove$1(this.drag);
|
|
this.drag = null;
|
|
|
|
this.touched.forEach(function (ref) {
|
|
var clsPlaceholder = ref.clsPlaceholder;
|
|
var clsItem = ref.clsItem;
|
|
|
|
return this$1.touched.forEach(function (sortable) { return removeClass(sortable.items, clsPlaceholder, clsItem); }
|
|
);
|
|
}
|
|
);
|
|
this.touched = null;
|
|
removeClass(document.documentElement, this.clsDragState);
|
|
|
|
},
|
|
|
|
insert: function(element, target) {
|
|
var this$1 = this;
|
|
|
|
|
|
addClass(this.items, this.clsItem);
|
|
|
|
var insert = function () { return target
|
|
? before(target, element)
|
|
: append(this$1.target, element); };
|
|
|
|
this.animate(insert);
|
|
|
|
},
|
|
|
|
remove: function(element) {
|
|
|
|
if (!within(element, this.target)) {
|
|
return;
|
|
}
|
|
|
|
this.animate(function () { return remove$1(element); });
|
|
|
|
},
|
|
|
|
getSortable: function(element) {
|
|
do {
|
|
var sortable = this.$getComponent(element, 'sortable');
|
|
|
|
if (sortable && (sortable === this || this.group !== false && sortable.group === this.group)) {
|
|
return sortable;
|
|
}
|
|
} while ((element = parent(element)));
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
var trackTimer;
|
|
function trackScroll(pos) {
|
|
|
|
var last = Date.now();
|
|
trackTimer = setInterval(function () {
|
|
|
|
var x = pos.x;
|
|
var y = pos.y;
|
|
y += window.pageYOffset;
|
|
|
|
var dist = (Date.now() - last) * .3;
|
|
last = Date.now();
|
|
|
|
scrollParents(document.elementFromPoint(x, pos.y)).reverse().some(function (scrollEl) {
|
|
|
|
var scroll = scrollEl.scrollTop;
|
|
var scrollHeight = scrollEl.scrollHeight;
|
|
|
|
var ref = offset(getViewport$1(scrollEl));
|
|
var top = ref.top;
|
|
var bottom = ref.bottom;
|
|
var height = ref.height;
|
|
|
|
if (top < y && top + 35 > y) {
|
|
scroll -= dist;
|
|
} else if (bottom > y && bottom - 35 < y) {
|
|
scroll += dist;
|
|
} else {
|
|
return;
|
|
}
|
|
|
|
if (scroll > 0 && scroll < scrollHeight - height) {
|
|
scrollTop(scrollEl, scroll);
|
|
return true;
|
|
}
|
|
|
|
});
|
|
|
|
}, 15);
|
|
|
|
}
|
|
|
|
function untrackScroll() {
|
|
clearInterval(trackTimer);
|
|
}
|
|
|
|
function appendDrag(container, element) {
|
|
var clone = append(container, element.outerHTML.replace(/(^<)(?:li|tr)|(?:li|tr)(\/>$)/g, '$1div$2'));
|
|
|
|
css(clone, 'margin', '0', 'important');
|
|
css(clone, assign({
|
|
boxSizing: 'border-box',
|
|
width: element.offsetWidth,
|
|
height: element.offsetHeight
|
|
}, css(element, ['paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom'])));
|
|
|
|
height(clone.firstElementChild, height(element.firstElementChild));
|
|
|
|
return clone;
|
|
}
|
|
|
|
function findTarget(items, point) {
|
|
return items[findIndex(items, function (item) { return pointInRect(point, item.getBoundingClientRect()); })];
|
|
}
|
|
|
|
function findInsertTarget(list, target, placeholder, x, y, sameList) {
|
|
|
|
if (!children(list).length) {
|
|
return;
|
|
}
|
|
|
|
var rect = target.getBoundingClientRect();
|
|
if (!sameList) {
|
|
|
|
if (!isHorizontal(list, placeholder)) {
|
|
return y < rect.top + rect.height / 2
|
|
? target
|
|
: target.nextElementSibling;
|
|
}
|
|
|
|
return target;
|
|
}
|
|
|
|
var placeholderRect = placeholder.getBoundingClientRect();
|
|
var sameRow = linesIntersect(
|
|
[rect.top, rect.bottom],
|
|
[placeholderRect.top, placeholderRect.bottom]
|
|
);
|
|
|
|
var pointerPos = sameRow ? x : y;
|
|
var lengthProp = sameRow ? 'width' : 'height';
|
|
var startProp = sameRow ? 'left' : 'top';
|
|
var endProp = sameRow ? 'right' : 'bottom';
|
|
|
|
var diff = placeholderRect[lengthProp] < rect[lengthProp] ? rect[lengthProp] - placeholderRect[lengthProp] : 0;
|
|
|
|
if (placeholderRect[startProp] < rect[startProp]) {
|
|
|
|
if (diff && pointerPos < rect[startProp] + diff) {
|
|
return false;
|
|
}
|
|
|
|
return target.nextElementSibling;
|
|
}
|
|
|
|
if (diff && pointerPos > rect[endProp] - diff) {
|
|
return false;
|
|
}
|
|
|
|
return target;
|
|
}
|
|
|
|
function isHorizontal(list, placeholder) {
|
|
|
|
var single = children(list).length === 1;
|
|
|
|
if (single) {
|
|
append(list, placeholder);
|
|
}
|
|
|
|
var items = children(list);
|
|
var isHorizontal = items.some(function (el, i) {
|
|
var rectA = el.getBoundingClientRect();
|
|
return items.slice(i + 1).some(function (el) {
|
|
var rectB = el.getBoundingClientRect();
|
|
return !linesIntersect([rectA.left, rectA.right], [rectB.left, rectB.right]);
|
|
});
|
|
});
|
|
|
|
if (single) {
|
|
remove$1(placeholder);
|
|
}
|
|
|
|
return isHorizontal;
|
|
}
|
|
|
|
function linesIntersect(lineA, lineB) {
|
|
return lineA[1] > lineB[0] && lineB[1] > lineA[0];
|
|
}
|
|
|
|
var obj;
|
|
|
|
var tooltip = {
|
|
|
|
mixins: [Container, Togglable, Position],
|
|
|
|
args: 'title',
|
|
|
|
props: {
|
|
delay: Number,
|
|
title: String
|
|
},
|
|
|
|
data: {
|
|
pos: 'top',
|
|
title: '',
|
|
delay: 0,
|
|
animation: ['uk-animation-scale-up'],
|
|
duration: 100,
|
|
cls: 'uk-active',
|
|
clsPos: 'uk-tooltip'
|
|
},
|
|
|
|
beforeConnect: function() {
|
|
this._hasTitle = hasAttr(this.$el, 'title');
|
|
attr(this.$el, 'title', '');
|
|
this.updateAria(false);
|
|
makeFocusable(this.$el);
|
|
},
|
|
|
|
disconnected: function() {
|
|
this.hide();
|
|
attr(this.$el, 'title', this._hasTitle ? this.title : null);
|
|
},
|
|
|
|
methods: {
|
|
|
|
show: function() {
|
|
var this$1 = this;
|
|
|
|
|
|
if (this.isToggled(this.tooltip || null) || !this.title) {
|
|
return;
|
|
}
|
|
|
|
this._unbind = once(document, ("show keydown " + pointerDown), this.hide, false, function (e) { return e.type === pointerDown && !within(e.target, this$1.$el)
|
|
|| e.type === 'keydown' && e.keyCode === 27
|
|
|| e.type === 'show' && e.detail[0] !== this$1 && e.detail[0].$name === this$1.$name; }
|
|
);
|
|
|
|
clearTimeout(this.showTimer);
|
|
this.showTimer = setTimeout(this._show, this.delay);
|
|
},
|
|
|
|
hide: function() {
|
|
var this$1 = this;
|
|
|
|
|
|
if (matches(this.$el, 'input:focus')) {
|
|
return;
|
|
}
|
|
|
|
clearTimeout(this.showTimer);
|
|
|
|
if (!this.isToggled(this.tooltip || null)) {
|
|
return;
|
|
}
|
|
|
|
this.toggleElement(this.tooltip, false, false).then(function () {
|
|
this$1.tooltip = remove$1(this$1.tooltip);
|
|
this$1._unbind();
|
|
});
|
|
},
|
|
|
|
_show: function() {
|
|
var this$1 = this;
|
|
|
|
|
|
this.tooltip = append(this.container,
|
|
("<div class=\"" + (this.clsPos) + "\"> <div class=\"" + (this.clsPos) + "-inner\">" + (this.title) + "</div> </div>")
|
|
);
|
|
|
|
on(this.tooltip, 'toggled', function (e, toggled) {
|
|
|
|
this$1.updateAria(toggled);
|
|
|
|
if (!toggled) {
|
|
return;
|
|
}
|
|
|
|
this$1.positionAt(this$1.tooltip, this$1.$el);
|
|
|
|
this$1.origin = this$1.getAxis() === 'y'
|
|
? ((flipPosition(this$1.dir)) + "-" + (this$1.align))
|
|
: ((this$1.align) + "-" + (flipPosition(this$1.dir)));
|
|
});
|
|
|
|
this.toggleElement(this.tooltip, true);
|
|
|
|
},
|
|
|
|
updateAria: function(toggled) {
|
|
attr(this.$el, 'aria-expanded', toggled);
|
|
}
|
|
|
|
},
|
|
|
|
events: ( obj = {
|
|
|
|
focus: 'show',
|
|
blur: 'hide'
|
|
|
|
}, obj[(pointerEnter + " " + pointerLeave)] = function (e) {
|
|
if (!isTouch(e)) {
|
|
this[e.type === pointerEnter ? 'show' : 'hide']();
|
|
}
|
|
}, obj[pointerDown] = function (e) {
|
|
if (isTouch(e)) {
|
|
this.show();
|
|
}
|
|
}, obj )
|
|
|
|
};
|
|
|
|
function makeFocusable(el) {
|
|
if (!isFocusable(el)) {
|
|
attr(el, 'tabindex', '0');
|
|
}
|
|
}
|
|
|
|
var upload = {
|
|
|
|
props: {
|
|
allow: String,
|
|
clsDragover: String,
|
|
concurrent: Number,
|
|
maxSize: Number,
|
|
method: String,
|
|
mime: String,
|
|
msgInvalidMime: String,
|
|
msgInvalidName: String,
|
|
msgInvalidSize: String,
|
|
multiple: Boolean,
|
|
name: String,
|
|
params: Object,
|
|
type: String,
|
|
url: String
|
|
},
|
|
|
|
data: {
|
|
allow: false,
|
|
clsDragover: 'uk-dragover',
|
|
concurrent: 1,
|
|
maxSize: 0,
|
|
method: 'POST',
|
|
mime: false,
|
|
msgInvalidMime: 'Invalid File Type: %s',
|
|
msgInvalidName: 'Invalid File Name: %s',
|
|
msgInvalidSize: 'Invalid File Size: %s Kilobytes Max',
|
|
multiple: false,
|
|
name: 'files[]',
|
|
params: {},
|
|
type: '',
|
|
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(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(e) {
|
|
stop(e);
|
|
|
|
var transfer = e.dataTransfer;
|
|
|
|
if (!transfer || !transfer.files) {
|
|
return;
|
|
}
|
|
|
|
removeClass(this.$el, this.clsDragover);
|
|
|
|
this.upload(transfer.files);
|
|
},
|
|
|
|
dragenter: function(e) {
|
|
stop(e);
|
|
},
|
|
|
|
dragover: function(e) {
|
|
stop(e);
|
|
addClass(this.$el, this.clsDragover);
|
|
},
|
|
|
|
dragleave: function(e) {
|
|
stop(e);
|
|
removeClass(this.$el, this.clsDragover);
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
upload: function(files) {
|
|
var this$1 = this;
|
|
|
|
|
|
if (!files.length) {
|
|
return;
|
|
}
|
|
|
|
trigger(this.$el, 'upload', [files]);
|
|
|
|
for (var i = 0; i < files.length; i++) {
|
|
|
|
if (this.maxSize && this.maxSize * 1000 < files[i].size) {
|
|
this.fail(this.msgInvalidSize.replace('%s', this.maxSize));
|
|
return;
|
|
}
|
|
|
|
if (this.allow && !match(this.allow, files[i].name)) {
|
|
this.fail(this.msgInvalidName.replace('%s', this.allow));
|
|
return;
|
|
}
|
|
|
|
if (this.mime && !match(this.mime, files[i].type)) {
|
|
this.fail(this.msgInvalidMime.replace('%s', this.mime));
|
|
return;
|
|
}
|
|
|
|
}
|
|
|
|
if (!this.multiple) {
|
|
files = [files[0]];
|
|
}
|
|
|
|
this.beforeAll(this, files);
|
|
|
|
var chunks = chunk(files, this.concurrent);
|
|
var 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.method,
|
|
responseType: 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]); }
|
|
);
|
|
|
|
return 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); }
|
|
);
|
|
|
|
};
|
|
|
|
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();
|
|
}
|
|
|
|
var components = /*#__PURE__*/Object.freeze({
|
|
__proto__: null,
|
|
Countdown: countdown,
|
|
Filter: filter,
|
|
Lightbox: lightbox,
|
|
LightboxPanel: LightboxPanel,
|
|
Notification: notification,
|
|
Parallax: parallax,
|
|
Slider: slider,
|
|
SliderParallax: sliderParallax,
|
|
Slideshow: slideshow,
|
|
SlideshowParallax: sliderParallax,
|
|
Sortable: sortable,
|
|
Tooltip: tooltip,
|
|
Upload: upload
|
|
});
|
|
|
|
each(components, function (component, name) { return UIkit.component(name, component); }
|
|
);
|
|
|
|
return UIkit;
|
|
|
|
})));
|