🛠 add stagger option; 👷 build v2.1.0

+ 📦 ^ dependencies
+ 🍹 fix .mdown in gulp version

Author: desandro

README.md

@@ -16,9 +16,9 @@ See [packery.metafizzy.co](http://packery.metafizzy.co) for complete docs and de
 Link directly to Packery files on [npmcdn](https://npmcdn.com).
 
 ``` html
-<script src="https://npmcdn.com/packery@2.0/dist/packery.pkgd.js"></script>
+<script src="https://npmcdn.com/packery@2.1/dist/packery.pkgd.js"></script>
 <!-- or -->
-<script src="https://npmcdn.com/packery@2.0/dist/packery.pkgd.min.js"></script>
+<script src="https://npmcdn.com/packery@2.1/dist/packery.pkgd.min.js"></script>
 ```
 
 ### Package managers

bower.json

@@ -4,8 +4,8 @@
   "description": "Gapless, draggable grid layouts",
   "main": "js/packery.js",
   "dependencies": {
-    "get-size": "~2.0.2",
-    "outlayer": "~2.0.0"
+    "get-size": "^2.0.2",
+    "outlayer": "^2.0.0"
   },
   "devDependencies": {
     "draggabilly": "^2.1.0",

dist/packery.pkgd.js

@@ -1,5 +1,5 @@
 /*!
- * Packery PACKAGED v2.0.0
+ * Packery PACKAGED v2.1.0
  * Gapless, draggable grid layouts
  *
  * Licensed GPLv3 for open source use
@@ -827,7 +827,8 @@ var vendorProperties = {
   transform: transformProperty,
   transition: transitionProperty,
   transitionDuration: transitionProperty + 'Duration',
-  transitionProperty: transitionProperty + 'Property'
+  transitionProperty: transitionProperty + 'Property',
+  transitionDelay: transitionProperty + 'Delay'
 };
 
 // -------------------------- Item -------------------------- //
@@ -1106,10 +1107,14 @@ 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 );
@@ -1183,14 +1188,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
@@ -1306,7 +1319,7 @@ return Item;
 }));
 
 /*!
- * Outlayer v2.0.1
+ * Outlayer v2.1.0
  * the brains and guts of a layout library
  * MIT license
  */
@@ -1655,23 +1668,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 );
   }
 };
@@ -2015,7 +2041,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();
   });
 };
@@ -2029,7 +2057,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();
   });
 };
@@ -2194,6 +2224,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
@@ -2672,7 +2727,11 @@ proto.positionDropPlaceholder = function() {
 };
 
 proto.hideDropPlaceholder = function() {
-  this.layout.element.removeChild( this.dropPlaceholder );
+  // only remove once, #333
+  var parent = this.dropPlaceholder.parentNode;
+  if ( parent ) {
+    parent.removeChild( this.dropPlaceholder );
+  }
 };
 
 // -----  ----- //
@@ -2682,7 +2741,7 @@ return Item;
 }));
 
 /*!
- * Packery v2.0.0
+ * Packery v2.1.0
  * Gapless, draggable grid layouts
  *
  * Licensed GPLv3 for open source use

dist/packery.pkgd.min.js

@@ -122,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( /packery@\d\.\d+/g, 'packery@' + minorVersion ))
     .pipe( gulp.dest('.') );
 });

gulpfile.js

@@ -1,5 +1,5 @@
 /*!
- * Packery v2.0.0
+ * Packery v2.1.0
  * Gapless, draggable grid layouts
  *
  * Licensed GPLv3 for open source use

js/packery.js

@@ -1,11 +1,11 @@
 {
   "name": "packery",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Gapless, draggable grid layouts",
   "main": "js/packery.js",
   "dependencies": {
-    "get-size": "~2.0.2",
-    "outlayer": "~2.0.0"
+    "get-size": "^2.0.2",
+    "outlayer": "^2.0.0"
   },
   "devDependencies": {
     "chalk": "^1.1.1",