nodebb-plugin-ezoic-infinite 1.6.48 → 1.6.50

package/package.json

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

package/public/client.js

@@ -63,6 +63,31 @@
   // Production build: debug disabled
   function dbg() {}
 
+  // Some ad providers (notably Google Safeframe) can defer creative rendering until a
+  // scroll/resize tick is observed. On SPA/infinite-scroll pages we can end up with
+  // valid iframes that stay visually empty until the user nudges the scroll.
+  // We gently "poke" observers by dispatching scroll/resize events (debounced).
+  let _ezPokeScheduled = false;
+  function scheduleViewportPoke(reason) {
+    if (_ezPokeScheduled) return;
+    _ezPokeScheduled = true;
+    try {
+      requestAnimationFrame(() => {
+        _ezPokeScheduled = false;
+        try {
+          window.dispatchEvent(new Event('scroll'));
+          window.dispatchEvent(new Event('resize'));
+        } catch (e) {}
+        try {
+          document.dispatchEvent(new Event('scroll'));
+        } catch (e) {}
+        dbg('viewportPoke', reason || '');
+      });
+    } catch (e) {
+      _ezPokeScheduled = false;
+    }
+  }
+
   // Ezoic (and some partner scripts) can be very noisy in console on SPA/Ajaxify setups.
   // These warnings are not actionable for end-users and can flood the console.
   // We selectively silence the known spam patterns while keeping other warnings intact.
