@bebranded/bb-contents 1.0.22-beta → 1.0.24-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 +158 -107
  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.24-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.24-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: {
@@ -304,27 +304,27 @@
304
304
  }
305
305
  },
306
306
 
307
- // Module Marquee - Reproduction exacte de la version live
307
+ // Module Marquee - Version live 1.0.0 avec protections
308
308
  marquee: {
309
309
  detect: function(scope) {
310
- return scope.querySelector('[bb-marquee]') !== null;
310
+ const s = scope || document;
311
+ return s.querySelector(bbContents._attrSelector('marquee')) !== null;
311
312
  },
312
313
 
313
- init: function(scope) {
314
- const elements = scope.querySelectorAll('[bb-marquee]');
315
- if (elements.length === 0) return;
316
-
317
- bbContents.utils.log('Module détecté: marquee');
318
-
319
- elements.forEach(element => {
314
+ init: function(root) {
315
+ const scope = root || document;
316
+ if (scope.closest && scope.closest('[data-bb-disable]')) return;
317
+ const elements = scope.querySelectorAll(bbContents._attrSelector('marquee'));
318
+
319
+ elements.forEach(function(element) {
320
320
  // Vérifier si l'élément a déjà été traité par un autre module
321
321
  if (element.bbProcessed || element.hasAttribute('data-bb-youtube-processed')) {
322
322
  bbContents.utils.log('Élément marquee déjà traité par un autre module, ignoré:', element);
323
323
  return;
324
324
  }
325
325
  element.bbProcessed = true;
326
-
327
- // Récupérer les options (comme la version live)
326
+
327
+ // Récupérer les options
328
328
  const speed = bbContents._getAttr(element, 'bb-marquee-speed') || '100';
329
329
  const direction = bbContents._getAttr(element, 'bb-marquee-direction') || 'left';
330
330
  const pauseOnHover = bbContents._getAttr(element, 'bb-marquee-pause') || 'true';
@@ -332,11 +332,11 @@
332
332
  const orientation = bbContents._getAttr(element, 'bb-marquee-orientation') || 'horizontal';
333
333
  const height = bbContents._getAttr(element, 'bb-marquee-height') || '300';
334
334
  const minHeight = bbContents._getAttr(element, 'bb-marquee-min-height');
335
-
335
+
336
336
  // Sauvegarder le contenu original
337
337
  const originalHTML = element.innerHTML;
338
338
 
339
- // Créer le conteneur principal (comme la version live)
339
+ // Créer le conteneur principal
340
340
  const mainContainer = document.createElement('div');
341
341
  const isVertical = orientation === 'vertical';
342
342
  mainContainer.style.cssText = `
@@ -347,8 +347,8 @@
347
347
  min-height: ${isVertical ? '100px' : '50px'};
348
348
  ${minHeight ? `min-height: ${minHeight};` : ''}
349
349
  `;
350
-
351
- // Créer le conteneur de défilement (comme la version live)
350
+
351
+ // Créer le conteneur de défilement
352
352
  const scrollContainer = document.createElement('div');
353
353
  scrollContainer.style.cssText = `
354
354
  position: absolute;
@@ -363,109 +363,160 @@
363
363
  ${isVertical ? '' : 'white-space: nowrap;'}
364
364
  flex-shrink: 0;
365
365
  `;
366
-
367
- // Dupliquer le contenu (4 copies comme la version live)
368
- scrollContainer.innerHTML = originalHTML + originalHTML + originalHTML + originalHTML;
369
-
370
- // Assembler
366
+
367
+ // Créer le bloc de contenu principal
368
+ const mainBlock = document.createElement('div');
369
+ mainBlock.innerHTML = originalHTML;
370
+ mainBlock.style.cssText = `
371
+ display: flex;
372
+ ${isVertical ? 'flex-direction: column;' : ''}
373
+ align-items: center;
374
+ gap: ${gap}px;
375
+ ${isVertical ? '' : 'white-space: nowrap;'}
376
+ flex-shrink: 0;
377
+ ${isVertical ? 'min-height: 100px;' : ''}
378
+ `;
379
+
380
+ // Créer plusieurs répétitions pour un défilement continu
381
+ const repeatBlock1 = mainBlock.cloneNode(true);
382
+ const repeatBlock2 = mainBlock.cloneNode(true);
383
+ const repeatBlock3 = mainBlock.cloneNode(true);
384
+
385
+ // Assembler la structure
386
+ scrollContainer.appendChild(mainBlock);
387
+ scrollContainer.appendChild(repeatBlock1);
388
+ scrollContainer.appendChild(repeatBlock2);
389
+ scrollContainer.appendChild(repeatBlock3);
371
390
  mainContainer.appendChild(scrollContainer);
391
+
392
+ // Vider et remplacer le contenu original
372
393
  element.innerHTML = '';
373
394
  element.appendChild(mainContainer);
374
395
 
375
396
  // Marquer l'élément comme traité par le module marquee
376
397
  element.setAttribute('data-bb-marquee-processed', 'true');
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);
398
+
399
+ // Fonction pour initialiser l'animation
400
+ const initAnimation = () => {
401
+ // Attendre que le contenu soit dans le DOM
402
+ requestAnimationFrame(() => {
403
+ const contentWidth = mainBlock.offsetWidth;
404
+ const contentHeight = mainBlock.offsetHeight;
405
+
406
+ // Debug
407
+ bbContents.utils.log('Debug - Largeur du contenu:', contentWidth, 'px', 'Hauteur:', contentHeight, 'px', 'Enfants:', mainBlock.children.length, 'Vertical:', isVertical, 'Direction:', direction);
408
+
409
+ // Si pas de contenu, réessayer
410
+ if ((isVertical && contentHeight === 0) || (!isVertical && contentWidth === 0)) {
411
+ bbContents.utils.log('Contenu non prêt, nouvelle tentative dans 200ms');
412
+ setTimeout(initAnimation, 200);
413
+ return;
414
+ }
415
+
416
+ // Pour le vertical, s'assurer qu'on a une hauteur minimale
417
+ if (isVertical && contentHeight < 50) {
418
+ bbContents.utils.log('Hauteur insuffisante pour le marquee vertical (' + contentHeight + 'px), nouvelle tentative dans 200ms');
419
+ setTimeout(initAnimation, 200);
420
+ return;
421
+ }
422
+
423
+ if (isVertical) {
424
+ // Animation JavaScript pour le vertical
425
+ const contentSize = contentHeight;
426
+ const totalSize = contentSize * 4 + parseInt(gap) * 3; // 4 copies au lieu de 3
427
+ scrollContainer.style.height = totalSize + 'px';
428
+
429
+ let currentPosition = direction === 'bottom' ? -contentSize - parseInt(gap) : 0;
430
+ const step = (parseFloat(speed) * 2) / 60; // Vitesse différente
431
+ let isPaused = false;
432
+
433
+ // Fonction d'animation JavaScript
434
+ const animate = () => {
435
+ if (!isPaused) {
436
+ if (direction === 'bottom') {
437
+ currentPosition += step;
438
+ if (currentPosition >= 0) {
439
+ currentPosition = -contentSize - parseInt(gap);
440
+ }
441
+ } else {
442
+ currentPosition -= step;
443
+ if (currentPosition <= -contentSize - parseInt(gap)) {
444
+ currentPosition = 0;
445
+ }
446
+ }
447
+
448
+ scrollContainer.style.transform = `translate3d(0px, ${currentPosition}px, 0px)`;
396
449
  }
450
+ requestAnimationFrame(animate);
451
+ };
452
+
453
+ // Démarrer l'animation
454
+ animate();
455
+
456
+ bbContents.utils.log('Marquee vertical créé avec animation JS - direction:', direction, 'taille:', contentSize + 'px', 'total:', totalSize + 'px', 'hauteur-wrapper:', height + 'px');
457
+
458
+ // Pause au survol
459
+ if (pauseOnHover === 'true') {
460
+ element.addEventListener('mouseenter', function() {
461
+ isPaused = true;
462
+ });
463
+ element.addEventListener('mouseleave', function() {
464
+ isPaused = false;
465
+ });
466
+ }
467
+ } else {
468
+ // Animation CSS pour l'horizontal (modifiée)
469
+ const contentSize = contentWidth;
470
+ const totalSize = contentSize * 4 + parseInt(gap) * 3; // 4 copies au lieu de 3
471
+ scrollContainer.style.width = totalSize + 'px';
472
+
473
+ // Créer l'animation CSS optimisée
474
+ const animationName = 'bb-scroll-' + Math.random().toString(36).substr(2, 9);
475
+ const animationDuration = (totalSize / (parseFloat(speed) * 1.5)).toFixed(2) + 's'; // Vitesse différente
476
+
477
+ // Animation avec translate3d pour hardware acceleration
478
+ let keyframes;
479
+ if (direction === 'right') {
480
+ keyframes = `@keyframes ${animationName} {
481
+ 0% { transform: translate3d(-${contentSize + parseInt(gap)}px, 0px, 0px); }
482
+ 100% { transform: translate3d(0px, 0px, 0px); }
483
+ }`;
397
484
  } else {
398
- currentPosition -= step;
399
- if (currentPosition <= -contentSize - parseInt(gap)) {
400
- currentPosition = 0;
401
- }
485
+ // Direction 'left' par défaut
486
+ keyframes = `@keyframes ${animationName} {
487
+ 0% { transform: translate3d(0px, 0px, 0px); }
488
+ 100% { transform: translate3d(-${contentSize + parseInt(gap)}px, 0px, 0px); }
489
+ }`;
402
490
  }
491
+
492
+ // Ajouter les styles
493
+ const style = document.createElement('style');
494
+ style.textContent = keyframes;
495
+ document.head.appendChild(style);
496
+
497
+ // Appliquer l'animation
498
+ scrollContainer.style.animation = `${animationName} ${animationDuration} linear infinite`;
403
499
 
404
- scrollContainer.style.transform = `translate3d(0px, ${currentPosition}px, 0px)`;
405
- }
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); }
500
+ bbContents.utils.log('Marquee horizontal créé:', animationName, 'durée:', animationDuration + 's', 'direction:', direction, 'taille:', contentSize + 'px', 'total:', totalSize + 'px');
501
+
502
+ // Pause au survol
503
+ if (pauseOnHover === 'true') {
504
+ element.addEventListener('mouseenter', function() {
505
+ scrollContainer.style.animationPlayState = 'paused';
506
+ });
507
+ element.addEventListener('mouseleave', function() {
508
+ scrollContainer.style.animationPlayState = 'running';
509
+ });
510
+ }
437
511
  }
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
- }
452
- }
453
-
454
- // Auto-height pour les logos horizontaux
455
- 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
512
  });
462
- if (maxHeight > 0) {
463
- mainContainer.style.height = maxHeight + 'px';
464
- }
465
- }
513
+ };
514
+
515
+ // Démarrer l'initialisation
516
+ setTimeout(initAnimation, isVertical ? 300 : 100);
466
517
  });
467
-
468
- bbContents.utils.log('Module Marquee (version live) initialisé:', elements.length, 'éléments');
518
+
519
+ bbContents.utils.log('Module Marquee initialisé:', elements.length, 'éléments');
469
520
  }
470
521
  },
471
522
 
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.24-beta",
4
4
  "description": "Contenus additionnels français pour Webflow",
5
5
  "main": "bb-contents.js",
6
6
  "scripts": {