@bebranded/bb-contents 1.1.18 → 1.1.19
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 +32 -9
- 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.1.
|
|
4
|
+
* @version 1.1.19
|
|
5
5
|
* @author BeBranded
|
|
6
6
|
* @license MIT
|
|
7
7
|
* @website https://www.bebranded.xyz
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
'use strict';
|
|
11
11
|
|
|
12
12
|
// Version du script
|
|
13
|
-
const BB_CONTENTS_VERSION = '1.1.
|
|
13
|
+
const BB_CONTENTS_VERSION = '1.1.19';
|
|
14
14
|
|
|
15
15
|
// Créer l'objet temporaire pour la configuration si il n'existe pas
|
|
16
16
|
if (!window._bbContentsConfig) {
|
|
@@ -297,7 +297,7 @@
|
|
|
297
297
|
block.querySelector('[class*="dropdown"]') !== null;
|
|
298
298
|
},
|
|
299
299
|
|
|
300
|
-
// Dropdown en portal (fixed) au-dessus du toggle, aligné en haut à droite, pour
|
|
300
|
+
// Dropdown en portal (fixed) au-dessus du toggle, aligné en haut à droite; copie des styles Webflow, délai pour atteindre la list
|
|
301
301
|
_enableMarqueeDropdowns: function(block) {
|
|
302
302
|
if (!block || !block.querySelectorAll) return;
|
|
303
303
|
const items = block.querySelectorAll('.bb-marquee_item, [role="listitem"]');
|
|
@@ -311,38 +311,59 @@
|
|
|
311
311
|
item.style.overflow = 'visible';
|
|
312
312
|
dropdown.style.overflow = 'visible';
|
|
313
313
|
let portalWrapper = null;
|
|
314
|
+
let leaveTimer = null;
|
|
315
|
+
|
|
316
|
+
var marqueeEl = dropdown.closest('[data-bb-marquee-processed]');
|
|
314
317
|
|
|
315
318
|
function closePortal() {
|
|
319
|
+
if (leaveTimer) clearTimeout(leaveTimer);
|
|
320
|
+
leaveTimer = null;
|
|
316
321
|
if (portalWrapper && portalWrapper.parentNode) {
|
|
317
322
|
portalWrapper.parentNode.removeChild(portalWrapper);
|
|
318
323
|
}
|
|
319
324
|
portalWrapper = null;
|
|
320
325
|
dropdown.classList.remove('w--open');
|
|
326
|
+
if (marqueeEl) marqueeEl.removeAttribute('data-bb-marquee-dropdown-open');
|
|
321
327
|
}
|
|
322
328
|
|
|
323
329
|
function openPortal() {
|
|
330
|
+
if (leaveTimer) clearTimeout(leaveTimer);
|
|
331
|
+
leaveTimer = null;
|
|
324
332
|
if (portalWrapper && portalWrapper.parentNode) return;
|
|
333
|
+
if (marqueeEl) marqueeEl.setAttribute('data-bb-marquee-dropdown-open', '1');
|
|
325
334
|
const rect = toggle.getBoundingClientRect();
|
|
335
|
+
const listStyle = getComputedStyle(list);
|
|
326
336
|
portalWrapper = document.createElement('div');
|
|
327
337
|
portalWrapper.setAttribute('data-bb-marquee-dropdown-portal', 'true');
|
|
338
|
+
portalWrapper.className = 'w-dropdown';
|
|
328
339
|
portalWrapper.style.cssText =
|
|
329
340
|
'position:fixed;right:' + (window.innerWidth - rect.right) + 'px;top:' + rect.top + 'px;' +
|
|
330
|
-
'transform:translateY(-100%);margin-top:-4px;z-index:9999;background:
|
|
341
|
+
'transform:translateY(-100%);margin-top:-4px;z-index:9999;background:none;border:none;';
|
|
331
342
|
const clone = list.cloneNode(true);
|
|
332
343
|
clone.style.display = 'block';
|
|
344
|
+
clone.style.background = listStyle.background || listStyle.backgroundColor || 'transparent';
|
|
345
|
+
clone.style.backgroundColor = listStyle.backgroundColor;
|
|
346
|
+
clone.style.backgroundImage = listStyle.backgroundImage;
|
|
333
347
|
portalWrapper.appendChild(clone);
|
|
334
|
-
portalWrapper.addEventListener('mouseenter', function() {
|
|
335
|
-
|
|
348
|
+
portalWrapper.addEventListener('mouseenter', function() {
|
|
349
|
+
if (leaveTimer) clearTimeout(leaveTimer);
|
|
350
|
+
leaveTimer = null;
|
|
351
|
+
});
|
|
352
|
+
portalWrapper.addEventListener('mouseleave', function() {
|
|
353
|
+
leaveTimer = setTimeout(closePortal, 120);
|
|
354
|
+
});
|
|
336
355
|
document.body.appendChild(portalWrapper);
|
|
337
356
|
dropdown.classList.add('w--open');
|
|
338
357
|
}
|
|
339
358
|
|
|
340
359
|
dropdown.addEventListener('mouseenter', function() {
|
|
360
|
+
if (leaveTimer) clearTimeout(leaveTimer);
|
|
361
|
+
leaveTimer = null;
|
|
341
362
|
openPortal();
|
|
342
363
|
});
|
|
343
364
|
dropdown.addEventListener('mouseleave', function(e) {
|
|
344
365
|
if (portalWrapper && e.relatedTarget && portalWrapper.contains(e.relatedTarget)) return;
|
|
345
|
-
closePortal
|
|
366
|
+
leaveTimer = setTimeout(closePortal, 120);
|
|
346
367
|
});
|
|
347
368
|
});
|
|
348
369
|
});
|
|
@@ -1096,7 +1117,8 @@
|
|
|
1096
1117
|
// Fonction d'animation Safari optimisée
|
|
1097
1118
|
let lastTime = performance.now();
|
|
1098
1119
|
const animate = (currentTime) => {
|
|
1099
|
-
|
|
1120
|
+
const dropdownOpen = element.getAttribute('data-bb-marquee-dropdown-open') === '1';
|
|
1121
|
+
if (!isPaused && !dropdownOpen) {
|
|
1100
1122
|
// Animation basée sur le temps
|
|
1101
1123
|
const deltaTime = isSafari && isMobile ? (currentTime - lastTime) / 16.67 : 1;
|
|
1102
1124
|
lastTime = currentTime;
|
|
@@ -1183,7 +1205,8 @@
|
|
|
1183
1205
|
// Fonction d'animation standard avec gestion du temps pour fluidité constante
|
|
1184
1206
|
let lastTime = performance.now();
|
|
1185
1207
|
const animate = (currentTime) => {
|
|
1186
|
-
|
|
1208
|
+
const dropdownOpen = element.getAttribute('data-bb-marquee-dropdown-open') === '1';
|
|
1209
|
+
if (!isPaused && !dropdownOpen) {
|
|
1187
1210
|
// Calculer le delta de temps pour une vitesse constante même si le navigateur ralentit
|
|
1188
1211
|
const deltaTime = (currentTime - lastTime) / 16.67; // Normaliser à 60fps
|
|
1189
1212
|
lastTime = currentTime;
|