@@ -636,8 +661,8 @@ function globalGapFixInit() {
 
   // ---------------- insertion primitives ----------------
 
-  function buildWrap(id, kindClass, afterPos, createPlaceholder) {
-    const wrap = document.createElement('div');
+  function buildWrap(id, kindClass, afterPos, createPlaceholder, tagName) {
+    const wrap = document.createElement(tagName || 'div');
     wrap.className = `${WRAP_CLASS} ${kindClass}`;
     wrap.setAttribute('data-ezoic-after', String(afterPos));
     wrap.setAttribute('data-ezoic-wrapid', String(id));
@@ -648,6 +673,15 @@ function globalGapFixInit() {
     }
     wrap.style.width = '100%';
 
+    // If we're inserted into a UL/OL list, use an LI wrapper to keep valid markup.
+    // Otherwise browsers can re-parent the DIV, which looks like items/ads “remontent”
+    // and can break topic list rendering.
+    if ((tagName || '').toLowerCase() === 'li') {
+      wrap.style.listStyle = 'none';
+      wrap.style.padding = '0';
+      wrap.style.margin = '0';
+    }
+
     if (createPlaceholder) {
       const ph = document.createElement('div');
       ph.id = `${PLACEHOLDER_PREFIX}${id}`;
@@ -667,7 +701,10 @@ function globalGapFixInit() {
 
     insertingIds.add(id);
     try {
-      const wrap = buildWrap(id, kindClass, afterPos, !existingPh);
+      const parent = target.parentElement;
+      const parentTag = parent && parent.tagName ? parent.tagName.toUpperCase() : '';
+      const tagName = (parentTag === 'UL' || parentTag === 'OL') ? 'li' : 'div';
+      const wrap = buildWrap(id, kindClass, afterPos, !existingPh, tagName);
       target.insertAdjacentElement('afterend', wrap);
 
       // If placeholder exists elsewhere (including pool), move it into the wrapper.
@@ -679,6 +716,9 @@ function globalGapFixInit() {
         } catch (e) {}
       }
 
+      // Help creatives render promptly without requiring an actual user scroll.
+      scheduleViewportPoke(`afterInsert:${kindClass}:${id}`);
+
       return wrap;
     } finally {
       insertingIds.delete(id);
@@ -1511,16 +1551,21 @@ function buildOrdinalMap(items) {
 
 
 
-// ===== V17 minimal pile-fix (no insert hooks) =====
+
+
+
+// ===== V17.8: No pile-up by design — keep "future" between slots pending/collapsed until their anchor topic exists =====
 (function () {
-  // Goal: keep ad injection intact. Only repair when we detect "pile-up" of between wraps.
   var TOPIC_LI_SEL = 'li[component="category/topic"]';
   var BETWEEN_WRAP_SEL = 'div.nodebb-ezoic-wrap.ezoic-ad-between';
   var HOST_CLASS = 'nodebb-ezoic-host';
+  var PENDING_CLASS = 'nodebb-ezoic-pending';
 
+  var ul = null;
+  var mo = null;
   var scheduled = false;
   var lastRun = 0;
-  var COOLDOWN = 180;
+  var COOLDOWN = 80;
 
   function getTopicList() {
     try {
@@ -1530,29 +1575,41 @@ function buildOrdinalMap(items) {
     } catch (e) { return null; }
   }
 
-  function isHost(node) {
-    return !!(node && node.nodeType === 1 && node.tagName === 'LI' && node.classList && node.classList.contains(HOST_CLASS));
+  function ensureUL() { ul = ul || getTopicList(); return ul; }
+
+  function isHost(el) {
+    return !!(el && el.nodeType === 1 && el.tagName === 'LI' && el.classList && el.classList.contains(HOST_CLASS));
   }
 
-  function ensureHostForWrap(wrap, ul) {
-    try {
-      if (!wrap || wrap.nodeType !== 1) return null;
-      if (!(wrap.matches && wrap.matches(BETWEEN_WRAP_SEL))) return null;
+  function isBetweenWrap(el) {
+    try { return !!(el && el.nodeType === 1 && el.matches && el.matches(BETWEEN_WRAP_SEL)); } catch(e){ return false; }
+  }
 
+  function ensureHostForWrap(wrap, ulEl) {
+    // If Ezoic inserts ul > div..., wrap it into a LI to keep a valid list structure (less NodeBB churn).
+    try {
+      if (!wrap || !isBetweenWrap(wrap)) return null;
       var host = wrap.closest ? wrap.closest('li.' + HOST_CLASS) : null;
       if (host) return host;
 
-      if (!ul) ul = wrap.closest ? wrap.closest('ul,ol') : null;
-      if (!ul || !(ul.tagName === 'UL' || ul.tagName === 'OL')) return null;
+      ulEl = ulEl || (wrap.closest ? wrap.closest('ul,ol') : null);
+      if (!ulEl || !(ulEl.tagName === 'UL' || ulEl.tagName === 'OL')) return null;
 
-      // Only wrap if direct child of list (invalid / fragile)
-      if (wrap.parentElement === ul) {
+      if (wrap.parentElement === ulEl) {
         host = document.createElement('li');
         host.className = HOST_CLASS;
         host.setAttribute('role', 'listitem');
         host.style.listStyle = 'none';
         host.style.width = '100%';
-        ul.insertBefore(host, wrap);
+
+        try {
+          var after = wrap.getAttribute('data-ezoic-after');
+          if (after) host.setAttribute('data-ezoic-after', after);
+          var pin = wrap.getAttribute('data-ezoic-pin');
+          if (pin) host.setAttribute('data-ezoic-pin', pin);
+        } catch (e) {}
+
+        ulEl.insertBefore(host, wrap);
         host.appendChild(wrap);
         try { wrap.style.width = '100%'; } catch (e) {}
         return host;
@@ -1561,268 +1618,147 @@ function buildOrdinalMap(items) {
     return null;
   }
 
-  function previousTopicLi(node) {
+  function getAfter(el) {
     try {
-      var prev = node.previousElementSibling;
-      while (prev) {
-        if (prev.matches && prev.matches(TOPIC_LI_SEL)) return prev;
-        // skip other hosts/wraps
-        prev = prev.previousElementSibling;
+      var v = null;
+      if (el && el.getAttribute) v = el.getAttribute('data-ezoic-after');
+      if (!v && el && el.querySelector) {
+        var w = el.querySelector(BETWEEN_WRAP_SEL);
+        if (w) v = w.getAttribute('data-ezoic-after');
       }
-    } catch (e) {}
-    return null;
+      var n = parseInt(v, 10);
+      return isNaN(n) ? null : n;
+    } catch (e) { return null; }
+  }
+
+  function getTopics(ulEl) {
+    try { return ulEl ? ulEl.querySelectorAll(TOPIC_LI_SEL) : []; } catch(e){ return []; }
   }
 
-  function detectPileUp(ul) {
-    // Pile-up signature: 2+ between wraps/hosts adjacent with no topics between, often near top.
+  function lastTopic(ulEl, topics) {
     try {
-      var kids = ul.children;
-      var run = 0;
-      var maxRun = 0;
-      for (var i = 0; i < kids.length; i++) {
-        var el = kids[i];
-        var isBetween = false;
-        if (isHost(el)) {
-          isBetween = !!(el.querySelector && el.querySelector(BETWEEN_WRAP_SEL));
-        } else if (el.matches && el.matches(BETWEEN_WRAP_SEL)) {
-          isBetween = true;
-        }
-        if (isBetween) {
-          run++;
-          if (run > maxRun) maxRun = run;
-        } else if (el.matches && el.matches(TOPIC_LI_SEL)) {
-          run = 0;
-        } else {
-          // other nodes reset lightly
-          run = 0;
-        }
-      }
-      return maxRun >= 2;
+      topics = topics || getTopics(ulEl);
+      return topics && topics.length ? topics[topics.length - 1] : null;
+    } catch (e) { return null; }
+  }
+
+  function moveAfter(node, anchor) {
+    try {
+      if (!node || !anchor || !anchor.insertAdjacentElement) return;
+      if (node.previousElementSibling === anchor) return;
+      anchor.insertAdjacentElement('afterend', node);
     } catch (e) {}
-    return false;
   }
 
-  function redistribute(ul) {
+  function placeOrPend(host, ulEl, topics) {
     try {
-      if (!ul) return;
+      if (!host) return;
+      ulEl = ulEl || ensureUL();
+      if (!ulEl) return;
 
-      // Step 1: wrap any direct child between DIVs into LI hosts (makes list stable)
-      ul.querySelectorAll(':scope > ' + BETWEEN_WRAP_SEL).forEach(function(w){ ensureHostForWrap(w, ul); });
+      topics = topics || getTopics(ulEl);
 
-      // Step 2: only act if we see pile-up (avoid touching infinite scroll during normal flow)
-      if (!detectPileUp(ul)) return;
+      var after = getAfter(host);
+      if (!after) {
+        var lt = lastTopic(ulEl, topics);
+        if (lt) moveAfter(host, lt);
+        host.classList && host.classList.remove(PENDING_CLASS);
+        return;
+      }
 
-      // Move each host to immediately after the closest previous topic LI at its current position.
-      var hosts = ul.querySelectorAll(':scope > li.' + HOST_CLASS);
-      hosts.forEach(function(host){
-        try {
-          var wrap = host.querySelector && host.querySelector(BETWEEN_WRAP_SEL);
-          if (!wrap) return;
+      if (after > topics.length) {
+        var lt2 = lastTopic(ulEl, topics);
+        if (lt2) moveAfter(host, lt2);
+        host.classList && host.classList.add(PENDING_CLASS);
+        return;
+      }
 
-          var anchor = previousTopicLi(host);
-          if (!anchor) return; // if none, don't move (prevents yanking to top/bottom)
+      var anchor = topics[after - 1];
+      if (anchor) moveAfter(host, anchor);
+      host.classList && host.classList.remove(PENDING_CLASS);
+    } catch (e) {}
+  }
 
-          if (host.previousElementSibling !== anchor) {
-            anchor.insertAdjacentElement('afterend', host);
-          }
-        } catch (e) {}
+  function reconcile() {
+    var ulEl = ensureUL();
+    if (!ulEl) return;
+
+    var topics = getTopics(ulEl);
+
+    try {
+      ulEl.querySelectorAll(':scope > ' + BETWEEN_WRAP_SEL).forEach(function (w) {
+        var h = ensureHostForWrap(w, ulEl);
+        if (h) placeOrPend(h, ulEl, topics);
+      });
+
+      ulEl.querySelectorAll('li.' + HOST_CLASS).forEach(function (h) {
+        placeOrPend(h, ulEl, topics);
+      });
+
+      ulEl.querySelectorAll(BETWEEN_WRAP_SEL).forEach(function (w) {
+        var h = ensureHostForWrap(w, ulEl) || (w.closest ? w.closest('li.' + HOST_CLASS) : null);
+        if (h) placeOrPend(h, ulEl, topics);
       });
     } catch (e) {}
   }
 
-  function schedule(reason) {
+  function scheduleReconcile() {
     var now = Date.now();
-    if (now - lastRun < COOLDOWN) return;
     if (scheduled) return;
+    if (now - lastRun < COOLDOWN) return;
     scheduled = true;
+    lastRun = now;
     requestAnimationFrame(function () {
       scheduled = false;
-      lastRun = Date.now();
-      try {
-        var ul = getTopicList();
-        if (!ul) return;
-        redistribute(ul);
-      } catch (e) {}
+      reconcile();
     });
   }
 
-  function init() {
-    schedule('init');
+  function initObserver() {
+    var ulEl = ensureUL();
+    if (!ulEl || mo) return;
 
-    // Observe only the topic list once available
-    try {
-      if (typeof MutationObserver !== 'undefined') {
-        var observeList = function(ul){
-          if (!ul) return;
-          var mo = new MutationObserver(function(muts){
-            // schedule on any change; redistribute() itself is guarded by pile-up detection
-            schedule('mo');
-          });
-          mo.observe(ul, { childList: true, subtree: true });
-        };
+    mo = new MutationObserver(function () {
+      scheduleReconcile();
+    });
 
-        var ul = getTopicList();
-        if (ul) observeList(ul);
-        else {
-          var mo2 = new MutationObserver(function(){
-            var u2 = getTopicList();
-            if (u2) {
-              try { observeList(u2); } catch(e){}
-              try { mo2.disconnect(); } catch(e){}
-            }
-          });
-          mo2.observe(document.documentElement || document.body, { childList: true, subtree: true });
-        }
-      }
-    } catch (e) {}
+    mo.observe(ulEl, { childList: true, subtree: true });
+  }
+
+  function init() {
+    scheduleViewportPoke('init');
+    initObserver();
+    scheduleReconcile();
 
-    // NodeBB events: run after infinite scroll batches
     if (window.jQuery) {
       try {
-        window.jQuery(window).on('action:ajaxify.end action:infiniteScroll.loaded', function(){
-          setTimeout(function(){ schedule('event'); }, 50);
-          setTimeout(function(){ schedule('event2'); }, 400);
+        window.jQuery(window).on('action:ajaxify.end action:infiniteScroll.loaded', function () {
+          ul = null;
+          try { if (mo) mo.disconnect(); } catch (e) {}
+          mo = null;
+          initObserver();
+          scheduleReconcile();
+          scheduleViewportPoke('ajaxify.end');
+          setTimeout(scheduleReconcile, 120);
+          setTimeout(scheduleReconcile, 500);
         });
       } catch (e) {}
     }
+
+    var tries = 0;
+    var t = setInterval(function () {
+      tries++;
+      if (ensureUL()) {
+        clearInterval(t);
+        initObserver();
+        scheduleReconcile();
+      }
+      if (tries > 30) clearInterval(t);
+    }, 200);
   }
 
   if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
   else init();
 })();
-// ===== /V17 =====
-
-
-
-// ===== V17 empty-refresh (no move) =====
-// Goal: if a between-ad is visible but still has no ad iframe, gently poke Ezoic/GPT to render.
-(function () {
-  var BETWEEN_WRAP_SEL = 'div.nodebb-ezoic-wrap.ezoic-ad-between';
-  var seen = new WeakMap();
-  var io = null;
-  // NOTE: Calling ezstandalone.showAds() was triggering extra bidder requests
-  // (and in your setup, surfacing ServiceWorker/CORS failures) which made
-  // fills slower and created visible repositioning. We only do a tiny scroll
-  // nudge here, because manual micro-scroll reliably triggers a fill.
-  var microScrollCooldownUntil = 0;
-
-  function now() { return Date.now ? Date.now() : +new Date(); }
-
-  function getSlotId(wrap) {
-    try {
-      var gpt = wrap.querySelector('[id^="div-gpt-ad-"]');
-      return gpt ? gpt.id : null;
-    } catch (e) { return null; }
-  }
-
-  function hasAnyCreative(wrap) {
-    try {
-      // Any iframe (safeframe or normal) inside the wrap counts as rendered.
-      if (wrap.querySelector('iframe')) return true;
-      // Some formats use ins/amp/other nodes.
-      if (wrap.querySelector('amp-ad, amp-embed, ins.adsbygoogle')) return true;
-    } catch (e) {}
-    return false;
-  }
-
-  function microScrollNudge() {
-    var t = now();
-    if (t < microScrollCooldownUntil) return;
-    microScrollCooldownUntil = t + 1200;
-
-    // Prefer a real 1px scroll + restore: this matches the observed manual fix.
-    try {
-      var y = window.pageYOffset || document.documentElement.scrollTop || 0;
-      window.scrollTo(0, y + 1);
-      (window.requestAnimationFrame || setTimeout)(function () {
-        try { window.scrollTo(0, y); } catch (e) {}
-        try { window.dispatchEvent(new Event('scroll')); } catch (e) {}
-      }, 16);
-      return;
-    } catch (e) {}
-
-    // Fallback: nudge listeners.
-    try { window.dispatchEvent(new Event('scroll')); } catch (e) {}
-  }
-
-  function scheduleCheck(wrap) {
-    try {
-      if (!wrap || wrap.nodeType !== 1) return;
-      if (hasAnyCreative(wrap)) return;
-
-      var meta = seen.get(wrap);
-      var t = now();
-      if (!meta) {
-        meta = { firstSeen: t, checks: 0 };
-        seen.set(wrap, meta);
-      }
-
-      // Give the normal pipeline time to render.
-      if (meta.checks === 0) {
-        setTimeout(function () { scheduleCheck(wrap); }, 700);
-        meta.checks++;
-        return;
-      }
-
-      if (hasAnyCreative(wrap)) return;
-
-      // Still empty -> poke (micro-scroll only; no showAds/refresh calls).
-      var id = getSlotId(wrap) || 'none';
-      try { console.log('[EZ EMPTY]', id); } catch (e) {}
-      microScrollNudge();
-
-      // Re-check once after the nudge, but do not loop.
-      setTimeout(function () {
-        if (!wrap.isConnected) return;
-        if (hasAnyCreative(wrap)) return;
-        // Still empty: leave it to the native pipeline; avoid repeated nudges.
-      }, 900);
-    } catch (e) {}
-  }
-
-  function ensureIO() {
-    if (io) return;
-    if (!('IntersectionObserver' in window)) return;
+// ===== /V17.8 =====
 
-    io = new IntersectionObserver(function (entries) {
-      for (var i = 0; i < entries.length; i++) {
-        var e = entries[i];
-        if (!e.isIntersecting) continue;
-        scheduleCheck(e.target);
-      }
-    }, { root: null, rootMargin: '900px 0px 900px 0px', threshold: 0.01 });
-
-    // Observe existing wraps.
-    try {
-      var wraps = document.querySelectorAll(BETWEEN_WRAP_SEL);
-      for (var j = 0; j < wraps.length; j++) io.observe(wraps[j]);
-    } catch (e) {}
-
-    // Observe new wraps.
-    try {
-      var mo = new MutationObserver(function (muts) {
-        for (var k = 0; k < muts.length; k++) {
-          var m = muts[k];
-          if (!m.addedNodes) continue;
-          for (var n = 0; n < m.addedNodes.length; n++) {
-            var node = m.addedNodes[n];
-            if (!node || node.nodeType !== 1) continue;
-            if (node.matches && node.matches(BETWEEN_WRAP_SEL)) {
-              io.observe(node);
-            } else if (node.querySelectorAll) {
-              var inner = node.querySelectorAll(BETWEEN_WRAP_SEL);
-              for (var q = 0; q < inner.length; q++) io.observe(inner[q]);
-            }
-          }
-        }
-      });
-      mo.observe(document.body, { childList: true, subtree: true });
-    } catch (e) {}
-  }
-
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', ensureIO, { once: true });
-  } else {
-    ensureIO();
-  }
-})();

package/public/style.css

@@ -86,3 +86,20 @@ li.nodebb-ezoic-host { list-style: none; width: 100%; display: block; }
 li.nodebb-ezoic-host > .nodebb-ezoic-wrap.ezoic-ad-between { width: 100%; display: block; }
 /* ===== /V17 ===== */
 
+
+
+/* ===== V17.8 pending slots (prevents pile-up top/bottom) ===== */
+li.nodebb-ezoic-host { list-style:none; width:100%; display:block; }
+li.nodebb-ezoic-host > .nodebb-ezoic-wrap.ezoic-ad-between { width:100%; display:block; }
+
+/* slots whose anchor topic isn't loaded yet */
+li.nodebb-ezoic-host.nodebb-ezoic-pending{
+  max-height: 0 !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  overflow: hidden !important;
+  opacity: 0 !important;
+  pointer-events: none !important;
+}
+/* ===== /V17.8 ===== */
+