@bebranded/bb-contents 1.0.110 → 1.0.112

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 +57 -68
  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.110
4
+ * @version 1.0.112
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.110');
35
+ console.log('bb-contents | v1.0.112');
36
36
 
37
37
  // Configuration
38
38
  const config = {
39
- version: '1.0.110',
39
+ version: '1.0.112',
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)
@@ -391,13 +391,17 @@
391
391
  const totalImages = images.length;
392
392
 
393
393
 
394
- // OPTIMISATION: Charger les images sans forcer les dimensions
394
+ // OPTIMISATION: Charger les images et appliquer les styles SVG AVANT le clonage
395
+ // pour éviter les reflows qui causent la saccade de l'animation
395
396
  images.forEach(img => {
396
397
  if (img.dataset.src && !img.src) {
397
398
  img.src = img.dataset.src;
398
399
  img.loading = 'eager';
399
400
  }
400
401
 
402
+ // Détecter si c'est un SVG (par l'extension du src ou le type)
403
+ const isSVG = img.src && (img.src.toLowerCase().endsWith('.svg') || img.src.includes('data:image/svg+xml'));
404
+
401
405
  // OPTIMISATION: Préserver les styles CSS existants (object-fit, etc.)
402
406
  const originalObjectFit = img.style.objectFit || getComputedStyle(img).objectFit;
403
407
  const originalObjectPosition = img.style.objectPosition || getComputedStyle(img).objectPosition;
@@ -405,20 +409,52 @@
405
409
  const originalHeight = img.style.height;
406
410
 
407
411
  img.onload = () => {
408
- // OPTIMISATION: Restaurer les styles CSS après chargement
409
- if (originalObjectFit && originalObjectFit !== 'none') {
410
- img.style.objectFit = originalObjectFit;
411
- }
412
- if (originalObjectPosition && originalObjectPosition !== 'initial') {
413
- img.style.objectPosition = originalObjectPosition;
414
- }
415
-
416
- // OPTIMISATION: Préserver les dimensions naturelles des images
417
- if (!originalWidth || originalWidth === '') {
418
- img.style.width = 'auto';
419
- }
420
- if (!originalHeight || originalHeight === '') {
421
- img.style.height = 'auto';
412
+ // SOLUTION MOBILE SAFARI : Pour les SVG sur mobile, appliquer les styles AVANT le clonage
413
+ if (isSVG && isMobile) {
414
+ // Utiliser contain pour éviter le débordement
415
+ img.style.objectFit = 'contain';
416
+ img.style.objectPosition = 'center';
417
+
418
+ // Ajouter des contraintes pour empêcher le débordement et forcer la taille
419
+ img.style.maxWidth = '100%';
420
+ img.style.maxHeight = '100%';
421
+ img.style.width = '100%';
422
+ img.style.height = '100%';
423
+ img.style.boxSizing = 'border-box';
424
+
425
+ // Forcer le GPU rendering
426
+ img.style.webkitTransform = 'translate3d(0, 0, 0)';
427
+ img.style.transform = 'translate3d(0, 0, 0)';
428
+
429
+ // Améliorer le rendu des SVG
430
+ img.style.imageRendering = 'crisp-edges';
431
+
432
+ // S'assurer que le conteneur parent permet au SVG de s'afficher correctement
433
+ // et empêche le débordement avec overflow hidden
434
+ const parent = img.parentElement;
435
+ if (parent) {
436
+ parent.style.display = 'flex';
437
+ parent.style.alignItems = 'center';
438
+ parent.style.justifyContent = 'center';
439
+ parent.style.overflow = 'hidden';
440
+ parent.style.boxSizing = 'border-box';
441
+ }
442
+ } else {
443
+ // OPTIMISATION: Restaurer les styles CSS après chargement pour les non-SVG
444
+ if (originalObjectFit && originalObjectFit !== 'none') {
445
+ img.style.objectFit = originalObjectFit;
446
+ }
447
+ if (originalObjectPosition && originalObjectPosition !== 'initial') {
448
+ img.style.objectPosition = originalObjectPosition;
449
+ }
450
+
451
+ // OPTIMISATION: Préserver les dimensions naturelles des images
452
+ if (!originalWidth || originalWidth === '') {
453
+ img.style.width = 'auto';
454
+ }
455
+ if (!originalHeight || originalHeight === '') {
456
+ img.style.height = 'auto';
457
+ }
422
458
  }
423
459
 
424
460
  imagesLoaded++;
@@ -471,56 +507,9 @@
471
507
  });
472
508
  }
473
509
 
474
- // CORRECTION: Appliquer les styles CSS aux images dans les copies également
475
- // pour éviter les images floues ou mal cadrées
476
- const allImages = scrollContainer.querySelectorAll('img');
477
- allImages.forEach(img => {
478
- // Détecter si c'est un SVG (par l'extension du src ou le type)
479
- const isSVG = img.src && (img.src.toLowerCase().endsWith('.svg') || img.src.includes('data:image/svg+xml'));
480
-
481
- // SOLUTION MOBILE SAFARI : Pour les SVG sur mobile, éviter object-fit qui cause du flou
482
- if (isSVG && isMobile) {
483
- // Sur mobile, NE PAS appliquer object-fit aux SVG (c'est ce qui cause le flou)
484
- // Le SVG utilisera ses dimensions naturelles ou celles du conteneur
485
- img.style.objectFit = 'none';
486
- img.style.objectPosition = 'center';
487
-
488
- // Forcer le GPU rendering
489
- img.style.webkitTransform = 'translate3d(0, 0, 0)';
490
- img.style.transform = 'translate3d(0, 0, 0)';
491
-
492
- // Améliorer le rendu des SVG
493
- img.style.imageRendering = 'crisp-edges';
494
-
495
- // S'assurer que le conteneur parent permet au SVG de s'afficher correctement
496
- const parent = img.parentElement;
497
- if (parent) {
498
- parent.style.display = 'flex';
499
- parent.style.alignItems = 'center';
500
- parent.style.justifyContent = 'center';
501
- }
502
- } else {
503
- // Pour les images non-SVG ou sur desktop, appliquer les styles normaux
504
- // Vérifier si l'image a déjà des styles inline
505
- if (!img.style.objectFit) {
506
- const computedStyle = getComputedStyle(img);
507
- const objectFit = computedStyle.objectFit;
508
- const objectPosition = computedStyle.objectPosition;
509
-
510
- // Appliquer object-fit si défini dans le CSS
511
- if (objectFit && objectFit !== 'none' && objectFit !== 'fill') {
512
- img.style.objectFit = objectFit;
513
- }
514
- // Appliquer object-position si défini dans le CSS
515
- if (objectPosition && objectPosition !== 'initial' && objectPosition !== '50% 50%') {
516
- img.style.objectPosition = objectPosition;
517
- }
518
- }
519
- }
520
-
521
- // Forcer un reflow pour stabiliser le rendu
522
- void img.offsetHeight;
523
- });
510
+ // Les styles sont maintenant appliqués AVANT le clonage (dans img.onload)
511
+ // Cela évite les reflows qui causaient la saccade de l'animation
512
+ // Les copies héritent automatiquement des styles des images originales
524
513
 
525
514
  // Vérifier que les images ont une taille visible
526
515
  let imagesWithSize = 0;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bebranded/bb-contents",
3
- "version": "1.0.110",
3
+ "version": "1.0.112",
4
4
  "description": "Contenus additionnels français pour Webflow",
5
5
  "main": "bb-contents.js",
6
6
  "scripts": {