nodebb-plugin-ezoic-infinite 1.6.62 → 1.6.64

package/package.json

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

package/public/client.js

@@ -401,12 +401,23 @@
   }
 
   // ─── Insertion primitives ───────────────────────────────────────────────────
-  function buildWrap(id, kindClass, afterPos, createPlaceholder) {
+
+  /** Extract the stable DOM id (tid/pid/cid) from an anchor element. */
+  function getAnchorStableId(el) {
+    if (!el) return '';
+    return el.getAttribute('data-tid') || el.getAttribute('data-pid') ||
+           el.getAttribute('data-cid') || el.getAttribute('data-index') || '';
+  }
+
+  function buildWrap(id, kindClass, afterPos, createPlaceholder, anchorStableId) {
     const wrap = document.createElement('div');
     wrap.className = WRAP_CLASS + ' ' + kindClass;
     wrap.setAttribute('data-ezoic-after',  String(afterPos));
     wrap.setAttribute('data-ezoic-wrapid', String(id));
     wrap.setAttribute('data-created',      String(now()));
+    // Store the anchor element's stable DOM id so we can re-anchor after
+    // NodeBB re-renders the list (which changes ordinal positions).
+    if (anchorStableId) wrap.setAttribute('data-ezoic-anchor', String(anchorStableId));
     if (afterPos === 1) wrap.setAttribute('data-ezoic-pin', '1');
     wrap.style.width = '100%';
     if (createPlaceholder) {
@@ -418,14 +429,27 @@
     return wrap;
   }
 
+  /**
+   * Find a wrap that is already anchored to a specific stable id (tid/pid/cid).
+   * Used to prevent double-injection when NodeBB re-renders and ordinals shift.
+   */
+  function findWrapByAnchor(kindClass, anchorStableId) {
+    if (!anchorStableId) return null;
+    return document.querySelector(
+      '.' + WRAP_CLASS + '.' + kindClass + '[data-ezoic-anchor="' + CSS.escape(String(anchorStableId)) + '"]'
+    );
+  }
+
   function insertAfter(target, id, kindClass, afterPos) {
     if (!target || !target.insertAdjacentElement) return null;
     if (findWrap(kindClass, afterPos)) return null;
+    const anchorId = getAnchorStableId(target);
+    if (anchorId && findWrapByAnchor(kindClass, anchorId)) return null; // already anchored
     if (insertingIds.has(id)) return null;
     const existingPh = document.getElementById(PLACEHOLDER_PREFIX + id);
     insertingIds.add(id);
     try {
-      const wrap = buildWrap(id, kindClass, afterPos, !existingPh);
+      const wrap = buildWrap(id, kindClass, afterPos, !existingPh, anchorId);
       target.insertAdjacentElement('afterend', wrap);
       if (existingPh) {
         existingPh.setAttribute('data-ezoic-id', String(id));
@@ -469,23 +493,25 @@
     if (!items || !items.length) return 0;
     const itemSet   = new Set(items);
     const isMessage = kindClass === 'ezoic-ad-message';
-    // Between-ads and category-ads are NEVER fully released — only hidden/shown.
-    // Releasing them frees their placeholder IDs back into the pool. When the
-    // anchor topics return (scroll-up / NodeBB re-render), injectBetween would
-    // re-insert those IDs, but DOM ordinals have shifted → all wraps pile at top.
-    // Keeping the wrap node in DOM at its original position means findWrap() will
-    // always find it and injectBetween() will never create a duplicate.
+    // Between/category ads are NEVER fully released — only hidden/shown.
     const allowRelease = isMessage;
     let removed = 0;
 
-    const hasNearbyItem = (wrap) => {
-      // If the wrap is inside a li.nodebb-ezoic-host, we must check the HOST's
-      // siblings, not the wrap's own siblings (the wrap has no siblings inside host).
+    // Build a set of stable anchor ids currently in the DOM (tid/pid/cid).
+    const liveAnchorIds = new Set();
+    items.forEach((el) => {
+      const sid = getAnchorStableId(el);
+      if (sid) liveAnchorIds.add(sid);
+    });
+
+    const anchorIsLive = (wrap) => {
+      // Primary: check by stable id (survives NodeBB re-renders).
+      const sid = wrap.getAttribute('data-ezoic-anchor');
+      if (sid) return liveAnchorIds.has(sid);
+      // Fallback: DOM-proximity check (for wraps without stable id).
       const pivot = (wrap.parentElement && wrap.parentElement.classList &&
                      wrap.parentElement.classList.contains(HOST_CLASS))
-        ? wrap.parentElement
-        : wrap;
-
+        ? wrap.parentElement : wrap;
       let prev = pivot.previousElementSibling;
       for (let i = 0; i < 14 && prev; i++) {
         if (itemSet.has(prev)) return true;
@@ -500,31 +526,24 @@
     };
 
     document.querySelectorAll('.' + WRAP_CLASS + '.' + kindClass).forEach((wrap) => {
-      // Never touch pinned placements.
       if (wrap.getAttribute('data-ezoic-pin') === '1') return;
-
-      // Never prune very fresh wraps (slow auction / CMP fills).
       const created = parseInt(wrap.getAttribute('data-created') || '0', 10);
       if (created && (now() - created) < keepEmptyWrapMs()) return;
 
-      if (hasNearbyItem(wrap)) {
-        // Anchor back in DOM → restore visibility.
+      if (anchorIsLive(wrap)) {
         try { wrap.classList.remove('ez-orphan-hidden'); wrap.style.display = ''; } catch (e) {}
         return;
       }
 
-      // Anchor is gone (virtualized) → hide so ads don't stack visually.
+      // Anchor not in DOM → hide.
       try { wrap.classList.add('ez-orphan-hidden'); wrap.style.display = 'none'; } catch (e) {}
-
-      // For between/category ads: stop here — never release the node.
-      // The wrap stays in DOM (hidden) at its correct data-ezoic-after position.
       if (!allowRelease) return;
 
-      // For message-ads only: fully release when far off-screen.
+      // Message-ads only: release when far off-screen.
       try {
         const r  = wrap.getBoundingClientRect();
         const vh = Math.max(1, window.innerHeight || 1);
-        if (r.bottom > -vh * 2 && r.top < vh * 4) return; // still near viewport
+        if (r.bottom > -vh * 2 && r.top < vh * 4) return;
       } catch (e) { return; }
 
       withInternalDomChange(() => releaseWrapNode(wrap));
@@ -533,6 +552,55 @@
     return removed;
   }
 
+  /**
+   * Re-anchor between/category wraps after a NodeBB list re-render.
+   *
+   * When NodeBB rebuilds the topic list (infinite scroll above, sort change…),
+   * it re-inserts topic <li> elements in a new DOM order. Our wraps are still
+   * in the DOM but they may now sit between wrong topics because their ordinals
+   * changed. We use the stable anchor id (data-tid / data-pid) recorded at
+   * insertion time to find each wrap's correct anchor topic and move it there.
+   */
+  function reanchorWraps(kindClass, items) {
+    // Build tid → element map from the current live items.
+    const tidMap = new Map();
+    items.forEach((el) => {
+      const sid = getAnchorStableId(el);
+      if (sid) tidMap.set(sid, el);
+    });
+
+    document.querySelectorAll('.' + WRAP_CLASS + '.' + kindClass).forEach((wrap) => {
+      try {
+        const sid = wrap.getAttribute('data-ezoic-anchor');
+        if (!sid) return;
+        const anchor = tidMap.get(sid);
+        if (!anchor || !anchor.isConnected) return;
+
+        // Check if the wrap is already correctly positioned (immediately after anchor).
+        // Account for li.nodebb-ezoic-host wrapper.
+        const wrapOrHost = (wrap.parentElement && wrap.parentElement.classList &&
+                            wrap.parentElement.classList.contains(HOST_CLASS))
+          ? wrap.parentElement : wrap;
+
+        if (wrapOrHost.previousElementSibling === anchor) {
+          // Already in the right place — just un-hide if it was hidden.
+          try { wrap.classList.remove('ez-orphan-hidden'); wrap.style.display = ''; } catch (e) {}
+          return;
+        }
+
+        // Update data-ezoic-after to the anchor's current ordinal so findWrap still works.
+        const newOrdinal = getAnchorStableId(anchor)
+          ? (parseInt(anchor.getAttribute('data-index') || '-1', 10) + 1) || 0
+          : 0;
+        if (newOrdinal > 0) wrap.setAttribute('data-ezoic-after', String(newOrdinal));
+
+        // Move the wrap (or its host) to after the anchor.
+        anchor.insertAdjacentElement('afterend', wrapOrHost);
+        try { wrap.classList.remove('ez-orphan-hidden'); wrap.style.display = ''; } catch (e) {}
+      } catch (e) {}
+    });
+  }
+
   function decluster(kindClass) {
     const wraps = Array.from(document.querySelectorAll('.' + WRAP_CLASS + '.' + kindClass));
     if (wraps.length < 2) return 0;
@@ -965,30 +1033,49 @@
     const kind = getKind();
     let inserted = 0;
 
+    // When the user is scrolling UP, NodeBB loads content above the viewport.
+    // Injecting new ad wraps at that moment targets those freshly-loaded top items
+    // (low ordinals) and makes ads appear right at the top of the list.
+    // While scrolling up we only restore previously-hidden wraps (pruneOrphanWraps
+    // un-hides them as their anchor posts return) — no new injections.
+    const canInject = scrollDir >= 0;
+
     if (kind === 'topic' && normalizeBool(cfg.enableMessageAds)) {
       const items = getPostContainers();
       pruneOrphanWraps('ezoic-ad-message', items);
-      inserted += injectBetween('ezoic-ad-message', items,
-        Math.max(1, parseInt(cfg.messageIntervalPosts, 10) || 3),
-        normalizeBool(cfg.showFirstMessageAd), state.allPosts, 'curPosts');
-      decluster('ezoic-ad-message');
+      if (canInject) {
+        inserted += injectBetween('ezoic-ad-message', items,
+          Math.max(1, parseInt(cfg.messageIntervalPosts, 10) || 3),
+          normalizeBool(cfg.showFirstMessageAd), state.allPosts, 'curPosts');
+        decluster('ezoic-ad-message');
+      }
 
     } else if (kind === 'categoryTopics' && normalizeBool(cfg.enableBetweenAds)) {
       const items = getTopicItems();
+      // Re-anchor FIRST: move existing wraps to their correct topic after any
+      // NodeBB list re-render (ordinals may have shifted). This must happen before
+      // pruneOrphanWraps (which uses live anchor ids) and before injectBetween
+      // (which checks findWrap/findWrapByAnchor to avoid duplicates).
+      reanchorWraps('ezoic-ad-between', items);
       pruneOrphanWraps('ezoic-ad-between', items);
-      inserted += injectBetween('ezoic-ad-between', items,
-        Math.max(1, parseInt(cfg.intervalPosts, 10) || 6),
-        normalizeBool(cfg.showFirstTopicAd), state.allTopics, 'curTopics');
-      decluster('ezoic-ad-between');
-      schedulePileFix();
+      if (canInject) {
+        inserted += injectBetween('ezoic-ad-between', items,
+          Math.max(1, parseInt(cfg.intervalPosts, 10) || 6),
+          normalizeBool(cfg.showFirstTopicAd), state.allTopics, 'curTopics');
+        decluster('ezoic-ad-between');
+        schedulePileFix();
+      }
 
     } else if (kind === 'categories' && normalizeBool(cfg.enableCategoryAds)) {
       const items = getCategoryItems();
+      reanchorWraps('ezoic-ad-categories', items);
       pruneOrphanWraps('ezoic-ad-categories', items);
-      inserted += injectBetween('ezoic-ad-categories', items,
-        Math.max(1, parseInt(cfg.intervalCategories, 10) || 4),
-        normalizeBool(cfg.showFirstCategoryAd), state.allCategories, 'curCategories');
-      decluster('ezoic-ad-categories');
+      if (canInject) {
+        inserted += injectBetween('ezoic-ad-categories', items,
+          Math.max(1, parseInt(cfg.intervalCategories, 10) || 4),
+          normalizeBool(cfg.showFirstCategoryAd), state.allCategories, 'curCategories');
+        decluster('ezoic-ad-categories');
+      }
     }
 
     return inserted;