summaryrefslogtreecommitdiff
path: root/js/components/grid.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/components/grid.js')
-rwxr-xr-xjs/components/grid.js527
1 files changed, 0 insertions, 527 deletions
diff --git a/js/components/grid.js b/js/components/grid.js
deleted file mode 100755
index 87d4919..0000000
--- a/js/components/grid.js
+++ /dev/null
@@ -1,527 +0,0 @@
1/*! UIkit 2.26.4 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
2(function(addon) {
3
4 var component;
5
6 if (window.UIkit) {
7 component = addon(UIkit);
8 }
9
10 if (typeof define == "function" && define.amd) {
11 define("uikit-grid", ["uikit"], function(){
12 return component || addon(UIkit);
13 });
14 }
15
16})(function(UI){
17
18 "use strict";
19
20 UI.component('grid', {
21
22 defaults: {
23 colwidth : 'auto',
24 animation : true,
25 duration : 300,
26 gutter : 0,
27 controls : false,
28 filter : false
29 },
30
31 boot: function() {
32
33 // init code
34 UI.ready(function(context) {
35
36 UI.$('[data-uk-grid]', context).each(function(){
37
38 var ele = UI.$(this);
39
40 if(!ele.data("grid")) {
41 UI.grid(ele, UI.Utils.options(ele.attr('data-uk-grid')));
42 }
43 });
44 });
45 },
46
47 init: function() {
48
49 var $this = this, gutter = String(this.options.gutter).trim().split(' ');
50
51 this.gutterv = parseInt(gutter[0], 10);
52 this.gutterh = parseInt((gutter[1] || gutter[0]), 10);
53
54 // make sure parent element has the right position property
55 this.element.css({'position': 'relative'});
56
57 this.controls = null;
58
59 if (this.options.controls) {
60
61 this.controls = UI.$(this.options.controls);
62
63 // filter
64 this.controls.on('click', '[data-uk-filter]', function(e){
65 e.preventDefault();
66 $this.filter(UI.$(this).attr('data-uk-filter'));
67 });
68
69 // sort
70 this.controls.on('click', '[data-uk-sort]', function(e){
71 e.preventDefault();
72 var cmd = UI.$(this).attr('data-uk-sort').split(':');
73 $this.sort(cmd[0], cmd[1]);
74 });
75 }
76
77 UI.$win.on('load resize orientationchange', UI.Utils.debounce(function(){
78
79 if ($this.currentfilter) {
80 $this.filter($this.currentfilter);
81 } else {
82 this.updateLayout();
83 }
84
85 }.bind(this), 100));
86
87 this.on('display.uk.check', function(){
88 if ($this.element.is(":visible")) $this.updateLayout();
89 });
90
91 UI.domObserve(this.element, function(e) {
92 $this.updateLayout();
93 });
94
95 if (this.options.filter !== false) {
96 this.filter(this.options.filter);
97 } else {
98 this.updateLayout();
99 }
100 },
101
102 _prepareElements: function() {
103
104 var children = this.element.children(':not([data-grid-prepared])'), css;
105
106 // exit if no already prepared elements found
107 if (!children.length) {
108 return;
109 }
110
111 css = {
112 'position' : 'absolute',
113 'box-sizing' : 'border-box',
114 'width' : this.options.colwidth == 'auto' ? '' : this.options.colwidth
115 };
116
117 if (this.options.gutter) {
118
119 css['padding-left'] = this.gutterh;
120 css['padding-bottom'] = this.gutterv;
121
122 this.element.css('margin-left', this.gutterh * -1);
123 }
124
125 children.attr('data-grid-prepared', 'true').css(css);
126 },
127
128 updateLayout: function(elements) {
129
130 this._prepareElements();
131
132 elements = elements || this.element.children(':visible');
133
134 var children = elements,
135 maxwidth = this.element.width() + (2*this.gutterh) + 2,
136 left = 0,
137 top = 0,
138 positions = [],
139
140 item, width, height, pos, i, z, max, size;
141
142 this.trigger('beforeupdate.uk.grid', [children]);
143
144 children.each(function(index){
145
146 size = getElementSize(this);
147
148 item = UI.$(this);
149 width = size.outerWidth;
150 height = size.outerHeight;
151 left = 0;
152 top = 0;
153
154 for (i=0,max=positions.length;i<max;i++) {
155
156 pos = positions[i];
157
158 if (left <= pos.aX) { left = pos.aX; }
159 if (maxwidth < (left + width)) { left = 0; }
160 if (top <= pos.aY) { top = pos.aY; }
161 }
162
163 positions.push({
164 "ele" : item,
165 "top" : top,
166 "left" : left,
167 "width" : width,
168 "height" : height,
169 "aY" : (top + height),
170 "aX" : (left + width)
171 });
172 });
173
174 var posPrev, maxHeight = 0;
175
176 // fix top
177 for (i=0,max=positions.length;i<max;i++) {
178
179 pos = positions[i];
180 top = 0;
181
182 for (z=0;z<i;z++) {
183
184 posPrev = positions[z];
185
186 // (posPrev.left + 1) fixex 1px bug when using % based widths
187 if (pos.left < posPrev.aX && (posPrev.left +1) < pos.aX) {
188 top = posPrev.aY;
189 }
190 }
191
192 pos.top = top;
193 pos.aY = top + pos.height;
194
195 maxHeight = Math.max(maxHeight, pos.aY);
196 }
197
198 maxHeight = maxHeight - this.gutterv;
199
200 if (this.options.animation) {
201
202 this.element.stop().animate({'height': maxHeight}, 100);
203
204 positions.forEach(function(pos){
205 pos.ele.stop().animate({"top": pos.top, "left": pos.left, opacity: 1}, this.options.duration);
206 }.bind(this));
207
208 } else {
209
210 this.element.css('height', maxHeight);
211
212 positions.forEach(function(pos){
213 pos.ele.css({"top": pos.top, "left": pos.left, opacity: 1});
214 }.bind(this));
215 }
216
217 // make sure to trigger possible scrollpies etc.
218 setTimeout(function() {
219 UI.$doc.trigger('scrolling.uk.document');
220 }, 2 * this.options.duration * (this.options.animation ? 1:0));
221
222 this.trigger('afterupdate.uk.grid', [children]);
223 },
224
225 filter: function(filter) {
226
227 this.currentfilter = filter;
228
229 filter = filter || [];
230
231 if (typeof(filter) === 'number') {
232 filter = filter.toString();
233 }
234
235 if (typeof(filter) === 'string') {
236 filter = filter.split(/,/).map(function(item){ return item.trim(); });
237 }
238
239 var $this = this, children = this.element.children(), elements = {"visible": [], "hidden": []}, visible, hidden;
240
241 children.each(function(index){
242
243 var ele = UI.$(this), f = ele.attr('data-uk-filter'), infilter = filter.length ? false : true;
244
245 if (f) {
246
247 f = f.split(/,/).map(function(item){ return item.trim(); });
248
249 filter.forEach(function(item){
250 if (f.indexOf(item) > -1) infilter = true;
251 });
252 }
253
254 elements[infilter ? "visible":"hidden"].push(ele);
255 });
256
257 // convert to jQuery collections
258 elements.hidden = UI.$(elements.hidden).map(function () {return this[0];});
259 elements.visible = UI.$(elements.visible).map(function () {return this[0];});
260
261 elements.hidden.attr('aria-hidden', 'true').filter(':visible').fadeOut(this.options.duration);
262 elements.visible.attr('aria-hidden', 'false').filter(':hidden').css('opacity', 0).show();
263
264 $this.updateLayout(elements.visible);
265
266 if (this.controls && this.controls.length) {
267 this.controls.find('[data-uk-filter]').removeClass('uk-active').filter('[data-uk-filter="'+filter+'"]').addClass('uk-active');
268 }
269 },
270
271 sort: function(by, order){
272
273 order = order || 1;
274
275 // covert from string (asc|desc) to number
276 if (typeof(order) === 'string') {
277 order = order.toLowerCase() == 'desc' ? -1 : 1;
278 }
279
280 var elements = this.element.children();
281
282 elements.sort(function(a, b){
283
284 a = UI.$(a);
285 b = UI.$(b);
286
287 return (b.data(by) || '') < (a.data(by) || '') ? order : (order*-1);
288
289 }).appendTo(this.element);
290
291 this.updateLayout(elements.filter(':visible'));
292
293 if (this.controls && this.controls.length) {
294 this.controls.find('[data-uk-sort]').removeClass('uk-active').filter('[data-uk-sort="'+by+':'+(order == -1 ? 'desc':'asc')+'"]').addClass('uk-active');
295 }
296 }
297 });
298
299
300 /*!
301 * getSize v1.2.2
302 * measure size of elements
303 * MIT license
304 * https://github.com/desandro/get-size
305 */
306 function _getSize() {
307
308 var prefixes = 'Webkit Moz ms Ms O'.split(' ');
309 var docElemStyle = document.documentElement.style;
310
311 function getStyleProperty( propName ) {
312 if ( !propName ) {
313 return;
314 }
315
316 // test standard property first
317 if ( typeof docElemStyle[ propName ] === 'string' ) {
318 return propName;
319 }
320
321 // capitalize
322 propName = propName.charAt(0).toUpperCase() + propName.slice(1);
323
324 // test vendor specific properties
325 var prefixed;
326 for ( var i=0, len = prefixes.length; i < len; i++ ) {
327 prefixed = prefixes[i] + propName;
328 if ( typeof docElemStyle[ prefixed ] === 'string' ) {
329 return prefixed;
330 }
331 }
332 }
333
334 // -------------------------- helpers -------------------------- //
335
336 // get a number from a string, not a percentage
337 function getStyleSize( value ) {
338 var num = parseFloat( value );
339 // not a percent like '100%', and a number
340 var isValid = value.indexOf('%') === -1 && !isNaN( num );
341 return isValid && num;
342 }
343
344 function noop() {}
345
346 var logError = typeof console === 'undefined' ? noop : function( message ) {
347 console.error( message );
348 };
349
350 // -------------------------- measurements -------------------------- //
351
352 var measurements = [
353 'paddingLeft',
354 'paddingRight',
355 'paddingTop',
356 'paddingBottom',
357 'marginLeft',
358 'marginRight',
359 'marginTop',
360 'marginBottom',
361 'borderLeftWidth',
362 'borderRightWidth',
363 'borderTopWidth',
364 'borderBottomWidth'
365 ];
366
367 function getZeroSize() {
368 var size = {
369 width: 0,
370 height: 0,
371 innerWidth: 0,
372 innerHeight: 0,
373 outerWidth: 0,
374 outerHeight: 0
375 };
376 for ( var i=0, len = measurements.length; i < len; i++ ) {
377 var measurement = measurements[i];
378 size[ measurement ] = 0;
379 }
380 return size;
381 }
382
383
384 // -------------------------- setup -------------------------- //
385
386 var isSetup = false;
387 var getStyle, boxSizingProp, isBoxSizeOuter;
388
389 /**
390 * setup vars and functions
391 * do it on initial getSize(), rather than on script load
392 * For Firefox bug https://bugzilla.mozilla.org/show_bug.cgi?id=548397
393 */
394 function setup() {
395 // setup once
396 if ( isSetup ) {
397 return;
398 }
399 isSetup = true;
400
401 var getComputedStyle = window.getComputedStyle;
402 getStyle = ( function() {
403 var getStyleFn = getComputedStyle ?
404 function( elem ) {
405 return getComputedStyle( elem, null );
406 } :
407 function( elem ) {
408 return elem.currentStyle;
409 };
410
411 return function getStyle( elem ) {
412 var style = getStyleFn( elem );
413 if ( !style ) {
414 logError( 'Style returned ' + style +
415 '. Are you running this code in a hidden iframe on Firefox? ' +
416 'See http://bit.ly/getsizebug1' );
417 }
418 return style;
419 };
420 })();
421
422 // -------------------------- box sizing -------------------------- //
423
424 boxSizingProp = getStyleProperty('boxSizing');
425
426 /**
427 * WebKit measures the outer-width on style.width on border-box elems
428 * IE & Firefox measures the inner-width
429 */
430 if ( boxSizingProp ) {
431 var div = document.createElement('div');
432 div.style.width = '200px';
433 div.style.padding = '1px 2px 3px 4px';
434 div.style.borderStyle = 'solid';
435 div.style.borderWidth = '1px 2px 3px 4px';
436 div.style[ boxSizingProp ] = 'border-box';
437
438 var body = document.body || document.documentElement;
439 body.appendChild( div );
440 var style = getStyle( div );
441
442 isBoxSizeOuter = getStyleSize( style.width ) === 200;
443 body.removeChild( div );
444 }
445
446 }
447
448 // -------------------------- getSize -------------------------- //
449
450 function getSize( elem ) {
451 setup();
452
453 // use querySeletor if elem is string
454 if ( typeof elem === 'string' ) {
455 elem = document.querySelector( elem );
456 }
457
458 // do not proceed on non-objects
459 if ( !elem || typeof elem !== 'object' || !elem.nodeType ) {
460 return;
461 }
462
463 var style = getStyle( elem );
464
465 // if hidden, everything is 0
466 if ( style.display === 'none' ) {
467 return getZeroSize();
468 }
469
470 var size = {};
471 size.width = elem.offsetWidth;
472 size.height = elem.offsetHeight;
473
474 var isBorderBox = size.isBorderBox = !!( boxSizingProp &&
475 style[ boxSizingProp ] && style[ boxSizingProp ] === 'border-box' );
476
477 // get all measurements
478 for ( var i=0, len = measurements.length; i < len; i++ ) {
479 var measurement = measurements[i];
480 var value = style[ measurement ];
481
482 var num = parseFloat( value );
483 // any 'auto', 'medium' value will be 0
484 size[ measurement ] = !isNaN( num ) ? num : 0;
485 }
486
487 var paddingWidth = size.paddingLeft + size.paddingRight;
488 var paddingHeight = size.paddingTop + size.paddingBottom;
489 var marginWidth = size.marginLeft + size.marginRight;
490 var marginHeight = size.marginTop + size.marginBottom;
491 var borderWidth = size.borderLeftWidth + size.borderRightWidth;
492 var borderHeight = size.borderTopWidth + size.borderBottomWidth;
493
494 var isBorderBoxSizeOuter = isBorderBox && isBoxSizeOuter;
495
496 // overwrite width and height if we can get it from style
497 var styleWidth = getStyleSize( style.width );
498 if ( styleWidth !== false ) {
499 size.width = styleWidth +
500 // add padding and border unless it's already including it
501 ( isBorderBoxSizeOuter ? 0 : paddingWidth + borderWidth );
502 }
503
504 var styleHeight = getStyleSize( style.height );
505 if ( styleHeight !== false ) {
506 size.height = styleHeight +
507 // add padding and border unless it's already including it
508 ( isBorderBoxSizeOuter ? 0 : paddingHeight + borderHeight );
509 }
510
511 size.innerWidth = size.width - ( paddingWidth + borderWidth );
512 size.innerHeight = size.height - ( paddingHeight + borderHeight );
513
514 size.outerWidth = size.width + marginWidth;
515 size.outerHeight = size.height + marginHeight;
516
517 return size;
518 }
519
520 return getSize;
521
522 }
523
524 function getElementSize(ele) {
525 return _getSize()(ele);
526 }
527});
generated by cgit v1.2.3 (git 2.25.1) at 2024-05-17 09:25:16 +0000