nodebb-plugin-ezoic-infinite 1.6.9 → 1.6.11

package/package.json

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

package/public/client.js

@@ -1,6 +1,37 @@
 (function () {
   'use strict';
 
+function createWrapHostAndWrap(kindClass, targetEl) {
+  // For <ul>/<ol> we MUST insert a <li> to keep valid DOM.
+  // But for compatibility with existing selectors (often 'div.nodebb-ezoic-wrap'),
+  // we keep the actual wrap as a DIV inside the LI.
+  var host = null;
+  try {
+    if (kindClass === 'ezoic-ad-between') {
+      var p = targetEl && targetEl.parentElement;
+      if (p && (p.tagName === 'UL' || p.tagName === 'OL')) {
+        host = document.createElement('li');
+        host.className = 'nodebb-ezoic-host';
+        host.setAttribute('role', 'listitem');
+        host.style.listStyle = 'none';
+        host.style.width = '100%';
+      }
+    }
+  } catch (e) {}
+
+  var pair = createWrapHostAndWrap(kindClass, el);
+    var host = pair.hostEl;
+    var wrap = pair.wrapEl;
+  wrap.className = 'nodebb-ezoic-wrap ' + kindClass;
+
+  if (host) {
+    host.appendChild(wrap);
+    return { hostEl: host, wrapEl: wrap };
+  }
+  return { hostEl: wrap, wrapEl: wrap };
+}
+
+
   // Track scroll direction to avoid aggressive recycling when the user scrolls upward.
   // Recycling while scrolling up is a common cause of ads "bunching" and a "disappearing too fast" feeling.
   let lastScrollY = 0;
@@ -637,7 +668,9 @@ function globalGapFixInit() {
   // ---------------- insertion primitives ----------------
 
   function buildWrap(id, kindClass, afterPos, createPlaceholder) {
-    const wrap = document.createElement('div');
+    const pair = createWrapHostAndWrap(kindClass, el);
+    const host = pair.hostEl;
+    const wrap = pair.wrapEl;
     wrap.className = `${WRAP_CLASS} ${kindClass}`;
     wrap.setAttribute('data-ezoic-after', String(afterPos));
     wrap.setAttribute('data-ezoic-wrapid', String(id));
@@ -704,13 +737,144 @@ function globalGapFixInit() {
   }
 
   function pruneOrphanWraps(kindClass, items) {
+    // Topic pages can be virtualized (posts removed from DOM as you scroll).
+    // When that happens, previously-inserted ad wraps may become "orphan" nodes with no
+    // nearby post containers, which leads to ads clustering together when scrolling back up.
+    // We prune only *true* orphans that are far offscreen to keep the UI stable.
+    if (!items || !items.length) return 0;
+    const itemSet = new Set(items);
+    const wraps = document.querySelectorAll(`.${WRAP_CLASS}.${kindClass}`);
+    let removed = 0;
+
+    const isFilled = (wrap) => {
+      return !!(wrap.querySelector('iframe, ins, img, video, [data-google-container-id]'));
+    };
+
+    const hasNearbyItem = (wrap) => {
+      // NodeBB/skins can inject separators/spacers; be tolerant.
+      let prev = wrap.previousElementSibling;
+      for (let i = 0; i < 14 && prev; i++) {
+        if (itemSet.has(prev)) return true;
+        prev = prev.previousElementSibling;
+      }
+      let next = wrap.nextElementSibling;
+      for (let i = 0; i < 14 && next; i++) {
+        if (itemSet.has(next)) return true;
+        next = next.nextElementSibling;
+      }
+      return false;
+    };
+
+    wraps.forEach((wrap) => {
+      // Never prune pinned placements.
+      try {
+        if (wrap.getAttribute('data-ezoic-pin') === '1') return;
+      } catch (e) {}
+
+      // For message/topic pages we may prune filled or empty orphans if they are far away,
+      // otherwise consecutive "stacks" can appear when posts are virtualized.
+      const isMessage = (kindClass === 'ezoic-ad-message');
+      if (!isMessage && isFilled(wrap)) return; // never prune filled ads for non-message lists
+
+      // Never prune a fresh wrap: it may fill late.
+      try {
+        const created = parseInt(wrap.getAttribute('data-created') || '0', 10);
+        if (created && (now() - created) < keepEmptyWrapMs()) return;
+      } catch (e) {}
+
+if (hasNearbyItem(wrap)) {
+  try { wrap.classList && wrap.classList.remove('ez-orphan-hidden'); wrap.style && (wrap.style.display = ''); } catch (e) {}
   return;
 }
 
-  function decluster(kindClass) {
-  return;
+// If the anchor item is no longer in the DOM (virtualized), hide the wrap so ads never "stack"
+// back-to-back while scrolling. We'll recycle it when its anchor comes back.
+try { wrap.classList && wrap.classList.add('ez-orphan-hidden'); wrap.style && (wrap.style.display = 'none'); } catch (e) {}
+
+// For message ads: only release if far offscreen to avoid perceived "vanishing" during fast scroll.
+if (isMessage) {
+  try {
+    const r = wrap.getBoundingClientRect();
+    const vh = Math.max(1, window.innerHeight || 1);
+    const farAbove = r.bottom < -vh * 2;
+    const farBelow = r.top > vh * 4;
+    if (!farAbove && !farBelow) return;
+  } catch (e) {
+    return;
+  }
 }
 
+withInternalDomChange(() => releaseWrapNode(wrap));
+removed++;
+    });
+
+    return removed;
+  }
+
+  function decluster(kindClass) {
+    // Remove "near-consecutive" wraps (keep the first). Be tolerant of spacer nodes.
+    const wraps = Array.from(document.querySelectorAll(`.${WRAP_CLASS}.${kindClass}`));
+    if (wraps.length < 2) return 0;
+
+    const isWrap = (el) => !!(el && el.classList && el.classList.contains(WRAP_CLASS));
+
+    const isFilled = (wrap) => {
+      return !!(wrap && wrap.querySelector && wrap.querySelector('iframe, ins, img, video, [data-google-container-id]'));
+    };
+
+    const isFresh = (wrap) => {
+      try {
+        const created = parseInt(wrap.getAttribute('data-created') || '0', 10);
+        return created && (now() - created) < keepEmptyWrapMs();
+      } catch (e) {
+        return false;
+      }
+    };
+
+    let removed = 0;
+    for (const w of wraps) {
+      // Never decluster pinned placements.
+      try {
+        if (w.getAttribute && w.getAttribute('data-ezoic-pin') === '1') continue;
+      } catch (e) {}
+
+      let prev = w.previousElementSibling;
+      for (let i = 0; i < 3 && prev; i++) {
+        if (isWrap(prev)) {
+          // If the previous wrap is pinned, keep this one (spacing is intentional).
+          try {
+            if (prev.getAttribute && prev.getAttribute('data-ezoic-pin') === '1') break;
+          } catch (e) {}
+
+          // Never remove a wrap that is already filled; otherwise it looks like
+          // ads "disappear" while scrolling. Only remove the empty neighbour.
+          const prevFilled = isFilled(prev);
+          const curFilled = isFilled(w);
+
+          if (curFilled) {
+            // If the previous one is empty (and not fresh), drop the previous instead.
+            if (!prevFilled && !isFresh(prev)) {
+              withInternalDomChange(() => releaseWrapNode(prev));
+              removed++;
+            }
+            break;
+          }
+
+          // Current is empty.
+          // Don't decluster two "fresh" empty wraps — it can reduce fill on slow auctions.
+          // Only decluster when previous is filled, or when current is stale.
+          if (prevFilled || !isFresh(w)) {
+            withInternalDomChange(() => releaseWrapNode(w));
+            removed++;
+          }
+          break;
+        }
+        prev = prev.previousElementSibling;
+      }
+    }
+    return removed;
+  }
+
   // ---------------- show (preload / fast fill) ----------------
 
   function ensurePreloadObserver() {
@@ -1341,263 +1505,3 @@ function buildOrdinalMap(items) {
   insertHeroAdEarly().catch(() => {});
   requestBurst();
 })();
-
-
-
-
-
-
-
-
-// ===== CLEAN REFRACTOR: visibility manager for Ezoic wraps =====
-(function () {
-  // v2.6 (slot-recycler):
-  // Observed:
-  // - When scrolling up, ad wraps accumulate before first post.
-  // - Ezoic logs: "Placeholder Id X already defined" + "No valid placeholders for loadMore"
-  //
-  // Root cause:
-  // - Infinite scroll / templating introduces MULTIPLE instances of the SAME placeholder id in DOM.
-  // - Ezoic expects each placeholder id to be unique on the page. Duplicates cause warnings and loadMore failure.
-  // - Some scripts then "re-home" the active slot near the top, causing pile-up.
-  //
-  // Fix strategy:
-  // - Keep EXACTLY ONE DOM node per placeholder id ("canonical wrap").
-  // - Replace any duplicate wraps with lightweight SLOT ANCHORS left in place.
-  // - As user scrolls, MOVE the canonical wrap to the closest visible anchor for that id.
-  //   (Move, not recreate => no re-define; prevents pile-up; ad follows the viewport.)
-  //
-  // We only handle .nodebb-ezoic-wrap.* nodes; we do not change post markup.
-
-  var WRAP_SELECTOR = '.nodebb-ezoic-wrap';
-  var PLACEHOLDER_SELECTOR = '[data-ezoic-id]';
-
-  // show tuning
-  var MAX_SHOW_PER_TICK = 3;
-
-  // recycler tuning
-  var ROOT_MARGIN = 1400;           // how far from viewport we consider an anchor "active"
-  var MOVE_COOLDOWN_MS = 120;       // avoid moving too often
-  var SCAN_COOLDOWN_MS = 150;       // throttle scroll scans
-  var lastScan = 0;
-  var lastMove = 0;
-
-  // state
-  var canonicalById = Object.create(null); // id -> element
-  var activatedById = Object.create(null); // id -> ts
-  var showQueue = [];
-  var showTicking = false;
-
-  function getId(w) {
-    try {
-      var id = w.getAttribute('data-ezoic-wrapid');
-      if (id) return id;
-      var ph = w.querySelector(PLACEHOLDER_SELECTOR);
-      if (ph) return ph.getAttribute('data-ezoic-id');
-    } catch (e) {}
-    return null;
-  }
-
-  function isFilled(w) {
-    try {
-      if (w.querySelector('iframe')) return true;
-      if (w.querySelector('[id^="google_ads_iframe"]')) return true;
-      if (w.querySelector('.ezoic-ad')) return true;
-    } catch (e) {}
-    return false;
-  }
-
-  function enqueueShow(id) {
-    if (!id) return;
-    if (activatedById[id]) return;
-    for (var i = 0; i < showQueue.length; i++) if (showQueue[i] === id) return;
-    showQueue.push(id);
-    scheduleShowTick();
-  }
-
-  function scheduleShowTick() {
-    if (showTicking) return;
-    showTicking = true;
-    requestAnimationFrame(function () {
-      showTicking = false;
-      var n = 0;
-      while (showQueue.length && n < MAX_SHOW_PER_TICK) {
-        var id = showQueue.shift();
-        try {
-          if (!activatedById[id] && window.ezstandalone && typeof window.ezstandalone.showAds === 'function') {
-            window.ezstandalone.showAds(String(id));
-            activatedById[id] = Date.now();
-          }
-        } catch (e) {}
-        n++;
-      }
-      if (showQueue.length) scheduleShowTick();
-    });
-  }
-
-  function createAnchorForDuplicate(w, id) {
-    try {
-      var a = document.createElement('span');
-      a.className = 'nodebb-ezoic-slot-anchor';
-      a.setAttribute('data-slot-for', String(id));
-      // keep after/index metadata if present
-      var after = w.getAttribute('data-ezoic-after');
-      if (after) a.setAttribute('data-ezoic-after', after);
-      a.style.display = 'block';
-      a.style.width = '100%';
-      // leave minimal height to keep spacing similar without large blank
-      a.style.minHeight = '1px';
-      w.parentNode.insertBefore(a, w);
-      w.remove();
-    } catch (e) {}
-  }
-
-  function normalizeDomOnce() {
-    // Build canonical map; convert duplicates to anchors.
-    try {
-      var wraps = document.querySelectorAll(WRAP_SELECTOR);
-      for (var i = 0; i < wraps.length; i++) {
-        var w = wraps[i];
-        var id = getId(w);
-        if (!id) continue;
-
-        if (!canonicalById[id]) {
-          canonicalById[id] = w;
-          // if already filled, mark activated
-          if (isFilled(w)) activatedById[id] = activatedById[id] || Date.now();
-        } else if (canonicalById[id] !== w) {
-          createAnchorForDuplicate(w, id);
-        }
-      }
-    } catch (e) {}
-  }
-
-  function getCandidateAnchors(id) {
-    try {
-      return document.querySelectorAll('.nodebb-ezoic-slot-anchor[data-slot-for="' + String(id) + '"]');
-    } catch (e) {
-      return [];
-    }
-  }
-
-  function anchorDistanceToViewport(a, vh) {
-    try {
-      var r = a.getBoundingClientRect();
-      // distance 0 if overlaps extended viewport, else min distance
-      if (r.bottom >= -ROOT_MARGIN && r.top <= (vh + ROOT_MARGIN)) return 0;
-      if (r.top > (vh + ROOT_MARGIN)) return r.top - (vh + ROOT_MARGIN);
-      if (r.bottom < -ROOT_MARGIN) return (-ROOT_MARGIN) - r.bottom;
-    } catch (e) {}
-    return 1e12;
-  }
-
-  function moveCanonicalToAnchor(id, anchor) {
-    var now = Date.now();
-    if (now - lastMove < MOVE_COOLDOWN_MS) return;
-    lastMove = now;
-
-    try {
-      var w = canonicalById[id];
-      if (!w || !anchor || !anchor.parentNode) return;
-
-      // If already directly after anchor, nothing to do.
-      if (w.parentNode === anchor.parentNode && w.previousSibling === anchor) return;
-
-      // Insert canonical wrap right after anchor.
-      if (anchor.nextSibling) anchor.parentNode.insertBefore(w, anchor.nextSibling);
-      else anchor.parentNode.appendChild(w);
-    } catch (e) {}
-  }
-
-  function recycleTick() {
-    var now = Date.now();
-    if (now - lastScan < SCAN_COOLDOWN_MS) return;
-    lastScan = now;
-
-    // ensure dom normalized before recycling
-    normalizeDomOnce();
-
-    var vh = window.innerHeight || document.documentElement.clientHeight || 0;
-    if (!vh) return;
-
-    try {
-      for (var id in canonicalById) {
-        if (!canonicalById[id]) continue;
-        var anchors = getCandidateAnchors(id);
-        if (!anchors || !anchors.length) continue;
-
-        // choose the first anchor that intersects extended viewport, otherwise closest
-        var best = null;
-        var bestDist = 1e12;
-        for (var i = 0; i < anchors.length; i++) {
-          var a = anchors[i];
-          var d = anchorDistanceToViewport(a, vh);
-          if (d === 0) { best = a; bestDist = 0; break; }
-          if (d < bestDist) { bestDist = d; best = a; }
-        }
-        if (best) {
-          moveCanonicalToAnchor(id, best);
-
-          // trigger show when canonical is near viewport and still empty
-          var w = canonicalById[id];
-          if (w) {
-            try {
-              var r = w.getBoundingClientRect();
-              if (r.bottom >= -ROOT_MARGIN && r.top <= (vh + ROOT_MARGIN)) {
-                if (isFilled(w)) activatedById[id] = activatedById[id] || Date.now();
-                else enqueueShow(id);
-              }
-            } catch (e) {}
-          }
-        }
-      }
-    } catch (e) {}
-
-    scheduleShowTick();
-  }
-
-  // Observe new content; normalize duplicates immediately
-  var moInstalled = false;
-  function installMO() {
-    if (moInstalled || typeof MutationObserver === 'undefined') return;
-    moInstalled = true;
-
-    var mo = new MutationObserver(function (muts) {
-      // When new nodes arrive, normalize and run one recycle tick.
-      normalizeDomOnce();
-      recycleTick();
-    });
-
-    try { mo.observe(document.documentElement || document.body, { childList: true, subtree: true }); } catch (e) {}
-  }
-
-  function init() {
-    normalizeDomOnce();
-    installMO();
-
-    window.addEventListener('scroll', recycleTick, { passive: true });
-    window.addEventListener('resize', recycleTick, { passive: true });
-
-    if (window.jQuery) {
-      window.jQuery(window).on('action:ajaxify.end action:infiniteScroll.loaded', function () {
-        setTimeout(function () {
-          normalizeDomOnce();
-          recycleTick();
-        }, 0);
-      });
-    }
-
-    setInterval(recycleTick, 900);
-    setTimeout(recycleTick, 0);
-  }
-
-  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
-  else init();
-})();
-// ===== /CLEAN REFRACTOR =====
-
-
-
-
-
-

package/public/style.css

@@ -81,7 +81,9 @@
 }
 
 
-/* ===== CLEAN REFRACTOR perf notes ===== */
-.nodebb-ezoic-wrap { contain: content; }
-/* ===== /CLEAN REFRACTOR ===== */
+/* ===== V12.1 li host wrapper ===== */
+li.nodebb-ezoic-host { list-style: none; width: 100%; }
+/* keep inner wrap full width */
+li.nodebb-ezoic-host > .nodebb-ezoic-wrap { width: 100%; }
+/* ===== /V12.1 ===== */