@bebranded/bb-contents 1.1.18 → 1.1.20

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.
Files changed (2) hide show
  1. package/bb-contents.js +56 -12
  2. 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.18
4
+ * @version 1.1.20
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.18';
13
+ const BB_CONTENTS_VERSION = '1.1.20';
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 éviter le clipping du marquee
300
+ // Dropdown en portal : position fixe *par rapport au toggle* (mise à jour au scroll/resize pour suivre le bouton)
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,80 @@
311
311
  item.style.overflow = 'visible';
312
312
  dropdown.style.overflow = 'visible';
313
313
  let portalWrapper = null;
314
+ let leaveTimer = null;
315
+ let scrollResizeCleanup = null;
316
+
317
+ var marqueeEl = dropdown.closest('[data-bb-marquee-processed]');
318
+
319
+ function updatePortalPosition() {
320
+ if (!portalWrapper || !portalWrapper.parentNode) return;
321
+ var rect = toggle.getBoundingClientRect();
322
+ portalWrapper.style.right = (window.innerWidth - rect.right) + 'px';
323
+ portalWrapper.style.top = rect.top + 'px';
324
+ }
314
325
 
315
326
  function closePortal() {
327
+ if (leaveTimer) clearTimeout(leaveTimer);
328
+ leaveTimer = null;
329
+ if (scrollResizeCleanup) {
330
+ scrollResizeCleanup();
331
+ scrollResizeCleanup = null;
332
+ }
316
333
  if (portalWrapper && portalWrapper.parentNode) {
317
334
  portalWrapper.parentNode.removeChild(portalWrapper);
318
335
  }
319
336
  portalWrapper = null;
320
337
  dropdown.classList.remove('w--open');
338
+ if (marqueeEl) marqueeEl.removeAttribute('data-bb-marquee-dropdown-open');
321
339
  }
322
340
 
323
341
  function openPortal() {
342
+ if (leaveTimer) clearTimeout(leaveTimer);
343
+ leaveTimer = null;
324
344
  if (portalWrapper && portalWrapper.parentNode) return;
325
- const rect = toggle.getBoundingClientRect();
345
+ if (marqueeEl) marqueeEl.setAttribute('data-bb-marquee-dropdown-open', '1');
346
+ var rect = toggle.getBoundingClientRect();
347
+ var listStyle = getComputedStyle(list);
326
348
  portalWrapper = document.createElement('div');
327
349
  portalWrapper.setAttribute('data-bb-marquee-dropdown-portal', 'true');
350
+ portalWrapper.className = 'w-dropdown';
328
351
  portalWrapper.style.cssText =
329
- 'position:fixed;right:' + (window.innerWidth - rect.right) + 'px;top:' + rect.top + 'px;' +
330
- 'transform:translateY(-100%);margin-top:-4px;z-index:9999;background:transparent;';
331
- const clone = list.cloneNode(true);
352
+ 'position:fixed;transform:translateY(-100%);margin-top:-4px;z-index:9999;background:none;border:none;';
353
+ updatePortalPosition();
354
+ var clone = list.cloneNode(true);
332
355
  clone.style.display = 'block';
356
+ clone.style.background = listStyle.background || listStyle.backgroundColor || 'transparent';
357
+ clone.style.backgroundColor = listStyle.backgroundColor;
358
+ clone.style.backgroundImage = listStyle.backgroundImage;
333
359
  portalWrapper.appendChild(clone);
334
- portalWrapper.addEventListener('mouseenter', function() {});
335
- portalWrapper.addEventListener('mouseleave', function() { closePortal(); });
360
+ portalWrapper.addEventListener('mouseenter', function() {
361
+ if (leaveTimer) clearTimeout(leaveTimer);
362
+ leaveTimer = null;
363
+ });
364
+ portalWrapper.addEventListener('mouseleave', function() {
365
+ leaveTimer = setTimeout(closePortal, 120);
366
+ });
336
367
  document.body.appendChild(portalWrapper);
337
368
  dropdown.classList.add('w--open');
369
+ var onScrollOrResize = function() {
370
+ updatePortalPosition();
371
+ };
372
+ window.addEventListener('scroll', onScrollOrResize, true);
373
+ window.addEventListener('resize', onScrollOrResize);
374
+ scrollResizeCleanup = function() {
375
+ window.removeEventListener('scroll', onScrollOrResize, true);
376
+ window.removeEventListener('resize', onScrollOrResize);
377
+ };
338
378
  }
339
379
 
340
380
  dropdown.addEventListener('mouseenter', function() {
381
+ if (leaveTimer) clearTimeout(leaveTimer);
382
+ leaveTimer = null;
341
383
  openPortal();
342
384
  });
343
385
  dropdown.addEventListener('mouseleave', function(e) {
344
386
  if (portalWrapper && e.relatedTarget && portalWrapper.contains(e.relatedTarget)) return;
345
- closePortal();
387
+ leaveTimer = setTimeout(closePortal, 120);
346
388
  });
347
389
  });
348
390
  });
@@ -1096,7 +1138,8 @@
1096
1138
  // Fonction d'animation Safari optimisée
1097
1139
  let lastTime = performance.now();
1098
1140
  const animate = (currentTime) => {
1099
- if (!isPaused) {
1141
+ const dropdownOpen = element.getAttribute('data-bb-marquee-dropdown-open') === '1';
1142
+ if (!isPaused && !dropdownOpen) {
1100
1143
  // Animation basée sur le temps
1101
1144
  const deltaTime = isSafari && isMobile ? (currentTime - lastTime) / 16.67 : 1;
1102
1145
  lastTime = currentTime;
@@ -1183,7 +1226,8 @@
1183
1226
  // Fonction d'animation standard avec gestion du temps pour fluidité constante
1184
1227
  let lastTime = performance.now();
1185
1228
  const animate = (currentTime) => {
1186
- if (!isPaused) {
1229
+ const dropdownOpen = element.getAttribute('data-bb-marquee-dropdown-open') === '1';
1230
+ if (!isPaused && !dropdownOpen) {
1187
1231
  // Calculer le delta de temps pour une vitesse constante même si le navigateur ralentit
1188
1232
  const deltaTime = (currentTime - lastTime) / 16.67; // Normaliser à 60fps
1189
1233
  lastTime = currentTime;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bebranded/bb-contents",
3
- "version": "1.1.18",
3
+ "version": "1.1.20",
4
4
  "description": "Contenus additionnels français pour Webflow",
5
5
  "main": "bb-contents.js",
6
6
  "scripts": {