@bebranded/bb-contents 1.0.143 → 1.0.145

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 +110 -38
  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.143
4
+ * @version 1.0.145
5
5
  * @author BeBranded
6
6
  * @license MIT
7
7
  * @website https://www.bebranded.xyz
@@ -32,11 +32,11 @@
32
32
  window._bbContentsInitialized = true;
33
33
 
34
34
  // Log de démarrage simple (une seule fois)
35
- console.log('bb-contents | v1.0.143');
35
+ console.log('bb-contents | v1.0.145');
36
36
 
37
37
  // Configuration
38
38
  const config = {
39
- version: '1.0.143',
39
+ version: '1.0.145',
40
40
  debug: false, // Debug désactivé pour rendu propre
41
41
  prefix: 'bb-', // utilisé pour générer les sélecteurs (data-bb-*)
42
42
  youtubeEndpoint: null, // URL du worker YouTube (à définir par l'utilisateur)
@@ -396,31 +396,93 @@
396
396
  const repeatBlock1 = mainBlock.cloneNode(true);
397
397
  const repeatBlock2 = mainBlock.cloneNode(true);
398
398
 
399
- // Forcer le chargement des images dans les copies pour éviter les saccades
399
+ // Forcer le chargement COMPLET des images dans les copies pour éviter l'apparition tardive
400
400
  const preloadImagesInBlock = function(block) {
401
- const images = block.querySelectorAll('img');
402
- images.forEach(function(img) {
403
- if (img.dataset.src && !img.src) {
404
- img.src = img.dataset.src;
405
- }
406
- // Forcer le chargement même si l'image est déjà chargée dans le mainBlock
407
- if (img.src && !img.complete) {
408
- const newImg = new Image();
409
- newImg.src = img.src;
401
+ return new Promise(function(resolve) {
402
+ const images = block.querySelectorAll('img');
403
+ if (images.length === 0) {
404
+ resolve();
405
+ return;
410
406
  }
407
+
408
+ let loadedCount = 0;
409
+ let errorCount = 0;
410
+ const totalImages = images.length;
411
+
412
+ const checkComplete = function() {
413
+ if (loadedCount + errorCount >= totalImages) {
414
+ resolve();
415
+ }
416
+ };
417
+
418
+ images.forEach(function(img) {
419
+ // Charger l'image si nécessaire
420
+ if (img.dataset.src && !img.src) {
421
+ img.src = img.dataset.src;
422
+ }
423
+
424
+ // Si l'image est déjà chargée, compter comme chargée
425
+ if (img.complete && img.naturalWidth > 0 && img.naturalHeight > 0) {
426
+ loadedCount++;
427
+ checkComplete();
428
+ } else {
429
+ // Précharger avec new Image() pour forcer le cache
430
+ const preloadImg = new Image();
431
+ preloadImg.onload = function() {
432
+ // S'assurer que l'image dans le DOM est aussi chargée
433
+ if (img.src && !img.complete) {
434
+ img.src = img.src; // Forcer le rechargement
435
+ }
436
+ loadedCount++;
437
+ checkComplete();
438
+ };
439
+ preloadImg.onerror = function() {
440
+ errorCount++;
441
+ checkComplete();
442
+ };
443
+
444
+ if (img.src) {
445
+ preloadImg.src = img.src;
446
+ } else if (img.dataset.src) {
447
+ preloadImg.src = img.dataset.src;
448
+ } else {
449
+ errorCount++;
450
+ checkComplete();
451
+ }
452
+
453
+ // Écouter aussi le chargement de l'image dans le DOM
454
+ const originalOnload = img.onload;
455
+ img.onload = function() {
456
+ if (originalOnload) originalOnload();
457
+ if (!img.complete || img.naturalWidth === 0) {
458
+ // Attendre encore un peu
459
+ setTimeout(function() {
460
+ if (img.complete && img.naturalWidth > 0) {
461
+ loadedCount++;
462
+ checkComplete();
463
+ }
464
+ }, 50);
465
+ } else {
466
+ loadedCount++;
467
+ checkComplete();
468
+ }
469
+ };
470
+
471
+ // Si l'image a déjà un src, déclencher le chargement
472
+ if (img.src) {
473
+ img.src = img.src;
474
+ }
475
+ }
476
+ });
411
477
  });
412
478
  };
413
479
 
414
- // Précharger les images dans les copies
415
- preloadImagesInBlock(repeatBlock1);
416
- preloadImagesInBlock(repeatBlock2);
417
-
418
480
  // Pour les marquees horizontaux, utiliser position relative (plus simple et plus fiable)
419
481
  if (!isVertical) {
420
- scrollContainer.appendChild(mainBlock);
421
- scrollContainer.appendChild(repeatBlock1);
422
- scrollContainer.appendChild(repeatBlock2);
423
- mainContainer.appendChild(scrollContainer);
482
+ scrollContainer.appendChild(mainBlock);
483
+ scrollContainer.appendChild(repeatBlock1);
484
+ scrollContainer.appendChild(repeatBlock2);
485
+ mainContainer.appendChild(scrollContainer);
424
486
 
425
487
  // Calculer la hauteur maximale des items après ajout au DOM
426
488
  requestAnimationFrame(() => {
@@ -503,23 +565,27 @@
503
565
  const repeatBlock1 = mainBlock.cloneNode(true);
504
566
  const repeatBlock2 = mainBlock.cloneNode(true);
505
567
 
506
- // Forcer le chargement des images dans les copies pour éviter les saccades
507
- const preloadImagesInBlock = function(block) {
568
+ // Forcer le chargement COMPLET des images dans les copies
569
+ const preloadImagesInBlockSync = function(block) {
508
570
  const images = block.querySelectorAll('img');
509
571
  images.forEach(function(img) {
510
572
  if (img.dataset.src && !img.src) {
511
573
  img.src = img.dataset.src;
512
574
  }
513
- // Forcer le chargement même si l'image est déjà chargée dans le mainBlock
514
- if (img.src && !img.complete) {
515
- const newImg = new Image();
516
- newImg.src = img.src;
575
+ // Précharger avec new Image() pour forcer le cache
576
+ if (img.src) {
577
+ const preloadImg = new Image();
578
+ preloadImg.src = img.src;
579
+ // Forcer aussi le chargement dans l'image du DOM
580
+ if (!img.complete) {
581
+ img.src = img.src;
582
+ }
517
583
  }
518
584
  });
519
585
  };
520
586
 
521
- preloadImagesInBlock(repeatBlock1);
522
- preloadImagesInBlock(repeatBlock2);
587
+ preloadImagesInBlockSync(repeatBlock1);
588
+ preloadImagesInBlockSync(repeatBlock2);
523
589
 
524
590
  scrollContainer.appendChild(repeatBlock1);
525
591
  scrollContainer.appendChild(repeatBlock2);
@@ -784,7 +850,7 @@
784
850
  let currentPosition;
785
851
  if (direction === (isVertical ? 'bottom' : 'right')) {
786
852
  currentPosition = -(finalContentSize + gapSize);
787
- } else {
853
+ } else {
788
854
  // Commencer avec repeatBlock1 déjà visible pour éviter la saccade
789
855
  currentPosition = -(finalContentSize + gapSize);
790
856
  }
@@ -815,8 +881,12 @@
815
881
  }
816
882
  } else {
817
883
  currentPosition -= step * deltaTime;
818
- if (currentPosition <= -(2 * (finalContentSize + gapSize))) {
819
- currentPosition = -(finalContentSize + gapSize);
884
+ // Reset BEAUCOUP PLUS TÔT pour éviter toute saccade visible (Safari)
885
+ // Reset à 80% du chemin au lieu d'attendre 100% pour avoir une marge de sécurité
886
+ const resetThreshold = -(1.8 * (finalContentSize + gapSize));
887
+ if (currentPosition <= resetThreshold) {
888
+ // Reset en gardant la position relative pour éviter le saut visible
889
+ currentPosition = currentPosition + (finalContentSize + gapSize);
820
890
  }
821
891
  }
822
892
 
@@ -899,11 +969,13 @@
899
969
  }
900
970
  } else {
901
971
  currentPosition -= step * clampedDelta;
902
- // Reset AVANT que le bloc ne sorte complètement
903
- // Reset quand on arrive à -(2 * (contentSize + gapSize)) pour que repeatBlock2 soit déjà visible
904
- // Mais on reset à -(contentSize + gapSize) pour que repeatBlock1 soit déjà visible
905
- if (currentPosition <= -(2 * (contentSize + gapSize))) {
906
- currentPosition = -(contentSize + gapSize);
972
+ // Reset BEAUCOUP PLUS TÔT pour éviter toute saccade visible
973
+ // Reset à 80% du chemin au lieu d'attendre 100% pour avoir une marge de sécurité
974
+ // Cela garantit que la copie suivante est toujours visible avant le reset
975
+ const resetThreshold = -(1.8 * (contentSize + gapSize));
976
+ if (currentPosition <= resetThreshold) {
977
+ // Reset en gardant la position relative pour éviter le saut visible
978
+ currentPosition = currentPosition + (contentSize + gapSize);
907
979
  }
908
980
  }
909
981
 
@@ -1865,7 +1937,7 @@
1865
1937
  wrapper.setAttribute('data-bb-country-select-processed', 'true');
1866
1938
  });
1867
1939
 
1868
- }
1940
+ }
1869
1941
  },
1870
1942
 
1871
1943
  // Module Favicon (Favicon Dynamique)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bebranded/bb-contents",
3
- "version": "1.0.143",
3
+ "version": "1.0.145",
4
4
  "description": "Contenus additionnels français pour Webflow",
5
5
  "main": "bb-contents.js",
6
6
  "scripts": {