diff --git a/bower.json b/bower.json index cd920f8..f3083e3 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "isotope", - "version": "2.0.0-beta.4", + "version": "2.0.0-beta.5", "description": "Filter and sort magical layouts", "main": [ "js/item.js", diff --git a/js/isotope.js b/js/isotope.js index 6083c13..a80316a 100644 --- a/js/isotope.js +++ b/js/isotope.js @@ -1,5 +1,5 @@ /*! - * Isotope v2.0.0-beta.4 + * Isotope v2.0.0-beta.5 * Magical sorting and filtering layouts * http://isotope.metafizzy.co */ diff --git a/js/layout-mode.js b/js/layout-mode.js index 73fa9a9..eecb6af 100644 --- a/js/layout-mode.js +++ b/js/layout-mode.js @@ -12,7 +12,6 @@ function layoutModeDefinition( getSize, Outlayer ) { // link properties if ( isotope ) { this.options = isotope.options[ this.namespace ]; - this._getMeasurement = isotope._getMeasurement; this.element = isotope.element; this.items = isotope.filteredItems; this.size = isotope.size; @@ -63,6 +62,11 @@ function layoutModeDefinition( getSize, Outlayer ) { // ----- measurements ----- // + LayoutMode.prototype._getMeasurement = function() { + console.log('getting measurement', this.options.columnWidth ); + this.isotope._getMeasurement.apply( this, arguments ); + }; + LayoutMode.prototype.getColumnWidth = function() { this.getSegmentSize( 'column', 'Width' ); }; diff --git a/js/layout-modes/masonry.js b/js/layout-modes/masonry.js index fed4eb2..8b88d4e 100644 --- a/js/layout-modes/masonry.js +++ b/js/layout-modes/masonry.js @@ -28,6 +28,7 @@ function masonryDefinition( LayoutMode, Masonry ) { // save on to these methods var _getElementOffset = MasonryMode.prototype._getElementOffset; var layout = MasonryMode.prototype.layout; + var _getMeasurement = MasonryMode.prototype._getMeasurement; // sub-class Masonry extend( MasonryMode.prototype, Masonry.prototype ); @@ -35,6 +36,14 @@ function masonryDefinition( LayoutMode, Masonry ) { // set back, as it was overwritten by Masonry MasonryMode.prototype._getElementOffset = _getElementOffset; MasonryMode.prototype.layout = layout; + MasonryMode.prototype._getMeasurement = _getMeasurement; + + var measureColumns = MasonryMode.prototype.measureColumns; + MasonryMode.prototype.measureColumns = function() { + // set items, used if measuring first item + this.items = this.isotope.filteredItems; + measureColumns.call( this ); + }; return MasonryMode; } diff --git a/test/index.html b/test/index.html index 11ac564..1adc798 100644 --- a/test/index.html +++ b/test/index.html @@ -36,6 +36,7 @@ + @@ -99,5 +100,14 @@
+

Masonry

+ +
+
+
a
+
b
+
c
+
+ diff --git a/test/masonry-measure-columns.js b/test/masonry-measure-columns.js new file mode 100644 index 0000000..7f1afcd --- /dev/null +++ b/test/masonry-measure-columns.js @@ -0,0 +1,39 @@ +( function() { + +'use strict'; + +test( 'Masonry.measureColumns', function() { + + var iso = new Isotope( '#masonry-measure-columns', { + itemSelector: '.item', + layoutMode: 'masonry', + transitionDuration: 0 + }); + + var msnryMode = iso.modes.masonry; + equal( msnryMode.columnWidth, 60, 'after layout, measured first element' ); + + iso.modes.masonry._getMeasurement( 'columnWidth', 'outerWidth' ); + equal( msnryMode.columnWidth, 0, '_getMeasurement, no option' ); + + iso.modes.masonry.measureColumns(); + equal( msnryMode.columnWidth, 60, 'measureColumns, no option' ); + + iso.arrange({ filter: '.c' }); + + iso.modes.masonry.measureColumns(); + equal( msnryMode.columnWidth, 60, 'measureColumns after filter first item, no option' ); + + iso.arrange({ + masonry: { columnWidth: 80 } + }); + equal( msnryMode.columnWidth, 80, '.arrange() masonry.columnWidth option set number' ); + + iso.arrange({ + masonry: { columnWidth: '.grid-sizer' } + }); + equal( msnryMode.columnWidth, 70, '.arrange() masonry.columnWidth option set selector string' ); + +}); + +})(); diff --git a/test/tests.css b/test/tests.css index b40dd19..9b86827 100644 --- a/test/tests.css +++ b/test/tests.css @@ -70,3 +70,7 @@ body { height: 40px; margin-bottom: 7px; } + +#masonry-measure-columns .grid-sizer { + width: 70px; +}