@bebranded/bb-contents 1.1.13 → 1.1.15
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 +40 -23
- 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.15
|
|
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.15';
|
|
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
|
-
// Active le comportement hover pour les dropdowns dans un bloc du marquee (
|
|
300
|
+
// Active le comportement hover pour les dropdowns dans un bloc du marquee (portal hors scrollContainer pour éviter le clipping)
|
|
301
301
|
_enableMarqueeDropdowns: function(block) {
|
|
302
302
|
if (!block || !block.querySelectorAll) return;
|
|
303
303
|
const items = block.querySelectorAll('.bb-marquee_item, [role="listitem"]');
|
|
@@ -306,18 +306,49 @@
|
|
|
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 leaveTimer;
|
|
313
|
-
|
|
314
|
+
let portalWrapper = null;
|
|
315
|
+
|
|
316
|
+
function closePortal() {
|
|
317
|
+
if (portalWrapper && portalWrapper.parentNode) {
|
|
318
|
+
portalWrapper.parentNode.removeChild(portalWrapper);
|
|
319
|
+
}
|
|
320
|
+
portalWrapper = null;
|
|
321
|
+
dropdown.classList.remove('w--open');
|
|
322
|
+
}
|
|
323
|
+
|
|
324
|
+
function openPortal() {
|
|
314
325
|
clearTimeout(leaveTimer);
|
|
326
|
+
if (portalWrapper && portalWrapper.parentNode) return;
|
|
327
|
+
const rect = toggle.getBoundingClientRect();
|
|
328
|
+
portalWrapper = document.createElement('div');
|
|
329
|
+
portalWrapper.setAttribute('data-bb-marquee-dropdown-portal', 'true');
|
|
330
|
+
portalWrapper.style.cssText = 'position:fixed;left:' + rect.left + 'px;top:' + (rect.bottom + 4) + 'px;z-index:9999;';
|
|
331
|
+
const clone = list.cloneNode(true);
|
|
332
|
+
clone.style.display = 'block';
|
|
333
|
+
clone.style.visibility = 'visible';
|
|
334
|
+
clone.style.opacity = '1';
|
|
335
|
+
clone.style.position = 'absolute';
|
|
336
|
+
clone.style.left = '0';
|
|
337
|
+
clone.style.top = '0';
|
|
338
|
+
portalWrapper.appendChild(clone);
|
|
339
|
+
portalWrapper.addEventListener('mouseenter', function() { clearTimeout(leaveTimer); });
|
|
340
|
+
portalWrapper.addEventListener('mouseleave', function() {
|
|
341
|
+
leaveTimer = setTimeout(closePortal, 150);
|
|
342
|
+
});
|
|
343
|
+
document.body.appendChild(portalWrapper);
|
|
315
344
|
dropdown.classList.add('w--open');
|
|
345
|
+
}
|
|
346
|
+
|
|
347
|
+
dropdown.addEventListener('mouseenter', function() {
|
|
348
|
+
openPortal();
|
|
316
349
|
});
|
|
317
350
|
dropdown.addEventListener('mouseleave', function() {
|
|
318
|
-
leaveTimer = setTimeout(
|
|
319
|
-
dropdown.classList.remove('w--open');
|
|
320
|
-
}, 150);
|
|
351
|
+
leaveTimer = setTimeout(closePortal, 150);
|
|
321
352
|
});
|
|
322
353
|
});
|
|
323
354
|
});
|
|
@@ -688,8 +719,7 @@
|
|
|
688
719
|
});
|
|
689
720
|
if (maxHeight === 0) maxHeight = mainBlock.offsetHeight || scrollContainer.offsetHeight;
|
|
690
721
|
if (maxHeight > 0) {
|
|
691
|
-
|
|
692
|
-
mainContainer.style.height = (maxHeight + extraForDropdowns) + 'px';
|
|
722
|
+
mainContainer.style.height = maxHeight + 'px';
|
|
693
723
|
}
|
|
694
724
|
if (hasDropdowns) {
|
|
695
725
|
this._enableMarqueeDropdowns(mainBlock);
|
|
@@ -759,19 +789,6 @@
|
|
|
759
789
|
this._enableMarqueeDropdowns(repeatBlock1);
|
|
760
790
|
this._enableMarqueeDropdowns(repeatBlock2);
|
|
761
791
|
}
|
|
762
|
-
if (!isVertical && hasDropdowns) {
|
|
763
|
-
requestAnimationFrame(function() {
|
|
764
|
-
let items = mainBlock.querySelectorAll('.bb-marquee_item, [role="listitem"]');
|
|
765
|
-
if (items.length === 0) items = mainBlock.querySelectorAll(':scope > *');
|
|
766
|
-
let maxHeight = 0;
|
|
767
|
-
items.forEach(function(item) {
|
|
768
|
-
const h = item.offsetHeight;
|
|
769
|
-
if (h > maxHeight) maxHeight = h;
|
|
770
|
-
});
|
|
771
|
-
if (maxHeight === 0) maxHeight = mainBlock.offsetHeight || scrollContainer.offsetHeight;
|
|
772
|
-
if (maxHeight > 0) mainContainer.style.height = (maxHeight + 280) + 'px';
|
|
773
|
-
});
|
|
774
|
-
}
|
|
775
792
|
const initDelay = isVertical ? 500 : 300;
|
|
776
793
|
setTimeout(() => {
|
|
777
794
|
this.initAnimation(element, scrollContainer, mainBlock, {
|