nodebb-plugin-ezoic-infinite 1.5.73 → 1.5.75

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-plugin-ezoic-infinite",
-  "version": "1.5.73",
+  "version": "1.5.75",
   "description": "Production-ready Ezoic infinite ads integration for NodeBB 4.x",
   "main": "library.js",
   "license": "MIT",

package/public/client.js

@@ -44,37 +44,100 @@ function isFilledNode(node) {
   return !!(node && node.querySelector && node.querySelector('iframe, ins, img, video, [data-google-container-id]'));
 }
 
-// Ezoic often sets inline min-height (e.g. 400px) for adaptive placements.
-// In NodeBB topics/messages this creates visible empty space under 250px creatives.
-// We tighten the outermost Ezoic container to the actual creative height once it exists.
+// Ezoic injects inline `min-height:400px !important` on one or more nested wrappers.
+// If the creative is 250px, this leaves ~150px empty space. Because it's inline+important,
+// CSS alone cannot fix it reliably — we must rewrite the inline style.
 function tightenEzoicMinHeight(wrap) {
   try {
     if (!wrap || !wrap.querySelector) return;
-    const outer = wrap.querySelector('.ezoic-ad-adaptive') ||
-                  wrap.querySelector('.ezoic-ad[style*="min-height"]') ||
-                  wrap.querySelector('.ezoic-ad');
-    if (!outer) return;
 
-    const iframes = outer.querySelectorAll('iframe');
+    const iframes = wrap.querySelectorAll('iframe');
     if (!iframes || !iframes.length) return;
 
-    let h = 0;
+    // Find the closest "big" ezoic container that carries the 400px min-height.
+    const firstIframe = iframes[0];
+    let refNode = null;
+    let p = firstIframe && firstIframe.parentElement;
+    while (p && p !== wrap) {
+      if (p.classList && p.classList.contains('ezoic-ad')) {
+        const st = (p.getAttribute('style') || '').toLowerCase();
+        if (st.includes('min-height:400') || st.includes('min-height: 400') || st.includes('min-height:400px')) {
+          refNode = p;
+          break;
+        }
+      }
+      p = p.parentElement;
+    }
+    if (!refNode) {
+      refNode = wrap.querySelector('.ezoic-ad-adaptive') || wrap.querySelector('.ezoic-ad') || wrap;
+    }
+
+    let refTop = 0;
+    try { refTop = refNode.getBoundingClientRect().top; } catch (e) { refTop = 0; }
+
+    // Compute the rendered height needed inside refNode (visible iframes only).
+    let maxBottom = 0;
     iframes.forEach((f) => {
-      const ah = parseInt(f.getAttribute('height') || '0', 10);
-      const oh = f.offsetHeight || 0;
-      h = Math.max(h, ah, oh);
+      if (!f || !f.getBoundingClientRect) return;
+      const rect = f.getBoundingClientRect();
+      if (rect.width <= 1 || rect.height <= 1) return;
+      const bottom = rect.bottom - refTop;
+      maxBottom = Math.max(maxBottom, bottom);
     });
-    if (!h) return;
 
-    // Override inline min-height with a newer inline important.
-    try { outer.style.setProperty('min-height', h + 'px', 'important'); } catch (e) { outer.style.minHeight = h + 'px'; }
-    try { outer.style.setProperty('height', 'auto', 'important'); } catch (e) {}
+    // Fallback to attr/offset if layout metrics are not available.
+    if (!maxBottom) {
+      iframes.forEach((f) => {
+        const ah = parseInt(f.getAttribute('height') || '0', 10);
+        const oh = f.offsetHeight || 0;
+        maxBottom = Math.max(maxBottom, ah, oh);
+      });
+    }
+    if (!maxBottom) return;
+
+    // Account for the Ezoic badge (reportline) which is absolutely positioned.
+    const report = refNode.querySelector('.reportline');
+    if (report && report.offsetHeight) {
+      maxBottom += report.offsetHeight;
+    }
+
+    const h = Math.max(1, Math.ceil(maxBottom));
+
+    const tightenNode = (node) => {
+      if (!node || !node.style) return;
+      try { node.style.setProperty('min-height', h + 'px', 'important'); } catch (e) { node.style.minHeight = h + 'px'; }
+      try { node.style.setProperty('height', 'auto', 'important'); } catch (e) {}
+      try { node.style.setProperty('line-height', '0', 'important'); } catch (e) {}
+    };
+
+    // Tighten refNode and any ancestor ezoic-ad nodes with the problematic min-height.
+    let cur = refNode;
+    while (cur && cur !== wrap) {
+      if (cur.classList && cur.classList.contains('ezoic-ad')) {
+        const st = (cur.getAttribute('style') || '').toLowerCase();
+        if (st.includes('min-height:400') || st.includes('min-height: 400') || st.includes('min-height:400px')) {
+          tightenNode(cur);
+        }
+      }
+      cur = cur.parentElement;
+    }
+    tightenNode(refNode);
+
+    // Tighten any nested wrappers that also have the 400px min-height inline.
+    refNode.querySelectorAll('.ezoic-ad[style*="min-height"], .ezoic-ad-adaptive').forEach((n) => {
+      const st = (n.getAttribute('style') || '').toLowerCase();
+      if (st.includes('min-height:400') || st.includes('min-height: 400') || st.includes('min-height:400px')) {
+        tightenNode(n);
+      }
+    });
 
     // Mobile friendliness: avoid giant fixed widths causing overflow/reflow.
     if (isMobile()) {
-      try { outer.style.setProperty('width', '100%', 'important'); } catch (e) {}
-      try { outer.style.setProperty('max-width', '100%', 'important'); } catch (e) {}
-      try { outer.style.setProperty('min-width', '0', 'important'); } catch (e) {}
+      [refNode].forEach((n) => {
+        try { n.style.setProperty('width', '100%', 'important'); } catch (e) {}
+        try { n.style.setProperty('max-width', '100%', 'important'); } catch (e) {}
+        try { n.style.setProperty('min-width', '0', 'important'); } catch (e) {}
+      });
     }
   } catch (e) {}
 }
