Skip to content

Commit 6c47360

Browse files
SpopeSpope
committed
Merging lihaosen-222-develop to fix loss of gutter when switching to 1 column.
1 parent 75fb50e commit 6c47360

3 files changed

Lines changed: 44 additions & 32 deletions

File tree

‎build/minimasonry.esm.js‎

Lines changed: 23 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ var MiniMasonry = function(conf) {
55
this._count = null;
66
this._width = 0;
77
this._removeListener = null;
8+
this._currentGutterX = null;
9+
this._currentGutterY = null;
810

911
this._resizeTimeout = null,
1012

@@ -32,10 +34,16 @@ MiniMasonry.prototype.init = function(conf) {
3234
this.conf[i] = conf[i];
3335
}
3436
}
37+
3538
if (this.conf.gutterX == null || this.conf.gutterY == null) {
3639
this.conf.gutterX = this.conf.gutterY = this.conf.gutter;
3740
}
3841

42+
this._currentGutterX = this.conf.gutterX;
43+
this._currentGutterY = this.conf.gutterY;
44+
45+
console.log(this._currentGutterX);
46+
3947
this._container = typeof this.conf.container == 'object' && this.conf.container.nodeName ?
4048
this.conf.container :
4149
document.querySelector(this.conf.container);
@@ -66,31 +74,31 @@ MiniMasonry.prototype.reset = function() {
6674

6775
if (this.getCount() == 1) {
6876
// Set ultimate gutter when only one column is displayed
69-
this.conf.gutterX = this.conf.ultimateGutter;
77+
this._currentGutterX = this.conf.ultimateGutter;
7078
// As gutters are reduced, two column may fit, forcing to 1
7179
this._count = 1;
72-
}
73-
74-
if (this._width < (this.conf.baseWidth + (2 * this.conf.gutterX))) {
80+
} else if (this._width < (this.conf.baseWidth + (2 * this._currentGutterX))) {
7581
// Remove gutter when screen is to low
76-
this.conf.gutterX = 0;
82+
this._currentGutterX = 0;
83+
} else {
84+
this._currentGutterX = this.conf.gutterX;
7785
}
7886
};
7987

8088
MiniMasonry.prototype.getCount = function() {
8189
if (this.conf.surroundingGutter) {
82-
return Math.floor((this._width - this.conf.gutterX) / (this.conf.baseWidth + this.conf.gutterX));
90+
return Math.floor((this._width - this._currentGutterX) / (this.conf.baseWidth + this._currentGutterX));
8391
}
8492

85-
return Math.floor((this._width + this.conf.gutterX) / (this.conf.baseWidth + this.conf.gutterX));
93+
return Math.floor((this._width + this._currentGutterX) / (this.conf.baseWidth + this._currentGutterX));
8694
};
8795

