vendor/assets/javascripts/packery.pkgd.js in packery-rails-1.3.2 vs vendor/assets/javascripts/packery.pkgd.js in packery-rails-1.4.1

- old
+ new

@@ -1,15 +1,13 @@ /*! - * Packery PACKAGED v1.3.2 + * Packery PACKAGED v1.4.1 * bin-packing layout library - * http://packery.metafizzy.co * - * Commercial use requires one-time purchase of a commercial license - * http://packery.metafizzy.co/license.html + * Licensed GPLv3 for open source use + * or Flickity Commercial License for commercial use * - * Non-commercial use is licensed under the GPL v3 License - * + * http://packery.metafizzy.co * Copyright 2015 Metafizzy */ /** * Bridget makes jQuery widgets @@ -626,91 +624,10 @@ } })( window ); /*! - * docReady v1.0.4 - * Cross browser DOMContentLoaded event emitter - * MIT license - */ - -/*jshint browser: true, strict: true, undef: true, unused: true*/ -/*global define: false, require: false, module: false */ - -( function( window ) { - - - -var document = window.document; -// collection of functions to be triggered on ready -var queue = []; - -function docReady( fn ) { - // throw out non-functions - if ( typeof fn !== 'function' ) { - return; - } - - if ( docReady.isReady ) { - // ready now, hit it - fn(); - } else { - // queue function when ready - queue.push( fn ); - } -} - -docReady.isReady = false; - -// triggered on various doc ready events -function onReady( event ) { - // bail if already triggered or IE8 document is not ready just yet - var isIE8NotReady = event.type === 'readystatechange' && document.readyState !== 'complete'; - if ( docReady.isReady || isIE8NotReady ) { - return; - } - - trigger(); -} - -function trigger() { - docReady.isReady = true; - // process queue - for ( var i=0, len = queue.length; i < len; i++ ) { - var fn = queue[i]; - fn(); - } -} - -function defineDocReady( eventie ) { - // trigger ready if page is ready - if ( document.readyState === 'complete' ) { - trigger(); - } else { - // listen for events - eventie.bind( document, 'DOMContentLoaded', onReady ); - eventie.bind( document, 'readystatechange', onReady ); - eventie.bind( window, 'load', onReady ); - } - - return docReady; -} - -// transport -if ( typeof define === 'function' && define.amd ) { - // AMD - define( 'doc-ready/doc-ready',[ 'eventie/eventie' ], defineDocReady ); -} else if ( typeof exports === 'object' ) { - module.exports = defineDocReady( require('eventie') ); -} else { - // browser global - window.docReady = defineDocReady( window.eventie ); -} - -})( window ); - -/*! * EventEmitter v4.2.11 - git.io/ee * Unlicense - http://unlicense.org/ * Oliver Caldwell - http://oli.me.uk/ * @preserve */ @@ -1179,12 +1096,93 @@ else { exports.EventEmitter = EventEmitter; } }.call(this)); +/*! + * docReady v1.0.4 + * Cross browser DOMContentLoaded event emitter + * MIT license + */ + +/*jshint browser: true, strict: true, undef: true, unused: true*/ +/*global define: false, require: false, module: false */ + +( function( window ) { + + + +var document = window.document; +// collection of functions to be triggered on ready +var queue = []; + +function docReady( fn ) { + // throw out non-functions + if ( typeof fn !== 'function' ) { + return; + } + + if ( docReady.isReady ) { + // ready now, hit it + fn(); + } else { + // queue function when ready + queue.push( fn ); + } +} + +docReady.isReady = false; + +// triggered on various doc ready events +function onReady( event ) { + // bail if already triggered or IE8 document is not ready just yet + var isIE8NotReady = event.type === 'readystatechange' && document.readyState !== 'complete'; + if ( docReady.isReady || isIE8NotReady ) { + return; + } + + trigger(); +} + +function trigger() { + docReady.isReady = true; + // process queue + for ( var i=0, len = queue.length; i < len; i++ ) { + var fn = queue[i]; + fn(); + } +} + +function defineDocReady( eventie ) { + // trigger ready if page is ready + if ( document.readyState === 'complete' ) { + trigger(); + } else { + // listen for events + eventie.bind( document, 'DOMContentLoaded', onReady ); + eventie.bind( document, 'readystatechange', onReady ); + eventie.bind( window, 'load', onReady ); + } + + return docReady; +} + +// transport +if ( typeof define === 'function' && define.amd ) { + // AMD + define( 'doc-ready/doc-ready',[ 'eventie/eventie' ], defineDocReady ); +} else if ( typeof exports === 'object' ) { + module.exports = defineDocReady( require('eventie') ); +} else { + // browser global + window.docReady = defineDocReady( window.eventie ); +} + +})( window ); + /** - * matchesSelector v1.0.2 + * matchesSelector v1.0.3 * matchesSelector( element, '.selector' ) * MIT license */ /*jshint browser: true, strict: true, undef: true, unused: true */ @@ -1193,10 +1191,14 @@ ( function( ElemProto ) { var matchesMethod = ( function() { + // check for the standard method name first + if ( ElemProto.matches ) { + return 'matches'; + } // check un-prefixed if ( ElemProto.matchesSelector ) { return 'matchesSelector'; } // check vendor prefixes @@ -1284,56 +1286,343 @@ } })( Element.prototype ); /** + * Fizzy UI utils v1.0.1 + * MIT license + */ + +/*jshint browser: true, undef: true, unused: true, strict: true */ + +( function( window, factory ) { + /*global define: false, module: false, require: false */ + + // universal module definition + + if ( typeof define == 'function' && define.amd ) { + // AMD + define( 'fizzy-ui-utils/utils',[ + 'doc-ready/doc-ready', + 'matches-selector/matches-selector' + ], function( docReady, matchesSelector ) { + return factory( window, docReady, matchesSelector ); + }); + } else if ( typeof exports == 'object' ) { + // CommonJS + module.exports = factory( + window, + require('doc-ready'), + require('desandro-matches-selector') + ); + } else { + // browser global + window.fizzyUIUtils = factory( + window, + window.docReady, + window.matchesSelector + ); + } + +}( window, function factory( window, docReady, matchesSelector ) { + + + +var utils = {}; + +// ----- extend ----- // + +// extends objects +utils.extend = function( a, b ) { + for ( var prop in b ) { + a[ prop ] = b[ prop ]; + } + return a; +}; + +// ----- modulo ----- // + +utils.modulo = function( num, div ) { + return ( ( num % div ) + div ) % div; +}; + +// ----- isArray ----- // + +var objToString = Object.prototype.toString; +utils.isArray = function( obj ) { + return objToString.call( obj ) == '[object Array]'; +}; + +// ----- makeArray ----- // + +// turn element or nodeList into an array +utils.makeArray = function( obj ) { + var ary = []; + if ( utils.isArray( obj ) ) { + // use object if already an array + ary = obj; + } else if ( obj && typeof obj.length == 'number' ) { + // convert nodeList to array + for ( var i=0, len = obj.length; i < len; i++ ) { + ary.push( obj[i] ); + } + } else { + // array of single index + ary.push( obj ); + } + return ary; +}; + +// ----- indexOf ----- // + +// index of helper cause IE8 +utils.indexOf = Array.prototype.indexOf ? function( ary, obj ) { + return ary.indexOf( obj ); + } : function( ary, obj ) { + for ( var i=0, len = ary.length; i < len; i++ ) { + if ( ary[i] === obj ) { + return i; + } + } + return -1; + }; + +// ----- removeFrom ----- // + +utils.removeFrom = function( ary, obj ) { + var index = utils.indexOf( ary, obj ); + if ( index != -1 ) { + ary.splice( index, 1 ); + } +}; + +// ----- isElement ----- // + +// http://stackoverflow.com/a/384380/182183 +utils.isElement = ( typeof HTMLElement == 'function' || typeof HTMLElement == 'object' ) ? + function isElementDOM2( obj ) { + return obj instanceof HTMLElement; + } : + function isElementQuirky( obj ) { + return obj && typeof obj == 'object' && + obj.nodeType == 1 && typeof obj.nodeName == 'string'; + }; + +// ----- setText ----- // + +utils.setText = ( function() { + var setTextProperty; + function setText( elem, text ) { + // only check setTextProperty once + setTextProperty = setTextProperty || ( document.documentElement.textContent !== undefined ? 'textContent' : 'innerText' ); + elem[ setTextProperty ] = text; + } + return setText; +})(); + +// ----- getParent ----- // + +utils.getParent = function( elem, selector ) { + while ( elem != document.body ) { + elem = elem.parentNode; + if ( matchesSelector( elem, selector ) ) { + return elem; + } + } +}; + +// ----- getQueryElement ----- // + +// use element as selector string +utils.getQueryElement = function( elem ) { + if ( typeof elem == 'string' ) { + return document.querySelector( elem ); + } + return elem; +}; + +// ----- handleEvent ----- // + +// enable .ontype to trigger from .addEventListener( elem, 'type' ) +utils.handleEvent = function( event ) { + var method = 'on' + event.type; + if ( this[ method ] ) { + this[ method ]( event ); + } +}; + +// ----- filterFindElements ----- // + +utils.filterFindElements = function( elems, selector ) { + // make array of elems + elems = utils.makeArray( elems ); + var ffElems = []; + + for ( var i=0, len = elems.length; i < len; i++ ) { + var elem = elems[i]; + // check that elem is an actual element + if ( !utils.isElement( elem ) ) { + continue; + } + // filter & find items if we have a selector + if ( selector ) { + // filter siblings + if ( matchesSelector( elem, selector ) ) { + ffElems.push( elem ); + } + // find children + var childElems = elem.querySelectorAll( selector ); + // concat childElems to filterFound array + for ( var j=0, jLen = childElems.length; j < jLen; j++ ) { + ffElems.push( childElems[j] ); + } + } else { + ffElems.push( elem ); + } + } + + return ffElems; +}; + +// ----- debounceMethod ----- // + +utils.debounceMethod = function( _class, methodName, threshold ) { + // original method + var method = _class.prototype[ methodName ]; + var timeoutName = methodName + 'Timeout'; + + _class.prototype[ methodName ] = function() { + var timeout = this[ timeoutName ]; + if ( timeout ) { + clearTimeout( timeout ); + } + var args = arguments; + + var _this = this; + this[ timeoutName ] = setTimeout( function() { + method.apply( _this, args ); + delete _this[ timeoutName ]; + }, threshold || 100 ); + }; +}; + +// ----- htmlInit ----- // + +// http://jamesroberts.name/blog/2010/02/22/string-functions-for-javascript-trim-to-camel-case-to-dashed-and-to-underscore/ +utils.toDashed = function( str ) { + return str.replace( /(.)([A-Z])/g, function( match, $1, $2 ) { + return $1 + '-' + $2; + }).toLowerCase(); +}; + +var console = window.console; +/** + * allow user to initialize classes via .js-namespace class + * htmlInit( Widget, 'widgetName' ) + * options are parsed from data-namespace-option attribute + */ +utils.htmlInit = function( WidgetClass, namespace ) { + docReady( function() { + var dashedNamespace = utils.toDashed( namespace ); + var elems = document.querySelectorAll( '.js-' + dashedNamespace ); + var dataAttr = 'data-' + dashedNamespace + '-options'; + + for ( var i=0, len = elems.length; i < len; i++ ) { + var elem = elems[i]; + var attr = elem.getAttribute( dataAttr ); + var options; + try { + options = attr && JSON.parse( attr ); + } catch ( error ) { + // log error, do not initialize + if ( console ) { + console.error( 'Error parsing ' + dataAttr + ' on ' + + elem.nodeName.toLowerCase() + ( elem.id ? '#' + elem.id : '' ) + ': ' + + error ); + } + continue; + } + // initialize + var instance = new WidgetClass( elem, options ); + // make available via $().data('layoutname') + var jQuery = window.jQuery; + if ( jQuery ) { + jQuery.data( elem, namespace, instance ); + } + } + }); +}; + +// ----- ----- // + +return utils; + +})); + +/** * Outlayer Item */ -( function( window ) { +( function( window, factory ) { + // universal module definition + if ( typeof define === 'function' && define.amd ) { + // AMD + define( 'outlayer/item',[ + 'eventEmitter/EventEmitter', + 'get-size/get-size', + 'get-style-property/get-style-property', + 'fizzy-ui-utils/utils' + ], + function( EventEmitter, getSize, getStyleProperty, utils ) { + return factory( window, EventEmitter, getSize, getStyleProperty, utils ); + } + ); + } else if (typeof exports === 'object') { + // CommonJS + module.exports = factory( + window, + require('wolfy87-eventemitter'), + require('get-size'), + require('desandro-get-style-property'), + require('fizzy-ui-utils') + ); + } else { + // browser global + window.Outlayer = {}; + window.Outlayer.Item = factory( + window, + window.EventEmitter, + window.getSize, + window.getStyleProperty, + window.fizzyUIUtils + ); + } +}( window, function factory( window, EventEmitter, getSize, getStyleProperty, utils ) { -// ----- get style ----- // +// ----- helpers ----- // + var getComputedStyle = window.getComputedStyle; var getStyle = getComputedStyle ? function( elem ) { return getComputedStyle( elem, null ); } : function( elem ) { return elem.currentStyle; }; -// extend objects -function extend( a, b ) { - for ( var prop in b ) { - a[ prop ] = b[ prop ]; - } - return a; -} - function isEmptyObj( obj ) { for ( var prop in obj ) { return false; } prop = null; return true; } -// http://jamesroberts.name/blog/2010/02/22/string-functions-for-javascript-trim-to-camel-case-to-dashed-and-to-underscore/ -function toDash( str ) { - return str.replace( /([A-Z])/g, function( $1 ){ - return '-' + $1.toLowerCase(); - }); -} - -// -------------------------- Outlayer definition -------------------------- // - -function outlayerItemDefinition( EventEmitter, getSize, getStyleProperty ) { - // -------------------------- CSS3 support -------------------------- // var transitionProperty = getStyleProperty('transition'); var transformProperty = getStyleProperty('transform'); var supportsCSS3 = transitionProperty && transformProperty; @@ -1384,11 +1673,11 @@ this._create(); } // inherit EventEmitter -extend( Item.prototype, EventEmitter.prototype ); +utils.extend( Item.prototype, EventEmitter.prototype ); Item.prototype._create = function() { // transition objects this._transn = { ingProperties: {}, @@ -1452,27 +1741,36 @@ Item.prototype.layoutPosition = function() { var layoutSize = this.layout.size; var layoutOptions = this.layout.options; var style = {}; - if ( layoutOptions.isOriginLeft ) { - style.left = ( this.position.x + layoutSize.paddingLeft ) + 'px'; - // reset other property - style.right = ''; - } else { - style.right = ( this.position.x + layoutSize.paddingRight ) + 'px'; - style.left = ''; - } + // x + var xPadding = layoutOptions.isOriginLeft ? 'paddingLeft' : 'paddingRight'; + var xProperty = layoutOptions.isOriginLeft ? 'left' : 'right'; + var xResetProperty = layoutOptions.isOriginLeft ? 'right' : 'left'; - if ( layoutOptions.isOriginTop ) { - style.top = ( this.position.y + layoutSize.paddingTop ) + 'px'; - style.bottom = ''; - } else { - style.bottom = ( this.position.y + layoutSize.paddingBottom ) + 'px'; - style.top = ''; - } + var x = this.position.x + layoutSize[ xPadding ]; + // set in percentage + x = layoutOptions.percentPosition && !layoutOptions.isHorizontal ? + ( ( x / layoutSize.width ) * 100 ) + '%' : x + 'px'; + style[ xProperty ] = x; + // reset other property + style[ xResetProperty ] = ''; + // y + var yPadding = layoutOptions.isOriginTop ? 'paddingTop' : 'paddingBottom'; + var yProperty = layoutOptions.isOriginTop ? 'top' : 'bottom'; + var yResetProperty = layoutOptions.isOriginTop ? 'bottom' : 'top'; + + var y = this.position.y + layoutSize[ yPadding ]; + // set in percentage + y = layoutOptions.percentPosition && layoutOptions.isHorizontal ? + ( ( y / layoutSize.height ) * 100 ) + '%' : y + 'px'; + style[ yProperty ] = y; + // reset other property + style[ yResetProperty ] = ''; + this.css( style ); this.emitEvent( 'layout', [ this ] ); }; @@ -1600,11 +1898,11 @@ this.isTransitioning = true; }; -var itemTransitionProperties = transformProperty && ( toDash( transformProperty ) + +var itemTransitionProperties = transformProperty && ( utils.toDashed( transformProperty ) + ',opacity' ); Item.prototype.enableTransition = function(/* style */) { // only enable if not already transitioning // bug in IE10 were re-setting transition style will prevent @@ -1713,10 +2011,12 @@ // ----- show/hide/remove ----- // // remove element from DOM Item.prototype.removeElem = function() { this.element.parentNode.removeChild( this.element ); + // remove display: none + this.css({ display: '' }); this.emitEvent( 'remove', [ this ] ); }; Item.prototype.remove = function() { // just remove element if no transition support or no transition @@ -1725,54 +2025,90 @@ return; } // start transition var _this = this; - this.on( 'transitionEnd', function() { + this.once( 'transitionEnd', function() { _this.removeElem(); - return true; // bind once }); this.hide(); }; Item.prototype.reveal = function() { delete this.isHidden; // remove display: none this.css({ display: '' }); var options = this.layout.options; + + var onTransitionEnd = {}; + var transitionEndProperty = this.getHideRevealTransitionEndProperty('visibleStyle'); + onTransitionEnd[ transitionEndProperty ] = this.onRevealTransitionEnd; + this.transition({ from: options.hiddenStyle, to: options.visibleStyle, - isCleaning: true + isCleaning: true, + onTransitionEnd: onTransitionEnd }); }; +Item.prototype.onRevealTransitionEnd = function() { + // check if still visible + // during transition, item may have been hidden + if ( !this.isHidden ) { + this.emitEvent('reveal'); + } +}; + +/** + * get style property use for hide/reveal transition end + * @param {String} styleProperty - hiddenStyle/visibleStyle + * @returns {String} + */ +Item.prototype.getHideRevealTransitionEndProperty = function( styleProperty ) { + var optionStyle = this.layout.options[ styleProperty ]; + // use opacity + if ( optionStyle.opacity ) { + return 'opacity'; + } + // get first property + for ( var prop in optionStyle ) { + return prop; + } +}; + Item.prototype.hide = function() { // set flag this.isHidden = true; // remove display: none this.css({ display: '' }); var options = this.layout.options; + + var onTransitionEnd = {}; + var transitionEndProperty = this.getHideRevealTransitionEndProperty('hiddenStyle'); + onTransitionEnd[ transitionEndProperty ] = this.onHideTransitionEnd; + this.transition({ from: options.visibleStyle, to: options.hiddenStyle, // keep hidden stuff hidden isCleaning: true, - onTransitionEnd: { - opacity: function() { - // check if still hidden - // during transition, item may have been un-hidden - if ( this.isHidden ) { - this.css({ display: 'none' }); - } - } - } + onTransitionEnd: onTransitionEnd }); }; +Item.prototype.onHideTransitionEnd = function() { + // check if still hidden + // during transition, item may have been un-hidden + if ( this.isHidden ) { + this.css({ display: 'none' }); + this.emitEvent('hide'); + } +}; + Item.prototype.destroy = function() { this.css({ position: '', left: '', right: '', @@ -1783,131 +2119,66 @@ }); }; return Item; -} +})); -// -------------------------- transport -------------------------- // - -if ( typeof define === 'function' && define.amd ) { - // AMD - define( 'outlayer/item',[ - 'eventEmitter/EventEmitter', - 'get-size/get-size', - 'get-style-property/get-style-property' - ], - outlayerItemDefinition ); -} else if (typeof exports === 'object') { - // CommonJS - module.exports = outlayerItemDefinition( - require('wolfy87-eventemitter'), - require('get-size'), - require('desandro-get-style-property') - ); -} else { - // browser global - window.Outlayer = {}; - window.Outlayer.Item = outlayerItemDefinition( - window.EventEmitter, - window.getSize, - window.getStyleProperty - ); -} - -})( window ); - /*! - * Outlayer v1.3.0 + * Outlayer v1.4.0 * the brains and guts of a layout library * MIT license */ -( function( window ) { +( function( window, factory ) { + // universal module definition + if ( typeof define == 'function' && define.amd ) { + // AMD + define( 'outlayer/outlayer',[ + 'eventie/eventie', + 'eventEmitter/EventEmitter', + 'get-size/get-size', + 'fizzy-ui-utils/utils', + './item' + ], + function( eventie, EventEmitter, getSize, utils, Item ) { + return factory( window, eventie, EventEmitter, getSize, utils, Item); + } + ); + } else if ( typeof exports == 'object' ) { + // CommonJS + module.exports = factory( + window, + require('eventie'), + require('wolfy87-eventemitter'), + require('get-size'), + require('fizzy-ui-utils'), + require('./item') + ); + } else { + // browser global + window.Outlayer = factory( + window, + window.eventie, + window.EventEmitter, + window.getSize, + window.fizzyUIUtils, + window.Outlayer.Item + ); + } +}( window, function factory( window, eventie, EventEmitter, getSize, utils, Item ) { + + // ----- vars ----- // -var document = window.document; var console = window.console; var jQuery = window.jQuery; var noop = function() {}; -// -------------------------- helpers -------------------------- // - -// extend objects -function extend( a, b ) { - for ( var prop in b ) { - a[ prop ] = b[ prop ]; - } - return a; -} - - -var objToString = Object.prototype.toString; -function isArray( obj ) { - return objToString.call( obj ) === '[object Array]'; -} - -// turn element or nodeList into an array -function makeArray( obj ) { - var ary = []; - if ( isArray( obj ) ) { - // use object if already an array - ary = obj; - } else if ( obj && typeof obj.length === 'number' ) { - // convert nodeList to array - for ( var i=0, len = obj.length; i < len; i++ ) { - ary.push( obj[i] ); - } - } else { - // array of single index - ary.push( obj ); - } - return ary; -} - -// http://stackoverflow.com/a/384380/182183 -var isElement = ( typeof HTMLElement === 'function' || typeof HTMLElement === 'object' ) ? - function isElementDOM2( obj ) { - return obj instanceof HTMLElement; - } : - function isElementQuirky( obj ) { - return obj && typeof obj === 'object' && - obj.nodeType === 1 && typeof obj.nodeName === 'string'; - }; - -// index of helper cause IE8 -var indexOf = Array.prototype.indexOf ? function( ary, obj ) { - return ary.indexOf( obj ); - } : function( ary, obj ) { - for ( var i=0, len = ary.length; i < len; i++ ) { - if ( ary[i] === obj ) { - return i; - } - } - return -1; - }; - -function removeFrom( obj, ary ) { - var index = indexOf( ary, obj ); - if ( index !== -1 ) { - ary.splice( index, 1 ); - } -} - -// http://jamesroberts.name/blog/2010/02/22/string-functions-for-javascript-trim-to-camel-case-to-dashed-and-to-underscore/ -function toDashed( str ) { - return str.replace( /(.)([A-Z])/g, function( match, $1, $2 ) { - return $1 + '-' + $2; - }).toLowerCase(); -} - - -function outlayerDefinition( eventie, docReady, EventEmitter, getSize, matchesSelector, Item ) { - // -------------------------- Outlayer -------------------------- // // globally unique identifiers var GUID = 0; // internal store of all Outlayer intances @@ -1918,27 +2189,26 @@ * @param {Element, String} element * @param {Object} options * @constructor */ function Outlayer( element, options ) { - // use element as selector string - if ( typeof element === 'string' ) { - element = document.querySelector( element ); - } - - // bail out if not proper element - if ( !element || !isElement( element ) ) { + var queryElement = utils.getQueryElement( element ); + if ( !queryElement ) { if ( console ) { - console.error( 'Bad ' + this.constructor.namespace + ' element: ' + element ); + console.error( 'Bad element for ' + this.constructor.namespace + + ': ' + ( queryElement || element ) ); } return; } + this.element = queryElement; + // add jQuery + if ( jQuery ) { + this.$element = jQuery( this.element ); + } - this.element = element; - // options - this.options = extend( {}, this.constructor.defaults ); + this.options = utils.extend( {}, this.constructor.defaults ); this.option( options ); // add id for Outlayer.getFromElement var id = ++GUID; this.element.outlayerGUID = id; // expando @@ -1977,28 +2247,28 @@ transform: 'scale(1)' } }; // inherit EventEmitter -extend( Outlayer.prototype, EventEmitter.prototype ); +utils.extend( Outlayer.prototype, EventEmitter.prototype ); /** * set options * @param {Object} opts */ Outlayer.prototype.option = function( opts ) { - extend( this.options, opts ); + utils.extend( this.options, opts ); }; Outlayer.prototype._create = function() { // get items from children this.reloadItems(); // elements that affect layout, but are not laid out this.stamps = []; this.stamp( this.options.stamp ); // set container style - extend( this.element.style, this.options.containerStyle ); + utils.extend( this.element.style, this.options.containerStyle ); // bind resize method if ( this.options.isResizeBound ) { this.bindResize(); } @@ -2036,39 +2306,11 @@ * get item elements to be used in layout * @param {Array or NodeList or HTMLElement} elems * @returns {Array} items - item elements */ Outlayer.prototype._filterFindItemElements = function( elems ) { - // make array of elems - elems = makeArray( elems ); - var itemSelector = this.options.itemSelector; - var itemElems = []; - - for ( var i=0, len = elems.length; i < len; i++ ) { - var elem = elems[i]; - // check that elem is an actual element - if ( !isElement( elem ) ) { - continue; - } - // filter & find items if we have an item selector - if ( itemSelector ) { - // filter siblings - if ( matchesSelector( elem, itemSelector ) ) { - itemElems.push( elem ); - } - // find children - var childElems = elem.querySelectorAll( itemSelector ); - // concat childElems to filterFound array - for ( var j=0, jLen = childElems.length; j < jLen; j++ ) { - itemElems.push( childElems[j] ); - } - } else { - itemElems.push( elem ); - } - } - - return itemElems; + return utils.filterFindElements( elems, this.options.itemSelector ); }; /** * getter method for getting item elements * @returns {Array} elems - collection of item elements @@ -2132,11 +2374,11 @@ this[ measurement ] = 0; } else { // use option as an element if ( typeof option === 'string' ) { elem = this.element.querySelector( option ); - } else if ( isElement( option ) ) { + } else if ( utils.isElement( option ) ) { elem = option; } // use size of element, if element this[ measurement ] = elem ? getSize( elem )[ size ] : option; } @@ -2175,24 +2417,17 @@ * layout items * @param {Array} items * @param {Boolean} isInstant */ Outlayer.prototype._layoutItems = function( items, isInstant ) { - var _this = this; - function onItemsLayout() { - _this.emitEvent( 'layoutComplete', [ _this, items ] ); - } + this._emitCompleteOnItems( 'layout', items ); if ( !items || !items.length ) { // no items, emit event with empty array - onItemsLayout(); return; } - // emit layoutComplete when done - this._itemsOn( items, 'layout', onItemsLayout ); - var queue = []; for ( var i=0, len = items.length; i < len; i++ ) { var item = items[i]; // get x/y object from method @@ -2295,31 +2530,38 @@ measure = Math.max( measure, 0 ); this.element.style[ isWidth ? 'width' : 'height' ] = measure + 'px'; }; /** - * trigger a callback for a collection of items events - * @param {Array} items - Outlayer.Items + * emit eventComplete on a collection of items events * @param {String} eventName - * @param {Function} callback + * @param {Array} items - Outlayer.Items */ -Outlayer.prototype._itemsOn = function( items, eventName, callback ) { - var doneCount = 0; - var count = items.length; - // event callback +Outlayer.prototype._emitCompleteOnItems = function( eventName, items ) { var _this = this; + function onComplete() { + _this.emitEvent( eventName + 'Complete', [ items ] ); + } + + var count = items.length; + if ( !items || !count ) { + onComplete(); + return; + } + + var doneCount = 0; function tick() { doneCount++; if ( doneCount === count ) { - callback.call( _this ); + onComplete(); } - return true; // bind once } + // bind callback for ( var i=0, len = items.length; i < len; i++ ) { var item = items[i]; - item.on( eventName, tick ); + item.once( eventName, tick ); } }; // -------------------------- ignore & stamps -------------------------- // @@ -2376,11 +2618,11 @@ } for ( var i=0, len = elems.length; i < len; i++ ) { var elem = elems[i]; // filter out removed stamp elements - removeFrom( elem, this.stamps ); + utils.removeFrom( this.stamps, elem ); this.unignore( elem ); } }; @@ -2395,11 +2637,11 @@ } // if string, use argument as selector string if ( typeof elems === 'string' ) { elems = this.element.querySelectorAll( elems ); } - elems = makeArray( elems ); + elems = utils.makeArray( elems ); return elems; }; Outlayer.prototype._manageStamps = function() { if ( !this.stamps || !this.stamps.length ) { @@ -2579,36 +2821,52 @@ /** * reveal a collection of items * @param {Array of Outlayer.Items} items */ Outlayer.prototype.reveal = function( items ) { + this._emitCompleteOnItems( 'reveal', items ); + var len = items && items.length; - if ( !len ) { - return; - } - for ( var i=0; i < len; i++ ) { + for ( var i=0; len && i < len; i++ ) { var item = items[i]; item.reveal(); } }; /** * hide a collection of items * @param {Array of Outlayer.Items} items */ Outlayer.prototype.hide = function( items ) { + this._emitCompleteOnItems( 'hide', items ); + var len = items && items.length; - if ( !len ) { - return; - } - for ( var i=0; i < len; i++ ) { + for ( var i=0; len && i < len; i++ ) { var item = items[i]; item.hide(); } }; /** + * reveal item elements + * @param {Array}, {Element}, {NodeList} items + */ +Outlayer.prototype.revealItemElements = function( elems ) { + var items = this.getItems( elems ); + this.reveal( items ); +}; + +/** + * hide item elements + * @param {Array}, {Element}, {NodeList} items + */ +Outlayer.prototype.hideItemElements = function( elems ) { + var items = this.getItems( elems ); + this.hide( items ); +}; + +/** * get Outlayer.Item, given an Element * @param {Element} elem * @param {Function} callback * @returns {Outlayer.Item} item */ @@ -2627,13 +2885,11 @@ * get collection of Outlayer.Items, given Elements * @param {Array} elems * @returns {Array} items - Outlayer.Items */ Outlayer.prototype.getItems = function( elems ) { - if ( !elems || !elems.length ) { - return; - } + elems = utils.makeArray( elems ); var items = []; for ( var i=0, len = elems.length; i < len; i++ ) { var elem = elems[i]; var item = this.getItem( elem ); if ( item ) { @@ -2647,27 +2903,24 @@ /** * remove element(s) from instance and DOM * @param {Array or NodeList or Element} elems */ Outlayer.prototype.remove = function( elems ) { - elems = makeArray( elems ); - var removeItems = this.getItems( elems ); + + this._emitCompleteOnItems( 'remove', removeItems ); + // bail if no items to remove if ( !removeItems || !removeItems.length ) { return; } - this._itemsOn( removeItems, 'remove', function() { - this.emitEvent( 'removeComplete', [ this, removeItems ] ); - }); - for ( var i=0, len = removeItems.length; i < len; i++ ) { var item = removeItems[i]; item.remove(); // remove item from collection - removeFrom( item, this.items ); + utils.removeFrom( this.items, item ); } }; // ----- destroy ----- // @@ -2702,10 +2955,11 @@ * get Outlayer instance from element * @param {Element} elem * @returns {Outlayer} */ Outlayer.data = function( elem ) { + elem = utils.getQueryElement( elem ); var id = elem && elem.outlayerGUID; return id && instances[ id ]; }; @@ -2722,18 +2976,18 @@ } // inherit Outlayer prototype, use Object.create if there if ( Object.create ) { Layout.prototype = Object.create( Outlayer.prototype ); } else { - extend( Layout.prototype, Outlayer.prototype ); + utils.extend( Layout.prototype, Outlayer.prototype ); } // set contructor, used for namespace and Item Layout.prototype.constructor = Layout; - Layout.defaults = extend( {}, Outlayer.defaults ); + Layout.defaults = utils.extend( {}, Outlayer.defaults ); // apply new options - extend( Layout.defaults, options ); + utils.extend( Layout.defaults, options ); // keep prototype.settings for backwards compatibility (Packery v1.2.0) Layout.prototype.settings = {}; Layout.namespace = namespace; @@ -2746,43 +3000,12 @@ Layout.Item.prototype = new Item(); // -------------------------- declarative -------------------------- // - /** - * allow user to initialize Outlayer via .js-namespace class - * options are parsed from data-namespace-option attribute - */ - docReady( function() { - var dashedNamespace = toDashed( namespace ); - var elems = document.querySelectorAll( '.js-' + dashedNamespace ); - var dataAttr = 'data-' + dashedNamespace + '-options'; + utils.htmlInit( Layout, namespace ); - for ( var i=0, len = elems.length; i < len; i++ ) { - var elem = elems[i]; - var attr = elem.getAttribute( dataAttr ); - var options; - try { - options = attr && JSON.parse( attr ); - } catch ( error ) { - // log error, do not initialize - if ( console ) { - console.error( 'Error parsing ' + dataAttr + ' on ' + - elem.nodeName.toLowerCase() + ( elem.id ? '#' + elem.id : '' ) + ': ' + - error ); - } - continue; - } - // initialize - var instance = new Layout( elem, options ); - // make available via $().data('layoutname') - if ( jQuery ) { - jQuery.data( elem, namespace, instance ); - } - } - }); - // -------------------------- jQuery bridge -------------------------- // // make into jQuery plugin if ( jQuery && jQuery.bridget ) { jQuery.bridget( namespace, Layout ); @@ -2796,65 +3019,41 @@ // back in global Outlayer.Item = Item; return Outlayer; -} +})); -// -------------------------- transport -------------------------- // -if ( typeof define === 'function' && define.amd ) { - // AMD - define( 'outlayer/outlayer',[ - 'eventie/eventie', - 'doc-ready/doc-ready', - 'eventEmitter/EventEmitter', - 'get-size/get-size', - 'matches-selector/matches-selector', - './item' - ], - outlayerDefinition ); -} else if ( typeof exports === 'object' ) { - // CommonJS - module.exports = outlayerDefinition( - require('eventie'), - require('doc-ready'), - require('wolfy87-eventemitter'), - require('get-size'), - require('desandro-matches-selector'), - require('./item') - ); -} else { - // browser global - window.Outlayer = outlayerDefinition( - window.eventie, - window.docReady, - window.EventEmitter, - window.getSize, - window.matchesSelector, - window.Outlayer.Item - ); -} - -})( window ); - /** * Rect * low-level utility class for basic geometry */ -( function( window ) { +( function( window, factory ) { + // universal module definition + if ( typeof define == 'function' && define.amd ) { + // AMD + define( 'packery/js/rect',factory ); + } else if ( typeof exports == 'object' ) { + // CommonJS + module.exports = factory(); + } else { + // browser global + window.Packery = window.Packery || {}; + window.Packery.Rect = factory(); + } +}( window, function factory() { + // -------------------------- Packery -------------------------- // // global namespace var Packery = window.Packery = function() {}; -function rectDefinition() { - // -------------------------- Rect -------------------------- // function Rect( props ) { // extend properties from defaults for ( var prop in Rect.defaults ) { @@ -2980,41 +3179,39 @@ return this.width >= rect.width && this.height >= rect.height; }; return Rect; -} +})); -// -------------------------- transport -------------------------- // - -if ( typeof define === 'function' && define.amd ) { - // AMD - define( 'packery/js/rect',rectDefinition ); -} else if ( typeof exports === 'object' ) { - // CommonJS - module.exports = rectDefinition(); -} else { - // browser global - window.Packery = window.Packery || {}; - window.Packery.Rect = rectDefinition(); -} - -})( window ); - /** * Packer * bin-packing algorithm */ -( function( window ) { +( function( window, factory ) { + // universal module definition + if ( typeof define == 'function' && define.amd ) { + // AMD + define( 'packery/js/packer',[ './rect' ], factory ); + } else if ( typeof exports == 'object' ) { + // CommonJS + module.exports = factory( + require('./rect') + ); + } else { + // browser global + var Packery = window.Packery = window.Packery || {}; + Packery.Packer = factory( Packery.Rect ); + } +}( window, function factory( Rect ) { + // -------------------------- Packer -------------------------- // -function packerDefinition( Rect ) { - /** * @param {Number} width * @param {Number} height * @param {String} sortDirection * topLeft for vertical, leftTop for horizontal @@ -3149,42 +3346,48 @@ // -------------------------- -------------------------- // return Packer; -} - -// -------------------------- transport -------------------------- // - -if ( typeof define === 'function' && define.amd ) { - // AMD - define( 'packery/js/packer',[ './rect' ], packerDefinition ); -} else if ( typeof exports === 'object' ) { - // CommonJS - module.exports = packerDefinition( - require('./rect') - ); -} else { - // browser global - var Packery = window.Packery = window.Packery || {}; - Packery.Packer = packerDefinition( Packery.Rect ); -} - -})( window ); - +})); /** * Packery Item Element **/ -( function( window ) { +( function( window, factory ) { + // universal module definition + if ( typeof define == 'function' && define.amd ) { + // AMD + define( 'packery/js/item',[ + 'get-style-property/get-style-property', + 'outlayer/outlayer', + './rect' + ], + factory ); + } else if ( typeof exports == 'object' ) { + // CommonJS + module.exports = factory( + require('desandro-get-style-property'), + require('outlayer'), + require('./rect') + ); + } else { + // browser global + window.Packery.Item = factory( + window.getStyleProperty, + window.Outlayer, + window.Packery.Rect + ); + } -// -------------------------- Item -------------------------- // +}( window, function factory( getStyleProperty, Outlayer, Rect ) { -function itemDefinition( getStyleProperty, Outlayer, Rect ) { +// -------------------------- Item -------------------------- // + var transformProperty = getStyleProperty('transform'); // sub-class Item var Item = function PackeryItem() { Outlayer.Item.apply( this, arguments ); @@ -3233,12 +3436,12 @@ this.positionPlaceRect( x, y ); }; Item.prototype.dragStop = function() { this.getPosition(); - var isDiffX = this.position.x !== this.placeRect.x; - var isDiffY = this.position.y !== this.placeRect.y; + var isDiffX = this.position.x != this.placeRect.x; + var isDiffY = this.position.y != this.placeRect.y; // set post-drag positioning flag this.needsPositioning = isDiffX || isDiffY; // reset flag this.didDrag = false; }; @@ -3324,59 +3527,61 @@ // ----- ----- // return Item; -} +})); -// -------------------------- transport -------------------------- // - -if ( typeof define === 'function' && define.amd ) { - // AMD - define( 'packery/js/item',[ - 'get-style-property/get-style-property', - 'outlayer/outlayer', - './rect' - ], - itemDefinition ); -} else if ( typeof exports === 'object' ) { - // CommonJS - module.exports = itemDefinition( - require('desandro-get-style-property'), - require('outlayer'), - require('./rect') - ); -} else { - // browser global - window.Packery.Item = itemDefinition( - window.getStyleProperty, - window.Outlayer, - window.Packery.Rect - ); -} - -})( window ); - /*! - * Packery v1.3.2 + * Packery v1.4.1 * bin-packing layout library - * http://packery.metafizzy.co * - * Commercial use requires one-time purchase of a commercial license - * http://packery.metafizzy.co/license.html + * Licensed GPLv3 for open source use + * or Flickity Commercial License for commercial use * - * Non-commercial use is licensed under the GPL v3 License - * + * http://packery.metafizzy.co * Copyright 2015 Metafizzy */ -( function( window ) { +( function( window, factory ) { + // universal module definition + if ( typeof define == 'function' && define.amd ) { + // AMD + define( [ + 'classie/classie', + 'get-size/get-size', + 'outlayer/outlayer', + 'packery/js/rect', + 'packery/js/packer', + 'packery/js/item' + ], + factory ); + } else if ( typeof exports == 'object' ) { + // CommonJS + module.exports = factory( + require('desandro-classie'), + require('get-size'), + require('outlayer'), + require('./rect'), + require('./packer'), + require('./item') + ); + } else { + // browser global + window.Packery = factory( + window.classie, + window.getSize, + window.Outlayer, + window.Packery.Rect, + window.Packery.Packer, + window.Packery.Item + ); + } +}( window, function factory( classie, getSize, Outlayer, Rect, Packer, Item ) { -// used for AMD definition and requires -function packeryDefinition( classie, getSize, Outlayer, Rect, Packer, Item ) { // ----- Rect ----- // // allow for pixel rounding errors IE8-IE11 & Firefox; #227 Rect.prototype.canFit = function( rect ) { @@ -3400,18 +3605,18 @@ this.stamp( this.options.stamped ); // create drag handlers var _this = this; this.handleDraggabilly = { - dragStart: function( draggie ) { - _this.itemDragStart( draggie.element ); + dragStart: function() { + _this.itemDragStart( this.element ); }, - dragMove: function( draggie ) { - _this.itemDragMove( draggie.element, draggie.position.x, draggie.position.y ); + dragMove: function() { + _this.itemDragMove( this.element, this.position.x, this.position.y ); }, - dragEnd: function( draggie ) { - _this.itemDragEnd( draggie.element ); + dragEnd: function() { + _this.itemDragEnd( this.element ); } }; this.handleUIDraggable = { start: function handleUIDraggableStart( event ) { @@ -3641,14 +3846,14 @@ Packery.prototype._bindFitEvents = function( item ) { var _this = this; var ticks = 0; function tick() { ticks++; - if ( ticks !== 2 ) { + if ( ticks != 2 ) { return; } - _this.emitEvent( 'fitComplete', [ _this, item ] ); + _this.emitEvent( 'fitComplete', [ item ] ); } // when item is laid out item.on( 'layout', function() { tick(); return true; @@ -3668,11 +3873,11 @@ var size = getSize( this.element ); // check that this.size and size are there // IE8 triggers resize on body size change, so they might not be var hasSizes = this.size && size; var innerSize = this.options.isHorizontal ? 'innerHeight' : 'innerWidth'; - if ( hasSizes && size[ innerSize ] === this.size[ innerSize ] ) { + if ( hasSizes && size[ innerSize ] == this.size[ innerSize ] ) { return; } this.layout(); }; @@ -3773,11 +3978,11 @@ var _this = this; return function onLayoutComplete() { completeCount++; // don't proceed if not complete - if ( completeCount !== asyncCount ) { + if ( completeCount != asyncCount ) { return true; } // reset item if ( item ) { classie.remove( item.element, 'is-positioning-post-drag' ); @@ -3789,11 +3994,11 @@ // only sort when item moved _this.sortItemsByPosition(); // emit item drag event now that everything is done if ( itemNeedsPositioning ) { - _this.emitEvent( 'dragItemPositioned', [ _this, item ] ); + _this.emitEvent( 'dragItemPositioned', [ item ] ); } // listen once return true; }; }; @@ -3822,43 +4027,6 @@ Packery.Rect = Rect; Packery.Packer = Packer; return Packery; -} - -// -------------------------- transport -------------------------- // - -if ( typeof define === 'function' && define.amd ) { - // AMD - define( [ - 'classie/classie', - 'get-size/get-size', - 'outlayer/outlayer', - 'packery/js/rect', - 'packery/js/packer', - 'packery/js/item' - ], - packeryDefinition ); -} else if ( typeof exports === 'object' ) { - // CommonJS - module.exports = packeryDefinition( - require('desandro-classie'), - require('get-size'), - require('outlayer'), - require('./rect'), - require('./packer'), - require('./item') - ); -} else { - // browser global - window.Packery = packeryDefinition( - window.classie, - window.getSize, - window.Outlayer, - window.Packery.Rect, - window.Packery.Packer, - window.Packery.Item - ); -} - -})( window ); +}));