nodebb-plugin-ezoic-infinite 1.6.6 → 1.6.8

package/package.json

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

package/public/client.js

@@ -1351,45 +1351,52 @@ function buildOrdinalMap(items) {
 
 // ===== CLEAN REFRACTOR: visibility manager for Ezoic wraps =====
 (function () {
-  // v2.4 (anchor-guard):
-  // Issue reported: when scrolling back up, ad wraps accumulate before the first post.
-  // Root cause (most likely): some script/virtualization detaches ad nodes from their original place and
-  // re-inserts them near the top, without their original context.
+  // 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"
   //
-  // Fix:
-  // - On creation of each wrap, insert a hidden "anchor" node right before it and tag the wrap with that anchor id.
-  // - Periodically validate: if a wrap is no longer immediately preceded by its anchor, remove the wrap.
-  //   (We do NOT recreate here; the normal injector will insert correct wraps as needed.)
+  // 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.
   //
-  // We also keep v2.3 no-redefine rules:
-  // - no wrap deletion for cleanup except for misplaced wraps / duplicate placeholders
-  // - showAds only once per placeholder id
+  // 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 BETWEEN_SELECTOR = '.nodebb-ezoic-wrap.ezoic-ad-between';
-  var MESSAGE_SELECTOR = '.nodebb-ezoic-wrap.ezoic-ad-message';
-  var WRAP_SELECTOR = BETWEEN_SELECTOR + ', ' + MESSAGE_SELECTOR;
+  var WRAP_SELECTOR = '.nodebb-ezoic-wrap';
+  var PLACEHOLDER_SELECTOR = '[data-ezoic-id]';
 
-  var MAX_SHOW_PER_TICK = 4;
+  // show tuning
+  var MAX_SHOW_PER_TICK = 3;
 
-  // validation throttles
-  var VALIDATE_COOLDOWN_MS = 260;
-  var lastValidate = 0;
+  // 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;
 
-  // internal state
-  var activatedById = Object.create(null);
+  // state
+  var canonicalById = Object.create(null); // id -> element
+  var activatedById = Object.create(null); // id -> ts
   var showQueue = [];
   var showTicking = false;
 
-  function getIdFromWrap(w) {
-    try { return w.getAttribute('data-ezoic-wrapid'); } catch (e) { return null; }
-  }
-  function getIdFromPlaceholder(w) {
+  function getId(w) {
     try {
-      var ph = w.querySelector('[data-ezoic-id]');
-      return ph ? ph.getAttribute('data-ezoic-id') : null;
-    } catch (e) { return null; }
+      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 getId(w) { return getIdFromWrap(w) || getIdFromPlaceholder(w); }
 
   function isFilled(w) {
     try {
@@ -1428,227 +1435,160 @@ function buildOrdinalMap(items) {
     });
   }
 
-  // --- Anchor guard ---
-  function ensureAnchor(w) {
+  function createAnchorForDuplicate(w, id) {
     try {
-      if (!w || !w.parentNode) return;
-      if (w.getAttribute('data-ezoic-anchored') === '1') return;
-
-      var wrapUid = w.getAttribute('data-ezoic-wrapuid');
-      if (!wrapUid) {
-        wrapUid = String(Date.now()) + '-' + Math.floor(Math.random() * 1e9);
-        w.setAttribute('data-ezoic-wrapuid', wrapUid);
-      }
-
-      // If already preceded by matching anchor, mark anchored.
-      var prev = w.previousSibling;
-      if (prev && prev.nodeType === 1 && prev.classList && prev.classList.contains('nodebb-ezoic-anchor')) {
-        if (prev.getAttribute('data-anchor-for') === wrapUid) {
-          w.setAttribute('data-ezoic-anchored', '1');
-          return;
-        }
-      }
-
-      // Create anchor node
       var a = document.createElement('span');
-      a.className = 'nodebb-ezoic-anchor';
-      a.setAttribute('data-anchor-for', wrapUid);
-      a.style.display = 'none';
-
+      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.setAttribute('data-ezoic-anchored', '1');
+      w.remove();
     } catch (e) {}
   }
 
-  function validateAnchors() {
-    var now = Date.now();
-    if (now - lastValidate < VALIDATE_COOLDOWN_MS) return;
-    lastValidate = now;
-
+  function normalizeDomOnce() {
+    // Build canonical map; convert duplicates to anchors.
     try {
-      // Remove wraps that lost their anchor adjacency (they have been moved)
-      var wraps = document.querySelectorAll('.nodebb-ezoic-wrap');
+      var wraps = document.querySelectorAll(WRAP_SELECTOR);
       for (var i = 0; i < wraps.length; i++) {
         var w = wraps[i];
-        try {
-          var uid = w.getAttribute('data-ezoic-wrapuid');
-          if (!uid) {
-            // If it's an old wrap with no uid, anchor it once.
-            ensureAnchor(w);
-            continue;
-          }
-          var prev = w.previousSibling;
-          if (!(prev && prev.nodeType === 1 && prev.classList && prev.classList.contains('nodebb-ezoic-anchor') && prev.getAttribute('data-anchor-for') === uid)) {
-            // Misplaced wrap -> remove it (prevents pile-up before first post)
-            w.remove();
-          }
-        } catch (e) {}
-      }
+        var id = getId(w);
+        if (!id) continue;
 
-      // Remove orphan anchors (anchor without following wrap)
-      var anchors = document.querySelectorAll('.nodebb-ezoic-anchor');
-      for (var j = 0; j < anchors.length; j++) {
-        var a = anchors[j];
-        try {
-          var next = a.nextSibling;
-          if (!(next && next.nodeType === 1 && next.classList && next.classList.contains('nodebb-ezoic-wrap'))) {
-            a.remove();
-          }
-        } catch (e) {}
+        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) {}
   }
 
-  // --- De-dupe placeholders to avoid Ezoic warnings ---
-  function dedupePlaceholders() {
-    var seen = Object.create(null);
+  function getCandidateAnchors(id) {
     try {
-      document.querySelectorAll('.nodebb-ezoic-wrap [data-ezoic-id]').forEach(function (ph) {
-        try {
-          var id = ph.getAttribute('data-ezoic-id');
-          if (!id) return;
-          var wrap = ph.closest('.nodebb-ezoic-wrap');
-          if (!wrap) return;
-
-          // ensure anchor for any wrap we touch
-          ensureAnchor(wrap);
+      return document.querySelectorAll('.nodebb-ezoic-slot-anchor[data-slot-for="' + String(id) + '"]');
+    } catch (e) {
+      return [];
+    }
+  }
 
-          if (seen[id]) {
-            // remove duplicates; keep first occurrence
-            wrap.remove();
-          } else {
-            seen[id] = true;
-          }
-        } catch (e) {}
-      });
+  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;
   }
 
-  // --- Visibility: trigger show once if empty ---
-  var io = null;
-  function installIO() {
-    if (io || typeof IntersectionObserver === 'undefined') return;
+  function moveCanonicalToAnchor(id, anchor) {
+    var now = Date.now();
+    if (now - lastMove < MOVE_COOLDOWN_MS) return;
+    lastMove = now;
 
-    io = new IntersectionObserver(function (entries) {
-      try {
-        entries.forEach(function (e) {
-          if (!e || !e.target) return;
+    try {
+      var w = canonicalById[id];
+      if (!w || !anchor || !anchor.parentNode) return;
 
-          // Always ensure anchor while visible/near
-          ensureAnchor(e.target);
+      // If already directly after anchor, nothing to do.
+      if (w.parentNode === anchor.parentNode && w.previousSibling === anchor) return;
 
-          if (e.isIntersecting) {
-            var id = getId(e.target);
-            if (!id) return;
+      // Insert canonical wrap right after anchor.
+      if (anchor.nextSibling) anchor.parentNode.insertBefore(w, anchor.nextSibling);
+      else anchor.parentNode.appendChild(w);
+    } catch (e) {}
+  }
 
-            if (isFilled(e.target)) {
-              activatedById[id] = activatedById[id] || Date.now();
-              return;
-            }
-            enqueueShow(id);
+  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) {}
-    }, { root: null, rootMargin: '1200px 0px 1200px 0px', threshold: 0.01 });
+        }
+      }
+    } catch (e) {}
 
-    try { document.querySelectorAll(WRAP_SELECTOR).forEach(function (w) { try { ensureAnchor(w); io.observe(w); } catch(e) {} }); } catch (e) {}
+    scheduleShowTick();
   }
 
-  // Observe newly added wraps and anchor them
+  // 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) {
-      try { dedupePlaceholders(); } catch (e) {}
-
-      if (!io) return;
-      try {
-        for (var i = 0; i < muts.length; i++) {
-          var m = muts[i];
-          if (!m.addedNodes) continue;
-          for (var j = 0; j < m.addedNodes.length; j++) {
-            var n = m.addedNodes[j];
-            if (!n || n.nodeType !== 1) continue;
-
-            if (n.matches && n.matches(WRAP_SELECTOR)) {
-              ensureAnchor(n);
-              try { io.observe(n); } catch (e) {}
-              var id = getId(n);
-              if (id && !isFilled(n)) enqueueShow(id);
-              else if (id) activatedById[id] = activatedById[id] || Date.now();
-            } else if (n.querySelectorAll) {
-              var inner = n.querySelectorAll(WRAP_SELECTOR);
-              for (var k = 0; k < inner.length; k++) {
-                ensureAnchor(inner[k]);
-                try { io.observe(inner[k]); } catch (e) {}
-              }
-            }
-          }
-        }
-      } catch (e) {}
+      // 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() {
-    // anchor + dedupe existing
-    try {
-      document.querySelectorAll('.nodebb-ezoic-wrap').forEach(function (w) { ensureAnchor(w); });
-    } catch (e) {}
-    dedupePlaceholders();
-
-    installIO();
+    normalizeDomOnce();
     installMO();
 
-    // initial eager show for empty visible-ish wraps (bounded)
-    try {
-      var vh = window.innerHeight || document.documentElement.clientHeight || 0;
-      var margin = 900;
-      var wraps = document.querySelectorAll(WRAP_SELECTOR);
-      var budget = 12;
-      for (var i = 0; i < wraps.length && budget > 0; i++) {
-        var w = wraps[i];
-        ensureAnchor(w);
-        var r = w.getBoundingClientRect();
-        if (r.bottom >= -margin && r.top <= (vh + margin)) {
-          var id = getId(w);
-          if (id) {
-            if (isFilled(w)) activatedById[id] = activatedById[id] || Date.now();
-            else enqueueShow(id);
-          }
-          budget--;
-        }
-      }
-    } catch (e) {}
-
-    // validate regularly on scroll/resize (cheap)
-    window.addEventListener('scroll', function () {
-      validateAnchors();
-      scheduleShowTick();
-    }, { passive: true });
-    window.addEventListener('resize', function () {
-      validateAnchors();
-      scheduleShowTick();
-    }, { passive: true });
+    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 () {
-          try { document.querySelectorAll('.nodebb-ezoic-wrap').forEach(function (w) { ensureAnchor(w); }); } catch (e) {}
-          dedupePlaceholders();
-          validateAnchors();
-          scheduleShowTick();
+          normalizeDomOnce();
+          recycleTick();
         }, 0);
       });
     }
 
-    // periodic validate safety net
-    setInterval(validateAnchors, 1200);
-
-    setTimeout(function () { validateAnchors(); scheduleShowTick(); }, 0);
+    setInterval(recycleTick, 900);
+    setTimeout(recycleTick, 0);
   }
 
   if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);