(.*?)<\/svg>/g, '$1')).replace(/\s/g, '');
}
var closeIcon = "";
@@ -5597,19 +5538,18 @@
var searchNavbar = "";
- var slidenavNext = "";
+ var slidenavNext = "";
- var slidenavNextLarge = "";
+ var slidenavNextLarge = "";
- var slidenavPrevious = "";
+ var slidenavPrevious = "";
- var slidenavPreviousLarge = "";
+ var slidenavPreviousLarge = "";
var spinner = "";
var totop = "";
- var parsed = {};
var icons = {
spinner: spinner,
totop: totop,
@@ -5631,19 +5571,21 @@
var Icon = {
- install: install,
+ install: install$3,
- mixins: [Class, Svg],
+ extends: SVG,
args: 'icon',
props: ['icon'],
- data: {include: []},
+ data: {
+ include: ['focusable']
+ },
isIcon: true,
- connected: function() {
+ beforeConnect: function() {
addClass(this.$el, 'uk-icon');
},
@@ -5651,13 +5593,13 @@
getSvg: function() {
- var icon = getIcon(applyRtl(this.icon));
+ var icon = getIcon(this.icon);
if (!icon) {
- return Promise.reject('Icon not found.');
+ return Promise$1.reject('Icon not found.');
}
- return Promise.resolve(icon);
+ return Promise$1.resolve(icon);
}
}
@@ -5666,11 +5608,17 @@
var IconComponent = {
+ args: false,
+
extends: Icon,
data: function (vm) { return ({
icon: hyphenate(vm.constructor.options.name)
- }); }
+ }); },
+
+ beforeConnect: function() {
+ addClass(this.$el, this.$name);
+ }
};
@@ -5678,7 +5626,7 @@
extends: IconComponent,
- connected: function() {
+ beforeConnect: function() {
addClass(this.$el, 'uk-slidenav');
},
@@ -5737,12 +5685,13 @@
connected: function() {
var this$1 = this;
- this.svg.then(function (svg) { return this$1.ratio !== 1 && css($('circle', svg), 'strokeWidth', 1 / this$1.ratio); }, noop);
+ this.svg.then(function (svg) { return svg && this$1.ratio !== 1 && css($('circle', svg), 'strokeWidth', 1 / this$1.ratio); });
}
};
- function install(UIkit) {
+ var parsed = {};
+ function install$3(UIkit) {
UIkit.icon.add = function (name, svg) {
var obj;
@@ -5754,7 +5703,7 @@
});
if (UIkit._initialized) {
- apply(document.body, function (el) { return each(UIkit.getComponents(el), function (cmp) {
+ apply$1(document.body, function (el) { return each(UIkit.getComponents(el), function (cmp) {
cmp.$options.isIcon && cmp.icon in added && cmp.$reset();
}); }
);
@@ -5769,7 +5718,7 @@
}
if (!parsed[icon]) {
- parsed[icon] = $(icons[icon].trim());
+ parsed[icon] = $((icons[applyRtl(icon)] || icons[icon]).trim());
}
return parsed[icon].cloneNode(true);
@@ -5779,7 +5728,7 @@
return isRtl ? swap(swap(icon, 'left', 'right'), 'previous', 'next') : icon;
}
- var Img = {
+ var img = {
args: 'dataSrc',
@@ -5801,7 +5750,7 @@
width: false,
height: false,
offsetTop: '50vh',
- offsetLeft: 0,
+ offsetLeft: '50vw',
target: false
},
@@ -5843,7 +5792,7 @@
get: function(ref) {
var target = ref.target;
- return [this.$el].concat(queryAll(target, this.$el));
+ return [this.$el ].concat( queryAll(target, this.$el));
},
watch: function() {
@@ -5868,8 +5817,13 @@
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.dataSrc, this.dataSrcset, this.sizes);
+ 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));
}
@@ -5883,7 +5837,7 @@
},
disconnected: function() {
- this.observer.disconnect();
+ this.observer && this.observer.disconnect();
},
update: {
@@ -5893,6 +5847,10 @@
var image = ref.image;
+ if (!this.observer) {
+ return false;
+ }
+
if (!image && document.readyState === 'complete') {
this.load(this.observer.takeRecords());
}
@@ -5929,7 +5887,8 @@
var this$1 = this;
- if (!entries.some(function (entry) { return entry.isIntersecting; })) {
+ // Old chromium based browsers (UC Browser) did not implement `isIntersecting`
+ if (!entries.some(function (entry) { return isUndefined(entry.isIntersecting) || entry.isIntersecting; })) {
return;
}
@@ -5939,7 +5898,7 @@
storage[this$1.cacheKey] = currentSrc(img);
return img;
- }, noop);
+ }, function (e) { return trigger(this$1.$el, new e.constructor(e.type, e)); });
this.observer.disconnect();
},
@@ -5947,7 +5906,7 @@
observe: function() {
var this$1 = this;
- if (!this._data.image && this._connected) {
+ if (this._connected && !this._data.image) {
this.target.forEach(function (el) { return this$1.observer.observe(el); });
}
}
@@ -6006,7 +5965,7 @@
function evaluateSize(size) {
return startsWith(size, 'calc')
? size
- .substring(5, size.length - 1)
+ .slice(5, -1)
.replace(sizeRe, function (size) { return toPx(size); })
.replace(/ /g, '')
.match(additionRe)
@@ -6077,7 +6036,7 @@
return value && !isNaN(value) ? ("(min-width: " + value + "px)") : false;
}
- var Leader = {
+ var leader = {
mixins: [Class, Media],
@@ -6170,7 +6129,7 @@
};
- var active$1;
+ var active = [];
var Modal = {
@@ -6214,7 +6173,7 @@
beforeDisconnect: function() {
if (this.isToggled()) {
- this.toggleNow(this.$el, false);
+ this.toggleElement(this.$el, false, false);
}
},
@@ -6248,7 +6207,10 @@
}
e.preventDefault();
- this.toggle();
+
+ if (this.isToggled() === includes(active, this)) {
+ this.toggle();
+ }
}
},
@@ -6260,36 +6222,16 @@
handler: function(e) {
- var prev = active$1 && active$1 !== this && active$1;
-
- active$1 = this;
-
- if (prev) {
- if (this.stack) {
- this.prev = prev;
- } else {
-
- active$1 = prev;
-
- if (prev.isToggled()) {
- prev.hide().then(this.show);
- } else {
- once(prev.$el, 'beforeshow hidden', this.show, false, function (ref) {
- var target = ref.target;
- var type = ref.type;
-
- return type === 'hidden' && target === prev.$el;
- });
- }
- e.preventDefault();
-
- }
-
- return;
+ if (includes(active, this)) {
+ return false;
}
- registerEvents();
-
+ if (!this.stack && active.length) {
+ Promise$1.all(active.map(function (modal) { return modal.hide(); })).then(this.show);
+ e.preventDefault();
+ } else {
+ active.push(this);
+ }
}
},
@@ -6301,27 +6243,49 @@
self: true,
handler: function() {
+ var this$1 = this;
- if (!hasClass(document.documentElement, this.clsPage)) {
- this.scrollbarWidth = width(window) - width(document);
- css(document.body, 'overflowY', this.scrollbarWidth && this.overlay ? 'scroll' : '');
+
+ var docEl = document.documentElement;
+
+ if (width(window) > docEl.clientWidth && this.overlay) {
+ css(document.body, 'overflowY', 'scroll');
}
- addClass(document.documentElement, this.clsPage);
+ 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;
- {
- name: 'hide',
+ if (last(active) !== this$1 || this$1.overlay && !within(target, this$1.$el) || within(target, this$1.panel)) {
+ return;
+ }
- self: true,
+ once(document, (pointerUp + " " + pointerCancel + " scroll"), function (ref) {
+ var defaultPrevented = ref.defaultPrevented;
+ var type = ref.type;
+ var newTarget = ref.target;
- handler: function() {
- if (!active$1 || active$1 === this && !this.prev) {
- deregisterEvents();
+ 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});
}
}
@@ -6334,32 +6298,20 @@
self: true,
handler: function() {
+ var this$1 = this;
- var found;
- var ref = this;
- var prev = ref.prev;
-
- active$1 = active$1 && active$1 !== this && active$1 || prev;
-
- if (!active$1) {
-
- css(document.body, 'overflowY', '');
-
- } else {
- while (prev) {
-
- if (prev.clsPage === this.clsPage) {
- found = true;
- break;
- }
-
- prev = prev.prev;
-
- }
+ if (includes(active, this)) {
+ active.splice(active.indexOf(this), 1);
}
- if (!found) {
+ 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);
}
@@ -6378,88 +6330,51 @@
show: function() {
var this$1 = this;
-
- if (this.isToggled()) {
- return Promise.resolve();
- }
-
- if (this.container && this.$el.parentNode !== this.container) {
+ if (this.container && parent(this.$el) !== this.container) {
append(this.container, this.$el);
- return new Promise(function (resolve) { return requestAnimationFrame(function () { return this$1.show().then(resolve); }
+ return new Promise$1(function (resolve) { return requestAnimationFrame(function () { return this$1.show().then(resolve); }
); }
);
}
- return this.toggleElement(this.$el, true, animate$1(this));
+ return this.toggleElement(this.$el, true, animate(this));
},
hide: function() {
- return this.isToggled()
- ? this.toggleElement(this.$el, false, animate$1(this))
- : Promise.resolve();
- },
-
- getActive: function() {
- return active$1;
+ return this.toggleElement(this.$el, false, animate(this));
}
}
};
- var events;
-
- function registerEvents() {
-
- if (events) {
- return;
- }
-
- events = [
- on(document, pointerUp, function (ref) {
- var target = ref.target;
- var defaultPrevented = ref.defaultPrevented;
-
- if (active$1 && active$1.bgClose && !defaultPrevented && (!active$1.overlay || within(target, active$1.$el)) && !within(target, active$1.panel)) {
- active$1.hide();
- }
- }),
- on(document, 'keydown', function (e) {
- if (e.keyCode === 27 && active$1 && active$1.escClose) {
- e.preventDefault();
- active$1.hide();
- }
- })
- ];
- }
-
- function deregisterEvents() {
- events && events.forEach(function (unbind) { return unbind(); });
- events = null;
- }
-
- function animate$1(ref) {
+ function animate(ref) {
var transitionElement = ref.transitionElement;
var _toggle = ref._toggle;
- return function (el, show) { return new Promise(function (resolve, reject) { return once(el, 'show hide', function () {
+ 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);
- if (toMs(css(transitionElement, 'transitionDuration'))) {
- once(transitionElement, 'transitionend', resolve, false, function (e) { return e.target === transitionElement; });
- } else {
+ 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$1 = {
+ var modal = {
- install: install$1,
+ install: install$2,
mixins: [Modal],
@@ -6505,96 +6420,94 @@
};
- function install$1(UIkit) {
+ function install$2(ref) {
+ var modal = ref.modal;
- UIkit.modal.dialog = function (content, options) {
- var dialog = UIkit.modal((" "), options);
+ modal.dialog = function (content, options) {
+
+ var dialog = modal(
+ (""),
+ options
+ );
dialog.show();
- on(dialog.$el, 'hidden', function (ref) {
- var target = ref.target;
- var currentTarget = ref.currentTarget;
-
- if (target === currentTarget) {
- Promise.resolve(function () { return dialog.$destroy(true); });
- }
- });
+ on(dialog.$el, 'hidden', function () { return Promise$1.resolve().then(function () { return dialog.$destroy(true); }
+ ); }, {self: true}
+ );
return dialog;
};
- UIkit.modal.alert = function (message, options) {
+ modal.alert = function (message, options) {
+ return openDialog(
+ function (ref) {
+ var labels = ref.labels;
- options = assign({bgClose: false, escClose: false, labels: UIkit.modal.labels}, options);
-
- return new Promise(
- function (resolve) { return on(UIkit.modal.dialog((" " + (isString(message) ? message : html(message)) + "
"), options).$el, 'hide', resolve); }
+ return ("" + (isString(message) ? message : html(message)) + "
");
+ },
+ options,
+ function (deferred) { return deferred.resolve(); }
);
};
- UIkit.modal.confirm = function (message, options) {
+ modal.confirm = function (message, options) {
+ return openDialog(
+ function (ref) {
+ var labels = ref.labels;
- options = assign({bgClose: false, escClose: true, labels: UIkit.modal.labels}, options);
-
- return new Promise(function (resolve, reject) {
-
- var confirm = UIkit.modal.dialog((" "), options);
-
- var resolved = false;
-
- on(confirm.$el, 'submit', 'form', function (e) {
- e.preventDefault();
- resolve();
- resolved = true;
- confirm.hide();
- });
- on(confirm.$el, 'hide', function () {
- if (!resolved) {
- reject();
- }
- });
-
- });
+ return ("");
+ },
+ options,
+ function (deferred) { return deferred.reject(); }
+ );
};
- UIkit.modal.prompt = function (message, value, options) {
+ modal.prompt = function (message, value, options) {
+ return openDialog(
+ function (ref) {
+ var labels = ref.labels;
- options = assign({bgClose: false, escClose: true, labels: UIkit.modal.labels}, options);
-
- return new Promise(function (resolve) {
-
- var prompt = UIkit.modal.dialog((" "), options),
- input = $('input', prompt.$el);
-
- input.value = value;
-
- var resolved = false;
-
- on(prompt.$el, 'submit', 'form', function (e) {
- e.preventDefault();
- resolve(input.value);
- resolved = true;
- prompt.hide();
- });
- on(prompt.$el, 'hide', function () {
- if (!resolved) {
- resolve(null);
- }
- });
-
- });
+ return ("");
+ },
+ options,
+ function (deferred) { return deferred.resolve(null); },
+ function (dialog) { return $('input', dialog.$el).value; }
+ );
};
- UIkit.modal.labels = {
+ 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 = {
+ var nav = {
extends: Accordion,
@@ -6606,7 +6519,7 @@
};
- var Navbar = {
+ var navbar = {
mixins: [Class, FlexBug],
@@ -6666,47 +6579,58 @@
return ("bottom-" + align);
},
- dropdowns: function(ref, $el) {
- var dropdown = ref.dropdown;
- var clsDrop = ref.clsDrop;
+ dropbar: {
- return $$((dropdown + " ." + clsDrop), $el);
- }
+ get: function(ref) {
+ var dropbar = ref.dropbar;
- },
- beforeConnect: function() {
+ if (!dropbar) {
+ return null;
+ }
- var ref = this.$props;
- var dropbar = ref.dropbar;
+ dropbar = this._dropbar || query(dropbar, this.$el) || $('+ .uk-navbar-dropbar', this.$el);
- this.dropbar = dropbar && (query(dropbar, this.$el) || $('+ .uk-navbar-dropbar', this.$el) || $(''));
+ return dropbar ? dropbar : (this._dropbar = $(''));
- if (this.dropbar) {
+ },
- addClass(this.dropbar, 'uk-navbar-dropbar');
+ 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
- if (this.dropbarMode === 'slide') {
- addClass(this.dropbar, 'uk-navbar-dropbar-slide');
- }
}
},
disconnected: function() {
- this.dropbar && remove(this.dropbar);
- },
-
- update: function() {
- var this$1 = this;
-
-
- this.$create(
- 'drop',
- this.dropdowns.filter(function (el) { return !this$1.getDropdown(el); }),
- assign({}, this.$props, {boundary: this.boundary, pos: this.pos, offset: this.dropbar || this.offset})
- );
-
+ this.dropbar && remove$1(this.dropbar);
+ delete this._dropbar;
},
events: [
@@ -6739,7 +6663,7 @@
handler: function() {
var active = this.getActive();
- if (active && !matches(this.dropbar, ':hover')) {
+ if (active && !this.dropdowns.some(function (el) { return matches(el, ':hover'); })) {
active.hide();
}
}
@@ -6756,7 +6680,7 @@
handler: function() {
- if (!this.dropbar.parentNode) {
+ if (!parent(this.dropbar)) {
after(this.dropbarAnchor || this.$el, this.dropbar);
}
@@ -6766,16 +6690,21 @@
{
name: 'show',
- capture: true,
-
filter: function() {
return this.dropbar;
},
- handler: function(_, drop) {
+ handler: function(_, ref) {
+ var $el = ref.$el;
+ var dir = ref.dir;
- var $el = drop.$el;
- var dir = drop.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"));
@@ -6814,6 +6743,9 @@
handler: function(_, ref) {
var $el = ref.$el;
+ if (!hasClass($el, this.clsDrop)) {
+ return;
+ }
var active = this.getActive();
@@ -6848,7 +6780,7 @@
height(dropbar, oldHeight);
Transition.cancel([el, dropbar]);
- return Promise.all([
+ 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)
])
@@ -6867,7 +6799,7 @@
};
- var Offcanvas = {
+ var offcanvas = {
mixins: [Modal],
@@ -6891,7 +6823,8 @@
clsSidebarAnimation: 'uk-offcanvas-bar-animation',
clsMode: 'uk-offcanvas',
clsOverlay: 'uk-offcanvas-overlay',
- selClose: '.uk-offcanvas-close'
+ selClose: '.uk-offcanvas-close',
+ container: false
},
computed: {
@@ -6934,11 +6867,23 @@
transitionElement: function(ref) {
var mode = ref.mode;
- return mode === 'reveal' ? this.panel.parentNode : this.panel;
+ return mode === 'reveal' ? parent(this.panel) : this.panel;
}
},
+ update: {
+
+ read: function() {
+ if (this.isToggled() && !isVisible(this.$el)) {
+ this.hide();
+ }
+ },
+
+ events: ['resize']
+
+ },
+
events: [
{
@@ -6950,9 +6895,10 @@
},
handler: function(ref) {
- var current = ref.current;
+ var hash = ref.current.hash;
+ var defaultPrevented = ref.defaultPrevented;
- if (current.hash && $(current.hash, document.body)) {
+ if (!defaultPrevented && hash && $(hash, document.body)) {
this.hide();
}
}
@@ -6991,7 +6937,7 @@
},
handler: function(e) {
- e.preventDefault();
+ e.cancelable && e.preventDefault();
}
},
@@ -7021,7 +6967,7 @@
|| scrollTop === 0 && clientY > 0
|| scrollHeight - scrollTop <= clientHeight && clientY < 0
) {
- e.preventDefault();
+ e.cancelable && e.preventDefault();
}
}
@@ -7035,13 +6981,14 @@
handler: function() {
- if (this.mode === 'reveal' && !hasClass(this.panel.parentNode, this.clsMode)) {
+ if (this.mode === 'reveal' && !hasClass(parent(this.panel), this.clsMode)) {
wrapAll(this.panel, '');
- addClass(this.panel.parentNode, this.clsMode);
+ 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 : '');
@@ -7051,6 +6998,7 @@
this.clsContainerAnimation && suppressUserScale();
+
}
},
@@ -7061,11 +7009,7 @@
handler: function() {
removeClass(document.body, this.clsContainerAnimation);
-
- var active = this.getActive();
- if (this.mode === 'none' || active && active !== this && active !== this.prev) {
- trigger(this.panel, 'transitionend');
- }
+ css(document.body, 'touch-action', '');
}
},
@@ -7122,7 +7066,7 @@
return $('meta[name="viewport"]', document.head) || append(document.head, '');
}
- var OverflowAuto = {
+ var overflowAuto = {
mixins: [Class],
@@ -7160,13 +7104,13 @@
read: function() {
- if (!this.content || !this.container) {
+ if (!this.content || !this.container || !isVisible(this.$el)) {
return false;
}
return {
current: toFloat(css(this.$el, 'maxHeight')),
- max: Math.max(150, height(this.container) - (offset(this.content).height - height(this.$el)))
+ max: Math.max(150, height(this.container) - (dimensions(this.content).height - height(this.$el)))
};
},
@@ -7186,7 +7130,7 @@
};
- var Responsive = {
+ var responsive = {
props: ['width', 'height'],
@@ -7198,7 +7142,7 @@
read: function() {
return isVisible(this.$el) && this.width && this.height
- ? {width: width(this.$el.parentNode), height: this.height}
+ ? {width: width(parent(this.$el)), height: this.height}
: false;
},
@@ -7215,15 +7159,13 @@
};
- var Scroll = {
+ var scroll = {
props: {
- duration: Number,
offset: Number
},
data: {
- duration: 1000,
offset: 0
},
@@ -7235,37 +7177,11 @@
el = el && $(el) || document.body;
- var docHeight = height(document);
- var winHeight = height(window);
-
- var target = offset(el).top - this.offset;
- if (target + winHeight > docHeight) {
- target = docHeight - winHeight;
+ if (trigger(this.$el, 'beforescroll', [this, el])) {
+ scrollIntoView(el, {offset: this.offset}).then(function () { return trigger(this$1.$el, 'scrolled', [this$1, el]); }
+ );
}
- if (!trigger(this.$el, 'beforescroll', [this, el])) {
- return;
- }
-
- var start = Date.now();
- var startY = window.pageYOffset;
- var step = function () {
-
- var currentY = startY + (target - startY) * ease(clamp((Date.now() - start) / this$1.duration));
-
- scrollTop(window, currentY);
-
- // scroll more if we have not reached our destination
- if (currentY !== target) {
- requestAnimationFrame(step);
- } else {
- trigger(this$1.$el, 'scrolled', [this$1, el]);
- }
-
- };
-
- step();
-
}
},
@@ -7279,18 +7195,15 @@
}
e.preventDefault();
- this.scrollTo(escape(decodeURIComponent(this.$el.hash)).substr(1));
+ this.scrollTo(("#" + (escape(decodeURIComponent((this.$el.hash || '').substr(1))))));
}
}
};
- function ease(k) {
- return 0.5 * (1 - Math.cos(Math.PI * k));
- }
-
- var Scrollspy = {
+ var stateKey = '_ukScrollspy';
+ var scrollspy = {
args: 'cls',
@@ -7317,47 +7230,59 @@
computed: {
- elements: function(ref, $el) {
- var target = ref.target;
+ 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
- return target ? $$(target, $el) : [$el];
}
},
+ 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: [
{
- write: function() {
- if (this.hidden) {
- css(filter(this.elements, (":not(." + (this.inViewClass) + ")")), 'visibility', 'hidden');
- }
- }
-
- },
-
- {
-
- read: function(ref) {
+ read: function(data$1) {
var this$1 = this;
- var update = ref.update;
- if (!update) {
- return;
+ // 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) {
- var state = el._ukScrollspyState;
-
- if (!state) {
- state = {cls: data(el, 'uk-scrollspy-class') || this$1.cls};
+ if (!el[stateKey]) {
+ el[stateKey] = {cls: data(el, 'uk-scrollspy-class') || this$1.cls};
}
- state.show = isInView(el, this$1.offsetTop, this$1.offsetLeft);
- el._ukScrollspyState = state;
+ el[stateKey].show = isInView(el, this$1.offsetTop, this$1.offsetLeft);
});
@@ -7367,81 +7292,30 @@
var this$1 = this;
- // Let child components be applied at least once first
- if (!data.update) {
- this.$emit();
- return data.update = true;
- }
-
this.elements.forEach(function (el) {
- var state = el._ukScrollspyState;
- var cls = state.cls;
+ var state = el[stateKey];
if (state.show && !state.inview && !state.queued) {
- var show = function () {
+ state.queued = true;
- css(el, 'visibility', '');
- addClass(el, this$1.inViewClass);
- toggleClass(el, cls);
+ 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);
+ });
- trigger(el, 'inview');
+ } else if (!state.show && state.inview && !state.queued && this$1.repeat) {
- this$1.$update(el);
-
- state.inview = true;
- state.abort && state.abort();
- };
-
- if (this$1.delay) {
-
- state.queued = true;
- data.promise = (data.promise || Promise.resolve()).then(function () {
- return !state.inview && new Promise(function (resolve) {
-
- var timer = setTimeout(function () {
-
- show();
- resolve();
-
- }, data.promise || this$1.elements.length === 1 ? this$1.delay : 0);
-
- state.abort = function () {
- clearTimeout(timer);
- resolve();
- state.queued = false;
- };
-
- });
-
- });
-
- } else {
- show();
- }
-
- } else if (!state.show && (state.inview || state.queued) && this$1.repeat) {
-
- state.abort && state.abort();
-
- if (!state.inview) {
- return;
- }
-
- css(el, 'visibility', this$1.hidden ? 'hidden' : '');
- removeClass(el, this$1.inViewClass);
- toggleClass(el, cls);
-
- trigger(el, 'outview');
-
- this$1.$update(el);
-
- state.inview = false;
+ this$1.toggle(el, false);
}
-
});
},
@@ -7450,11 +7324,38 @@
}
- ]
+ ],
+
+ 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 = {
+ var scrollspyNav = {
props: {
cls: String,
@@ -7474,18 +7375,30 @@
computed: {
- links: function(_, $el) {
- return $$('a[href^="#"]', $el).filter(function (el) { return el.hash; });
+ 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 || '*');
- },
-
- targets: function() {
- return $$(this.links.map(function (el) { return escape(el.hash); }).join(','));
}
},
@@ -7495,51 +7408,40 @@
{
read: function() {
- if (this.scroll) {
- this.$create('scroll', this.links, {offset: this.offset || 0});
- }
- }
-
- },
-
- {
-
- read: function(data) {
var this$1 = this;
- var scroll = window.pageYOffset + this.offset + 1;
- var max = height(document) - height(window) + this.offset;
+ var ref = this.targets;
+ var length = ref.length;
- data.active = false;
+ if (!length || !isVisible(this.$el)) {
+ return false;
+ }
- this.targets.every(function (el, i) {
+ 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;
- var ref = offset(el);
- var top = ref.top;
- var last = i + 1 === this$1.targets.length;
+ if (scrollTop === max) {
+ active = length - 1;
+ } else {
- if (!this$1.overflow && (i === 0 && top > scroll || last && top + el.offsetTop < scroll)) {
- return false;
- }
-
- if (!last && offset(this$1.targets[i + 1]).top <= scroll) {
- return true;
- }
-
- if (scroll >= max) {
- for (var j = this$1.targets.length - 1; j > i; j--) {
- if (isInView(this$1.targets[j])) {
- el = this$1.targets[j];
- break;
- }
+ 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 !(data.active = $(filter(this$1.links, ("[href=\"#" + (el.id) + "\"]"))));
-
- });
-
+ return {active: active};
},
write: function(ref) {
@@ -7549,8 +7451,8 @@
this.links.forEach(function (el) { return el.blur(); });
removeClass(this.elements, this.cls);
- if (active) {
- trigger(this.$el, 'active', [active, addClass(this.closest ? closest(active, this.closest) : active, this.cls)]);
+ if (active !== false) {
+ trigger(this.$el, 'active', [active, addClass(this.elements[active], this.cls)]);
}
},
@@ -7563,14 +7465,14 @@
};
- var Sticky = {
+ var sticky = {
mixins: [Class, Media],
props: {
top: null,
bottom: Boolean,
- offset: Number,
+ offset: String,
animation: String,
clsActive: String,
clsInactive: String,
@@ -7599,6 +7501,12 @@
computed: {
+ offset: function(ref) {
+ var offset = ref.offset;
+
+ return toPx(offset);
+ },
+
selTarget: function(ref, $el) {
var selTarget = ref.selTarget;
@@ -7644,7 +7552,7 @@
removeClass(this.selTarget, this.clsInactive);
}
- remove(this.placeholder);
+ remove$1(this.placeholder);
this.placeholder = null;
this.widthElement = null;
},
@@ -7655,7 +7563,9 @@
name: 'load hashchange popstate',
- el: window,
+ el: function() {
+ return window;
+ },
handler: function() {
var this$1 = this;
@@ -7692,16 +7602,20 @@
{
- read: function(ref, type) {
+ read: function(ref, types) {
var height = ref.height;
- if (this.isActive && type !== 'update') {
+ 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;
@@ -7712,12 +7626,12 @@
var bottom = parseProp('bottom', this);
this.top = Math.max(toFloat(parseProp('top', this)), this.topOffset) - this.offset;
- this.bottom = bottom && bottom - height;
- this.inactive = !this.matchMedia;
+ this.bottom = bottom && bottom - this.$el.offsetHeight;
+ this.width = dimensions(isVisible(this.widthElement) ? this.widthElement : this.$el).width;
return {
- lastScroll: false,
height: height,
+ top: offsetPosition(this.placeholder)[0],
margins: css(this.$el, ['marginTop', 'marginBottom', 'marginLeft', 'marginRight'])
};
},
@@ -7734,11 +7648,10 @@
if (!within(placeholder, document)) {
after(this.$el, placeholder);
- attr(placeholder, 'hidden', '');
+ placeholder.hidden = true;
}
- // ensure active/inactive classes are applied
- this.isActive = this.isActive;
+ this.isActive = !!this.isActive; // force self-assign
},
@@ -7752,34 +7665,30 @@
var scroll = ref.scroll; if ( scroll === void 0 ) scroll = 0;
- this.width = (isVisible(this.widthElement) ? this.widthElement : this.$el).offsetWidth;
-
this.scroll = window.pageYOffset;
return {
dir: scroll <= this.scroll ? 'down' : 'up',
- scroll: this.scroll,
- visible: isVisible(this.$el),
- top: offsetPosition(this.placeholder)[0]
+ scroll: this.scroll
};
},
- write: function(data, type) {
+ 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;
- var visible = data.visible;
- var now = performance.now();
data.lastScroll = scroll;
- if (scroll < 0 || scroll === lastScroll || !visible || this.disabled || this.showOnUp && type !== 'scroll') {
+ if (scroll < 0 || scroll === lastScroll && isScrollUpdate || this.showOnUp && !isScrollUpdate && !this.isFixed) {
return;
}
@@ -7790,13 +7699,13 @@
data.lastDir = dir;
- if (this.showOnUp && Math.abs(data.initScroll - scroll) <= 30 && Math.abs(lastScroll - scroll) <= 10) {
+ 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' || dir === 'up' && !this.isFixed && scroll <= this.bottomOffset)
+ || this.showOnUp && (scroll <= this.top || dir === 'down' && isScrollUpdate || dir === 'up' && !this.isFixed && scroll <= this.bottomOffset)
) {
if (!this.isFixed) {
@@ -7846,7 +7755,7 @@
this.isFixed = true;
this.update();
- attr(this.placeholder, 'hidden', null);
+ this.placeholder.hidden = false;
},
@@ -7855,7 +7764,7 @@
this.isActive = false;
removeClass(this.$el, this.clsFixed, this.clsBelow);
css(this.$el, {position: '', top: '', width: ''});
- attr(this.placeholder, 'hidden', '');
+ this.placeholder.hidden = true;
},
@@ -7864,7 +7773,7 @@
var active = this.top !== 0 || this.scroll > this.top;
var top = Math.max(0, this.offset);
- if (this.bottom && this.scroll > this.bottom - this.offset) {
+ if (isNumeric(this.bottom) && this.scroll > this.bottom - this.offset) {
top = this.bottom - this.scroll;
}
@@ -7896,21 +7805,13 @@
return;
}
- if (isNumeric(value)) {
+ if (isString(value) && value.match(/^-?\d/)) {
- return propOffset + toFloat(value);
-
- } else if (isString(value) && value.match(/^-?\d+vh$/)) {
-
- return height(window) * toFloat(value) / 100;
+ return propOffset + toPx(value);
} else {
- var el = value === true ? $el.parentNode : query(value, $el);
-
- if (el) {
- return offset(el).top + el.offsetHeight;
- }
+ return offset(value === true ? parent($el) : query(value, $el)).bottom;
}
}
@@ -7934,23 +7835,59 @@
active: 0,
swiping: true,
cls: 'uk-active',
- clsContainer: 'uk-switcher',
- attrItem: 'uk-switcher-item',
- queued: true
+ attrItem: 'uk-switcher-item'
},
computed: {
- connects: function(ref, $el) {
- var connect = ref.connect;
+ 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
- return queryAll(connect, $el);
},
- toggles: function(ref, $el) {
- var toggle = ref.toggle;
+ toggles: {
- return $$(toggle, $el);
+ 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); }); });
}
},
@@ -7962,12 +7899,12 @@
name: 'click',
delegate: function() {
- return ((this.toggle) + ":not(.uk-disabled)");
+ return this.toggle;
},
handler: function(e) {
e.preventDefault();
- this.show(toNodes(this.$el.children).filter(function (el) { return within(e.current, el); })[0]);
+ this.show(e.current);
}
},
@@ -8009,68 +7946,48 @@
],
- update: function() {
- var this$1 = this;
-
-
- this.connects.forEach(function (list) { return this$1.updateAria(list.children); });
- var ref = this.$el;
- var children = ref.children;
- this.show(filter(children, ("." + (this.cls)))[0] || children[this.active] || children[0]);
-
- },
-
methods: {
index: function() {
- return !isEmpty(this.connects) && index(filter(this.connects[0].children, ("." + (this.cls)))[0]);
+ var this$1 = this;
+
+ return findIndex(this.children, function (el) { return hasClass(el, this$1.cls); });
},
show: function(item) {
var this$1 = this;
- var ref = this.$el;
- var children = ref.children;
- var length = children.length;
var prev = this.index();
- var hasPrev = prev >= 0;
- var dir = item === 'previous' ? -1 : 1;
+ var next = getIndex(
+ this.children[getIndex(item, this.toggles, prev)],
+ children(this.$el)
+ );
- var toggle, active, next = getIndex(item, children, prev);
-
- for (var i = 0; i < length; i++, next = (next + dir + length) % length) {
- if (!matches(this.toggles[next], '.uk-disabled *, .uk-disabled, [disabled]')) {
- toggle = this.toggles[next];
- active = children[next];
- break;
- }
- }
-
- if (!active || prev >= 0 && hasClass(active, this.cls) || prev === next) {
+ if (prev === next) {
return;
}
- removeClass(children, this.cls);
- addClass(active, this.cls);
- attr(this.toggles, 'aria-expanded', false);
- attr(toggle, 'aria-expanded', true);
-
- this.connects.forEach(function (list) {
- if (!hasPrev) {
- this$1.toggleNow(list.children[next]);
- } else {
- this$1.toggleElement([list.children[prev], list.children[next]]);
- }
+ 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 = {
+ var tab = {
mixins: [Class],
@@ -8100,7 +8017,7 @@
};
- var Toggle = {
+ var toggle = {
mixins: [Media, Togglable],
@@ -8109,7 +8026,8 @@
props: {
href: String,
target: null,
- mode: 'list'
+ mode: 'list',
+ queued: Boolean
},
data: {
@@ -8119,27 +8037,39 @@
queued: true
},
- computed: {
-
- target: function(ref, $el) {
- var href = ref.href;
- var target = ref.target;
-
- target = queryAll(target || href, $el);
- return target.length && target || [$el];
+ connected: function() {
+ if (!isFocusable(this.$el)) {
+ attr(this.$el, 'tabindex', '0');
}
-
},
- connected: function() {
- trigger(this.target, 'updatearia', [this]);
+ 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),
+ name: (pointerEnter + " " + pointerLeave + " focus blur"),
filter: function() {
return includes(this.mode, 'hover');
@@ -8147,7 +8077,7 @@
handler: function(e) {
if (!isTouch(e)) {
- this.toggle(("toggle" + (e.type === pointerEnter ? 'show' : 'hide')));
+ this.toggle(("toggle" + (includes([pointerEnter, 'focus'], e.type) ? 'show' : 'hide')));
}
}
@@ -8163,12 +8093,10 @@
handler: function(e) {
- // TODO better isToggled handling
var link;
- if (closest(e.target, 'a[href="#"], a[href=""], button')
+ if (closest(e.target, 'a[href="#"], a[href=""]')
|| (link = closest(e.target, 'a[href]')) && (
- this.cls
- || !isVisible(this.target)
+ !isToggled(this.target, this.cls)
|| link.hash && matches(this.target, link.hash)
)
) {
@@ -8178,6 +8106,21 @@
this.toggle();
}
+ },
+
+ {
+
+ name: 'toggled',
+
+ self: true,
+
+ el: function() {
+ return this.target;
+ },
+
+ handler: function(e, toggled) {
+ this.updateAria(toggled);
+ }
}
],
@@ -8208,71 +8151,106 @@
methods: {
toggle: function(type) {
- if (trigger(this.target, type || 'toggle', [this])) {
- this.toggleElement(this.target);
+ 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)
+ );
}
}
};
- function core (UIkit) {
-
- // core components
- UIkit.component('accordion', Accordion);
- UIkit.component('alert', Alert);
- UIkit.component('cover', Cover);
- UIkit.component('drop', Drop);
- UIkit.component('dropdown', Dropdown);
- UIkit.component('formCustom', FormCustom);
- UIkit.component('gif', Gif);
- UIkit.component('grid', Grid);
- UIkit.component('heightMatch', HeightMatch);
- UIkit.component('heightViewport', HeightViewport);
- UIkit.component('icon', Icon);
- UIkit.component('img', Img);
- UIkit.component('leader', Leader);
- UIkit.component('margin', Margin);
- UIkit.component('modal', Modal$1);
- UIkit.component('nav', Nav);
- UIkit.component('navbar', Navbar);
- UIkit.component('offcanvas', Offcanvas);
- UIkit.component('overflowAuto', OverflowAuto);
- UIkit.component('responsive', Responsive);
- UIkit.component('scroll', Scroll);
- UIkit.component('scrollspy', Scrollspy);
- UIkit.component('scrollspyNav', ScrollspyNav);
- UIkit.component('sticky', Sticky);
- UIkit.component('svg', Svg);
- UIkit.component('switcher', Switcher);
- UIkit.component('tab', Tab);
- UIkit.component('toggle', Toggle);
- UIkit.component('video', Video);
-
- // Icon components
- UIkit.component('close', Close);
- UIkit.component('marker', IconComponent);
- UIkit.component('navbarToggleIcon', IconComponent);
- UIkit.component('overlayIcon', IconComponent);
- UIkit.component('paginationNext', IconComponent);
- UIkit.component('paginationPrevious', IconComponent);
- UIkit.component('searchIcon', Search);
- UIkit.component('slidenavNext', Slidenav);
- UIkit.component('slidenavPrevious', Slidenav);
- UIkit.component('spinner', Spinner);
- UIkit.component('totop', IconComponent);
-
- // core functionality
- UIkit.use(Core);
-
+ // TODO improve isToggled handling
+ function isToggled(target, cls) {
+ return cls
+ ? hasClass(target, cls.split(' ')[0])
+ : isVisible(target);
}
- UIkit.version = '3.1.2';
+ 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
+ });
- core(UIkit);
+ // register components
+ each(components$1, function (component, name) { return UIkit.component(name, component); }
+ );
- var Countdown = {
+ // core functionality
+ UIkit.use(Core);
+
+ boot(UIkit);
+
+ var countdown = {
mixins: [Class],
@@ -8343,7 +8321,9 @@
name: 'visibilitychange',
- el: document,
+ el: function() {
+ return document;
+ },
handler: function() {
if (document.hidden) {
@@ -8402,14 +8382,12 @@
methods: {
start: function() {
- var this$1 = this;
-
this.stop();
if (this.date && this.units.length) {
- this.$emit();
- this.timer = setInterval(function () { return this$1.$emit(); }, 1000);
+ this.$update();
+ this.timer = setInterval(this.$update, 1000);
}
},
@@ -8440,102 +8418,148 @@
};
}
- var targetClass = 'uk-animation-target';
+ var clsLeave = 'uk-transition-leave';
+ var clsEnter = 'uk-transition-enter';
- var Animate = {
-
- props: {
- animation: Number
- },
-
- data: {
- animation: 150
- },
-
- computed: {
-
- target: function() {
- return this.$el;
- }
-
- },
-
- methods: {
-
- animate: function(action) {
- var this$1 = this;
+ function fade(action, target, duration, stagger) {
+ if ( stagger === void 0 ) stagger = 0;
- addStyle();
+ var index = transitionIndex(target, true);
+ var propsIn = {opacity: 1};
+ var propsOut = {opacity: 0};
- var children = toNodes(this.target.children);
- var propsFrom = children.map(function (el) { return getProps(el, true); });
+ var wrapIndexFn = function (fn) { return function () { return index === transitionIndex(target) ? fn() : Promise$1.reject(); }; };
- var oldHeight = height(this.target);
- var oldScrollY = window.pageYOffset;
+ var leaveFn = wrapIndexFn(function () {
- action();
+ addClass(target, clsLeave);
- Transition.cancel(this.target);
- children.forEach(Transition.cancel);
+ 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); });
- reset(this.target);
- this.$update(this.target);
- fastdom.flush();
+ });
- var newHeight = height(this.target);
+ var enterFn = wrapIndexFn(function () {
- children = children.concat(toNodes(this.target.children).filter(function (el) { return !includes(children, el); }));
+ var oldHeight = height(target);
- var propsTo = children.map(function (el, i) { return el.parentNode && i in propsFrom
- ? propsFrom[i]
- ? isVisible(el)
- ? getPositionWithMargin(el)
- : {opacity: 0}
- : {opacity: isVisible(el) ? 1 : 0}
- : false; }
- );
+ addClass(target, clsEnter);
+ action();
- propsFrom = propsTo.map(function (props, i) {
- var from = children[i].parentNode === this$1.target
- ? propsFrom[i] || getProps(children[i])
- : false;
+ css(children(target), {opacity: 0});
- if (from) {
- if (!props) {
- delete from.opacity;
- } else if (!('opacity' in props)) {
- var opacity = from.opacity;
+ // Ensure UIkit updates have propagated
+ return new Promise$1(function (resolve) { return requestAnimationFrame(function () {
- if (opacity % 1) {
- props.opacity = 1;
- } else {
- delete from.opacity;
- }
- }
+ 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'));
}
- return from;
- });
+ 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();
+ });
+ }); }
+ );
+ });
- addClass(this.target, targetClass);
- children.forEach(function (el, i) { return propsFrom[i] && css(el, propsFrom[i]); });
- css(this.target, 'height', oldHeight);
- scrollTop(window, oldScrollY);
+ return hasClass(target, clsLeave)
+ ? waitTransitionend(target).then(enterFn)
+ : hasClass(target, clsEnter)
+ ? waitTransitionend(target).then(leaveFn).then(enterFn)
+ : leaveFn().then(enterFn);
+ }
- return Promise.all(children.map(function (el, i) { return propsFrom[i] && propsTo[i]
- ? Transition.start(el, propsTo[i], this$1.animation, 'ease')
- : Promise.resolve(); }
- ).concat(Transition.start(this.target, {height: newHeight}, this.animation, 'ease'))).then(function () {
- children.forEach(function (el, i) { return css(el, {display: propsTo[i].opacity === 0 ? 'none' : '', zIndex: ''}); });
- reset(this$1.target);
- this$1.$update(this$1.target);
- fastdom.flush(); // needed for IE11
- }, noop);
-
- }
+ 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) {
@@ -8552,6 +8576,42 @@
: 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: '',
@@ -8560,37 +8620,73 @@
pointerEvents: '',
position: '',
top: '',
- width: ''
+ marginTop: '',
+ marginLeft: '',
+ transform: '',
+ width: '',
+ zIndex: ''
});
- removeClass(el, targetClass);
- css(el, 'height', '');
+ css(el, {height: '', display: '', padding: ''});
}
function getPositionWithMargin(el) {
- var ref = el.getBoundingClientRect();
+ 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;
- top += toFloat(css(el, 'marginTop'));
+ 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};
+ return {top: top, left: left, height: height, width: width, marginLeft: marginLeft, marginTop: marginTop, transform: ''};
}
- var style;
+ 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);
+ }
- function addStyle() {
- if (style) {
- return;
}
- style = append(document.head, '