@bebranded/bb-contents 1.0.148 → 1.0.150

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 +160 -45
  2. package/package.json +1 -1
package/bb-contents.js CHANGED
@@ -32,7 +32,7 @@
32
32
  window._bbContentsInitialized = true;
33
33
 
34
34
  // Log de démarrage simple (une seule fois)
35
- console.log('bb-contents | v1.0.148');
35
+ console.log('bb-contents | v1.0.150');
36
36
 
37
37
  // Configuration
38
38
  const config = {
@@ -508,61 +508,176 @@
508
508
  forceImagesDisplay(repeatBlock1);
509
509
  forceImagesDisplay(repeatBlock2);
510
510
 
511
- // Pour les marquees horizontaux, utiliser position relative (plus simple et plus fiable)
512
- if (!isVertical) {
513
- scrollContainer.appendChild(mainBlock);
514
- scrollContainer.appendChild(repeatBlock1);
515
- scrollContainer.appendChild(repeatBlock2);
516
- mainContainer.appendChild(scrollContainer);
517
-
518
- // Calculer la hauteur maximale des items après ajout au DOM
519
- requestAnimationFrame(() => {
520
- requestAnimationFrame(() => {
521
- const items = mainBlock.querySelectorAll('.bb-marquee_item, [role="listitem"], > *');
522
- let maxHeight = 0;
523
- items.forEach(function(item) {
524
- const itemHeight = item.offsetHeight;
525
- if (itemHeight > maxHeight) {
526
- maxHeight = itemHeight;
511
+ // NOUVELLE APPROCHE: Ajouter temporairement les copies au DOM (hors écran)
512
+ // pour forcer le navigateur à les rendre complètement avant l'animation
513
+ const tempContainer = document.createElement('div');
514
+ tempContainer.style.cssText = 'position: absolute; left: -9999px; top: -9999px; visibility: hidden;';
515
+ tempContainer.appendChild(repeatBlock1);
516
+ tempContainer.appendChild(repeatBlock2);
517
+ document.body.appendChild(tempContainer);
518
+
519
+ // Forcer le rendu en vérifiant que toutes les images sont vraiment chargées et rendues
520
+ const waitForImagesRender = function(block) {
521
+ return new Promise(function(resolve) {
522
+ const images = block.querySelectorAll('img');
523
+ if (images.length === 0) {
524
+ resolve();
525
+ return;
526
+ }
527
+
528
+ let renderedCount = 0;
529
+ const totalImages = images.length;
530
+
531
+ const checkRendered = function() {
532
+ if (renderedCount >= totalImages) {
533
+ resolve();
534
+ }
535
+ };
536
+
537
+ images.forEach(function(img) {
538
+ // Vérifier que l'image est vraiment rendue (naturalWidth > 0 ET dans le DOM)
539
+ const checkImage = function() {
540
+ if (img.complete && img.naturalWidth > 0 && img.naturalHeight > 0 && img.offsetWidth > 0) {
541
+ renderedCount++;
542
+ checkRendered();
543
+ } else {
544
+ // Réessayer après un court délai
545
+ setTimeout(checkImage, 10);
527
546
  }
528
- });
547
+ };
529
548
 
530
- // Si aucun item trouvé, essayer de prendre la hauteur du scrollContainer
531
- if (maxHeight === 0) {
532
- maxHeight = scrollContainer.offsetHeight;
549
+ // Forcer le chargement si nécessaire
550
+ if (img.dataset.src && !img.src) {
551
+ img.src = img.dataset.src;
533
552
  }
534
553
 
535
- // Appliquer la hauteur calculée au mainContainer si elle est valide
536
- if (maxHeight > 0) {
537
- mainContainer.style.height = maxHeight + 'px';
554
+ if (img.complete && img.naturalWidth > 0 && img.offsetWidth > 0) {
555
+ renderedCount++;
556
+ checkRendered();
557
+ } else {
558
+ img.onload = function() {
559
+ setTimeout(checkImage, 10);
560
+ };
561
+ checkImage();
538
562
  }
539
563
  });
564
+
565
+ // Timeout de sécurité
566
+ setTimeout(function() {
567
+ if (renderedCount < totalImages) {
568
+ renderedCount = totalImages;
569
+ checkRendered();
570
+ }
571
+ }, 2000);
540
572
  });
541
- } else {
542
- // Pour vertical, garder le comportement actuel
543
- scrollContainer.appendChild(mainBlock);
544
- scrollContainer.appendChild(repeatBlock1);
545
- scrollContainer.appendChild(repeatBlock2);
546
- mainContainer.appendChild(scrollContainer);
547
- }
573
+ };
548
574
 
549
- element.innerHTML = '';
550
- element.appendChild(mainContainer);
551
- element.setAttribute('data-bb-marquee-processed', 'true');
575
+ // NOUVEAU: Forcer le rendu complet en déplaçant temporairement le conteneur
576
+ // pour que toutes les parties soient visibles (même brièvement)
577
+ // Cela force le navigateur à rendre même les parties très larges sur grands écrans
578
+ const forceFullRender = function() {
579
+ return new Promise(function(resolve) {
580
+ // Calculer la largeur totale des copies
581
+ const totalWidth = Math.max(
582
+ repeatBlock1.offsetWidth || 0,
583
+ repeatBlock2.offsetWidth || 0
584
+ );
585
+
586
+ if (totalWidth > 0 && totalWidth > window.innerWidth) {
587
+ // Déplacer temporairement le conteneur pour forcer le rendu de toutes les parties
588
+ // On le place à gauche de l'écran puis on le déplace pour que tout soit visible
589
+ tempContainer.style.left = '0px';
590
+ tempContainer.style.width = totalWidth + 'px';
591
+ tempContainer.style.overflow = 'visible';
592
+
593
+ // Forcer un reflow pour que le navigateur calcule les dimensions
594
+ void tempContainer.offsetWidth;
595
+
596
+ // Maintenant déplacer pour que la fin soit visible (force le rendu de la fin)
597
+ const translateX = Math.max(0, totalWidth - window.innerWidth);
598
+ tempContainer.style.transform = 'translateX(-' + translateX + 'px)';
599
+ void tempContainer.offsetWidth;
600
+
601
+ // Revenir à la position initiale
602
+ tempContainer.style.transform = '';
603
+ tempContainer.style.left = '-9999px';
604
+ tempContainer.style.width = 'auto';
605
+ void tempContainer.offsetWidth;
606
+ }
607
+
608
+ // Attendre un frame pour que le rendu soit complet
609
+ requestAnimationFrame(function() {
610
+ requestAnimationFrame(resolve);
611
+ });
612
+ });
613
+ };
614
+
615
+ // Attendre que toutes les images soient rendues dans les copies
616
+ Promise.all([
617
+ waitForImagesRender(repeatBlock1),
618
+ waitForImagesRender(repeatBlock2),
619
+ forceFullRender() // NOUVEAU: Forcer le rendu complet
620
+ ]).then(function() {
621
+ // Retirer les copies du conteneur temporaire
622
+ document.body.removeChild(tempContainer);
623
+
624
+ // Maintenant ajouter les copies au scrollContainer
625
+ // Les images sont maintenant complètement rendues
626
+ if (!isVertical) {
627
+ scrollContainer.appendChild(mainBlock);
628
+ scrollContainer.appendChild(repeatBlock1);
629
+ scrollContainer.appendChild(repeatBlock2);
630
+ mainContainer.appendChild(scrollContainer);
631
+
632
+ // Calculer la hauteur maximale des items après ajout au DOM
633
+ requestAnimationFrame(() => {
634
+ requestAnimationFrame(() => {
635
+ const items = mainBlock.querySelectorAll('.bb-marquee_item, [role="listitem"], > *');
636
+ let maxHeight = 0;
637
+ items.forEach(function(item) {
638
+ const itemHeight = item.offsetHeight;
639
+ if (itemHeight > maxHeight) {
640
+ maxHeight = itemHeight;
641
+ }
642
+ });
643
+
644
+ // Si aucun item trouvé, essayer de prendre la hauteur du scrollContainer
645
+ if (maxHeight === 0) {
646
+ maxHeight = scrollContainer.offsetHeight;
647
+ }
648
+
649
+ // Appliquer la hauteur calculée au mainContainer si elle est valide
650
+ if (maxHeight > 0) {
651
+ mainContainer.style.height = maxHeight + 'px';
652
+ }
653
+ });
654
+ });
655
+ } else {
656
+ // Pour vertical, garder le comportement actuel
657
+ scrollContainer.appendChild(mainBlock);
658
+ scrollContainer.appendChild(repeatBlock1);
659
+ scrollContainer.appendChild(repeatBlock2);
660
+ mainContainer.appendChild(scrollContainer);
661
+ }
662
+
663
+ element.innerHTML = '';
664
+ element.appendChild(mainContainer);
665
+ element.setAttribute('data-bb-marquee-processed', 'true');
552
666
 
553
- // Attendre un peu pour s'assurer que le rendu est complet
554
- // Les images sont déjà chargées donc pas besoin d'attendre leur chargement
555
- requestAnimationFrame(() => {
667
+ // Attendre un peu pour s'assurer que le rendu est complet
668
+ // Les images sont maintenant complètement rendues
556
669
  requestAnimationFrame(() => {
557
- // Maintenant démarrer l'animation
558
- const initDelay = isVertical ? 500 : 100;
559
- setTimeout(() => {
560
- this.initAnimation(element, scrollContainer, mainBlock, {
561
- speed, direction, pauseOnHover, gap, isVertical, useAutoHeight
562
- });
563
- }, initDelay);
670
+ requestAnimationFrame(() => {
671
+ // Maintenant démarrer l'animation
672
+ const initDelay = isVertical ? 500 : 100;
673
+ setTimeout(() => {
674
+ this.initAnimation(element, scrollContainer, mainBlock, {
675
+ speed, direction, pauseOnHover, gap, isVertical, useAutoHeight
676
+ });
677
+ }, initDelay);
678
+ });
564
679
  });
565
- });
680
+ }.bind(this));
566
681
  }.bind(this)).catch(function() {
567
682
  // En cas d'erreur, créer les copies quand même et démarrer
568
683
  const repeatBlock1 = mainBlock.cloneNode(true);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bebranded/bb-contents",
3
- "version": "1.0.148",
3
+ "version": "1.0.150",
4
4
  "description": "Contenus additionnels français pour Webflow",
5
5
  "main": "bb-contents.js",
6
6
  "scripts": {