@bebranded/bb-contents 1.0.55-beta → 1.0.57-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 +43 -43
  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.55-beta
4
+ * @version 1.0.57-beta
5
5
  * @author BeBranded
6
6
  * @license MIT
7
7
  * @website https://www.bebranded.xyz
@@ -28,7 +28,7 @@
28
28
 
29
29
  // Configuration
30
30
  const config = {
31
- version: '1.0.55-beta',
31
+ version: '1.0.57-beta',
32
32
  debug: false, // Debug désactivé
33
33
  prefix: 'bb-', // utilisé pour générer les sélecteurs (data-bb-*)
34
34
  youtubeEndpoint: null, // URL du worker YouTube (à définir par l'utilisateur)
@@ -456,35 +456,31 @@
456
456
  console.log(`[bb-contents] Marquee ${index + 1}: INITIALISATION DE L'ANIMATION`);
457
457
 
458
458
  if (isVertical) {
459
- // Animation JavaScript pour le vertical - défilement infini parfait
459
+ // Animation JavaScript pour le vertical - version 1.0.33-beta qui fonctionnait parfaitement
460
460
  const contentSize = finalHeight;
461
- const gapSize = parseInt(gap);
462
- const totalSize = contentSize * 4 + gapSize * 3; // 4 copies
461
+ const totalSize = contentSize * 4 + parseInt(gap) * 3; // 4 copies au lieu de 3
463
462
 
464
463
  // Ajuster la hauteur du scrollContainer seulement si pas en mode auto
465
464
  if (!useAutoHeight) {
466
- scrollContainer.style.height = totalSize + 'px';
465
+ scrollContainer.style.height = totalSize + 'px';
467
466
  }
468
-
469
- // Position initiale : commencer à la 2ème copie pour défilement infini
470
- let currentPosition = direction === 'bottom' ? -(contentSize + gapSize) : 0;
471
- const step = (parseFloat(speed) * 2) / 60;
467
+
468
+ let currentPosition = direction === 'bottom' ? -contentSize - parseInt(gap) : 0;
469
+ const step = (parseFloat(speed) * 2) / 60; // Vitesse différente
472
470
  let isPaused = false;
473
471
 
474
- // Fonction d'animation JavaScript avec défilement infini parfait
472
+ // Fonction d'animation JavaScript
475
473
  const animate = () => {
476
474
  if (!isPaused) {
477
475
  if (direction === 'bottom') {
478
476
  currentPosition += step;
479
- // Reset quand on arrive au début de la 1ère copie
480
477
  if (currentPosition >= 0) {
481
- currentPosition = -(contentSize + gapSize);
478
+ currentPosition = -contentSize - parseInt(gap);
482
479
  }
483
480
  } else {
484
481
  currentPosition -= step;
485
- // Reset quand on arrive au début de la 4ème copie
486
- if (currentPosition <= -(3 * (contentSize + gapSize))) {
487
- currentPosition = -(2 * (contentSize + gapSize));
482
+ if (currentPosition <= -contentSize - parseInt(gap)) {
483
+ currentPosition = 0;
488
484
  }
489
485
  }
490
486
 
@@ -496,41 +492,41 @@
496
492
  // Démarrer l'animation
497
493
  animate();
498
494
 
499
- // Pause au survol simple
500
- element.addEventListener('mouseenter', function() {
501
- isPaused = true;
502
- });
503
- element.addEventListener('mouseleave', function() {
504
- isPaused = false;
505
- });
495
+ bbContents.utils.log('Marquee vertical créé avec animation JS - direction:', direction, 'taille:', contentSize + 'px', 'total:', totalSize + 'px', 'hauteur-wrapper:', height + 'px');
496
+
497
+ // Pause au survol
498
+ if (pauseOnHover === 'true') {
499
+ element.addEventListener('mouseenter', function() {
500
+ isPaused = true;
501
+ });
502
+ element.addEventListener('mouseleave', function() {
503
+ isPaused = false;
504
+ });
505
+ }
506
506
 
507
507
  // Marquee vertical créé avec animation JS
508
508
  } else {
509
- // Animation JavaScript pour l'horizontal - défilement infini parfait
509
+ // Animation JavaScript pour l'horizontal (comme le vertical pour éviter les saccades)
510
510
  const contentSize = finalWidth;
511
- const gapSize = parseInt(gap);
512
- const totalSize = contentSize * 4 + gapSize * 3; // 4 copies
513
- scrollContainer.style.width = totalSize + 'px';
514
-
515
- // Position initiale : commencer à la 2ème copie pour défilement infini
516
- let currentPosition = direction === 'right' ? -(contentSize + gapSize) : 0;
511
+ const totalSize = contentSize * 4 + parseInt(gap) * 3;
512
+ scrollContainer.style.width = totalSize + 'px';
513
+
514
+ let currentPosition = direction === 'right' ? -contentSize - parseInt(gap) : 0;
517
515
  const step = (parseFloat(speed) * 0.5) / 60; // Vitesse réduite pour l'horizontal
518
516
  let isPaused = false;
519
517
 
520
- // Fonction d'animation JavaScript avec défilement infini parfait
518
+ // Fonction d'animation JavaScript
521
519
  const animate = () => {
522
520
  if (!isPaused) {
523
521
  if (direction === 'right') {
524
522
  currentPosition += step;
525
- // Reset quand on arrive au début de la 1ère copie
526
523
  if (currentPosition >= 0) {
527
- currentPosition = -(contentSize + gapSize);
524
+ currentPosition = -contentSize - parseInt(gap);
528
525
  }
529
526
  } else {
530
527
  currentPosition -= step;
531
- // Reset quand on arrive au début de la 4ème copie
532
- if (currentPosition <= -(3 * (contentSize + gapSize))) {
533
- currentPosition = -(2 * (contentSize + gapSize));
528
+ if (currentPosition <= -contentSize - parseInt(gap)) {
529
+ currentPosition = 0;
534
530
  }
535
531
  }
536
532
 
@@ -542,13 +538,17 @@
542
538
  // Démarrer l'animation
543
539
  animate();
544
540
 
545
- // Pause au survol simple
546
- element.addEventListener('mouseenter', function() {
547
- isPaused = true;
548
- });
549
- element.addEventListener('mouseleave', function() {
550
- isPaused = false;
551
- });
541
+ bbContents.utils.log('Marquee horizontal créé avec animation JS - direction:', direction, 'taille:', contentSize + 'px', 'total:', totalSize + 'px');
542
+
543
+ // Pause au survol
544
+ if (pauseOnHover === 'true') {
545
+ element.addEventListener('mouseenter', function() {
546
+ isPaused = true;
547
+ });
548
+ element.addEventListener('mouseleave', function() {
549
+ isPaused = false;
550
+ });
551
+ }
552
552
 
553
553
  // Marquee horizontal créé avec animation JS
554
554
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bebranded/bb-contents",
3
- "version": "1.0.55-beta",
3
+ "version": "1.0.57-beta",
4
4
  "description": "Contenus additionnels français pour Webflow",
5
5
  "main": "bb-contents.js",
6
6
  "scripts": {