nodebb-plugin-ezoic-infinite 1.5.39 → 1.5.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-plugin-ezoic-infinite",
-  "version": "1.5.39",
+  "version": "1.5.41",
   "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,124 @@ 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;
+
+      // Some Ezoic templates apply sticky/fixed positioning inside the ad slot
+      // (e.g. .ezads-sticky-intradiv) which can make the creative appear to
+      // "slide" within an oversized container. Neutralize it inside the slot.
+      try {
+        const sticky = adSpan.querySelectorAll('.ezads-sticky-intradiv');
+        sticky.forEach((el) => {
+          el.style.setProperty('position', 'static', 'important');
+          el.style.setProperty('top', 'auto', 'important');
+          el.style.setProperty('bottom', 'auto', 'important');
+        });
+
+        // Safety net: any descendant that ends up sticky/fixed via inline style
+        // (rare, but causes "floating" creatives).
+        const positioned = adSpan.querySelectorAll('[style*="position: sticky"], [style*="position:sticky"], [style*="position: fixed"], [style*="position:fixed"]');
+        positioned.forEach((el) => {
+          el.style.setProperty('position', 'static', 'important');
+          el.style.setProperty('top', 'auto', 'important');
+          el.style.setProperty('bottom', 'auto', 'important');
+        });
+      } catch (e) {}
+
+      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 +972,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 +1021,7 @@ function startShow(id) {
 
       warmUpNetwork();
       patchShowAds();
+      ensureTightenObserver();
       ensurePreloadObserver();
       ensureDomObserver();
 
@@ -921,11 +1044,30 @@ function startShow(id) {
   state.pageKey = getPageKey();
   warmUpNetwork();
   patchShowAds();
+  ensureTightenObserver();
   ensurePreloadObserver();
   ensureDomObserver();
-
   bindNodeBB();
 
+  // Lightweight scroll kick: NodeBB infinite scroll can keep many nodes and only append occasionally.
+  // Without a scroll trigger, we might not inject new placeholders until another DOM mutation occurs.
+  // This is throttled and only triggers near the bottom to keep CPU usage minimal.
+  state.lastScrollKick = 0;
+  window.addEventListener('scroll', () => {
+    const now = Date.now();
+    if (now - state.lastScrollKick < 250) return;
+    state.lastScrollKick = now;
+
+    // Only kick when user is approaching the end of currently rendered content
+    const doc = document.documentElement;
+    const scrollTop = window.pageYOffset || doc.scrollTop || 0;
+    const viewportH = window.innerHeight || doc.clientHeight || 0;
+    const fullH = Math.max(doc.scrollHeight, document.body ? document.body.scrollHeight : 0);
+    if (scrollTop + viewportH > fullH - 2000) {
+      if (!isBlocked()) scheduleRun();
+    }
+  }, { passive: true });
+
   // First paint: try hero + run
   blockedUntil = 0;
   insertHeroAdEarly().catch(() => {});

package/public/style.css

@@ -6,4 +6,6 @@
 .ezoic-ad {
   display: block;
   width: 100%;
+  clear: both;
+  position: relative;
 }