From fdf69dd8b55e2c171b7003fe9cff755df0f06572 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Sun, 13 Oct 2013 14:39:53 -0400 Subject: [PATCH] masonry stamp working; facade methods for LayoutMode layout, getSize & getElementOffset --- examples/masonry.html | 6 ++--- isotope.js | 6 ++++- layout-mode.js | 17 +++++++++++++ layout-modes/masonry.js | 55 +++++++++-------------------------------- 4 files changed, 36 insertions(+), 48 deletions(-) diff --git a/examples/masonry.html b/examples/masonry.html index b87b8bb..5d11fb9 100644 --- a/examples/masonry.html +++ b/examples/masonry.html @@ -38,8 +38,8 @@
- +
+

80

@@ -175,7 +175,7 @@ docReady( function() { columnWidth: 90 }, // itemSelector: '.element', - // stamp: '.stamp', + stamp: '.stamp', getSortData: { number: '.number parseInt', diff --git a/isotope.js b/isotope.js index 63678b0..ab1912f 100644 --- a/isotope.js +++ b/isotope.js @@ -348,7 +348,11 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, layoutMode }; Isotope.prototype._manageStamp = function( stamp ) { - this._mode()._manageStamp( stamp ); + var mode = this._mode(); + // HACK copy over some options + mode.options.isOriginLeft = this.options.isOriginLeft; + mode.options.isOriginTop = this.options.isOriginTop; + mode._manageStamp( stamp ); }; Isotope.prototype._getContainerSize = function() { diff --git a/layout-mode.js b/layout-mode.js index 4987424..52ad7ec 100644 --- a/layout-mode.js +++ b/layout-mode.js @@ -59,10 +59,20 @@ layoutMode.create = function( namespace, options ) { return this._outlayerMethod( '_getContainerSize', arguments ); }; + LayoutMode.prototype._getElementOffset = function(/* elem */) { + return this._outlayerMethod( '_getElementOffset', arguments ); + }; + LayoutMode.prototype.resize = function() { this._outlayerMethod( 'resize', arguments ); }; + LayoutMode.prototype.layout = function() { + this._outlayerMethod( 'layout', arguments ); + }; + + // ----- ----- // + // for horizontal layout modes, check vertical size LayoutMode.prototype.resizeVertical = function() { // don't trigger if size did not change @@ -110,6 +120,13 @@ layoutMode.create = function( namespace, options ) { return firstItem && firstItem.element && getSize( firstItem.element ); }; + // ----- methods that should reference isotope ----- // + + LayoutMode.prototype.getSize = function() { + this.isotope.getSize(); + this.size = this.isotope.size; + }; + // ----- ----- // return LayoutMode; diff --git a/layout-modes/masonry.js b/layout-modes/masonry.js index 298d3c3..ef0d9d2 100644 --- a/layout-modes/masonry.js +++ b/layout-modes/masonry.js @@ -21,51 +21,20 @@ function extend( a, b ) { // -------------------------- masonryDefinition -------------------------- // // used for AMD definition and requires -function masonryDefinition( layoutMode, Masonry, getSize ) { +function masonryDefinition( layoutMode, Masonry ) { // create an Outlayer layout class var MasonryMode = layoutMode.create('masonry'); - // sub-class Masonry - extend( MasonryMode.prototype, Masonry.prototype ); - - MasonryMode.prototype.getSize = function() { - this.isotope.getSize(); - this.size = this.isotope.size; - }; - MasonryMode.prototype._manageStamp = function( stamp ) { - var stampSize = getSize( stamp ); - var offset = this.isotope._getElementOffset( stamp ); - // get the columns that this stamp affects - var firstX = this.isotope.options.isOriginLeft ? offset.left : offset.right; - var lastX = firstX + stampSize.outerWidth; - var firstCol = Math.floor( firstX / this.columnWidth ); - firstCol = Math.max( 0, firstCol ); - var lastCol = Math.floor( lastX / this.columnWidth ); - lastCol = Math.min( this.cols - 1, lastCol ); - // set colYs to bottom of the stamp - var stampMaxY = ( this.isotope.options.isOriginTop ? offset.top : offset.bottom ) + - stampSize.outerHeight; - for ( var i = firstCol; i <= lastCol; i++ ) { - this.colYs[i] = Math.max( stampMaxY, this.colYs[i] ); - } - }; + // save on to these methods + var _getElementOffset = MasonryMode.prototype._getElementOffset; + var layout = MasonryMode.prototype.layout; - // debounced, layout on resize - // HEADS UP this overwrites Outlayer.resize - // Any changes in Outlayer.resize need to be manually added here - MasonryMode.prototype.resize = function() { - // don't trigger if size did not change - var container = this._getSizingContainer(); - var size = getSize( container ); - // check that this.size and size are there - // IE8 triggers resize on body size change, so they might not be - var hasSizes = this.size && size; - if ( hasSizes && size.innerWidth === this._containerWidth ) { - return; - } + // sub-class Masonry + extend( MasonryMode.prototype, Masonry.prototype ); - this.isotope.layout(); - }; + // set back, as it was overwritten by Masonry + MasonryMode.prototype._getElementOffset = _getElementOffset; + MasonryMode.prototype.layout = layout; return MasonryMode; } @@ -76,16 +45,14 @@ if ( typeof define === 'function' && define.amd ) { // AMD define( [ '../layout-mode', - 'masonry/masonry', - 'get-size/get-size' + 'masonry/masonry' ], masonryDefinition ); } else { // browser global masonryDefinition( window.Isotope.layoutMode, - window.Masonry, - window.getSize + window.Masonry ); }