8896
MiniMasonry.prototype.computeWidth = function() {
8997
var width;
9098
if (this.conf.surroundingGutter) {
91-
width = ((this._width - this.conf.gutterX) / this._count) - this.conf.gutterX;
99+
width = ((this._width - this._currentGutterX) / this._count) - this._currentGutterX;
92100
} else {
93-
width = ((this._width + this.conf.gutterX) / this._count) - this.conf.gutterX;
101+
width = ((this._width + this._currentGutterX) / this._count) - this._currentGutterX;
94102
}
95103
width = Number.parseFloat(width.toFixed(2));
96104

@@ -125,13 +133,13 @@ MiniMasonry.prototype.layout = function() {
125133

126134
var startX;
127135
if (this.conf.direction == 'ltr') {
128-
startX = this.conf.surroundingGutter ? this.conf.gutterX : 0;
136+
startX = this.conf.surroundingGutter ? this._currentGutterX : 0;
129137
} else {
130-
startX = this._width - (this.conf.surroundingGutter ? this.conf.gutterX : 0);
138+
startX = this._width - (this.conf.surroundingGutter ? this._currentGutterX : 0);
131139
}
132140
if (this._count > this._sizes.length) {
133141
//If more columns than children
134-
var occupiedSpace = (this._sizes.length * (colWidth + this.conf.gutterX)) - this.conf.gutterX;
142+
var occupiedSpace = (this._sizes.length * (colWidth + this._currentGutterX)) - this._currentGutterX;
135143
if (this.conf.wedge === false) {
136144
if (this.conf.direction == 'ltr') {
137145
startX = ((this._width - occupiedSpace) / 2);
@@ -140,7 +148,7 @@ MiniMasonry.prototype.layout = function() {
140148
}
141149
} else {
142150
if (this.conf.direction == 'ltr') ; else {
143-
startX = this._width - this.conf.gutterX;
151+
startX = this._width - this._currentGutterX;
144152
}
145153
}
146154
}
@@ -151,7 +159,7 @@ MiniMasonry.prototype.layout = function() {
151159

152160
var childrenGutter = 0;
153161
if (this.conf.surroundingGutter || nextColumn != this._columns.length) {
154-
childrenGutter = this.conf.gutterX;
162+
childrenGutter = this._currentGutterX;
155163
}
156164
var x;
157165
if (this.conf.direction == 'ltr') {
@@ -167,7 +175,7 @@ MiniMasonry.prototype.layout = function() {
167175
this._columns[nextColumn] += this._sizes[index] + (this._count > 1 ? this.conf.gutterY : this.conf.ultimateGutter);//margin-bottom
168176
}
169177

170-
this._container.style.height = (this._columns[this.getLongest()] - this.conf.gutterY) + 'px';
178+
this._container.style.height = (this._columns[this.getLongest()] - this._currentGutterY) + 'px';
171179
};
172180

173181
MiniMasonry.prototype.getNextColumn = function(index) {

‎build/minimasonry.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/minimasonry.js‎

Lines changed: 20 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@ var MiniMasonry = function(conf) {
55
this._count = null;
66
this._width = 0;
77
this._removeListener = null;
8-
this._savedGutterX = null;
8+
this._currentGutterX = null;
9+
this._currentGutterY = null;
910

1011
this._resizeTimeout = null,
1112

@@ -33,9 +34,12 @@ MiniMasonry.prototype.init = function(conf) {
3334
this.conf[i] = conf[i];
3435
}
3536
}
37+
3638
if (this.conf.gutterX == null || this.conf.gutterY == null) {
37-
this._savedGutterX = this.conf.gutterX = this.conf.gutterY = this.conf.gutter;
39+
this.conf.gutterX = this.conf.gutterY = this.conf.gutter;
3840
}
41+
this._currentGutterX = this.conf.gutterX;
42+
this._currentGutterY = this.conf.gutterY;
3943

4044
this._container = typeof this.conf.container == 'object' && this.conf.container.nodeName ?
4145
this.conf.container :
@@ -67,31 +71,31 @@ MiniMasonry.prototype.reset = function() {
6771

6872
if (this.getCount() == 1) {
6973
// Set ultimate gutter when only one column is displayed
70-
this.conf.gutterX = this.conf.ultimateGutter;
74+
this._currentGutterX = this.conf.ultimateGutter;
7175
// As gutters are reduced, two column may fit, forcing to 1
7276
this._count = 1;
73-
} else if (this._width < (this.conf.baseWidth + (2 * this.conf.gutterX))) {
77+
} else if (this._width < (this.conf.baseWidth + (2 * this._currentGutterX))) {
7478
// Remove gutter when screen is to low
75-
this.conf.gutterX = 0;
79+
this._currentGutterX = 0;
7680
} else {
77-
this.conf.gutterX = this._savedGutterX
81+
this._currentGutterX = this.conf.gutterX;
7882
}
7983
};
8084

8185
MiniMasonry.prototype.getCount = function() {
8286
if (this.conf.surroundingGutter) {
83-
return Math.floor((this._width - this.conf.gutterX) / (this.conf.baseWidth + this.conf.gutterX));
87+
return Math.floor((this._width - this._currentGutterX) / (this.conf.baseWidth + this._currentGutterX));
8488
}
8589

86-
return Math.floor((this._width + this.conf.gutterX) / (this.conf.baseWidth + this.conf.gutterX));
90+
return Math.floor((this._width + this._currentGutterX) / (this.conf.baseWidth + this._currentGutterX));
8791
}
8892

8993
MiniMasonry.prototype.computeWidth = function() {
9094
var width;
9195
if (this.conf.surroundingGutter) {
92-
width = ((this._width - this.conf.gutterX) / this._count) - this.conf.gutterX;
96+
width = ((this._width - this._currentGutterX) / this._count) - this._currentGutterX;
9397
} else {
94-
width = ((this._width + this.conf.gutterX) / this._count) - this.conf.gutterX;
98+
width = ((this._width + this._currentGutterX) / this._count) - this._currentGutterX;
9599
}
96100
width = Number.parseFloat(width.toFixed(2));
97101

@@ -126,13 +130,13 @@ MiniMasonry.prototype.layout = function() {
126130

127131
var startX;
128132
if (this.conf.direction == 'ltr') {
129-
startX = this.conf.surroundingGutter ? this.conf.gutterX : 0;
133+
startX = this.conf.surroundingGutter ? this._currentGutterX : 0;
130134
} else {
131-
startX = this._width - (this.conf.surroundingGutter ? this.conf.gutterX : 0);
135+
startX = this._width - (this.conf.surroundingGutter ? this._currentGutterX : 0);
132136
}
133137
if (this._count > this._sizes.length) {
134138
//If more columns than children
135-
var occupiedSpace = (this._sizes.length * (colWidth + this.conf.gutterX)) - this.conf.gutterX;
139+
var occupiedSpace = (this._sizes.length * (colWidth + this._currentGutterX)) - this._currentGutterX;
136140
if (this.conf.wedge === false) {
137141
if (this.conf.direction == 'ltr') {
138142
startX = ((this._width - occupiedSpace) / 2);
@@ -143,7 +147,7 @@ MiniMasonry.prototype.layout = function() {
143147
if (this.conf.direction == 'ltr') {
144148
//
145149
} else {
146-
startX = this._width - this.conf.gutterX;
150+
startX = this._width - this._currentGutterX;
147151
}
148152
}
149153
}
@@ -154,7 +158,7 @@ MiniMasonry.prototype.layout = function() {
154158

155159
var childrenGutter = 0;
156160
if (this.conf.surroundingGutter || nextColumn != this._columns.length) {
157-
childrenGutter = this.conf.gutterX;
161+
childrenGutter = this._currentGutterX;
158162
}
159163
var x;
160164
if (this.conf.direction == 'ltr') {
@@ -170,7 +174,7 @@ MiniMasonry.prototype.layout = function() {
170174
this._columns[nextColumn] += this._sizes[index] + (this._count > 1 ? this.conf.gutterY : this.conf.ultimateGutter);//margin-bottom
171175
}
172176

173-
this._container.style.height = (this._columns[this.getLongest()] - this.conf.gutterY) + 'px';
177+
this._container.style.height = (this._columns[this.getLongest()] - this._currentGutterY) + 'px';
174178
};
175179

176180
MiniMasonry.prototype.getNextColumn = function(index) {

0 commit comments

Comments
 (0)