nodebb-plugin-ezoic-infinite 1.6.93 → 1.6.95

package/package.json

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

package/public/client.js

@@ -6,15 +6,8 @@
 
   const WRAP_CLASS = 'nodebb-ezoic-wrap';
   const POOL_ID = 'nodebb-ezoic-placeholder-pool';
-  
   let config = null;
   let isInternalChange = false;
-  
-  // Registre global pour ne JAMAIS redéfinir un ID déjà vu par Ezoic
-  window.ezoicDefinedIds = window.ezoicDefinedIds || new Set();
-  
-  let pendingIds = new Set();
-  let triggerTimer = null;
 
   function getPool() {
     let p = document.getElementById(POOL_ID);
@@ -27,41 +20,30 @@
     return p;
   }
 
-  function triggerEzoic() {
-    if (typeof window.ezstandalone === 'undefined' || pendingIds.size === 0) return;
+  // Cette fonction force Ezoic à remplir le placeholder
+  function forceFillAd(id) {
+    if (typeof window.ezstandalone === 'undefined') return;
 
     window.ezstandalone.cmd.push(function() {
-      const allPending = Array.from(pendingIds);
-      pendingIds.clear();
-
-      // Filtrer pour ne garder que les IDs JAMAIS définis auparavant
-      const newIdsToDefine = allPending.filter(id => !window.ezoicDefinedIds.has(id));
-
-      if (newIdsToDefine.length > 0) {
-        window.ezstandalone.define(newIdsToDefine);
-        newIdsToDefine.forEach(id => window.ezoicDefinedIds.add(id));
-      }
-
-      // La doc dit : showAds(id1, id2) pour le nouveau contenu
-      // On appelle showAds sur tous les IDs qu'on vient d'injecter, 
-      // qu'ils soient nouveaux ou recyclés.
-      try {
-        window.ezstandalone.showAds.apply(null, allPending);
-      } catch (e) {
-        console.warn('[Ezoic] showAds failed', e);
-      }
+      // 1. On s'assure que l'ID est bien dans la liste d'Ezoic
+      window.ezstandalone.define(parseInt(id, 10));
+      
+      // 2. On attend un micro-délai pour que le DOM soit stable
+      setTimeout(() => {
+        try {
+          // La doc précise que showAds avec IDs est le mode "Dynamic"
+          window.ezstandalone.showAds(parseInt(id, 10));
+          // On force un rafraîchissement spécifique si showAds ne suffit pas
+          if (window.ezstandalone.refresh) {
+             window.ezstandalone.refresh(parseInt(id, 10));
+          }
+        } catch (e) {
+          console.warn('[Ezoic] Fill failed for', id, e);
+        }
+      }, 200);
     });
   }
 
-  function callEzoic(id) {
-    const pid = parseInt(id, 10);
-    if (isNaN(pid)) return;
-    pendingIds.add(pid);
-    
-    clearTimeout(triggerTimer);
-    triggerTimer = setTimeout(triggerEzoic, 150);
-  }
-
   function redistribute() {
     if (!config || config.excluded) return;
 
@@ -71,36 +53,35 @@
       'message': '[component="post"]'
     };
 
-    if (config.enableCategoryAds) {
-      process(Array.from(document.querySelectorAll(selectors.home)), 'home', config.intervalCategories, config.showFirstCategoryAd);
-    }
-    if (config.enableBetweenAds) {
-      process(Array.from(document.querySelectorAll(selectors['topic-list'])), 'topic-list', config.intervalPosts, config.showFirstTopicAd);
-    }
-    if (config.enableMessageAds) {
-      process(Array.from(document.querySelectorAll(selectors.message)), 'message', config.messageIntervalPosts, config.showFirstMessageAd);
-    }
-  }
-
-  function process(items, kind, interval, showFirst) {
-    const int = parseInt(interval, 10) || 10;
-    items.forEach((item, index) => {
-      const pos = index + 1;
-      const shouldHaveAd = (pos === 1 && showFirst) || (pos % int === 0);
-      const next = item.nextElementSibling;
-
-      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'));
-          setTimeout(() => { isInternalChange = false; }, 50);
+    const process = (items, kind, interval, showFirst) => {
+      const int = parseInt(interval, 10) || 10;
+      const pool = getPool();
+
+      items.forEach((item, index) => {
+        const pos = index + 1;
+        const shouldHaveAd = (pos === 1 && showFirst) || (pos % int === 0);
+        const next = item.nextElementSibling;
+
+        if (shouldHaveAd && !(next && next.classList.contains(WRAP_CLASS))) {
+          const available = pool.querySelector(`.${WRAP_CLASS}[data-kind="${kind}"]`);
+          if (available) {
+            isInternalChange = true;
+            // On insère l'élément
+            item.parentNode.insertBefore(available, item.nextSibling);
+            
+            // On déclenche le remplissage publicitaire
+            const pid = available.getAttribute('data-placeholder-id');
+            forceFillAd(pid);
+            
+            setTimeout(() => { isInternalChange = false; }, 50);
+          }
         }
-      }
-    });
+      });
+    };
+
+    if (config.enableCategoryAds) process(Array.from(document.querySelectorAll(selectors.home)), 'home', config.intervalCategories, config.showFirstCategoryAd);
+    if (config.enableBetweenAds) process(Array.from(document.querySelectorAll(selectors['topic-list'])), 'topic-list', config.intervalPosts, config.showFirstTopicAd);
+    if (config.enableMessageAds) process(Array.from(document.querySelectorAll(selectors.message)), 'message', config.messageIntervalPosts, config.showFirstMessageAd);
   }
 
   function init() {
@@ -109,11 +90,11 @@
       .then(data => {
         config = data;
         const pool = getPool();
+        
         const setup = (raw, kind) => {
           if (!raw) return;
           raw.split(/[\s,]+/).filter(Boolean).forEach(id => {
-            // Créer le placeholder dans le pool s'il n'existe pas encore physiquement
-            if (!pool.querySelector(`[data-placeholder-id="${id}"]`)) {
+            if (!document.getElementById(`ezoic-pub-ad-placeholder-${id}`)) {
               const d = document.createElement('div');
               d.className = WRAP_CLASS;
               d.setAttribute('data-kind', kind);
@@ -123,6 +104,7 @@
             }
           });
         };
+
         setup(config.categoryPlaceholderIds, 'home');
         setup(config.placeholderIds, 'topic-list');
         setup(config.messagePlaceholderIds, 'message');
@@ -136,10 +118,7 @@
       });
   }
 
-  // Navigation NodeBB (Ajaxify)
   window.addEventListener('action:ajaxify.end', () => {
-    // On ne détruit RIEN au changement de page pour éviter les erreurs "already defined"
-    // On se contente de ré-injecter les placeholders du pool
     setTimeout(redistribute, 500);
   });
 

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;
+}