nodebb-plugin-ezoic-infinite 1.6.6 → 1.6.7

package/package.json

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

package/public/client.js

@@ -1351,19 +1351,17 @@ 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.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.
   //
-  // 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.)
+  // 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.
   //
-  // 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
+  // This moves existing DOM nodes back (no placeholder recreation).
 
   var BETWEEN_SELECTOR = '.nodebb-ezoic-wrap.ezoic-ad-between';
   var MESSAGE_SELECTOR = '.nodebb-ezoic-wrap.ezoic-ad-message';
@@ -1372,8 +1370,8 @@ function buildOrdinalMap(items) {
   var MAX_SHOW_PER_TICK = 4;
 
   // validation throttles
-  var VALIDATE_COOLDOWN_MS = 260;
-  var lastValidate = 0;
+  var ENFORCE_COOLDOWN_MS = 220;
+  var lastEnforce = 0;
 
   // internal state
   var activatedById = Object.create(null);
@@ -1428,99 +1426,140 @@ function buildOrdinalMap(items) {
     });
   }
 
-  // --- Anchor guard ---
-  function ensureAnchor(w) {
+  // --- De-dupe placeholders to avoid Ezoic warnings ---
+  function dedupePlaceholders() {
+    var seen = Object.create(null);
     try {
-      if (!w || !w.parentNode) return;
-      if (w.getAttribute('data-ezoic-anchored') === '1') return;
+      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) {}
+      });
+    } catch (e) {}
+  }
 
-      var wrapUid = w.getAttribute('data-ezoic-wrapuid');
-      if (!wrapUid) {
-        wrapUid = String(Date.now()) + '-' + Math.floor(Math.random() * 1e9);
-        w.setAttribute('data-ezoic-wrapuid', wrapUid);
+  // --- Position Enforcer ---
+  function ensureUid(w) {
+    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; }
+  }
 
-      // 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;
+  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;
       }
 
-      // Create anchor node
-      var a = document.createElement('span');
-      a.className = 'nodebb-ezoic-anchor';
-      a.setAttribute('data-anchor-for', wrapUid);
-      a.style.display = 'none';
-
-      w.parentNode.insertBefore(a, w);
-      w.setAttribute('data-ezoic-anchored', '1');
+      // 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)];
+          }
+        }
+      }
     } catch (e) {}
+    return null;
   }
 
