@bebranded/bb-contents 1.0.48-beta → 1.0.50-beta

package/bb-contents.js

@@ -1,7 +1,7 @@
 /**
  * BeBranded Contents
  * Contenus additionnels français pour Webflow
- * @version 1.0.48-beta
+ * @version 1.0.50-beta
  * @author BeBranded
  * @license MIT
  * @website https://www.bebranded.xyz
@@ -22,7 +22,7 @@
 
     // Configuration
     const config = {
-        version: '1.0.48-beta',
+        version: '1.0.50-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)
@@ -253,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';
@@ -336,10 +354,26 @@
 
                     // 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');
+                        
+                        // Forcer le chargement des images lazy loading
+                        images.forEach(img => {
+                            if (img.loading === 'lazy' || img.hasAttribute('data-src')) {
+                                // Forcer le chargement de l'image lazy
+                                if (img.hasAttribute('data-src')) {
+                                    img.src = img.getAttribute('data-src');
+                                }
+                                img.loading = 'eager';
+                            }
+                        });
+                        
                         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
@@ -347,6 +381,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;
@@ -362,21 +403,53 @@
                             
                             // 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;
+                            
+                            // Fallback pour images: forcer l'initialisation après 3 tentatives même si images pas chargées
+                            const shouldForceInitImages = !imagesLoaded && hasContent && retryCount >= 3;
+                            
+                            console.log(`[bb-contents] Marquee ${index + 1}: Vérifications:`, {
+                                hasValidDimensions: hasValidDimensions,
+                                hasContent: hasContent,
+                                imagesLoaded: imagesLoaded,
+                                retryCount: retryCount,
+                                maxRetries: maxRetries,
+                                shouldForceInit: shouldForceInit,
+                                shouldForceInitImages: shouldForceInitImages
+                            });
+                            
+                            // Si pas de contenu valide ou images pas chargées, réessayer (sauf si on force)
+                            if ((!hasValidDimensions || !imagesLoaded) && !shouldForceInit && !shouldForceInitImages) {
                                 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 || shouldForceInitImages) {
+                            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;
@@ -553,11 +626,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);
                     }
                 });
 

package/package.json

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