@bebranded/bb-contents 1.0.36-beta → 1.0.38-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 +152 -63
  2. package/package.json +1 -1
package/bb-contents.js CHANGED
@@ -17,7 +17,7 @@
17
17
 
18
18
  // Configuration
19
19
  const config = {
20
- version: '1.0.36-beta',
20
+ version: '1.0.38-beta',
21
21
  debug: true, // Activé temporairement pour debug
22
22
  prefix: 'bb-', // utilisé pour générer les sélecteurs (data-bb-*)
23
23
  i18n: {
@@ -397,7 +397,7 @@
397
397
  // Récupérer les options
398
398
  const speed = bbContents._getAttr(element, 'bb-marquee-speed') || '100';
399
399
  const direction = bbContents._getAttr(element, 'bb-marquee-direction') || 'left';
400
- const pauseOnHover = bbContents._getAttr(element, 'bb-marquee-pause') || 'true';
400
+ const pauseOnHover = bbContents._getAttr(element, 'bb-marquee-pause');
401
401
  const gap = bbContents._getAttr(element, 'bb-marquee-gap') || '50';
402
402
  const orientation = bbContents._getAttr(element, 'bb-marquee-orientation') || 'horizontal';
403
403
  const height = bbContents._getAttr(element, 'bb-marquee-height') || '300';
@@ -466,9 +466,13 @@
466
466
  // Marquer l'élément comme traité par le module marquee
467
467
  element.setAttribute('data-bb-marquee-processed', 'true');
468
468
 
469
- // Fonction pour initialiser l'animation avec retry amélioré
469
+ // Fonction pour initialiser l'animation avec vérification robuste des dimensions
470
470
  const initAnimation = (retryCount = 0) => {
471
- // Attendre que le contenu soit dans le DOM
471
+ // Vérifier que les images sont chargées
472
+ const images = mainBlock.querySelectorAll('img');
473
+ const imagesLoaded = Array.from(images).every(img => img.complete && img.naturalHeight > 0);
474
+
475
+ // Attendre que le contenu soit dans le DOM et que les images soient chargées
472
476
  requestAnimationFrame(() => {
473
477
  // Calcul plus robuste des dimensions
474
478
  const rect = mainBlock.getBoundingClientRect();
@@ -486,29 +490,22 @@
486
490
  bbContents.utils.log('Largeur corrigée pour marquee vertical:', finalWidth, 'px (était:', contentWidth, 'px)');
487
491
  }
488
492
 
489
- // Debug amélioré
490
- bbContents.utils.log('Debug - Largeur du contenu:', finalWidth, 'px', 'Hauteur:', finalHeight, 'px', 'Enfants:', mainBlock.children.length, 'Vertical:', isVertical, 'Direction:', direction, 'Tentative:', retryCount + 1);
493
+ // Debug amélioré avec statut des images
494
+ bbContents.utils.log('Debug - Largeur:', finalWidth, 'px, Hauteur:', finalHeight, 'px, Images chargées:', imagesLoaded, 'Enfants:', mainBlock.children.length, 'Vertical:', isVertical, 'Direction:', direction, 'Tentative:', retryCount + 1);
491
495
 
492
- // Si pas de contenu, réessayer avec délai progressif
493
- if ((isVertical && finalHeight === 0) || (!isVertical && finalWidth === 0)) {
494
- if (retryCount < 5) {
495
- bbContents.utils.log('Contenu non prêt, nouvelle tentative dans', (200 + retryCount * 100), 'ms');
496
- setTimeout(() => initAnimation(retryCount + 1), 200 + retryCount * 100);
497
- return;
498
- } else {
499
- bbContents.utils.log('Échec d\'initialisation après 5 tentatives');
500
- return;
501
- }
502
- }
496
+ // Vérifications robustes avant initialisation
497
+ const hasValidDimensions = (isVertical && finalHeight > 50) || (!isVertical && finalWidth > 50);
498
+ const maxRetries = 8; // Plus de tentatives pour attendre les images
503
499
 
504
- // Pour le vertical, s'assurer qu'on a une hauteur minimale
505
- if (isVertical && finalHeight < 50) {
506
- if (retryCount < 5) {
507
- bbContents.utils.log('Hauteur insuffisante pour le marquee vertical (' + finalHeight + 'px), nouvelle tentative dans', (200 + retryCount * 100), 'ms');
508
- setTimeout(() => initAnimation(retryCount + 1), 200 + retryCount * 100);
500
+ // Si pas de contenu valide ou images pas chargées, réessayer
501
+ if (!hasValidDimensions || !imagesLoaded) {
502
+ if (retryCount < maxRetries) {
503
+ const delay = 300 + retryCount * 200; // Délais plus longs pour attendre les images
504
+ bbContents.utils.log('Contenu/images non prêts, nouvelle tentative dans', delay, 'ms');
505
+ setTimeout(() => initAnimation(retryCount + 1), delay);
509
506
  return;
510
507
  } else {
511
- bbContents.utils.log('Échec d\'initialisation - hauteur insuffisante après 5 tentatives');
508
+ bbContents.utils.log('Échec d\'initialisation après', maxRetries, 'tentatives - dimensions:', finalWidth + 'x' + finalHeight, 'images chargées:', imagesLoaded);
512
509
  return;
513
510
  }
514
511
  }
@@ -524,26 +521,26 @@
524
521
  }
525
522
 
526
523
  let currentPosition = direction === 'bottom' ? -contentSize - parseInt(gap) : 0;
527
- const step = (parseFloat(speed) * 2) / 60; // Vitesse différente
524
+ const baseStep = (parseFloat(speed) * 2) / 60; // Vitesse de base
525
+ let currentStep = baseStep;
528
526
  let isPaused = false;
527
+ let pauseTransition = null;
529
528
 
530
529
  // Fonction d'animation JavaScript
531
530
  const animate = () => {
532
- if (!isPaused) {
533
- if (direction === 'bottom') {
534
- currentPosition += step;
535
- if (currentPosition >= 0) {
536
- currentPosition = -contentSize - parseInt(gap);
537
- }
538
- } else {
539
- currentPosition -= step;
540
- if (currentPosition <= -contentSize - parseInt(gap)) {
541
- currentPosition = 0;
542
- }
531
+ if (direction === 'bottom') {
532
+ currentPosition += currentStep;
533
+ if (currentPosition >= 0) {
534
+ currentPosition = -contentSize - parseInt(gap);
535
+ }
536
+ } else {
537
+ currentPosition -= currentStep;
538
+ if (currentPosition <= -contentSize - parseInt(gap)) {
539
+ currentPosition = 0;
543
540
  }
544
-
545
- scrollContainer.style.transform = `translate3d(0px, ${currentPosition}px, 0px)`;
546
541
  }
542
+
543
+ scrollContainer.style.transform = `translate3d(0px, ${currentPosition}px, 0px)`;
547
544
  requestAnimationFrame(animate);
548
545
  };
549
546
 
@@ -552,13 +549,49 @@
552
549
 
553
550
  bbContents.utils.log('Marquee vertical créé avec animation JS - direction:', direction, 'taille:', contentSize + 'px', 'total:', totalSize + 'px', 'hauteur-wrapper:', height + 'px');
554
551
 
555
- // Pause au survol
552
+ // Pause au survol avec transition douce
556
553
  if (pauseOnHover === 'true') {
554
+ // Fonction de transition de vitesse
555
+ const transitionSpeed = (targetSpeed, duration = 400) => {
556
+ if (pauseTransition) {
557
+ cancelAnimationFrame(pauseTransition);
558
+ }
559
+
560
+ const startSpeed = currentStep;
561
+ const speedDiff = targetSpeed - startSpeed;
562
+ const startTime = performance.now();
563
+
564
+ const easeOut = (t) => 1 - Math.pow(1 - t, 3);
565
+ const easeIn = (t) => t * t * t;
566
+
567
+ const animateTransition = (currentTime) => {
568
+ const elapsed = currentTime - startTime;
569
+ const progress = Math.min(elapsed / duration, 1);
570
+
571
+ if (targetSpeed === 0) {
572
+ // Ralentir (ease-out)
573
+ currentStep = startSpeed + speedDiff * easeOut(progress);
574
+ } else {
575
+ // Accélérer (ease-in)
576
+ currentStep = startSpeed + speedDiff * easeIn(progress);
577
+ }
578
+
579
+ if (progress < 1) {
580
+ pauseTransition = requestAnimationFrame(animateTransition);
581
+ } else {
582
+ currentStep = targetSpeed;
583
+ pauseTransition = null;
584
+ }
585
+ };
586
+
587
+ pauseTransition = requestAnimationFrame(animateTransition);
588
+ };
589
+
557
590
  element.addEventListener('mouseenter', function() {
558
- isPaused = true;
591
+ transitionSpeed(0); // Ralentir jusqu'à 0
559
592
  });
560
593
  element.addEventListener('mouseleave', function() {
561
- isPaused = false;
594
+ transitionSpeed(baseStep); // Revenir à la vitesse normale
562
595
  });
563
596
  }
564
597
  } else {
@@ -568,26 +601,26 @@
568
601
  scrollContainer.style.width = totalSize + 'px';
569
602
 
570
603
  let currentPosition = direction === 'right' ? -contentSize - parseInt(gap) : 0;
571
- const step = (parseFloat(speed) * 0.5) / 60; // Vitesse réduite pour l'horizontal
604
+ const baseStep = (parseFloat(speed) * 0.5) / 60; // Vitesse de base
605
+ let currentStep = baseStep;
572
606
  let isPaused = false;
607
+ let pauseTransition = null;
573
608
 
574
609
  // Fonction d'animation JavaScript
575
610
  const animate = () => {
576
- if (!isPaused) {
577
- if (direction === 'right') {
578
- currentPosition += step;
579
- if (currentPosition >= 0) {
580
- currentPosition = -contentSize - parseInt(gap);
581
- }
582
- } else {
583
- currentPosition -= step;
584
- if (currentPosition <= -contentSize - parseInt(gap)) {
585
- currentPosition = 0;
586
- }
611
+ if (direction === 'right') {
612
+ currentPosition += currentStep;
613
+ if (currentPosition >= 0) {
614
+ currentPosition = -contentSize - parseInt(gap);
615
+ }
616
+ } else {
617
+ currentPosition -= currentStep;
618
+ if (currentPosition <= -contentSize - parseInt(gap)) {
619
+ currentPosition = 0;
587
620
  }
588
-
589
- scrollContainer.style.transform = `translate3d(${currentPosition}px, 0px, 0px)`;
590
621
  }
622
+
623
+ scrollContainer.style.transform = `translate3d(${currentPosition}px, 0px, 0px)`;
591
624
  requestAnimationFrame(animate);
592
625
  };
593
626
 
@@ -596,25 +629,71 @@
596
629
 
597
630
  bbContents.utils.log('Marquee horizontal créé avec animation JS - direction:', direction, 'taille:', contentSize + 'px', 'total:', totalSize + 'px');
598
631
 
599
- // Pause au survol
632
+ // Pause au survol avec transition douce
600
633
  if (pauseOnHover === 'true') {
634
+ // Fonction de transition de vitesse
635
+ const transitionSpeed = (targetSpeed, duration = 400) => {
636
+ if (pauseTransition) {
637
+ cancelAnimationFrame(pauseTransition);
638
+ }
639
+
640
+ const startSpeed = currentStep;
641
+ const speedDiff = targetSpeed - startSpeed;
642
+ const startTime = performance.now();
643
+
644
+ const easeOut = (t) => 1 - Math.pow(1 - t, 3);
645
+ const easeIn = (t) => t * t * t;
646
+
647
+ const animateTransition = (currentTime) => {
648
+ const elapsed = currentTime - startTime;
649
+ const progress = Math.min(elapsed / duration, 1);
650
+
651
+ if (targetSpeed === 0) {
652
+ // Ralentir (ease-out)
653
+ currentStep = startSpeed + speedDiff * easeOut(progress);
654
+ } else {
655
+ // Accélérer (ease-in)
656
+ currentStep = startSpeed + speedDiff * easeIn(progress);
657
+ }
658
+
659
+ if (progress < 1) {
660
+ pauseTransition = requestAnimationFrame(animateTransition);
661
+ } else {
662
+ currentStep = targetSpeed;
663
+ pauseTransition = null;
664
+ }
665
+ };
666
+
667
+ pauseTransition = requestAnimationFrame(animateTransition);
668
+ };
669
+
601
670
  element.addEventListener('mouseenter', function() {
602
- isPaused = true;
671
+ transitionSpeed(0); // Ralentir jusqu'à 0
603
672
  });
604
673
  element.addEventListener('mouseleave', function() {
605
- isPaused = false;
674
+ transitionSpeed(baseStep); // Revenir à la vitesse normale
606
675
  });
607
676
  }
608
677
  }
609
678
  });
610
679
  };
611
680
 
612
- // Démarrer l'initialisation avec délai adaptatif
613
- let initDelay = isVertical ? 300 : 100;
681
+ // Démarrer l'initialisation avec délai adaptatif - Option 1: Attendre que tout soit prêt
682
+ let initDelay = isVertical ? 500 : 200; // Délais plus longs par défaut
614
683
  if (bbContents._performanceBoostDetected) {
615
- initDelay = isVertical ? 600 : 300; // Délais plus longs avec bb-performance-boost
684
+ initDelay = isVertical ? 800 : 500; // Délais encore plus longs avec bb-performance-boost
685
+ }
686
+
687
+ // Attendre window.load si pas encore déclenché
688
+ if (document.readyState !== 'complete') {
689
+ bbContents.utils.log('Attente de window.load pour initialiser le marquee');
690
+ window.addEventListener('load', () => {
691
+ setTimeout(() => initAnimation(0), initDelay);
692
+ });
693
+ } else {
694
+ // window.load déjà déclenché, initialiser directement
695
+ setTimeout(() => initAnimation(0), initDelay);
616
696
  }
617
- setTimeout(() => initAnimation(0), initDelay);
618
697
  });
619
698
 
620
699
  bbContents.utils.log('Module Marquee initialisé:', elements.length, 'éléments');
@@ -1020,9 +1099,9 @@
1020
1099
  }, delay);
1021
1100
  }
