@bebranded/bb-contents 1.0.22-beta → 1.0.23-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 +86 -82
  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.22-beta
4
+ * @version 1.0.23-beta
5
5
  * @author BeBranded
6
6
  * @license MIT
7
7
  * @website https://www.bebranded.xyz
@@ -17,7 +17,7 @@
17
17
 
18
18
  // Configuration
19
19
  const config = {
20
- version: '1.0.22-beta',
20
+ version: '1.0.23-beta',
21
21
  debug: window.location.hostname === 'localhost' || window.location.hostname.includes('webflow.io'),
22
22
  prefix: 'bb-', // utilisé pour générer les sélecteurs (data-bb-*)
23
23
  i18n: {
@@ -375,93 +375,97 @@
375
375
  // Marquer l'élément comme traité par le module marquee
376
376
  element.setAttribute('data-bb-marquee-processed', 'true');
377
377
 
378
- // Logique exacte de la version live
379
- if (isVertical) {
380
- // Animation JavaScript pour le vertical (comme la version live)
381
- const contentHeight = scrollContainer.scrollHeight / 4;
382
- const contentSize = contentHeight;
383
- const totalSize = contentSize * 4 + parseInt(gap) * 3;
384
- scrollContainer.style.height = totalSize + 'px';
385
-
386
- let currentPosition = direction === 'bottom' ? -contentSize - parseInt(gap) : 0;
387
- const step = (parseFloat(speed) * 2) / 60; // Exactement comme la version live
388
- let isPaused = false;
389
-
390
- const animate = () => {
391
- if (!isPaused) {
392
- if (direction === 'bottom') {
393
- currentPosition += step;
394
- if (currentPosition >= 0) {
395
- currentPosition = -contentSize - parseInt(gap);
396
- }
397
- } else {
398
- currentPosition -= step;
399
- if (currentPosition <= -contentSize - parseInt(gap)) {
400
- currentPosition = 0;
378
+ // Démarrer l'animation après un délai pour laisser le DOM se stabiliser
379
+ setTimeout(() => {
380
+ if (isVertical) {
381
+ // Animation JavaScript pour le vertical (comme la version live)
382
+ const contentHeight = scrollContainer.scrollHeight / 4;
383
+ const contentSize = contentHeight;
384
+ const totalSize = contentSize * 4 + parseInt(gap) * 3;
385
+ scrollContainer.style.height = totalSize + 'px';
386
+
387
+ let currentPosition = direction === 'bottom' ? -contentSize - parseInt(gap) : 0;
388
+ const step = (parseFloat(speed) * 2) / 60; // Exactement comme la version live
389
+ let isPaused = false;
390
+
391
+ const animate = () => {
392
+ if (!isPaused) {
393
+ if (direction === 'bottom') {
394
+ currentPosition += step;
395
+ if (currentPosition >= 0) {
396
+ currentPosition = -contentSize - parseInt(gap);
397
+ }
398
+ } else {
399
+ currentPosition -= step;
400
+ if (currentPosition <= -contentSize - parseInt(gap)) {
401
+ currentPosition = 0;
402
+ }
401
403
  }
404
+
405
+ scrollContainer.style.transform = `translate3d(0px, ${currentPosition}px, 0px)`;
402
406
  }
403
-
404
- scrollContainer.style.transform = `translate3d(0px, ${currentPosition}px, 0px)`;
407
+ requestAnimationFrame(animate);
408
+ };
409
+
410
+ animate();
411
+
412
+ // Pause au survol
413
+ if (pauseOnHover === 'true') {
414
+ mainContainer.addEventListener('mouseenter', () => {
415
+ isPaused = true;
416
+ });
417
+ mainContainer.addEventListener('mouseleave', () => {
418
+ isPaused = false;
419
+ });
405
420
  }
406
- requestAnimationFrame(animate);
407
- };
408
-
409
- animate();
410
-
411
- // Pause au survol
412
- if (pauseOnHover === 'true') {
413
- mainContainer.addEventListener('mouseenter', () => {
414
- isPaused = true;
415
- });
416
- mainContainer.addEventListener('mouseleave', () => {
417
- isPaused = false;
418
- });
419
- }
420
- } else {
421
- // Animation CSS pour l'horizontal (comme la version live)
422
- const contentWidth = scrollContainer.scrollWidth / 4;
423
- const contentSize = contentWidth;
424
- const totalSize = contentSize * 4 + parseInt(gap) * 3;
425
- scrollContainer.style.width = totalSize + 'px';
426
-
427
- // Calcul de la durée exacte comme la version live
428
- const animationDuration = (totalSize / (parseFloat(speed) * 1.5)).toFixed(2) + 's';
429
-
430
- // Animation CSS avec translate3d
431
- const animationName = 'bb-scroll-' + Math.random().toString(36).substr(2, 9);
432
- const style = document.createElement('style');
433
- style.textContent = `
434
- @keyframes ${animationName} {
435
- 0% { transform: translate3d(0px, 0px, 0px); }
436
- 100% { transform: translate3d(-${contentSize + parseInt(gap)}px, 0px, 0px); }
421
+ } else {
422
+ // Animation CSS pour l'horizontal (comme la version live)
423
+ const contentWidth = scrollContainer.scrollWidth / 4;
424
+ const contentSize = contentWidth;
425
+ const totalSize = contentSize * 4 + parseInt(gap) * 3;
426
+ scrollContainer.style.width = totalSize + 'px';
427
+
428
+ // Calcul de la durée exacte comme la version live
429
+ const animationDuration = (totalSize / (parseFloat(speed) * 1.5)).toFixed(2) + 's';
430
+
431
+ // Animation CSS avec translate3d
432
+ const animationName = 'bb-scroll-' + Math.random().toString(36).substr(2, 9);
433
+ const style = document.createElement('style');
434
+ style.textContent = `
435
+ @keyframes ${animationName} {
436
+ 0% { transform: translate3d(0px, 0px, 0px); }
437
+ 100% { transform: translate3d(-${contentSize + parseInt(gap)}px, 0px, 0px); }
438
+ }
439
+ `;
440
+ document.head.appendChild(style);
441
+
442
+ scrollContainer.style.animation = `${animationName} ${animationDuration} linear infinite`;
443
+
444
+ // Pause au survol
445
+ if (pauseOnHover === 'true') {
446
+ mainContainer.addEventListener('mouseenter', () => {
447
+ scrollContainer.style.animationPlayState = 'paused';
448
+ });
449
+ mainContainer.addEventListener('mouseleave', () => {
450
+ scrollContainer.style.animationPlayState = 'running';
451
+ });
437
452
  }
438
- `;
439
- document.head.appendChild(style);
440
-
441
- scrollContainer.style.animation = `${animationName} ${animationDuration} linear infinite`;
442
-
443
- // Pause au survol
444
- if (pauseOnHover === 'true') {
445
- mainContainer.addEventListener('mouseenter', () => {
446
- scrollContainer.style.animationPlayState = 'paused';
447
- });
448
- mainContainer.addEventListener('mouseleave', () => {
449
- scrollContainer.style.animationPlayState = 'running';
450
- });
451
453
  }
452
- }
454
+ }, 100);
453
455
 
454
- // Auto-height pour les logos horizontaux
456
+ // Auto-height pour les logos horizontaux (amélioré)
455
457
  if (orientation === 'horizontal' && !height && !minHeight) {
456
- const logos = element.querySelectorAll('.bb-marquee_logo, img, svg');
457
- let maxHeight = 0;
458
- logos.forEach(logo => {
459
- const rect = logo.getBoundingClientRect();
460
- if (rect.height > maxHeight) maxHeight = rect.height;
461
- });
462
- if (maxHeight > 0) {
463
- mainContainer.style.height = maxHeight + 'px';
464
- }
458
+ setTimeout(() => {
459
+ const logos = element.querySelectorAll('.bb-marquee_logo, img, svg');
460
+ let maxHeight = 0;
461
+ logos.forEach(logo => {
462
+ const rect = logo.getBoundingClientRect();
463
+ if (rect.height > maxHeight) maxHeight = rect.height;
464
+ });
465
+ if (maxHeight > 0) {
466
+ mainContainer.style.height = maxHeight + 'px';
467
+ }
468
+ }, 50);
465
469
  }
466
470
  });
467
471
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bebranded/bb-contents",
3
- "version": "1.0.22-beta",
3
+ "version": "1.0.23-beta",
4
4
  "description": "Contenus additionnels français pour Webflow",
5
5
  "main": "bb-contents.js",
6
6
  "scripts": {