fix wrong marginTop syntax for negative offset; simplify the rest

1 files changed, 29 insertions, 56 deletions

diff --git a/init.js b/init.js
index 6e41516..9014495 100644
--- a/init.js
+++ b/init.js
@@ -1,4 +1,4 @@
-/* global require, PluginHost, App, Plugins, Headlines */
+/* global require, PluginHost, App, Plugins */
 
 require(['dojo/_base/kernel', 'dojo/ready'], function  (dojo, ready) {
 	ready(function() {
@@ -6,76 +6,54 @@ require(['dojo/_base/kernel', 'dojo/ready'], function  (dojo, ready) {
 			rows: [],
 			timeouts: [],
 			resize_observer: new ResizeObserver((entries) => {
-				entries.forEach((entry) => Plugins.Grid_Masonry.fit_row(entry.target));
+				console.log('grid_masonry', 'resize_observer', entries, entries.length);
+
+				entries.forEach((entry) => Plugins.Grid_Masonry.fit_next_of(entry.target));
 			}),
 			mutation_observer: new MutationObserver((mutations) => {
 				mutations.forEach((mutation) => {
-					if (mutation.type == "attributes" && mutation.attributeName == "class")
+					if (mutation.type == "attributes" && mutation.attributeName == "class") {
+						console.log('grid_masonry', 'mutation_observer', mutation);
 						Plugins.Grid_Masonry.fit_row(mutation.target)
+					}
 				})
 			}),
-			intersection_observer: new IntersectionObserver(
-				(entries) => {
-					entries.forEach((entry) => {
-						if (entry.isIntersecting) Plugins.Grid_Masonry.fit_row(entry.target)
-					});
-				},
-				{threshold: [0, 0.5, 1], root: document.querySelector("#headlines-frame")}
+			intersection_observer: new IntersectionObserver((entries) => {
+				console.log('grid_masonry', 'intersection_observer', entries, entries.length);
+				entries.forEach((entry) => {
+					Plugins.Grid_Masonry.fit_row(entry.target)
+				});
+				}, {root: document.querySelector("#headlines-frame")}
 			),
 			get_columns: function() {
 				return window.getComputedStyle(App.byId('headlines-frame')).gridTemplateColumns.split(' ').length;
 			},
-			fit_all: function() {
+			fit_next_of: function(row) {
 				const num_columns = this.get_columns();
+				const row_idx = this.rows.indexOf(row);
+				const next = this.rows[row_idx + num_columns];
 
-				if (num_columns < 2)
-					return;
-
-				this.rows.forEach((row) => {
-					if (Headlines.isChildVisible(row)) {
-						console.log('fr', row);
-						this.fit_row(row);
-					}
-				});
+				if (next)
+					this.fit_row(next);
 			},
 			fit_row: function(row) {
-				if (this.timeouts[row.id])
-					window.clearTimeout(this.timeouts[row.id]);
-
-				this.timeouts[row.id] = window.setTimeout(() => { this._fit_row(row) }, 500);
-			},
-			_fit_row: function(row) {
-				const num_columns = this.get_columns();
 
-				if (num_columns < 2 || !Headlines.isChildVisible(row))
+				if (window.getComputedStyle(row).gridColumn != "auto / auto") {
+					row.style.marginTop = '0px';
 					return;
+				}
 
+				const num_columns = this.get_columns();
 				const row_idx = this.rows.indexOf(row);
+				const prev = this.rows[row_idx - num_columns];
 
-				if (row_idx != -1) {
-
-					const next = this.rows[row_idx + num_columns];
-
-					if (window.getComputedStyle(row).gridColumn != "auto / auto") {
+				if (prev) {
+					if (window.getComputedStyle(prev).gridColumn != "auto / auto") {
 						row.style.marginTop = '0px';
-
-						if (next) {
-							next.style.marginTop = '0px';
-						}
-
-						return;
-					}
-
-					if (next) {
-						if (window.getComputedStyle(next).gridColumn == "auto / auto") {
-							const delta_height = row.offsetHeight - row.querySelector('.content').offsetHeight - row.querySelector('.header').offsetHeight;
-
-							console.log('grid_masonry', row.id, next.id, delta_height);
-
-							next.style.marginTop = `-${delta_height}px`;
-						} else {
-							next.style.marginTop = '0px';
-						}
+					} else {
+						const delta_height = prev.offsetHeight - prev.querySelector('.content').offsetHeight - prev.querySelector('.header').offsetHeight;
+						console.log('grid_masonry', prev.id, row.id, delta_height);
+						row.style.marginTop = `${-delta_height}px`;
 					}
 				}
 			},
@@ -95,11 +73,6 @@ 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;