@bebranded/bb-contents 1.1.17 → 1.1.18

package/bb-contents.js

@@ -1,7 +1,7 @@
 /**
  * BeBranded Contents
  * Contenus additionnels français pour Webflow
- * @version 1.1.17
+ * @version 1.1.18
  * @author BeBranded
  * @license MIT
  * @website https://www.bebranded.xyz
@@ -10,7 +10,7 @@
     'use strict';
 
     // Version du script
-    const BB_CONTENTS_VERSION = '1.1.17';
+    const BB_CONTENTS_VERSION = '1.1.18';
 
     // Créer l'objet temporaire pour la configuration si il n'existe pas
     if (!window._bbContentsConfig) {
@@ -297,7 +297,7 @@
                     block.querySelector('[class*="dropdown"]') !== null;
             },
 
-            // Active le comportement hover pour les dropdowns dans un bloc du marquee (w--open uniquement, position et styles 100 % Webflow)
+            // Dropdown en portal (fixed) au-dessus du toggle, aligné en haut à droite, pour éviter le clipping du marquee
             _enableMarqueeDropdowns: function(block) {
                 if (!block || !block.querySelectorAll) return;
                 const items = block.querySelectorAll('.bb-marquee_item, [role="listitem"]');
@@ -306,14 +306,43 @@
                     const dropdowns = item.querySelectorAll('.w-dropdown, [class*="dropdown"]');
                     dropdowns.forEach(function(dropdown) {
                         const list = dropdown.querySelector('.w-dropdown-list, [class*="dropdown-list"], [class*="dropdown_list"]');
-                        if (!list) return;
+                        const toggle = dropdown.querySelector('.w-dropdown-toggle, [class*="dropdown-toggle"]');
+                        if (!list || !toggle) return;
                         item.style.overflow = 'visible';
                         dropdown.style.overflow = 'visible';
-                        dropdown.addEventListener('mouseenter', function() {
+                        let portalWrapper = null;
+
+                        function closePortal() {
+                            if (portalWrapper && portalWrapper.parentNode) {
+                                portalWrapper.parentNode.removeChild(portalWrapper);
+                            }
+                            portalWrapper = null;
+                            dropdown.classList.remove('w--open');
+                        }
+
+                        function openPortal() {
+                            if (portalWrapper && portalWrapper.parentNode) return;
+                            const rect = toggle.getBoundingClientRect();
+                            portalWrapper = document.createElement('div');
+                            portalWrapper.setAttribute('data-bb-marquee-dropdown-portal', 'true');
+                            portalWrapper.style.cssText =
+                                'position:fixed;right:' + (window.innerWidth - rect.right) + 'px;top:' + rect.top + 'px;' +
+                                'transform:translateY(-100%);margin-top:-4px;z-index:9999;background:transparent;';
+                            const clone = list.cloneNode(true);
+                            clone.style.display = 'block';
+                            portalWrapper.appendChild(clone);
+                            portalWrapper.addEventListener('mouseenter', function() {});
+                            portalWrapper.addEventListener('mouseleave', function() { closePortal(); });
+                            document.body.appendChild(portalWrapper);
                             dropdown.classList.add('w--open');
+                        }
+
+                        dropdown.addEventListener('mouseenter', function() {
+                            openPortal();
                         });
-                        dropdown.addEventListener('mouseleave', function() {
-                            dropdown.classList.remove('w--open');
+                        dropdown.addEventListener('mouseleave', function(e) {
+                            if (portalWrapper && e.relatedTarget && portalWrapper.contains(e.relatedTarget)) return;
+                            closePortal();
                         });
                     });
                 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bebranded/bb-contents",
-  "version": "1.1.17",
+  "version": "1.1.18",
   "description": "Contenus additionnels français pour Webflow",
   "main": "bb-contents.js",
   "scripts": {