@bebranded/bb-contents 1.0.62-beta → 1.0.64-beta

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/bb-contents.js +83 -23
  2. package/package.json +1 -1
package/bb-contents.js CHANGED
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * BeBranded Contents
3
3
  * Contenus additionnels français pour Webflow
4
- * @version 1.0.62-beta
4
+ * @version 1.0.64-beta
5
5
  * @author BeBranded
6
6
  * @license MIT
7
7
  * @website https://www.bebranded.xyz
@@ -34,8 +34,8 @@
34
34
 
35
35
  // Configuration
36
36
  const config = {
37
- version: '1.0.62-beta',
38
- debug: false, // Debug désactivé
37
+ version: '1.0.64-beta',
38
+ debug: true, // Debug activé pour diagnostic
39
39
  prefix: 'bb-', // utilisé pour générer les sélecteurs (data-bb-*)
40
40
  youtubeEndpoint: null, // URL du worker YouTube (à définir par l'utilisateur)
41
41
  i18n: {
@@ -265,13 +265,36 @@
265
265
  if (scope.closest && scope.closest('[data-bb-disable]')) return;
266
266
  const elements = scope.querySelectorAll(bbContents._attrSelector('marquee'));
267
267
 
268
- elements.forEach(function(element, index) {
268
+ console.log('🔍 [DEBUG MARQUEE] DÉBUT INITIALISATION');
269
+ console.log('🔍 [DEBUG MARQUEE] Éléments trouvés:', elements.length);
270
+ console.log('🔍 [DEBUG MARQUEE] Éléments:', elements);
271
+
272
+ // Initialisation séquentielle de haut en bas - Hero en priorité
273
+ let currentIndex = 0;
274
+
275
+ const initNextMarquee = () => {
276
+ console.log(`🔍 [DEBUG MARQUEE] initNextMarquee appelé - currentIndex: ${currentIndex}/${elements.length}`);
277
+
278
+ if (currentIndex >= elements.length) {
279
+ console.log('✅ [DEBUG MARQUEE] TOUS LES MARQUEES INITIALISÉS:', elements.length, 'éléments');
280
+ return;
281
+ }
282
+
283
+ const element = elements[currentIndex];
284
+ console.log(`🔍 [DEBUG MARQUEE] Traitement marquee ${currentIndex + 1}:`, element);
285
+ console.log(`🔍 [DEBUG MARQUEE] bbProcessed:`, element.bbProcessed);
286
+ console.log(`🔍 [DEBUG MARQUEE] data-bb-youtube-processed:`, element.hasAttribute('data-bb-youtube-processed'));
287
+ currentIndex++;
288
+
269
289
  // Vérifier si l'élément a déjà été traité par un autre module
270
290
  if (element.bbProcessed || element.hasAttribute('data-bb-youtube-processed')) {
271
- bbContents.utils.log('Élément marquee déjà traité par un autre module, ignoré:', element);
291
+ console.log('⚠️ [DEBUG MARQUEE] Élément déjà traité, passage au suivant');
292
+ // Passer au suivant immédiatement
293
+ setTimeout(initNextMarquee, 0);
272
294
  return;
273
295
  }
274
296
  element.bbProcessed = true;
297
+ console.log('✅ [DEBUG MARQUEE] Élément marqué comme traité');
275
298
 
276
299
  // Récupérer les options
277
300
  const speed = bbContents._getAttr(element, 'bb-marquee-speed') || '100';
@@ -281,6 +304,10 @@
281
304
  const orientation = bbContents._getAttr(element, 'bb-marquee-orientation') || 'horizontal';
282
305
  const height = bbContents._getAttr(element, 'bb-marquee-height') || '300';
283
306
  const minHeight = bbContents._getAttr(element, 'bb-marquee-min-height');
307
+
308
+ console.log(`🔍 [DEBUG MARQUEE] Options récupérées:`, {
309
+ speed, direction, pauseOnHover, gap, orientation, height, minHeight
310
+ });
284
311
 
285
312
  // Sauvegarder le contenu original
286
313
  const originalHTML = element.innerHTML;
@@ -347,26 +374,41 @@
347
374
 
348
375
  // Fonction pour initialiser l'animation avec retry amélioré - Version 1.0.37-beta robuste
349
376
  const initAnimation = (retryCount = 0) => {
377
+ console.log(`🔍 [DEBUG MARQUEE] initAnimation appelé - retryCount: ${retryCount}`);
350
378
  // Attendre que le contenu soit dans le DOM
351
379
  requestAnimationFrame(() => {
352
380
  const contentWidth = mainBlock.offsetWidth;
353
381
  const contentHeight = mainBlock.offsetHeight;
354
382
 
355
- // Debug amélioré
356
- bbContents.utils.log('Debug - Largeur du contenu:', contentWidth, 'px', 'Hauteur:', contentHeight, 'px', 'Enfants:', mainBlock.children.length, 'Vertical:', isVertical, 'Direction:', direction, 'Tentative:', retryCount + 1);
383
+ console.log(`🔍 [DEBUG MARQUEE] Dimensions calculées:`, {
384
+ contentWidth, contentHeight,
385
+ children: mainBlock.children.length,
386
+ isVertical, direction,
387
+ retryCount: retryCount + 1
388
+ });
357
389
 
358
390
  // Vérifier que les images sont chargées
359
391
  const images = mainBlock.querySelectorAll('img');
360
392
  const imagesLoaded = Array.from(images).every(img => img.complete && img.naturalHeight > 0);
361
393
 
394
+ console.log(`🔍 [DEBUG MARQUEE] Images:`, {
395
+ total: images.length,
396
+ loaded: imagesLoaded,
397
+ images: Array.from(images).map(img => ({
398
+ complete: img.complete,
399
+ naturalHeight: img.naturalHeight,
400
+ src: img.src
401
+ }))
402
+ });
403
+
362
404
  // Si pas de contenu, réessayer avec délai progressif
363
405
  if ((isVertical && contentHeight === 0) || (!isVertical && contentWidth === 0)) {
364
406
  if (retryCount < 8) { // Plus de tentatives
365
- bbContents.utils.log('Contenu non prêt, nouvelle tentative dans', (200 + retryCount * 100), 'ms');
407
+ console.log(`⚠️ [DEBUG MARQUEE] Contenu non prêt, retry ${retryCount + 1}/8 dans ${200 + retryCount * 100}ms`);
366
408
  setTimeout(() => initAnimation(retryCount + 1), 200 + retryCount * 100);
367
409
  return;
368
410
  } else {
369
- bbContents.utils.log('Échec d\'initialisation après 8 tentatives');
411
+ console.log('❌ [DEBUG MARQUEE] Échec d\'initialisation après 8 tentatives');
370
412
  return;
371
413
  }
372
414
  }
@@ -374,11 +416,11 @@
374
416
  // Pour le vertical, s'assurer qu'on a une hauteur minimale
375
417
  if (isVertical && contentHeight < 50) {
376
418
  if (retryCount < 8) { // Plus de tentatives
377
- bbContents.utils.log('Hauteur insuffisante pour le marquee vertical (' + contentHeight + 'px), nouvelle tentative dans', (200 + retryCount * 100), 'ms');
419
+ console.log(`⚠️ [DEBUG MARQUEE] Hauteur insuffisante (${contentHeight}px), retry ${retryCount + 1}/8`);
378
420
  setTimeout(() => initAnimation(retryCount + 1), 200 + retryCount * 100);
379
421
  return;
380
422
  } else {
381
- bbContents.utils.log('Échec d\'initialisation - hauteur insuffisante après 8 tentatives');
423
+ console.log('❌ [DEBUG MARQUEE] Échec - hauteur insuffisante après 8 tentatives');
382
424
  return;
383
425
  }
384
426
  }
@@ -386,20 +428,23 @@
386
428
  // Vérifier que les images sont chargées
387
429
  if (!imagesLoaded && images.length > 0) {
388
430
  if (retryCount < 8) { // Plus de tentatives
389
- bbContents.utils.log('Images non chargées, nouvelle tentative dans', (200 + retryCount * 100), 'ms');
431
+ console.log(`⚠️ [DEBUG MARQUEE] Images non chargées, retry ${retryCount + 1}/8`);
390
432
  setTimeout(() => initAnimation(retryCount + 1), 200 + retryCount * 100);
391
433
  return;
392
434
  } else {
393
- bbContents.utils.log('Échec d\'initialisation - images non chargées après 8 tentatives');
435
+ console.log('❌ [DEBUG MARQUEE] Échec - images non chargées après 8 tentatives');
394
436
  return;
395
437
  }
396
438
  }
397
439
 
398
440
  if (isVertical) {
441
+ console.log('✅ [DEBUG MARQUEE] INITIALISATION VERTICALE');
399
442
  // Animation JavaScript pour le vertical
400
443
  const contentSize = contentHeight;
401
444
  const totalSize = contentSize * 4 + parseInt(gap) * 3; // 4 copies au lieu de 3
402
445
 
446
+ console.log(`🔍 [DEBUG MARQUEE] Vertical - contentSize: ${contentSize}px, totalSize: ${totalSize}px`);
447
+
403
448
  // Ajuster la hauteur du scrollContainer seulement si pas en mode auto
404
449
  if (!useAutoHeight) {
405
450
  scrollContainer.style.height = totalSize + 'px';
@@ -409,6 +454,8 @@
409
454
  const step = (parseFloat(speed) * 2) / 60; // Vitesse différente
410
455
  let isPaused = false;
411
456
 
457
+ console.log(`🔍 [DEBUG MARQUEE] Vertical - currentPosition: ${currentPosition}, step: ${step}, direction: ${direction}`);
458
+
412
459
  // Fonction d'animation JavaScript
413
460
  const animate = () => {
414
461
  if (!isPaused) {
@@ -432,7 +479,7 @@
432
479
  // Démarrer l'animation
433
480
  animate();
434
481
 
435
- bbContents.utils.log('Marquee vertical créé avec animation JS - direction:', direction, 'taille:', contentSize + 'px', 'total:', totalSize + 'px', 'hauteur-wrapper:', height + 'px');
482
+ console.log('✅ [DEBUG MARQUEE] Marquee vertical créé avec animation JS');
436
483
 
437
484
  // Pause au survol
438
485
  if (pauseOnHover === 'true') {
@@ -446,15 +493,20 @@
446
493
 
447
494
  // Marquee vertical créé avec animation JS
448
495
  } else {
496
+ console.log('✅ [DEBUG MARQUEE] INITIALISATION HORIZONTALE');
449
497
  // Animation JavaScript pour l'horizontal (comme le vertical pour éviter les saccades)
450
498
  const contentSize = contentWidth;
451
499
  const totalSize = contentSize * 4 + parseInt(gap) * 3;
452
500
  scrollContainer.style.width = totalSize + 'px';
453
501
 
502
+ console.log(`🔍 [DEBUG MARQUEE] Horizontal - contentSize: ${contentSize}px, totalSize: ${totalSize}px`);
503
+
454
504
  let currentPosition = direction === 'right' ? -contentSize - parseInt(gap) : 0;
455
505
  const step = (parseFloat(speed) * 0.5) / 60; // Vitesse réduite pour l'horizontal
456
506
  let isPaused = false;
457
507
 
508
+ console.log(`🔍 [DEBUG MARQUEE] Horizontal - currentPosition: ${currentPosition}, step: ${step}, direction: ${direction}`);
509
+
458
510
  // Fonction d'animation JavaScript
459
511
  const animate = () => {
460
512
  if (!isPaused) {
@@ -478,7 +530,7 @@
478
530
  // Démarrer l'animation
479
531
  animate();
480
532
 
481
- bbContents.utils.log('Marquee horizontal créé avec animation JS - direction:', direction, 'taille:', contentSize + 'px', 'total:', totalSize + 'px');
533
+ console.log('✅ [DEBUG MARQUEE] Marquee horizontal créé avec animation JS');
482
534
 
483
535
  // Pause au survol
484
536
  if (pauseOnHover === 'true') {
@@ -495,16 +547,24 @@
495
547
  });
496
548
  };
497
549
 
498
- // Démarrer l'initialisation avec délai adaptatif - Solution simple et efficace
550
+ // Démarrer l'initialisation avec délai adaptatif - Initialisation séquentielle
499
551
  const baseDelay = isVertical ? 800 : 400; // Délais fixes selon le type
500
- const randomDelay = Math.random() * 100; // 0-100ms aléatoire pour éviter les conflits
501
- const initDelay = baseDelay + randomDelay;
502
552
 
503
- bbContents.utils.log(`Marquee ${index + 1} (${isVertical ? 'vertical' : 'horizontal'}) initialisé dans ${initDelay}ms`);
504
- setTimeout(() => initAnimation(0), initDelay);
505
- });
506
-
507
- bbContents.utils.log('Module Marquee initialisé:', elements.length, 'éléments');
553
+ console.log(`🔍 [DEBUG MARQUEE] Marquee ${currentIndex} (${isVertical ? 'vertical' : 'horizontal'}) initialisé dans ${baseDelay}ms`);
554
+ setTimeout(() => {
555
+ console.log(`🔍 [DEBUG MARQUEE] Démarrage initAnimation pour marquee ${currentIndex}`);
556
+ initAnimation(0);
557
+ // Après initialisation, passer au marquee suivant
558
+ setTimeout(() => {
559
+ console.log(`🔍 [DEBUG MARQUEE] Passage au marquee suivant après ${currentIndex}`);
560
+ initNextMarquee();
561
+ }, 100); // Petit délai entre les marquees
562
+ }, baseDelay);
563
+ };
564
+
565
+ // Démarrer l'initialisation séquentielle
566
+ console.log('🔍 [DEBUG MARQUEE] Démarrage de l\'initialisation séquentielle');
567
+ initNextMarquee();
508
568
  }
509
569
  },
510
570
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bebranded/bb-contents",
3
- "version": "1.0.62-beta",
3
+ "version": "1.0.64-beta",
4
4
  "description": "Contenus additionnels français pour Webflow",
5
5
  "main": "bb-contents.js",
6
6
  "scripts": {