@bebranded/bb-contents 1.0.76-beta → 1.0.77-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 +117 -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.77-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.77-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,133 @@
|
|
|
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 ou timeout
|
|
414
|
+
const waitForImages = () => {
|
|
415
|
+
if (imagesLoaded >= totalImages || imagesLoaded === 0) {
|
|
416
|
+
console.log(`✅ [MARQUEE] Safari - Images chargées: ${imagesLoaded}/${totalImages}`);
|
|
417
|
+
startSafariAnimation();
|
|
418
|
+
} else {
|
|
419
|
+
setTimeout(waitForImages, 100);
|
|
420
|
+
}
|
|
421
|
+
};
|
|
422
|
+
|
|
423
|
+
const startSafariAnimation = () => {
|
|
424
|
+
// Recalculer la taille après chargement des images
|
|
425
|
+
const newContentSize = isVertical ? mainBlock.offsetHeight : mainBlock.offsetWidth;
|
|
426
|
+
console.log(`🔍 [MARQUEE] Safari - Nouvelle taille après images: ${newContentSize}px`);
|
|
404
427
|
|
|
405
|
-
|
|
428
|
+
let finalContentSize = newContentSize > contentSize ? newContentSize : contentSize;
|
|
429
|
+
|
|
430
|
+
// Fallback si toujours trop petit
|
|
406
431
|
if (finalContentSize < 200) {
|
|
407
|
-
|
|
408
|
-
|
|
432
|
+
const parentElement = element.parentElement;
|
|
433
|
+
if (parentElement) {
|
|
434
|
+
finalContentSize = isVertical ? parentElement.offsetHeight : parentElement.offsetWidth;
|
|
435
|
+
}
|
|
436
|
+
if (finalContentSize < 200) {
|
|
437
|
+
finalContentSize = isVertical ? 400 : 800;
|
|
438
|
+
}
|
|
439
|
+
}
|
|
440
|
+
|
|
441
|
+
// Solution Safari simplifiée
|
|
442
|
+
const totalSize = finalContentSize * 3 + gapSize * 2;
|
|
443
|
+
const step = (parseFloat(speed) * (isVertical ? 1.5 : 0.8)) / 60;
|
|
444
|
+
let isPaused = false;
|
|
445
|
+
|
|
446
|
+
// Ajuster la taille du conteneur
|
|
447
|
+
if (isVertical && !useAutoHeight) {
|
|
448
|
+
scrollContainer.style.height = totalSize + 'px';
|
|
449
|
+
} else if (!isVertical) {
|
|
450
|
+
scrollContainer.style.width = totalSize + 'px';
|
|
409
451
|
}
|
|
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;
|
|
416
|
-
|
|
417
|
-
// Ajuster la taille du conteneur
|
|
418
|
-
if (isVertical && !useAutoHeight) {
|
|
419
|
-
scrollContainer.style.height = totalSize + 'px';
|
|
420
|
-
} else if (!isVertical) {
|
|
421
|
-
scrollContainer.style.width = totalSize + 'px';
|
|
422
|
-
}
|
|
423
452
|
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
453
|
+
// Position initiale optimisée pour Safari
|
|
454
|
+
let currentPosition;
|
|
455
|
+
if (direction === (isVertical ? 'bottom' : 'right')) {
|
|
456
|
+
currentPosition = -(finalContentSize + gapSize);
|
|
457
|
+
} else {
|
|
458
|
+
currentPosition = 0;
|
|
459
|
+
}
|
|
431
460
|
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
461
|
+
// Forcer la position initiale pour éviter l'invisibilité
|
|
462
|
+
const initialTransform = isVertical
|
|
463
|
+
? `translate3d(0, ${currentPosition}px, 0)`
|
|
464
|
+
: `translate3d(${currentPosition}px, 0, 0)`;
|
|
465
|
+
scrollContainer.style.transform = initialTransform;
|
|
466
|
+
|
|
467
|
+
console.log(`🔍 [MARQUEE] Safari - Position initiale: ${currentPosition}px, transform: ${initialTransform}`);
|
|
439
468
|
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
469
|
+
// Fonction d'animation Safari avec debug des resets
|
|
470
|
+
let frameCount = 0;
|
|
471
|
+
const animate = () => {
|
|
472
|
+
if (!isPaused) {
|
|
473
|
+
frameCount++;
|
|
474
|
+
|
|
475
|
+
if (direction === (isVertical ? 'bottom' : 'right')) {
|
|
476
|
+
currentPosition += step;
|
|
477
|
+
if (currentPosition >= 0) {
|
|
478
|
+
console.log(`🔄 [MARQUEE] Safari RESET bottom/right: ${currentPosition} → ${-(finalContentSize + gapSize)}`);
|
|
479
|
+
currentPosition = -(finalContentSize + gapSize);
|
|
480
|
+
}
|
|
481
|
+
} else {
|
|
482
|
+
currentPosition -= step;
|
|
483
|
+
if (currentPosition <= -(2 * (finalContentSize + gapSize))) {
|
|
484
|
+
console.log(`🔄 [MARQUEE] Safari RESET top/left: ${currentPosition} → ${-(finalContentSize + gapSize)}`);
|
|
485
|
+
currentPosition = -(finalContentSize + gapSize);
|
|
486
|
+
}
|
|
451
487
|
}
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
if (
|
|
455
|
-
console.log(
|
|
456
|
-
currentPosition = -(finalContentSize + gapSize);
|
|
488
|
+
|
|
489
|
+
// Log toutes les 60 frames (1 seconde)
|
|
490
|
+
if (frameCount % 60 === 0) {
|
|
491
|
+
console.log(`📍 [MARQUEE] Safari position: ${currentPosition}px (frame ${frameCount})`);
|
|
457
492
|
}
|
|
493
|
+
|
|
494
|
+
// ARRONDI pour éviter les erreurs de précision JavaScript
|
|
495
|
+
currentPosition = Math.round(currentPosition * 100) / 100;
|
|
496
|
+
|
|
497
|
+
// Transform optimisé pour Safari
|
|
498
|
+
const transform = isVertical
|
|
499
|
+
? `translate3d(0, ${currentPosition}px, 0)`
|
|
500
|
+
: `translate3d(${currentPosition}px, 0, 0)`;
|
|
501
|
+
scrollContainer.style.transform = transform;
|
|
458
502
|
}
|
|
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
|
-
};
|
|
503
|
+
requestAnimationFrame(animate);
|
|
504
|
+
};
|
|
476
505
|
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
506
|
+
// Démarrer l'animation avec un petit délai pour Safari
|
|
507
|
+
setTimeout(() => {
|
|
508
|
+
animate();
|
|
509
|
+
console.log('✅ [MARQUEE] Animation Safari démarrée avec JavaScript optimisé');
|
|
510
|
+
}, 50);
|
|
482
511
|
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
512
|
+
// Pause au survol pour Safari
|
|
513
|
+
if (element.getAttribute('bb-marquee-pause') === 'true') {
|
|
514
|
+
element.addEventListener('mouseenter', () => isPaused = true);
|
|
515
|
+
element.addEventListener('mouseleave', () => isPaused = false);
|
|
516
|
+
}
|
|
517
|
+
};
|
|
518
|
+
|
|
519
|
+
// Démarrer le processus de chargement des images
|
|
520
|
+
waitForImages();
|
|
488
521
|
},
|
|
489
522
|
|
|
490
523
|
initStandardAnimation: function(element, scrollContainer, mainBlock, options) {
|