nodebb-plugin-ezoic-infinite 1.6.92 → 1.6.94

package/package.json

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

package/public/client.js

@@ -5,73 +5,12 @@
   window.ezInfiniteInjected = true;
 
   const WRAP_CLASS = 'nodebb-ezoic-wrap';
-  const POOL_ID = 'nodebb-ezoic-placeholder-pool';
-  
   let config = null;
   let isInternalChange = false;
-  let activeIdsOnPage = new Set();
-  let pendingIds = new Set();
   let triggerTimer = null;
 
-  function getPool() {
-    let p = document.getElementById(POOL_ID);
-    if (!p) {
-      p = document.createElement('div');
-      p.id = POOL_ID;
-      p.style.display = 'none';
-      document.body.appendChild(p);
-    }
-    return p;
-  }
-
-  function triggerEzoic() {
-    if (typeof window.ezstandalone === 'undefined' || pendingIds.size === 0) return;
-
-    window.ezstandalone.cmd.push(function() {
-      const idsToProcess = Array.from(pendingIds);
-      pendingIds.clear();
-
-      // 1. Définir les IDs (requis par Ezoic avant l'affichage)
-      window.ezstandalone.define(idsToProcess);
-
-      if (!window.ezstandalone.enabled) {
-        // PREMIER CHARGEMENT
-        window.ezstandalone.enable();
-        window.ezstandalone.showAds(); // Appelle tout ce qui est présent
-      } else {
-        // NOUVEAU CONTENU (INFINITE SCROLL)
-        // La doc dit : ezstandalone.showAds(104, 105);
-        window.ezstandalone.showAds.apply(null, idsToProcess);
-      }
-      
-      // On garde trace pour le nettoyage futur
-      idsToProcess.forEach(id => activeIdsOnPage.add(id));
-    });
-  }
-
-  function callEzoic(id) {
-    const pid = parseInt(id, 10);
-    if (isNaN(pid)) return;
-    pendingIds.add(pid);
-    
-    // On attend un peu pour grouper si plusieurs pubs arrivent en même temps
-    clearTimeout(triggerTimer);
-    triggerTimer = setTimeout(triggerEzoic, 200);
-  }
-
-  // "Changing Pages" : Nettoyage complet lors de la navigation NodeBB
-  function onPageChangeStart() {
-    if (typeof window.ezstandalone !== 'undefined') {
-      window.ezstandalone.cmd.push(function() {
-        // On nettoie tout avant de charger la nouvelle page
-        if (typeof window.ezstandalone.destroyAll === 'function') {
-          window.ezstandalone.destroyAll();
-        }
-        activeIdsOnPage.clear();
-      });
-    }
-  }
-
+  // On récupère les IDs déjà présents dans la page (générés par ton intégration de base)
+  // pour éviter de tenter de les redéfinir.
   function redistribute() {
     if (!config || config.excluded) return;
 
@@ -94,44 +33,80 @@
 
   function process(items, kind, interval, showFirst) {
     const int = parseInt(interval, 10) || 10;
+    const pool = document.getElementById('nodebb-ezoic-placeholder-pool');
+    if (!pool) return;
+
     items.forEach((item, index) => {
       const pos = index + 1;
       const shouldHaveAd = (pos === 1 && showFirst) || (pos % int === 0);
       const next = item.nextElementSibling;
 
+      // Si on doit mettre une pub et qu'il n'y en a pas déjà une après cet élément
       if (shouldHaveAd && !(next && next.classList.contains(WRAP_CLASS))) {
-        const pool = getPool();
         const available = pool.querySelector(`.${WRAP_CLASS}[data-kind="${kind}"]`);
         
         if (available) {
           isInternalChange = true;
           item.parentNode.insertBefore(available, item.nextSibling);
-          callEzoic(available.getAttribute('data-placeholder-id'));
+          
+          const placeholderId = available.getAttribute('data-placeholder-id');
+          refreshAd(placeholderId);
+          
           setTimeout(() => { isInternalChange = false; }, 50);
         }
       }
     });
   }
 
+  function refreshAd(id) {
+    if (typeof window.ezstandalone === 'undefined') return;
+
+    clearTimeout(triggerTimer);
+    triggerTimer = setTimeout(() => {
+      window.ezstandalone.cmd.push(function() {
+        // Au lieu de define(), on utilise simplement showAds()
+        // Ezoic va détecter que le div avec cet ID a bougé et va le remplir.
+        try {
+          // On force l'affichage de cet ID spécifique
+          window.ezstandalone.showAds(parseInt(id, 10));
+          console.debug('[Ezoic] Displaying ID:', id);
+        } catch (e) {
+          console.error('[Ezoic] Error showing ID:', id, e);
+        }
+      });
+    }, 100);
+  }
+
   function init() {
     fetch('/api/plugins/ezoic-infinite/config')
       .then(r => r.json())
       .then(data => {
         config = data;
-        const pool = getPool();
+        
+        // On crée un pool CACHÉ qui contient tous les placeholders déclarés dans l'admin
+        let pool = document.getElementById('nodebb-ezoic-placeholder-pool');
+        if (!pool) {
+          pool = document.createElement('div');
+          pool.id = 'nodebb-ezoic-placeholder-pool';
+          pool.style.display = 'none';
+          document.body.appendChild(pool);
+        }
+
         const setup = (raw, kind) => {
           if (!raw) return;
           raw.split(/[\s,]+/).filter(Boolean).forEach(id => {
-            if (!pool.querySelector(`[data-placeholder-id="${id}"]`)) {
-              const d = document.createElement('div');
-              d.className = WRAP_CLASS;
-              d.setAttribute('data-kind', kind);
-              d.setAttribute('data-placeholder-id', id);
-              d.innerHTML = `<div id="ezoic-pub-ad-placeholder-${id}"></div>`;
-              pool.appendChild(d);
+            if (!document.getElementById(`ezoic-pub-ad-placeholder-${id}`)) {
+              const wrap = document.createElement('div');
+              wrap.className = WRAP_CLASS;
+              wrap.setAttribute('data-kind', kind);
+              wrap.setAttribute('data-placeholder-id', id);
+              // Structure exacte attendue par Ezoic
+              wrap.innerHTML = `<div id="ezoic-pub-ad-placeholder-${id}"></div>`;
+              pool.appendChild(wrap);
             }
           });
         };
+
         setup(config.categoryPlaceholderIds, 'home');
         setup(config.placeholderIds, 'topic-list');
         setup(config.messagePlaceholderIds, 'message');
@@ -145,11 +120,7 @@
       });
   }
 
-  // Événements NodeBB
-  window.addEventListener('action:ajaxify.start', onPageChangeStart);
-  window.addEventListener('action:ajaxify.end', () => {
-    setTimeout(redistribute, 500);
-  });
+  window.addEventListener('action:ajaxify.end', () => setTimeout(redistribute, 500));
 
   if (document.readyState === 'loading') {
     document.addEventListener('DOMContentLoaded', init);

package/public/style.css

@@ -1,34 +1,91 @@
-/* Container global de pub */
+/* ============================================================
+   CONTAINER GLOBAL DES PUBS
+   ============================================================ */
 .nodebb-ezoic-wrap {
     display: block !important;
     width: 100% !important;
-    margin: 20px 0 !important;
-    min-height: 250px; 
-    clear: both;
+    min-height: 250px; /* Réserve l'espace pour éviter le saut de contenu (CLS) */
+    margin: 30px 0 !important;
+    padding: 0;
+    clear: both !important;
     text-align: center;
+    position: relative;
+    overflow: hidden;
 }
 
-/* Accueil (Catégories) */
+/* On s'assure que le contenu Ezoic à l'intérieur est centré */
+.nodebb-ezoic-wrap > div {
+    margin: 0 auto !important;
+}
+
+/* ============================================================
+   1. PAGE D'ACCUEIL (Liste des catégories)
+   ============================================================ */
 [component="categories/category"] + .nodebb-ezoic-wrap,
 .category-item + .nodebb-ezoic-wrap {
     margin: 40px 0 !important;
     border-top: 1px solid rgba(0,0,0,0.05);
+    padding-top: 25px;
+    background: transparent;
 }
 
-/* Liste des Topics (Page catégorie) */
+/* ============================================================
+   2. PAGE CATÉGORIE (Liste des Topics / Sujets)
+   ============================================================ */
+/* Important : NodeBB Harmony utilise des <li> pour les topics. 
+   On s'assure que notre wrap ne casse pas la structure de liste 
+   mais s'affiche comme un bloc complet. */
 li[component="category/topic"] + .nodebb-ezoic-wrap {
     list-style: none !important;
-    padding: 15px 0;
+    margin: 0 !important;
+    padding: 20px 0 !important;
     border-bottom: 1px solid rgba(0,0,0,0.05);
+    display: block !important;
+    float: none !important;
+    width: 100%;
 }
 
-/* Messages (Dans un post) */
+/* ============================================================
+   3. PAGE DES POSTS (Messages à l'intérieur d'un topic)
+   ============================================================ */
 [component="post"] + .nodebb-ezoic-wrap {
-    margin: 40px 0 !important;
-    padding: 20px;
-    background: rgba(0,0,0,0.01);
+    margin: 45px 0 !important;
+    padding: 25px;
+    background: rgba(0,0,0,0.02); /* Léger fond pour distinguer le message pub */
+    border-radius: 12px;
+    border: 1px inset rgba(0,0,0,0.03);
+}
+
+/* ============================================================
+   CORRECTIFS ANTI "PILE-UP" & AFFICHAGE
+   ============================================================ */
+
+/* Évite que les pubs ne soient invisibles si Ezoic ne charge rien immédiatement */
+.nodebb-ezoic-wrap:empty {
+    min-height: 1px;
+    height: 1px;
+}
+
+/* Neutralise les marges forcées par Ezoic qui pourraient décaler le layout */
+.ezoic-ad {
+    margin: 10px auto !important;
+    display: block !important;
+}
+
+/* Mobile : Réduction des marges pour ne pas perdre trop de place */
+@media (max-width: 767px) {
+    .nodebb-ezoic-wrap {
+        margin: 20px 0 !important;
+        min-height: 100px;
+    }
+    [component="post"] + .nodebb-ezoic-wrap {
+        padding: 10px;
+        margin: 25px 0 !important;
+    }
 }
 
-/* Masquage des blocs vides */
-.nodebb-ezoic-wrap:empty { min-height: 1px; }
-.ezoic-ad { margin: 0 auto !important; }
+/* Empêche les sauts de ligne bizarres dans les listes Harmony */
+.categories > li.nodebb-ezoic-wrap,
+.category > li.nodebb-ezoic-wrap {
+    float: none !important;
+}