masonry stamp working;

facade methods for LayoutMode layout, getSize & getElementOffset

examples/masonry.html

@@ -38,8 +38,8 @@
 
 <div id="container">
 
-  <!-- <div class="stamp stamp1"></div>
-  <div class="stamp stamp2"></div> -->
+  <div class="stamp stamp1"></div>
+  <div class="stamp stamp2"></div>
 
   <div class="element transition metal   " data-symbol="Hg" data-category="transition">
     <p class="number">80</p>
@@ -175,7 +175,7 @@ docReady( function() {
       columnWidth: 90
     },
     // itemSelector: '.element',
-    // stamp: '.stamp',
+    stamp: '.stamp',
     getSortData: {
 
       number: '.number parseInt',

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() {

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;

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
   );
 }