Component-Builder/admin/custom/uikit-v2/js/components/grid.js

312 lines
9.2 KiB
JavaScript

/*! UIkit 2.27.5 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
(function(addon) {
var component;
if (window.UIkit2) {
component = addon(UIkit2);
}
if (typeof define == 'function' && define.amd) {
define('uikit-grid', ['uikit'], function(){
return component || addon(UIkit2);
});
}
})(function(UI){
"use strict";
UI.component('grid', {
defaults: {
colwidth : 'auto',
animation : true,
duration : 300,
gutter : 0,
controls : false,
filter : false,
origin : UI.langdirection
},
boot: function() {
// init code
UI.ready(function(context) {
UI.$('[data-uk-grid]', context).each(function(){
var ele = UI.$(this);
if(!ele.data('grid')) {
UI.grid(ele, UI.Utils.options(ele.attr('data-uk-grid')));
}
});
});
},
init: function() {
var $this = this, gutter = String(this.options.gutter).trim().split(' ');
this.gutterv = parseInt(gutter[0], 10);
this.gutterh = parseInt((gutter[1] || gutter[0]), 10);
// make sure parent element has the right position property
this.element.css({'position': 'relative'});
this.controls = null;
this.origin = this.options.origin;
if (this.options.controls) {
this.controls = UI.$(this.options.controls);
// filter
this.controls.on('click', '[data-uk-filter]', function(e){
e.preventDefault();
$this.filter(UI.$(this).attr('data-uk-filter'));
});
// sort
this.controls.on('click', '[data-uk-sort]', function(e){
e.preventDefault();
var cmd = UI.$(this).attr('data-uk-sort').split(':');
$this.sort(cmd[0], cmd[1]);
});
}
UI.$win.on('load resize orientationchange', UI.Utils.debounce(function(){
if ($this.currentfilter) {
$this.filter($this.currentfilter);
} else {
this.update();
}
}.bind(this), 100));
this.on('display.uk.check', function(){
if ($this.element.is(':visible')) $this.update();
});
UI.domObserve(this.element, function(e) {
$this.update();
});
if (this.options.filter !== false) {
this.filter(this.options.filter);
} else {
this.update();
}
},
_prepareElements: function() {
var children = this.element.children().not('[data-grid-prepared]'), css;
// exit if no already prepared elements found
if (!children.length) {
return;
}
css = {
position : 'absolute',
boxSizing : 'border-box',
width : this.options.colwidth == 'auto' ? '' : this.options.colwidth
};
if (this.options.gutter) {
css['padding-'+this.origin] = this.gutterh;
css['padding-bottom'] = this.gutterv;
this.element.css('margin-'+this.origin, this.gutterh * -1);
}
children.attr('data-grid-prepared', 'true').css(css);
},
update: function(elements) {
var $this = this;
this._prepareElements();
elements = elements || this.element.children(':visible');
var children = elements,
maxwidth = this.element.width() + (2*this.gutterh) + 2,
left = 0,
top = 0,
positions = [],
item, width, height, pos, posi, i, z, max, size;
this.trigger('beforeupdate.uk.grid', [children]);
children.each(function(index){
item = UI.$(this);
size = this.getBoundingClientRect();
width = size.width;
height = size.height;
left = 0;
top = 0;
for (i=0,max=positions.length;i<max;i++) {
pos = positions[i];
if (left <= pos.aX) { left = pos.aX; }
if (maxwidth < (left + width)) { left = 0; }
if (top <= pos.aY) { top = pos.aY; }
}
posi = {
ele : item,
top : top,
width : width,
height : height,
aY : (top + height),
aX : (left + width)
};
posi[$this.origin] = left;
positions.push(posi);
});
var posPrev, maxHeight = 0, positionto;
// fix top
for (i=0,max=positions.length;i<max;i++) {
pos = positions[i];
top = 0;
for (z=0;z<i;z++) {
posPrev = positions[z];
// (posPrev.left + 1) fixex 1px bug when using % based widths
if (pos[this.origin] < posPrev.aX && (posPrev[this.origin] +1) < pos.aX) {
top = posPrev.aY;
}
}
pos.top = top;
pos.aY = top + pos.height;
maxHeight = Math.max(maxHeight, pos.aY);
}
maxHeight = maxHeight - this.gutterv;
if (this.options.animation) {
this.element.stop().animate({'height': maxHeight}, 100);
positions.forEach(function(pos){
positionto = {"top": pos.top, opacity: 1};
positionto[$this.origin] = pos[$this.origin];
pos.ele.stop().animate(positionto, this.options.duration);
}.bind(this));
} else {
this.element.css('height', maxHeight);
positions.forEach(function(pos){
positionto = {"top": pos.top, opacity: 1};
positionto[$this.origin] = pos[$this.origin];
pos.ele.css(positionto);
}.bind(this));
}
// make sure to trigger possible scrollpies etc.
setTimeout(function() {
UI.$doc.trigger('scrolling.uk.document');
}, 2 * this.options.duration * (this.options.animation ? 1:0));
this.trigger('afterupdate.uk.grid', [children]);
},
filter: function(filter) {
this.currentfilter = filter;
filter = filter || [];
if (typeof(filter) === 'number') {
filter = filter.toString();
}
if (typeof(filter) === 'string') {
filter = filter.split(/,/).map(function(item){ return item.trim(); });
}
var $this = this, children = this.element.children(), elements = {"visible": [], "hidden": []}, visible, hidden;
children.each(function(index){
var ele = UI.$(this), f = ele.attr('data-uk-filter'), infilter = filter.length ? false : true;
if (f) {
f = f.split(/,/).map(function(item){ return item.trim(); });
filter.forEach(function(item){
if (f.indexOf(item) > -1) infilter = true;
});
}
elements[infilter ? "visible":"hidden"].push(ele);
});
// convert to jQuery collections
elements.hidden = UI.$(elements.hidden).map(function () {return this[0];});
elements.visible = UI.$(elements.visible).map(function () {return this[0];});
elements.hidden.attr('aria-hidden', 'true').filter(':visible').fadeOut(this.options.duration);
elements.visible.attr('aria-hidden', 'false').filter(':hidden').css('opacity', 0).show();
$this.update(elements.visible);
if (this.controls && this.controls.length) {
this.controls.find('[data-uk-filter]').removeClass('uk-active').filter('[data-uk-filter="'+filter+'"]').addClass('uk-active');
}
},
sort: function(by, order){
order = order || 1;
// covert from string (asc|desc) to number
if (typeof(order) === 'string') {
order = order.toLowerCase() == 'desc' ? -1 : 1;
}
var elements = this.element.children();
elements.sort(function(a, b){
a = UI.$(a);
b = UI.$(b);
return (b.data(by) || '') < (a.data(by) || '') ? order : (order*-1);
}).appendTo(this.element);
this.update(elements.filter(':visible'));
if (this.controls && this.controls.length) {
this.controls.find('[data-uk-sort]').removeClass('uk-active').filter('[data-uk-sort="'+by+':'+(order == -1 ? 'desc':'asc')+'"]').addClass('uk-active');
}
}
});
});