Skip to content

Commit 737e832

Browse files
committed
πŸ‘· 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
1 parent c34c5cb commit 737e832

File tree

5 files changed

+77
-38
lines changed

5 files changed

+77
-38
lines changed

β€Ždist/isotope.pkgd.jsβ€Ž

Lines changed: 65 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*!
2-
* Isotope PACKAGED v3.0.3
2+
* Isotope PACKAGED v3.0.4
33
*
44
* Licensed GPLv3 for open source use
55
* or Isotope Commercial License for commercial use
@@ -527,7 +527,7 @@ return getSize;
527527
}));
528528

529529
/**
530-
* Fizzy UI utils v2.0.4
530+
* Fizzy UI utils v2.0.5
531531
* MIT license
532532
*/
533533

@@ -613,7 +613,7 @@ utils.removeFrom = function( ary, obj ) {
613613
// ----- getParent ----- //
614614

615615
utils.getParent = function( elem, selector ) {
616-
while ( elem != document.body ) {
616+
while ( elem.parentNode && elem != document.body ) {
617617
elem = elem.parentNode;
618618
if ( matchesSelector( elem, selector ) ) {
619619
return elem;
@@ -2496,7 +2496,7 @@ return Item;
24962496
}));
24972497

24982498
/*!
2499-
* Masonry v4.1.1
2499+
* Masonry v4.2.0
25002500
* Cascading grid layout library
25012501
* http://masonry.desandro.com
25022502
* MIT License
@@ -2538,7 +2538,9 @@ return Item;
25382538
// isFitWidth -> fitWidth
25392539
Masonry.compatOptions.fitWidth = 'isFitWidth';
25402540

2541-
Masonry.prototype._resetLayout = function() {
2541+
var proto = Masonry.prototype;
2542+
2543+
proto._resetLayout = function() {
25422544
this.getSize();
25432545
this._getMeasurement( 'columnWidth', 'outerWidth' );
25442546
this._getMeasurement( 'gutter', 'outerWidth' );
@@ -2551,9 +2553,10 @@ return Item;
25512553
}
25522554

25532555
this.maxY = 0;
2556+
this.horizontalColIndex = 0;
25542557
};
25552558

2556-
Masonry.prototype.measureColumns = function() {
2559+
proto.measureColumns = function() {
25572560
this.getContainerWidth();
25582561
// if columnWidth is 0, default to outerWidth of first item
25592562
if ( !this.columnWidth ) {
@@ -2578,7 +2581,7 @@ return Item;
25782581
this.cols = Math.max( cols, 1 );
25792582
};
25802583

2581-
Masonry.prototype.getContainerWidth = function() {
2584+
proto.getContainerWidth = function() {
25822585
// container is parent if fit width
25832586
var isFitWidth = this._getOption('fitWidth');
25842587
var container = isFitWidth ? this.element.parentNode : this.element;
@@ -2588,41 +2591,49 @@ return Item;
25882591
this.containerWidth = size && size.innerWidth;
25892592
};
25902593

2591-
Masonry.prototype._getItemLayoutPosition = function( item ) {
2594+
proto._getItemLayoutPosition = function( item ) {
25922595
item.getSize();
25932596
// how many columns does this brick span
25942597
var remainder = item.size.outerWidth % this.columnWidth;
25952598
var mathMethod = remainder && remainder < 1 ? 'round' : 'ceil';
25962599
// round if off by 1 pixel, otherwise use ceil
25972600
var colSpan = Math[ mathMethod ]( item.size.outerWidth / this.columnWidth );
25982601
colSpan = Math.min( colSpan, this.cols );
2599-
2600-
var colGroup = this._getColGroup( colSpan );
2601-
// get the minimum Y value from the columns
2602-
var minimumY = Math.min.apply( Math, colGroup );
2603-
var shortColIndex = colGroup.indexOf( minimumY );
2604-
2602+
// use horizontal or top column position
2603+
var colPosMethod = this.options.horizontalOrder ?
2604+
'_getHorizontalColPosition' : '_getTopColPosition';
2605+
var colPosition = this[ colPosMethod ]( colSpan, item );
26052606
// position the brick
26062607
var position = {
2607-
x: this.columnWidth * shortColIndex,
2608-
y: minimumY
2608+
x: this.columnWidth * colPosition.col,
2609+
y: colPosition.y
26092610
};
2610-
26112611
// apply setHeight to necessary columns
2612-
var setHeight = minimumY + item.size.outerHeight;
2613-
var setSpan = this.cols + 1 - colGroup.length;
2614-
for ( var i = 0; i < setSpan; i++ ) {
2615-
this.colYs[ shortColIndex + i ] = setHeight;
2612+
var setHeight = colPosition.y + item.size.outerHeight;
2613+
var setMax = colSpan + colPosition.col;
2614+
for ( var i = colPosition.col; i < setMax; i++ ) {
2615+
this.colYs[i] = setHeight;
26162616
}
26172617

26182618
return position;
26192619
};
26202620

2621+
proto._getTopColPosition = function( colSpan ) {
2622+
var colGroup = this._getTopColGroup( colSpan );
2623+
// get the minimum Y value from the columns
2624+
var minimumY = Math.min.apply( Math, colGroup );
2625+
2626+
return {
2627+
col: colGroup.indexOf( minimumY ),
2628+
y: minimumY,
2629+
};
2630+
};
2631+
26212632
/**
26222633
* @param {Number} colSpan - number of columns the element spans
26232634
* @returns {Array} colGroup
26242635
*/
2625-
Masonry.prototype._getColGroup = function( colSpan ) {
2636+
proto._getTopColGroup = function( colSpan ) {
26262637
if ( colSpan < 2 ) {
26272638
// if brick spans only one column, use all the column Ys
26282639
return this.colYs;
@@ -2633,15 +2644,38 @@ return Item;
26332644
var groupCount = this.cols + 1 - colSpan;
26342645
// for each group potential horizontal position
26352646
for ( var i = 0; i < groupCount; i++ ) {
2636-
// make an array of colY values for that one group
2637-
var groupColYs = this.colYs.slice( i, i + colSpan );
2638-
// and get the max value of the array
2639-
colGroup[i] = Math.max.apply( Math, groupColYs );
2647+
colGroup[i] = this._getColGroupY( i, colSpan );
26402648
}
26412649
return colGroup;
26422650
};
26432651

2644-
Masonry.prototype._manageStamp = function( stamp ) {
2652+
proto._getColGroupY = function( col, colSpan ) {
2653+
if ( colSpan < 2 ) {
2654+
return this.colYs[ col ];
2655+
}
2656+
// make an array of colY values for that one group
2657+
var groupColYs = this.colYs.slice( col, col + colSpan );
2658+
// and get the max value of the array
2659+
return Math.max.apply( Math, groupColYs );
2660+
};
2661+
2662+
// get column position based on horizontal index. #873
2663+
proto._getHorizontalColPosition = function( colSpan, item ) {
2664+
var col = this.horizontalColIndex % this.cols;
2665+
var isOver = colSpan > 1 && col + colSpan > this.cols;
2666+
// shift to next row if item can't fit on current row
2667+
col = isOver ? 0 : col;
2668+
// don't let zero-size items take up space
2669+
var hasSize = item.size.outerWidth && item.size.outerHeight;
2670+
this.horizontalColIndex = hasSize ? col + colSpan : this.horizontalColIndex;
2671+
2672+
return {
2673+
col: col,
2674+
y: this._getColGroupY( col, colSpan ),
2675+
};
2676+
};
2677+
2678+
proto._manageStamp = function( stamp ) {
26452679
var stampSize = getSize( stamp );
26462680
var offset = this._getElementOffset( stamp );
26472681
// get the columns that this stamp affects
@@ -2664,7 +2698,7 @@ return Item;
26642698
}
26652699
};
26662700

2667-
Masonry.prototype._getContainerSize = function() {
2701+
proto._getContainerSize = function() {
26682702
this.maxY = Math.max.apply( Math, this.colYs );
26692703
var size = {
26702704
height: this.maxY
@@ -2677,7 +2711,7 @@ return Item;
26772711
return size;
26782712
};
26792713

2680-
Masonry.prototype._getContainerFitWidth = function() {
2714+
proto._getContainerFitWidth = function() {
26812715
var unusedCols = 0;
26822716
// count unused columns
26832717
var i = this.cols;
@@ -2691,7 +2725,7 @@ return Item;
26912725
return ( this.cols - unusedCols ) * this.columnWidth - this.gutter;
26922726
};
26932727

2694-
Masonry.prototype.needsResizeLayout = function() {
2728+
proto.needsResizeLayout = function() {
26952729
var previousWidth = this.containerWidth;
26962730
this.getContainerWidth();
26972731
return previousWidth != this.containerWidth;
@@ -2901,7 +2935,7 @@ return Vertical;
29012935
}));
29022936

29032937
/*!
2904-
* Isotope v3.0.3
2938+
* Isotope v3.0.4
29052939
*
29062940
* Licensed GPLv3 for open source use
29072941
* or Isotope Commercial License for commercial use

β€Ždist/isotope.pkgd.min.jsβ€Ž

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

β€Žjs/isotope.jsβ€Ž

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*!
2-
* Isotope v3.0.3
2+
* Isotope v3.0.4
33
*
44
* Licensed GPLv3 for open source use
55
* or Isotope Commercial License for commercial use

β€Žpackage.jsonβ€Ž

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,17 @@
11
{
22
"name": "isotope-layout",
3-
"version": "3.0.3",
3+
"version": "3.0.4",
44
"description": "Filter and sort magical layouts",
55
"main": "js/isotope.js",
6+
"files": [
7+
"js",
8+
"dist"
9+
],
610
"dependencies": {
711
"desandro-matches-selector": "^2.0.0",
812
"fizzy-ui-utils": "^2.0.4",
913
"get-size": "^2.0.0",
10-
"masonry-layout": "^4.0.0",
14+
"masonry-layout": "^4.1.0",
1115
"outlayer": "^2.1.0"
1216
},
1317
"devDependencies": {

β€Žsandbox/masonry.htmlβ€Ž

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -167,7 +167,8 @@ <h2 class="name">Actinium</h2>
167167
// filter: '.metal',
168168
layoutMode: 'masonry',
169169
masonry: {
170-
columnWidth: 90
170+
columnWidth: 90,
171+
// horizontalOrder: true,
171172
},
172173
itemSelector: '.element',
173174
stamp: '.stamp',

0 commit comments

Comments
Β (0)