@bebranded/bb-contents 1.0.38-beta → 1.0.40-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 +89 -255
- 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.40-beta
|
|
5
5
|
* @author BeBranded
|
|
6
6
|
* @license MIT
|
|
7
7
|
* @website https://www.bebranded.xyz
|
|
@@ -17,9 +17,10 @@
|
|
|
17
17
|
|
|
18
18
|
// Configuration
|
|
19
19
|
const config = {
|
|
20
|
-
version: '1.0.
|
|
20
|
+
version: '1.0.40-beta',
|
|
21
21
|
debug: true, // Activé temporairement pour debug
|
|
22
22
|
prefix: 'bb-', // utilisé pour générer les sélecteurs (data-bb-*)
|
|
23
|
+
youtubeEndpoint: null, // URL du worker YouTube (à définir par l'utilisateur)
|
|
23
24
|
i18n: {
|
|
24
25
|
copied: 'Lien copié !'
|
|
25
26
|
}
|
|
@@ -84,18 +85,12 @@
|
|
|
84
85
|
|
|
85
86
|
this.utils.log('Initialisation v' + this.config.version);
|
|
86
87
|
|
|
87
|
-
// Debug
|
|
88
|
-
this.utils.log('=== DEBUG ENVIRONNEMENT ===');
|
|
89
|
-
this.utils.log('Body attributes:', Array.from(document.body.attributes).map(attr => attr.name + '=' + attr.value));
|
|
90
|
-
this.utils.log('Scripts chargés:', document.querySelectorAll('script').length);
|
|
91
|
-
this.utils.log('Stylesheets chargés:', document.querySelectorAll('link[rel="stylesheet"]').length);
|
|
92
|
-
this.utils.log('Marquees détectés:', document.querySelectorAll('[bb-marquee]').length);
|
|
93
|
-
this.utils.log('Marquees déjà traités:', document.querySelectorAll('[bb-marquee][data-bb-marquee-processed]').length);
|
|
88
|
+
// Debug environnement supprimé pour console propre
|
|
94
89
|
|
|
95
90
|
// Détection du bb-performance-boost
|
|
96
91
|
this._performanceBoostDetected = document.body.hasAttribute('bb-performance-boost');
|
|
97
92
|
if (this._performanceBoostDetected) {
|
|
98
|
-
|
|
93
|
+
// bb-performance-boost détecté - mode de compatibilité activé
|
|
99
94
|
}
|
|
100
95
|
|
|
101
96
|
// Déterminer la portée
|
|
@@ -105,7 +100,7 @@
|
|
|
105
100
|
Object.keys(this.modules).forEach(function(moduleName) {
|
|
106
101
|
const module = bbContents.modules[moduleName];
|
|
107
102
|
if (module.detect && module.detect(scope)) {
|
|
108
|
-
|
|
103
|
+
// Module détecté
|
|
109
104
|
try {
|
|
110
105
|
module.init(scope);
|
|
111
106
|
} catch (error) {
|
|
@@ -130,7 +125,7 @@
|
|
|
130
125
|
// Vérifier les marquees non initialisés
|
|
131
126
|
const marqueeElements = scope.querySelectorAll('[bb-marquee]:not([data-bb-marquee-processed])');
|
|
132
127
|
if (marqueeElements.length > 0) {
|
|
133
|
-
|
|
128
|
+
// Marquees non initialisés détectés
|
|
134
129
|
needsReinit = true;
|
|
135
130
|
}
|
|
136
131
|
|
|
@@ -138,7 +133,7 @@
|
|
|
138
133
|
Object.keys(this.modules).forEach(function(moduleName) {
|
|
139
134
|
const module = bbContents.modules[moduleName];
|
|
140
135
|
if (module.checkFailed && module.checkFailed(scope)) {
|
|
141
|
-
|
|
136
|
+
// Module a des éléments échoués
|
|
142
137
|
needsReinit = true;
|
|
143
138
|
}
|
|
144
139
|
});
|
|
@@ -146,7 +141,7 @@
|
|
|
146
141
|
// Réinitialiser si nécessaire et si on n'a pas dépassé le nombre max de tentatives
|
|
147
142
|
if (needsReinit && this._initRetryCount < this._maxInitRetries) {
|
|
148
143
|
this._initRetryCount++;
|
|
149
|
-
|
|
144
|
+
// Tentative de réinitialisation
|
|
150
145
|
|
|
151
146
|
const delay = this._performanceBoostDetected ? 1000 * this._initRetryCount : 500 * this._initRetryCount;
|
|
152
147
|
setTimeout(() => {
|
|
@@ -208,166 +203,7 @@
|
|
|
208
203
|
|
|
209
204
|
// Modules
|
|
210
205
|
bbContents.modules = {
|
|
211
|
-
// Module
|
|
212
|
-
seo: {
|
|
213
|
-
detect: function(scope) {
|
|
214
|
-
return scope.querySelector('[bb-seo]') !== null;
|
|
215
|
-
},
|
|
216
|
-
|
|
217
|
-
init: function(scope) {
|
|
218
|
-
const elements = scope.querySelectorAll('[bb-seo]');
|
|
219
|
-
if (elements.length === 0) return;
|
|
220
|
-
|
|
221
|
-
bbContents.utils.log('Module détecté: seo');
|
|
222
|
-
|
|
223
|
-
elements.forEach(element => {
|
|
224
|
-
if (element.bbProcessed) return;
|
|
225
|
-
element.bbProcessed = true;
|
|
226
|
-
|
|
227
|
-
const title = bbContents._getAttr(element, 'bb-seo-title');
|
|
228
|
-
const description = bbContents._getAttr(element, 'bb-seo-description');
|
|
229
|
-
const keywords = bbContents._getAttr(element, 'bb-seo-keywords');
|
|
230
|
-
|
|
231
|
-
if (title) {
|
|
232
|
-
document.title = title;
|
|
233
|
-
}
|
|
234
|
-
|
|
235
|
-
if (description) {
|
|
236
|
-
let meta = document.querySelector('meta[name="description"]');
|
|
237
|
-
if (!meta) {
|
|
238
|
-
meta = document.createElement('meta');
|
|
239
|
-
meta.name = 'description';
|
|
240
|
-
document.head.appendChild(meta);
|
|
241
|
-
}
|
|
242
|
-
meta.content = description;
|
|
243
|
-
}
|
|
244
|
-
|
|
245
|
-
if (keywords) {
|
|
246
|
-
let meta = document.querySelector('meta[name="keywords"]');
|
|
247
|
-
if (!meta) {
|
|
248
|
-
meta = document.createElement('meta');
|
|
249
|
-
meta.name = 'keywords';
|
|
250
|
-
document.head.appendChild(meta);
|
|
251
|
-
}
|
|
252
|
-
meta.content = keywords;
|
|
253
|
-
}
|
|
254
|
-
});
|
|
255
|
-
|
|
256
|
-
bbContents.utils.log('Module SEO initialisé:', elements.length, 'éléments');
|
|
257
|
-
}
|
|
258
|
-
},
|
|
259
|
-
|
|
260
|
-
// Module Images
|
|
261
|
-
images: {
|
|
262
|
-
detect: function(scope) {
|
|
263
|
-
return scope.querySelector('[bb-images]') !== null;
|
|
264
|
-
},
|
|
265
|
-
|
|
266
|
-
init: function(scope) {
|
|
267
|
-
const elements = scope.querySelectorAll('[bb-images]');
|
|
268
|
-
if (elements.length === 0) return;
|
|
269
|
-
|
|
270
|
-
bbContents.utils.log('Module détecté: images');
|
|
271
|
-
|
|
272
|
-
elements.forEach(element => {
|
|
273
|
-
if (element.bbProcessed) return;
|
|
274
|
-
element.bbProcessed = true;
|
|
275
|
-
|
|
276
|
-
const lazy = bbContents._getAttr(element, 'bb-images-lazy');
|
|
277
|
-
const webp = bbContents._getAttr(element, 'bb-images-webp');
|
|
278
|
-
|
|
279
|
-
if (lazy === 'true') {
|
|
280
|
-
// Implémentation lazy loading basique
|
|
281
|
-
const images = element.querySelectorAll('img');
|
|
282
|
-
images.forEach(img => {
|
|
283
|
-
if (!img.loading) {
|
|
284
|
-
img.loading = 'lazy';
|
|
285
|
-
}
|
|
286
|
-
});
|
|
287
|
-
}
|
|
288
|
-
|
|
289
|
-
if (webp === 'true') {
|
|
290
|
-
// Support WebP basique
|
|
291
|
-
const images = element.querySelectorAll('img');
|
|
292
|
-
images.forEach(img => {
|
|
293
|
-
const src = img.src;
|
|
294
|
-
if (src && !src.includes('.webp')) {
|
|
295
|
-
// Logique de conversion WebP (à implémenter selon les besoins)
|
|
296
|
-
bbContents.utils.log('Support WebP activé pour:', src);
|
|
297
|
-
}
|
|
298
|
-
});
|
|
299
|
-
}
|
|
300
|
-
});
|
|
301
|
-
|
|
302
|
-
bbContents.utils.log('Module Images initialisé:', elements.length, 'éléments');
|
|
303
|
-
}
|
|
304
|
-
},
|
|
305
|
-
|
|
306
|
-
// Module Infinite Scroll
|
|
307
|
-
infinite: {
|
|
308
|
-
detect: function(scope) {
|
|
309
|
-
return scope.querySelector('[bb-infinite]') !== null;
|
|
310
|
-
},
|
|
311
|
-
|
|
312
|
-
init: function(scope) {
|
|
313
|
-
const elements = scope.querySelectorAll('[bb-infinite]');
|
|
314
|
-
if (elements.length === 0) return;
|
|
315
|
-
|
|
316
|
-
bbContents.utils.log('Module détecté: infinite');
|
|
317
|
-
|
|
318
|
-
elements.forEach(element => {
|
|
319
|
-
if (element.bbProcessed) return;
|
|
320
|
-
element.bbProcessed = true;
|
|
321
|
-
|
|
322
|
-
const threshold = bbContents._getAttr(element, 'bb-infinite-threshold') || '0.1';
|
|
323
|
-
const url = bbContents._getAttr(element, 'bb-infinite-url');
|
|
324
|
-
|
|
325
|
-
if (!url) {
|
|
326
|
-
bbContents.utils.log('Erreur: bb-infinite-url manquant');
|
|
327
|
-
return;
|
|
328
|
-
}
|
|
329
|
-
|
|
330
|
-
// Implémentation basique d'infinite scroll
|
|
331
|
-
let loading = false;
|
|
332
|
-
let page = 1;
|
|
333
|
-
|
|
334
|
-
const loadMore = () => {
|
|
335
|
-
if (loading) return;
|
|
336
|
-
loading = true;
|
|
337
|
-
|
|
338
|
-
fetch(`${url}?page=${page}`)
|
|
339
|
-
.then(response => response.json())
|
|
340
|
-
.then(data => {
|
|
341
|
-
if (data.items && data.items.length > 0) {
|
|
342
|
-
// Ajouter le contenu
|
|
343
|
-
element.innerHTML += data.html || '';
|
|
344
|
-
page++;
|
|
345
|
-
loading = false;
|
|
346
|
-
}
|
|
347
|
-
})
|
|
348
|
-
.catch(error => {
|
|
349
|
-
bbContents.utils.log('Erreur infinite scroll:', error);
|
|
350
|
-
loading = false;
|
|
351
|
-
});
|
|
352
|
-
};
|
|
353
|
-
|
|
354
|
-
// Observer d'intersection pour déclencher le chargement
|
|
355
|
-
const observer = new IntersectionObserver((entries) => {
|
|
356
|
-
entries.forEach(entry => {
|
|
357
|
-
if (entry.isIntersecting) {
|
|
358
|
-
loadMore();
|
|
359
|
-
}
|
|
360
|
-
});
|
|
361
|
-
}, { threshold: parseFloat(threshold) });
|
|
362
|
-
|
|
363
|
-
observer.observe(element);
|
|
364
|
-
});
|
|
365
|
-
|
|
366
|
-
bbContents.utils.log('Module Infinite Scroll initialisé:', elements.length, 'éléments');
|
|
367
|
-
}
|
|
368
|
-
},
|
|
369
|
-
|
|
370
|
-
// Module Marquee - Version live 1.0.33-beta avec améliorations d'initialisation
|
|
206
|
+
// Module Marquee - Version live 1.0.40-beta avec modules parasites supprimés
|
|
371
207
|
marquee: {
|
|
372
208
|
detect: function(scope) {
|
|
373
209
|
const s = scope || document;
|
|
@@ -389,7 +225,7 @@
|
|
|
389
225
|
elements.forEach(function(element) {
|
|
390
226
|
// Vérifier si l'élément a déjà été traité par un autre module
|
|
391
227
|
if (element.bbProcessed || element.hasAttribute('data-bb-youtube-processed')) {
|
|
392
|
-
|
|
228
|
+
// Élément marquee déjà traité par un autre module, ignoré
|
|
393
229
|
return;
|
|
394
230
|
}
|
|
395
231
|
element.bbProcessed = true;
|
|
@@ -432,6 +268,7 @@
|
|
|
432
268
|
gap: ${gap}px;
|
|
433
269
|
${isVertical ? '' : 'white-space: nowrap;'}
|
|
434
270
|
flex-shrink: 0;
|
|
271
|
+
transition: transform 0.1s ease-out;
|
|
435
272
|
`;
|
|
436
273
|
|
|
437
274
|
// Créer le bloc de contenu principal
|
|
@@ -487,11 +324,10 @@
|
|
|
487
324
|
// Si largeur trop petite, utiliser la largeur du parent
|
|
488
325
|
const parentRect = mainBlock.parentElement.getBoundingClientRect();
|
|
489
326
|
finalWidth = parentRect.width || mainBlock.parentElement.offsetWidth;
|
|
490
|
-
|
|
327
|
+
// Largeur corrigée pour marquee vertical
|
|
491
328
|
}
|
|
492
329
|
|
|
493
|
-
// Debug
|
|
494
|
-
bbContents.utils.log('Debug - Largeur:', finalWidth, 'px, Hauteur:', finalHeight, 'px, Images chargées:', imagesLoaded, 'Enfants:', mainBlock.children.length, 'Vertical:', isVertical, 'Direction:', direction, 'Tentative:', retryCount + 1);
|
|
330
|
+
// Debug supprimé pour console propre
|
|
495
331
|
|
|
496
332
|
// Vérifications robustes avant initialisation
|
|
497
333
|
const hasValidDimensions = (isVertical && finalHeight > 50) || (!isVertical && finalWidth > 50);
|
|
@@ -501,11 +337,11 @@
|
|
|
501
337
|
if (!hasValidDimensions || !imagesLoaded) {
|
|
502
338
|
if (retryCount < maxRetries) {
|
|
503
339
|
const delay = 300 + retryCount * 200; // Délais plus longs pour attendre les images
|
|
504
|
-
|
|
340
|
+
// Contenu/images non prêts, nouvelle tentative
|
|
505
341
|
setTimeout(() => initAnimation(retryCount + 1), delay);
|
|
506
342
|
return;
|
|
507
343
|
} else {
|
|
508
|
-
|
|
344
|
+
// Échec d'initialisation après plusieurs tentatives
|
|
509
345
|
return;
|
|
510
346
|
}
|
|
511
347
|
}
|
|
@@ -524,67 +360,66 @@
|
|
|
524
360
|
const baseStep = (parseFloat(speed) * 2) / 60; // Vitesse de base
|
|
525
361
|
let currentStep = baseStep;
|
|
526
362
|
let isPaused = false;
|
|
527
|
-
let
|
|
363
|
+
let animationId = null;
|
|
364
|
+
let lastTime = 0;
|
|
528
365
|
|
|
529
|
-
// Fonction d'animation JavaScript
|
|
530
|
-
const animate = () => {
|
|
366
|
+
// Fonction d'animation JavaScript optimisée
|
|
367
|
+
const animate = (currentTime) => {
|
|
368
|
+
if (!lastTime) lastTime = currentTime;
|
|
369
|
+
const deltaTime = currentTime - lastTime;
|
|
370
|
+
lastTime = currentTime;
|
|
371
|
+
|
|
531
372
|
if (direction === 'bottom') {
|
|
532
|
-
currentPosition += currentStep;
|
|
373
|
+
currentPosition += currentStep * (deltaTime / 16.67); // Normaliser à 60fps
|
|
533
374
|
if (currentPosition >= 0) {
|
|
534
375
|
currentPosition = -contentSize - parseInt(gap);
|
|
535
376
|
}
|
|
536
377
|
} else {
|
|
537
|
-
currentPosition -= currentStep;
|
|
378
|
+
currentPosition -= currentStep * (deltaTime / 16.67);
|
|
538
379
|
if (currentPosition <= -contentSize - parseInt(gap)) {
|
|
539
380
|
currentPosition = 0;
|
|
540
381
|
}
|
|
541
382
|
}
|
|
542
383
|
|
|
543
384
|
scrollContainer.style.transform = `translate3d(0px, ${currentPosition}px, 0px)`;
|
|
544
|
-
requestAnimationFrame(animate);
|
|
385
|
+
animationId = requestAnimationFrame(animate);
|
|
545
386
|
};
|
|
546
387
|
|
|
547
388
|
// Démarrer l'animation
|
|
548
|
-
animate
|
|
389
|
+
animationId = requestAnimationFrame(animate);
|
|
549
390
|
|
|
550
|
-
|
|
391
|
+
// Marquee vertical créé avec animation JS
|
|
551
392
|
|
|
552
|
-
// Pause au survol avec transition
|
|
393
|
+
// Pause au survol avec transition fluide CSS + JS
|
|
553
394
|
if (pauseOnHover === 'true') {
|
|
554
|
-
//
|
|
555
|
-
const transitionSpeed = (targetSpeed, duration =
|
|
556
|
-
if (pauseTransition) {
|
|
557
|
-
cancelAnimationFrame(pauseTransition);
|
|
558
|
-
}
|
|
559
|
-
|
|
395
|
+
// Transition fluide avec easing naturel
|
|
396
|
+
const transitionSpeed = (targetSpeed, duration = 300) => {
|
|
560
397
|
const startSpeed = currentStep;
|
|
561
398
|
const speedDiff = targetSpeed - startSpeed;
|
|
562
399
|
const startTime = performance.now();
|
|
563
400
|
|
|
564
|
-
|
|
565
|
-
const
|
|
401
|
+
// Easing naturel
|
|
402
|
+
const easeOutCubic = (t) => 1 - Math.pow(1 - t, 3);
|
|
403
|
+
const easeInCubic = (t) => t * t * t;
|
|
566
404
|
|
|
567
405
|
const animateTransition = (currentTime) => {
|
|
568
406
|
const elapsed = currentTime - startTime;
|
|
569
407
|
const progress = Math.min(elapsed / duration, 1);
|
|
570
408
|
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
currentStep = startSpeed + speedDiff * easeIn(progress);
|
|
577
|
-
}
|
|
409
|
+
// Easing différent selon la direction
|
|
410
|
+
const easedProgress = targetSpeed === 0 ?
|
|
411
|
+
easeOutCubic(progress) : easeInCubic(progress);
|
|
412
|
+
|
|
413
|
+
currentStep = startSpeed + speedDiff * easedProgress;
|
|
578
414
|
|
|
579
415
|
if (progress < 1) {
|
|
580
|
-
|
|
416
|
+
requestAnimationFrame(animateTransition);
|
|
581
417
|
} else {
|
|
582
418
|
currentStep = targetSpeed;
|
|
583
|
-
pauseTransition = null;
|
|
584
419
|
}
|
|
585
420
|
};
|
|
586
421
|
|
|
587
|
-
|
|
422
|
+
requestAnimationFrame(animateTransition);
|
|
588
423
|
};
|
|
589
424
|
|
|
590
425
|
element.addEventListener('mouseenter', function() {
|
|
@@ -604,67 +439,66 @@
|
|
|
604
439
|
const baseStep = (parseFloat(speed) * 0.5) / 60; // Vitesse de base
|
|
605
440
|
let currentStep = baseStep;
|
|
606
441
|
let isPaused = false;
|
|
607
|
-
let
|
|
442
|
+
let animationId = null;
|
|
443
|
+
let lastTime = 0;
|
|
608
444
|
|
|
609
|
-
// Fonction d'animation JavaScript
|
|
610
|
-
const animate = () => {
|
|
445
|
+
// Fonction d'animation JavaScript optimisée
|
|
446
|
+
const animate = (currentTime) => {
|
|
447
|
+
if (!lastTime) lastTime = currentTime;
|
|
448
|
+
const deltaTime = currentTime - lastTime;
|
|
449
|
+
lastTime = currentTime;
|
|
450
|
+
|
|
611
451
|
if (direction === 'right') {
|
|
612
|
-
currentPosition += currentStep;
|
|
452
|
+
currentPosition += currentStep * (deltaTime / 16.67); // Normaliser à 60fps
|
|
613
453
|
if (currentPosition >= 0) {
|
|
614
454
|
currentPosition = -contentSize - parseInt(gap);
|
|
615
455
|
}
|
|
616
456
|
} else {
|
|
617
|
-
currentPosition -= currentStep;
|
|
457
|
+
currentPosition -= currentStep * (deltaTime / 16.67);
|
|
618
458
|
if (currentPosition <= -contentSize - parseInt(gap)) {
|
|
619
459
|
currentPosition = 0;
|
|
620
460
|
}
|
|
621
461
|
}
|
|
622
462
|
|
|
623
463
|
scrollContainer.style.transform = `translate3d(${currentPosition}px, 0px, 0px)`;
|
|
624
|
-
requestAnimationFrame(animate);
|
|
464
|
+
animationId = requestAnimationFrame(animate);
|
|
625
465
|
};
|
|
626
466
|
|
|
627
467
|
// Démarrer l'animation
|
|
628
|
-
animate
|
|
468
|
+
animationId = requestAnimationFrame(animate);
|
|
629
469
|
|
|
630
|
-
|
|
470
|
+
// Marquee horizontal créé avec animation JS
|
|
631
471
|
|
|
632
|
-
// Pause au survol avec transition
|
|
472
|
+
// Pause au survol avec transition fluide CSS + JS
|
|
633
473
|
if (pauseOnHover === 'true') {
|
|
634
|
-
//
|
|
635
|
-
const transitionSpeed = (targetSpeed, duration =
|
|
636
|
-
if (pauseTransition) {
|
|
637
|
-
cancelAnimationFrame(pauseTransition);
|
|
638
|
-
}
|
|
639
|
-
|
|
474
|
+
// Transition fluide avec easing naturel
|
|
475
|
+
const transitionSpeed = (targetSpeed, duration = 300) => {
|
|
640
476
|
const startSpeed = currentStep;
|
|
641
477
|
const speedDiff = targetSpeed - startSpeed;
|
|
642
478
|
const startTime = performance.now();
|
|
643
479
|
|
|
644
|
-
|
|
645
|
-
const
|
|
480
|
+
// Easing naturel
|
|
481
|
+
const easeOutCubic = (t) => 1 - Math.pow(1 - t, 3);
|
|
482
|
+
const easeInCubic = (t) => t * t * t;
|
|
646
483
|
|
|
647
484
|
const animateTransition = (currentTime) => {
|
|
648
485
|
const elapsed = currentTime - startTime;
|
|
649
486
|
const progress = Math.min(elapsed / duration, 1);
|
|
650
487
|
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
currentStep = startSpeed + speedDiff * easeIn(progress);
|
|
657
|
-
}
|
|
488
|
+
// Easing différent selon la direction
|
|
489
|
+
const easedProgress = targetSpeed === 0 ?
|
|
490
|
+
easeOutCubic(progress) : easeInCubic(progress);
|
|
491
|
+
|
|
492
|
+
currentStep = startSpeed + speedDiff * easedProgress;
|
|
658
493
|
|
|
659
494
|
if (progress < 1) {
|
|
660
|
-
|
|
495
|
+
requestAnimationFrame(animateTransition);
|
|
661
496
|
} else {
|
|
662
497
|
currentStep = targetSpeed;
|
|
663
|
-
pauseTransition = null;
|
|
664
498
|
}
|
|
665
499
|
};
|
|
666
500
|
|
|
667
|
-
|
|
501
|
+
requestAnimationFrame(animateTransition);
|
|
668
502
|
};
|
|
669
503
|
|
|
670
504
|
element.addEventListener('mouseenter', function() {
|
|
@@ -686,7 +520,7 @@
|
|
|
686
520
|
|
|
687
521
|
// Attendre window.load si pas encore déclenché
|
|
688
522
|
if (document.readyState !== 'complete') {
|
|
689
|
-
|
|
523
|
+
// Attente de window.load pour initialiser le marquee
|
|
690
524
|
window.addEventListener('load', () => {
|
|
691
525
|
setTimeout(() => initAnimation(0), initDelay);
|
|
692
526
|
});
|
|
@@ -696,7 +530,7 @@
|
|
|
696
530
|
}
|
|
697
531
|
});
|
|
698
532
|
|
|
699
|
-
|
|
533
|
+
// Module Marquee initialisé
|
|
700
534
|
}
|
|
701
535
|
},
|
|
702
536
|
|
|
@@ -758,7 +592,7 @@
|
|
|
758
592
|
init: function(scope) {
|
|
759
593
|
// Vérifier si c'est un bot - pas d'appel API
|
|
760
594
|
if (this.isBot()) {
|
|
761
|
-
|
|
595
|
+
// Bot détecté, pas de chargement YouTube (économie API)
|
|
762
596
|
return;
|
|
763
597
|
}
|
|
764
598
|
|
|
@@ -768,12 +602,12 @@
|
|
|
768
602
|
const elements = scope.querySelectorAll('[bb-youtube-channel]');
|
|
769
603
|
if (elements.length === 0) return;
|
|
770
604
|
|
|
771
|
-
|
|
605
|
+
// Module détecté: youtube
|
|
772
606
|
|
|
773
607
|
elements.forEach(element => {
|
|
774
608
|
// Vérifier si l'élément a déjà été traité par un autre module
|
|
775
609
|
if (element.bbProcessed || element.hasAttribute('data-bb-marquee-processed')) {
|
|
776
|
-
|
|
610
|
+
// Élément youtube déjà traité par un autre module, ignoré
|
|
777
611
|
return;
|
|
778
612
|
}
|
|
779
613
|
element.bbProcessed = true;
|
|
@@ -785,13 +619,13 @@
|
|
|
785
619
|
const endpoint = bbContents.config.youtubeEndpoint;
|
|
786
620
|
|
|
787
621
|
if (!channelId) {
|
|
788
|
-
|
|
622
|
+
// Erreur: bb-youtube-channel manquant
|
|
789
623
|
return;
|
|
790
624
|
}
|
|
791
625
|
|
|
792
626
|
if (!endpoint) {
|
|
793
|
-
|
|
794
|
-
element.innerHTML = '<div style="padding: 20px; background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; color: #dc2626;"><strong>Configuration YouTube manquante</strong><br>Ajoutez : bbContents.config.youtubeEndpoint =
|
|
627
|
+
// Erreur: youtubeEndpoint non configuré
|
|
628
|
+
element.innerHTML = '<div style="padding: 20px; background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; color: #dc2626;"><strong>Configuration YouTube manquante</strong><br>Ajoutez dans le <head> :<br><code style="display: block; background: #f3f4f6; padding: 10px; margin: 10px 0; border-radius: 4px; font-family: monospace;"><script><br>bbContents.config.youtubeEndpoint = \'https://youtube-worker.maxkonzelmann.workers.dev\';<br></script></code></div>';
|
|
795
629
|
return;
|
|
796
630
|
}
|
|
797
631
|
|
|
@@ -809,7 +643,7 @@
|
|
|
809
643
|
}
|
|
810
644
|
|
|
811
645
|
if (!template) {
|
|
812
|
-
|
|
646
|
+
// Erreur: élément [bb-youtube-item] manquant
|
|
813
647
|
element.innerHTML = '<div style="padding: 20px; background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; color: #dc2626;"><strong>Template manquant</strong><br>Ajoutez un élément avec l\'attribut bb-youtube-item</div>';
|
|
814
648
|
return;
|
|
815
649
|
}
|
|
@@ -825,7 +659,7 @@
|
|
|
825
659
|
const cachedData = this.cache.get(cacheKey);
|
|
826
660
|
|
|
827
661
|
if (cachedData) {
|
|
828
|
-
|
|
662
|
+
// Données YouTube récupérées du cache (économie API)
|
|
829
663
|
this.generateYouTubeFeed(container, template, cachedData, allowShorts, language);
|
|
830
664
|
return;
|
|
831
665
|
}
|
|
@@ -848,20 +682,20 @@
|
|
|
848
682
|
|
|
849
683
|
// Sauvegarder en cache pour 24h
|
|
850
684
|
this.cache.set(cacheKey, data);
|
|
851
|
-
|
|
685
|
+
// Données YouTube mises en cache pour 24h (économie API)
|
|
852
686
|
|
|
853
687
|
this.generateYouTubeFeed(container, template, data, allowShorts, language);
|
|
854
688
|
})
|
|
855
689
|
.catch(error => {
|
|
856
|
-
|
|
690
|
+
// Erreur dans le module youtube
|
|
857
691
|
|
|
858
692
|
// En cas d'erreur, essayer de récupérer du cache même expiré
|
|
859
693
|
const expiredCache = localStorage.getItem(cacheKey);
|
|
860
694
|
if (expiredCache) {
|
|
861
695
|
try {
|
|
862
696
|
const cachedData = JSON.parse(expiredCache);
|
|
863
|
-
|
|
864
|
-
this.generateYouTubeFeed(container, template, cachedData.value, allowShorts);
|
|
697
|
+
// Utilisation du cache expiré en cas d'erreur API
|
|
698
|
+
this.generateYouTubeFeed(container, template, cachedData.value, allowShorts, language);
|
|
865
699
|
return;
|
|
866
700
|
} catch (e) {
|
|
867
701
|
// Ignorer les erreurs de parsing
|
|
@@ -881,7 +715,7 @@
|
|
|
881
715
|
|
|
882
716
|
// Les vidéos sont déjà filtrées par l'API YouTube selon allowShorts
|
|
883
717
|
let videos = data.items;
|
|
884
|
-
|
|
718
|
+
// Vidéos reçues de l'API
|
|
885
719
|
|
|
886
720
|
// Vider le conteneur (en préservant les éléments marquee)
|
|
887
721
|
const marqueeElements = container.querySelectorAll('[data-bb-marquee-processed]');
|
|
@@ -908,7 +742,7 @@
|
|
|
908
742
|
container.appendChild(clone);
|
|
909
743
|
});
|
|
910
744
|
|
|
911
|
-
|
|
745
|
+
// YouTube Feed généré
|
|
912
746
|
},
|
|
913
747
|
|
|
914
748
|
fillVideoData: function(element, videoId, snippet, language = 'fr') {
|
|
@@ -954,10 +788,10 @@
|
|
|
954
788
|
|
|
955
789
|
// Debug: logger la qualité utilisée (en mode debug seulement)
|
|
956
790
|
if (bbContents.config.debug) {
|
|
957
|
-
|
|
791
|
+
// Thumbnail optimisée
|
|
958
792
|
}
|
|
959
793
|
} else {
|
|
960
|
-
|
|
794
|
+
// Aucune thumbnail disponible
|
|
961
795
|
}
|
|
962
796
|
}
|
|
963
797
|
|
|
@@ -1068,7 +902,7 @@
|
|
|
1068
902
|
});
|
|
1069
903
|
|
|
1070
904
|
if (cleaned > 0) {
|
|
1071
|
-
|
|
905
|
+
// Cache YouTube nettoyé
|
|
1072
906
|
}
|
|
1073
907
|
} catch (e) {
|
|
1074
908
|
// Ignorer les erreurs de nettoyage
|
|
@@ -1106,7 +940,7 @@
|
|
|
1106
940
|
// Vérifier s'il y a des éléments non initialisés
|
|
1107
941
|
const unprocessedMarquees = document.querySelectorAll('[bb-marquee]:not([data-bb-marquee-processed])');
|
|
1108
942
|
if (unprocessedMarquees.length > 0) {
|
|
1109
|
-
|
|
943
|
+
// Éléments marquee non initialisés détectés après load, réinitialisation
|
|
1110
944
|
bbContents.reinit();
|
|
1111
945
|
}
|
|
1112
946
|
|
|
@@ -1114,7 +948,7 @@
|
|
|
1114
948
|
const allImages = document.querySelectorAll('img');
|
|
1115
949
|
const unloadedImages = Array.from(allImages).filter(img => !img.complete || img.naturalHeight === 0);
|
|
1116
950
|
if (unloadedImages.length > 0) {
|
|
1117
|
-
|
|
951
|
+
// Images non chargées détectées, attente supplémentaire
|
|
1118
952
|
setTimeout(() => {
|
|
1119
953
|
bbContents.reinit();
|
|
1120
954
|
}, 1000);
|