nodebb-plugin-ezoic-infinite 1.6.16 → 1.6.17

package/package.json

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

package/public/client.js

@@ -1,6 +1,116 @@
 (function () {
   'use strict';
 
+function ezoicAnchorToken() {
+  // cheap unique-ish token
+  try { return String(Date.now()) + '-' + Math.random().toString(16).slice(2); } catch (e) { return String(Date.now()); }
+}
+
+function ezoicInsertAfterWithToken(target, wrap, kindClass) {
+  try {
+    if (!target || !wrap) return;
+
+    // Tag the anchor LI (topic item) with a stable token the first time we attach a between ad to it.
+    // If NodeBB re-renders/virtualizes and recreates the LI, this tag disappears => we can drop orphan ads.
+    var anchorLi = null;
+    try { anchorLi = target.closest ? target.closest('li') : null; } catch (e) {}
+    if (!anchorLi && target.tagName === 'LI') anchorLi = target;
+
+    if (kindClass === 'ezoic-ad-between' && anchorLi) {
+      var token = anchorLi.getAttribute('data-ezoic-anchor-token');
+      if (!token) {
+        token = ezoicAnchorToken();
+        try { anchorLi.setAttribute('data-ezoic-anchor-token', token); } catch (e) {}
+      }
+
+      // If inside UL/OL, keep valid DOM with LI host, but keep wrap as DIV (compat).
+      var p = anchorLi.parentElement;
+      if (p && (p.tagName === 'UL' || p.tagName === 'OL')) {
+        var host = document.createElement('li');
+        host.className = 'nodebb-ezoic-host';
+        host.setAttribute('role', 'listitem');
+        host.style.listStyle = 'none';
+        host.style.width = '100%';
+        try { host.setAttribute('data-ezoic-anchor-token', token); } catch (e) {}
+
+        if (anchorLi.insertAdjacentElement) anchorLi.insertAdjacentElement('afterend', host);
+        else if (p.insertBefore) p.insertBefore(host, anchorLi.nextSibling);
+
+        try { host.appendChild(wrap); } catch (e) {}
+        try { wrap.style.width = '100%'; } catch (e) {}
+        return;
+      }
+
+      // Non-list parent: just insert sibling but still tag wrap so we can reconcile
+      try { wrap.setAttribute('data-ezoic-anchor-token', token); } catch (e) {}
+    }
+
+    if (target.insertAdjacentElement) ezoicInsertAfterWithToken(target, wrap, kindClass);
+    else if (target.parentNode) target.parentNode.insertBefore(wrap, target.nextSibling);
+  } catch (e) {}
+}
+
+function ezoicRepairBetweenWrapsToHost() {
+  // Repair any invalid UL children and ensure hosts/wraps carry token if possible.
+  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 ul = wrap.parentElement;
+        if (!ul) return;
+        var prevLi = wrap.previousElementSibling && wrap.previousElementSibling.tagName === 'LI' ? wrap.previousElementSibling : null;
+        var token = prevLi ? prevLi.getAttribute('data-ezoic-anchor-token') : null;
+        if (!token && prevLi) {
+          token = ezoicAnchorToken();
+          prevLi.setAttribute('data-ezoic-anchor-token', token);
+        }
+
+        var host = document.createElement('li');
+        host.className = 'nodebb-ezoic-host';
+        host.setAttribute('role', 'listitem');
+        host.style.listStyle = 'none';
+        host.style.width = '100%';
+        if (token) host.setAttribute('data-ezoic-anchor-token', token);
+
+        ul.insertBefore(host, wrap);
+        host.appendChild(wrap);
+        wrap.style.width = '100%';
+      } catch (e) {}
+    });
+  } catch (e) {}
+}
+
+function ezoicReconcileOrDropHostsByToken(scope) {
+  // Core fix: if NodeBB virtualizes and anchors disappear, DROP hosts so they can't pile up at top.
+  // If anchor exists, ensure host sits right after it.
+  try {
+    var root = scope || document;
+    var hosts = root.querySelectorAll('li.nodebb-ezoic-host[data-ezoic-anchor-token]');
+    if (!hosts || !hosts.length) return;
+
+    hosts.forEach(function(host){
+      try {
+        var token = host.getAttribute('data-ezoic-anchor-token');
+        if (!token) return;
+        var listEl = host.parentElement;
+        if (!listEl) return;
+
+        // Find the exact anchor LI that still carries the token.
+        var anchor = listEl.querySelector('li[data-ezoic-anchor-token="' + token + '"]');
+        if (!anchor) {
+          // anchor not in DOM => virtualized/re-rendered: remove host to avoid stacking
+          host.remove();
+          return;
+        }
+        if (host.previousElementSibling !== anchor) {
+          anchor.insertAdjacentElement('afterend', host);
+        }
+      } catch (e) {}
+    });
+  } catch (e) {}
+}
+
+
   // Track scroll direction to avoid aggressive recycling when the user scrolls upward.
   // Recycling while scrolling up is a common cause of ads "bunching" and a "disappearing too fast" feeling.
   let lastScrollY = 0;
