@bebranded/bb-contents 1.0.63-beta → 1.0.65-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 +79 -197
  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.63-beta
4
+ * @version 1.0.65-beta
5
5
  * @author BeBranded
6
6
  * @license MIT
7
7
  * @website https://www.bebranded.xyz
@@ -34,8 +34,8 @@
34
34
 
35
35
  // Configuration
36
36
  const config = {
37
- version: '1.0.63-beta',
38
- debug: false, // Debug désactivé
37
+ version: '1.0.65-beta',
38
+ debug: true, // Debug activé pour diagnostic
39
39
  prefix: 'bb-', // utilisé pour générer les sélecteurs (data-bb-*)
40
40
  youtubeEndpoint: null, // URL du worker YouTube (à définir par l'utilisateur)
41
41
  i18n: {
@@ -246,46 +246,30 @@
246
246
 
247
247
  // Modules
248
248
  bbContents.modules = {
249
- // Module Marquee - Version 1.0.37-beta robuste avec attente window.load et vérification images
249
+ // Module Marquee - Version simplifiée et robuste
250
250
  marquee: {
251
251
  detect: function(scope) {
252
252
  const s = scope || document;
253
253
  return s.querySelector(bbContents._attrSelector('marquee')) !== null;
254
254
  },
255
255
 
256
- // Nouvelle méthode pour vérifier les éléments échoués
257
- checkFailed: function(scope) {
258
- const s = scope || document;
259
- const failedElements = s.querySelectorAll('[bb-marquee]:not([data-bb-marquee-processed])');
260
- return failedElements.length > 0;
261
- },
262
-
263
256
  init: function(root) {
264
257
  const scope = root || document;
265
258
  if (scope.closest && scope.closest('[data-bb-disable]')) return;
266
259
  const elements = scope.querySelectorAll(bbContents._attrSelector('marquee'));
267
260
 
268
- // Initialisation séquentielle de haut en bas - Hero en priorité
269
- let currentIndex = 0;
270
-
271
- const initNextMarquee = () => {
272
- if (currentIndex >= elements.length) {
273
- bbContents.utils.log('Tous les marquees initialisés:', elements.length, 'éléments');
274
- return;
275
- }
276
-
277
- const element = elements[currentIndex];
278
- currentIndex++;
279
-
280
- // Vérifier si l'élément a déjà été traité par un autre module
281
- if (element.bbProcessed || element.hasAttribute('data-bb-youtube-processed')) {
282
- bbContents.utils.log('Élément marquee déjà traité par un autre module, ignoré:', element);
283
- // Passer au suivant immédiatement
284
- setTimeout(initNextMarquee, 0);
261
+ console.log('🔍 [MARQUEE] Éléments trouvés:', elements.length);
262
+
263
+ // Traitement simple et parallèle de tous les marquees
264
+ elements.forEach((element, index) => {
265
+ // Éviter le double traitement
266
+ if (element.bbProcessed || element.hasAttribute('data-bb-marquee-processed')) {
285
267
  return;
286
268
  }
287
269
  element.bbProcessed = true;
288
270
 
271
+ console.log(`🔍 [MARQUEE] Initialisation ${index + 1}/${elements.length}`);
272
+
289
273
  // Récupérer les options
290
274
  const speed = bbContents._getAttr(element, 'bb-marquee-speed') || '100';
291
275
  const direction = bbContents._getAttr(element, 'bb-marquee-direction') || 'left';
@@ -298,7 +282,7 @@
298
282
  // Sauvegarder le contenu original
299
283
  const originalHTML = element.innerHTML;
300
284
 
301
- // Créer le conteneur principal
285
+ // Créer la structure simple
302
286
  const mainContainer = document.createElement('div');
303
287
  const isVertical = orientation === 'vertical';
304
288
  const useAutoHeight = isVertical && height === 'auto';
@@ -312,7 +296,6 @@
312
296
  ${minHeight ? `min-height: ${minHeight};` : ''}
313
297
  `;
314
298
 
315
- // Créer le conteneur de défilement
316
299
  const scrollContainer = document.createElement('div');
317
300
  scrollContainer.style.cssText = `
318
301
  ${useAutoHeight ? 'position: relative;' : 'position: absolute;'}
@@ -326,7 +309,6 @@
326
309
  flex-shrink: 0;
327
310
  `;
328
311
 
329
- // Créer le bloc de contenu principal
330
312
  const mainBlock = document.createElement('div');
331
313
  mainBlock.innerHTML = originalHTML;
332
314
  mainBlock.style.cssText = `
@@ -339,188 +321,88 @@
339
321
  ${isVertical ? 'min-height: 100px;' : ''}
340
322
  `;
341
323
 
342
- // Créer plusieurs répétitions pour un défilement continu
324
+ // Créer 3 copies pour le défilement infini
343
325
  const repeatBlock1 = mainBlock.cloneNode(true);
344
326
  const repeatBlock2 = mainBlock.cloneNode(true);
345
- const repeatBlock3 = mainBlock.cloneNode(true);
346
327
 
347
- // Assembler la structure
348
328
  scrollContainer.appendChild(mainBlock);
349
329
  scrollContainer.appendChild(repeatBlock1);
350
330
  scrollContainer.appendChild(repeatBlock2);
351
- scrollContainer.appendChild(repeatBlock3);
352
331
  mainContainer.appendChild(scrollContainer);
353
332
 
354
- // Vider et remplacer le contenu original
355
333
  element.innerHTML = '';
356
334
  element.appendChild(mainContainer);
357
-
358
- // Marquer l'élément comme traité par le module marquee
359
335
  element.setAttribute('data-bb-marquee-processed', 'true');
360
336
 
361
- // Fonction pour initialiser l'animation avec retry amélioré - Version 1.0.37-beta robuste
362
- const initAnimation = (retryCount = 0) => {
363
- // Attendre que le contenu soit dans le DOM
364
- requestAnimationFrame(() => {
365
- const contentWidth = mainBlock.offsetWidth;
366
- const contentHeight = mainBlock.offsetHeight;
367
-
368
- // Debug amélioré
369
- bbContents.utils.log('Debug - Largeur du contenu:', contentWidth, 'px', 'Hauteur:', contentHeight, 'px', 'Enfants:', mainBlock.children.length, 'Vertical:', isVertical, 'Direction:', direction, 'Tentative:', retryCount + 1);
370
-
371
- // Vérifier que les images sont chargées
372
- const images = mainBlock.querySelectorAll('img');
373
- const imagesLoaded = Array.from(images).every(img => img.complete && img.naturalHeight > 0);
374
-
375
- // Si pas de contenu, réessayer avec délai progressif
376
- if ((isVertical && contentHeight === 0) || (!isVertical && contentWidth === 0)) {
377
- if (retryCount < 8) { // Plus de tentatives
378
- bbContents.utils.log('Contenu non prêt, nouvelle tentative dans', (200 + retryCount * 100), 'ms');
379
- setTimeout(() => initAnimation(retryCount + 1), 200 + retryCount * 100);
380
- return;
381
- } else {
382
- bbContents.utils.log('Échec d\'initialisation après 8 tentatives');
383
- return;
384
- }
385
- }
386
-
387
- // Pour le vertical, s'assurer qu'on a une hauteur minimale
388
- if (isVertical && contentHeight < 50) {
389
- if (retryCount < 8) { // Plus de tentatives
390
- bbContents.utils.log('Hauteur insuffisante pour le marquee vertical (' + contentHeight + 'px), nouvelle tentative dans', (200 + retryCount * 100), 'ms');
391
- setTimeout(() => initAnimation(retryCount + 1), 200 + retryCount * 100);
392
- return;
393
- } else {
394
- bbContents.utils.log('Échec d\'initialisation - hauteur insuffisante après 8 tentatives');
395
- return;
396
- }
337
+ // Initialisation simple avec délai fixe
338
+ const initDelay = isVertical ? 500 : 300;
339
+ setTimeout(() => {
340
+ this.initAnimation(element, scrollContainer, mainBlock, {
341
+ speed, direction, pauseOnHover, gap, isVertical, useAutoHeight
342
+ });
343
+ }, initDelay);
344
+ });
345
+ },
346
+
347
+ initAnimation: function(element, scrollContainer, mainBlock, options) {
348
+ const { speed, direction, pauseOnHover, gap, isVertical, useAutoHeight } = options;
349
+
350
+ // Calculer les dimensions
351
+ const contentSize = isVertical ? mainBlock.offsetHeight : mainBlock.offsetWidth;
352
+
353
+ console.log(`🔍 [MARQUEE] Animation démarrée - contentSize: ${contentSize}px, isVertical: ${isVertical}`);
354
+
355
+ if (contentSize === 0) {
356
+ console.log('⚠️ [MARQUEE] Contenu vide, retry dans 200ms');
357
+ setTimeout(() => this.initAnimation(element, scrollContainer, mainBlock, options), 200);
358
+ return;
359
+ }
360
+
361
+ // Configuration de l'animation
362
+ const totalSize = contentSize * 3 + parseInt(gap) * 2;
363
+ let currentPosition = direction === (isVertical ? 'bottom' : 'right') ? -contentSize - parseInt(gap) : 0;
364
+ const step = (parseFloat(speed) * (isVertical ? 1.5 : 0.8)) / 60;
365
+ let isPaused = false;
366
+
367
+ // Ajuster la taille du conteneur
368
+ if (isVertical && !useAutoHeight) {
369
+ scrollContainer.style.height = totalSize + 'px';
370
+ } else if (!isVertical) {
371
+ scrollContainer.style.width = totalSize + 'px';
372
+ }
373
+
374
+ // Fonction d'animation
375
+ const animate = () => {
376
+ if (!isPaused) {
377
+ if (direction === (isVertical ? 'bottom' : 'right')) {
378
+ currentPosition += step;
379
+ if (currentPosition >= 0) {
380
+ currentPosition = -contentSize - parseInt(gap);
397
381
  }
398
-
399
- // Vérifier que les images sont chargées
400
- if (!imagesLoaded && images.length > 0) {
401
- if (retryCount < 8) { // Plus de tentatives
402
- bbContents.utils.log('Images non chargées, nouvelle tentative dans', (200 + retryCount * 100), 'ms');
403
- setTimeout(() => initAnimation(retryCount + 1), 200 + retryCount * 100);
404
- return;
405
- } else {
406
- bbContents.utils.log('Échec d\'initialisation - images non chargées après 8 tentatives');
407
- return;
408
- }
382
+ } else {
383
+ currentPosition -= step;
384
+ if (currentPosition <= -contentSize - parseInt(gap)) {
385
+ currentPosition = 0;
409
386
  }
387
+ }
410
388
 
411
- if (isVertical) {
412
- // Animation JavaScript pour le vertical
413
- const contentSize = contentHeight;
414
- const totalSize = contentSize * 4 + parseInt(gap) * 3; // 4 copies au lieu de 3
415
-
416
- // Ajuster la hauteur du scrollContainer seulement si pas en mode auto
417
- if (!useAutoHeight) {
418
- scrollContainer.style.height = totalSize + 'px';
419
- }
420
-
421
- let currentPosition = direction === 'bottom' ? -contentSize - parseInt(gap) : 0;
422
- const step = (parseFloat(speed) * 2) / 60; // Vitesse différente
423
- let isPaused = false;
424
-
425
- // Fonction d'animation JavaScript
426
- const animate = () => {
427
- if (!isPaused) {
428
- if (direction === 'bottom') {
429
- currentPosition += step;
430
- if (currentPosition >= 0) {
431
- currentPosition = -contentSize - parseInt(gap);
432
- }
433
- } else {
434
- currentPosition -= step;
435
- if (currentPosition <= -contentSize - parseInt(gap)) {
436
- currentPosition = 0;
437
- }
438
- }
439
-
440
- scrollContainer.style.transform = `translate3d(0px, ${currentPosition}px, 0px)`;
441
- }
442
- requestAnimationFrame(animate);
443
- };
444
-
445
- // Démarrer l'animation
446
- animate();
447
-
448
- bbContents.utils.log('Marquee vertical créé avec animation JS - direction:', direction, 'taille:', contentSize + 'px', 'total:', totalSize + 'px', 'hauteur-wrapper:', height + 'px');
449
-
450
- // Pause au survol
451
- if (pauseOnHover === 'true') {
452
- element.addEventListener('mouseenter', function() {
453
- isPaused = true;
454
- });
455
- element.addEventListener('mouseleave', function() {
456
- isPaused = false;
457
- });
458
- }
459
-
460
- // Marquee vertical créé avec animation JS
461
- } else {
462
- // Animation JavaScript pour l'horizontal (comme le vertical pour éviter les saccades)
463
- const contentSize = contentWidth;
464
- const totalSize = contentSize * 4 + parseInt(gap) * 3;
465
- scrollContainer.style.width = totalSize + 'px';
466
-
467
- let currentPosition = direction === 'right' ? -contentSize - parseInt(gap) : 0;
468
- const step = (parseFloat(speed) * 0.5) / 60; // Vitesse réduite pour l'horizontal
469
- let isPaused = false;
470
-
471
- // Fonction d'animation JavaScript
472
- const animate = () => {
473
- if (!isPaused) {
474
- if (direction === 'right') {
475
- currentPosition += step;
476
- if (currentPosition >= 0) {
477
- currentPosition = -contentSize - parseInt(gap);
478
- }
479
- } else {
480
- currentPosition -= step;
481
- if (currentPosition <= -contentSize - parseInt(gap)) {
482
- currentPosition = 0;
483
- }
484
- }
485
-
486
- scrollContainer.style.transform = `translate3d(${currentPosition}px, 0px, 0px)`;
487
- }
488
- requestAnimationFrame(animate);
489
- };
490
-
491
- // Démarrer l'animation
492
- animate();
493
-
494
- bbContents.utils.log('Marquee horizontal créé avec animation JS - direction:', direction, 'taille:', contentSize + 'px', 'total:', totalSize + 'px');
495
-
496
- // Pause au survol
497
- if (pauseOnHover === 'true') {
498
- element.addEventListener('mouseenter', function() {
499
- isPaused = true;
500
- });
501
- element.addEventListener('mouseleave', function() {
502
- isPaused = false;
503
- });
504
- }
505
-
506
- // Marquee horizontal créé avec animation JS
507
- }
508
- });
509
- };
510
-
511
- // Démarrer l'initialisation avec délai adaptatif - Initialisation séquentielle
512
- const baseDelay = isVertical ? 800 : 400; // Délais fixes selon le type
513
-
514
- bbContents.utils.log(`Marquee ${currentIndex} (${isVertical ? 'vertical' : 'horizontal'}) initialisé dans ${baseDelay}ms`);
515
- setTimeout(() => {
516
- initAnimation(0);
517
- // Après initialisation, passer au marquee suivant
518
- setTimeout(initNextMarquee, 100); // Petit délai entre les marquees
519
- }, baseDelay);
389
+ const transform = isVertical
390
+ ? `translate3d(0px, ${currentPosition}px, 0px)`
391
+ : `translate3d(${currentPosition}px, 0px, 0px)`;
392
+ scrollContainer.style.transform = transform;
393
+ }
394
+ requestAnimationFrame(animate);
520
395
  };
521
-
522
- // Démarrer l'initialisation séquentielle
523
- initNextMarquee();
396
+
397
+ // Démarrer l'animation
398
+ animate();
399
+ console.log('✅ [MARQUEE] Animation démarrée avec succès');
400
+
401
+ // Pause au survol
402
+ if (pauseOnHover === 'true') {
403
+ element.addEventListener('mouseenter', () => isPaused = true);
404
+ element.addEventListener('mouseleave', () => isPaused = false);
405
+ }
524
406
  }
525
407
  },
526
408
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bebranded/bb-contents",
3
- "version": "1.0.63-beta",
3
+ "version": "1.0.65-beta",
4
4
  "description": "Contenus additionnels français pour Webflow",
5
5
  "main": "bb-contents.js",
6
6
  "scripts": {