@bebranded/bb-contents 1.0.76-beta → 1.0.78-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.
- package/bb-contents.js +138 -84
- 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.
|
|
4
|
+
* @version 1.0.78-beta
|
|
5
5
|
* @author BeBranded
|
|
6
6
|
* @license MIT
|
|
7
7
|
* @website https://www.bebranded.xyz
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
|
|
42
42
|
// Configuration
|
|
43
43
|
const config = {
|
|
44
|
-
version: '1.0.
|
|
44
|
+
version: '1.0.78-beta',
|
|
45
45
|
debug: true, // Debug activé pour diagnostic
|
|
46
46
|
prefix: 'bb-', // utilisé pour générer les sélecteurs (data-bb-*)
|
|
47
47
|
youtubeEndpoint: null, // URL du worker YouTube (à définir par l'utilisateur)
|
|
@@ -391,100 +391,154 @@
|
|
|
391
391
|
|
|
392
392
|
console.log(`🔍 [MARQUEE] Safari Animation - direction: ${direction}, isVertical: ${isVertical}, contentSize: ${contentSize}`);
|
|
393
393
|
|
|
394
|
-
// SOLUTION SAFARI
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
394
|
+
// SOLUTION SAFARI : Forcer le chargement des images avant animation
|
|
395
|
+
const images = mainBlock.querySelectorAll('img');
|
|
396
|
+
let imagesLoaded = 0;
|
|
397
|
+
const totalImages = images.length;
|
|
398
|
+
|
|
399
|
+
console.log(`🔍 [MARQUEE] Safari - ${totalImages} images détectées`);
|
|
400
|
+
|
|
401
|
+
// Forcer le chargement de toutes les images
|
|
402
|
+
images.forEach(img => {
|
|
403
|
+
if (img.dataset.src && !img.src) {
|
|
404
|
+
img.src = img.dataset.src;
|
|
405
|
+
img.loading = 'eager';
|
|
403
406
|
}
|
|
407
|
+
img.onload = () => {
|
|
408
|
+
imagesLoaded++;
|
|
409
|
+
console.log(`🖼️ [MARQUEE] Safari - Image ${imagesLoaded}/${totalImages} chargée`);
|
|
410
|
+
};
|
|
411
|
+
});
|
|
412
|
+
|
|
413
|
+
// Attendre que les images se chargent avec timeout adapté mobile
|
|
414
|
+
let waitTimeout = 0;
|
|
415
|
+
const maxWaitTime = 3000; // 3 secondes max sur mobile
|
|
416
|
+
const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
|
|
417
|
+
|
|
418
|
+
console.log(`🔍 [MARQUEE] Safari - Mobile détecté: ${isMobile}`);
|
|
419
|
+
|
|
420
|
+
const waitForImages = () => {
|
|
421
|
+
waitTimeout += 100;
|
|
404
422
|
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
423
|
+
if (imagesLoaded >= totalImages || imagesLoaded === 0 || waitTimeout >= maxWaitTime) {
|
|
424
|
+
console.log(`✅ [MARQUEE] Safari - Images chargées: ${imagesLoaded}/${totalImages} (timeout: ${waitTimeout}ms)`);
|
|
425
|
+
startSafariAnimation();
|
|
426
|
+
} else {
|
|
427
|
+
setTimeout(waitForImages, 100);
|
|
409
428
|
}
|
|
410
|
-
}
|
|
411
|
-
|
|
412
|
-
// Solution Safari simplifiée
|
|
413
|
-
const totalSize = finalContentSize * 3 + gapSize * 2;
|
|
414
|
-
const step = (parseFloat(speed) * (isVertical ? 1.5 : 0.8)) / 60;
|
|
415
|
-
let isPaused = false;
|
|
429
|
+
};
|
|
416
430
|
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
431
|
+
const startSafariAnimation = () => {
|
|
432
|
+
// Forcer le chargement des images restantes si timeout
|
|
433
|
+
if (waitTimeout >= maxWaitTime && imagesLoaded < totalImages) {
|
|
434
|
+
console.log(`⚠️ [MARQUEE] Safari - Timeout atteint, forcer chargement images restantes`);
|
|
435
|
+
images.forEach(img => {
|
|
436
|
+
if (img.dataset.src && !img.src) {
|
|
437
|
+
img.src = img.dataset.src;
|
|
438
|
+
img.loading = 'eager';
|
|
439
|
+
}
|
|
440
|
+
});
|
|
441
|
+
}
|
|
442
|
+
|
|
443
|
+
// Recalculer la taille après chargement des images
|
|
444
|
+
const newContentSize = isVertical ? mainBlock.offsetHeight : mainBlock.offsetWidth;
|
|
445
|
+
console.log(`🔍 [MARQUEE] Safari - Nouvelle taille après images: ${newContentSize}px`);
|
|
446
|
+
|
|
447
|
+
let finalContentSize = newContentSize > contentSize ? newContentSize : contentSize;
|
|
448
|
+
|
|
449
|
+
// Fallback si toujours trop petit (surtout sur mobile)
|
|
450
|
+
if (finalContentSize < 200) {
|
|
451
|
+
const parentElement = element.parentElement;
|
|
452
|
+
if (parentElement) {
|
|
453
|
+
finalContentSize = isVertical ? parentElement.offsetHeight : parentElement.offsetWidth;
|
|
454
|
+
}
|
|
455
|
+
if (finalContentSize < 200) {
|
|
456
|
+
// Valeurs par défaut plus généreuses sur mobile
|
|
457
|
+
finalContentSize = isVertical ? (isMobile ? 600 : 400) : (isMobile ? 1000 : 800);
|
|
458
|
+
console.log(`🔍 [MARQUEE] Safari - Utilisation valeur par défaut mobile: ${finalContentSize}px`);
|
|
459
|
+
}
|
|
460
|
+
}
|
|
461
|
+
|
|
462
|
+
// Solution Safari simplifiée
|
|
463
|
+
const totalSize = finalContentSize * 3 + gapSize * 2;
|
|
464
|
+
const step = (parseFloat(speed) * (isVertical ? 1.5 : 0.8)) / 60;
|
|
465
|
+
let isPaused = false;
|
|
466
|
+
|
|
467
|
+
// Ajuster la taille du conteneur
|
|
468
|
+
if (isVertical && !useAutoHeight) {
|
|
469
|
+
scrollContainer.style.height = totalSize + 'px';
|
|
470
|
+
} else if (!isVertical) {
|
|
471
|
+
scrollContainer.style.width = totalSize + 'px';
|
|
472
|
+
}
|
|
423
473
|
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
474
|
+
// Position initiale optimisée pour Safari
|
|
475
|
+
let currentPosition;
|
|
476
|
+
if (direction === (isVertical ? 'bottom' : 'right')) {
|
|
477
|
+
currentPosition = -(finalContentSize + gapSize);
|
|
478
|
+
} else {
|
|
479
|
+
currentPosition = 0;
|
|
480
|
+
}
|
|
431
481
|
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
482
|
+
// Forcer la position initiale pour éviter l'invisibilité
|
|
483
|
+
const initialTransform = isVertical
|
|
484
|
+
? `translate3d(0, ${currentPosition}px, 0)`
|
|
485
|
+
: `translate3d(${currentPosition}px, 0, 0)`;
|
|
486
|
+
scrollContainer.style.transform = initialTransform;
|
|
487
|
+
|
|
488
|
+
console.log(`🔍 [MARQUEE] Safari - Position initiale: ${currentPosition}px, transform: ${initialTransform}`);
|
|
439
489
|
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
490
|
+
// Fonction d'animation Safari avec debug des resets
|
|
491
|
+
let frameCount = 0;
|
|
492
|
+
const animate = () => {
|
|
493
|
+
if (!isPaused) {
|
|
494
|
+
frameCount++;
|
|
495
|
+
|
|
496
|
+
if (direction === (isVertical ? 'bottom' : 'right')) {
|
|
497
|
+
currentPosition += step;
|
|
498
|
+
if (currentPosition >= 0) {
|
|
499
|
+
console.log(`🔄 [MARQUEE] Safari RESET bottom/right: ${currentPosition} → ${-(finalContentSize + gapSize)}`);
|
|
500
|
+
currentPosition = -(finalContentSize + gapSize);
|
|
501
|
+
}
|
|
502
|
+
} else {
|
|
503
|
+
currentPosition -= step;
|
|
504
|
+
if (currentPosition <= -(2 * (finalContentSize + gapSize))) {
|
|
505
|
+
console.log(`🔄 [MARQUEE] Safari RESET top/left: ${currentPosition} → ${-(finalContentSize + gapSize)}`);
|
|
506
|
+
currentPosition = -(finalContentSize + gapSize);
|
|
507
|
+
}
|
|
451
508
|
}
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
if (
|
|
455
|
-
console.log(
|
|
456
|
-
currentPosition = -(finalContentSize + gapSize);
|
|
509
|
+
|
|
510
|
+
// Log toutes les 60 frames (1 seconde)
|
|
511
|
+
if (frameCount % 60 === 0) {
|
|
512
|
+
console.log(`📍 [MARQUEE] Safari position: ${currentPosition}px (frame ${frameCount})`);
|
|
457
513
|
}
|
|
514
|
+
|
|
515
|
+
// ARRONDI pour éviter les erreurs de précision JavaScript
|
|
516
|
+
currentPosition = Math.round(currentPosition * 100) / 100;
|
|
517
|
+
|
|
518
|
+
// Transform optimisé pour Safari
|
|
519
|
+
const transform = isVertical
|
|
520
|
+
? `translate3d(0, ${currentPosition}px, 0)`
|
|
521
|
+
: `translate3d(${currentPosition}px, 0, 0)`;
|
|
522
|
+
scrollContainer.style.transform = transform;
|
|
458
523
|
}
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
if (frameCount % 60 === 0) {
|
|
462
|
-
console.log(`📍 [MARQUEE] Safari position: ${currentPosition}px (frame ${frameCount})`);
|
|
463
|
-
}
|
|
464
|
-
|
|
465
|
-
// ARRONDI pour éviter les erreurs de précision JavaScript
|
|
466
|
-
currentPosition = Math.round(currentPosition * 100) / 100;
|
|
467
|
-
|
|
468
|
-
// Transform optimisé pour Safari
|
|
469
|
-
const transform = isVertical
|
|
470
|
-
? `translate3d(0, ${currentPosition}px, 0)`
|
|
471
|
-
: `translate3d(${currentPosition}px, 0, 0)`;
|
|
472
|
-
scrollContainer.style.transform = transform;
|
|
473
|
-
}
|
|
474
|
-
requestAnimationFrame(animate);
|
|
475
|
-
};
|
|
524
|
+
requestAnimationFrame(animate);
|
|
525
|
+
};
|
|
476
526
|
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
527
|
+
// Démarrer l'animation avec un petit délai pour Safari
|
|
528
|
+
setTimeout(() => {
|
|
529
|
+
animate();
|
|
530
|
+
console.log('✅ [MARQUEE] Animation Safari démarrée avec JavaScript optimisé');
|
|
531
|
+
}, 50);
|
|
482
532
|
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
533
|
+
// Pause au survol pour Safari
|
|
534
|
+
if (element.getAttribute('bb-marquee-pause') === 'true') {
|
|
535
|
+
element.addEventListener('mouseenter', () => isPaused = true);
|
|
536
|
+
element.addEventListener('mouseleave', () => isPaused = false);
|
|
537
|
+
}
|
|
538
|
+
};
|
|
539
|
+
|
|
540
|
+
// Démarrer le processus de chargement des images
|
|
541
|
+
waitForImages();
|
|
488
542
|
},
|
|
489
543
|
|
|
490
544
|
initStandardAnimation: function(element, scrollContainer, mainBlock, options) {
|