1022
1101
 
1023
- // Initialisation différée supplémentaire pour les cas difficiles
1102
+ // Initialisation différée supplémentaire pour les cas difficiles - Option 1: Attendre que tout soit vraiment prêt
1024
1103
  window.addEventListener('load', function() {
1025
- const loadDelay = document.body.hasAttribute('bb-performance-boost') ? 2000 : 1000;
1104
+ const loadDelay = document.body.hasAttribute('bb-performance-boost') ? 3000 : 1500; // Délais plus longs
1026
1105
  setTimeout(function() {
1027
1106
  // Vérifier s'il y a des éléments non initialisés
1028
1107
  const unprocessedMarquees = document.querySelectorAll('[bb-marquee]:not([data-bb-marquee-processed])');
@@ -1030,6 +1109,16 @@
1030
1109
  bbContents.utils.log('Éléments marquee non initialisés détectés après load, réinitialisation...');
1031
1110
  bbContents.reinit();
1032
1111
  }
1112
+
1113
+ // Vérification supplémentaire des images chargées
1114
+ const allImages = document.querySelectorAll('img');
1115
+ const unloadedImages = Array.from(allImages).filter(img => !img.complete || img.naturalHeight === 0);
1116
+ if (unloadedImages.length > 0) {
1117
+ bbContents.utils.log('Images non chargées détectées:', unloadedImages.length, '- attente supplémentaire...');
1118
+ setTimeout(() => {
1119
+ bbContents.reinit();
1120
+ }, 1000);
1121
+ }
1033
1122
  }, loadDelay);
1034
1123
  });
1035
1124
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bebranded/bb-contents",
3
- "version": "1.0.36-beta",
3
+ "version": "1.0.38-beta",
4
4
  "description": "Contenus additionnels français pour Webflow",
5
5
  "main": "bb-contents.js",
6
6
  "scripts": {