@bebranded/bb-contents 1.0.150 → 1.0.152

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 +74 -27
  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.150');
35
+ console.log('bb-contents | v1.0.152');
36
36
 
37
37
  // Configuration
38
38
  const config = {
@@ -320,11 +320,16 @@
320
320
  const isVertical = orientation === 'vertical';
321
321
  const useAutoHeight = isVertical && height === 'auto';
322
322
 
323
+ // Vérifier le overflow du parent pour respecter overflow: visible
324
+ const parentComputedStyle = getComputedStyle(element);
325
+ const parentOverflow = parentComputedStyle.overflow;
326
+ const shouldHideOverflow = parentOverflow !== 'visible' && parentOverflow !== '';
327
+
323
328
  mainContainer.style.cssText = `
324
329
  position: relative;
325
330
  width: 100%;
326
331
  height: ${isVertical ? (height === 'auto' ? 'auto' : height + 'px') : 'auto'};
327
- overflow: hidden;
332
+ ${shouldHideOverflow ? 'overflow: hidden;' : 'overflow: visible;'}
328
333
  min-height: auto;
329
334
  ${minHeight ? `min-height: ${minHeight};` : ''}
330
335
  `;
@@ -451,20 +456,47 @@
451
456
  }
452
457
 
453
458
  // Permettre le retour à la ligne pour les conteneurs de texte
459
+ // Ne pas toucher aux éléments qui doivent garder leur taille auto (comme .tag-m)
454
460
  const textContainers = item.querySelectorAll('.use-case_client, .testimonial_client-info, [class*="text"], p, span');
455
461
  textContainers.forEach(container => {
462
+ // Exclure les éléments qui doivent garder leur taille auto (tags, badges, etc.)
463
+ const shouldPreserveAuto = container.classList.contains('tag-m') ||
464
+ container.classList.contains('tag') ||
465
+ container.classList.contains('badge') ||
466
+ container.getAttribute('style') && container.getAttribute('style').includes('width');
467
+
468
+ if (shouldPreserveAuto) {
469
+ // Ne pas toucher à ces éléments, ils gardent leur taille auto
470
+ return;
471
+ }
472
+
456
473
  const containerComputed = getComputedStyle(container);
457
- // Si l'élément a une largeur définie, la préserver
458
- if (containerComputed.width && containerComputed.width !== 'auto' && containerComputed.width !== '0px') {
459
- container.style.width = containerComputed.width;
460
- } else {
461
- // Sinon, prendre 100% de la largeur du parent
462
- container.style.width = '100%';
474
+ // Vérifier si l'élément a un style inline width défini
475
+ const hasInlineWidth = container.style.width && container.style.width !== '';
476
+
477
+ // Si l'élément a une largeur inline définie, la préserver
478
+ if (hasInlineWidth) {
479
+ // Garder la largeur inline
480
+ return;
481
+ }
482
+
483
+ // Si l'élément a une largeur calculée qui n'est pas auto, vérifier si c'est une valeur fixe
484
+ // Sinon, appliquer width: 100% seulement aux conteneurs de texte qui doivent wrapper
485
+ const isTextContainer = container.classList.contains('use-case_client') ||
486
+ container.classList.contains('testimonial_client-info') ||
487
+ container.tagName === 'P' && !container.classList.contains('tag');
488
+
489
+ if (isTextContainer) {
490
+ // Pour les conteneurs de texte principaux, permettre le wrapping
491
+ // Ne pas forcer width si déjà défini
492
+ if (!containerComputed.width || containerComputed.width === 'auto' || containerComputed.width === '0px') {
493
+ container.style.width = '100%';
494
+ }
495
+ // Forcer le retour à la ligne
496
+ container.style.whiteSpace = 'normal';
497
+ container.style.wordWrap = 'break-word';
498
+ container.style.overflowWrap = 'break-word';
463
499
  }
464
- // Forcer le retour à la ligne
465
- container.style.whiteSpace = 'normal';
466
- container.style.wordWrap = 'break-word';
467
- container.style.overflowWrap = 'break-word';
468
500
  });
469
501
  });
470
502
  }, 0);
@@ -575,6 +607,8 @@
575
607
  // NOUVEAU: Forcer le rendu complet en déplaçant temporairement le conteneur
576
608
  // pour que toutes les parties soient visibles (même brièvement)
577
609
  // Cela force le navigateur à rendre même les parties très larges sur grands écrans
610
+ // Pour "left", on force le rendu de la partie DROITE (où les copies apparaîtront)
611
+ // Pour "right", on force le rendu de la partie GAUCHE
578
612
  const forceFullRender = function() {
579
613
  return new Promise(function(resolve) {
580
614
  // Calculer la largeur totale des copies
@@ -584,8 +618,7 @@
584
618
  );
585
619
 
586
620
  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
621
+ // Déplacer temporairement le conteneur pour forcer le rendu
589
622
  tempContainer.style.left = '0px';
590
623
  tempContainer.style.width = totalWidth + 'px';
591
624
  tempContainer.style.overflow = 'visible';
@@ -593,22 +626,36 @@
593
626
  // Forcer un reflow pour que le navigateur calcule les dimensions
594
627
  void tempContainer.offsetWidth;
595
628
 
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;
629
+ // NOUVEAU: Pour "left", déplacer pour que la FIN soit visible (partie droite)
630
+ // Pour "right", déplacer pour que le DÉBUT soit visible (partie gauche)
631
+ // On va faire les deux pour être sûr que tout est rendu
632
+ const translateXEnd = Math.max(0, totalWidth - window.innerWidth);
633
+ const translateXStart = 0;
600
634
 
601
- // Revenir à la position initiale
602
- tempContainer.style.transform = '';
603
- tempContainer.style.left = '-9999px';
604
- tempContainer.style.width = 'auto';
635
+ // D'abord rendre la fin (pour "left" - où les copies apparaîtront)
636
+ tempContainer.style.transform = 'translateX(-' + translateXEnd + 'px)';
605
637
  void tempContainer.offsetWidth;
638
+ requestAnimationFrame(function() {
639
+ // Ensuite rendre le début (pour "right" - où les copies apparaîtront)
640
+ tempContainer.style.transform = 'translateX(-' + translateXStart + 'px)';
641
+ void tempContainer.offsetWidth;
642
+ requestAnimationFrame(function() {
643
+ // Revenir à la position initiale
644
+ tempContainer.style.transform = '';
645
+ tempContainer.style.left = '-9999px';
646
+ tempContainer.style.width = 'auto';
647
+ void tempContainer.offsetWidth;
648
+ requestAnimationFrame(function() {
649
+ requestAnimationFrame(resolve);
650
+ });
651
+ });
652
+ });
653
+ } else {
654
+ // Si pas besoin de déplacement, juste attendre un frame
655
+ requestAnimationFrame(function() {
656
+ requestAnimationFrame(resolve);
657
+ });
606
658
  }
607
-
608
- // Attendre un frame pour que le rendu soit complet
609
- requestAnimationFrame(function() {
610
- requestAnimationFrame(resolve);
611
- });
612
659
  });
613
660
  };
614
661
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bebranded/bb-contents",
3
- "version": "1.0.150",
3
+ "version": "1.0.152",
4
4
  "description": "Contenus additionnels français pour Webflow",
5
5
  "main": "bb-contents.js",
6
6
  "scripts": {