From 93a190559527ccad8568de9a7a565b30e7e85e48 Mon Sep 17 00:00:00 2001 From: Sebastian Landwehr Date: Tue, 13 Aug 2024 22:35:25 +0000 Subject: [PATCH 1/6] resize observer for children --- src/minimasonry.js | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/src/minimasonry.js b/src/minimasonry.js index 4ac84fd..1f1f2eb 100644 --- a/src/minimasonry.js +++ b/src/minimasonry.js @@ -7,6 +7,9 @@ var MiniMasonry = function(conf) { this._removeListener = null; this._currentGutterX = null; this._currentGutterY = null; + this._children = []; + this._resizeObserver = null; + this._mutationObserver = null; this._resizeTimeout = null, @@ -59,6 +62,19 @@ MiniMasonry.prototype.init = function(conf) { } } + this._resizeObserver = new ResizeObserver(() => this.layout()); + + this._mutationObserver = new MutationObserver(() => { + + resizeObserver.disconnect(); + + for (const child of this._container.children) { + resizeObserver.observe(child); + } + }); + + mutationObserver.observe(root.value, { childList: true }); + this.layout(); }; @@ -227,6 +243,9 @@ MiniMasonry.prototype.destroy = function() { this._removeListener(); } + this._resizeObserver.destroy(); + this._mutationObserver.destroy(); + var children = this._container.children; for (var k = 0;k< children.length; k++) { children[k].style.removeProperty('width'); From 41daa629bdeb08ea98715e87097edf9204880fd5 Mon Sep 17 00:00:00 2001 From: Sebastian Landwehr Date: Tue, 13 Aug 2024 22:47:19 +0000 Subject: [PATCH 2/6] remove unneeded variable --- src/minimasonry.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/minimasonry.js b/src/minimasonry.js index 1f1f2eb..ba82b34 100644 --- a/src/minimasonry.js +++ b/src/minimasonry.js @@ -7,7 +7,6 @@ var MiniMasonry = function(conf) { this._removeListener = null; this._currentGutterX = null; this._currentGutterY = null; - this._children = []; this._resizeObserver = null; this._mutationObserver = null; From 3f762e06931d51bb40174216c3eb681f3d2635a5 Mon Sep 17 00:00:00 2001 From: Sebastian Landwehr Date: Tue, 13 Aug 2024 23:17:10 +0000 Subject: [PATCH 3/6] fixes --- src/minimasonry.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/minimasonry.js b/src/minimasonry.js index ba82b34..dc48b7c 100644 --- a/src/minimasonry.js +++ b/src/minimasonry.js @@ -65,14 +65,14 @@ MiniMasonry.prototype.init = function(conf) { this._mutationObserver = new MutationObserver(() => { - resizeObserver.disconnect(); + this._resizeObserver.disconnect(); for (const child of this._container.children) { - resizeObserver.observe(child); + this._resizeObserver.observe(child); } }); - mutationObserver.observe(root.value, { childList: true }); + this._mutationObserver.observe(this._container, { childList: true }); this.layout(); }; From 195cf657f06a1283474cc6e565964e6a19ed7468 Mon Sep 17 00:00:00 2001 From: Sebastian Landwehr Date: Sun, 17 Nov 2024 03:01:46 +0000 Subject: [PATCH 4/6] detect container resize --- src/minimasonry.js | 45 +++++++++++++++++++-------------------------- 1 file changed, 19 insertions(+), 26 deletions(-) diff --git a/src/minimasonry.js b/src/minimasonry.js index dc48b7c..df1e950 100644 --- a/src/minimasonry.js +++ b/src/minimasonry.js @@ -1,14 +1,15 @@ var MiniMasonry = function(conf) { - this._sizes = []; - this._columns = []; - this._container = null; - this._count = null; - this._width = 0; - this._removeListener = null; - this._currentGutterX = null; - this._currentGutterY = null; - this._resizeObserver = null; - this._mutationObserver = null; + this._sizes = []; + this._columns = []; + this._container = null; + this._count = null; + this._width = 0; + this._removeListener = null; + this._currentGutterX = null; + this._currentGutterY = null; + this._containerResizeObserver = null; + this._childrenResizeObserver = null; + this._mutationObserver = null; this._resizeTimeout = null, @@ -52,26 +53,21 @@ MiniMasonry.prototype.init = function(conf) { } var onResize = this.resizeThrottler.bind(this) - window.addEventListener("resize", onResize); - this._removeListener = function() { - window.removeEventListener("resize", onResize); - if (this._resizeTimeout != null) { - window.clearTimeout(this._resizeTimeout); - this._resizeTimeout = null; - } - } - this._resizeObserver = new ResizeObserver(() => this.layout()); + this._containerResizeObserver = new ResizeObserver(onResize); + + this._childrenResizeObserver = new ResizeObserver(onResize); this._mutationObserver = new MutationObserver(() => { - this._resizeObserver.disconnect(); + this._childrenResizeObserver.disconnect(); for (const child of this._container.children) { - this._resizeObserver.observe(child); + this._childrenResizeObserver.observe(child); } }); + this._containerResizeObserver.observe(this._container); this._mutationObserver.observe(this._container, { childList: true }); this.layout(); @@ -238,11 +234,8 @@ MiniMasonry.prototype.resizeThrottler = function() { } MiniMasonry.prototype.destroy = function() { - if (typeof this._removeListener == "function") { - this._removeListener(); - } - - this._resizeObserver.destroy(); + this._containerResizeObserver.destroy(); + this._childrenResizeObserver.destroy(); this._mutationObserver.destroy(); var children = this._container.children; From d16fcb68f7b195306b48671b8771a48d99c81f66 Mon Sep 17 00:00:00 2001 From: Sebastian Landwehr Date: Sun, 17 Nov 2024 03:10:47 +0000 Subject: [PATCH 5/6] fix: fix --- src/minimasonry.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/minimasonry.js b/src/minimasonry.js index df1e950..13aa3b2 100644 --- a/src/minimasonry.js +++ b/src/minimasonry.js @@ -56,7 +56,7 @@ MiniMasonry.prototype.init = function(conf) { this._containerResizeObserver = new ResizeObserver(onResize); - this._childrenResizeObserver = new ResizeObserver(onResize); + this._childrenResizeObserver = new ResizeObserver(() => this.layout()); this._mutationObserver = new MutationObserver(() => { From ece532c5f1ef7b0494ec12f904718ac0ec427427 Mon Sep 17 00:00:00 2001 From: Sebastian Landwehr Date: Mon, 18 Nov 2024 00:19:24 +0000 Subject: [PATCH 6/6] destroy -> disconnect --- src/minimasonry.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/minimasonry.js b/src/minimasonry.js index 13aa3b2..d4b7779 100644 --- a/src/minimasonry.js +++ b/src/minimasonry.js @@ -234,9 +234,9 @@ MiniMasonry.prototype.resizeThrottler = function() { } MiniMasonry.prototype.destroy = function() { - this._containerResizeObserver.destroy(); - this._childrenResizeObserver.destroy(); - this._mutationObserver.destroy(); + this._containerResizeObserver.disconnect(); + this._childrenResizeObserver.disconnect(); + this._mutationObserver.disconnect(); var children = this._container.children; for (var k = 0;k< children.length; k++) {