@bebranded/bb-contents 1.0.65-beta → 1.0.67-beta

package/bb-contents.js

@@ -1,7 +1,7 @@
 /**
  * BeBranded Contents
  * Contenus additionnels français pour Webflow
- * @version 1.0.65-beta
+ * @version 1.0.67-beta
  * @author BeBranded
  * @license MIT
  * @website https://www.bebranded.xyz
@@ -34,7 +34,7 @@
 
     // Configuration
     const config = {
-        version: '1.0.65-beta',
+        version: '1.0.67-beta',
         debug: true, // Debug activé pour diagnostic
         prefix: 'bb-', // utilisé pour générer les sélecteurs (data-bb-*)
         youtubeEndpoint: null, // URL du worker YouTube (à définir par l'utilisateur)
@@ -358,12 +358,89 @@
                     return;
                 }
 
-                // Configuration de l'animation
-                const totalSize = contentSize * 3 + parseInt(gap) * 2;
-                let currentPosition = direction === (isVertical ? 'bottom' : 'right') ? -contentSize - parseInt(gap) : 0;
+                // Détection Safari
+                const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+                console.log(`🔍 [MARQUEE] Safari détecté: ${isSafari}`);
+
+                const gapSize = parseInt(gap);
                 const step = (parseFloat(speed) * (isVertical ? 1.5 : 0.8)) / 60;
                 let isPaused = false;
 
+                if (isSafari) {
+                    // Solution Safari : Animation CSS avec keyframes
+                    this.initSafariAnimation(element, scrollContainer, mainBlock, {
+                        speed, direction, gap, isVertical, useAutoHeight, contentSize, gapSize
+                    });
+                } else {
+                    // Solution standard pour autres navigateurs
+                    this.initStandardAnimation(element, scrollContainer, mainBlock, {
+                        speed, direction, pauseOnHover, gap, isVertical, useAutoHeight, contentSize, gapSize, step
+                    });
+                }
+            },
+
+            initSafariAnimation: function(element, scrollContainer, mainBlock, options) {
+                const { speed, direction, gap, isVertical, useAutoHeight, contentSize, gapSize } = options;
+                
+                // Créer les keyframes CSS pour Safari
+                const totalSize = contentSize * 3 + gapSize * 2;
+                const animationName = `marquee-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+                
+                // Ajuster la taille du conteneur
+                if (isVertical && !useAutoHeight) {
+                    scrollContainer.style.height = totalSize + 'px';
+                } else if (!isVertical) {
+                    scrollContainer.style.width = totalSize + 'px';
+                }
+
+                // Créer les keyframes CSS
+                const keyframes = `
+                    @keyframes ${animationName} {
+                        0% {
+                            transform: ${isVertical ? 'translateY(0px)' : 'translateX(0px)'};
+                        }
+                        100% {
+                            transform: ${isVertical ? `translateY(-${contentSize + gapSize}px)` : `translateX(-${contentSize + gapSize}px)`};
+                        }
+                    }
+                `;
+
+                // Injecter les keyframes dans le head
+                const style = document.createElement('style');
+                style.textContent = keyframes;
+                document.head.appendChild(style);
+
+                // Configuration de l'animation
+                const duration = (contentSize + gapSize) / ((parseFloat(speed) * (isVertical ? 1.5 : 0.8)) / 60);
+                scrollContainer.style.animation = `${animationName} ${duration}s linear infinite`;
+
+                console.log('✅ [MARQUEE] Animation Safari démarrée avec keyframes CSS');
+
+                // Pause au survol pour Safari
+                if (element.getAttribute('bb-marquee-pause') === 'true') {
+                    element.addEventListener('mouseenter', () => {
+                        scrollContainer.style.animationPlayState = 'paused';
+                    });
+                    element.addEventListener('mouseleave', () => {
+                        scrollContainer.style.animationPlayState = 'running';
+                    });
+                }
+            },
+
+            initStandardAnimation: function(element, scrollContainer, mainBlock, options) {
+                const { speed, direction, pauseOnHover, gap, isVertical, useAutoHeight, contentSize, gapSize, step } = options;
+                
+                const totalSize = contentSize * 3 + gapSize * 2;
+                let isPaused = false;
+                
+                // Position initiale
+                let currentPosition;
+                if (direction === (isVertical ? 'bottom' : 'right')) {
+                    currentPosition = -(contentSize + gapSize);
+                } else {
+                    currentPosition = 0;
+                }
+
                 // Ajuster la taille du conteneur
                 if (isVertical && !useAutoHeight) {
                     scrollContainer.style.height = totalSize + 'px';
@@ -371,24 +448,24 @@
                     scrollContainer.style.width = totalSize + 'px';
                 }
 
-                // Fonction d'animation
+                // Fonction d'animation standard
                 const animate = () => {
                     if (!isPaused) {
                         if (direction === (isVertical ? 'bottom' : 'right')) {
                             currentPosition += step;
                             if (currentPosition >= 0) {
-                                currentPosition = -contentSize - parseInt(gap);
+                                currentPosition = -(contentSize + gapSize);
                             }
                         } else {
                             currentPosition -= step;
-                            if (currentPosition <= -contentSize - parseInt(gap)) {
-                                currentPosition = 0;
+                            if (currentPosition <= -(2 * (contentSize + gapSize))) {
+                                currentPosition = -(contentSize + gapSize);
                             }
                         }
                         
                         const transform = isVertical 
-                            ? `translate3d(0px, ${currentPosition}px, 0px)`
-                            : `translate3d(${currentPosition}px, 0px, 0px)`;
+                            ? `translate3d(0, ${currentPosition}px, 0)`
+                            : `translate3d(${currentPosition}px, 0, 0)`;
                         scrollContainer.style.transform = transform;
                     }
                     requestAnimationFrame(animate);
@@ -396,7 +473,7 @@
 
                 // Démarrer l'animation
                 animate();
-                console.log('✅ [MARQUEE] Animation démarrée avec succès');
+                console.log('✅ [MARQUEE] Animation standard démarrée');
 
                 // Pause au survol
                 if (pauseOnHover === 'true') {

package/package.json

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