@bebranded/bb-contents 1.0.18-beta → 1.0.19-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 +22 -37
- 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.19-beta
|
|
5
5
|
* @author BeBranded
|
|
6
6
|
* @license MIT
|
|
7
7
|
* @website https://www.bebranded.xyz
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
|
|
18
18
|
// Configuration
|
|
19
19
|
const config = {
|
|
20
|
-
version: '1.0.
|
|
20
|
+
version: '1.0.19-beta',
|
|
21
21
|
debug: window.location.hostname === 'localhost' || window.location.hostname.includes('webflow.io'),
|
|
22
22
|
prefix: 'bb-', // utilisé pour générer les sélecteurs (data-bb-*)
|
|
23
23
|
i18n: {
|
|
@@ -304,7 +304,7 @@
|
|
|
304
304
|
}
|
|
305
305
|
},
|
|
306
306
|
|
|
307
|
-
// Module Marquee - Version
|
|
307
|
+
// Module Marquee - Version simplifiée et corrigée
|
|
308
308
|
marquee: {
|
|
309
309
|
detect: function(scope) {
|
|
310
310
|
return scope.querySelector('[bb-marquee]') !== null;
|
|
@@ -320,7 +320,7 @@
|
|
|
320
320
|
if (element.bbProcessed) return;
|
|
321
321
|
element.bbProcessed = true;
|
|
322
322
|
|
|
323
|
-
// Récupérer les options
|
|
323
|
+
// Récupérer les options
|
|
324
324
|
const speed = bbContents._getAttr(element, 'bb-marquee-speed') || '100';
|
|
325
325
|
const direction = bbContents._getAttr(element, 'bb-marquee-direction') || 'left';
|
|
326
326
|
const pause = bbContents._getAttr(element, 'bb-marquee-pause') || 'true';
|
|
@@ -329,8 +329,8 @@
|
|
|
329
329
|
const height = bbContents._getAttr(element, 'bb-marquee-height');
|
|
330
330
|
const minHeight = bbContents._getAttr(element, 'bb-marquee-min-height');
|
|
331
331
|
|
|
332
|
-
//
|
|
333
|
-
const
|
|
332
|
+
// Sauvegarder le contenu original
|
|
333
|
+
const originalContent = element.innerHTML;
|
|
334
334
|
|
|
335
335
|
// Créer le conteneur principal
|
|
336
336
|
const mainContainer = document.createElement('div');
|
|
@@ -342,7 +342,7 @@
|
|
|
342
342
|
${minHeight ? `min-height: ${minHeight};` : ''}
|
|
343
343
|
`;
|
|
344
344
|
|
|
345
|
-
// Créer le conteneur de défilement
|
|
345
|
+
// Créer le conteneur de défilement
|
|
346
346
|
const scrollContainer = document.createElement('div');
|
|
347
347
|
scrollContainer.style.cssText = `
|
|
348
348
|
display: flex;
|
|
@@ -350,48 +350,38 @@
|
|
|
350
350
|
${orientation === 'vertical' ? 'flex-direction: column;' : ''}
|
|
351
351
|
gap: ${gap}px;
|
|
352
352
|
will-change: transform;
|
|
353
|
-
${orientation === 'vertical' ? 'white-space: nowrap;' : ''}
|
|
354
353
|
`;
|
|
355
354
|
|
|
356
|
-
// Dupliquer le contenu
|
|
357
|
-
const originalContent = element.innerHTML;
|
|
355
|
+
// Dupliquer le contenu
|
|
358
356
|
scrollContainer.innerHTML = originalContent + originalContent;
|
|
359
357
|
|
|
360
|
-
//
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
0% { transform: translateX(0); }
|
|
365
|
-
100% { transform: translateX(-50%); }
|
|
366
|
-
}
|
|
367
|
-
@keyframes marquee-vertical {
|
|
368
|
-
0% { transform: translateY(0); }
|
|
369
|
-
100% { transform: translateY(-50%); }
|
|
370
|
-
}
|
|
371
|
-
`;
|
|
372
|
-
document.head.appendChild(style);
|
|
358
|
+
// Assembler
|
|
359
|
+
mainContainer.appendChild(scrollContainer);
|
|
360
|
+
element.innerHTML = '';
|
|
361
|
+
element.appendChild(mainContainer);
|
|
373
362
|
|
|
374
|
-
//
|
|
363
|
+
// Animation JavaScript simple et efficace
|
|
375
364
|
const isVertical = orientation === 'vertical';
|
|
376
365
|
let animationId;
|
|
377
366
|
let startTime;
|
|
378
367
|
let currentPosition = 0;
|
|
379
|
-
const contentSize = isVertical ? scrollContainer.scrollHeight / 2 : scrollContainer.scrollWidth / 2;
|
|
380
368
|
|
|
381
369
|
const animate = (timestamp) => {
|
|
382
370
|
if (!startTime) startTime = timestamp;
|
|
383
371
|
const elapsed = timestamp - startTime;
|
|
384
372
|
|
|
385
|
-
//
|
|
373
|
+
// Vitesse en millisecondes
|
|
374
|
+
const speedMs = parseInt(speed);
|
|
386
375
|
const progress = (elapsed % speedMs) / speedMs;
|
|
376
|
+
|
|
377
|
+
// Calculer la taille du contenu
|
|
378
|
+
const contentSize = isVertical ? scrollContainer.scrollHeight / 2 : scrollContainer.scrollWidth / 2;
|
|
387
379
|
currentPosition = -progress * contentSize;
|
|
388
380
|
|
|
389
381
|
// Appliquer la transformation
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
scrollContainer.style.transform = `translateX(${currentPosition}px)`;
|
|
394
|
-
}
|
|
382
|
+
scrollContainer.style.transform = isVertical
|
|
383
|
+
? `translateY(${currentPosition}px)`
|
|
384
|
+
: `translateX(${currentPosition}px)`;
|
|
395
385
|
|
|
396
386
|
animationId = requestAnimationFrame(animate);
|
|
397
387
|
};
|
|
@@ -428,14 +418,9 @@
|
|
|
428
418
|
mainContainer.style.height = maxHeight + 'px';
|
|
429
419
|
}
|
|
430
420
|
}
|
|
431
|
-
|
|
432
|
-
// Assembler
|
|
433
|
-
mainContainer.appendChild(scrollContainer);
|
|
434
|
-
element.innerHTML = '';
|
|
435
|
-
element.appendChild(mainContainer);
|
|
436
421
|
});
|
|
437
422
|
|
|
438
|
-
bbContents.utils.log('Module Marquee
|
|
423
|
+
bbContents.utils.log('Module Marquee initialisé:', elements.length, 'éléments');
|
|
439
424
|
}
|
|
440
425
|
},
|
|
441
426
|
|