add LayoutMode.getColumnWidth and getRowHeight

layout-mode.js

@@ -4,7 +4,7 @@
 
 // --------------------------  -------------------------- //
 
-function layoutModeDefinition( Outlayer ) {
+function layoutModeDefinition( getSize, Outlayer ) {
 
 var layoutMode = {};
 
@@ -35,7 +35,7 @@ layoutMode.create = function( namespace, options ) {
   // register in Isotope
   layoutMode.modes[ namespace ] = LayoutMode;
 
-  // -------------------------- methods -------------------------- //
+  // ----- methods ----- //
 
   // default method handler
   // trigger Outlayer method with Isotope as this
@@ -63,6 +63,41 @@ layoutMode.create = function( namespace, options ) {
     this._outlayerMethod( 'resize', arguments );
   };
 
+  // ----- measurements ----- //
+
+  LayoutMode.prototype.getColumnWidth = function() {
+    this._getMeasurement( 'columnWidth', 'outerWidth' );
+    if ( this.columnWidth ) {
+      // got column width, we can chill
+      return;
+    }
+    // columnWidth fall back to item of first element
+    var firstItemSize = this.getFirstItemSize();
+    this.columnWidth = firstItemSize && firstItemSize.outerWidth ||
+      // or size of container
+      this.isotope.size.innerWidth;
+  };
+
+  LayoutMode.prototype.getRowHeight = function() {
+    this._getMeasurement( 'rowHeight', 'outerHeight' );
+    if ( this.rowHeight ) {
+      // got column width, we can chill
+      return;
+    }
+    // columnWidth fall back to item of first element
+    var firstItemSize = this.getFirstItemSize();
+    this.rowHeight = firstItemSize && firstItemSize.outerHeight ||
+      // or size of container
+      this.isotope.size.innerHeight;
+  };
+
+  LayoutMode.prototype.getFirstItemSize = function() {
+    var firstItem = this.isotope.filteredItems[0];
+    return firstItem && firstItem.element && getSize( firstItem.element );
+  };
+
+  // -----  ----- //
+
   return LayoutMode;
 };
 
@@ -74,6 +109,7 @@ return layoutMode;
 if ( typeof define === 'function' && define.amd ) {
   // AMD
   define( [
+      'get-size/get-size',
       'outlayer/outlayer'
     ],
     layoutModeDefinition );
@@ -81,6 +117,7 @@ if ( typeof define === 'function' && define.amd ) {
   // browser global
   window.Isotope = window.Isotope || {};
   window.Isotope.layoutMode = layoutModeDefinition(
+    window.getSize,
     window.Outlayer
   );
 }

layout-modes/cells-by-column.js

@@ -2,35 +2,18 @@
 
 'use strict';
 
-function cellsByColumnDefinition( layoutMode, getSize ) {
+function cellsByColumnDefinition( layoutMode ) {
 
   var CellsByColumn = layoutMode.create( 'cellsByColumn' );
 
   CellsByColumn.prototype._resetLayout = function() {
-    var containerSize = this.isotope.size;
+    // reset properties
     this.itemIndex = 0;
-
+    // measurements
-    this._getMeasurement( 'columnWidth', 'outerWidth' );
+    this.getColumnWidth();
-    this._getMeasurement( 'rowHeight', 'outerHeight' );
+    this.getRowHeight();
-
-    var firstItem = this.items[0];
-    var firstItemSize = firstItem && firstItem.element && getSize( firstItem.element );
-
-    if ( !this.columnWidth ) {
-      // columnWidth fall back to item of first element
-      this.columnWidth = firstItemSize ? firstItemSize.outerWidth :
-        // or size of container
-        containerSize.innerWidth;
-    }
-
-    if ( !this.rowHeight ) {
-      // rowHeight fall back to item of first element
-      this.rowHeight = firstItemSize ? firstItemSize.outerHeight :
-        // or size of container
-        containerSize.innerHeight;
-    }
     // set rows
-    this.rows = Math.floor( containerSize.innerHeight / this.rowHeight );
+    this.rows = Math.floor( this.isotope.size.innerHeight / this.rowHeight );
     this.rows = Math.max( this.rows, 1 );
   };
 
@@ -62,15 +45,13 @@ function cellsByColumnDefinition( layoutMode, getSize ) {
 if ( typeof define === 'function' && define.amd ) {
   // AMD
   define( [
-      '../layout-mode',
+      '../layout-mode'
-      'get-size/get-size'
     ],
     cellsByColumnDefinition );
 } else {
   // browser global
   cellsByColumnDefinition(
-    window.Isotope.layoutMode,
+    window.Isotope.layoutMode
-    window.getSize
   );
 }
 

layout-modes/cells-by-row.js

@@ -2,35 +2,18 @@
 
 'use strict';
 
-function cellsByRowDefinition( layoutMode, getSize ) {
+function cellsByRowDefinition( layoutMode ) {
 
   var CellsByRow = layoutMode.create( 'cellsByRow' );
 
   CellsByRow.prototype._resetLayout = function() {
-    var containerSize = this.isotope.size;
+    // reset properties
     this.itemIndex = 0;
-
+    // measurements
-    this._getMeasurement( 'columnWidth', 'outerWidth' );
+    this.getColumnWidth();
-    this._getMeasurement( 'rowHeight', 'outerHeight' );
+    this.getRowHeight();
-
-    var firstItem = this.items[0];
-    var firstItemSize = firstItem && firstItem.element && getSize( firstItem.element );
-
-    if ( !this.columnWidth ) {
-      // columnWidth fall back to item of first element
-      this.columnWidth = firstItemSize ? firstItemSize.outerWidth :
-        // or size of container
-        containerSize.innerWidth;
-    }
-
-    if ( !this.rowHeight ) {
-      // rowHeight fall back to item of first element
-      this.rowHeight = firstItemSize ? firstItemSize.outerHeight :
-        // or size of container
-        containerSize.innerHeight;
-    }
     // set cols
-    this.cols = Math.floor( containerSize.innerWidth / this.columnWidth );
+    this.cols = Math.floor( this.isotope.size.innerWidth / this.columnWidth );
     this.cols = Math.max( this.cols, 1 );
   };