@bebranded/bb-contents 1.0.19-beta → 1.0.21-beta

package/bb-contents.js

@@ -1,7 +1,7 @@
 /**
  * BeBranded Contents
  * Contenus additionnels français pour Webflow
- * @version 1.0.19-beta
+ * @version 1.0.21-beta
  * @author BeBranded
  * @license MIT
  * @website https://www.bebranded.xyz
@@ -17,7 +17,7 @@
 
     // Configuration
     const config = {
-        version: '1.0.19-beta',
+        version: '1.0.21-beta',
         debug: window.location.hostname === 'localhost' || window.location.hostname.includes('webflow.io'),
         prefix: 'bb-', // utilisé pour générer les sélecteurs (data-bb-*)
         i18n: {
@@ -317,11 +317,15 @@
                 bbContents.utils.log('Module détecté: marquee');
                 
                 elements.forEach(element => {
-                    if (element.bbProcessed) return;
+                    // Vérifier si l'élément a déjà été traité par un autre module
+                    if (element.bbProcessed || element.hasAttribute('data-bb-youtube-processed')) {
+                        bbContents.utils.log('Élément marquee déjà traité par un autre module, ignoré:', element);
+                        return;
+                    }
                     element.bbProcessed = true;
                     
                     // Récupérer les options
-                    const speed = bbContents._getAttr(element, 'bb-marquee-speed') || '100';
+                    const speed = bbContents._getAttr(element, 'bb-marquee-speed') || '3000';
                     const direction = bbContents._getAttr(element, 'bb-marquee-direction') || 'left';
                     const pause = bbContents._getAttr(element, 'bb-marquee-pause') || 'true';
                     const gap = bbContents._getAttr(element, 'bb-marquee-gap') || '50';
@@ -357,9 +361,14 @@
                     
                     // Assembler
                     mainContainer.appendChild(scrollContainer);
+                    // Sauvegarder le contenu original avant de vider
+                    const originalMarqueeContent = element.innerHTML;
                     element.innerHTML = '';
                     element.appendChild(mainContainer);
                     
+                    // Marquer l'élément comme traité par le module marquee
+                    element.setAttribute('data-bb-marquee-processed', 'true');
+                    
                     // Animation JavaScript simple et efficace
                     const isVertical = orientation === 'vertical';
                     let animationId;
@@ -370,14 +379,17 @@
                         if (!startTime) startTime = timestamp;
                         const elapsed = timestamp - startTime;
                         
-                        // Vitesse en millisecondes
+                        // Vitesse en millisecondes (plus lente pour une transition fluide)
                         const speedMs = parseInt(speed);
                         const progress = (elapsed % speedMs) / speedMs;
                         
-                        // Calculer la taille du contenu
+                        // Calculer la taille du contenu avec une transition plus douce
                         const contentSize = isVertical ? scrollContainer.scrollHeight / 2 : scrollContainer.scrollWidth / 2;
                         currentPosition = -progress * contentSize;
                         
+                        // Appliquer une transition CSS pour plus de fluidité
+                        scrollContainer.style.transition = 'transform 0.1s ease-out';
+                        
                         // Appliquer la transformation
                         scrollContainer.style.transform = isVertical 
                             ? `translateY(${currentPosition}px)`
@@ -386,10 +398,10 @@
                         animationId = requestAnimationFrame(animate);
                     };
                     
-                    // Démarrer l'animation
+                    // Démarrer l'animation avec un délai pour laisser le DOM se stabiliser
                     setTimeout(() => {
                         animationId = requestAnimationFrame(animate);
-                    }, 100);
+                    }, 200);
                     
                     // Pause au survol
                     if (pause === 'true') {
@@ -437,7 +449,11 @@
                 bbContents.utils.log('Module détecté: youtube');
                 
                 elements.forEach(element => {
-                    if (element.bbProcessed) return;
+                    // Vérifier si l'élément a déjà été traité par un autre module
+                    if (element.bbProcessed || element.hasAttribute('data-bb-marquee-processed')) {
+                        bbContents.utils.log('Élément youtube déjà traité par un autre module, ignoré:', element);
+                        return;
+                    }
                     element.bbProcessed = true;
                     
                     const channelId = bbContents._getAttr(element, 'bb-youtube-channel');
@@ -478,6 +494,9 @@
                     // Cacher le template original
                     template.style.display = 'none';
                     
+                    // Marquer l'élément comme traité par le module YouTube
+                    element.setAttribute('data-bb-youtube-processed', 'true');
+                    
                     // Afficher un loader
                     container.innerHTML = '<div style="padding: 20px; text-align: center; color: #6b7280;">Chargement des vidéos YouTube...</div>';
                     
@@ -512,9 +531,15 @@
                 let videos = data.items;
                 bbContents.utils.log(`Vidéos reçues de l'API: ${videos.length} (allowShorts: ${allowShorts})`);
                 
-                // Vider le conteneur
+                // Vider le conteneur (en préservant les éléments marquee)
+                const marqueeElements = container.querySelectorAll('[data-bb-marquee-processed]');
                 container.innerHTML = '';
                 
+                // Restaurer les éléments marquee si présents
+                marqueeElements.forEach(marqueeEl => {
+                    container.appendChild(marqueeEl);
+                });
+                
                 // Cloner le template pour chaque vidéo
                 videos.forEach(item => {
                     const videoId = item.id.videoId;

package/package.json

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