release candidate

2017-12-30 17:48:05 +01:00
parent 13bd34d2b3
commit 3983d1fdaf
232 changed files with 24427 additions and 11080 deletions
@@ -1,5 +1,5 @@
 /*!
- * Outlayer v1.4.2
+ * Outlayer v2.1.1
 * the brains and guts of a layout library
 * MIT license
 */
@@ -7,26 +7,24 @@
 ( function( window, factory ) {
  'use strict';
  // universal module definition
-
+  /* jshint strict: false */ /* globals define, module, require */
  if ( typeof define == 'function' && define.amd ) {
-    // AMD
+    // AMD - RequireJS
    define( [
-        'eventie/eventie',
-        'eventEmitter/EventEmitter',
+        'ev-emitter/ev-emitter',
        'get-size/get-size',
        'fizzy-ui-utils/utils',
        './item'
      ],
-      function( eventie, EventEmitter, getSize, utils, Item ) {
-        return factory( window, eventie, EventEmitter, getSize, utils, Item);
+      function( EvEmitter, getSize, utils, Item ) {
+        return factory( window, EvEmitter, getSize, utils, Item);
      }
    );
-  } else if ( typeof exports == 'object' ) {
-    // CommonJS
+  } else if ( typeof module == 'object' && module.exports ) {
+    // CommonJS - Browserify, Webpack
    module.exports = factory(
      window,
-      require('eventie'),
-      require('wolfy87-eventemitter'),
+      require('ev-emitter'),
      require('get-size'),
      require('fizzy-ui-utils'),
      require('./item')
@@ -35,15 +33,14 @@
    // browser global
    window.Outlayer = factory(
      window,
-      window.eventie,
-      window.EventEmitter,
+      window.EvEmitter,
      window.getSize,
      window.fizzyUIUtils,
      window.Outlayer.Item
    );
  }

-}( window, function factory( window, eventie, EventEmitter, getSize, utils, Item ) {
+}( window, function factory( window, EvEmitter, getSize, utils, Item ) {
 'use strict';

 // ----- vars ----- //
@@ -92,7 +89,8 @@ function Outlayer( element, options ) {
  // kick it off
  this._create();

-  if ( this.options.isInitLayout ) {
+  var isInitLayout = this._getOption('initLayout');
+  if ( isInitLayout ) {
    this.layout();
  }
 }
@@ -106,11 +104,11 @@ Outlayer.defaults = {
  containerStyle: {
    position: 'relative'
  },
-  isInitLayout: true,
-  isOriginLeft: true,
-  isOriginTop: true,
-  isResizeBound: true,
-  isResizingContainer: true,
+  initLayout: true,
+  originLeft: true,
+  originTop: true,
+  resize: true,
+  resizeContainer: true,
  // item options
  transitionDuration: '0.4s',
  hiddenStyle: {
@@ -123,18 +121,39 @@ Outlayer.defaults = {
  }
 };

-// inherit EventEmitter
-utils.extend( Outlayer.prototype, EventEmitter.prototype );
+var proto = Outlayer.prototype;
+// inherit EvEmitter
+utils.extend( proto, EvEmitter.prototype );

 /**
 * set options
 * @param {Object} opts
 */
-Outlayer.prototype.option = function( opts ) {
+proto.option = function( opts ) {
  utils.extend( this.options, opts );
 };

-Outlayer.prototype._create = function() {
+/**
+ * get backwards compatible option value, check old name
+ */
+proto._getOption = function( option ) {
+  var oldOption = this.constructor.compatOptions[ option ];
+  return oldOption && this.options[ oldOption ] !== undefined ?
+    this.options[ oldOption ] : this.options[ option ];
+};
+
+Outlayer.compatOptions = {
+  // currentName: oldName
+  initLayout: 'isInitLayout',
+  horizontal: 'isHorizontal',
+  layoutInstant: 'isLayoutInstant',
+  originLeft: 'isOriginLeft',
+  originTop: 'isOriginTop',
+  resize: 'isResizeBound',
+  resizeContainer: 'isResizingContainer'
+};
+
+proto._create = function() {
  // get items from children
  this.reloadItems();
  // elements that affect layout, but are not laid out
@@ -144,13 +163,14 @@ Outlayer.prototype._create = function() {
  utils.extend( this.element.style, this.options.containerStyle );

  // bind resize method
-  if ( this.options.isResizeBound ) {
+  var canBindResize = this._getOption('resize');
+  if ( canBindResize ) {
    this.bindResize();
  }
 };

 // goes through all children again and gets bricks in proper order
-Outlayer.prototype.reloadItems = function() {
+proto.reloadItems = function() {
  // collection of item elements
  this.items = this._itemize( this.element.children );
 };
@@ -161,14 +181,14 @@ Outlayer.prototype.reloadItems = function() {
 * @param {Array or NodeList or HTMLElement} elems
 * @returns {Array} items - collection of new Outlayer Items
 */
-Outlayer.prototype._itemize = function( elems ) {
+proto._itemize = function( elems ) {

  var itemElems = this._filterFindItemElements( elems );
  var Item = this.constructor.Item;

  // create new Outlayer Items for collection
  var items = [];
-  for ( var i=0, len = itemElems.length; i < len; i++ ) {
+  for ( var i=0; i < itemElems.length; i++ ) {
    var elem = itemElems[i];
    var item = new Item( elem, this );
    items.push( item );
@@ -182,7 +202,7 @@ Outlayer.prototype._itemize = function( elems ) {
 * @param {Array or NodeList or HTMLElement} elems
 * @returns {Array} items - item elements
 */
-Outlayer.prototype._filterFindItemElements = function( elems ) {
+proto._filterFindItemElements = function( elems ) {
  return utils.filterFindElements( elems, this.options.itemSelector );
 };

@@ -190,12 +210,10 @@ Outlayer.prototype._filterFindItemElements = function( elems ) {
 * getter method for getting item elements
 * @returns {Array} elems - collection of item elements
 */
-Outlayer.prototype.getItemElements = function() {
-  var elems = [];
-  for ( var i=0, len = this.items.length; i < len; i++ ) {
-    elems.push( this.items[i].element );
-  }
-  return elems;
+proto.getItemElements = function() {
+  return this.items.map( function( item ) {
+    return item.element;
+  });
 };

 // ----- init & layout ----- //
@@ -203,13 +221,14 @@ Outlayer.prototype.getItemElements = function() {
 /**
 * lays out all items
 */
-Outlayer.prototype.layout = function() {
+proto.layout = function() {
  this._resetLayout();
  this._manageStamps();

  // don't animate first layout
-  var isInstant = this.options.isLayoutInstant !== undefined ?
-    this.options.isLayoutInstant : !this._isLayoutInited;
+  var layoutInstant = this._getOption('layoutInstant');
+  var isInstant = layoutInstant !== undefined ?
+    layoutInstant : !this._isLayoutInited;
  this.layoutItems( this.items, isInstant );

  // flag for initalized
@@ -217,17 +236,17 @@ Outlayer.prototype.layout = function() {
 };

 // _init is alias for layout
-Outlayer.prototype._init = Outlayer.prototype.layout;
+proto._init = proto.layout;

 /**
 * logic before any new layout
 */
-Outlayer.prototype._resetLayout = function() {
+proto._resetLayout = function() {
  this.getSize();
 };


-Outlayer.prototype.getSize = function() {
+proto.getSize = function() {
  this.size = getSize( this.element );
 };

@@ -241,7 +260,7 @@ Outlayer.prototype.getSize = function() {
 * @param {String} size - width or height
 * @private
 */
-Outlayer.prototype._getMeasurement = function( measurement, size ) {
+proto._getMeasurement = function( measurement, size ) {
  var option = this.options[ measurement ];
  var elem;
  if ( !option ) {
@@ -249,9 +268,9 @@ Outlayer.prototype._getMeasurement = function( measurement, size ) {
    this[ measurement ] = 0;
  } else {
    // use option as an element
-    if ( typeof option === 'string' ) {
+    if ( typeof option == 'string' ) {
      elem = this.element.querySelector( option );
-    } else if ( utils.isElement( option ) ) {
+    } else if ( option instanceof HTMLElement ) {
      elem = option;
    }
    // use size of element, if element
@@ -263,7 +282,7 @@ Outlayer.prototype._getMeasurement = function( measurement, size ) {
 * layout a collection of item elements
 * @api public
 */
-Outlayer.prototype.layoutItems = function( items, isInstant ) {
+proto.layoutItems = function( items, isInstant ) {
  items = this._getItemsForLayout( items );

  this._layoutItems( items, isInstant );
@@ -277,15 +296,10 @@ Outlayer.prototype.layoutItems = function( items, isInstant ) {
 * @param {Array} items
 * @returns {Array} items
 */
-Outlayer.prototype._getItemsForLayout = function( items ) {
-  var layoutItems = [];
-  for ( var i=0, len = items.length; i < len; i++ ) {
-    var item = items[i];
-    if ( !item.isIgnored ) {
-      layoutItems.push( item );
-    }
-  }
-  return layoutItems;
+proto._getItemsForLayout = function( items ) {
+  return items.filter( function( item ) {
+    return !item.isIgnored;
+  });
 };

 /**
@@ -293,7 +307,7 @@ Outlayer.prototype._getItemsForLayout = function( items ) {
 * @param {Array} items
 * @param {Boolean} isInstant
 */
-Outlayer.prototype._layoutItems = function( items, isInstant ) {
+proto._layoutItems = function( items, isInstant ) {
  this._emitCompleteOnItems( 'layout', items );

  if ( !items || !items.length ) {
@@ -303,15 +317,14 @@ Outlayer.prototype._layoutItems = function( items, isInstant ) {

  var queue = [];

-  for ( var i=0, len = items.length; i < len; i++ ) {
-    var item = items[i];
+  items.forEach( function( item ) {
    // get x/y object from method
    var position = this._getItemLayoutPosition( item );
    // enqueue
    position.item = item;
    position.isInstant = isInstant || item.isLayoutInstant;
    queue.push( position );
-  }
+  }, this );

  this._processLayoutQueue( queue );
 };
@@ -321,7 +334,7 @@ Outlayer.prototype._layoutItems = function( items, isInstant ) {
 * @param {Outlayer.Item} item
 * @returns {Object} x and y position
 */
-Outlayer.prototype._getItemLayoutPosition = function( /* item */ ) {
+proto._getItemLayoutPosition = function( /* item */ ) {
  return {
    x: 0,
    y: 0
@@ -334,11 +347,22 @@ Outlayer.prototype._getItemLayoutPosition = function( /* item */ ) {
 * thx @paul_irish
 * @param {Array} queue
 */
-Outlayer.prototype._processLayoutQueue = function( queue ) {
-  for ( var i=0, len = queue.length; i < len; i++ ) {
-    var obj = queue[i];
-    this._positionItem( obj.item, obj.x, obj.y, obj.isInstant );
+proto._processLayoutQueue = function( queue ) {
+  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;
 };

 /**
@@ -348,11 +372,12 @@ Outlayer.prototype._processLayoutQueue = function( queue ) {
 * @param {Number} y - vertical position
 * @param {Boolean} isInstant - disables transitions
 */
-Outlayer.prototype._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 );
  }
 };
@@ -361,12 +386,13 @@ Outlayer.prototype._positionItem = function( item, x, y, isInstant ) {
 * Any logic you want to do after each layout,
 * i.e. size the container
 */
-Outlayer.prototype._postLayout = function() {
+proto._postLayout = function() {
  this.resizeContainer();
 };

-Outlayer.prototype.resizeContainer = function() {
-  if ( !this.options.isResizingContainer ) {
+proto.resizeContainer = function() {
+  var isResizingContainer = this._getOption('resizeContainer');
+  if ( !isResizingContainer ) {
    return;
  }
  var size = this._getContainerSize();
@@ -382,13 +408,13 @@ Outlayer.prototype.resizeContainer = function() {
 *   @param {Number} width
 *   @param {Number} height
 */
-Outlayer.prototype._getContainerSize = noop;
+proto._getContainerSize = noop;

 /**
 * @param {Number} measure - size of width or height
 * @param {Boolean} isWidth
 */
-Outlayer.prototype._setContainerMeasure = function( measure, isWidth ) {
+proto._setContainerMeasure = function( measure, isWidth ) {
  if ( measure === undefined ) {
    return;
  }
@@ -411,7 +437,7 @@ Outlayer.prototype._setContainerMeasure = function( measure, isWidth ) {
 * @param {String} eventName
 * @param {Array} items - Outlayer.Items
 */
-Outlayer.prototype._emitCompleteOnItems = function( eventName, items ) {
+proto._emitCompleteOnItems = function( eventName, items ) {
  var _this = this;
  function onComplete() {
    _this.dispatchEvent( eventName + 'Complete', null, [ items ] );
@@ -426,25 +452,24 @@ Outlayer.prototype._emitCompleteOnItems = function( eventName, items ) {
  var doneCount = 0;
  function tick() {
    doneCount++;
-    if ( doneCount === count ) {
+    if ( doneCount == count ) {
      onComplete();
    }
  }

  // bind callback
-  for ( var i=0, len = items.length; i < len; i++ ) {
-    var item = items[i];
+  items.forEach( function( item ) {
    item.once( eventName, tick );
-  }
+  });
 };

 /**
- * emits events via eventEmitter and jQuery events
+ * emits events via EvEmitter and jQuery events
 * @param {String} type - name of event
 * @param {Event} event - original event
 * @param {Array} args - extra arguments
 */
-Outlayer.prototype.dispatchEvent = function( type, event, args ) {
+proto.dispatchEvent = function( type, event, args ) {
  // add original event to arguments
  var emitArgs = event ? [ event ].concat( args ) : args;
  this.emitEvent( type, emitArgs );
@@ -472,7 +497,7 @@ Outlayer.prototype.dispatchEvent = function( type, event, args ) {
 * ignored items do not get skipped in layout
 * @param {Element} elem
 */
-Outlayer.prototype.ignore = function( elem ) {
+proto.ignore = function( elem ) {
  var item = this.getItem( elem );
  if ( item ) {
    item.isIgnored = true;
@@ -483,7 +508,7 @@ Outlayer.prototype.ignore = function( elem ) {
 * return item to layout collection
 * @param {Element} elem
 */
-Outlayer.prototype.unignore = function( elem ) {
+proto.unignore = function( elem ) {
  var item = this.getItem( elem );
  if ( item ) {
    delete item.isIgnored;
@@ -494,7 +519,7 @@ Outlayer.prototype.unignore = function( elem ) {
 * adds elements to stamps
 * @param {NodeList, Array, Element, or String} elems
 */
-Outlayer.prototype.stamp = function( elems ) {
+proto.stamp = function( elems ) {
  elems = this._find( elems );
  if ( !elems ) {
    return;
@@ -502,29 +527,24 @@ Outlayer.prototype.stamp = function( elems ) {

  this.stamps = this.stamps.concat( elems );
  // ignore
-  for ( var i=0, len = elems.length; i < len; i++ ) {
-    var elem = elems[i];
-    this.ignore( elem );
-  }
+  elems.forEach( this.ignore, this );
 };

 /**
 * removes elements to stamps
 * @param {NodeList, Array, or Element} elems
 */
-Outlayer.prototype.unstamp = function( elems ) {
+proto.unstamp = function( elems ) {
  elems = this._find( elems );
  if ( !elems ){
    return;
  }

-  for ( var i=0, len = elems.length; i < len; i++ ) {
-    var elem = elems[i];
+  elems.forEach( function( elem ) {
    // filter out removed stamp elements
    utils.removeFrom( this.stamps, elem );
    this.unignore( elem );
-  }
-
+  }, this );
 };

 /**
@@ -532,33 +552,30 @@ Outlayer.prototype.unstamp = function( elems ) {
 * @param {NodeList, Array, Element, or String} elems
 * @returns {Array} elems
 */
-Outlayer.prototype._find = function( elems ) {
+proto._find = function( elems ) {
  if ( !elems ) {
    return;
  }
  // if string, use argument as selector string
-  if ( typeof elems === 'string' ) {
+  if ( typeof elems == 'string' ) {
    elems = this.element.querySelectorAll( elems );
  }
  elems = utils.makeArray( elems );
  return elems;
 };

-Outlayer.prototype._manageStamps = function() {
+proto._manageStamps = function() {
  if ( !this.stamps || !this.stamps.length ) {
    return;
  }

  this._getBoundingRect();

-  for ( var i=0, len = this.stamps.length; i < len; i++ ) {
-    var stamp = this.stamps[i];
-    this._manageStamp( stamp );
-  }
+  this.stamps.forEach( this._manageStamp, this );
 };

 // update boundingLeft / Top
-Outlayer.prototype._getBoundingRect = function() {
+proto._getBoundingRect = function() {
  // get bounding rect for container element
  var boundingRect = this.element.getBoundingClientRect();
  var size = this.size;
@@ -573,14 +590,14 @@ Outlayer.prototype._getBoundingRect = function() {
 /**
 * @param {Element} stamp
 **/
-Outlayer.prototype._manageStamp = noop;
+proto._manageStamp = noop;

 /**
 * get x/y position of element relative to container element
 * @param {Element} elem
 * @returns {Object} offset - has left, top, right, bottom
 */
-Outlayer.prototype._getElementOffset = function( elem ) {
+proto._getElementOffset = function( elem ) {
  var boundingRect = elem.getBoundingClientRect();
  var thisRect = this._boundingRect;
  var size = getSize( elem );
@@ -597,55 +614,31 @@ Outlayer.prototype._getElementOffset = function( elem ) {

 // enable event handlers for listeners
 // i.e. resize -> onresize
-Outlayer.prototype.handleEvent = function( event ) {
-  var method = 'on' + event.type;
-  if ( this[ method ] ) {
-    this[ method ]( event );
-  }
-};
+proto.handleEvent = utils.handleEvent;

 /**
 * Bind layout to window resizing
 */
-Outlayer.prototype.bindResize = function() {
-  // bind just one listener
-  if ( this.isResizeBound ) {
-    return;
-  }
-  eventie.bind( window, 'resize', this );
+proto.bindResize = function() {
+  window.addEventListener( 'resize', this );
  this.isResizeBound = true;
 };

 /**
 * Unbind layout to window resizing
 */
-Outlayer.prototype.unbindResize = function() {
-  if ( this.isResizeBound ) {
-    eventie.unbind( window, 'resize', this );
-  }
+proto.unbindResize = function() {
+  window.removeEventListener( 'resize', this );
  this.isResizeBound = false;
 };

-// original debounce by John Hann
-// http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
-
-// this fires every resize
-Outlayer.prototype.onresize = function() {
-  if ( this.resizeTimeout ) {
-    clearTimeout( this.resizeTimeout );
-  }
-
-  var _this = this;
-  function delayed() {
-    _this.resize();
-    delete _this.resizeTimeout;
-  }
-
-  this.resizeTimeout = setTimeout( delayed, 100 );
+proto.onresize = function() {
+  this.resize();
 };

-// debounced, layout on resize
-Outlayer.prototype.resize = function() {
+utils.debounceMethod( Outlayer, 'onresize', 100 );
+
+proto.resize = function() {
  // don't trigger if size did not change
  // or if resize was unbound. See #9
  if ( !this.isResizeBound || !this.needsResizeLayout() ) {
@@ -659,7 +652,7 @@ Outlayer.prototype.resize = function() {
 * check if layout is needed post layout
 * @returns Boolean
 */
-Outlayer.prototype.needsResizeLayout = function() {
+proto.needsResizeLayout = function() {
  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
@@ -674,7 +667,7 @@ Outlayer.prototype.needsResizeLayout = function() {
 * @param {Array or NodeList or Element} elems
 * @returns {Array} items - Outlayer.Items
 **/
-Outlayer.prototype.addItems = function( elems ) {
+proto.addItems = function( elems ) {
  var items = this._itemize( elems );
  // add items to collection
  if ( items.length ) {
@@ -687,7 +680,7 @@ Outlayer.prototype.addItems = function( elems ) {
 * Layout newly-appended item elements
 * @param {Array or NodeList or Element} elems
 */
-Outlayer.prototype.appended = function( elems ) {
+proto.appended = function( elems ) {
  var items = this.addItems( elems );
  if ( !items.length ) {
    return;
@@ -701,7 +694,7 @@ Outlayer.prototype.appended = function( elems ) {
 * Layout prepended elements
 * @param {Array or NodeList or Element} elems
 */
-Outlayer.prototype.prepended = function( elems ) {
+proto.prepended = function( elems ) {
  var items = this._itemize( elems );
  if ( !items.length ) {
    return;
@@ -723,35 +716,39 @@ Outlayer.prototype.prepended = function( elems ) {
 * reveal a collection of items
 * @param {Array of Outlayer.Items} items
 */
-Outlayer.prototype.reveal = function( items ) {
+proto.reveal = function( items ) {
  this._emitCompleteOnItems( 'reveal', items );
-
-  var len = items && items.length;
-  for ( var i=0; len && i < len; i++ ) {
-    var item = items[i];
-    item.reveal();
+  if ( !items || !items.length ) {
+    return;
  }
+  var stagger = this.updateStagger();
+  items.forEach( function( item, i ) {
+    item.stagger( i * stagger );
+    item.reveal();
+  });
 };

 /**
 * hide a collection of items
 * @param {Array of Outlayer.Items} items
 */
-Outlayer.prototype.hide = function( items ) {
+proto.hide = function( items ) {
  this._emitCompleteOnItems( 'hide', items );
-
-  var len = items && items.length;
-  for ( var i=0; len && i < len; i++ ) {
-    var item = items[i];
-    item.hide();
+  if ( !items || !items.length ) {
+    return;
  }
+  var stagger = this.updateStagger();
+  items.forEach( function( item, i ) {
+    item.stagger( i * stagger );
+    item.hide();
+  });
 };

 /**
 * reveal item elements
 * @param {Array}, {Element}, {NodeList} items
 */
-Outlayer.prototype.revealItemElements = function( elems ) {
+proto.revealItemElements = function( elems ) {
  var items = this.getItems( elems );
  this.reveal( items );
 };
@@ -760,7 +757,7 @@ Outlayer.prototype.revealItemElements = function( elems ) {
 * hide item elements
 * @param {Array}, {Element}, {NodeList} items
 */
-Outlayer.prototype.hideItemElements = function( elems ) {
+proto.hideItemElements = function( elems ) {
  var items = this.getItems( elems );
  this.hide( items );
 };
@@ -771,11 +768,11 @@ Outlayer.prototype.hideItemElements = function( elems ) {
 * @param {Function} callback
 * @returns {Outlayer.Item} item
 */
-Outlayer.prototype.getItem = function( elem ) {
+proto.getItem = function( elem ) {
  // loop through items to get the one that matches
-  for ( var i=0, len = this.items.length; i < len; i++ ) {
+  for ( var i=0; i < this.items.length; i++ ) {
    var item = this.items[i];
-    if ( item.element === elem ) {
+    if ( item.element == elem ) {
      // return item
      return item;
    }
@@ -787,16 +784,15 @@ Outlayer.prototype.getItem = function( elem ) {
 * @param {Array} elems
 * @returns {Array} items - Outlayer.Items
 */
-Outlayer.prototype.getItems = function( elems ) {
+proto.getItems = function( elems ) {
  elems = utils.makeArray( elems );
  var items = [];
-  for ( var i=0, len = elems.length; i < len; i++ ) {
-    var elem = elems[i];
+  elems.forEach( function( elem ) {
    var item = this.getItem( elem );
    if ( item ) {
      items.push( item );
    }
-  }
+  }, this );

  return items;
 };
@@ -805,7 +801,7 @@ Outlayer.prototype.getItems = function( elems ) {
 * remove element(s) from instance and DOM
 * @param {Array or NodeList or Element} elems
 */
-Outlayer.prototype.remove = function( elems ) {
+proto.remove = function( elems ) {
  var removeItems = this.getItems( elems );

  this._emitCompleteOnItems( 'remove', removeItems );
@@ -815,28 +811,26 @@ Outlayer.prototype.remove = function( elems ) {
    return;
  }

-  for ( var i=0, len = removeItems.length; i < len; i++ ) {
-    var item = removeItems[i];
+  removeItems.forEach( function( item ) {
    item.remove();
    // remove item from collection
    utils.removeFrom( this.items, item );
-  }
+  }, this );
 };

 // ----- destroy ----- //

 // remove and disable Outlayer instance
-Outlayer.prototype.destroy = function() {
+proto.destroy = function() {
  // clean up dynamic styles
  var style = this.element.style;
  style.height = '';
  style.position = '';
  style.width = '';
  // destroy items
-  for ( var i=0, len = this.items.length; i < len; i++ ) {
-    var item = this.items[i];
+  this.items.forEach( function( item ) {
    item.destroy();
-  }
+  });

  this.unbindResize();

@@ -872,34 +866,18 @@ Outlayer.data = function( elem ) {
 */
 Outlayer.create = function( namespace, options ) {
  // sub-class Outlayer
-  function Layout() {
-    Outlayer.apply( this, arguments );
-  }
-  // inherit Outlayer prototype, use Object.create if there
-  if ( Object.create ) {
-    Layout.prototype = Object.create( Outlayer.prototype );
-  } else {
-    utils.extend( Layout.prototype, Outlayer.prototype );
-  }
-  // set contructor, used for namespace and Item
-  Layout.prototype.constructor = Layout;
-
+  var Layout = subclass( Outlayer );
+  // apply new options and compatOptions
  Layout.defaults = utils.extend( {}, Outlayer.defaults );
-  // apply new options
  utils.extend( Layout.defaults, options );
-  // keep prototype.settings for backwards compatibility (Packery v1.2.0)
-  Layout.prototype.settings = {};
+  Layout.compatOptions = utils.extend( {}, Outlayer.compatOptions  );

  Layout.namespace = namespace;

  Layout.data = Outlayer.data;

  // sub-class Item
-  Layout.Item = function LayoutItem() {
-    Item.apply( this, arguments );
-  };
-
-  Layout.Item.prototype = new Item();
+  Layout.Item = subclass( Item );

  // -------------------------- declarative -------------------------- //

@@ -915,6 +893,42 @@ Outlayer.create = function( namespace, options ) {
  return Layout;
 };

+function subclass( Parent ) {
+  function SubClass() {
+    Parent.apply( this, arguments );
+  }
+
+  SubClass.prototype = Object.create( Parent.prototype );
+  SubClass.prototype.constructor = SubClass;
+
+  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
@@ -923,4 +937,3 @@ Outlayer.Item = Item;
 return Outlayer;

 }));
-