👷 build v3.0.4 for masonry horizontalOrder

🔔 update Masonry v4.2.0 with horizontalOrder. For #1130 ⬆️ Update fizzy-ui-utils to v2.0.5 📦 add package.json files
metafizzy · Apr 21, 2017 · 737e832 · 737e832
1 parent c34c5cb
commit 737e832
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 38 deletions.
diff --git a/dist/isotope.pkgd.js b/dist/isotope.pkgd.js
@@ -1,5 +1,5 @@
 /*!
- * Isotope PACKAGED v3.0.3
+ * Isotope PACKAGED v3.0.4
  *
  * Licensed GPLv3 for open source use
  * or Isotope Commercial License for commercial use
@@ -527,7 +527,7 @@ return getSize;
 }));
 
 /**
- * Fizzy UI utils v2.0.4
+ * Fizzy UI utils v2.0.5
  * MIT license
  */
 
@@ -613,7 +613,7 @@ utils.removeFrom = function( ary, obj ) {
 // ----- getParent ----- //
 
 utils.getParent = function( elem, selector ) {
-  while ( elem != document.body ) {
+  while ( elem.parentNode && elem != document.body ) {
     elem = elem.parentNode;
     if ( matchesSelector( elem, selector ) ) {
       return elem;
@@ -2496,7 +2496,7 @@ return Item;
 }));
 
 /*!
- * Masonry v4.1.1
+ * Masonry v4.2.0
  * Cascading grid layout library
  * http://masonry.desandro.com
  * MIT License
@@ -2538,7 +2538,9 @@ return Item;
   // isFitWidth -> fitWidth
   Masonry.compatOptions.fitWidth = 'isFitWidth';
 
-  Masonry.prototype._resetLayout = function() {
+  var proto = Masonry.prototype;
+
+  proto._resetLayout = function() {
     this.getSize();
     this._getMeasurement( 'columnWidth', 'outerWidth' );
     this._getMeasurement( 'gutter', 'outerWidth' );
@@ -2551,9 +2553,10 @@ return Item;
     }
 
     this.maxY = 0;
+    this.horizontalColIndex = 0;
   };
 
-  Masonry.prototype.measureColumns = function() {
+  proto.measureColumns = function() {
     this.getContainerWidth();
     // if columnWidth is 0, default to outerWidth of first item
     if ( !this.columnWidth ) {
@@ -2578,7 +2581,7 @@ return Item;
     this.cols = Math.max( cols, 1 );
   };
 
-  Masonry.prototype.getContainerWidth = function() {
+  proto.getContainerWidth = function() {
     // container is parent if fit width
     var isFitWidth = this._getOption('fitWidth');
     var container = isFitWidth ? this.element.parentNode : this.element;
@@ -2588,41 +2591,49 @@ return Item;
     this.containerWidth = size && size.innerWidth;
   };
 
-  Masonry.prototype._getItemLayoutPosition = function( item ) {
+  proto._getItemLayoutPosition = function( item ) {
     item.getSize();
     // how many columns does this brick span
     var remainder = item.size.outerWidth % this.columnWidth;
     var mathMethod = remainder && remainder < 1 ? 'round' : 'ceil';
     // round if off by 1 pixel, otherwise use ceil
     var colSpan = Math[ mathMethod ]( item.size.outerWidth / this.columnWidth );
     colSpan = Math.min( colSpan, this.cols );
-
-    var colGroup = this._getColGroup( colSpan );
-    // get the minimum Y value from the columns
-    var minimumY = Math.min.apply( Math, colGroup );
-    var shortColIndex = colGroup.indexOf( minimumY );
-
+    // use horizontal or top column position
+    var colPosMethod = this.options.horizontalOrder ?
+      '_getHorizontalColPosition' : '_getTopColPosition';
+    var colPosition = this[ colPosMethod ]( colSpan, item );
     // position the brick
     var position = {
-      x: this.columnWidth * shortColIndex,
-      y: minimumY
+      x: this.columnWidth * colPosition.col,
+      y: colPosition.y
     };
-
     // apply setHeight to necessary columns
-    var setHeight = minimumY + item.size.outerHeight;
-    var setSpan = this.cols + 1 - colGroup.length;
-    for ( var i = 0; i < setSpan; i++ ) {
-      this.colYs[ shortColIndex + i ] = setHeight;
+    var setHeight = colPosition.y + item.size.outerHeight;
+    var setMax = colSpan + colPosition.col;
+    for ( var i = colPosition.col; i < setMax; i++ ) {
+      this.colYs[i] = setHeight;
     }
 
     return position;
   };
 
+  proto._getTopColPosition = function( colSpan ) {
+    var colGroup = this._getTopColGroup( colSpan );
+    // get the minimum Y value from the columns
+    var minimumY = Math.min.apply( Math, colGroup );
+
+    return {
+      col: colGroup.indexOf( minimumY ),
+      y: minimumY,
+    };
+  };
+
   /**
    * @param {Number} colSpan - number of columns the element spans
    * @returns {Array} colGroup
    */
-  Masonry.prototype._getColGroup = function( colSpan ) {
+  proto._getTopColGroup = function( colSpan ) {
     if ( colSpan < 2 ) {
       // if brick spans only one column, use all the column Ys
       return this.colYs;
@@ -2633,15 +2644,38 @@ return Item;
     var groupCount = this.cols + 1 - colSpan;
     // for each group potential horizontal position
     for ( var i = 0; i < groupCount; i++ ) {
-      // make an array of colY values for that one group
-      var groupColYs = this.colYs.slice( i, i + colSpan );
-      // and get the max value of the array
-      colGroup[i] = Math.max.apply( Math, groupColYs );
+      colGroup[i] = this._getColGroupY( i, colSpan );
     }
     return colGroup;
   };
 
-  Masonry.prototype._manageStamp = function( stamp ) {
+  proto._getColGroupY = function( col, colSpan ) {
+    if ( colSpan < 2 ) {
+      return this.colYs[ col ];
+    }
+    // make an array of colY values for that one group
+    var groupColYs = this.colYs.slice( col, col + colSpan );
+    // and get the max value of the array
+    return Math.max.apply( Math, groupColYs );
+  };
+
+  // get column position based on horizontal index. #873
+  proto._getHorizontalColPosition = function( colSpan, item ) {
+    var col = this.horizontalColIndex % this.cols;
+    var isOver = colSpan > 1 && col + colSpan > this.cols;
+    // shift to next row if item can't fit on current row
+    col = isOver ? 0 : col;
+    // don't let zero-size items take up space
+    var hasSize = item.size.outerWidth && item.size.outerHeight;
+    this.horizontalColIndex = hasSize ? col + colSpan : this.horizontalColIndex;
+
+    return {
+      col: col,
+      y: this._getColGroupY( col, colSpan ),
+    };
+  };
+
+  proto._manageStamp = function( stamp ) {
     var stampSize = getSize( stamp );
     var offset = this._getElementOffset( stamp );
     // get the columns that this stamp affects
@@ -2664,7 +2698,7 @@ return Item;
     }
   };
 
-  Masonry.prototype._getContainerSize = function() {
+  proto._getContainerSize = function() {
     this.maxY = Math.max.apply( Math, this.colYs );
     var size = {
       height: this.maxY
@@ -2677,7 +2711,7 @@ return Item;
     return size;
   };
 
-  Masonry.prototype._getContainerFitWidth = function() {
+  proto._getContainerFitWidth = function() {
     var unusedCols = 0;
     // count unused columns
     var i = this.cols;
@@ -2691,7 +2725,7 @@ return Item;
     return ( this.cols - unusedCols ) * this.columnWidth - this.gutter;
   };
 
-  Masonry.prototype.needsResizeLayout = function() {
+  proto.needsResizeLayout = function() {
     var previousWidth = this.containerWidth;
     this.getContainerWidth();
     return previousWidth != this.containerWidth;
@@ -2901,7 +2935,7 @@ return Vertical;
 }));
 
 /*!
- * Isotope v3.0.3
+ * Isotope v3.0.4
  *
  * Licensed GPLv3 for open source use
  * or Isotope Commercial License for commercial use

diff --git a/dist/isotope.pkgd.min.js b/dist/isotope.pkgd.min.js
diff --git a/js/isotope.js b/js/isotope.js
@@ -1,5 +1,5 @@
 /*!
- * Isotope v3.0.3
+ * Isotope v3.0.4
  *
  * Licensed GPLv3 for open source use
  * or Isotope Commercial License for commercial use

diff --git a/package.json b/package.json
@@ -1,13 +1,17 @@
 {
   "name": "isotope-layout",
-  "version": "3.0.3",
+  "version": "3.0.4",
   "description": "Filter and sort magical layouts",
   "main": "js/isotope.js",
+  "files": [
+    "js",
+    "dist"
+  ],
   "dependencies": {
     "desandro-matches-selector": "^2.0.0",
     "fizzy-ui-utils": "^2.0.4",
     "get-size": "^2.0.0",
-    "masonry-layout": "^4.0.0",
+    "masonry-layout": "^4.1.0",
     "outlayer": "^2.1.0"
   },
   "devDependencies": {

diff --git a/sandbox/masonry.html b/sandbox/masonry.html
@@ -167,7 +167,8 @@ <h2 class="name">Actinium</h2>
   // filter: '.metal',
   layoutMode: 'masonry',
   masonry: {
-    columnWidth: 90
+    columnWidth: 90,
+    // horizontalOrder: true,
   },
   itemSelector: '.element',
   stamp: '.stamp',