nodebb-plugin-ezoic-infinite 0.6.4 → 0.6.6

package/package.json

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

package/public/client.js

@@ -14,7 +14,7 @@ let rerunRequested = false;
 let pageKey = null;
 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)
+let adsFIFO = [];                    // [{slot, id}] oldest first
 
 function resetPageState() {
   injectedSlots = new Set();
@@ -73,14 +73,21 @@ function getCategoryTopicItems() {
   return $('li[component="category/topic"]').not('.ezoic-ad-topic');
 }
 
-function tagName($el) {
-  return ($el && $el.length ? (($el.prop('tagName') || '').toUpperCase()) : '');
+// IMPORTANT: Use the SAME tag type as the surrounding list container.
+// If posts/topics are in a <ul>/<ol>, the wrapper MUST be a <li> or the browser may move it outside the list (often to the top).
+function wrapperTagFor($target) {
+  if (!$target || !$target.length) return 'div';
+  const parentTag = ($target.parent().prop('tagName') || '').toUpperCase();
+  if (parentTag === 'UL' || parentTag === 'OL') return 'li';
+  const selfTag = ($target.prop('tagName') || '').toUpperCase();
+  if (selfTag === 'LI') return 'li';
+  return 'div';
 }
 
 function makeWrapperLike($target, classes, innerHtml, attrs) {
-  const t = tagName($target);
+  const tag = wrapperTagFor($target);
   const attrStr = attrs ? ' ' + attrs : '';
-  if (t === 'LI') {
+  if (tag === 'li') {
     return '<li class="' + classes + ' list-unstyled"' + attrStr + '>' + innerHtml + '</li>';
   }
   return '<div class="' + classes + '"' + attrStr + '>' + innerHtml + '</div>';
@@ -97,6 +104,19 @@ function pickNextId(pool) {
   return null;
 }
 
+function evictOldestOne() {
+  const old = adsFIFO.shift();
+  if (!old) return false;
+
+  const sel = '[data-ezoic-slot="' + old.slot + '"][data-ezoic-id="' + old.id + '"]';
+  const $el = $(sel);
+  if ($el.length) $el.remove();
+
+  injectedSlots.delete(old.slot);
+  usedIds.delete(old.id);
+  return true;
+}
+
 function callEzoic(ids) {
   if (!ids || !ids.length) return;
 
@@ -124,21 +144,6 @@ 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);
@@ -153,14 +158,14 @@ function injectBetweenIncremental($items, pool, interval, wrapperClass) {
     const $target = $items.eq(index);
     if (!$target.length) continue;
 
-    const id = pickNextId(pool);
+    let id = pickNextId(pool);
     if (!id) {
-      // No free IDs right now; stop. Oldest will be evicted once new ads can be created.
-      break;
+      if (!evictOldestOne()) break;
+      id = pickNextId(pool);
+      if (!id) break;
     }
 
     const placeholder = '<div id="ezoic-pub-ad-placeholder-' + id + '"></div>';
-    const selector = '.ezoic-ad-topic[data-ezoic-slot="' + slot + '"][data-ezoic-id="' + id + '"]';
     const html = makeWrapperLike(
       $target,
       wrapperClass,
@@ -172,12 +177,8 @@ function injectBetweenIncremental($items, pool, interval, wrapperClass) {
 
     injectedSlots.add(slot);
     usedIds.add(id);
-    adsFIFO.push({ slot: slot, id: id, selector: selector });
-
+    adsFIFO.push({ slot: slot, id: id });
     newIds.push(id);
-
-    // Enforce capacity immediately (prevents runaway and keeps ads near viewport)
-    fifoEvictIfNeeded(pool.length);
   }
 
   return newIds;
@@ -197,11 +198,14 @@ function injectMessageIncremental($posts, pool, interval) {
     const $target = $posts.eq(index);
     if (!$target.length) continue;
 
-    const id = pickNextId(pool);
-    if (!id) break;
+    let id = pickNextId(pool);
+    if (!id) {
+      if (!evictOldestOne()) break;
+      id = pickNextId(pool);
+      if (!id) break;
+    }
 
     const inner = '<div class="content"><div id="ezoic-pub-ad-placeholder-' + id + '"></div></div>';
-    const selector = '.ezoic-ad-post[data-ezoic-slot="' + slot + '"][data-ezoic-id="' + id + '"]';
     const html = makeWrapperLike(
       $target,
       'post ezoic-ad-post',
@@ -213,11 +217,8 @@ function injectMessageIncremental($posts, pool, interval) {
 
     injectedSlots.add(slot);
     usedIds.add(id);
-    adsFIFO.push({ slot: slot, id: id, selector: selector });
-
+    adsFIFO.push({ slot: slot, id: id });
     newIds.push(id);
-
-    fifoEvictIfNeeded(pool.length);
   }
 
   return newIds;