@bebranded/bb-contents 1.0.64-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 +77 -239
  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.64-beta
4
+ * @version 1.0.65-beta
5
5
  * @author BeBranded
6
6
  * @license MIT
7
7
  * @website https://www.bebranded.xyz
@@ -34,7 +34,7 @@
34
34
 
35
35
  // Configuration
36
36
  const config = {
37
- version: '1.0.64-beta',
37
+ version: '1.0.65-beta',
38
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)
@@ -246,55 +246,29 @@
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
- console.log('🔍 [DEBUG MARQUEE] DÉBUT INITIALISATION');
269
- console.log('🔍 [DEBUG MARQUEE] Éléments trouvés:', elements.length);
270
- console.log('🔍 [DEBUG MARQUEE] Éléments:', elements);
261
+ console.log('🔍 [MARQUEE] Éléments trouvés:', elements.length);
271
262
 
272
- // Initialisation séquentielle de haut en bas - Hero en priorité
273
- let currentIndex = 0;
274
-
275
- const initNextMarquee = () => {
276
- console.log(`🔍 [DEBUG MARQUEE] initNextMarquee appelé - currentIndex: ${currentIndex}/${elements.length}`);
277
-
278
- if (currentIndex >= elements.length) {
279
- console.log('✅ [DEBUG MARQUEE] TOUS LES MARQUEES INITIALISÉS:', elements.length, 'éléments');
280
- return;
281
- }
282
-
283
- const element = elements[currentIndex];
284
- console.log(`🔍 [DEBUG MARQUEE] Traitement marquee ${currentIndex + 1}:`, element);
285
- console.log(`🔍 [DEBUG MARQUEE] bbProcessed:`, element.bbProcessed);
286
- console.log(`🔍 [DEBUG MARQUEE] data-bb-youtube-processed:`, element.hasAttribute('data-bb-youtube-processed'));
287
- currentIndex++;
288
-
289
- // Vérifier si l'élément a déjà été traité par un autre module
290
- if (element.bbProcessed || element.hasAttribute('data-bb-youtube-processed')) {
291
- console.log('⚠️ [DEBUG MARQUEE] Élément déjà traité, passage au suivant');
292
- // Passer au suivant immédiatement
293
- setTimeout(initNextMarquee, 0);
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')) {
294
267
  return;
295
268
  }
296
269
  element.bbProcessed = true;
297
- console.log('✅ [DEBUG MARQUEE] Élément marqué comme traité');
270
+
271
+ console.log(`🔍 [MARQUEE] Initialisation ${index + 1}/${elements.length}`);
298
272
 
299
273
  // Récupérer les options
300
274
  const speed = bbContents._getAttr(element, 'bb-marquee-speed') || '100';
@@ -304,15 +278,11 @@
304
278
  const orientation = bbContents._getAttr(element, 'bb-marquee-orientation') || 'horizontal';
305
279
  const height = bbContents._getAttr(element, 'bb-marquee-height') || '300';
306
280
  const minHeight = bbContents._getAttr(element, 'bb-marquee-min-height');
307
-
308
- console.log(`🔍 [DEBUG MARQUEE] Options récupérées:`, {
309
- speed, direction, pauseOnHover, gap, orientation, height, minHeight
310
- });
311
281
 
312
282
  // Sauvegarder le contenu original
313
283
  const originalHTML = element.innerHTML;
314
284
 
315
- // Créer le conteneur principal
285
+ // Créer la structure simple
316
286
  const mainContainer = document.createElement('div');
317
287
  const isVertical = orientation === 'vertical';
318
288
  const useAutoHeight = isVertical && height === 'auto';
@@ -326,7 +296,6 @@
326
296
  ${minHeight ? `min-height: ${minHeight};` : ''}
327
297
  `;
328
298
 
329
- // Créer le conteneur de défilement
330
299
  const scrollContainer = document.createElement('div');
331
300
  scrollContainer.style.cssText = `
332
301
  ${useAutoHeight ? 'position: relative;' : 'position: absolute;'}
@@ -340,7 +309,6 @@
340
309
  flex-shrink: 0;
341
310
  `;
342
311
 
343
- // Créer le bloc de contenu principal
344
312
  const mainBlock = document.createElement('div');
345
313
  mainBlock.innerHTML = originalHTML;
346
314
  mainBlock.style.cssText = `
@@ -353,218 +321,88 @@
353
321
  ${isVertical ? 'min-height: 100px;' : ''}
354
322
  `;
355
323
 
356
- // Créer plusieurs répétitions pour un défilement continu
324
+ // Créer 3 copies pour le défilement infini
357
325
  const repeatBlock1 = mainBlock.cloneNode(true);
358
326
  const repeatBlock2 = mainBlock.cloneNode(true);
359
- const repeatBlock3 = mainBlock.cloneNode(true);
360
327
 
361
- // Assembler la structure
362
328
  scrollContainer.appendChild(mainBlock);
363
329
  scrollContainer.appendChild(repeatBlock1);
364
330
  scrollContainer.appendChild(repeatBlock2);
365
- scrollContainer.appendChild(repeatBlock3);
366
331
  mainContainer.appendChild(scrollContainer);
367
332
 
368
- // Vider et remplacer le contenu original
369
333
  element.innerHTML = '';
370
334
  element.appendChild(mainContainer);
371
-
372
- // Marquer l'élément comme traité par le module marquee
373
335
  element.setAttribute('data-bb-marquee-processed', 'true');
374
336
 
375
- // Fonction pour initialiser l'animation avec retry amélioré - Version 1.0.37-beta robuste
376
- const initAnimation = (retryCount = 0) => {
377
- console.log(`🔍 [DEBUG MARQUEE] initAnimation appelé - retryCount: ${retryCount}`);
378
- // Attendre que le contenu soit dans le DOM
379
- requestAnimationFrame(() => {
380
- const contentWidth = mainBlock.offsetWidth;
381
- const contentHeight = mainBlock.offsetHeight;
382
-
383
- console.log(`🔍 [DEBUG MARQUEE] Dimensions calculées:`, {
384
- contentWidth, contentHeight,
385
- children: mainBlock.children.length,
386
- isVertical, direction,
387
- retryCount: retryCount + 1
388
- });
389
-
390
- // Vérifier que les images sont chargées
391
- const images = mainBlock.querySelectorAll('img');
392
- const imagesLoaded = Array.from(images).every(img => img.complete && img.naturalHeight > 0);
393
-
394
- console.log(`🔍 [DEBUG MARQUEE] Images:`, {
395
- total: images.length,
396
- loaded: imagesLoaded,
397
- images: Array.from(images).map(img => ({
398
- complete: img.complete,
399
- naturalHeight: img.naturalHeight,
400
- src: img.src
401
- }))
402
- });
403
-
404
- // Si pas de contenu, réessayer avec délai progressif
405
- if ((isVertical && contentHeight === 0) || (!isVertical && contentWidth === 0)) {
406
- if (retryCount < 8) { // Plus de tentatives
407
- console.log(`⚠️ [DEBUG MARQUEE] Contenu non prêt, retry ${retryCount + 1}/8 dans ${200 + retryCount * 100}ms`);
408
- setTimeout(() => initAnimation(retryCount + 1), 200 + retryCount * 100);
409
- return;
410
- } else {
411
- console.log('❌ [DEBUG MARQUEE] Échec d\'initialisation après 8 tentatives');
412
- return;
413
- }
414
- }
415
-
416
- // Pour le vertical, s'assurer qu'on a une hauteur minimale
417
- if (isVertical && contentHeight < 50) {
418
- if (retryCount < 8) { // Plus de tentatives
419
- console.log(`⚠️ [DEBUG MARQUEE] Hauteur insuffisante (${contentHeight}px), retry ${retryCount + 1}/8`);
420
- setTimeout(() => initAnimation(retryCount + 1), 200 + retryCount * 100);
421
- return;
422
- } else {
423
- console.log('❌ [DEBUG MARQUEE] Échec - hauteur insuffisante après 8 tentatives');
424
- return;
425
- }
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);
426
381
  }
427
-
428
- // Vérifier que les images sont chargées
429
- if (!imagesLoaded && images.length > 0) {
430
- if (retryCount < 8) { // Plus de tentatives
431
- console.log(`⚠️ [DEBUG MARQUEE] Images non chargées, retry ${retryCount + 1}/8`);
432
- setTimeout(() => initAnimation(retryCount + 1), 200 + retryCount * 100);
433
- return;
434
- } else {
435
- console.log('❌ [DEBUG MARQUEE] Échec - images non chargées après 8 tentatives');
436
- return;
437
- }
382
+ } else {
383
+ currentPosition -= step;
384
+ if (currentPosition <= -contentSize - parseInt(gap)) {
385
+ currentPosition = 0;
438
386
  }
387
+ }
439
388
 
440
- if (isVertical) {
441
- console.log('✅ [DEBUG MARQUEE] INITIALISATION VERTICALE');
442
- // Animation JavaScript pour le vertical
443
- const contentSize = contentHeight;
444
- const totalSize = contentSize * 4 + parseInt(gap) * 3; // 4 copies au lieu de 3
445
-
446
- console.log(`🔍 [DEBUG MARQUEE] Vertical - contentSize: ${contentSize}px, totalSize: ${totalSize}px`);
447
-
448
- // Ajuster la hauteur du scrollContainer seulement si pas en mode auto
449
- if (!useAutoHeight) {
450
- scrollContainer.style.height = totalSize + 'px';
451
- }
452
-
453
- let currentPosition = direction === 'bottom' ? -contentSize - parseInt(gap) : 0;
454
- const step = (parseFloat(speed) * 2) / 60; // Vitesse différente
455
- let isPaused = false;
456
-
457
- console.log(`🔍 [DEBUG MARQUEE] Vertical - currentPosition: ${currentPosition}, step: ${step}, direction: ${direction}`);
458
-
459
- // Fonction d'animation JavaScript
460
- const animate = () => {
461
- if (!isPaused) {
462
- if (direction === 'bottom') {
463
- currentPosition += step;
464
- if (currentPosition >= 0) {
465
- currentPosition = -contentSize - parseInt(gap);
466
- }
467
- } else {
468
- currentPosition -= step;
469
- if (currentPosition <= -contentSize - parseInt(gap)) {
470
- currentPosition = 0;
471
- }
472
- }
473
-
474
- scrollContainer.style.transform = `translate3d(0px, ${currentPosition}px, 0px)`;
475
- }
476
- requestAnimationFrame(animate);
477
- };
478
-
479
- // Démarrer l'animation
480
- animate();
481
-
482
- console.log('✅ [DEBUG MARQUEE] Marquee vertical créé avec animation JS');
483
-
484
- // Pause au survol
485
- if (pauseOnHover === 'true') {
486
- element.addEventListener('mouseenter', function() {
487
- isPaused = true;
488
- });
489
- element.addEventListener('mouseleave', function() {
490
- isPaused = false;
491
- });
492
- }
493
-
494
- // Marquee vertical créé avec animation JS
495
- } else {
496
- console.log('✅ [DEBUG MARQUEE] INITIALISATION HORIZONTALE');
497
- // Animation JavaScript pour l'horizontal (comme le vertical pour éviter les saccades)
498
- const contentSize = contentWidth;
499
- const totalSize = contentSize * 4 + parseInt(gap) * 3;
500
- scrollContainer.style.width = totalSize + 'px';
501
-
502
- console.log(`🔍 [DEBUG MARQUEE] Horizontal - contentSize: ${contentSize}px, totalSize: ${totalSize}px`);
503
-
504
- let currentPosition = direction === 'right' ? -contentSize - parseInt(gap) : 0;
505
- const step = (parseFloat(speed) * 0.5) / 60; // Vitesse réduite pour l'horizontal
506
- let isPaused = false;
507
-
508
- console.log(`🔍 [DEBUG MARQUEE] Horizontal - currentPosition: ${currentPosition}, step: ${step}, direction: ${direction}`);
509
-
510
- // Fonction d'animation JavaScript
511
- const animate = () => {
512
- if (!isPaused) {
513
- if (direction === 'right') {
514
- currentPosition += step;
515
- if (currentPosition >= 0) {
516
- currentPosition = -contentSize - parseInt(gap);
517
- }
518
- } else {
519
- currentPosition -= step;
520
- if (currentPosition <= -contentSize - parseInt(gap)) {
521
- currentPosition = 0;
522
- }
523
- }
524
-
525
- scrollContainer.style.transform = `translate3d(${currentPosition}px, 0px, 0px)`;
526
- }
527
- requestAnimationFrame(animate);
528
- };
529
-
530
- // Démarrer l'animation
531
- animate();
532
-
533
- console.log('✅ [DEBUG MARQUEE] Marquee horizontal créé avec animation JS');
534
-
535
- // Pause au survol
536
- if (pauseOnHover === 'true') {
537
- element.addEventListener('mouseenter', function() {
538
- isPaused = true;
539
- });
540
- element.addEventListener('mouseleave', function() {
541
- isPaused = false;
542
- });
543
- }
544
-
545
- // Marquee horizontal créé avec animation JS
546
- }
547
- });
548
- };
549
-
550
- // Démarrer l'initialisation avec délai adaptatif - Initialisation séquentielle
551
- const baseDelay = isVertical ? 800 : 400; // Délais fixes selon le type
552
-
553
- console.log(`🔍 [DEBUG MARQUEE] Marquee ${currentIndex} (${isVertical ? 'vertical' : 'horizontal'}) initialisé dans ${baseDelay}ms`);
554
- setTimeout(() => {
555
- console.log(`🔍 [DEBUG MARQUEE] Démarrage initAnimation pour marquee ${currentIndex}`);
556
- initAnimation(0);
557
- // Après initialisation, passer au marquee suivant
558
- setTimeout(() => {
559
- console.log(`🔍 [DEBUG MARQUEE] Passage au marquee suivant après ${currentIndex}`);
560
- initNextMarquee();
561
- }, 100); // Petit délai entre les marquees
562
- }, 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);
563
395
  };
564
-
565
- // Démarrer l'initialisation séquentielle
566
- console.log('🔍 [DEBUG MARQUEE] Démarrage de l\'initialisation séquentielle');
567
- 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
+ }
568
406
  }
569
407
  },
570
408
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bebranded/bb-contents",
3
- "version": "1.0.64-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": {