nodebb-plugin-ezoic-infinite 1.5.39 → 1.5.40

package/package.json

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

package/public/client.js

@@ -135,6 +135,7 @@ function mutationHasRelevantAddedNodes(mutations) {
 
     // observers / schedulers
     domObs: null,
+    tightenObs: null,
     io: null,
     runQueued: false,
 
@@ -292,6 +293,103 @@ function mutationHasRelevantAddedNodes(mutations) {
     }
   }
 
+  // ---------- Ezoic min-height tightening (lightweight) ----------
+  // Some Ezoic placements reserve a large min-height (e.g. 400px) even when
+  // the rendered iframe/container is smaller (often 250px). That creates a
+  // visible empty gap and can make creatives appear to "slide" inside the slot.
+  // We correct ONLY those cases, without scroll listeners or full-page rescans.
+
+  function getRenderedAdHeight(adSpan) {
+    try {
+      const c = adSpan.querySelector('div[id$="__container__"]');
+      if (c && c.offsetHeight) return c.offsetHeight;
+      const f = adSpan.querySelector('iframe');
+      if (!f) return 0;
+      const attr = parseInt(f.getAttribute('height') || '', 10);
+      if (Number.isFinite(attr) && attr > 0) return attr;
+      if (f.offsetHeight) return f.offsetHeight;
+    } catch (e) {}
+    return 0;
+  }
+
+  function tightenMinHeight(adSpan) {
+    try {
+      if (!adSpan || adSpan.nodeType !== 1) return;
+      if (adSpan.tagName !== 'SPAN') return;
+      if (!adSpan.classList || !adSpan.classList.contains('ezoic-ad')) return;
+
+      const mhStr = adSpan.style && adSpan.style.minHeight ? String(adSpan.style.minHeight) : '';
+      const mh = mhStr ? parseInt(mhStr, 10) : 0;
+      if (!mh || mh < 350) return; // only fix the "400px"-style reservations
+
+      const h = getRenderedAdHeight(adSpan);
+      if (!h || h <= 0) return;
+      if (h >= mh) return;
+
+      adSpan.style.setProperty('min-height', `${h}px`, 'important');
+    } catch (e) {}
+  }
+
+  function closestEzoicAdSpan(node) {
+    try {
+      if (!node || node.nodeType !== 1) return null;
+      const el = /** @type {Element} */ (node);
+      if (el.tagName === 'SPAN' && el.classList && el.classList.contains('ezoic-ad')) return el;
+      if (el.closest) return el.closest('span.ezoic-ad');
+    } catch (e) {}
+    return null;
+  }
+
+  function ensureTightenObserver() {
+    if (state.tightenObs) return;
+
+    let raf = 0;
+    const pending = new Set();
+    const schedule = (adSpan) => {
+      if (!adSpan) return;
+      pending.add(adSpan);
+      if (raf) return;
+      raf = requestAnimationFrame(() => {
+        raf = 0;
+        for (const el of pending) tightenMinHeight(el);
+        pending.clear();
+      });
+    };
+
+    state.tightenObs = new MutationObserver((mutations) => {
+      try {
+        for (const m of mutations) {
+          if (m.type === 'attributes') {
+            const ad = closestEzoicAdSpan(m.target);
+            if (ad) schedule(ad);
+            continue;
+          }
+          if (!m.addedNodes || !m.addedNodes.length) continue;
+          for (const n of m.addedNodes) {
+            const ad = closestEzoicAdSpan(n);
+            if (ad) schedule(ad);
+            if (n && n.nodeType === 1 && n.querySelectorAll) {
+              n.querySelectorAll('span.ezoic-ad').forEach(schedule);
+            }
+          }
+        }
+      } catch (e) {}
+    });
+
+    try {
+      state.tightenObs.observe(document.documentElement, {
+        subtree: true,
+        childList: true,
+        attributes: true,
+        attributeFilter: ['style', 'class', 'data-load-complete', 'height'],
+      });
+    } catch (e) {}
+
+    try {
+      document.querySelectorAll('span.ezoic-ad[style*="min-height"]').forEach(tightenMinHeight);
+    } catch (e) {}
+  }
+
     const RECYCLE_COOLDOWN_MS = 1500;
 
     function kindKeyFromClass(kindClass) {
@@ -853,6 +951,9 @@ function startShow(id) {
     // reset perf profile cache
     state.perfProfile = null;
 
+    // tighten observer is global; keep it across ajaxify navigation but ensure it exists
+    // (do not disconnect here to avoid missing late style rewrites during transitions)
+
     // reset state
     state.cfg = null;
     state.allTopics = [];
@@ -899,6 +1000,7 @@ function startShow(id) {
 
       warmUpNetwork();
       patchShowAds();
+      ensureTightenObserver();
       ensurePreloadObserver();
       ensureDomObserver();
 
@@ -921,6 +1023,7 @@ function startShow(id) {
   state.pageKey = getPageKey();
   warmUpNetwork();
   patchShowAds();
+  ensureTightenObserver();
   ensurePreloadObserver();
   ensureDomObserver();