let's try this with an intersection observer

1 files changed, 31 insertions, 3 deletions

diff --git a/init.js b/init.js
index 42af382..debcbba 100644
--- a/init.js
+++ b/init.js
@@ -1,4 +1,4 @@
-/* global require, PluginHost, App, Plugins */
+/* global require, PluginHost, App, Plugins, Headlines */
 
 require(['dojo/_base/kernel', 'dojo/ready'], function  (dojo, ready) {
 	ready(function() {
@@ -10,8 +10,30 @@ require(['dojo/_base/kernel', 'dojo/ready'], function  (dojo, ready) {
 			mutation_observer: new MutationObserver((mutations) => {
 				mutations.forEach((mutation) => Plugins.Grid_Masonry.fit_row(mutation.target))
 			}),
+			intersection_observer: new IntersectionObserver(
+				(entries, observer) => {
+					entries.forEach((entry) => Plugins.Grid_Masonry.fit_row(entry.target));
+				},
+				{threshold: [0, 0.5, 1], root: document.querySelector("#headlines-frame")}
+			),
+			get_columns: function() {
+				return window.getComputedStyle(App.byId('headlines-frame')).gridTemplateColumns.split(' ').length;
+			},
+			fit_all: function() {
+				const num_columns = this.get_columns();
+
+				if (num_columns < 2)
+					return;
+
+				this.rows.forEach((row) => {
+					if (Headlines.isChildVisible(row)) {
+						console.log('fr', row);
+						this.fit_row(row);
+					}
+				});
+			},
 			fit_row: function(row) {
-				const num_columns = window.getComputedStyle(App.byId('headlines-frame')).gridTemplateColumns.split(' ').length;
+				const num_columns = this.get_columns();
 
 				if (num_columns < 2)
 					return;
@@ -45,7 +67,8 @@ require(['dojo/_base/kernel', 'dojo/ready'], function  (dojo, ready) {
 
 				this.rows.forEach((row) => {
 					this.resize_observer.observe(row);
-					this.mutation_observer.observe(row, {attributes: true});
+					//this.mutation_observer.observe(row, {attributes: true});
+					this.intersection_observer.observe(row);
 				})
 			}
 		}
@@ -64,6 +87,11 @@ require(['dojo/_base/kernel', 'dojo/ready'], function  (dojo, ready) {
 			});
 		}*/
 
+		/*PluginHost.register(PluginHost.HOOK_HEADLINES_SCROLL_HANDLER, function() {
+			Plugins.Grid_Masonry.fit_all();
+			return true;
+		});*/
+
 		PluginHost.register(PluginHost.HOOK_HEADLINES_RENDERED, function() {
 			Plugins.Grid_Masonry.init();
 			return true;