nodebb-plugin-ezoic-infinite 0.6.2 → 0.6.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-plugin-ezoic-infinite",
-  "version": "0.6.2",
+  "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

@@ -5,13 +5,33 @@ window.ezoicInfiniteLoaded = true;
 
 let cachedConfig;
 let lastFetch = 0;
-
 let debounceTimer;
-let lastSignature = null;
 
 let inFlight = false;
 let rerunRequested = false;
 
+// Per-page incremental state
+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)
+
+function resetPageState() {
+  injectedSlots = new Set();
+  usedIds = new Set();
+  adsFIFO = [];
+}
+
+function currentPageKey() {
+  try {
+    if (ajaxify && ajaxify.data) {
+      if (ajaxify.data.tid) return 'topic:' + ajaxify.data.tid;
+      if (ajaxify.data.cid) return 'category:' + ajaxify.data.cid;
+    }
+  } catch (e) {}
+  return window.location.pathname;
+}
+
 function parsePool(raw) {
   if (!raw) return [];
   return Array.from(new Set(
@@ -29,7 +49,6 @@ async function fetchConfig() {
   return cachedConfig;
 }
 
-// Robust DOM-based detection (no dependency on ajaxify template timing)
 function isTopicPage() {
   return $('[component="post/content"]').length > 0 || $('[component="post"][data-pid]').length > 0;
 }
@@ -42,7 +61,6 @@ function getTopicPosts() {
   const $primary = $('[component="post"][data-pid]');
   if ($primary.length) return $primary.not('.ezoic-ad-post');
 
-  // Fallback: top-level data-pid containing post/content
   return $('[data-pid]').filter(function () {
     const $el = $(this);
     const hasContent = $el.find('[component="post/content"]').length > 0;
@@ -59,83 +77,26 @@ function tagName($el) {
   return ($el && $el.length ? (($el.prop('tagName') || '').toUpperCase()) : '');
 }
 
-function makeWrapperLike($target, classes, innerHtml) {
+function makeWrapperLike($target, classes, innerHtml, attrs) {
   const t = tagName($target);
+  const attrStr = attrs ? ' ' + attrs : '';
   if (t === 'LI') {
-    return '<li class="' + classes + ' list-unstyled" data-ezoic-ad="1">' + innerHtml + '</li>';
+    return '<li class="' + classes + ' list-unstyled"' + attrStr + '>' + innerHtml + '</li>';
   }
-  return '<div class="' + classes + '" data-ezoic-ad="1">' + innerHtml + '</div>';
-}
-
-function computeWindowSlots(totalItems, interval, poolSize) {
-  const slots = Math.floor(totalItems / interval);
-  if (slots <= 0) return [];
-  const start = Math.max(1, slots - poolSize + 1);
-  const out = [];
-  for (let s = start; s <= slots; s++) out.push(s);
-  return out;
+  return '<div class="' + classes + '"' + attrStr + '>' + innerHtml + '</div>';
 }
 
-function removeOurWrappers() {
-  $('.ezoic-ad-post').remove();
-  $('.ezoic-ad-between').remove();
-  $('.ezoic-ad-topic').remove();
+function cleanupWrappersOnNav() {
+  $('.ezoic-ad-post, .ezoic-ad-between, .ezoic-ad-topic').remove();
 }
 
-function insertBetween($items, ids, interval, wrapperClass) {
-  const total = $items.length;
-  const slotsToRender = computeWindowSlots(total, interval, ids.length);
-  if (!slotsToRender.length) return [];
-
-  const activeIds = [];
-  for (let i = 0; i < slotsToRender.length; i++) {
-    const slotNumber = slotsToRender[i];
-    const id = ids[i];
-    const index = slotNumber * interval - 1;
-    const $target = $items.eq(index);
-    if (!$target.length) continue;
-
-    const html = makeWrapperLike($target, wrapperClass, '<div id="ezoic-pub-ad-placeholder-' + id + '"></div>');
-    $target.after(html);
-    activeIds.push(id);
+function pickNextId(pool) {
+  for (const id of pool) {
+    if (!usedIds.has(id)) return id;
   }
-  return activeIds;
+  return null;
 }
 
-function insertMessageAds($posts, ids, interval) {
-  const total = $posts.length;
-  const slotsToRender = computeWindowSlots(total, interval, ids.length);
-  if (!slotsToRender.length) return [];
-
-  const activeIds = [];
-  for (let i = 0; i < slotsToRender.length; i++) {
-    const slotNumber = slotsToRender[i];
-    const id = ids[i];
-    const index = slotNumber * interval - 1;
-    const $target = $posts.eq(index);
-    if (!$target.length) continue;
-
-    const inner = '<div class="content"><div id="ezoic-pub-ad-placeholder-' + id + '"></div></div>';
-    const html = makeWrapperLike($target, 'post ezoic-ad-post', inner);
-    $target.after(html);
-    activeIds.push(id);
-  }
-  return activeIds;
-}
-
-function signatureFor($posts, $topicItems) {
-  if ($posts.length) {
-    const lastPid = $posts.last().attr('data-pid') || '';
-    return 'topic:' + $posts.length + ':' + lastPid;
-  }
-  if ($topicItems.length) {
-    const lastTid = $topicItems.last().attr('data-tid') || '';
-    return 'category:' + $topicItems.length + ':' + lastTid;
-  }
-  return 'none';
-}
-
-// Call Ezoic when ready (retry a few times, non-destructive)
 function callEzoic(ids) {
   if (!ids || !ids.length) return;
 
@@ -152,10 +113,9 @@ function callEzoic(ids) {
     return false;
   };
 
-  // Use cmd queue first (best if Ezoic loads later)
   window.ezstandalone.cmd.push(function () { run(); });
 
-  // Also retry a few times in case cmd isn't flushed promptly
+  // Retry (Ezoic can load late)
   let tries = 0;
   const maxTries = 6;
   const timer = setInterval(function () {
@@ -164,7 +124,114 @@ 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);
+  if (maxSlot <= 0) return [];
+
+  const newIds = [];
+
+  for (let slot = 1; slot <= maxSlot; slot++) {
+    if (injectedSlots.has(slot)) continue;
+
+    const index = slot * interval - 1;
+    const $target = $items.eq(index);
+    if (!$target.length) continue;
+
+    const id = pickNextId(pool);
+    if (!id) {
+      // 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 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;
+}
+
+function injectMessageIncremental($posts, pool, interval) {
+  const total = $posts.length;
+  const maxSlot = Math.floor(total / interval);
+  if (maxSlot <= 0) return [];
+
+  const newIds = [];
+
+  for (let slot = 1; slot <= maxSlot; slot++) {
+    if (injectedSlots.has(slot)) continue;
+
+    const index = slot * interval - 1;
+    const $target = $posts.eq(index);
+    if (!$target.length) continue;
+
+    const 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',
+      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 on navigation
+  const key = currentPageKey();
+  if (pageKey !== key) {
+    pageKey = key;
+    resetPageState();
+    cleanupWrappersOnNav();
+  }
+
   if (inFlight) { rerunRequested = true; return; }
   inFlight = true;
 
@@ -186,45 +253,39 @@ async function refreshAds() {
 
     if (!$posts.length && !$topicItems.length) return;
 
-    const sig = signatureFor($posts, $topicItems);
-    if (sig === lastSignature) return;
-    lastSignature = sig;
-
-    removeOurWrappers();
-
-    const activeIds = [];
+    const newIds = [];
 
     // Your rule:
     // - Category topic list: BETWEEN only
     // - Topic page: MESSAGE only
     if ($topicItems.length) {
       if (cfg.enableBetweenAds && betweenPool.length) {
-        activeIds.push(...insertBetween($topicItems, betweenPool, betweenInterval, 'ezoic-ad-topic'));
+        newIds.push(...injectBetweenIncremental($topicItems, betweenPool, betweenInterval, 'ezoic-ad-topic'));
       }
-      callEzoic(activeIds);
+      callEzoic(newIds);
       return;
     }
 
     if ($posts.length) {
       if (cfg.enableMessageAds && messagePool.length) {
-        activeIds.push(...insertMessageAds($posts, messagePool, messageInterval));
+        newIds.push(...injectMessageIncremental($posts, messagePool, messageInterval));
       }
-      callEzoic(activeIds);
+      callEzoic(newIds);
     }
   } finally {
     inFlight = false;
     if (rerunRequested) {
       rerunRequested = false;
-      setTimeout(refreshAds, 80);
+      setTimeout(refreshAds, 120);
     }
   }
 }
 
 function debounceRefresh() {
   clearTimeout(debounceTimer);
-  debounceTimer = setTimeout(refreshAds, 200);
+  debounceTimer = setTimeout(refreshAds, 180);
 }
 
 $(document).ready(debounceRefresh);
 $(window).on('action:ajaxify.end action:posts.loaded action:topic.loaded', debounceRefresh);
-setTimeout(debounceRefresh, 2000);
+setTimeout(debounceRefresh, 1800);