@bebranded/bb-contents 1.0.140 → 1.0.141

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 +40 -106
  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.140
4
+ * @version 1.0.141
5
5
  * @author BeBranded
6
6
  * @license MIT
7
7
  * @website https://www.bebranded.xyz
@@ -32,11 +32,11 @@
32
32
  window._bbContentsInitialized = true;
33
33
 
34
34
  // Log de démarrage simple (une seule fois)
35
- console.log('bb-contents | v1.0.140');
35
+ console.log('bb-contents | v1.0.141');
36
36
 
37
37
  // Configuration
38
38
  const config = {
39
- version: '1.0.140',
39
+ version: '1.0.141',
40
40
  debug: false, // Debug désactivé pour rendu propre
41
41
  prefix: 'bb-', // utilisé pour générer les sélecteurs (data-bb-*)
42
42
  youtubeEndpoint: null, // URL du worker YouTube (à définir par l'utilisateur)
@@ -324,16 +324,18 @@
324
324
  position: relative;
325
325
  width: 100%;
326
326
  height: ${isVertical ? (height === 'auto' ? 'auto' : height + 'px') : 'auto'};
327
- overflow: ${isVertical ? 'hidden' : 'visible'};
327
+ overflow: hidden;
328
328
  min-height: auto;
329
329
  ${minHeight ? `min-height: ${minHeight};` : ''}
330
330
  `;
331
331
 
332
332
  const scrollContainer = document.createElement('div');
333
+ // Pour horizontal, utiliser position relative au lieu de absolute pour éviter les problèmes de calcul
334
+ const useRelativeForHorizontal = !isVertical;
333
335
  scrollContainer.style.cssText = `
334
- ${useAutoHeight ? 'position: relative;' : 'position: absolute;'}
336
+ ${useAutoHeight || useRelativeForHorizontal ? 'position: relative;' : 'position: absolute;'}
335
337
  will-change: transform;
336
- ${useAutoHeight ? '' : 'height: 100%; top: 0px; left: 0px;'}
338
+ ${useAutoHeight || useRelativeForHorizontal ? '' : 'height: 100%; top: 0px; left: 0px;'}
337
339
  display: flex;
338
340
  ${isVertical ? 'flex-direction: column;' : ''}
339
341
  align-items: center;
@@ -394,90 +396,34 @@
394
396
  const repeatBlock1 = mainBlock.cloneNode(true);
395
397
  const repeatBlock2 = mainBlock.cloneNode(true);
396
398
 
397
- // Pour les marquees horizontaux, calculer la hauteur ET la largeur avant de mettre en absolute
399
+ // Pour les marquees horizontaux, utiliser position relative (plus simple et plus fiable)
398
400
  if (!isVertical) {
399
- // Temporairement mettre scrollContainer en relative pour calculer les dimensions
400
- scrollContainer.style.position = 'relative';
401
401
  scrollContainer.appendChild(mainBlock);
402
402
  scrollContainer.appendChild(repeatBlock1);
403
403
  scrollContainer.appendChild(repeatBlock2);
404
404
  mainContainer.appendChild(scrollContainer);
405
405
 
406
- // Forcer un reflow pour calculer les dimensions
407
- void scrollContainer.offsetHeight;
408
-
409
- // Calculer la hauteur maximale des items
410
- const items = mainBlock.querySelectorAll('.bb-marquee_item, [role="listitem"], > *');
411
- let maxHeight = 0;
412
- items.forEach(function(item) {
413
- const itemHeight = item.offsetHeight;
414
- if (itemHeight > maxHeight) {
415
- maxHeight = itemHeight;
416
- }
417
- });
418
-
419
- // Si aucun item trouvé, essayer de prendre la hauteur du scrollContainer
420
- if (maxHeight === 0) {
421
- maxHeight = scrollContainer.offsetHeight;
422
- }
423
-
424
- // Appliquer la hauteur calculée au mainContainer si elle est valide
425
- if (maxHeight > 0) {
426
- mainContainer.style.height = maxHeight + 'px';
427
- }
428
-
429
- // IMPORTANT: Calculer contentSize AVANT de mettre en absolute
430
- // Car une fois en absolute, offsetWidth peut être 0
431
- // Stocker dans une propriété de l'élément pour y accéder plus tard
432
- const calculateWidth = () => {
433
- const width = mainBlock.offsetWidth;
434
- if (width > 0) {
435
- // Stocker dans l'élément pour y accéder dans initAnimation
436
- element._bbMarqueeContentSize = width;
437
-
438
- // Maintenant mettre scrollContainer en absolute
439
- scrollContainer.style.position = 'absolute';
440
- scrollContainer.style.height = '100%';
441
- scrollContainer.style.top = '0px';
442
- scrollContainer.style.left = '0px';
443
- scrollContainer.style.right = '0px'; // Ajouter right pour largeur complète
406
+ // Calculer la hauteur maximale des items après ajout au DOM
407
+ requestAnimationFrame(() => {
408
+ requestAnimationFrame(() => {
409
+ const items = mainBlock.querySelectorAll('.bb-marquee_item, [role="listitem"], > *');
410
+ let maxHeight = 0;
411
+ items.forEach(function(item) {
412
+ const itemHeight = item.offsetHeight;
413
+ if (itemHeight > maxHeight) {
414
+ maxHeight = itemHeight;
415
+ }
416
+ });
444
417
 
445
- // Initialiser l'animation maintenant que contentSize est calculé
446
- const initDelay = 100; // Court délai pour s'assurer que le layout est appliqué
447
- setTimeout(() => {
448
- this.initAnimation(element, scrollContainer, mainBlock, {
449
- speed, direction, pauseOnHover, gap, isVertical, useAutoHeight
450
- });
451
- }, initDelay);
452
- } else {
453
- // Si toujours 0, réessayer après un court délai (max 2 secondes)
454
- if (!element._bbMarqueeRetryCount) {
455
- element._bbMarqueeRetryCount = 0;
418
+ // Si aucun item trouvé, essayer de prendre la hauteur du scrollContainer
419
+ if (maxHeight === 0) {
420
+ maxHeight = scrollContainer.offsetHeight;
456
421
  }
457
- element._bbMarqueeRetryCount++;
458
- if (element._bbMarqueeRetryCount < 40) { // 40 * 50ms = 2 secondes max
459
- setTimeout(calculateWidth, 50);
460
- } else {
461
- // Timeout : utiliser une valeur par défaut ou forcer le calcul
462
- element._bbMarqueeContentSize = mainContainer.offsetWidth || 1000;
463
- scrollContainer.style.position = 'absolute';
464
- scrollContainer.style.height = '100%';
465
- scrollContainer.style.top = '0px';
466
- scrollContainer.style.left = '0px';
467
- scrollContainer.style.right = '0px';
468
- setTimeout(() => {
469
- this.initAnimation(element, scrollContainer, mainBlock, {
470
- speed, direction, pauseOnHover, gap, isVertical, useAutoHeight
471
- });
472
- }, 100);
422
+
423
+ // Appliquer la hauteur calculée au mainContainer si elle est valide
424
+ if (maxHeight > 0) {
425
+ mainContainer.style.height = maxHeight + 'px';
473
426
  }
474
- }
475
- };
476
-
477
- // Utiliser requestAnimationFrame pour s'assurer que le layout est calculé
478
- requestAnimationFrame(() => {
479
- requestAnimationFrame(() => {
480
- calculateWidth();
481
427
  });
482
428
  });
483
429
  } else {
@@ -486,26 +432,19 @@
486
432
  scrollContainer.appendChild(repeatBlock1);
487
433
  scrollContainer.appendChild(repeatBlock2);
488
434
  mainContainer.appendChild(scrollContainer);
489
-
490
- element.innerHTML = '';
491
- element.appendChild(mainContainer);
492
- element.setAttribute('data-bb-marquee-processed', 'true');
493
-
494
- // Initialisation simple avec délai fixe
495
- const initDelay = 500;
496
- setTimeout(() => {
497
- this.initAnimation(element, scrollContainer, mainBlock, {
498
- speed, direction, pauseOnHover, gap, isVertical, useAutoHeight
499
- });
500
- }, initDelay);
501
435
  }
502
436
 
503
- // Pour horizontal, l'initialisation se fait dans calculateWidth
504
- if (!isVertical) {
505
- element.innerHTML = '';
506
- element.appendChild(mainContainer);
507
- element.setAttribute('data-bb-marquee-processed', 'true');
508
- }
437
+ element.innerHTML = '';
438
+ element.appendChild(mainContainer);
439
+ element.setAttribute('data-bb-marquee-processed', 'true');
440
+
441
+ // Initialisation simple avec délai fixe
442
+ const initDelay = isVertical ? 500 : 300;
443
+ setTimeout(() => {
444
+ this.initAnimation(element, scrollContainer, mainBlock, {
445
+ speed, direction, pauseOnHover, gap, isVertical, useAutoHeight
446
+ });
447
+ }, initDelay);
509
448
  });
510
449
  },
511
450
 
@@ -513,13 +452,8 @@
513
452
  const { speed, direction, pauseOnHover, gap, isVertical, useAutoHeight } = options;
514
453
 
515
454
  // Calculer les dimensions
516
- // Pour horizontal, utiliser la valeur stockée dans l'élément si disponible (calculée avant position absolute)
517
- let contentSize;
518
- if (!isVertical && element._bbMarqueeContentSize && element._bbMarqueeContentSize > 0) {
519
- contentSize = element._bbMarqueeContentSize;
520
- } else {
521
- contentSize = isVertical ? mainBlock.offsetHeight : mainBlock.offsetWidth;
522
- }
455
+ // Maintenant que scrollContainer est en position relative pour horizontal, offsetWidth devrait fonctionner
456
+ const contentSize = isVertical ? mainBlock.offsetHeight : mainBlock.offsetWidth;
523
457
 
524
458
  if (contentSize === 0) {
525
459
  // Si toujours 0, réessayer après un délai
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bebranded/bb-contents",
3
- "version": "1.0.140",
3
+ "version": "1.0.141",
4
4
  "description": "Contenus additionnels français pour Webflow",
5
5
  "main": "bb-contents.js",
6
6
  "scripts": {