From 209919e8a7d59d89f079da552bd4e353bd33f91a Mon Sep 17 00:00:00 2001 From: Kim Martini <37541937+graphicfox@users.noreply.github.com> Date: Wed, 10 Feb 2021 11:12:06 +0100 Subject: [PATCH 1/3] Update minimasonry.js Add center to choose if single elements get centered. Fix gutter after reset on resize. --- src/minimasonry.js | 153 +++++++++++++++++++++++++++++---------------- 1 file changed, 99 insertions(+), 54 deletions(-) diff --git a/src/minimasonry.js b/src/minimasonry.js index 1571f1b..58189b6 100644 --- a/src/minimasonry.js +++ b/src/minimasonry.js @@ -1,29 +1,32 @@ -var MiniMasonry = function(conf) { - this._sizes = []; - this._columns = []; - this._container = null; - this._count = null; - this._width = 0; +var MiniMasonry = function (conf) { + this._sizes = []; + this._columns = []; + this._container = null; + this._count = null; + this._width = 0; this._resizeTimeout = null, - this.conf = { - baseWidth: 255, - gutterX: null, - gutterY: null, - gutter: 10, - container: null, - minify: true, - ultimateGutter: 5, - surroundingGutter: true - }; + this.conf = { + baseWidth: 255, + gutterX: null, + gutterY: null, + gutter: 10, + container: null, + minify: true, + ultimateGutter: 5, + surroundingGutter: true, + center: false + }; + + this._gutterX = this.conf.gutterX; this.init(conf); return this; -} +}; -MiniMasonry.prototype.init = function(conf) { +MiniMasonry.prototype.init = function (conf) { for (var i in this.conf) { if (conf[i] != undefined) { this.conf[i] = conf[i]; @@ -37,56 +40,78 @@ MiniMasonry.prototype.init = function(conf) { if (!this._container) { throw new Error('Container not found or missing'); } - window.addEventListener("resize", this.resizeThrottler.bind(this)); + window.addEventListener('resize', this.resizeThrottler.bind(this)); this.layout(); }; -MiniMasonry.prototype.reset = function() { - this._sizes = []; +MiniMasonry.prototype.reset = function () { + this._sizes = []; this._columns = []; - this._count = null; - this._width = this._container.clientWidth; - var minWidth = this.conf.baseWidth; + this._count = null; + this._width = this._container.clientWidth; + var minWidth = this.conf.baseWidth; if (this._width < minWidth) { this._width = minWidth; this._container.style.minWidth = minWidth + 'px'; } - if (this.getCount() == 1) { + if (this.getCount() === 1) { // Set ultimate gutter when only one column is displayed this.conf.gutterX = this.conf.ultimateGutter; // As gutters are reduced, to column may fit, forcing to 1 this._count = 1; + } else { + this.conf.gutterX = this._gutterX ?? this.conf.gutter; } - if (this._width < (this.conf.baseWidth + (2 * this.conf.gutterX))) { + if (this._width < ( + this.conf.baseWidth + ( + 2 * this.conf.gutterX + ) + )) { // Remove gutter when screen is to low this.conf.gutterX = 0; } }; -MiniMasonry.prototype.getCount = function() { +MiniMasonry.prototype.getCount = function () { if (this.conf.surroundingGutter) { - return Math.floor((this._width - this.conf.gutterX) / (this.conf.baseWidth + this.conf.gutterX)); - } - - return Math.floor((this._width + this.conf.gutterX) / (this.conf.baseWidth + this.conf.gutterX)); -} + return Math.floor(( + this._width - this.conf.gutterX + ) / ( + this.conf.baseWidth + this.conf.gutterX + )); + } + + return Math.floor(( + this._width + this.conf.gutterX + ) / ( + this.conf.baseWidth + this.conf.gutterX + )); +}; -MiniMasonry.prototype.computeWidth = function() { +MiniMasonry.prototype.computeWidth = function () { var width; if (this.conf.surroundingGutter) { - width = ((this._width - this.conf.gutterX) / this._count) - this.conf.gutterX; + width = ( + ( + this._width - this.conf.gutterX + ) / this._count + ) - this.conf.gutterX; } else { - width = ((this._width + this.conf.gutterX) / this._count) - this.conf.gutterX; + width = ( + ( + this._width + this.conf.gutterX + ) / this._count + ) - this.conf.gutterX; } width = Number.parseFloat(width.toFixed(2)); return width; -} +}; -MiniMasonry.prototype.layout = function() { +MiniMasonry.prototype.layout = function () { if (!this._container) { console.error('Container not found'); return; @@ -106,44 +131,63 @@ MiniMasonry.prototype.layout = function() { //Saving children real heights var children = this._container.querySelectorAll(this.conf.container + ' > *'); - for (var k = 0;k< children.length; k++) { + for (var k = 0; k < children.length; k++) { // Set width before retrieving element height if content is proportional children[k].style.width = width + 'px'; this._sizes[k] = children[k].clientHeight; } var initialLeft = this.conf.surroundingGutter ? this.conf.gutterX : 0; - if (this._count > this._sizes.length) { - //If more columns than children - var occupiedSpace = (this._sizes.length * (width + this.conf.gutterX)) - this.conf.gutterX; - initialLeft = ((this._width - occupiedSpace) / 2); + + if (this._count > this._sizes.length && this.conf.center) { + //If more columns than children and center is true + var occupiedSpace = ( + this._sizes.length * ( + width + this.conf.gutterX + ) + ) - this.conf.gutterX; + initialLeft = ( + ( + this._width - occupiedSpace + ) / 2 + ); } //Computing position of children - for (var index = 0;index < children.length; index++) { + for (var index = 0; index < children.length; index++) { var nextColumn = this.conf.minify ? this.getShortest() : this.getNextColumn(index); var childrenGutter = 0; if (this.conf.surroundingGutter || nextColumn != this._columns.length) { childrenGutter = this.conf.gutterX; } - var x = initialLeft + ((width + childrenGutter) * (nextColumn)); + var x = initialLeft + ( + ( + width + childrenGutter + ) * ( + nextColumn + ) + ); var y = this._columns[nextColumn]; children[index].style.transform = 'translate3d(' + Math.round(x) + 'px,' + Math.round(y) + 'px,0)'; - this._columns[nextColumn] += this._sizes[index] + (this._count > 1 ? this.conf.gutterY : this.conf.ultimateGutter);//margin-bottom + this._columns[nextColumn] += this._sizes[index] + ( + this._count > 1 ? this.conf.gutterY : this.conf.ultimateGutter + );//margin-bottom } - this._container.style.height = (this._columns[this.getLongest()] - this.conf.gutterY) + 'px'; + this._container.style.height = ( + this._columns[this.getLongest()] - this.conf.gutterY + ) + 'px'; }; -MiniMasonry.prototype.getNextColumn = function(index) { +MiniMasonry.prototype.getNextColumn = function (index) { return index % this._columns.length; }; -MiniMasonry.prototype.getShortest = function() { +MiniMasonry.prototype.getShortest = function () { var shortest = 0; for (var i = 0; i < this._count; i++) { if (this._columns[i] < this._columns[shortest]) { @@ -154,7 +198,7 @@ MiniMasonry.prototype.getShortest = function() { return shortest; }; -MiniMasonry.prototype.getLongest = function() { +MiniMasonry.prototype.getLongest = function () { var longest = 0; for (var i = 0; i < this._count; i++) { if (this._columns[i] > this._columns[longest]) { @@ -165,19 +209,20 @@ MiniMasonry.prototype.getLongest = function() { return longest; }; -MiniMasonry.prototype.resizeThrottler = function() { +MiniMasonry.prototype.resizeThrottler = function () { // ignore resize events as long as an actualResizeHandler execution is in the queue - if ( !this._resizeTimeout ) { + if (!this._resizeTimeout) { - this._resizeTimeout = setTimeout(function() { + this._resizeTimeout = setTimeout(function () { this._resizeTimeout = null; //IOS Safari throw random resize event on scroll, call layout only if size has changed if (this._container.clientWidth != this._width) { this.layout(); } - // The actualResizeHandler will execute at a rate of 30fps + // The actualResizeHandler will execute at a rate of 30fps }.bind(this), 33); } -} +}; + export default MiniMasonry; From d42977f5fb99dfd77782c0872e74f5e6f61c49aa Mon Sep 17 00:00:00 2001 From: Kim Martini <37541937+graphicfox@users.noreply.github.com> Date: Wed, 10 Feb 2021 14:22:44 +0100 Subject: [PATCH 2/3] Update minimasonry.js keep format set center default to true to keep the previous behavior --- src/minimasonry.js | 168 +++++++++++++++++---------------------------- 1 file changed, 64 insertions(+), 104 deletions(-) diff --git a/src/minimasonry.js b/src/minimasonry.js index 58189b6..2c3b2ad 100644 --- a/src/minimasonry.js +++ b/src/minimasonry.js @@ -1,12 +1,12 @@ -var MiniMasonry = function (conf) { - this._sizes = []; - this._columns = []; - this._container = null; - this._count = null; - this._width = 0; - +var MiniMasonry = function(conf) { + this._sizes = []; + this._columns = []; + this._container = null; + this._count = null; + this._width = 0; + this._resizeTimeout = null, - + this.conf = { baseWidth: 255, gutterX: null, @@ -16,17 +16,17 @@ var MiniMasonry = function (conf) { minify: true, ultimateGutter: 5, surroundingGutter: true, - center: false + center: true }; - + this._gutterX = this.conf.gutterX; - + this.init(conf); - + return this; -}; +} -MiniMasonry.prototype.init = function (conf) { +MiniMasonry.prototype.init = function(conf) { for (var i in this.conf) { if (conf[i] != undefined) { this.conf[i] = conf[i]; @@ -35,27 +35,27 @@ MiniMasonry.prototype.init = function (conf) { if (this.conf.gutterX == null || this.conf.gutterY == null) { this.conf.gutterX = this.conf.gutterY = this.conf.gutter; } - + this._container = document.querySelector(this.conf.container); if (!this._container) { throw new Error('Container not found or missing'); } - window.addEventListener('resize', this.resizeThrottler.bind(this)); - + window.addEventListener("resize", this.resizeThrottler.bind(this)); + this.layout(); }; -MiniMasonry.prototype.reset = function () { - this._sizes = []; +MiniMasonry.prototype.reset = function() { + this._sizes = []; this._columns = []; - this._count = null; - this._width = this._container.clientWidth; - var minWidth = this.conf.baseWidth; + this._count = null; + this._width = this._container.clientWidth; + var minWidth = this.conf.baseWidth; if (this._width < minWidth) { this._width = minWidth; this._container.style.minWidth = minWidth + 'px'; } - + if (this.getCount() === 1) { // Set ultimate gutter when only one column is displayed this.conf.gutterX = this.conf.ultimateGutter; @@ -64,156 +64,117 @@ MiniMasonry.prototype.reset = function () { } else { this.conf.gutterX = this._gutterX ?? this.conf.gutter; } - - if (this._width < ( - this.conf.baseWidth + ( - 2 * this.conf.gutterX - ) - )) { + + if (this._width < (this.conf.baseWidth + (2 * this.conf.gutterX))) { // Remove gutter when screen is to low this.conf.gutterX = 0; } }; -MiniMasonry.prototype.getCount = function () { +MiniMasonry.prototype.getCount = function() { if (this.conf.surroundingGutter) { - return Math.floor(( - this._width - this.conf.gutterX - ) / ( - this.conf.baseWidth + this.conf.gutterX - )); + return Math.floor((this._width - this.conf.gutterX) / (this.conf.baseWidth + this.conf.gutterX)); } + + return Math.floor((this._width + this.conf.gutterX) / (this.conf.baseWidth + this.conf.gutterX)); +} - return Math.floor(( - this._width + this.conf.gutterX - ) / ( - this.conf.baseWidth + this.conf.gutterX - )); -}; - -MiniMasonry.prototype.computeWidth = function () { +MiniMasonry.prototype.computeWidth = function() { var width; if (this.conf.surroundingGutter) { - width = ( - ( - this._width - this.conf.gutterX - ) / this._count - ) - this.conf.gutterX; + width = ((this._width - this.conf.gutterX) / this._count) - this.conf.gutterX; } else { - width = ( - ( - this._width + this.conf.gutterX - ) / this._count - ) - this.conf.gutterX; + width = ((this._width + this.conf.gutterX) / this._count) - this.conf.gutterX; } width = Number.parseFloat(width.toFixed(2)); - + return width; -}; +} -MiniMasonry.prototype.layout = function () { +MiniMasonry.prototype.layout = function() { if (!this._container) { console.error('Container not found'); return; } this.reset(); - + //Computing columns count if (this._count == null) { this._count = this.getCount(); } //Computing columns width var width = this.computeWidth(); - + for (var i = 0; i < this._count; i++) { this._columns[i] = 0; } - + //Saving children real heights var children = this._container.querySelectorAll(this.conf.container + ' > *'); - for (var k = 0; k < children.length; k++) { + for (var k = 0;k< children.length; k++) { // Set width before retrieving element height if content is proportional children[k].style.width = width + 'px'; this._sizes[k] = children[k].clientHeight; } - + var initialLeft = this.conf.surroundingGutter ? this.conf.gutterX : 0; - if (this._count > this._sizes.length && this.conf.center) { - //If more columns than children and center is true - var occupiedSpace = ( - this._sizes.length * ( - width + this.conf.gutterX - ) - ) - this.conf.gutterX; - initialLeft = ( - ( - this._width - occupiedSpace - ) / 2 - ); + //If more columns than children + var occupiedSpace = (this._sizes.length * (width + this.conf.gutterX)) - this.conf.gutterX; + initialLeft = ((this._width - occupiedSpace) / 2); } - + //Computing position of children - for (var index = 0; index < children.length; index++) { + for (var index = 0;index < children.length; index++) { var nextColumn = this.conf.minify ? this.getShortest() : this.getNextColumn(index); - + var childrenGutter = 0; if (this.conf.surroundingGutter || nextColumn != this._columns.length) { childrenGutter = this.conf.gutterX; } - var x = initialLeft + ( - ( - width + childrenGutter - ) * ( - nextColumn - ) - ); + var x = initialLeft + ((width + childrenGutter) * (nextColumn)); var y = this._columns[nextColumn]; - - + + children[index].style.transform = 'translate3d(' + Math.round(x) + 'px,' + Math.round(y) + 'px,0)'; - - this._columns[nextColumn] += this._sizes[index] + ( - this._count > 1 ? this.conf.gutterY : this.conf.ultimateGutter - );//margin-bottom + + this._columns[nextColumn] += this._sizes[index] + (this._count > 1 ? this.conf.gutterY : this.conf.ultimateGutter);//margin-bottom } - - this._container.style.height = ( - this._columns[this.getLongest()] - this.conf.gutterY - ) + 'px'; + + this._container.style.height = (this._columns[this.getLongest()] - this.conf.gutterY) + 'px'; }; -MiniMasonry.prototype.getNextColumn = function (index) { +MiniMasonry.prototype.getNextColumn = function(index) { return index % this._columns.length; }; -MiniMasonry.prototype.getShortest = function () { +MiniMasonry.prototype.getShortest = function() { var shortest = 0; for (var i = 0; i < this._count; i++) { if (this._columns[i] < this._columns[shortest]) { shortest = i; } } - + return shortest; }; -MiniMasonry.prototype.getLongest = function () { +MiniMasonry.prototype.getLongest = function() { var longest = 0; for (var i = 0; i < this._count; i++) { if (this._columns[i] > this._columns[longest]) { longest = i; } } - + return longest; }; -MiniMasonry.prototype.resizeThrottler = function () { +MiniMasonry.prototype.resizeThrottler = function() { // ignore resize events as long as an actualResizeHandler execution is in the queue - if (!this._resizeTimeout) { - - this._resizeTimeout = setTimeout(function () { + if ( !this._resizeTimeout ) { + + this._resizeTimeout = setTimeout(function() { this._resizeTimeout = null; //IOS Safari throw random resize event on scroll, call layout only if size has changed if (this._container.clientWidth != this._width) { @@ -222,7 +183,6 @@ MiniMasonry.prototype.resizeThrottler = function () { // The actualResizeHandler will execute at a rate of 30fps }.bind(this), 33); } -}; - +} export default MiniMasonry; From 8e25bfb47f8f72bdbcc23ae7f453a0ef40adf776 Mon Sep 17 00:00:00 2001 From: Kim Martini <37541937+graphicfox@users.noreply.github.com> Date: Wed, 10 Feb 2021 14:38:07 +0100 Subject: [PATCH 3/3] Update minimasonry.js this._gutterX was set to early ... my mistake! --- src/minimasonry.js | 52 +++++++++++++++++++++++----------------------- 1 file changed, 26 insertions(+), 26 deletions(-) diff --git a/src/minimasonry.js b/src/minimasonry.js index 2c3b2ad..2eb63b2 100644 --- a/src/minimasonry.js +++ b/src/minimasonry.js @@ -4,9 +4,9 @@ var MiniMasonry = function(conf) { this._container = null; this._count = null; this._width = 0; - - this._resizeTimeout = null, - + + this._resizeTimeout = null; + this.conf = { baseWidth: 255, gutterX: null, @@ -18,11 +18,9 @@ var MiniMasonry = function(conf) { surroundingGutter: true, center: true }; - - this._gutterX = this.conf.gutterX; - + this.init(conf); - + return this; } @@ -32,16 +30,18 @@ MiniMasonry.prototype.init = function(conf) { this.conf[i] = conf[i]; } } + this._gutterX = this.conf.gutterX; + if (this.conf.gutterX == null || this.conf.gutterY == null) { this.conf.gutterX = this.conf.gutterY = this.conf.gutter; } - + this._container = document.querySelector(this.conf.container); if (!this._container) { throw new Error('Container not found or missing'); } window.addEventListener("resize", this.resizeThrottler.bind(this)); - + this.layout(); }; @@ -55,7 +55,7 @@ MiniMasonry.prototype.reset = function() { this._width = minWidth; this._container.style.minWidth = minWidth + 'px'; } - + if (this.getCount() === 1) { // Set ultimate gutter when only one column is displayed this.conf.gutterX = this.conf.ultimateGutter; @@ -64,7 +64,7 @@ MiniMasonry.prototype.reset = function() { } else { this.conf.gutterX = this._gutterX ?? this.conf.gutter; } - + if (this._width < (this.conf.baseWidth + (2 * this.conf.gutterX))) { // Remove gutter when screen is to low this.conf.gutterX = 0; @@ -75,7 +75,7 @@ MiniMasonry.prototype.getCount = function() { if (this.conf.surroundingGutter) { return Math.floor((this._width - this.conf.gutterX) / (this.conf.baseWidth + this.conf.gutterX)); } - + return Math.floor((this._width + this.conf.gutterX) / (this.conf.baseWidth + this.conf.gutterX)); } @@ -87,7 +87,7 @@ MiniMasonry.prototype.computeWidth = function() { width = ((this._width + this.conf.gutterX) / this._count) - this.conf.gutterX; } width = Number.parseFloat(width.toFixed(2)); - + return width; } @@ -97,18 +97,18 @@ MiniMasonry.prototype.layout = function() { return; } this.reset(); - + //Computing columns count if (this._count == null) { this._count = this.getCount(); } //Computing columns width var width = this.computeWidth(); - + for (var i = 0; i < this._count; i++) { this._columns[i] = 0; } - + //Saving children real heights var children = this._container.querySelectorAll(this.conf.container + ' > *'); for (var k = 0;k< children.length; k++) { @@ -116,31 +116,31 @@ MiniMasonry.prototype.layout = function() { children[k].style.width = width + 'px'; this._sizes[k] = children[k].clientHeight; } - + var initialLeft = this.conf.surroundingGutter ? this.conf.gutterX : 0; if (this._count > this._sizes.length && this.conf.center) { //If more columns than children var occupiedSpace = (this._sizes.length * (width + this.conf.gutterX)) - this.conf.gutterX; initialLeft = ((this._width - occupiedSpace) / 2); } - + //Computing position of children for (var index = 0;index < children.length; index++) { var nextColumn = this.conf.minify ? this.getShortest() : this.getNextColumn(index); - + var childrenGutter = 0; if (this.conf.surroundingGutter || nextColumn != this._columns.length) { childrenGutter = this.conf.gutterX; } var x = initialLeft + ((width + childrenGutter) * (nextColumn)); var y = this._columns[nextColumn]; - - + + children[index].style.transform = 'translate3d(' + Math.round(x) + 'px,' + Math.round(y) + 'px,0)'; - + this._columns[nextColumn] += this._sizes[index] + (this._count > 1 ? this.conf.gutterY : this.conf.ultimateGutter);//margin-bottom } - + this._container.style.height = (this._columns[this.getLongest()] - this.conf.gutterY) + 'px'; }; @@ -155,7 +155,7 @@ MiniMasonry.prototype.getShortest = function() { shortest = i; } } - + return shortest; }; @@ -166,14 +166,14 @@ MiniMasonry.prototype.getLongest = function() { longest = i; } } - + return longest; }; MiniMasonry.prototype.resizeThrottler = function() { // ignore resize events as long as an actualResizeHandler execution is in the queue if ( !this._resizeTimeout ) { - + this._resizeTimeout = setTimeout(function() { this._resizeTimeout = null; //IOS Safari throw random resize event on scroll, call layout only if size has changed