nodebb-plugin-ezoic-infinite 1.5.40 → 1.5.43

package/package.json

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

package/public/client.js

@@ -136,6 +136,7 @@ function mutationHasRelevantAddedNodes(mutations) {
     // observers / schedulers
     domObs: null,
     tightenObs: null,
+    fillObs: null,
     io: null,
     runQueued: false,
 
@@ -318,6 +319,27 @@ function mutationHasRelevantAddedNodes(mutations) {
       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
@@ -521,7 +543,7 @@ function pruneOrphanWraps(kindClass, items) {
   }
 function buildWrap(id, kindClass, afterPos) {
     const wrap = document.createElement('div');
-    wrap.className = `${WRAP_CLASS} ${kindClass}`;
+    wrap.className = `${WRAP_CLASS} ${kindClass} ez-pending`;
     wrap.setAttribute('data-ezoic-after', String(afterPos));
     wrap.setAttribute('data-ezoic-wrapid', String(id));
     wrap.style.width = '100%';
@@ -536,6 +558,103 @@ function buildWrap(id, kindClass, afterPos) {
     return wrap;
   }
 
+  // ---------- Fill detection & collapse handling (lightweight) ----------
+  // If ad fill is slow, showing a big empty slot is visually jarring. We keep
+  // our injected wrapper collapsed (ez-pending) until a creative is present,
+  // then mark it ez-ready.
+
+  function wrapHasFilledCreative(wrap) {
+    try {
+      if (!wrap || !wrap.isConnected) return false;
+      // Safeframe container (most common)
+      const c = wrap.querySelector('div[id$="__container__"]');
+      if (c && c.offsetHeight > 10) return true;
+      // Any iframe with non-trivial height
+      const f = wrap.querySelector('iframe');
+      if (!f) return false;
+      if (f.getAttribute('data-load-complete') === 'true') return true;
+      if (f.offsetHeight > 10) return true;
+      return false;
+    } catch (e) {}
+    return false;
+  }
+
+  function markWrapFilledIfNeeded(wrap) {
+    try {
+      if (!wrap || !wrap.isConnected) return;
+      if (!wrap.classList || !wrap.classList.contains(WRAP_CLASS)) return;
+      // Only our injected wrappers are DIVs with data-ezoic-wrapid.
+      if (wrap.tagName !== 'DIV') return;
+      if (!wrap.getAttribute('data-ezoic-wrapid')) return;
+
+      if (wrapHasFilledCreative(wrap)) {
+        wrap.classList.remove('ez-pending');
+        wrap.classList.add('ez-ready');
+      }
+    } catch (e) {}
+  }
+
+  function ensureFillObserver() {
+    if (state.fillObs) return;
+
+    let raf = 0;
+    const pending = new Set();
+    const schedule = (wrap) => {
+      if (!wrap) return;
+      pending.add(wrap);
+      if (raf) return;
+      raf = requestAnimationFrame(() => {
+        raf = 0;
+        for (const w of pending) markWrapFilledIfNeeded(w);
+        pending.clear();
+      });
+    };
+
+    const closestWrap = (node) => {
+      try {
+        if (!node || node.nodeType !== 1) return null;
+        const el = /** @type {Element} */ (node);
+        if (el.tagName === 'DIV' && el.classList && el.classList.contains(WRAP_CLASS) && el.getAttribute('data-ezoic-wrapid')) return el;
+        if (el.closest) return el.closest(`div.${WRAP_CLASS}[data-ezoic-wrapid]`);
+      } catch (e) {}
+      return null;
+    };
+
+    state.fillObs = new MutationObserver((mutations) => {
+      try {
+        for (const m of mutations) {
+          if (m.type === 'attributes') {
+            const w = closestWrap(m.target);
+            if (w) schedule(w);
+            continue;
+          }
+          if (!m.addedNodes || !m.addedNodes.length) continue;
+          for (const n of m.addedNodes) {
+            const w = closestWrap(n);
+            if (w) schedule(w);
+            if (n && n.nodeType === 1 && n.querySelectorAll) {
+              n.querySelectorAll(`div.${WRAP_CLASS}[data-ezoic-wrapid]`).forEach(schedule);
+            }
+          }
+        }
+      } catch (e) {}
+    });
+
+    try {
+      state.fillObs.observe(document.documentElement, {
+        subtree: true,
+        childList: true,
+        attributes: true,
+        attributeFilter: ['style', 'class', 'data-load-complete', 'height', 'src'],
+      });
+    } catch (e) {}
+
+    // Kick once for already-present wraps
+    try {
+      document.querySelectorAll(`div.${WRAP_CLASS}[data-ezoic-wrapid]`).forEach(markWrapFilledIfNeeded);
+    } catch (e) {}
+  }
+
   function findWrap(kindClass, afterPos) {
     return document.querySelector(`.${WRAP_CLASS}.${kindClass}[data-ezoic-after="${afterPos}"]`);
   }
@@ -658,7 +777,15 @@ function startShow(id) {
     try {
       if (isBlocked()) return;
 
-      const ph = document.getElementById(`${PLACEHOLDER_PREFIX}${id}`);
+      // Ensure placeholder is armed (arm-on-load). On some NodeBB transitions the
+      // wrapper may exist but the placeholder id is not yet assigned.
+      const wrap = findWrapById(id);
+      if (wrap && wrap.isConnected) {
+        try { armPlaceholder(wrap, id); } catch (e) {}
+      }
+
+      const domId = `${PLACEHOLDER_PREFIX}${id}`;
+      const ph = document.getElementById(domId);
       if (!ph || !ph.isConnected) return;
 
       const now2 = Date.now();
@@ -670,6 +797,15 @@ function startShow(id) {
       const ez = window.ezstandalone;
 
       const doShow = () => {
+        // Re-check right before showing: the placeholder can disappear between
+        // scheduling and execution (ajaxify/infinite scroll DOM churn).
+        const phNow = document.getElementById(domId);
+        if (!phNow || !phNow.isConnected) {
+          try { clearTimeout(hardTimer); } catch (e) {}
+          release();
+          return;
+        }
+
         try {
           if (state.usedOnce && state.usedOnce.has(id)) {
             safeDestroyById(id);
@@ -1001,6 +1137,7 @@ function startShow(id) {
       warmUpNetwork();
       patchShowAds();
       ensureTightenObserver();
+      ensureFillObserver();
       ensurePreloadObserver();
       ensureDomObserver();
 
@@ -1024,11 +1161,30 @@ function startShow(id) {
   warmUpNetwork();
   patchShowAds();
   ensureTightenObserver();
+  ensureFillObserver();
   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,29 @@
 .ezoic-ad {
   display: block;
   width: 100%;
+  clear: both;
+  position: relative;
+}
+
+/*
+  UX: collapse injected wrapper slots until the creative is actually filled.
+  This avoids showing a large empty placeholder when ad fill is slow.
+  Only applies to our injected wrapper DIVs (not Ezoic's internal SPANs).
+*/
+div.ezoic-ad.ez-pending {
+  height: 1px !important;
+  min-height: 1px !important;
+  overflow: hidden !important;
+}
+
+div.ezoic-ad.ez-ready {
+  height: auto !important;
+  overflow: visible !important;
+}
+
+/* Remove baseline gaps under iframes inside Ezoic creatives */
+span.ezoic-ad iframe,
+span.ezoic-ad div[id$="__container__"] iframe {
+  display: block !important;
+  vertical-align: top !important;
 }