@bebranded/bb-contents 1.0.21-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 +111 -74
  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.21-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.21-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: {
@@ -304,7 +304,7 @@
304
304
  }
305
305
  },
306
306
 
307
- // Module Marquee - Version simplifiée et corrigée
307
+ // Module Marquee - Reproduction exacte de la version live
308
308
  marquee: {
309
309
  detect: function(scope) {
310
310
  return scope.querySelector('[bb-marquee]') !== null;
@@ -324,115 +324,152 @@
324
324
  }
325
325
  element.bbProcessed = true;
326
326
 
327
- // Récupérer les options
328
- const speed = bbContents._getAttr(element, 'bb-marquee-speed') || '3000';
327
+ // Récupérer les options (comme la version live)
328
+ const speed = bbContents._getAttr(element, 'bb-marquee-speed') || '100';
329
329
  const direction = bbContents._getAttr(element, 'bb-marquee-direction') || 'left';
330
- const pause = bbContents._getAttr(element, 'bb-marquee-pause') || 'true';
330
+ const pauseOnHover = bbContents._getAttr(element, 'bb-marquee-pause') || 'true';
331
331
  const gap = bbContents._getAttr(element, 'bb-marquee-gap') || '50';
332
332
  const orientation = bbContents._getAttr(element, 'bb-marquee-orientation') || 'horizontal';
333
- const height = bbContents._getAttr(element, 'bb-marquee-height');
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
- const originalContent = element.innerHTML;
337
+ const originalHTML = element.innerHTML;
338
338
 
339
- // Créer le conteneur principal
339
+ // Créer le conteneur principal (comme la version live)
340
340
  const mainContainer = document.createElement('div');
341
+ const isVertical = orientation === 'vertical';
341
342
  mainContainer.style.cssText = `
342
- overflow: hidden;
343
343
  position: relative;
344
344
  width: 100%;
345
- ${height ? `height: ${height};` : ''}
345
+ height: ${isVertical ? height + 'px' : 'auto'};
346
+ overflow: hidden;
347
+ min-height: ${isVertical ? '100px' : '50px'};
346
348
  ${minHeight ? `min-height: ${minHeight};` : ''}
347
349
  `;
348
350
 
349
- // Créer le conteneur de défilement
351
+ // Créer le conteneur de défilement (comme la version live)
350
352
  const scrollContainer = document.createElement('div');
351
353
  scrollContainer.style.cssText = `
354
+ position: absolute;
355
+ will-change: transform;
356
+ height: 100%;
357
+ top: 0px;
358
+ left: 0px;
352
359
  display: flex;
360
+ ${isVertical ? 'flex-direction: column;' : ''}
353
361
  align-items: center;
354
- ${orientation === 'vertical' ? 'flex-direction: column;' : ''}
355
362
  gap: ${gap}px;
356
- will-change: transform;
363
+ ${isVertical ? '' : 'white-space: nowrap;'}
364
+ flex-shrink: 0;
357
365
  `;
358
366
 
359
- // Dupliquer le contenu
360
- scrollContainer.innerHTML = originalContent + originalContent;
367
+ // Dupliquer le contenu (4 copies comme la version live)
368
+ scrollContainer.innerHTML = originalHTML + originalHTML + originalHTML + originalHTML;
361
369
 
362
370
  // Assembler
363
371
  mainContainer.appendChild(scrollContainer);
364
- // Sauvegarder le contenu original avant de vider
365
- const originalMarqueeContent = element.innerHTML;
366
372
  element.innerHTML = '';
367
373
  element.appendChild(mainContainer);
368
374
 
369
375
  // Marquer l'élément comme traité par le module marquee
370
376
  element.setAttribute('data-bb-marquee-processed', 'true');
371
377
 
372
- // Animation JavaScript simple et efficace
373
- const isVertical = orientation === 'vertical';
374
- let animationId;
375
- let startTime;
376
- let currentPosition = 0;
377
-
378
- const animate = (timestamp) => {
379
- if (!startTime) startTime = timestamp;
380
- const elapsed = timestamp - startTime;
381
-
382
- // Vitesse en millisecondes (plus lente pour une transition fluide)
383
- const speedMs = parseInt(speed);
384
- const progress = (elapsed % speedMs) / speedMs;
385
-
386
- // Calculer la taille du contenu avec une transition plus douce
387
- const contentSize = isVertical ? scrollContainer.scrollHeight / 2 : scrollContainer.scrollWidth / 2;
388
- currentPosition = -progress * contentSize;
389
-
390
- // Appliquer une transition CSS pour plus de fluidité
391
- scrollContainer.style.transition = 'transform 0.1s ease-out';
392
-
393
- // Appliquer la transformation
394
- scrollContainer.style.transform = isVertical
395
- ? `translateY(${currentPosition}px)`
396
- : `translateX(${currentPosition}px)`;
397
-
398
- animationId = requestAnimationFrame(animate);
399
- };
400
-
401
- // Démarrer l'animation avec un délai pour laisser le DOM se stabiliser
378
+ // Démarrer l'animation après un délai pour laisser le DOM se stabiliser
402
379
  setTimeout(() => {
403
- animationId = requestAnimationFrame(animate);
404
- }, 200);
405
-
406
- // Pause au survol
407
- if (pause === 'true') {
408
- mainContainer.addEventListener('mouseenter', () => {
409
- if (animationId) {
410
- cancelAnimationFrame(animationId);
411
- animationId = null;
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
+ };
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
+ });
412
420
  }
413
- });
414
- mainContainer.addEventListener('mouseleave', () => {
415
- if (!animationId) {
416
- animationId = requestAnimationFrame(animate);
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
+ });
417
452
  }
418
- });
419
- }
453
+ }
454
+ }, 100);
420
455
 
421
- // Auto-height pour les logos horizontaux
456
+ // Auto-height pour les logos horizontaux (amélioré)
422
457
  if (orientation === 'horizontal' && !height && !minHeight) {
423
- const logos = element.querySelectorAll('.bb-marquee_logo, img, svg');
424
- let maxHeight = 0;
425
- logos.forEach(logo => {
426
- const rect = logo.getBoundingClientRect();
427
- if (rect.height > maxHeight) maxHeight = rect.height;
428
- });
429
- if (maxHeight > 0) {
430
- mainContainer.style.height = maxHeight + 'px';
431
- }
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);
432
469
  }
433
470
  });
434
471
 
435
- bbContents.utils.log('Module Marquee initialisé:', elements.length, 'éléments');
472
+ bbContents.utils.log('Module Marquee (version live) initialisé:', elements.length, 'éléments');
436
473
  }
437
474
  },
438
475
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bebranded/bb-contents",
3
- "version": "1.0.21-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": {