🛠 add stagger option; 👷 build v4.1.0

+ ⬆️ Outlayer v2.1.0 for stagger option
+ 📦 ^ dependencies
+ 📝 README.mdown -> .md
+ 🛠 Fix vendor CSS properties. Fixes #834
+ 🍹 Fix gulp version task

README.mdown → README.md

@@ -18,9 +18,9 @@ See [masonry.desandro.com](http://masonry.desandro.com) for complete docs and de
 Link directly to Masonry files on [npmcdn](https://npmcdn.com/).
 
 ``` html
-<script src="https://npmcdn.com/masonry-layout@4.0/dist/masonry.pkgd.js"></script>
+<script src="https://npmcdn.com/masonry-layout@4.1/dist/masonry.pkgd.js"></script>
 <!-- or -->
-<script src="https://npmcdn.com/masonry-layout@4.0/dist/masonry.pkgd.min.js"></script>
+<script src="https://npmcdn.com/masonry-layout@4.1/dist/masonry.pkgd.min.js"></script>
 ```
 
 ### Package managers

bower.json

@@ -3,8 +3,8 @@
   "description": "Cascading grid layout library",
   "main": "masonry.js",
   "dependencies": {
-    "get-size": "~2.0.2",
-    "outlayer": "~2.0.0"
+    "get-size": "^2.0.2",
+    "outlayer": "^2.1.0"
   },
   "devDependencies": {
     "jquery-bridget": "~2.0.0",

dist/masonry.pkgd.js

@@ -1,5 +1,5 @@
 /*!
- * Masonry PACKAGED v4.0.0
+ * Masonry PACKAGED v4.1.0
  * Cascading grid layout library
  * http://masonry.desandro.com
  * MIT License
@@ -152,7 +152,7 @@ return jQueryBridget;
 }));
 
 /**
- * EvEmitter v1.0.1
+ * EvEmitter v1.0.2
  * Lil' event emitter
  * MIT License
  */
@@ -206,8 +206,8 @@ proto.once = function( eventName, listener ) {
   // set once flag
   // set onceEvents hash
   var onceEvents = this._onceEvents = this._onceEvents || {};
-  // set onceListeners array
-  var onceListeners = onceEvents[ eventName ] = onceEvents[ eventName ] || [];
+  // set onceListeners object
+  var onceListeners = onceEvents[ eventName ] = onceEvents[ eventName ] || {};
   // set flag
   onceListeners[ listener ] = true;
 
@@ -485,7 +485,7 @@ return getSize;
   // universal module definition
   if ( typeof define == 'function' && define.amd ) {
     // AMD
-    define( 'matches-selector/matches-selector',factory );
+    define( 'desandro-matches-selector/matches-selector',factory );
   } else if ( typeof module == 'object' && module.exports ) {
     // CommonJS
     module.exports = factory();
@@ -526,21 +526,20 @@ return getSize;
 }));
 
 /**
- * Fizzy UI utils v2.0.0
+ * Fizzy UI utils v2.0.1
  * MIT license
  */
 
 /*jshint browser: true, undef: true, unused: true, strict: true */
 
 ( function( window, factory ) {
-  /*global define: false, module: false, require: false */
-  'use strict';
   // universal module definition
+  /*jshint strict: false */ /*globals define, module, require */
 
   if ( typeof define == 'function' && define.amd ) {
     // AMD
     define( 'fizzy-ui-utils/utils',[
-      'matches-selector/matches-selector'
+      'desandro-matches-selector/matches-selector'
     ], function( matchesSelector ) {
       return factory( window, matchesSelector );
     });
@@ -775,28 +774,24 @@ return utils;
         'ev-emitter/ev-emitter',
         'get-size/get-size'
       ],
-      function( EvEmitter, getSize ) {
-        return factory( window, EvEmitter, getSize );
-      }
+      factory
     );
   } else if ( typeof module == 'object' && module.exports ) {
     // CommonJS - Browserify, Webpack
     module.exports = factory(
-      window,
       require('ev-emitter'),
       require('get-size')
     );
   } else {
     // browser global
     window.Outlayer = {};
     window.Outlayer.Item = factory(
-      window,
       window.EvEmitter,
       window.getSize
     );
   }
 
-}( window, function factory( window, EvEmitter, getSize ) {
+}( window, function factory( EvEmitter, getSize ) {
 'use strict';
 
 // ----- helpers ----- //
@@ -824,13 +819,14 @@ var transitionEndEvent = {
   transition: 'transitionend'
 }[ transitionProperty ];
 
-// cache all vendor properties
-var vendorProperties = [
-  transformProperty,
-  transitionProperty,
-  transitionProperty + 'Duration',
-  transitionProperty + 'Property'
-];
+// cache all vendor properties that could have vendor prefix
+var vendorProperties = {
+  transform: transformProperty,
+  transition: transitionProperty,
+  transitionDuration: transitionProperty + 'Duration',
+  transitionProperty: transitionProperty + 'Property',
+  transitionDelay: transitionProperty + 'Delay'
+};
 
 // -------------------------- Item -------------------------- //
 
@@ -1044,7 +1040,7 @@ proto._nonTransition = function( args ) {
  *   @param {Boolean} isCleaning - removes transition styles after transition
  *   @param {Function} onTransitionEnd - callback
  */
-proto._transition = function( args ) {
+proto.transition = function( args ) {
   // redirect to nonTransition if no transition duration
   if ( !parseFloat( this.layout.options.transitionDuration ) ) {
     this._nonTransition( args );
@@ -1090,8 +1086,7 @@ function toDashedAll( str ) {
   });
 }
 
-var transitionProps = 'opacity,' +
-  toDashedAll( vendorProperties.transform || 'transform' );
+var transitionProps = 'opacity,' + toDashedAll( transformProperty );
 
 proto.enableTransition = function(/* style */) {
   // HACK changing transitionProperty during a transition
@@ -1109,17 +1104,19 @@ proto.enableTransition = function(/* style */) {
   //   prop = vendorProperties[ prop ] || prop;
   //   transitionValues.push( toDashedAll( prop ) );
   // }
+  // munge number to millisecond, to match stagger
+  var duration = this.layout.options.transitionDuration;
+  duration = typeof duration == 'number' ? duration + 'ms' : duration;
   // enable transition styles
   this.css({
     transitionProperty: transitionProps,
-    transitionDuration: this.layout.options.transitionDuration
+    transitionDuration: duration,
+    transitionDelay: this.staggerDelay || 0
   });
   // listen for transition end event
   this.element.addEventListener( transitionEndEvent, this, false );
 };
 
-proto.transition = Item.prototype[ transitionProperty ? '_transition' : '_nonTransition' ];
-
 // ----- events ----- //
 
 proto.onwebkitTransitionEnd = function( event ) {
@@ -1188,14 +1185,22 @@ proto._removeStyles = function( style ) {
 
 var cleanTransitionStyle = {
   transitionProperty: '',
-  transitionDuration: ''
+  transitionDuration: '',
+  transitionDelay: ''
 };
 
 proto.removeTransitionStyles = function() {
   // remove transition
   this.css( cleanTransitionStyle );
 };
 
+// ----- stagger ----- //
+
+proto.stagger = function( delay ) {
+  delay = isNaN( delay ) ? 0 : delay;
+  this.staggerDelay = delay + 'ms';
+};
+
 // ----- show/hide/remove ----- //
 
 // remove element from DOM
@@ -1311,7 +1316,7 @@ return Item;
 }));
 
 /*!
- * Outlayer v2.0.0
+ * Outlayer v2.1.0
  * the brains and guts of a layout library
  * MIT license
  */
@@ -1660,23 +1665,36 @@ proto._getItemLayoutPosition = function( /* item */ ) {
  * @param {Array} queue
  */
 proto._processLayoutQueue = function( queue ) {
-  queue.forEach( function( obj ) {
-    this._positionItem( obj.item, obj.x, obj.y, obj.isInstant );
+  this.updateStagger();
+  queue.forEach( function( obj, i ) {
+    this._positionItem( obj.item, obj.x, obj.y, obj.isInstant, i );
   }, this );
 };
 
+// set stagger from option in milliseconds number
+proto.updateStagger = function() {
+  var stagger = this.options.stagger;
+  if ( stagger === null || stagger === undefined ) {
+    this.stagger = 0;
+    return;
+  }
+  this.stagger = getMilliseconds( stagger );
+  return this.stagger;
+};
+
 /**
  * Sets position of item in DOM
  * @param {Outlayer.Item} item
  * @param {Number} x - horizontal position
  * @param {Number} y - vertical position
  * @param {Boolean} isInstant - disables transitions
  */
-proto._positionItem = function( item, x, y, isInstant ) {
+proto._positionItem = function( item, x, y, isInstant, i ) {
   if ( isInstant ) {
     // if not transition, just set CSS
     item.goTo( x, y );
   } else {
+    item.stagger( i * this.stagger );
     item.moveTo( x, y );
   }
 };
@@ -2020,7 +2038,9 @@ proto.reveal = function( items ) {
   if ( !items || !items.length ) {
     return;
   }
-  items.forEach( function( item ) {
+  var stagger = this.updateStagger();
+  items.forEach( function( item, i ) {
+    item.stagger( i * stagger );
     item.reveal();
   });
 };
@@ -2034,7 +2054,9 @@ proto.hide = function( items ) {
   if ( !items || !items.length ) {
     return;
   }
-  items.forEach( function( item ) {
+  var stagger = this.updateStagger();
+  items.forEach( function( item, i ) {
+    item.stagger( i * stagger );
     item.hide();
   });
 };
@@ -2199,6 +2221,31 @@ function subclass( Parent ) {
   return SubClass;
 }
 
+// ----- helpers ----- //
+
+// how many milliseconds are in each unit
+var msUnits = {
+  ms: 1,
+  s: 1000
+};
+
+// munge time-like parameter into millisecond number
+// '0.4s' -> 40
+function getMilliseconds( time ) {
+  if ( typeof time == 'number' ) {
+    return time;
+  }
+  var matches = time.match( /(^\d*\.?\d*)(\w*)/ );
+  var num = matches && matches[1];
+  var unit = matches && matches[2];
+  if ( !num.length ) {
+    return 0;
+  }
+  num = parseFloat( num );
+  var mult = msUnits[ unit ] || 1;
+  return num * mult;
+}
+
 // ----- fin ----- //
 
 // back in global
@@ -2209,7 +2256,7 @@ return Outlayer;
 }));
 
 /*!
- * Masonry v4.0.0
+ * Masonry v4.1.0
  * Cascading grid layout library
  * http://masonry.desandro.com
  * MIT License

gulpfile.js

@@ -100,6 +100,8 @@ gulp.task( 'uglify', [ 'requirejs' ], function() {
 // set version in source files
 
 var minimist = require('minimist');
+var gutil = require('gulp-util');
+var chalk = require('chalk');
 
 // use gulp version -t 1.2.3
 gulp.task( 'version', function() {
@@ -120,7 +122,7 @@ gulp.task( 'version', function() {
     .pipe( gulp.dest('.') );
   // replace CDN links in README
   var minorVersion = version.match( /^\d\.\d+/ )[0];
-  gulp.src('README.mdown')
+  gulp.src('README.md')
     .pipe( replace( /masonry\-layout@\d\.\d+/g, 'masonry-layout@' + minorVersion ))
     .pipe( gulp.dest('.') );
 });

masonry.js

@@ -1,5 +1,5 @@
 /*!
- * Masonry v4.0.0
+ * Masonry v4.1.0
  * Cascading grid layout library
  * http://masonry.desandro.com
  * MIT License

package.json

@@ -1,11 +1,11 @@
 {
   "name": "masonry-layout",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "description": "Cascading grid layout library",
   "main": "masonry.js",
   "dependencies": {
-    "get-size": "~2.0.2",
-    "outlayer": "~2.0.0"
+    "get-size": "^2.0.2",
+    "outlayer": "^2.1.0"
   },
   "devDependencies": {
     "chalk": "^1.1.1",