@bebranded/bb-contents 1.0.47-beta → 1.0.49-beta

package/bb-contents.js

@@ -1,7 +1,7 @@
 /**
  * BeBranded Contents
  * Contenus additionnels français pour Webflow
- * @version 1.0.47-beta
+ * @version 1.0.49-beta
  * @author BeBranded
  * @license MIT
  * @website https://www.bebranded.xyz
@@ -22,8 +22,8 @@
 
     // Configuration
     const config = {
-        version: '1.0.47-beta',
-        debug: true, // Activé temporairement pour debug
+        version: '1.0.49-beta',
+        debug: false, // Debug désactivé
         prefix: 'bb-', // utilisé pour générer les sélecteurs (data-bb-*)
         youtubeEndpoint: null, // URL du worker YouTube (à définir par l'utilisateur)
         i18n: {
@@ -175,14 +175,12 @@
         checkYouTubeConfig: function() {
             // Vérifier si la configuration a été définie après le chargement
             if (this.config.youtubeEndpoint) {
-                console.log('[DEBUG] YouTube endpoint found:', this.config.youtubeEndpoint);
                 return true;
             }
             
             // Vérifier dans l'objet temporaire
             if (window._bbContentsConfig && window._bbContentsConfig.youtubeEndpoint) {
                 this.config.youtubeEndpoint = window._bbContentsConfig.youtubeEndpoint;
-                console.log('[DEBUG] YouTube endpoint found in temp config:', this.config.youtubeEndpoint);
                 return true;
             }
             
@@ -255,13 +253,31 @@
             if (scope.closest && scope.closest('[data-bb-disable]')) return;
             const elements = scope.querySelectorAll(bbContents._attrSelector('marquee'));
 
-            elements.forEach(function(element) {
+            // Debug: Log du nombre d'éléments marquee trouvés
+            console.log(`[bb-contents] Marquee init: ${elements.length} éléments trouvés`);
+
+            elements.forEach(function(element, index) {
+                // Debug: Log de chaque élément
+                console.log(`[bb-contents] Marquee ${index + 1}:`, {
+                    element: element,
+                    alreadyProcessed: element.bbProcessed,
+                    hasYouTubeProcessed: element.hasAttribute('data-bb-youtube-processed'),
+                    hasMarqueeProcessed: element.hasAttribute('data-bb-marquee-processed'),
+                    attributes: {
+                        speed: element.getAttribute('bb-marquee-speed'),
+                        direction: element.getAttribute('bb-marquee-direction'),
+                        orientation: element.getAttribute('bb-marquee-orientation'),
+                        height: element.getAttribute('bb-marquee-height')
+                    }
+                });
                     // Vérifier si l'élément a déjà été traité par un autre module
                     if (element.bbProcessed || element.hasAttribute('data-bb-youtube-processed')) {
                         // Élément marquee déjà traité par un autre module, ignoré
+                        console.log(`[bb-contents] Marquee ${index + 1}: IGNORÉ (déjà traité)`);
                         return;
                     }
                 element.bbProcessed = true;
+                console.log(`[bb-contents] Marquee ${index + 1}: TRAITEMENT EN COURS`);
 
                 // Récupérer les options
                     const speed = bbContents._getAttr(element, 'bb-marquee-speed') || '100';
@@ -338,10 +354,14 @@
 
                     // Fonction pour initialiser l'animation avec vérification robuste des dimensions
                     const initAnimation = (retryCount = 0) => {
+                        console.log(`[bb-contents] Marquee ${index + 1}: initAnimation tentative ${retryCount + 1}`);
+                        
                         // Vérifier que les images sont chargées
                         const images = mainBlock.querySelectorAll('img');
                         const imagesLoaded = Array.from(images).every(img => img.complete && img.naturalHeight > 0);
                         
+                        console.log(`[bb-contents] Marquee ${index + 1}: Images chargées: ${imagesLoaded} (${images.length} images)`);
+                        
                         // Attendre que le contenu soit dans le DOM et que les images soient chargées
                     requestAnimationFrame(() => {
                             // Calcul plus robuste des dimensions
@@ -349,6 +369,13 @@
                             const contentWidth = rect.width || mainBlock.offsetWidth;
                             const contentHeight = rect.height || mainBlock.offsetHeight;
                             
+                            console.log(`[bb-contents] Marquee ${index + 1}: Dimensions calculées:`, {
+                                rect: rect,
+                                contentWidth: contentWidth,
+                                contentHeight: contentHeight,
+                                isVertical: isVertical
+                            });
+                            
                             // Pour les marquees verticaux, utiliser la largeur du parent si nécessaire
                             let finalWidth = contentWidth;
                             let finalHeight = contentHeight;
@@ -364,21 +391,49 @@
                             
                             // Vérifications robustes avant initialisation
                             const hasValidDimensions = (isVertical && finalHeight > 50) || (!isVertical && finalWidth > 50);
+                            const hasContent = mainBlock.innerHTML.trim().length > 0;
                             const maxRetries = 8; // Plus de tentatives pour attendre les images
                             
-                            // Si pas de contenu valide ou images pas chargées, réessayer
-                            if (!hasValidDimensions || !imagesLoaded) {
+                            // Fallback: si pas de dimensions valides mais qu'il y a du contenu, forcer l'initialisation
+                            const shouldForceInit = !hasValidDimensions && hasContent && retryCount >= 3;
+                            
+                            console.log(`[bb-contents] Marquee ${index + 1}: Vérifications:`, {
+                                hasValidDimensions: hasValidDimensions,
+                                hasContent: hasContent,
+                                imagesLoaded: imagesLoaded,
+                                retryCount: retryCount,
+                                maxRetries: maxRetries,
+                                shouldForceInit: shouldForceInit
+                            });
+                            
+                            // Si pas de contenu valide ou images pas chargées, réessayer (sauf si on force)
+                            if ((!hasValidDimensions || !imagesLoaded) && !shouldForceInit) {
                                 if (retryCount < maxRetries) {
                                     const delay = 300 + retryCount * 200; // Délais plus longs pour attendre les images
+                                    console.log(`[bb-contents] Marquee ${index + 1}: RETRY dans ${delay}ms (dimensions: ${hasValidDimensions}, images: ${imagesLoaded})`);
                                     // Contenu/images non prêts, nouvelle tentative
                                     setTimeout(() => initAnimation(retryCount + 1), delay);
                                     return;
                                 } else {
                                     // Échec d'initialisation après plusieurs tentatives
+                                    console.log(`[bb-contents] Marquee ${index + 1}: ÉCHEC après ${maxRetries} tentatives`);
                             return;
                                 }
                         }
                         
+                        if (shouldForceInit) {
+                            console.log(`[bb-contents] Marquee ${index + 1}: FORÇAGE DE L'INITIALISATION (fallback)`);
+                            // Utiliser des dimensions par défaut si les vraies dimensions ne sont pas disponibles
+                            if (isVertical && finalHeight <= 50) {
+                                finalHeight = 200; // Hauteur par défaut pour vertical
+                            }
+                            if (!isVertical && finalWidth <= 50) {
+                                finalWidth = 300; // Largeur par défaut pour horizontal
+                            }
+                        }
+                        
+                        console.log(`[bb-contents] Marquee ${index + 1}: INITIALISATION DE L'ANIMATION`);
+                        
                         if (isVertical) {
                             // Animation JavaScript pour le vertical
                                 const contentSize = finalHeight;
@@ -555,11 +610,17 @@
                     if (document.readyState !== 'complete') {
                         // Attente de window.load pour initialiser le marquee
                         window.addEventListener('load', () => {
-                            setTimeout(() => initAnimation(0), initDelay);
+                            setTimeout(() => {
+                                initAnimation(0);
+                                console.log(`[bb-contents] Marquee ${index + 1}: Animation démarrée`);
+                            }, initDelay);
                         });
                     } else {
                         // window.load déjà déclenché, initialiser directement
-                        setTimeout(() => initAnimation(0), initDelay);
+                        setTimeout(() => {
+                            initAnimation(0);
+                            console.log(`[bb-contents] Marquee ${index + 1}: Animation démarrée`);
+                        }, initDelay);
                     }
                 });
 
@@ -633,7 +694,6 @@
                 this.cleanCache();
                 
                 const elements = scope.querySelectorAll('[bb-youtube-channel]');
-                console.log('[DEBUG] YouTube elements found:', elements.length);
                 if (elements.length === 0) return;
                 
                 // Module détecté: youtube
@@ -666,7 +726,6 @@
                 // Vérifier la configuration au moment de l'initialisation
                 const endpoint = bbContents.checkYouTubeConfig() ? bbContents.config.youtubeEndpoint : null;
                 
-                console.log('[DEBUG] YouTube element config:', {channelId, videoCount, allowShorts, language, endpoint});
                 
                 if (!channelId) {
                     return;
@@ -678,7 +737,6 @@
                     const retries = parseInt(retryCount);
                     
                     if (retries < 50) { // 50 * 100ms = 5 secondes max
-                        console.log('[DEBUG] YouTube endpoint not configured yet, waiting... (attempt', retries + 1, ')');
                         element.innerHTML = '<div style="padding: 20px; text-align: center; color: #6b7280;">Configuration YouTube en cours...</div>';
                         element.setAttribute('data-youtube-retry-count', (retries + 1).toString());
                         
@@ -689,7 +747,6 @@
                         return;
                     } else {
                         // Timeout après 5 secondes
-                        console.log('[DEBUG] YouTube endpoint configuration timeout');
                         element.innerHTML = '<div style="padding: 20px; background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; color: #dc2626;"><strong>Configuration YouTube manquante</strong><br>Ajoutez dans le &lt;head&gt; :<br><code style="display: block; background: #f3f4f6; padding: 10px; margin: 10px 0; border-radius: 4px; font-family: monospace;">&lt;script&gt;<br>bbContents.config.youtubeEndpoint = \'votre-worker-url\';<br>&lt;/script&gt;</code></div>';
                         return;
                     }
@@ -725,7 +782,6 @@
                 
                 if (cachedData && cachedData.value) {
                     // Données YouTube récupérées du cache (économie API)
-                    console.log('[DEBUG] Using cached YouTube data for element');
                     this.generateYouTubeFeed(container, template, cachedData.value, allowShorts, language);
                     return;
                 }
@@ -733,7 +789,6 @@
                 // Vérifier si un appel API est déjà en cours pour cette clé
                 const loadingKey = `loading_${cacheKey}`;
                 if (window[loadingKey]) {
-                    console.log('[DEBUG] API call already in progress, waiting...');
                     // Attendre que l'autre appel se termine
                     const checkLoading = () => {
                         if (!window[loadingKey]) {
@@ -759,17 +814,14 @@
                 container.innerHTML = '<div style="padding: 20px; text-align: center; color: #6b7280;">Chargement des vidéos YouTube...</div>';
                 
                 // Appeler l'API via le Worker
-                console.log('[DEBUG] Fetching YouTube data from:', `${endpoint}?channelId=${channelId}&maxResults=${videoCount}&allowShorts=${allowShorts}`);
                 fetch(`${endpoint}?channelId=${channelId}&maxResults=${videoCount}&allowShorts=${allowShorts}`)
                     .then(response => {
-                        console.log('[DEBUG] YouTube API response status:', response.status);
                         if (!response.ok) {
                             throw new Error(`HTTP ${response.status}`);
                         }
                         return response.json();
                     })
                     .then(data => {
-                        console.log('[DEBUG] YouTube API data received:', data);
                         if (data.error) {
                             throw new Error(data.error.message || 'Erreur API YouTube');
                         }
@@ -784,7 +836,7 @@
                         window[loadingKey] = false;
                     })
                     .catch(error => {
-                        console.error('[DEBUG] YouTube API error:', error);
+                        console.error('Erreur API YouTube:', error);
                         // Erreur dans le module youtube
                         
                         // Libérer le verrou en cas d'erreur
@@ -795,12 +847,10 @@
                         if (expiredCache) {
                             try {
                                 const cachedData = JSON.parse(expiredCache);
-                                console.log('[DEBUG] Using expired cache:', cachedData);
                                 // Utilisation du cache expiré en cas d'erreur API
                                 this.generateYouTubeFeed(container, template, cachedData.value, allowShorts, language);
                                 return;
                             } catch (e) {
-                                console.error('[DEBUG] Cache parsing error:', e);
                                 // Ignorer les erreurs de parsing
                             }
                         }
@@ -810,16 +860,13 @@
             },
             
             generateYouTubeFeed: function(container, template, data, allowShorts, language = 'fr') {
-                console.log('[DEBUG] generateYouTubeFeed called with data:', data);
                 if (!data || !data.items || data.items.length === 0) {
-                    console.log('[DEBUG] No videos found in data or data is undefined');
                     container.innerHTML = '<div style="padding: 20px; text-align: center; color: #6b7280;">Aucune vidéo trouvée</div>';
                     return;
                 }
                 
                 // Les vidéos sont déjà filtrées par l'API YouTube selon allowShorts
                 let videos = data.items;
-                console.log('[DEBUG] Processing', videos.length, 'videos');
                 // Vidéos reçues de l'API
                 
                 // Vider le conteneur (en préservant les éléments marquee)
@@ -1023,7 +1070,6 @@
     window.configureYouTube = function(endpoint) {
         if (bbContents) {
             bbContents.config.youtubeEndpoint = endpoint;
-            console.log('[DEBUG] YouTube endpoint configured globally:', endpoint);
             // Réinitialiser les modules YouTube
             bbContents.reinit();
         }

package/package.json

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