Fix LayoutMode._getMeasurement and Masonry.measureColumns

need this.items to match this.filteredItems Fixes #593 tag v2.0.0-beta.5
11 years ago · 36d1684965
7 changed files with 69 additions and 3 deletions
--- 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",
--- 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
 */
--- 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' );
  };
--- 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;
 }
--- a/test/index.html
+++ b/test/index.html
@ -36,6 +36,7 @@
 <script src="filtering.js"></script>
 <script src="layout-complete.js"></script>
 <script src="get-segment-size.js"></script>
+<script src="masonry-measure-columns.js"></script>

 </head>
 <body>
@ -99,5 +100,14 @@
    <div class="item"></div>
  </div>

+  <h2>Masonry</h2>
+
+  <div id="masonry-measure-columns" class="container">
+    <div class="grid-sizer"></div>
+    <div class="item a">a</div>
+    <div class="item b">b</div>
+    <div class="item c">c</div>
+  </div>
+
 </body>
 </html>
--- a/test/masonry-measure-columns.js
+++ 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' );
+
+});
+
+})();
--- 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;
+}