@@ -668,7 +778,7 @@ function globalGapFixInit() {
     insertingIds.add(id);
     try {
       const wrap = buildWrap(id, kindClass, afterPos, !existingPh);
-      target.insertAdjacentElement('afterend', wrap);
+      ezoicInsertAfterWithToken(target, wrap, kindClass);
 
       // If placeholder exists elsewhere (including pool), move it into the wrapper.
       if (existingPh) {
@@ -1160,7 +1270,7 @@ function buildOrdinalMap(items) {
       if (!anchorEl || !wrap || !wrap.isConnected) return null;
 
       wrap.setAttribute('data-ezoic-after', String(afterPos));
-      anchorEl.insertAdjacentElement('afterend', wrap);
+      ezoicInsertAfterWithToken(anchorEl, wrap, kindClass);
 
       // Ensure minimal layout impact.
       try { wrap.style.contain = 'layout style paint'; } catch (e) {}
@@ -1510,104 +1620,49 @@ function buildOrdinalMap(items) {
 })();
 
 
-
-// ===== V13 sticky-killer for Ezoic/AMP in list ads =====
-(function () {
-  // Hypothesis: the "pile at top" is a visual effect from multiple sticky intradiv ads
-  // (ezads-sticky-intradiv with inline !important). We neutralize sticky continuously.
-
-  function killStickyIn(root) {
-    try {
-      var scope = root || document;
-      var nodes = scope.querySelectorAll('.nodebb-ezoic-wrap .ezads-sticky-intradiv, .nodebb-ezoic-wrap [style*="position: sticky"], .nodebb-ezoic-wrap [style*="position:sticky"]');
-      nodes.forEach(function(n){
-        try {
-          n.style.setProperty('position', 'static', 'important');
-          n.style.setProperty('top', 'auto', 'important');
-          n.style.setProperty('bottom', 'auto', 'important');
-          n.style.setProperty('left', 'auto', 'important');
-          n.style.setProperty('right', 'auto', 'important');
-          // if they force translate/transform for sticky, remove it
-          n.style.setProperty('transform', 'none', 'important');
-          n.style.setProperty('will-change', 'auto', 'important');
-          // also remove class to reduce re-application
-          if (n.classList) n.classList.remove('ezads-sticky-intradiv');
-        } catch (e) {}
-        // If inline style string contains "sticky", scrub it (some libs reparse cssText)
-        try {
-          var st = n.getAttribute && n.getAttribute('style');
-          if (st && (st.indexOf('sticky') !== -1)) {
-            var cleaned = st.replace(/position\s*:\s*sticky\s*!important\s*;?/gi, 'position: static !important;')
-                            .replace(/position\s*:\s*sticky\s*;?/gi, 'position: static;')
-                            .replace(/top\s*:\s*0px\s*!important\s*;?/gi, 'top: auto !important;')
-                            .replace(/top\s*:\s*0px\s*;?/gi, 'top: auto;');
-            n.setAttribute('style', cleaned);
-          }
-        } catch (e) {}
-      });
-    } catch (e) {}
+// ===== V14 token reconcile scheduler =====
+(function(){
+  var pending=false, last=0, COOLDOWN=140;
+  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 { ezoicRepairBetweenWrapsToHost(); } catch(e) {}
+      try { ezoicReconcileOrDropHostsByToken(scope); } catch(e) {}
+    });
   }
 
-  function install() {
-    // initial pass
-    killStickyIn(document);
-
-    // Throttled scroll pass (in case scripts reapply on scroll)
-    var t = null;
-    window.addEventListener('scroll', function(){
-      if (t) return;
-      t = setTimeout(function(){ t = null; killStickyIn(document); }, 120);
-    }, { passive: true });
+  window.addEventListener('scroll', function(){ schedule(document); }, { passive:true });
+  window.addEventListener('resize', function(){ schedule(document); }, { passive:true });
 
-    // MutationObserver to catch late injections / style changes
-    try {
-      if (typeof MutationObserver !== 'undefined') {
-        var mo = new MutationObserver(function(muts){
-          try {
-            for (var i=0;i<muts.length;i++){
-              var m = muts[i];
-              if (m.type === 'attributes') {
-                // style/class changed
-                if (m.attributeName === 'style' || m.attributeName === 'class') {
-                  killStickyIn(m.target && m.target.closest ? (m.target.closest('.nodebb-ezoic-wrap') || document) : document);
-                }
-              } else if (m.addedNodes && m.addedNodes.length) {
-                for (var j=0;j<m.addedNodes.length;j++){
-                  var n = m.addedNodes[j];
-                  if (!n || n.nodeType !== 1) continue;
-                  if (n.matches && (n.matches('.nodebb-ezoic-wrap') || n.matches('.ezads-sticky-intradiv'))) {
-                    killStickyIn(n);
-                  } else if (n.querySelector) {
-                    if (n.querySelector('.nodebb-ezoic-wrap, .ezads-sticky-intradiv')) killStickyIn(n);
-                  }
-                }
-              }
-            }
-          } catch (e) {}
-        });
-        mo.observe(document.documentElement || document.body, {
-          subtree: true,
-          childList: true,
-          attributes: true,
-          attributeFilter: ['style','class']
-        });
-      }
-    } catch (e) {}
+  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); }, 800);
+    });
+  }
 
