@bebranded/bb-contents 1.0.31-beta → 1.0.33-beta

package/bb-contents.js

@@ -1,7 +1,7 @@
 /**
  * BeBranded Contents
  * Contenus additionnels français pour Webflow
- * @version 1.0.31-beta
+ * @version 1.0.33-beta
  * @author BeBranded
  * @license MIT
  * @website https://www.bebranded.xyz
@@ -17,7 +17,7 @@
 
     // Configuration
     const config = {
-        version: '1.0.31-beta',
+        version: '1.0.33-beta',
         debug: false, // Désactivé par défaut pour une console propre
         prefix: 'bb-', // utilisé pour générer les sélecteurs (data-bb-*)
         i18n: {
@@ -31,6 +31,8 @@
         modules: {},
         _observer: null,
         _reinitScheduled: false,
+        _initRetryCount: 0,
+        _maxInitRetries: 3,
         
         // Utilitaires
         utils: {
@@ -100,6 +102,47 @@
 
             // Activer l'observer DOM pour contenu dynamique
             this.setupObserver();
+            
+            // Vérifier et réinitialiser les éléments non initialisés
+            this.checkAndReinitFailedElements();
+        },
+        
+        // Nouvelle méthode pour vérifier et réinitialiser les éléments échoués
+        checkAndReinitFailedElements: function() {
+            const scope = document.querySelector('[data-bb-scope]') || document;
+            let needsReinit = false;
+            
+            // Vérifier les marquees non initialisés
+            const marqueeElements = scope.querySelectorAll('[bb-marquee]:not([data-bb-marquee-processed])');
+            if (marqueeElements.length > 0) {
+                bbContents.utils.log('Marquees non initialisés détectés:', marqueeElements.length);
+                needsReinit = true;
+            }
+            
+            // Vérifier les autres modules si nécessaire
+            Object.keys(this.modules).forEach(function(moduleName) {
+                const module = bbContents.modules[moduleName];
+                if (module.checkFailed && module.checkFailed(scope)) {
+                    bbContents.utils.log('Module', moduleName, 'a des éléments échoués');
+                    needsReinit = true;
+                }
+            });
+            
+            // Réinitialiser si nécessaire et si on n'a pas dépassé le nombre max de tentatives
+            if (needsReinit && this._initRetryCount < this._maxInitRetries) {
+                this._initRetryCount++;
+                bbContents.utils.log('Tentative de réinitialisation', this._initRetryCount, '/', this._maxInitRetries);
+                
+                setTimeout(() => {
+                    this.init();
+                }, 500 * this._initRetryCount); // Délai progressif
+            }
+        },
+        
+        // Méthode publique pour forcer la réinitialisation
+        reinit: function() {
+            this._initRetryCount = 0;
+            this.init();
         },
 
         // Observer DOM pour contenu dynamique
@@ -307,13 +350,20 @@
             }
         },
 
-        // Module Marquee - Version live 1.0.0 avec protections
+        // Module Marquee - Version live 1.0.33-beta avec améliorations d'initialisation
         marquee: {
             detect: function(scope) {
                 const s = scope || document;
                 return s.querySelector(bbContents._attrSelector('marquee')) !== null;
             },
             
+            // Nouvelle méthode pour vérifier les éléments échoués
+            checkFailed: function(scope) {
+                const s = scope || document;
+                const failedElements = s.querySelectorAll('[bb-marquee]:not([data-bb-marquee-processed])');
+                return failedElements.length > 0;
+            },
+            
             init: function(root) {
                 const scope = root || document;
                 if (scope.closest && scope.closest('[data-bb-disable]')) return;
@@ -399,28 +449,38 @@
                     // Marquer l'élément comme traité par le module marquee
                     element.setAttribute('data-bb-marquee-processed', 'true');
 
-                    // Fonction pour initialiser l'animation
-                    const initAnimation = () => {
+                    // Fonction pour initialiser l'animation avec retry amélioré
+                    const initAnimation = (retryCount = 0) => {
                         // Attendre que le contenu soit dans le DOM
                         requestAnimationFrame(() => {
                             const contentWidth = mainBlock.offsetWidth;
                             const contentHeight = mainBlock.offsetHeight;
                             
-                            // Debug
-                            bbContents.utils.log('Debug - Largeur du contenu:', contentWidth, 'px', 'Hauteur:', contentHeight, 'px', 'Enfants:', mainBlock.children.length, 'Vertical:', isVertical, 'Direction:', direction);
+                            // Debug amélioré
+                            bbContents.utils.log('Debug - Largeur du contenu:', contentWidth, 'px', 'Hauteur:', contentHeight, 'px', 'Enfants:', mainBlock.children.length, 'Vertical:', isVertical, 'Direction:', direction, 'Tentative:', retryCount + 1);
                             
-                            // Si pas de contenu, réessayer
+                            // Si pas de contenu, réessayer avec délai progressif
                             if ((isVertical && contentHeight === 0) || (!isVertical && contentWidth === 0)) {
-                                bbContents.utils.log('Contenu non prêt, nouvelle tentative dans 200ms');
-                                setTimeout(initAnimation, 200);
-                                return;
+                                if (retryCount < 5) {
+                                    bbContents.utils.log('Contenu non prêt, nouvelle tentative dans', (200 + retryCount * 100), 'ms');
+                                    setTimeout(() => initAnimation(retryCount + 1), 200 + retryCount * 100);
+                                    return;
+                                } else {
+                                    bbContents.utils.log('Échec d\'initialisation après 5 tentatives');
+                                    return;
+                                }
                             }
                             
                             // Pour le vertical, s'assurer qu'on a une hauteur minimale
                             if (isVertical && contentHeight < 50) {
-                                bbContents.utils.log('Hauteur insuffisante pour le marquee vertical (' + contentHeight + 'px), nouvelle tentative dans 200ms');
-                                setTimeout(initAnimation, 200);
-                                return;
+                                if (retryCount < 5) {
+                                    bbContents.utils.log('Hauteur insuffisante pour le marquee vertical (' + contentHeight + 'px), nouvelle tentative dans', (200 + retryCount * 100), 'ms');
+                                    setTimeout(() => initAnimation(retryCount + 1), 200 + retryCount * 100);
+                                    return;
+                                } else {
+                                    bbContents.utils.log('Échec d\'initialisation - hauteur insuffisante après 5 tentatives');
+                                    return;
+                                }
                             }
                             
                             if (isVertical) {
@@ -519,8 +579,9 @@
                         });
                     };
                     
-                    // Démarrer l'initialisation
-                    setTimeout(initAnimation, isVertical ? 300 : 100);
+                    // Démarrer l'initialisation avec délai adaptatif
+                    const initDelay = isVertical ? 300 : 100;
+                    setTimeout(() => initAnimation(0), initDelay);
                 });
 
                 bbContents.utils.log('Module Marquee initialisé:', elements.length, 'éléments');
@@ -608,6 +669,7 @@
                     const channelId = bbContents._getAttr(element, 'bb-youtube-channel');
                     const videoCount = bbContents._getAttr(element, 'bb-youtube-video-count') || '10';
                     const allowShorts = bbContents._getAttr(element, 'bb-youtube-allow-shorts') === 'true';
+                    const language = bbContents._getAttr(element, 'bb-youtube-language') || 'fr';
                     const endpoint = bbContents.config.youtubeEndpoint;
                     
                     if (!channelId) {
@@ -647,12 +709,12 @@
                     element.setAttribute('data-bb-youtube-processed', 'true');
                     
                     // Vérifier le cache d'abord
-                    const cacheKey = `youtube_${channelId}_${videoCount}_${allowShorts}`;
+                    const cacheKey = `youtube_${channelId}_${videoCount}_${allowShorts}_${language}`;
                     const cachedData = this.cache.get(cacheKey);
                     
                     if (cachedData) {
                         bbContents.utils.log('Données YouTube récupérées du cache (économie API)');
-                        this.generateYouTubeFeed(container, template, cachedData, allowShorts);
+                        this.generateYouTubeFeed(container, template, cachedData, allowShorts, language);
                         return;
                     }
                     
@@ -676,7 +738,7 @@
                             this.cache.set(cacheKey, data);
                             bbContents.utils.log('Données YouTube mises en cache pour 24h (économie API)');
                             
-                            this.generateYouTubeFeed(container, template, data, allowShorts);
+                            this.generateYouTubeFeed(container, template, data, allowShorts, language);
                         })
                         .catch(error => {
                             bbContents.utils.log('Erreur dans le module youtube:', error);
@@ -699,7 +761,7 @@
                 });
             },
             
-            generateYouTubeFeed: function(container, template, data, allowShorts) {
+            generateYouTubeFeed: function(container, template, data, allowShorts, language = 'fr') {
                 if (!data.items || data.items.length === 0) {
                     container.innerHTML = '<div style="padding: 20px; text-align: center; color: #6b7280;">Aucune vidéo trouvée</div>';
                     return;
@@ -728,7 +790,7 @@
                     clone.style.display = ''; // Rendre visible
                     
                     // Remplir les données
-                    this.fillVideoData(clone, videoId, snippet);
+                    this.fillVideoData(clone, videoId, snippet, language);
                     
                     // Ajouter au conteneur
                     container.appendChild(clone);
@@ -737,7 +799,7 @@
                 bbContents.utils.log(`YouTube Feed généré: ${videos.length} vidéos`);
             },
             
-            fillVideoData: function(element, videoId, snippet) {
+            fillVideoData: function(element, videoId, snippet, language = 'fr') {
                 // Remplir le lien directement sur l'élément (link block)
                 if (element.tagName === 'A' || element.hasAttribute('bb-youtube-item')) {
                     element.href = `https://www.youtube.com/watch?v=${videoId}`;
@@ -802,7 +864,7 @@
                 // Remplir la date
                 const date = element.querySelector('[bb-youtube-date]');
                 if (date) {
-                    date.textContent = this.formatDate(snippet.publishedAt);
+                    date.textContent = this.formatDate(snippet.publishedAt, language);
                 }
                 
                 // Remplir le nom de la chaîne
@@ -812,17 +874,54 @@
                 }
             },
             
-            formatDate: function(dateString) {
+            formatDate: function(dateString, language = 'fr') {
                 const date = new Date(dateString);
                 const now = new Date();
                 const diffTime = Math.abs(now - date);
                 const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
                 
-                if (diffDays === 1) return 'Il y a 1 jour';
-                if (diffDays < 7) return `Il y a ${diffDays} jours`;
-                if (diffDays < 30) return `Il y a ${Math.floor(diffDays / 7)} semaines`;
-                if (diffDays < 365) return `Il y a ${Math.floor(diffDays / 30)} mois`;
-                return `Il y a ${Math.floor(diffDays / 365)} ans`;
+                // Traductions
+                const translations = {
+                    fr: {
+                        day: 'jour',
+                        days: 'jours',
+                        week: 'semaine',
+                        weeks: 'semaines',
+                        month: 'mois',
+                        months: 'mois',
+                        year: 'an',
+                        years: 'ans',
+                        ago: 'Il y a'
+                    },
+                    en: {
+                        day: 'day',
+                        days: 'days',
+                        week: 'week',
+                        weeks: 'weeks',
+                        month: 'month',
+                        months: 'months',
+                        year: 'year',
+                        years: 'years',
+                        ago: 'ago'
+                    }
+                };
+                
+                const t = translations[language] || translations.fr;
+                
+                if (diffDays === 1) return `${t.ago} 1 ${t.day}`;
+                if (diffDays < 7) return `${t.ago} ${diffDays} ${t.days}`;
+                
+                const weeks = Math.floor(diffDays / 7);
+                if (weeks === 1) return `${t.ago} 1 ${t.week}`;
+                if (diffDays < 30) return `${t.ago} ${weeks} ${t.weeks}`;
+                
+                const months = Math.floor(diffDays / 30);
+                if (months === 1) return `${t.ago} 1 ${t.month}`;
+                if (diffDays < 365) return `${t.ago} ${months} ${t.months}`;
+                
+                const years = Math.floor(diffDays / 365);
+                if (years === 1) return `${t.ago} 1 ${t.year}`;
+                return `${t.ago} ${years} ${t.years}`;
             },
             
             // Fonction pour décoder les entités HTML
@@ -885,6 +984,18 @@
                 bbContents.init();
             }, 100);
         }
+        
+        // Initialisation différée supplémentaire pour les cas difficiles
+        window.addEventListener('load', function() {
+            setTimeout(function() {
+                // Vérifier s'il y a des éléments non initialisés
+                const unprocessedMarquees = document.querySelectorAll('[bb-marquee]:not([data-bb-marquee-processed])');
+                if (unprocessedMarquees.length > 0) {
+                    bbContents.utils.log('Éléments marquee non initialisés détectés après load, réinitialisation...');
+                    bbContents.reinit();
+                }
+            }, 1000);
+        });
     }
 
     // Initialisation

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bebranded/bb-contents",
-  "version": "1.0.31-beta",
+  "version": "1.0.33-beta",
   "description": "Contenus additionnels français pour Webflow",
   "main": "bb-contents.js",
   "scripts": {