From c94fb32c7a3c28b18a27460aa2447eeec1fac1de Mon Sep 17 00:00:00 2001 From: Pascal Szewczyk Date: Mon, 18 Jul 2016 23:23:54 +0200 Subject: uikit added --- js/components/grid.js | 527 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 527 insertions(+) create mode 100755 js/components/grid.js (limited to 'js/components/grid.js') 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 @@ +/*! UIkit 2.26.4 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */ +(function(addon) { + + var component; + + if (window.UIkit) { + component = addon(UIkit); + } + + if (typeof define == "function" && define.amd) { + define("uikit-grid", ["uikit"], function(){ + return component || addon(UIkit); + }); + } + +})(function(UI){ + + "use strict"; + + UI.component('grid', { + + defaults: { + colwidth : 'auto', + animation : true, + duration : 300, + gutter : 0, + controls : false, + filter : false + }, + + 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; + + 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.updateLayout(); + } + + }.bind(this), 100)); + + this.on('display.uk.check', function(){ + if ($this.element.is(":visible")) $this.updateLayout(); + }); + + UI.domObserve(this.element, function(e) { + $this.updateLayout(); + }); + + if (this.options.filter !== false) { + this.filter(this.options.filter); + } else { + this.updateLayout(); + } + }, + + _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', + 'box-sizing' : 'border-box', + 'width' : this.options.colwidth == 'auto' ? '' : this.options.colwidth + }; + + if (this.options.gutter) { + + css['padding-left'] = this.gutterh; + css['padding-bottom'] = this.gutterv; + + this.element.css('margin-left', this.gutterh * -1); + } + + children.attr('data-grid-prepared', 'true').css(css); + }, + + updateLayout: function(elements) { + + 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, i, z, max, size; + + this.trigger('beforeupdate.uk.grid', [children]); + + children.each(function(index){ + + size = getElementSize(this); + + item = UI.$(this); + width = size.outerWidth; + height = size.outerHeight; + left = 0; + top = 0; + + for (i=0,max=positions.length;i -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.updateLayout(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.updateLayout(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'); + } + } + }); + + + /*! + * getSize v1.2.2 + * measure size of elements + * MIT license + * https://github.com/desandro/get-size + */ + function _getSize() { + + var prefixes = 'Webkit Moz ms Ms O'.split(' '); + var docElemStyle = document.documentElement.style; + + function getStyleProperty( propName ) { + if ( !propName ) { + return; + } + + // test standard property first + if ( typeof docElemStyle[ propName ] === 'string' ) { + return propName; + } + + // capitalize + propName = propName.charAt(0).toUpperCase() + propName.slice(1); + + // test vendor specific properties + var prefixed; + for ( var i=0, len = prefixes.length; i < len; i++ ) { + prefixed = prefixes[i] + propName; + if ( typeof docElemStyle[ prefixed ] === 'string' ) { + return prefixed; + } + } + } + + // -------------------------- helpers -------------------------- // + + // get a number from a string, not a percentage + function getStyleSize( value ) { + var num = parseFloat( value ); + // not a percent like '100%', and a number + var isValid = value.indexOf('%') === -1 && !isNaN( num ); + return isValid && num; + } + + function noop() {} + + var logError = typeof console === 'undefined' ? noop : function( message ) { + console.error( message ); + }; + + // -------------------------- measurements -------------------------- // + + var measurements = [ + 'paddingLeft', + 'paddingRight', + 'paddingTop', + 'paddingBottom', + 'marginLeft', + 'marginRight', + 'marginTop', + 'marginBottom', + 'borderLeftWidth', + 'borderRightWidth', + 'borderTopWidth', + 'borderBottomWidth' + ]; + + function getZeroSize() { + var size = { + width: 0, + height: 0, + innerWidth: 0, + innerHeight: 0, + outerWidth: 0, + outerHeight: 0 + }; + for ( var i=0, len = measurements.length; i < len; i++ ) { + var measurement = measurements[i]; + size[ measurement ] = 0; + } + return size; + } + + + // -------------------------- setup -------------------------- // + + var isSetup = false; + var getStyle, boxSizingProp, isBoxSizeOuter; + + /** + * setup vars and functions + * do it on initial getSize(), rather than on script load + * For Firefox bug https://bugzilla.mozilla.org/show_bug.cgi?id=548397 + */ + function setup() { + // setup once + if ( isSetup ) { + return; + } + isSetup = true; + + var getComputedStyle = window.getComputedStyle; + getStyle = ( function() { + var getStyleFn = getComputedStyle ? + function( elem ) { + return getComputedStyle( elem, null ); + } : + function( elem ) { + return elem.currentStyle; + }; + + return function getStyle( elem ) { + var style = getStyleFn( elem ); + if ( !style ) { + logError( 'Style returned ' + style + + '. Are you running this code in a hidden iframe on Firefox? ' + + 'See http://bit.ly/getsizebug1' ); + } + return style; + }; + })(); + + // -------------------------- box sizing -------------------------- // + + boxSizingProp = getStyleProperty('boxSizing'); + + /** + * WebKit measures the outer-width on style.width on border-box elems + * IE & Firefox measures the inner-width + */ + if ( boxSizingProp ) { + var div = document.createElement('div'); + div.style.width = '200px'; + div.style.padding = '1px 2px 3px 4px'; + div.style.borderStyle = 'solid'; + div.style.borderWidth = '1px 2px 3px 4px'; + div.style[ boxSizingProp ] = 'border-box'; + + var body = document.body || document.documentElement; + body.appendChild( div ); + var style = getStyle( div ); + + isBoxSizeOuter = getStyleSize( style.width ) === 200; + body.removeChild( div ); + } + + } + + // -------------------------- getSize -------------------------- // + + function getSize( elem ) { + setup(); + + // use querySeletor if elem is string + if ( typeof elem === 'string' ) { + elem = document.querySelector( elem ); + } + + // do not proceed on non-objects + if ( !elem || typeof elem !== 'object' || !elem.nodeType ) { + return; + } + + var style = getStyle( elem ); + + // if hidden, everything is 0 + if ( style.display === 'none' ) { + return getZeroSize(); + } + + var size = {}; + size.width = elem.offsetWidth; + size.height = elem.offsetHeight; + + var isBorderBox = size.isBorderBox = !!( boxSizingProp && + style[ boxSizingProp ] && style[ boxSizingProp ] === 'border-box' ); + + // get all measurements + for ( var i=0, len = measurements.length; i < len; i++ ) { + var measurement = measurements[i]; + var value = style[ measurement ]; + + var num = parseFloat( value ); + // any 'auto', 'medium' value will be 0 + size[ measurement ] = !isNaN( num ) ? num : 0; + } + + var paddingWidth = size.paddingLeft + size.paddingRight; + var paddingHeight = size.paddingTop + size.paddingBottom; + var marginWidth = size.marginLeft + size.marginRight; + var marginHeight = size.marginTop + size.marginBottom; + var borderWidth = size.borderLeftWidth + size.borderRightWidth; + var borderHeight = size.borderTopWidth + size.borderBottomWidth; + + var isBorderBoxSizeOuter = isBorderBox && isBoxSizeOuter; + + // overwrite width and height if we can get it from style + var styleWidth = getStyleSize( style.width ); + if ( styleWidth !== false ) { + size.width = styleWidth + + // add padding and border unless it's already including it + ( isBorderBoxSizeOuter ? 0 : paddingWidth + borderWidth ); + } + + var styleHeight = getStyleSize( style.height ); + if ( styleHeight !== false ) { + size.height = styleHeight + + // add padding and border unless it's already including it + ( isBorderBoxSizeOuter ? 0 : paddingHeight + borderHeight ); + } + + size.innerWidth = size.width - ( paddingWidth + borderWidth ); + size.innerHeight = size.height - ( paddingHeight + borderHeight ); + + size.outerWidth = size.width + marginWidth; + size.outerHeight = size.height + marginHeight; + + return size; + } + + return getSize; + + } + + function getElementSize(ele) { + return _getSize()(ele); + } +}); -- cgit v1.2.3