nodebb-plugin-ezoic-infinite 0.6.3 → 0.6.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-plugin-ezoic-infinite",
-  "version": "0.6.3",
+  "version": "0.6.4",
   "description": "Ezoic ads with infinite scroll using a pool of placeholder IDs",
   "main": "library.js",
   "license": "MIT",

package/public/client.js

@@ -10,23 +10,23 @@ let debounceTimer;
 let inFlight = false;
 let rerunRequested = false;
 
-// Incremental state (prevents ads "jumping to the top")
+// Per-page incremental state
 let pageKey = null;
-let injectedSlots = new Set(); // slotNumber per page
-let usedIds = new Set();       // ids currently injected per page
+let injectedSlots = new Set();       // slot numbers already injected on this page
+let usedIds = new Set();             // IDs currently present in DOM
+let adsFIFO = [];                    // [{slot, id, selector}] in insertion order (oldest first)
 
 function resetPageState() {
   injectedSlots = new Set();
   usedIds = new Set();
+  adsFIFO = [];
 }
 
 function currentPageKey() {
-  // Stable key per ajaxified page
   try {
     if (ajaxify && ajaxify.data) {
       if (ajaxify.data.tid) return 'topic:' + ajaxify.data.tid;
       if (ajaxify.data.cid) return 'category:' + ajaxify.data.cid;
-      if (ajaxify.data.template) return 'tpl:' + ajaxify.data.template + ':' + (ajaxify.data.url || window.location.pathname);
     }
   } catch (e) {}
   return window.location.pathname;
@@ -86,6 +86,10 @@ function makeWrapperLike($target, classes, innerHtml, attrs) {
   return '<div class="' + classes + '"' + attrStr + '>' + innerHtml + '</div>';
 }
 
+function cleanupWrappersOnNav() {
+  $('.ezoic-ad-post, .ezoic-ad-between, .ezoic-ad-topic').remove();
+}
+
 function pickNextId(pool) {
   for (const id of pool) {
     if (!usedIds.has(id)) return id;
@@ -111,7 +115,7 @@ function callEzoic(ids) {
 
   window.ezstandalone.cmd.push(function () { run(); });
 
-  // retry a few times (Ezoic can load late)
+  // Retry (Ezoic can load late)
   let tries = 0;
   const maxTries = 6;
   const timer = setInterval(function () {
@@ -120,6 +124,21 @@ function callEzoic(ids) {
   }, 800);
 }
 
+function fifoEvictIfNeeded(poolSize) {
+  // Keep at most poolSize ads in DOM: remove oldest when we exceed pool capacity.
+  // This makes ads "follow" the scroll (new ads appear, oldest disappear) without jumping positions.
+  while (adsFIFO.length > poolSize) {
+    const old = adsFIFO.shift();
+    if (!old) break;
+
+    const $el = $(old.selector);
+    if ($el.length) $el.remove();
+
+    injectedSlots.delete(old.slot);
+    usedIds.delete(old.id);
+  }
+}
+
 function injectBetweenIncremental($items, pool, interval, wrapperClass) {
   const total = $items.length;
   const maxSlot = Math.floor(total / interval);
@@ -136,18 +155,29 @@ function injectBetweenIncremental($items, pool, interval, wrapperClass) {
 
     const id = pickNextId(pool);
     if (!id) {
-      // pool exhausted: stop injecting further to avoid reusing ids and "jumping"
+      // No free IDs right now; stop. Oldest will be evicted once new ads can be created.
       break;
     }
 
     const placeholder = '<div id="ezoic-pub-ad-placeholder-' + id + '"></div>';
-    const html = makeWrapperLike($target, wrapperClass, placeholder, 'data-ezoic-slot="' + slot + '" data-ezoic-id="' + id + '"');
+    const selector = '.ezoic-ad-topic[data-ezoic-slot="' + slot + '"][data-ezoic-id="' + id + '"]';
+    const html = makeWrapperLike(
+      $target,
+      wrapperClass,
+      placeholder,
+      'data-ezoic-slot="' + slot + '" data-ezoic-id="' + id + '"'
+    );
 
     $target.after(html);
 
     injectedSlots.add(slot);
     usedIds.add(id);
+    adsFIFO.push({ slot: slot, id: id, selector: selector });
+
     newIds.push(id);
+
+    // Enforce capacity immediately (prevents runaway and keeps ads near viewport)
+    fifoEvictIfNeeded(pool.length);
   }
 
   return newIds;
@@ -171,26 +201,35 @@ function injectMessageIncremental($posts, pool, interval) {
     if (!id) break;
 
     const inner = '<div class="content"><div id="ezoic-pub-ad-placeholder-' + id + '"></div></div>';
-    const html = makeWrapperLike($target, 'post ezoic-ad-post', inner, 'data-ezoic-slot="' + slot + '" data-ezoic-id="' + id + '"');
+    const selector = '.ezoic-ad-post[data-ezoic-slot="' + slot + '"][data-ezoic-id="' + id + '"]';
+    const html = makeWrapperLike(
+      $target,
+      'post ezoic-ad-post',
+      inner,
+      'data-ezoic-slot="' + slot + '" data-ezoic-id="' + id + '"'
+    );
 
     $target.after(html);
 
     injectedSlots.add(slot);
     usedIds.add(id);
+    adsFIFO.push({ slot: slot, id: id, selector: selector });
+
     newIds.push(id);
+
+    fifoEvictIfNeeded(pool.length);
   }
 
   return newIds;
 }
 
 async function refreshAds() {
-  // reset state when navigating (ajaxify)
+  // Reset state on navigation
   const key = currentPageKey();
   if (pageKey !== key) {
     pageKey = key;
     resetPageState();
-    // also cleanup any injected wrappers that may have been left by browser bfcache
-    $('.ezoic-ad-post, .ezoic-ad-between, .ezoic-ad-topic').remove();
+    cleanupWrappersOnNav();
   }
 
   if (inFlight) { rerunRequested = true; return; }