From 9fcf87714e308fb83cf858652e32abc436c20b5c Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Wed, 28 Aug 2013 21:49:39 -0400 Subject: [PATCH] add LayoutMode.getColumnWidth and getRowHeight --- layout-mode.js | 41 +++++++++++++++++++++++++++++++-- layout-modes/cells-by-column.js | 35 +++++++--------------------- layout-modes/cells-by-row.js | 29 +++++------------------ 3 files changed, 53 insertions(+), 52 deletions(-) diff --git a/layout-mode.js b/layout-mode.js index 2895fa8..78ed53f 100644 --- a/layout-mode.js +++ b/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 ); } diff --git a/layout-modes/cells-by-column.js b/layout-modes/cells-by-column.js index 5e8f279..a70337e 100644 --- a/layout-modes/cells-by-column.js +++ b/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; - - this._getMeasurement( 'columnWidth', 'outerWidth' ); - this._getMeasurement( 'rowHeight', 'outerHeight' ); - - 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; - } + // measurements + this.getColumnWidth(); + this.getRowHeight(); // 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', - 'get-size/get-size' + '../layout-mode' ], cellsByColumnDefinition ); } else { // browser global cellsByColumnDefinition( - window.Isotope.layoutMode, - window.getSize + window.Isotope.layoutMode ); } diff --git a/layout-modes/cells-by-row.js b/layout-modes/cells-by-row.js index 65652fb..889b68f 100644 --- a/layout-modes/cells-by-row.js +++ b/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; - - this._getMeasurement( 'columnWidth', 'outerWidth' ); - this._getMeasurement( 'rowHeight', 'outerHeight' ); - - 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; - } + // measurements + this.getColumnWidth(); + this.getRowHeight(); // 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 ); };