nodebb-plugin-ezoic-infinite 1.6.7 → 1.6.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-plugin-ezoic-infinite",
-  "version": "1.6.7",
+  "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,43 +1351,52 @@ function buildOrdinalMap(items) {
 
 // ===== CLEAN REFRACTOR: visibility manager for Ezoic wraps =====
 (function () {
-  // v2.5 (position-enforcer):
-  // - Keep "no-redefine" (showAds only once per id, dedupe placeholders).
-  // - Fix pile-up at top when scrolling up: wraps are being detached and re-inserted near the first post.
-  //   Adjacent-anchor can move with the wrap; so we anchor INSIDE the host post/topic element.
+  // 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"
   //
-  // Mechanism:
-  // 1) For each wrap, find a "host" element (closest previous post/topic item).
-  // 2) Insert an invisible marker span INSIDE that host (stays with host even if wrap is moved).
-  // 3) On scroll/interval, if wrap is not located right AFTER its host element, move it back.
+  // 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.
   //
-  // This moves existing DOM nodes back (no placeholder recreation).
+  // 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 ENFORCE_COOLDOWN_MS = 220;
-  var lastEnforce = 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 {
@@ -1426,268 +1435,160 @@ function buildOrdinalMap(items) {
     });
   }
 
-  // --- De-dupe placeholders to avoid Ezoic warnings ---
-  function dedupePlaceholders() {
-    var seen = Object.create(null);
+  function createAnchorForDuplicate(w, 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;
-          if (seen[id]) {
-            wrap.remove();
-          } else {
-            seen[id] = true;
-          }
-        } catch (e) {}
-      });
+      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) {}
   }
 
