@bebranded/bb-contents 1.0.114 → 1.0.116

package/bb-contents.js

@@ -1,7 +1,7 @@
 /**
  * BeBranded Contents
  * Contenus additionnels français pour Webflow
- * @version 1.0.114
+ * @version 1.0.116
  * @author BeBranded
  * @license MIT
  * @website https://www.bebranded.xyz
@@ -32,11 +32,11 @@
     window._bbContentsInitialized = true;
 
     // Log de démarrage simple (une seule fois)
-    console.log('bb-contents | v1.0.114');
+    console.log('bb-contents | v1.0.116');
 
     // Configuration
     const config = {
-        version: '1.0.114',
+        version: '1.0.116',
         debug: false, // Debug désactivé pour rendu propre
         prefix: 'bb-', // utilisé pour générer les sélecteurs (data-bb-*)
         youtubeEndpoint: null, // URL du worker YouTube (à définir par l'utilisateur)
@@ -390,6 +390,10 @@
                 let imagesLoaded = 0;
                 const totalImages = images.length;
                 
+                // DÉCLARER isMobile et isSafari AVANT leur utilisation dans img.onload
+                const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+                // Détecter spécifiquement Safari (pas Chrome mobile)
+                const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent) || /iPhone|iPad|iPod/.test(navigator.userAgent);
                 
                 // OPTIMISATION: Charger les images et appliquer les styles SVG AVANT le clonage
                 // pour éviter les reflows qui causent la saccade de l'animation
@@ -488,11 +492,6 @@
                     };
                 });
                 
-                // SOLUTION SAFARI MOBILE SIMPLE : Attendre plus longtemps
-                const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
-                // Détecter spécifiquement Safari (pas Chrome mobile)
-                const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent) || /iPhone|iPad|iPod/.test(navigator.userAgent);
-                
                 // Timeout plus long sur mobile pour laisser le temps aux images de se charger
                 const maxWaitTime = isMobile ? 5000 : 3000; // 5 secondes sur mobile
                 let waitTimeout = 0;
@@ -531,7 +530,9 @@
                         }
                     } else if (waitTimeout >= maxWaitTime) {
                         // Timeout atteint : forcer le démarrage mais c'est un fallback
-                        console.warn('[MARQUEE] Timeout atteint, certaines images peuvent ne pas être chargées');
+                        if (bbContents.config.debug) {
+                            console.warn('[MARQUEE] Timeout atteint, certaines images peuvent ne pas être chargées');
+                        }
                         const renderDelay = isSafari && isMobile ? 1500 : (isMobile ? 1000 : 200);
                         setTimeout(() => {
                             startSafariAnimation();
@@ -559,14 +560,6 @@
                     // Cela évite les reflows qui causaient la saccade de l'animation
                     // Les copies héritent automatiquement des styles des images originales
                     
-                    // Vérifier que les images ont une taille visible
-                    let imagesWithSize = 0;
-                    images.forEach(img => {
-                        if (img.offsetWidth > 0 && img.offsetHeight > 0) {
-                            imagesWithSize++;
-                        }
-                    });
-                    
                     // Recalculer la taille après chargement des images
                     const newContentSize = isVertical ? mainBlock.offsetHeight : mainBlock.offsetWidth;
                     
@@ -623,12 +616,9 @@
                     }
 
                     // Fonction d'animation Safari optimisée
-                    let frameCount = 0;
                     let lastTime = performance.now();
                     const animate = (currentTime) => {
                         if (!isPaused) {
-                            frameCount++;
-                            
                             // OPTIMISATION SAFARI MOBILE : Utiliser le temps réel pour une animation plus fluide
                             const deltaTime = isSafari && isMobile ? (currentTime - lastTime) / 16.67 : 1;
                             lastTime = currentTime;
@@ -975,31 +965,146 @@
             const s = scope || document;
             return s.querySelector(bbContents._attrSelector('reading-time')) !== null;
         },
+        
+        // Fonction pour extraire le texte et les images depuis une URL
+        fetchContentFromUrl: function(url, targetSelector) {
+            return fetch(url)
+                .then(function(response) {
+                    if (!response.ok) {
+                        throw new Error('HTTP ' + response.status);
+                    }
+                    return response.text();
+                })
+                .then(function(html) {
+                    // Parser le HTML pour extraire le contenu principal
+                    const parser = new DOMParser();
+                    const doc = parser.parseFromString(html, 'text/html');
+                    
+                    let contentNode = null;
+                    
+                    // Priorité 1 : Utiliser le targetSelector si fourni
+                    if (targetSelector) {
+                        contentNode = doc.querySelector(targetSelector);
+                    }
+                    
+                    // Priorité 2 : Si aucun targetSelector ou rien trouvé, utiliser les sélecteurs génériques
+                    if (!contentNode) {
+                        const contentSelectors = [
+                            'article',
+                            '[role="article"]',
+                            '.blog-post-content',
+                            '.post-content',
+                            '.article-content',
+                            '.content',
+                            'main article',
+                            'main .w-dyn-bind-empty', // Webflow CMS content
+                            'main .w-richtext' // Webflow rich text
+                        ];
+                        
+                        for (let i = 0; i < contentSelectors.length; i++) {
+                            contentNode = doc.querySelector(contentSelectors[i]);
+                            if (contentNode) break;
+                        }
+                    }
+                    
+                    // Fallback final : utiliser le body
+                    if (!contentNode) {
+                        contentNode = doc.body;
+                    }
+                    
+                    if (!contentNode) {
+                        return { text: '', images: [] };
+                    }
+                    
+                    // Extraire le texte et les images
+                    const text = contentNode.textContent.trim();
+                    const images = contentNode.querySelectorAll('img');
+                    
+                    return { text: text, images: images };
+                });
+        },
+        
+        // Fonction pour calculer le temps de lecture
+        calculateReadingTime: function(text, images, wordsPerMinute, secondsPerImage) {
+            const wordCount = text ? (text.match(/\b\w+\b/g) || []).length : 0;
+            const imageCount = images ? images.length : 0;
+            const imageTimeInMinutes = (imageCount * secondsPerImage) / 60;
+            
+            let minutesFloat = (wordCount / wordsPerMinute) + imageTimeInMinutes;
+            let minutes = Math.ceil(minutesFloat);
+            
+            if ((wordCount > 0 || imageCount > 0) && minutes < 1) minutes = 1;
+            if (wordCount === 0 && imageCount === 0) minutes = 0;
+            
+            return minutes;
+        },
+        
         init: function(root) {
             const scope = root || document;
             if (scope.closest && scope.closest('[data-bb-disable]')) return;
             const elements = scope.querySelectorAll(bbContents._attrSelector('reading-time'));
+            const self = this;
 
             elements.forEach(function(element) {
                 if (element.bbProcessed) return;
                 element.bbProcessed = true;
 
-                    const targetSelector = bbContents._getAttr(element, 'bb-reading-time-target');
+                const targetSelector = bbContents._getAttr(element, 'bb-reading-time-target');
                 const speedAttr = bbContents._getAttr(element, 'bb-reading-time-speed');
                 const imageSpeedAttr = bbContents._getAttr(element, 'bb-reading-time-image-speed');
                 const format = bbContents._getAttr(element, 'bb-reading-time-format') || '{minutes} min';
+                const urlAttr = bbContents._getAttr(element, 'bb-reading-time-url');
 
                 const wordsPerMinute = Number(speedAttr) > 0 ? Number(speedAttr) : 230;
                 const secondsPerImage = Number(imageSpeedAttr) > 0 ? Number(imageSpeedAttr) : 12;
                     
-                    // Validation des valeurs
-                    if (isNaN(wordsPerMinute) || wordsPerMinute <= 0) {
-                        bbContents.utils.log('Vitesse de lecture invalide, utilisation de la valeur par défaut (230)');
-                    }
-                    if (isNaN(secondsPerImage) || secondsPerImage < 0) {
-                        bbContents.utils.log('Temps par image invalide, utilisation de la valeur par défaut (12)');
-                    }
+                // Validation des valeurs
+                if (isNaN(wordsPerMinute) || wordsPerMinute <= 0) {
+                    bbContents.utils.log('Vitesse de lecture invalide, utilisation de la valeur par défaut (230)');
+                }
+                if (isNaN(secondsPerImage) || secondsPerImage < 0) {
+                    bbContents.utils.log('Temps par image invalide, utilisation de la valeur par défaut (12)');
+                }
 
+                // Détecter l'URL : priorité 1 = lien parent, priorité 2 = attribut
+                let articleUrl = null;
+                
+                // Priorité 1 : Chercher un lien parent
+                let linkElement = element.closest('a');
+                if (linkElement && linkElement.href) {
+                    articleUrl = linkElement.href;
+                }
+                
+                // Priorité 2 : Utiliser l'attribut si pas de lien trouvé
+                if (!articleUrl && urlAttr) {
+                    articleUrl = urlAttr;
+                    // Si l'URL est relative, la transformer en absolue
+                    if (articleUrl && !bbContents.utils.isValidUrl(articleUrl)) {
+                        articleUrl = new URL(articleUrl, window.location.origin).href;
+                    }
+                }
+                
+                // Si une URL est trouvée, faire un fetch
+                if (articleUrl && bbContents.utils.isValidUrl(articleUrl)) {
+                    // Afficher un état de chargement (optionnel, on peut laisser vide ou mettre "...")
+                    const originalText = element.textContent;
+                    
+                    self.fetchContentFromUrl(articleUrl, targetSelector)
+                        .then(function(data) {
+                            const minutes = self.calculateReadingTime(data.text, data.images, wordsPerMinute, secondsPerImage);
+                            const output = format.replace('{minutes}', String(minutes));
+                            element.textContent = output;
+                        })
+                        .catch(function(error) {
+                            bbContents.utils.log('Erreur lors de la récupération du contenu pour reading-time:', error);
+                            // En cas d'erreur, on affiche un message ou on laisse le contenu original
+                            element.textContent = originalText || '';
+                        });
+                    
+                    return; // Sortir de la fonction pour cet élément (traitement async)
+                }
+                
+                // Comportement par défaut : analyser le contenu de la page actuelle
                 let sourceNode = element;
                 if (targetSelector) {
                     const found = document.querySelector(targetSelector);
@@ -1007,18 +1112,8 @@
                 }
 
                 const text = (sourceNode.textContent || '').trim();
-                const wordCount = text ? (text.match(/\b\w+\b/g) || []).length : 0;
-                
-                // Compter les images dans le contenu ciblé
                 const images = sourceNode.querySelectorAll('img');
-                const imageCount = images.length;
-                const imageTimeInMinutes = (imageCount * secondsPerImage) / 60;
-                
-                let minutesFloat = (wordCount / wordsPerMinute) + imageTimeInMinutes;
-                let minutes = Math.ceil(minutesFloat);
-
-                if ((wordCount > 0 || imageCount > 0) && minutes < 1) minutes = 1; // affichage minimal 1 min si contenu non vide
-                if (wordCount === 0 && imageCount === 0) minutes = 0;
+                const minutes = self.calculateReadingTime(text, images, wordsPerMinute, secondsPerImage);
 
                 const output = format.replace('{minutes}', String(minutes));
                 element.textContent = output;

package/package.json

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