From 38b09155984ef8d9a748e387d093316883b16118 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Tue, 7 Oct 2014 15:20:02 -0400 Subject: [PATCH] Add gutter option to fitRows; Fixes #580 --- js/layout-modes/fit-rows.js | 7 +- sandbox/fitrows.html | 135 ++++++++++++++++++++++++++++++++++++ test/fit-rows.js | 43 ++++++++++++ test/index.html | 13 +++- test/tests.css | 6 ++ 5 files changed, 201 insertions(+), 3 deletions(-) create mode 100644 sandbox/fitrows.html create mode 100644 test/fit-rows.js diff --git a/js/layout-modes/fit-rows.js b/js/layout-modes/fit-rows.js index 0bafc83..ae3fceb 100644 --- a/js/layout-modes/fit-rows.js +++ b/js/layout-modes/fit-rows.js @@ -10,13 +10,16 @@ FitRows.prototype._resetLayout = function() { this.x = 0; this.y = 0; this.maxY = 0; + this._getMeasurement( 'gutter', 'outerWidth' ); }; FitRows.prototype._getItemLayoutPosition = function( item ) { item.getSize(); + var itemWidth = item.size.outerWidth + this.gutter; // if this element cannot fit in the current row - if ( this.x !== 0 && item.size.outerWidth + this.x > this.isotope.size.innerWidth ) { + var containerWidth = this.isotope.size.innerWidth + this.gutter; + if ( this.x !== 0 && itemWidth + this.x > containerWidth ) { this.x = 0; this.y = this.maxY; } @@ -27,7 +30,7 @@ FitRows.prototype._getItemLayoutPosition = function( item ) { }; this.maxY = Math.max( this.maxY, this.y + item.size.outerHeight ); - this.x += item.size.outerWidth; + this.x += itemWidth; return position; }; diff --git a/sandbox/fitrows.html b/sandbox/fitrows.html new file mode 100644 index 0000000..0ba54b2 --- /dev/null +++ b/sandbox/fitrows.html @@ -0,0 +1,135 @@ + + + + + + fitRows + + + + + + + + +

fitRows

+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + diff --git a/test/fit-rows.js b/test/fit-rows.js new file mode 100644 index 0000000..d299436 --- /dev/null +++ b/test/fit-rows.js @@ -0,0 +1,43 @@ +( function() { + +'use strict'; + +test( 'fitRows', function() { + + var iso = new Isotope( '#fitrows-gutter', { + layoutMode: 'fitRows', + itemSelector: '.item', + transitionDuration: 0 + }); + + function checkPosition( item, x, y ) { + var elem = item.element; + var left = parseInt( elem.style.left, 10 ); + var top = parseInt( elem.style.top, 10 ); + deepEqual( [ left, top ], [ x, y ], 'item position ' + x + ', ' + y ); + } + + checkPosition( iso.items[0], 0, 0 ); + checkPosition( iso.items[1], 60, 0 ); + + // check gutter + iso.options.fitRows = { + gutter: 10 + }; + iso.layout(); + + checkPosition( iso.items[0], 0, 0 ); + checkPosition( iso.items[1], 70, 0 ); + + // check gutter, with element sizing + iso.options.fitRows = { + gutter: '.gutter-sizer' + }; + iso.layout(); + + checkPosition( iso.items[0], 0, 0 ); + checkPosition( iso.items[1], 78, 0 ); + +}); + +})(); diff --git a/test/index.html b/test/index.html index a6803ea..a54bd85 100644 --- a/test/index.html +++ b/test/index.html @@ -21,7 +21,7 @@ - + @@ -39,6 +39,7 @@ + @@ -121,5 +122,15 @@
+

fitRows

+ +
+
+
+
+
+
+
+ diff --git a/test/tests.css b/test/tests.css index c70d409..c5b882c 100644 --- a/test/tests.css +++ b/test/tests.css @@ -74,3 +74,9 @@ body { right: 25px; top: 15px; } + +/* ---- fit rows ---- */ + +#fitrows-gutter .gutter-sizer { + width: 10%; +}