-    // NodeBB events
-    if (window.jQuery) {
-      try {
-        window.jQuery(window).on('action:ajaxify.end action:infiniteScroll.loaded', function(){
-          setTimeout(function(){ killStickyIn(document); }, 0);
-          setTimeout(function(){ killStickyIn(document); }, 250);
-          setTimeout(function(){ killStickyIn(document); }, 900);
-        });
-      } catch (e) {}
+  try {
+    if (typeof MutationObserver !== 'undefined') {
+      var mo = new MutationObserver(function(muts){
+        for (var i=0;i<muts.length;i++){
+          var m=muts[i];
+          if ((m.addedNodes && m.addedNodes.length) || (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){}
 
-  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', install);
-  else install();
+  setTimeout(function(){ schedule(document); }, 0);
 })();
-// ===== /V13 =====
-
+// ===== /V14 =====

package/public/style.css

@@ -81,11 +81,7 @@
 }
 
 
-/* ===== V13 sticky-killer CSS fallback ===== */
-.nodebb-ezoic-wrap .ezads-sticky-intradiv {
-  position: static !important;
-  top: auto !important;
-  transform: none !important;
-}
-/* ===== /V13 ===== */
+/* ===== V14 token host styles ===== */
+li.nodebb-ezoic-host { list-style: none; width: 100%; }
+/* ===== /V14 ===== */