@bebranded/bb-contents 1.1.17 → 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 +61 -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
|
-
//
|
|
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"]');
|
|
@@ -306,14 +306,64 @@
|
|
|
306
306
|
const dropdowns = item.querySelectorAll('.w-dropdown, [class*="dropdown"]');
|
|
307
307
|
dropdowns.forEach(function(dropdown) {
|
|
308
308
|
const list = dropdown.querySelector('.w-dropdown-list, [class*="dropdown-list"], [class*="dropdown_list"]');
|
|
309
|
-
|
|
309
|
+
const toggle = dropdown.querySelector('.w-dropdown-toggle, [class*="dropdown-toggle"]');
|
|
310
|
+
if (!list || !toggle) return;
|
|
310
311
|
item.style.overflow = 'visible';
|
|
311
312
|
dropdown.style.overflow = 'visible';
|
|
312
|
-
|
|
313
|
+
let portalWrapper = null;
|
|
314
|
+
let leaveTimer = null;
|
|
315
|
+
|
|
316
|
+
var marqueeEl = dropdown.closest('[data-bb-marquee-processed]');
|
|
317
|
+
|
|
318
|
+
function closePortal() {
|
|
319
|
+
if (leaveTimer) clearTimeout(leaveTimer);
|
|
320
|
+
leaveTimer = null;
|
|
321
|
+
if (portalWrapper && portalWrapper.parentNode) {
|
|
322
|
+
portalWrapper.parentNode.removeChild(portalWrapper);
|
|
323
|
+
}
|
|
324
|
+
portalWrapper = null;
|
|
325
|
+
dropdown.classList.remove('w--open');
|
|
326
|
+
if (marqueeEl) marqueeEl.removeAttribute('data-bb-marquee-dropdown-open');
|
|
327
|
+
}
|
|
328
|
+
|
|
329
|
+
function openPortal() {
|
|
330
|
+
if (leaveTimer) clearTimeout(leaveTimer);
|
|
331
|
+
leaveTimer = null;
|
|
332
|
+
if (portalWrapper && portalWrapper.parentNode) return;
|
|
333
|
+
if (marqueeEl) marqueeEl.setAttribute('data-bb-marquee-dropdown-open', '1');
|
|
334
|
+
const rect = toggle.getBoundingClientRect();
|
|
335
|
+
const listStyle = getComputedStyle(list);
|
|
336
|
+
portalWrapper = document.createElement('div');
|
|
337
|
+
portalWrapper.setAttribute('data-bb-marquee-dropdown-portal', 'true');
|
|
338
|
+
portalWrapper.className = 'w-dropdown';
|
|
339
|
+
portalWrapper.style.cssText =
|
|
340
|
+
'position:fixed;right:' + (window.innerWidth - rect.right) + 'px;top:' + rect.top + 'px;' +
|
|
341
|
+
'transform:translateY(-100%);margin-top:-4px;z-index:9999;background:none;border:none;';
|
|
342
|
+
const clone = list.cloneNode(true);
|
|
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;
|
|
347
|
+
portalWrapper.appendChild(clone);
|
|
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
|
+
});
|
|
355
|
+
document.body.appendChild(portalWrapper);
|
|
313
356
|
dropdown.classList.add('w--open');
|
|
357
|
+
}
|
|
358
|
+
|
|
359
|
+
dropdown.addEventListener('mouseenter', function() {
|
|
360
|
+
if (leaveTimer) clearTimeout(leaveTimer);
|
|
361
|
+
leaveTimer = null;
|
|
362
|
+
openPortal();
|
|
314
363
|
});
|
|
315
|
-
dropdown.addEventListener('mouseleave', function() {
|
|
316
|
-
|
|
364
|
+
dropdown.addEventListener('mouseleave', function(e) {
|
|
365
|
+
if (portalWrapper && e.relatedTarget && portalWrapper.contains(e.relatedTarget)) return;
|
|
366
|
+
leaveTimer = setTimeout(closePortal, 120);
|
|
317
367
|
});
|
|
318
368
|
});
|
|
319
369
|
});
|
|
@@ -1067,7 +1117,8 @@
|
|
|
1067
1117
|
// Fonction d'animation Safari optimisée
|
|
1068
1118
|
let lastTime = performance.now();
|
|
1069
1119
|
const animate = (currentTime) => {
|
|
1070
|
-
|
|
1120
|
+
const dropdownOpen = element.getAttribute('data-bb-marquee-dropdown-open') === '1';
|
|
1121
|
+
if (!isPaused && !dropdownOpen) {
|
|
1071
1122
|
// Animation basée sur le temps
|
|
1072
1123
|
const deltaTime = isSafari && isMobile ? (currentTime - lastTime) / 16.67 : 1;
|
|
1073
1124
|
lastTime = currentTime;
|
|
@@ -1154,7 +1205,8 @@
|
|
|
1154
1205
|
// Fonction d'animation standard avec gestion du temps pour fluidité constante
|
|
1155
1206
|
let lastTime = performance.now();
|
|
1156
1207
|
const animate = (currentTime) => {
|
|
1157
|
-
|
|
1208
|
+
const dropdownOpen = element.getAttribute('data-bb-marquee-dropdown-open') === '1';
|
|
1209
|
+
if (!isPaused && !dropdownOpen) {
|
|
1158
1210
|
// Calculer le delta de temps pour une vitesse constante même si le navigateur ralentit
|
|
1159
1211
|
const deltaTime = (currentTime - lastTime) / 16.67; // Normaliser à 60fps
|
|
1160
1212
|
lastTime = currentTime;
|