@bebranded/bb-contents 1.0.20-beta → 1.0.22-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 +93 -57
  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.20-beta
4
+ * @version 1.0.22-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.20-beta',
20
+ version: '1.0.22-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,95 +324,131 @@
324
324
  }
325
325
  element.bbProcessed = true;
326
326
 
327
- // Récupérer les options
327
+ // Récupérer les options (comme la version live)
328
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;
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';
381
385
 
382
- // Vitesse en millisecondes
383
- const speedMs = parseInt(speed);
384
- const progress = (elapsed % speedMs) / speedMs;
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;
385
389
 
386
- // Calculer la taille du contenu
387
- const contentSize = isVertical ? scrollContainer.scrollHeight / 2 : scrollContainer.scrollWidth / 2;
388
- currentPosition = -progress * contentSize;
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;
401
+ }
402
+ }
403
+
404
+ scrollContainer.style.transform = `translate3d(0px, ${currentPosition}px, 0px)`;
405
+ }
406
+ requestAnimationFrame(animate);
407
+ };
389
408
 
390
- // Appliquer la transformation
391
- scrollContainer.style.transform = isVertical
392
- ? `translateY(${currentPosition}px)`
393
- : `translateX(${currentPosition}px)`;
409
+ animate();
394
410
 
395
- animationId = requestAnimationFrame(animate);
396
- };
397
-
398
- // Démarrer l'animation
399
- setTimeout(() => {
400
- animationId = requestAnimationFrame(animate);
401
- }, 100);
402
-
403
- // Pause au survol
404
- if (pause === 'true') {
405
- mainContainer.addEventListener('mouseenter', () => {
406
- if (animationId) {
407
- cancelAnimationFrame(animationId);
408
- animationId = null;
409
- }
410
- });
411
- mainContainer.addEventListener('mouseleave', () => {
412
- if (!animationId) {
413
- animationId = requestAnimationFrame(animate);
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); }
414
437
  }
415
- });
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
+ }
416
452
  }
417
453
 
418
454
  // Auto-height pour les logos horizontaux
@@ -429,7 +465,7 @@
429
465
  }
430
466
  });
431
467
 
432
- bbContents.utils.log('Module Marquee initialisé:', elements.length, 'éléments');
468
+ bbContents.utils.log('Module Marquee (version live) initialisé:', elements.length, 'éléments');
433
469
  }
434
470
  },
435
471
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bebranded/bb-contents",
3
- "version": "1.0.20-beta",
3
+ "version": "1.0.22-beta",
4
4
  "description": "Contenus additionnels français pour Webflow",
5
5
  "main": "bb-contents.js",
6
6
  "scripts": {