playground
/
isotope
mirror of https://github.com/metafizzy/isotope
1
0
Fork 0
Code Issues Releases Activity
Browse Source

Fix LayoutMode._getMeasurement and Masonry.measureColumns 

need this.items to match this.filteredItems
Fixes #593
tag v2.0.0-beta.5
pull/726/head v2.0.0-beta.5
David DeSandro 11 years ago
parent
1ab21c8e1b
commit
36d1684965
7 changed files with 69 additions and 3 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      bower.json
  2. 2
      js/isotope.js
  3. 6
      js/layout-mode.js
  4. 9
      js/layout-modes/masonry.js
  5. 10
      test/index.html
  6. 39
      test/masonry-measure-columns.js
  7. 4
      test/tests.css

2
bower.json
Unescape View File

@ -1,6 +1,6 @@
{ {
"name": "isotope", "name": "isotope",
"version": "2.0.0-beta.4", "version": "2.0.0-beta.5",
"description": "Filter and sort magical layouts", "description": "Filter and sort magical layouts",
"main": [ "main": [
"js/item.js", "js/item.js",

2
js/isotope.js
Unescape View File

@ -1,5 +1,5 @@
/*! /*!
* Isotope v2.0.0-beta.4 * Isotope v2.0.0-beta.5
* Magical sorting and filtering layouts * Magical sorting and filtering layouts
* http://isotope.metafizzy.co * http://isotope.metafizzy.co
*/ */

6
js/layout-mode.js
Unescape View File

@ -12,7 +12,6 @@ function layoutModeDefinition( getSize, Outlayer ) {
// link properties // link properties
if ( isotope ) { if ( isotope ) {
this.options = isotope.options[ this.namespace ]; this.options = isotope.options[ this.namespace ];
this._getMeasurement = isotope._getMeasurement;
this.element = isotope.element; this.element = isotope.element;
this.items = isotope.filteredItems; this.items = isotope.filteredItems;
this.size = isotope.size; this.size = isotope.size;
@ -63,6 +62,11 @@ function layoutModeDefinition( getSize, Outlayer ) {
// ----- measurements ----- // // ----- measurements ----- //
LayoutMode.prototype._getMeasurement = function() {
console.log('getting measurement', this.options.columnWidth );
this.isotope._getMeasurement.apply( this, arguments );
};
LayoutMode.prototype.getColumnWidth = function() { LayoutMode.prototype.getColumnWidth = function() {
this.getSegmentSize( 'column', 'Width' ); this.getSegmentSize( 'column', 'Width' );
}; };

9
js/layout-modes/masonry.js
Unescape View File

@ -28,6 +28,7 @@ function masonryDefinition( LayoutMode, Masonry ) {
// save on to these methods // save on to these methods
var _getElementOffset = MasonryMode.prototype._getElementOffset; var _getElementOffset = MasonryMode.prototype._getElementOffset;
var layout = MasonryMode.prototype.layout; var layout = MasonryMode.prototype.layout;
var _getMeasurement = MasonryMode.prototype._getMeasurement;
// sub-class Masonry // sub-class Masonry
extend( MasonryMode.prototype, Masonry.prototype ); extend( MasonryMode.prototype, Masonry.prototype );
@ -35,6 +36,14 @@ function masonryDefinition( LayoutMode, Masonry ) {
// set back, as it was overwritten by Masonry // set back, as it was overwritten by Masonry
MasonryMode.prototype._getElementOffset = _getElementOffset; MasonryMode.prototype._getElementOffset = _getElementOffset;
MasonryMode.prototype.layout = layout; 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; return MasonryMode;
} }

10
test/index.html
Unescape View File

@ -36,6 +36,7 @@
<script src="filtering.js"></script> <script src="filtering.js"></script>
<script src="layout-complete.js"></script> <script src="layout-complete.js"></script>
<script src="get-segment-size.js"></script> <script src="get-segment-size.js"></script>
<script src="masonry-measure-columns.js"></script>
</head> </head>
<body> <body>
@ -99,5 +100,14 @@
<div class="item"></div> <div class="item"></div>
</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> </body>
</html> </html>

39
test/masonry-measure-columns.js
Unescape View File

@ -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' );
});
})();

4
test/tests.css
Unescape View File

@ -70,3 +70,7 @@ body {
height: 40px; height: 40px;
margin-bottom: 7px; margin-bottom: 7px;
} }
#masonry-measure-columns .grid-sizer {
width: 70px;
}

Write Preview
Loading…
Cancel
Save