Skip to content

Commit

Permalink
πŸ‘· build v3.0.4 for masonry horizontalOrder
Browse files Browse the repository at this point in the history
πŸ”” update Masonry v4.2.0 with horizontalOrder. For #1130
⬆️ Update fizzy-ui-utils to v2.0.5
πŸ“¦ add package.json files
  • Loading branch information
desandro committed Apr 21, 2017
1 parent c34c5cb commit 737e832
Show file tree
Hide file tree
Showing 5 changed files with 77 additions and 38 deletions.
96 changes: 65 additions & 31 deletions dist/isotope.pkgd.js
Original file line number Diff line number Diff line change
@@ -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
Expand Down Expand Up @@ -527,7 +527,7 @@ return getSize;
}));

/**
* Fizzy UI utils v2.0.4
* Fizzy UI utils v2.0.5
* MIT license
*/

Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -2496,7 +2496,7 @@ return Item;
}));

/*!
* Masonry v4.1.1
* Masonry v4.2.0
* Cascading grid layout library
* http://masonry.desandro.com
* MIT License
Expand Down Expand Up @@ -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' );
Expand All @@ -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 ) {
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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
Expand Down
6 changes: 3 additions & 3 deletions dist/isotope.pkgd.min.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion js/isotope.js
Original file line number Diff line number Diff line change
@@ -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
Expand Down
8 changes: 6 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
@@ -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": {
Expand Down
3 changes: 2 additions & 1 deletion sandbox/masonry.html
Original file line number Diff line number Diff line change
Expand Up @@ -167,7 +167,8 @@ <h2 class="name">Actinium</h2>
// filter: '.metal',
layoutMode: 'masonry',
masonry: {
columnWidth: 90
columnWidth: 90,
// horizontalOrder: true,
},
itemSelector: '.element',
stamp: '.stamp',
Expand Down

0 comments on commit 737e832

Please sign in to comment.