-  function validateAnchors() {
-    var now = Date.now();
-    if (now - lastValidate < VALIDATE_COOLDOWN_MS) return;
-    lastValidate = now;
-
+  function ensureMarkerInHost(w) {
     try {
-      // Remove wraps that lost their anchor adjacency (they have been moved)
-      var wraps = document.querySelectorAll('.nodebb-ezoic-wrap');
-      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 uid = ensureUid(w);
+      if (!uid) return;
+
+      var markerId = w.getAttribute('data-ezoic-markerid');
+      if (markerId) {
+        var existing = document.getElementById(markerId);
+        if (existing) return;
       }
 
-      // 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) {}
+      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) {}
   }
 
-  // --- De-dupe placeholders to avoid Ezoic warnings ---
-  function dedupePlaceholders() {
-    var seen = Object.create(null);
+  function insertAfter(ref, node) {
     try {
-      document.querySelectorAll('.nodebb-ezoic-wrap [data-ezoic-id]').forEach(function (ph) {
+      if (!ref || !ref.parentNode || !node) return;
+      if (ref.nextSibling) ref.parentNode.insertBefore(node, ref.nextSibling);
+      else ref.parentNode.appendChild(node);
+    } catch (e) {}
+  }
+
+  function enforcePositions() {
+    var now = Date.now();
+    if (now - lastEnforce < ENFORCE_COOLDOWN_MS) return;
+    lastEnforce = now;
+
+    try {
+      var wraps = document.querySelectorAll('.nodebb-ezoic-wrap');
+      for (var i = 0; i < wraps.length; i++) {
+        var w = wraps[i];
         try {
-          var id = ph.getAttribute('data-ezoic-id');
-          if (!id) return;
-          var wrap = ph.closest('.nodebb-ezoic-wrap');
-          if (!wrap) return;
+          ensureMarkerInHost(w);
 
-          // ensure anchor for any wrap we touch
-          ensureAnchor(wrap);
+          var markerId = w.getAttribute('data-ezoic-markerid');
+          if (!markerId) continue;
 
-          if (seen[id]) {
-            // remove duplicates; keep first occurrence
-            wrap.remove();
-          } else {
-            seen[id] = true;
+          var marker = document.getElementById(markerId);
+          if (!marker || !marker.parentElement) continue;
+
+          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) {}
-      });
+      }
     } catch (e) {}
   }
 
@@ -1534,8 +1573,8 @@ function buildOrdinalMap(items) {
         entries.forEach(function (e) {
           if (!e || !e.target) return;
 
-          // Always ensure anchor while visible/near
-          ensureAnchor(e.target);
+          // ensure host marker on sight
+          ensureMarkerInHost(e.target);
 
           if (e.isIntersecting) {
             var id = getId(e.target);
@@ -1551,10 +1590,10 @@ function buildOrdinalMap(items) {
       } catch (e) {}
     }, { root: null, rootMargin: '1200px 0px 1200px 0px', threshold: 0.01 });
 
-    try { document.querySelectorAll(WRAP_SELECTOR).forEach(function (w) { try { ensureAnchor(w); io.observe(w); } catch(e) {} }); } catch (e) {}
+    try { document.querySelectorAll(WRAP_SELECTOR).forEach(function (w) { try { ensureMarkerInHost(w); io.observe(w); } catch(e) {} }); } catch (e) {}
   }
 
-  // Observe newly added wraps and anchor them
+  // Observe newly added wraps and marker them
   var moInstalled = false;
   function installMO() {
     if (moInstalled || typeof MutationObserver === 'undefined') return;
@@ -1562,8 +1601,8 @@ function buildOrdinalMap(items) {
 
     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];
@@ -1573,7 +1612,7 @@ function buildOrdinalMap(items) {
             if (!n || n.nodeType !== 1) continue;
 
             if (n.matches && n.matches(WRAP_SELECTOR)) {
-              ensureAnchor(n);
+              ensureMarkerInHost(n);
               try { io.observe(n); } catch (e) {}
               var id = getId(n);
               if (id && !isFilled(n)) enqueueShow(id);
@@ -1581,29 +1620,32 @@ function buildOrdinalMap(items) {
             } else if (n.querySelectorAll) {
               var inner = n.querySelectorAll(WRAP_SELECTOR);
               for (var k = 0; k < inner.length; k++) {
-                ensureAnchor(inner[k]);
+                ensureMarkerInHost(inner[k]);
                 try { io.observe(inner[k]); } catch (e) {}
               }
             }
           }
         }
       } catch (e) {}
+
+      // enforce after mutations (cheap throttle will apply)
+      enforcePositions();
     });
 
     try { mo.observe(document.documentElement || document.body, { childList: true, subtree: true }); } catch (e) {}
   }
 
   function init() {
-    // anchor + dedupe existing
+    dedupePlaceholders();
+
     try {
-      document.querySelectorAll('.nodebb-ezoic-wrap').forEach(function (w) { ensureAnchor(w); });
+      document.querySelectorAll('.nodebb-ezoic-wrap').forEach(function (w) { ensureMarkerInHost(w); });
     } catch (e) {}
-    dedupePlaceholders();
 
     installIO();
     installMO();
 
-    // initial eager show for empty visible-ish wraps (bounded)
+    // initial eager show (bounded)
     try {
       var vh = window.innerHeight || document.documentElement.clientHeight || 0;
       var margin = 900;
@@ -1611,7 +1653,7 @@ function buildOrdinalMap(items) {
       var budget = 12;
       for (var i = 0; i < wraps.length && budget > 0; i++) {
         var w = wraps[i];
-        ensureAnchor(w);
+        ensureMarkerInHost(w);
         var r = w.getBoundingClientRect();
         if (r.bottom >= -margin && r.top <= (vh + margin)) {
           var id = getId(w);
@@ -1624,31 +1666,28 @@ function buildOrdinalMap(items) {
       }
     } catch (e) {}
 
-    // validate regularly on scroll/resize (cheap)
     window.addEventListener('scroll', function () {
-      validateAnchors();
+      enforcePositions();
       scheduleShowTick();
     }, { passive: true });
     window.addEventListener('resize', function () {
-      validateAnchors();
+      enforcePositions();
       scheduleShowTick();
     }, { 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();
+          try { document.querySelectorAll('.nodebb-ezoic-wrap').forEach(function (w) { ensureMarkerInHost(w); }); } catch (e) {}
+          enforcePositions();
           scheduleShowTick();
         }, 0);
       });
     }
 
-    // periodic validate safety net
-    setInterval(validateAnchors, 1200);
-
-    setTimeout(function () { validateAnchors(); scheduleShowTick(); }, 0);
+    setInterval(enforcePositions, 1000);
+    setTimeout(function () { enforcePositions(); scheduleShowTick(); }, 0);
   }
 
   if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);