nodebb-plugin-ezoic-infinite 1.6.11 → 1.6.13

package/package.json

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

package/public/client.js

@@ -1,34 +1,127 @@
 (function () {
   'use strict';
 
-function createWrapHostAndWrap(kindClass, targetEl) {
-  // For <ul>/<ol> we MUST insert a <li> to keep valid DOM.
-  // But for compatibility with existing selectors (often 'div.nodebb-ezoic-wrap'),
-  // we keep the actual wrap as a DIV inside the LI.
-  var host = null;
+function ezoicAnchorKeyFromEl(el) {
   try {
+    if (!el || !el.getAttribute) return '';
+    var tid = el.getAttribute('data-tid') || el.getAttribute('data-topic-id');
+    if (tid) return 'tid:' + String(tid);
+    var pid = el.getAttribute('data-pid') || el.getAttribute('data-id');
+    if (pid) return 'pid:' + String(pid);
+    var uid = el.getAttribute('data-uid');
+    if (uid) return 'uid:' + String(uid);
+  } catch (e) {}
+  return '';
+}
+
+function ezoicFindAnchorEl(anchorKey, scope) {
+  try {
+    if (!anchorKey) return null;
+    var root = scope || document;
+    if (anchorKey.indexOf('tid:') === 0) {
+      var v = anchorKey.slice(4);
+      return root.querySelector('[data-tid="' + v + '"], [data-topic-id="' + v + '"]');
+    }
+    if (anchorKey.indexOf('pid:') === 0) {
+      var p = anchorKey.slice(4);
+      return root.querySelector('[data-pid="' + p + '"], [data-id="' + p + '"]');
+    }
+    if (anchorKey.indexOf('uid:') === 0) {
+      var u = anchorKey.slice(4);
+      return root.querySelector('[data-uid="' + u + '"]');
+    }
+  } catch (e) {}
+  return null;
+}
+
+function ezoicReconcileHosts(scope) {
+  // Ensure each li.nodebb-ezoic-host stays directly after its anchor <li>.
+  // Prevents "all hosts under first topic" after NodeBB re-render/virtualize.
+  try {
+    var root = scope || document;
+    var hosts = root.querySelectorAll('li.nodebb-ezoic-host[data-ezoic-anchor]');
+    if (!hosts || !hosts.length) return;
+
+    hosts.forEach(function (host) {
+      try {
+        var anchorKey = host.getAttribute('data-ezoic-anchor') || '';
+        if (!anchorKey) return;
+        var ul = host.parentElement;
+        if (!ul) return;
+
+        var anchor = ezoicFindAnchorEl(anchorKey, ul) || ezoicFindAnchorEl(anchorKey, document);
+        if (!anchor) return;
+
+        // Anchor is often inside the <li> topic; normalize to list item
+        var anchorLi = anchor.closest ? (anchor.closest('li') || anchor) : anchor;
+        if (!anchorLi || !anchorLi.parentElement) return;
+
+        if (host.previousElementSibling !== anchorLi) {
+          anchorLi.insertAdjacentElement('afterend', host);
+        }
+      } catch (e) {}
+    });
+  } catch (e) {}
+}
+
+' + '';
+
+
+function ezoicInsertAfterWithUlGuard(target, wrap, kindClass) {
+  try {
+    if (!target || !wrap) return;
+    // Only guard for BETWEEN placements (known to be inserted between <li> items inside <ul>/<ol>)
     if (kindClass === 'ezoic-ad-between') {
-      var p = targetEl && targetEl.parentElement;
+      var p = target.parentElement;
       if (p && (p.tagName === 'UL' || p.tagName === 'OL')) {
-        host = document.createElement('li');
+        // Ensure wrap is not a direct child of UL/OL (invalid HTML); wrap it in an LI host.
+        var host = document.createElement('li');
         host.className = 'nodebb-ezoic-host';
         host.setAttribute('role', 'listitem');
         host.style.listStyle = 'none';
         host.style.width = '100%';
+        try { var ak = ezoicAnchorKeyFromEl(target); if (ak) host.setAttribute('data-ezoic-anchor', ak); } catch(e) {}
+
+        // Insert host after the target listitem, then move the wrap inside.
+        if (target.insertAdjacentElement) {
+          target.insertAdjacentElement('afterend', host);
+        } else if (p.insertBefore) {
+          p.insertBefore(host, target.nextSibling);
+        }
+        try { host.appendChild(wrap); } catch (e) {}
+
+        // Keep wrap full width
+        try { wrap.style.width = '100%'; } catch (e) {}
+        return;
       }
     }
-  } catch (e) {}
 
-  var pair = createWrapHostAndWrap(kindClass, el);
-    var host = pair.hostEl;
-    var wrap = pair.wrapEl;
-  wrap.className = 'nodebb-ezoic-wrap ' + kindClass;
+    // Default behavior
+    if (target.insertAdjacentElement) ezoicInsertAfterWithUlGuard(target, wrap, kindClass);
+    else if (target.parentNode) target.parentNode.insertBefore(wrap, target.nextSibling);
+  } catch (e) {}
+}
 
-  if (host) {
-    host.appendChild(wrap);
-    return { hostEl: host, wrapEl: wrap };
-  }
-  return { hostEl: wrap, wrapEl: wrap };
+function ezoicRepairInvalidBetweenWraps() {
+  // If any legacy DIV wraps were already inserted directly under UL/OL, repair them once.
+  try {
+    var bad = document.querySelectorAll('ul > div.nodebb-ezoic-wrap.ezoic-ad-between, ol > div.nodebb-ezoic-wrap.ezoic-ad-between');
+    bad.forEach(function (wrap) {
+      try {
+        var p = wrap.parentElement;
+        if (!p) return;
+        var host = document.createElement('li');
+        host.className = 'nodebb-ezoic-host';
+        host.setAttribute('role', 'listitem');
+        host.style.listStyle = 'none';
+        host.style.width = '100%';
+        try { var ak = ezoicAnchorKeyFromEl(target); if (ak) host.setAttribute('data-ezoic-anchor', ak); } catch(e) {}
+        p.insertBefore(host, wrap);
+        host.appendChild(wrap);
+        try { wrap.style.width = '100%'; } catch (e) {}
+      } catch (e) {}
+    });
+  } catch (e) {}
 }
 
 
@@ -668,9 +761,7 @@ function globalGapFixInit() {
   // ---------------- insertion primitives ----------------
 
   function buildWrap(id, kindClass, afterPos, createPlaceholder) {
-    const pair = createWrapHostAndWrap(kindClass, el);
-    const host = pair.hostEl;
-    const wrap = pair.wrapEl;
+    const wrap = document.createElement('div');
     wrap.className = `${WRAP_CLASS} ${kindClass}`;
     wrap.setAttribute('data-ezoic-after', String(afterPos));
     wrap.setAttribute('data-ezoic-wrapid', String(id));
@@ -701,7 +792,7 @@ function globalGapFixInit() {
     insertingIds.add(id);
     try {
       const wrap = buildWrap(id, kindClass, afterPos, !existingPh);
-      target.insertAdjacentElement('afterend', wrap);
+      ezoicInsertAfterWithUlGuard(target, wrap, kindClass);
 
       // If placeholder exists elsewhere (including pool), move it into the wrapper.
       if (existingPh) {
@@ -1161,12 +1252,48 @@ function buildOrdinalMap(items) {
   }
 
   function pickRecyclableWrap(kindClass) {
-  return null;
-}
+    // Only recycle wrappers that are well above the viewport to avoid visible "disappearing".
+    // With very small id pools (e.g. 6 ids), recycling is the only way to keep ads appearing
+    // on long topics without redefining placeholders.
+    const wraps = document.querySelectorAll('.' + kindClass + '[data-ezoic-wrapid]');
+    if (!wraps || !wraps.length) return null;
+
+    const vh = Math.max(300, window.innerHeight || 800);
+    // Recycle only when the wrapper is far above the viewport.
+    // This keeps ads on-screen longer (especially on mobile) and reduces "blink".
+    const threshold = -Math.min(9000, Math.round(vh * 6));
+
+    let best = null;
+    let bestBottom = Infinity;
+    for (const w of wraps) {
+      if (!w || !w.isConnected) continue;
+      if (w.getAttribute && w.getAttribute('data-ezoic-pin') === '1') continue;
+      const rect = w.getBoundingClientRect();
+      if (rect.bottom < threshold) {
+        if (rect.bottom < bestBottom) {
+          bestBottom = rect.bottom;
+          best = w;
+        }
+      }
+    }
+    return best;
+  }
 
   function moveWrapAfter(anchorEl, wrap, kindClass, afterPos) {
-  return;
-}
+    try {
+      if (!anchorEl || !wrap || !wrap.isConnected) return null;
+
+      wrap.setAttribute('data-ezoic-after', String(afterPos));
+      ezoicInsertAfterWithUlGuard(anchorEl, wrap, kindClass);
+
+      // Ensure minimal layout impact.
+      try { wrap.style.contain = 'layout style paint'; } catch (e) {}
+      try { tightenStickyIn(wrap); } catch (e) {}
+      return wrap;
+    } catch (e) {
+      return null;
+    }
+  }
 
   async function runCore() {
     if (isBlocked()) return 0;
@@ -1505,3 +1632,67 @@ function buildOrdinalMap(items) {
   insertHeroAdEarly().catch(() => {});
   requestBurst();
 })();
+
+
+// ===== V12.2: run UL/OL repair =====
+try { ezoicRepairInvalidBetweenWraps(); } catch (e) {}
+if (window.jQuery) {
+  try {
+    window.jQuery(window).on('action:ajaxify.end action:infiniteScroll.loaded', function () {
+      setTimeout(function(){ try { ezoicRepairInvalidBetweenWraps(); } catch(e) {} }, 0);
+      setTimeout(function(){ try { ezoicRepairInvalidBetweenWraps(); } catch(e) {} }, 200);
+    });
+  } catch (e) {}
+}
+// ===== /V12.2 =====
+
+
+// ===== V12.3 reconcile scheduler =====
+(function(){
+  var pending = false;
+  var last = 0;
+  var COOLDOWN = 180;
+
+  function schedule(scope){
+    var now = Date.now();
+    if (now - last < COOLDOWN) return;
+    if (pending) return;
+    pending = true;
+    requestAnimationFrame(function(){
+      pending = false;
+      last = Date.now();
+      try { ezoicReconcileHosts(scope); } catch(e) {}
+    });
+  }
+
+  window.addEventListener('scroll', function(){ schedule(document); }, { passive: true });
+  window.addEventListener('resize', function(){ schedule(document); }, { passive: true });
+
+  if (window.jQuery) {
+    window.jQuery(window).on('action:ajaxify.end action:infiniteScroll.loaded', function(){
+      setTimeout(function(){ schedule(document); }, 0);
+      setTimeout(function(){ schedule(document); }, 220);
+      setTimeout(function(){ schedule(document); }, 600);
+    });
+  }
+
+  // MutationObserver lightweight: only watch ULs for child list changes
+  try {
+    if (typeof MutationObserver !== 'undefined') {
+      var mo = new MutationObserver(function(muts){
+        // if any li hosts are moved/added, reconcile
+        for (var i=0;i<muts.length;i++){
+          var m = muts[i];
+          if (m.addedNodes && m.addedNodes.length) { schedule(m.target); break; }
+          if (m.removedNodes && m.removedNodes.length) { schedule(m.target); break; }
+        }
+      });
+      document.querySelectorAll('ul,ol').forEach(function(list){
+        try { mo.observe(list, {childList:true}); } catch(e) {}
+      });
+    }
+  } catch(e){}
+
+  setTimeout(function(){ try { schedule(document); } catch(e) {} }, 0);
+})();
+// ===== /V12.3 =====

package/public/style.css

@@ -81,9 +81,8 @@
 }
 
 
-/* ===== V12.1 li host wrapper ===== */
+/* ===== V12.2 UL host for between wraps ===== */
 li.nodebb-ezoic-host { list-style: none; width: 100%; }
-/* keep inner wrap full width */
 li.nodebb-ezoic-host > .nodebb-ezoic-wrap { width: 100%; }
-/* ===== /V12.1 ===== */
+/* ===== /V12.2 ===== */