-  // --- Position Enforcer ---
-  function ensureUid(w) {
+  function normalizeDomOnce() {
+    // Build canonical map; convert duplicates to anchors.
     try {
-      var uid = w.getAttribute('data-ezoic-wrapuid');
-      if (!uid) {
-        uid = String(Date.now()) + '-' + Math.floor(Math.random() * 1e9);
-        w.setAttribute('data-ezoic-wrapuid', uid);
-      }
-      return uid;
-    } catch (e) { return null; }
-  }
-
-  function findHostForWrap(w) {
-    // Host should be a stable post/topic element, NOT the wrap itself.
-    // Heuristics: previous siblings that look like topic/post items.
-    try {
-      var cur = w.previousElementSibling;
-      // walk backward a bit
-      for (var i = 0; i < 18 && cur; i++) {
-        if (cur.classList && (cur.classList.contains('topic-item') || cur.classList.contains('posts-list-item') || cur.classList.contains('post') || cur.classList.contains('category-item'))) {
-          return cur;
-        }
-        if (cur.getAttribute) {
-          if (cur.getAttribute('data-pid') || cur.getAttribute('data-tid') || cur.getAttribute('data-topic-id') || cur.getAttribute('data-index')) return cur;
-        }
-        cur = cur.previousElementSibling;
-      }
+      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;
 
-      // fallback: walk up from wrap to find nearest list container, then approximate by data-ezoic-after index
-      var afterPos = parseInt(w.getAttribute('data-ezoic-after') || '0', 10) || 0;
-      if (afterPos > 0) {
-        var list = w.parentElement;
-        for (var up = 0; up < 6 && list && list !== document.body; up++) {
-          if (list.classList && (list.classList.contains('topic-list') || list.classList.contains('topics') || list.classList.contains('posts') || list.classList.contains('category'))) break;
-          list = list.parentElement;
-        }
-        if (list && list.querySelectorAll) {
-          var items = list.querySelectorAll('.topic-item, .posts-list-item, .post, [data-pid], [data-tid], [data-topic-id]');
-          if (items && items.length >= afterPos) {
-            return items[Math.min(items.length - 1, afterPos - 1)];
-          }
+        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) {}
-    return null;
   }
 
-  function ensureMarkerInHost(w) {
+  function getCandidateAnchors(id) {
     try {
-      var uid = ensureUid(w);
-      if (!uid) return;
-
-      var markerId = w.getAttribute('data-ezoic-markerid');
-      if (markerId) {
-        var existing = document.getElementById(markerId);
-        if (existing) return;
-      }
-
-      var host = findHostForWrap(w);
-      if (!host) return;
-
-      markerId = 'nodebb-ezoic-marker-' + uid;
-      // if already exists somewhere else, reuse
-      var m = document.getElementById(markerId);
-      if (!m) {
-        m = document.createElement('span');
-        m.id = markerId;
-        m.className = 'nodebb-ezoic-marker';
-        m.setAttribute('data-marker-for', uid);
-        m.style.display = 'none';
-        host.appendChild(m);
-      } else {
-        // ensure marker is inside host (if moved, re-append)
-        if (m.parentElement !== host) host.appendChild(m);
-      }
-
-      w.setAttribute('data-ezoic-markerid', markerId);
-    } catch (e) {}
+      return document.querySelectorAll('.nodebb-ezoic-slot-anchor[data-slot-for="' + String(id) + '"]');
+    } catch (e) {
+      return [];
+    }
   }
 
-  function insertAfter(ref, node) {
+  function anchorDistanceToViewport(a, vh) {
     try {
-      if (!ref || !ref.parentNode || !node) return;
-      if (ref.nextSibling) ref.parentNode.insertBefore(node, ref.nextSibling);
-      else ref.parentNode.appendChild(node);
+      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 enforcePositions() {
+  function moveCanonicalToAnchor(id, anchor) {
     var now = Date.now();
-    if (now - lastEnforce < ENFORCE_COOLDOWN_MS) return;
-    lastEnforce = now;
+    if (now - lastMove < MOVE_COOLDOWN_MS) return;
+    lastMove = now;
 
     try {
-      var wraps = document.querySelectorAll('.nodebb-ezoic-wrap');
-      for (var i = 0; i < wraps.length; i++) {
-        var w = wraps[i];
-        try {
-          ensureMarkerInHost(w);
-
-          var markerId = w.getAttribute('data-ezoic-markerid');
-          if (!markerId) continue;
+      var w = canonicalById[id];
+      if (!w || !anchor || !anchor.parentNode) return;
 
-          var marker = document.getElementById(markerId);
-          if (!marker || !marker.parentElement) continue;
+      // If already directly after anchor, nothing to do.
+      if (w.parentNode === anchor.parentNode && w.previousSibling === anchor) return;
 
-          var host = marker.parentElement;
-          // desired: wrap should be directly after host (as sibling)
-          if (!host.parentElement) continue;
-          if (w.parentElement !== host.parentElement || w.previousElementSibling !== host) {
-            insertAfter(host, w);
-          }
-        } catch (e) {}
-      }
+      // Insert canonical wrap right after anchor.
+      if (anchor.nextSibling) anchor.parentNode.insertBefore(w, anchor.nextSibling);
+      else anchor.parentNode.appendChild(w);
     } catch (e) {}
   }
 
-  // --- Visibility: trigger show once if empty ---
-  var io = null;
-  function installIO() {
-    if (io || typeof IntersectionObserver === 'undefined') return;
-
-    io = new IntersectionObserver(function (entries) {
-      try {
-        entries.forEach(function (e) {
-          if (!e || !e.target) return;
+  function recycleTick() {
+    var now = Date.now();
+    if (now - lastScan < SCAN_COOLDOWN_MS) return;
+    lastScan = now;
 
-          // ensure host marker on sight
-          ensureMarkerInHost(e.target);
+    // ensure dom normalized before recycling
+    normalizeDomOnce();
 
-          if (e.isIntersecting) {
-            var id = getId(e.target);
-            if (!id) return;
+    var vh = window.innerHeight || document.documentElement.clientHeight || 0;
+    if (!vh) return;
 
-            if (isFilled(e.target)) {
-              activatedById[id] = activatedById[id] || Date.now();
-              return;
-            }
-            enqueueShow(id);
+    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 { ensureMarkerInHost(w); io.observe(w); } catch(e) {} }); } catch (e) {}
+    scheduleShowTick();
   }
 
-  // Observe newly added wraps and marker 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)) {
-              ensureMarkerInHost(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++) {
-                ensureMarkerInHost(inner[k]);
-                try { io.observe(inner[k]); } catch (e) {}
-              }
-            }
-          }
-        }
-      } catch (e) {}
-
-      // enforce after mutations (cheap throttle will apply)
-      enforcePositions();
+      // 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() {
-    dedupePlaceholders();
-
-    try {
-      document.querySelectorAll('.nodebb-ezoic-wrap').forEach(function (w) { ensureMarkerInHost(w); });
-    } catch (e) {}
-
-    installIO();
+    normalizeDomOnce();
     installMO();
 
-    // initial eager show (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];
-        ensureMarkerInHost(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) {}
-
-    window.addEventListener('scroll', function () {
-      enforcePositions();
-      scheduleShowTick();
-    }, { passive: true });
-    window.addEventListener('resize', function () {
-      enforcePositions();
-      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 () {
-          dedupePlaceholders();
-          try { document.querySelectorAll('.nodebb-ezoic-wrap').forEach(function (w) { ensureMarkerInHost(w); }); } catch (e) {}
-          enforcePositions();
-          scheduleShowTick();
+          normalizeDomOnce();
+          recycleTick();
         }, 0);
       });
     }
 
-    setInterval(enforcePositions, 1000);
-    setTimeout(function () { enforcePositions(); scheduleShowTick(); }, 0);
+    setInterval(recycleTick, 900);
+    setTimeout(recycleTick, 0);
   }
 
   if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);