298 lines
7.7 KiB
JavaScript
298 lines
7.7 KiB
JavaScript
|
/*! UIkit 2.25.0 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
|
||
|
|
(function(UI) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
|
||
|
|
var stacks = [];
|
||
|
|
|
||
|
|
UI.component('stackMargin', {
|
||
|
|
|
||
|
|
defaults: {
|
||
|
|
cls: 'uk-margin-small-top',
|
||
|
|
rowfirst: false
|
||
|
|
},
|
||
|
|
|
||
|
|
boot: function() {
|
||
|
|
|
||
|
|
// init code
|
||
|
|
UI.ready(function(context) {
|
||
|
|
|
||
|
|
UI.$("[data-uk-margin]", context).each(function() {
|
||
|
|
|
||
|
|
var ele = UI.$(this);
|
||
|
|
|
||
|
|
if (!ele.data("stackMargin")) {
|
||
|
|
UI.stackMargin(ele, UI.Utils.options(ele.attr("data-uk-margin")));
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
init: function() {
|
||
|
|
|
||
|
|
var $this = this;
|
||
|
|
|
||
|
|
UI.$win.on('resize orientationchange', (function() {
|
||
|
|
|
||
|
|
var fn = function() {
|
||
|
|
$this.process();
|
||
|
|
};
|
||
|
|
|
||
|
|
UI.$(function() {
|
||
|
|
fn();
|
||
|
|
UI.$win.on("load", fn);
|
||
|
|
});
|
||
|
|
|
||
|
|
return UI.Utils.debounce(fn, 20);
|
||
|
|
})());
|
||
|
|
|
||
|
|
UI.$html.on("changed.uk.dom", function(e) {
|
||
|
|
$this.process();
|
||
|
|
});
|
||
|
|
|
||
|
|
this.on("display.uk.check", function(e) {
|
||
|
|
if (this.element.is(":visible")) this.process();
|
||
|
|
}.bind(this));
|
||
|
|
|
||
|
|
stacks.push(this);
|
||
|
|
},
|
||
|
|
|
||
|
|
process: function() {
|
||
|
|
|
||
|
|
var $this = this, columns = this.element.children();
|
||
|
|
|
||
|
|
UI.Utils.stackMargin(columns, this.options);
|
||
|
|
|
||
|
|
if (!this.options.rowfirst) {
|
||
|
|
return this;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Mark first column elements
|
||
|
|
var pos_cache = columns.removeClass(this.options.rowfirst).filter(':visible').first().position();
|
||
|
|
|
||
|
|
if (pos_cache) {
|
||
|
|
columns.each(function() {
|
||
|
|
UI.$(this)[UI.$(this).position().left == pos_cache.left ? 'addClass':'removeClass']($this.options.rowfirst);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
return this;
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
// responsive element e.g. iframes
|
||
|
|
|
||
|
|
(function(){
|
||
|
|
|
||
|
|
var elements = [], check = function(ele) {
|
||
|
|
|
||
|
|
if (!ele.is(':visible')) return;
|
||
|
|
|
||
|
|
var width = ele.parent().width(),
|
||
|
|
iwidth = ele.data('width'),
|
||
|
|
ratio = (width / iwidth),
|
||
|
|
height = Math.floor(ratio * ele.data('height'));
|
||
|
|
|
||
|
|
ele.css({'height': (width < iwidth) ? height : ele.data('height')});
|
||
|
|
};
|
||
|
|
|
||
|
|
UI.component('responsiveElement', {
|
||
|
|
|
||
|
|
defaults: {},
|
||
|
|
|
||
|
|
boot: function() {
|
||
|
|
|
||
|
|
// init code
|
||
|
|
UI.ready(function(context) {
|
||
|
|
|
||
|
|
UI.$("iframe.uk-responsive-width, [data-uk-responsive]", context).each(function() {
|
||
|
|
|
||
|
|
var ele = UI.$(this), obj;
|
||
|
|
|
||
|
|
if (!ele.data("responsiveElement")) {
|
||
|
|
obj = UI.responsiveElement(ele, {});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
init: function() {
|
||
|
|
|
||
|
|
var ele = this.element;
|
||
|
|
|
||
|
|
if (ele.attr('width') && ele.attr('height')) {
|
||
|
|
|
||
|
|
ele.data({
|
||
|
|
|
||
|
|
'width' : ele.attr('width'),
|
||
|
|
'height': ele.attr('height')
|
||
|
|
|
||
|
|
}).on('display.uk.check', function(){
|
||
|
|
check(ele);
|
||
|
|
});
|
||
|
|
|
||
|
|
check(ele);
|
||
|
|
|
||
|
|
elements.push(ele);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
UI.$win.on('resize load', UI.Utils.debounce(function(){
|
||
|
|
|
||
|
|
elements.forEach(function(ele){
|
||
|
|
check(ele);
|
||
|
|
});
|
||
|
|
|
||
|
|
}, 15));
|
||
|
|
|
||
|
|
})();
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// helper
|
||
|
|
|
||
|
|
UI.Utils.stackMargin = function(elements, options) {
|
||
|
|
|
||
|
|
options = UI.$.extend({
|
||
|
|
'cls': 'uk-margin-small-top'
|
||
|
|
}, options);
|
||
|
|
|
||
|
|
options.cls = options.cls;
|
||
|
|
|
||
|
|
elements = UI.$(elements).removeClass(options.cls);
|
||
|
|
|
||
|
|
var skip = false,
|
||
|
|
firstvisible = elements.filter(":visible:first"),
|
||
|
|
offset = firstvisible.length ? (firstvisible.position().top + firstvisible.outerHeight()) - 1 : false; // (-1): weird firefox bug when parent container is display:flex
|
||
|
|
|
||
|
|
if (offset === false || elements.length == 1) return;
|
||
|
|
|
||
|
|
elements.each(function() {
|
||
|
|
|
||
|
|
var column = UI.$(this);
|
||
|
|
|
||
|
|
if (column.is(":visible")) {
|
||
|
|
|
||
|
|
if (skip) {
|
||
|
|
column.addClass(options.cls);
|
||
|
|
} else {
|
||
|
|
|
||
|
|
if (column.position().top >= offset) {
|
||
|
|
skip = column.addClass(options.cls);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
UI.Utils.matchHeights = function(elements, options) {
|
||
|
|
|
||
|
|
elements = UI.$(elements).css('min-height', '');
|
||
|
|
options = UI.$.extend({ row : true }, options);
|
||
|
|
|
||
|
|
var matchHeights = function(group){
|
||
|
|
|
||
|
|
if (group.length < 2) return;
|
||
|
|
|
||
|
|
var max = 0;
|
||
|
|
|
||
|
|
group.each(function() {
|
||
|
|
max = Math.max(max, UI.$(this).outerHeight());
|
||
|
|
}).each(function() {
|
||
|
|
|
||
|
|
var element = UI.$(this),
|
||
|
|
height = max - (element.css('box-sizing') == 'border-box' ? 0 : (element.outerHeight() - element.height()));
|
||
|
|
|
||
|
|
element.css('min-height', height + 'px');
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
if (options.row) {
|
||
|
|
|
||
|
|
elements.first().width(); // force redraw
|
||
|
|
|
||
|
|
setTimeout(function(){
|
||
|
|
|
||
|
|
var lastoffset = false, group = [];
|
||
|
|
|
||
|
|
elements.each(function() {
|
||
|
|
|
||
|
|
var ele = UI.$(this), offset = ele.offset().top;
|
||
|
|
|
||
|
|
if (offset != lastoffset && group.length) {
|
||
|
|
|
||
|
|
matchHeights(UI.$(group));
|
||
|
|
group = [];
|
||
|
|
offset = ele.offset().top;
|
||
|
|
}
|
||
|
|
|
||
|
|
group.push(ele);
|
||
|
|
lastoffset = offset;
|
||
|
|
});
|
||
|
|
|
||
|
|
if (group.length) {
|
||
|
|
matchHeights(UI.$(group));
|
||
|
|
}
|
||
|
|
|
||
|
|
}, 0);
|
||
|
|
|
||
|
|
} else {
|
||
|
|
matchHeights(elements);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
(function(cacheSvgs){
|
||
|
|
|
||
|
|
UI.Utils.inlineSvg = function(selector, root) {
|
||
|
|
|
||
|
|
var images = UI.$(selector || 'img[src$=".svg"]', root || document).each(function(){
|
||
|
|
|
||
|
|
var img = UI.$(this),
|
||
|
|
src = img.attr('src');
|
||
|
|
|
||
|
|
if (!cacheSvgs[src]) {
|
||
|
|
|
||
|
|
var d = UI.$.Deferred();
|
||
|
|
|
||
|
|
UI.$.get(src, {nc: Math.random()}, function(data){
|
||
|
|
d.resolve(UI.$(data).find('svg'));
|
||
|
|
});
|
||
|
|
|
||
|
|
cacheSvgs[src] = d.promise();
|
||
|
|
}
|
||
|
|
|
||
|
|
cacheSvgs[src].then(function(svg) {
|
||
|
|
|
||
|
|
var $svg = UI.$(svg).clone();
|
||
|
|
|
||
|
|
if (img.attr('id')) $svg.attr('id', img.attr('id'));
|
||
|
|
if (img.attr('class')) $svg.attr('class', img.attr('class'));
|
||
|
|
if (img.attr('style')) $svg.attr('style', img.attr('style'));
|
||
|
|
|
||
|
|
if (img.attr('width')) {
|
||
|
|
$svg.attr('width', img.attr('width'));
|
||
|
|
if (!img.attr('height')) $svg.removeAttr('height');
|
||
|
|
}
|
||
|
|
|
||
|
|
if (img.attr('height')){
|
||
|
|
$svg.attr('height', img.attr('height'));
|
||
|
|
if (!img.attr('width')) $svg.removeAttr('width');
|
||
|
|
}
|
||
|
|
|
||
|
|
img.replaceWith($svg);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
// init code
|
||
|
|
UI.ready(function(context) {
|
||
|
|
UI.Utils.inlineSvg('[data-uk-svg]', context);
|
||
|
|
});
|
||
|
|
|
||
|
|
})({});
|
||
|
|
|
||
|
|
})(UIkit);
|