@bebranded/bb-contents 1.0.111 → 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 -75
  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.111
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.111');
35
+ console.log('bb-contents | v1.0.112');
36
36
 
37
37
  // Configuration
38
38
  const config = {
39
- version: '1.0.111',
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,63 +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, utiliser contain pour éviter le débordement, mais avec optimisations anti-flou
484
- img.style.objectFit = 'contain';
485
- img.style.objectPosition = 'center';
486
-
487
- // Ajouter des contraintes pour empêcher le débordement
488
- img.style.maxWidth = '100%';
489
- img.style.maxHeight = '100%';
490
- img.style.width = '100%';
491
- img.style.height = '100%';
492
-
493
- // Forcer le GPU rendering
494
- img.style.webkitTransform = 'translate3d(0, 0, 0)';
495
- img.style.transform = 'translate3d(0, 0, 0)';
496
-
497
- // Améliorer le rendu des SVG
498
- img.style.imageRendering = 'crisp-edges';
499
-
500
- // S'assurer que le conteneur parent permet au SVG de s'afficher correctement
501
- // et empêche le débordement avec overflow hidden
502
- const parent = img.parentElement;
503
- if (parent) {
504
- parent.style.display = 'flex';
505
- parent.style.alignItems = 'center';
506
- parent.style.justifyContent = 'center';
507
- parent.style.overflow = 'hidden'; // Empêcher le débordement
508
- }
509
- } else {
510
- // Pour les images non-SVG ou sur desktop, appliquer les styles normaux
511
- // Vérifier si l'image a déjà des styles inline
512
- if (!img.style.objectFit) {
513
- const computedStyle = getComputedStyle(img);
514
- const objectFit = computedStyle.objectFit;
515
- const objectPosition = computedStyle.objectPosition;
516
-
517
- // Appliquer object-fit si défini dans le CSS
518
- if (objectFit && objectFit !== 'none' && objectFit !== 'fill') {
519
- img.style.objectFit = objectFit;
520
- }
521
- // Appliquer object-position si défini dans le CSS
522
- if (objectPosition && objectPosition !== 'initial' && objectPosition !== '50% 50%') {
523
- img.style.objectPosition = objectPosition;
524
- }
525
- }
526
- }
527
-
528
- // Forcer un reflow pour stabiliser le rendu
529
- void img.offsetHeight;
530
- });
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
531
513
 
532
514
  // Vérifier que les images ont une taille visible
533
515
  let imagesWithSize = 0;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bebranded/bb-contents",
3
- "version": "1.0.111",
3
+ "version": "1.0.112",
4
4
  "description": "Contenus additionnels français pour Webflow",
5
5
  "main": "bb-contents.js",
6
6
  "scripts": {