@bebranded/bb-contents 1.0.23-beta → 1.0.25-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 +156 -109
  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.23-beta
4
+ * @version 1.0.25-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.23-beta',
20
+ version: '1.0.25-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,113 +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
- // 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
- }
403
- }
404
-
405
- scrollContainer.style.transform = `translate3d(0px, ${currentPosition}px, 0px)`;
406
- }
407
- requestAnimationFrame(animate);
408
- };
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;
409
405
 
410
- animate();
406
+ // Debug
407
+ bbContents.utils.log('Debug - Largeur du contenu:', contentWidth, 'px', 'Hauteur:', contentHeight, 'px', 'Enfants:', mainBlock.children.length, 'Vertical:', isVertical, 'Direction:', direction);
411
408
 
412
- // Pause au survol
413
- if (pauseOnHover === 'true') {
414
- mainContainer.addEventListener('mouseenter', () => {
415
- isPaused = true;
416
- });
417
- mainContainer.addEventListener('mouseleave', () => {
418
- isPaused = false;
419
- });
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;
420
414
  }
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
415
 
428
- // Calcul de la durée exacte comme la version live
429
- const animationDuration = (totalSize / (parseFloat(speed) * 1.5)).toFixed(2) + 's';
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
+ }
430
422
 
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); }
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)`;
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 JavaScript pour l'horizontal (comme le vertical pour éviter les saccades)
469
+ const contentSize = contentWidth;
470
+ const totalSize = contentSize * 4 + parseInt(gap) * 3;
471
+ scrollContainer.style.width = totalSize + 'px';
472
+
473
+ let currentPosition = direction === 'right' ? -contentSize - parseInt(gap) : 0;
474
+ const step = (parseFloat(speed) * 2) / 60; // Même logique que le vertical
475
+ let isPaused = false;
476
+
477
+ // Fonction d'animation JavaScript
478
+ const animate = () => {
479
+ if (!isPaused) {
480
+ if (direction === 'right') {
481
+ currentPosition += step;
482
+ if (currentPosition >= 0) {
483
+ currentPosition = -contentSize - parseInt(gap);
484
+ }
485
+ } else {
486
+ currentPosition -= step;
487
+ if (currentPosition <= -contentSize - parseInt(gap)) {
488
+ currentPosition = 0;
489
+ }
490
+ }
491
+
492
+ scrollContainer.style.transform = `translate3d(${currentPosition}px, 0px, 0px)`;
493
+ }
494
+ requestAnimationFrame(animate);
495
+ };
496
+
497
+ // Démarrer l'animation
498
+ animate();
499
+
500
+ bbContents.utils.log('Marquee horizontal créé avec animation JS - direction:', direction, 'taille:', contentSize + 'px', 'total:', totalSize + 'px');
501
+
502
+ // Pause au survol
503
+ if (pauseOnHover === 'true') {
504
+ element.addEventListener('mouseenter', function() {
505
+ isPaused = true;
506
+ });
507
+ element.addEventListener('mouseleave', function() {
508
+ isPaused = false;
509
+ });
438
510
  }
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
- });
452
511
  }
453
- }
454
- }, 100);
512
+ });
513
+ };
455
514
 
456
- // Auto-height pour les logos horizontaux (amélioré)
457
- if (orientation === 'horizontal' && !height && !minHeight) {
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);
469
- }
515
+ // Démarrer l'initialisation
516
+ setTimeout(initAnimation, isVertical ? 300 : 100);
470
517
  });
471
-
472
- bbContents.utils.log('Module Marquee (version live) initialisé:', elements.length, 'éléments');
518
+
519
+ bbContents.utils.log('Module Marquee initialisé:', elements.length, 'éléments');
473
520
  }
474
521
  },
475
522
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bebranded/bb-contents",
3
- "version": "1.0.23-beta",
3
+ "version": "1.0.25-beta",
4
4
  "description": "Contenus additionnels français pour Webflow",
5
5
  "main": "bb-contents.js",
6
6
  "scripts": {