@bebranded/bb-contents 1.0.130 → 1.0.132
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 +113 -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.0.
|
|
4
|
+
* @version 1.0.132
|
|
5
5
|
* @author BeBranded
|
|
6
6
|
* @license MIT
|
|
7
7
|
* @website https://www.bebranded.xyz
|
|
@@ -32,11 +32,11 @@
|
|
|
32
32
|
window._bbContentsInitialized = true;
|
|
33
33
|
|
|
34
34
|
// Log de démarrage simple (une seule fois)
|
|
35
|
-
console.log('bb-contents | v1.0.
|
|
35
|
+
console.log('bb-contents | v1.0.132');
|
|
36
36
|
|
|
37
37
|
// Configuration
|
|
38
38
|
const config = {
|
|
39
|
-
version: '1.0.
|
|
39
|
+
version: '1.0.132',
|
|
40
40
|
debug: false, // Debug désactivé pour rendu propre
|
|
41
41
|
prefix: 'bb-', // utilisé pour générer les sélecteurs (data-bb-*)
|
|
42
42
|
youtubeEndpoint: null, // URL du worker YouTube (à définir par l'utilisateur)
|
|
@@ -1340,7 +1340,7 @@
|
|
|
1340
1340
|
});
|
|
1341
1341
|
}
|
|
1342
1342
|
|
|
1343
|
-
// Récupérer les
|
|
1343
|
+
// Récupérer les styles du select natif avant de le masquer
|
|
1344
1344
|
const selectComputedStyle = window.getComputedStyle(element);
|
|
1345
1345
|
const selectWidth = element.offsetWidth || parseFloat(selectComputedStyle.width) || 'auto';
|
|
1346
1346
|
const selectHeight = element.offsetHeight || parseFloat(selectComputedStyle.height) || 'auto';
|
|
@@ -1349,6 +1349,16 @@
|
|
|
1349
1349
|
const selectMinHeight = selectComputedStyle.minHeight !== 'none' ? selectComputedStyle.minHeight : null;
|
|
1350
1350
|
const selectMaxHeight = selectComputedStyle.maxHeight !== 'none' ? selectComputedStyle.maxHeight : null;
|
|
1351
1351
|
|
|
1352
|
+
// Récupérer les styles visuels du select pour les appliquer au dropdown custom
|
|
1353
|
+
const selectBgColor = selectComputedStyle.backgroundColor;
|
|
1354
|
+
const selectBorder = selectComputedStyle.border || selectComputedStyle.borderWidth + ' ' + selectComputedStyle.borderStyle + ' ' + selectComputedStyle.borderColor;
|
|
1355
|
+
const selectBorderColor = selectComputedStyle.borderColor;
|
|
1356
|
+
const selectBorderRadius = selectComputedStyle.borderRadius;
|
|
1357
|
+
const selectColor = selectComputedStyle.color;
|
|
1358
|
+
const selectFontSize = selectComputedStyle.fontSize;
|
|
1359
|
+
const selectFontFamily = selectComputedStyle.fontFamily;
|
|
1360
|
+
const selectPadding = selectComputedStyle.padding || (selectComputedStyle.paddingTop + ' ' + selectComputedStyle.paddingRight + ' ' + selectComputedStyle.paddingBottom + ' ' + selectComputedStyle.paddingLeft);
|
|
1361
|
+
|
|
1352
1362
|
// Créer le wrapper avec les dimensions du select
|
|
1353
1363
|
const wrapper = document.createElement('div');
|
|
1354
1364
|
wrapper.className = 'bb-country-select-wrapper';
|
|
@@ -1384,7 +1394,31 @@
|
|
|
1384
1394
|
'';
|
|
1385
1395
|
|
|
1386
1396
|
trigger.innerHTML = '<div style="display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0;"><span class="bb-country-flag" style="flex-shrink: 0;">' + selectedFlag + '</span><span class="bb-country-name" style="flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">' + bbContents.utils.sanitize(selectedName) + '</span></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" style="flex-shrink: 0; transition: transform 0.2s;"><path d="M4 6L8 10L12 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>';
|
|
1387
|
-
let triggerStyle = 'display: flex; align-items: center; justify-content: space-between;
|
|
1397
|
+
let triggerStyle = 'display: flex; align-items: center; justify-content: space-between; cursor: pointer; box-sizing: border-box; transition: border-color 0.2s;';
|
|
1398
|
+
// Appliquer les styles du select natif
|
|
1399
|
+
if (selectBgColor && selectBgColor !== 'rgba(0, 0, 0, 0)' && selectBgColor !== 'transparent') {
|
|
1400
|
+
triggerStyle += ' background-color: ' + selectBgColor + ';';
|
|
1401
|
+
}
|
|
1402
|
+
if (selectBorder && selectBorder !== 'none' && selectBorder !== '0px none rgb(0, 0, 0)') {
|
|
1403
|
+
triggerStyle += ' border: ' + selectBorder + ';';
|
|
1404
|
+
} else if (selectBorderColor && selectBorderColor !== 'rgba(0, 0, 0, 0)') {
|
|
1405
|
+
triggerStyle += ' border-color: ' + selectBorderColor + ';';
|
|
1406
|
+
}
|
|
1407
|
+
if (selectBorderRadius && selectBorderRadius !== '0px') {
|
|
1408
|
+
triggerStyle += ' border-radius: ' + selectBorderRadius + ';';
|
|
1409
|
+
}
|
|
1410
|
+
if (selectColor) {
|
|
1411
|
+
triggerStyle += ' color: ' + selectColor + ';';
|
|
1412
|
+
}
|
|
1413
|
+
if (selectFontSize) {
|
|
1414
|
+
triggerStyle += ' font-size: ' + selectFontSize + ';';
|
|
1415
|
+
}
|
|
1416
|
+
if (selectFontFamily) {
|
|
1417
|
+
triggerStyle += ' font-family: ' + selectFontFamily + ';';
|
|
1418
|
+
}
|
|
1419
|
+
if (selectPadding && selectPadding !== '0px') {
|
|
1420
|
+
triggerStyle += ' padding: ' + selectPadding + ';';
|
|
1421
|
+
}
|
|
1388
1422
|
// Utiliser les dimensions du select natif
|
|
1389
1423
|
if (selectWidth !== 'auto' && selectWidth > 0) {
|
|
1390
1424
|
triggerStyle += ' width: ' + selectWidth + 'px;';
|
|
@@ -1407,19 +1441,73 @@
|
|
|
1407
1441
|
const popover = document.createElement('div');
|
|
1408
1442
|
popover.className = 'bb-country-select-popover';
|
|
1409
1443
|
popover.setAttribute('role', 'listbox');
|
|
1410
|
-
|
|
1444
|
+
let popoverStyle = 'position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; max-height: 300px; overflow: hidden; display: none; z-index: 50;';
|
|
1445
|
+
// Appliquer les styles du select natif au popover
|
|
1446
|
+
if (selectBgColor && selectBgColor !== 'rgba(0, 0, 0, 0)' && selectBgColor !== 'transparent') {
|
|
1447
|
+
popoverStyle += ' background-color: ' + selectBgColor + ';';
|
|
1448
|
+
} else {
|
|
1449
|
+
popoverStyle += ' background-color: white;';
|
|
1450
|
+
}
|
|
1451
|
+
if (selectBorder && selectBorder !== 'none' && selectBorder !== '0px none rgb(0, 0, 0)') {
|
|
1452
|
+
popoverStyle += ' border: ' + selectBorder + ';';
|
|
1453
|
+
} else if (selectBorderColor && selectBorderColor !== 'rgba(0, 0, 0, 0)') {
|
|
1454
|
+
popoverStyle += ' border: 1px solid ' + selectBorderColor + ';';
|
|
1455
|
+
} else {
|
|
1456
|
+
popoverStyle += ' border: 1px solid #e5e7eb;';
|
|
1457
|
+
}
|
|
1458
|
+
if (selectBorderRadius && selectBorderRadius !== '0px') {
|
|
1459
|
+
popoverStyle += ' border-radius: ' + selectBorderRadius + ';';
|
|
1460
|
+
} else {
|
|
1461
|
+
popoverStyle += ' border-radius: 6px;';
|
|
1462
|
+
}
|
|
1463
|
+
popoverStyle += ' box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);';
|
|
1464
|
+
popover.style.cssText = popoverStyle;
|
|
1411
1465
|
|
|
1412
1466
|
// Barre de recherche
|
|
1413
1467
|
const searchWrapper = document.createElement('div');
|
|
1414
1468
|
searchWrapper.className = 'bb-country-search';
|
|
1415
|
-
|
|
1469
|
+
let searchWrapperStyle = 'position: sticky; top: 0; padding: 8px; z-index: 1;';
|
|
1470
|
+
if (selectBgColor && selectBgColor !== 'rgba(0, 0, 0, 0)' && selectBgColor !== 'transparent') {
|
|
1471
|
+
searchWrapperStyle += ' background-color: ' + selectBgColor + ';';
|
|
1472
|
+
} else {
|
|
1473
|
+
searchWrapperStyle += ' background-color: white;';
|
|
1474
|
+
}
|
|
1475
|
+
if (selectBorderColor && selectBorderColor !== 'rgba(0, 0, 0, 0)') {
|
|
1476
|
+
searchWrapperStyle += ' border-bottom: 1px solid ' + selectBorderColor + ';';
|
|
1477
|
+
} else {
|
|
1478
|
+
searchWrapperStyle += ' border-bottom: 1px solid #e5e7eb;';
|
|
1479
|
+
}
|
|
1480
|
+
searchWrapper.style.cssText = searchWrapperStyle;
|
|
1416
1481
|
|
|
1417
1482
|
const searchInput = document.createElement('input');
|
|
1418
1483
|
searchInput.type = 'text';
|
|
1419
1484
|
searchInput.className = 'bb-country-search-input';
|
|
1420
1485
|
searchInput.placeholder = searchPlaceholder;
|
|
1421
1486
|
searchInput.setAttribute('aria-label', searchPlaceholder);
|
|
1422
|
-
|
|
1487
|
+
let searchInputStyle = 'width: 100%; padding: 8px 12px; box-sizing: border-box;';
|
|
1488
|
+
if (selectFontSize) {
|
|
1489
|
+
searchInputStyle += ' font-size: ' + selectFontSize + ';';
|
|
1490
|
+
}
|
|
1491
|
+
if (selectFontFamily) {
|
|
1492
|
+
searchInputStyle += ' font-family: ' + selectFontFamily + ';';
|
|
1493
|
+
}
|
|
1494
|
+
if (selectColor) {
|
|
1495
|
+
searchInputStyle += ' color: ' + selectColor + ';';
|
|
1496
|
+
}
|
|
1497
|
+
if (selectBorderColor && selectBorderColor !== 'rgba(0, 0, 0, 0)') {
|
|
1498
|
+
searchInputStyle += ' border: 1px solid ' + selectBorderColor + ';';
|
|
1499
|
+
} else {
|
|
1500
|
+
searchInputStyle += ' border: 1px solid #e5e7eb;';
|
|
1501
|
+
}
|
|
1502
|
+
if (selectBorderRadius && selectBorderRadius !== '0px') {
|
|
1503
|
+
const borderRadiusValue = parseFloat(selectBorderRadius);
|
|
1504
|
+
if (!isNaN(borderRadiusValue)) {
|
|
1505
|
+
searchInputStyle += ' border-radius: ' + (borderRadiusValue * 0.75) + 'px;';
|
|
1506
|
+
}
|
|
1507
|
+
} else {
|
|
1508
|
+
searchInputStyle += ' border-radius: 4px;';
|
|
1509
|
+
}
|
|
1510
|
+
searchInput.style.cssText = searchInputStyle;
|
|
1423
1511
|
|
|
1424
1512
|
searchWrapper.appendChild(searchInput);
|
|
1425
1513
|
popover.appendChild(searchWrapper);
|
|
@@ -1427,7 +1515,7 @@
|
|
|
1427
1515
|
// Liste des pays
|
|
1428
1516
|
const list = document.createElement('div');
|
|
1429
1517
|
list.className = 'bb-country-list';
|
|
1430
|
-
list.style.cssText = 'overflow-y: auto; max-height: 250px; padding-bottom:
|
|
1518
|
+
list.style.cssText = 'overflow-y: auto; max-height: 250px; padding-bottom: 8px;';
|
|
1431
1519
|
popover.appendChild(list);
|
|
1432
1520
|
|
|
1433
1521
|
// Fonction pour rendre la liste
|
|
@@ -1478,6 +1566,22 @@
|
|
|
1478
1566
|
trigger.addEventListener('click', function(e) {
|
|
1479
1567
|
e.stopPropagation();
|
|
1480
1568
|
const isOpen = popover.style.display === 'block';
|
|
1569
|
+
|
|
1570
|
+
// Fermer tous les autres dropdowns avant d'ouvrir celui-ci
|
|
1571
|
+
if (!isOpen) {
|
|
1572
|
+
document.querySelectorAll('.bb-country-select-popover').forEach(function(otherPopover) {
|
|
1573
|
+
if (otherPopover !== popover && otherPopover.style.display === 'block') {
|
|
1574
|
+
otherPopover.style.display = 'none';
|
|
1575
|
+
const otherTrigger = otherPopover.parentElement.querySelector('.bb-country-select-trigger');
|
|
1576
|
+
if (otherTrigger) {
|
|
1577
|
+
otherTrigger.setAttribute('aria-expanded', 'false');
|
|
1578
|
+
const otherChevron = otherTrigger.querySelector('svg');
|
|
1579
|
+
if (otherChevron) otherChevron.style.transform = 'rotate(0deg)';
|
|
1580
|
+
}
|
|
1581
|
+
}
|
|
1582
|
+
});
|
|
1583
|
+
}
|
|
1584
|
+
|
|
1481
1585
|
popover.style.display = isOpen ? 'none' : 'block';
|
|
1482
1586
|
trigger.setAttribute('aria-expanded', isOpen ? 'false' : 'true');
|
|
1483
1587
|
if (chevron) chevron.style.transform = isOpen ? 'rotate(0deg)' : 'rotate(180deg)';
|