diff options
Diffstat (limited to 'js/components/grid.js')
-rwxr-xr-x | js/components/grid.js | 527 |
1 files changed, 527 insertions, 0 deletions
diff --git a/js/components/grid.js b/js/components/grid.js new file mode 100755 index 0000000..87d4919 --- /dev/null +++ b/js/components/grid.js | |||
@@ -0,0 +1,527 @@ | |||
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 | }); | ||