@@ -82,19 +145,88 @@ function tightenEzoicMinHeight(wrap) {
 function watchWrapForFill(wrap) {
   try {
     if (!wrap || wrap.__ezFillObs) return;
-    const obs = new MutationObserver(() => {
+
+    // Ezoic can (re)apply inline styles after fill; keep tightening for a short window.
+    const start = now();
+    const tightenBurst = () => {
+      try { tightenEzoicMinHeight(wrap); } catch (e) {}
+      if (now() - start < 6000) {
+        setTimeout(tightenBurst, 350);
+      }
+    };
+
+    const obs = new MutationObserver((muts) => {
+      // If anything that looks like ad content appears, treat as filled.
       if (isFilledNode(wrap)) {
         wrap.classList.remove('is-empty');
-        tightenEzoicMinHeight(wrap);
+        tightenBurst();
+      }
+
+      // If Ezoic changes inline style on descendants (min-height:400!important), tighten again.
+      for (const m of muts) {
+        if (m.type === 'attributes' && m.attributeName === 'style') {
+          try { tightenEzoicMinHeight(wrap); } catch (e) {}
+          break;
+        }
+      }
+
+      // Disconnect only after the burst window to avoid missing late style rewrites.
+      if (now() - start > 7000) {
         try { obs.disconnect(); } catch (e) {}
         wrap.__ezFillObs = null;
       }
     });
-    obs.observe(wrap, { childList: true, subtree: true });
+
+    obs.observe(wrap, { childList: true, subtree: true, attributes: true, attributeFilter: ['style'] });
     wrap.__ezFillObs = obs;
   } catch (e) {}
 }
 
+// Global safety net: sometimes Ezoic swaps nodes in ways that bypass our per-wrap observers.
+// When we see an Ezoic container with min-height:400!important inside posts/topics, shrink it.
+function globalGapFixInit() {
+  try {
+    if (window.__nodebbEzoicGapFix) return;
+    window.__nodebbEzoicGapFix = true;
+
+    const inPostArea = (el) => {
+      try {
+        return !!(el && el.closest && el.closest('[component="post"], .topic, .posts, [component="topic"]'));
+      } catch (e) { return false; }
+    };
+
+    const maybeFix = (root) => {
+      if (!root || !root.querySelectorAll) return;
+      const nodes = root.querySelectorAll('.ezoic-ad[style*="min-height"], .ezoic-ad-adaptive[style*="min-height"]');
+      nodes.forEach((n) => {
+        const st = (n.getAttribute('style') || '').toLowerCase();
+        if (!st.includes('min-height:400')) return;
+        if (!inPostArea(n)) return;
+        try {
+          const tmpWrap = n.closest('.' + WRAP_CLASS) || n.parentElement;
+          tightenEzoicMinHeight(tmpWrap || n);
+        } catch (e) {}
+      });
+    };
+
+    requestAnimationFrame(() => maybeFix(document));
+
+    const obs = new MutationObserver((muts) => {
+      for (const m of muts) {
+        const t = m.target;
+        if (m.type === 'attributes') {
+          maybeFix(t && t.nodeType === 1 ? t : t && t.parentElement);
+        } else if (m.addedNodes && m.addedNodes.length) {
+          m.addedNodes.forEach((n) => {
+            if (n && n.nodeType === 1) maybeFix(n);
+          });
+        }
+      }
+    });
+    obs.observe(document.documentElement, { subtree: true, childList: true, attributes: true, attributeFilter: ['style'] });
+  } catch (e) {}
+}
+
 // ---------------- state ----------------
 
   const state = {
@@ -1024,6 +1156,7 @@ function watchWrapForFill(wrap) {
 
       warmUpNetwork();
       patchShowAds();
+      globalGapFixInit();
       ensurePreloadObserver();
       ensureDomObserver();
 

package/public/style.css

@@ -71,3 +71,11 @@
 
 /* Ensure Ezoic reportline doesn't affect layout */
 .nodebb-ezoic-wrap .reportline{position:absolute!important;}
+
+/* Ezoic sometimes injects `position: sticky` inside placements. In long NodeBB topics,
+   this can create "gliding" and sudden disappear/reappear effects while scrolling.
+   We neutralize sticky positioning *inside our injected wrappers* only. */
+.nodebb-ezoic-wrap .ezads-sticky-intradiv {
+  position: static !important;
+  top: auto !important;
+}