vrembem 1.40.3 → 1.42.1
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/dev/scripts.esm.js +309 -206
- package/dev/scripts.esm.js.map +1 -1
- package/dev/scripts.js +309 -206
- package/dev/scripts.js.map +1 -1
- package/dev/scripts.modern.js +258 -177
- package/dev/scripts.modern.js.map +1 -1
- package/dev/scripts.umd.js +309 -206
- package/dev/scripts.umd.js.map +1 -1
- package/dist/scripts.esm.js +1 -1
- package/dist/scripts.esm.js.map +1 -1
- package/dist/scripts.js +1 -1
- package/dist/scripts.js.map +1 -1
- package/dist/scripts.modern.js +1 -1
- package/dist/scripts.modern.js.map +1 -1
- package/dist/scripts.umd.js +1 -1
- package/dist/scripts.umd.js.map +1 -1
- package/package.json +26 -26
package/dev/scripts.esm.js
CHANGED
|
@@ -381,6 +381,30 @@ function _extends() {
|
|
|
381
381
|
return _extends.apply(this, arguments);
|
|
382
382
|
}
|
|
383
383
|
|
|
384
|
+
function _inheritsLoose(subClass, superClass) {
|
|
385
|
+
subClass.prototype = Object.create(superClass.prototype);
|
|
386
|
+
subClass.prototype.constructor = subClass;
|
|
387
|
+
|
|
388
|
+
_setPrototypeOf(subClass, superClass);
|
|
389
|
+
}
|
|
390
|
+
|
|
391
|
+
function _setPrototypeOf(o, p) {
|
|
392
|
+
_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
|
|
393
|
+
o.__proto__ = p;
|
|
394
|
+
return o;
|
|
395
|
+
};
|
|
396
|
+
|
|
397
|
+
return _setPrototypeOf(o, p);
|
|
398
|
+
}
|
|
399
|
+
|
|
400
|
+
function _assertThisInitialized(self) {
|
|
401
|
+
if (self === void 0) {
|
|
402
|
+
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
|
|
403
|
+
}
|
|
404
|
+
|
|
405
|
+
return self;
|
|
406
|
+
}
|
|
407
|
+
|
|
384
408
|
var defaults$3 = {
|
|
385
409
|
autoInit: false,
|
|
386
410
|
stateAttr: 'aria-checked',
|
|
@@ -998,6 +1022,7 @@ var defaults$1 = {
|
|
|
998
1022
|
dataClose: 'modal-close',
|
|
999
1023
|
dataFocus: 'modal-focus',
|
|
1000
1024
|
dataRequired: 'modal-required',
|
|
1025
|
+
dataConfig: 'modal-config',
|
|
1001
1026
|
// State classes
|
|
1002
1027
|
stateOpened: 'is-opened',
|
|
1003
1028
|
stateOpening: 'is-opening',
|
|
@@ -1017,6 +1042,36 @@ var defaults$1 = {
|
|
|
1017
1042
|
transition: true
|
|
1018
1043
|
};
|
|
1019
1044
|
|
|
1045
|
+
function getModalConfig(modal) {
|
|
1046
|
+
var json = modal.getAttribute("data-" + this.settings.dataConfig);
|
|
1047
|
+
|
|
1048
|
+
if (json) {
|
|
1049
|
+
var config = JSON.parse(json);
|
|
1050
|
+
return _extends({}, this.settings, config);
|
|
1051
|
+
} else {
|
|
1052
|
+
return this.settings;
|
|
1053
|
+
}
|
|
1054
|
+
}
|
|
1055
|
+
function getModal(modalKey) {
|
|
1056
|
+
if (typeof modalKey !== 'string') return modalKey;
|
|
1057
|
+
return document.querySelector("[data-" + this.settings.dataModal + "=\"" + modalKey + "\"]");
|
|
1058
|
+
}
|
|
1059
|
+
function modalNotFound(key) {
|
|
1060
|
+
return Promise.reject(new Error("Did not find modal with key: \"" + key + "\""));
|
|
1061
|
+
}
|
|
1062
|
+
function moveModals(type, ref) {
|
|
1063
|
+
if (type === void 0) {
|
|
1064
|
+
type = this.settings.moveModals.type;
|
|
1065
|
+
}
|
|
1066
|
+
|
|
1067
|
+
if (ref === void 0) {
|
|
1068
|
+
ref = this.settings.moveModals.ref;
|
|
1069
|
+
}
|
|
1070
|
+
|
|
1071
|
+
var modals = document.querySelectorAll("[data-" + this.settings.dataModal + "]");
|
|
1072
|
+
if (modals.length) moveElement(modals, type, ref);
|
|
1073
|
+
}
|
|
1074
|
+
|
|
1020
1075
|
var close$1 = function close(returnFocus) {
|
|
1021
1076
|
if (returnFocus === void 0) {
|
|
1022
1077
|
returnFocus = true;
|
|
@@ -1029,14 +1084,15 @@ var close$1 = function close(returnFocus) {
|
|
|
1029
1084
|
|
|
1030
1085
|
if (modal) {
|
|
1031
1086
|
_this2.working = true;
|
|
1032
|
-
|
|
1033
|
-
|
|
1034
|
-
|
|
1087
|
+
var config = getModalConfig.call(_this2, modal);
|
|
1088
|
+
setInert(false, config.selectorInert);
|
|
1089
|
+
setOverflowHidden(false, config.selectorOverflow);
|
|
1090
|
+
return Promise.resolve(closeTransition(modal, config)).then(function () {
|
|
1035
1091
|
if (returnFocus) focusTrigger(_this2);
|
|
1036
1092
|
|
|
1037
1093
|
_this2.focusTrap.destroy();
|
|
1038
1094
|
|
|
1039
|
-
modal.dispatchEvent(new CustomEvent(
|
|
1095
|
+
modal.dispatchEvent(new CustomEvent(config.customEventPrefix + 'closed', {
|
|
1040
1096
|
detail: _this2,
|
|
1041
1097
|
bubbles: true
|
|
1042
1098
|
}));
|
|
@@ -1112,26 +1168,6 @@ function handlerKeydown$1(event) {
|
|
|
1112
1168
|
}
|
|
1113
1169
|
}
|
|
1114
1170
|
|
|
1115
|
-
function getModal(modalKey) {
|
|
1116
|
-
if (typeof modalKey !== 'string') return modalKey;
|
|
1117
|
-
return document.querySelector("[data-" + this.settings.dataModal + "=\"" + modalKey + "\"]");
|
|
1118
|
-
}
|
|
1119
|
-
function modalNotFound(key) {
|
|
1120
|
-
return Promise.reject(new Error("Did not find modal with key: \"" + key + "\""));
|
|
1121
|
-
}
|
|
1122
|
-
function moveModals(type, ref) {
|
|
1123
|
-
if (type === void 0) {
|
|
1124
|
-
type = this.settings.moveModals.type;
|
|
1125
|
-
}
|
|
1126
|
-
|
|
1127
|
-
if (ref === void 0) {
|
|
1128
|
-
ref = this.settings.moveModals.ref;
|
|
1129
|
-
}
|
|
1130
|
-
|
|
1131
|
-
var modals = document.querySelectorAll("[data-" + this.settings.dataModal + "]");
|
|
1132
|
-
if (modals.length) moveElement(modals, type, ref);
|
|
1133
|
-
}
|
|
1134
|
-
|
|
1135
1171
|
function setInitialState() {
|
|
1136
1172
|
var _this = this;
|
|
1137
1173
|
|
|
@@ -1158,16 +1194,17 @@ var open$1 = function open(modalKey) {
|
|
|
1158
1194
|
|
|
1159
1195
|
var modal = getModal.call(_this2, modalKey);
|
|
1160
1196
|
if (!modal) return Promise.resolve(modalNotFound(modalKey));
|
|
1197
|
+
var config = getModalConfig.call(_this2, modal);
|
|
1161
1198
|
|
|
1162
|
-
if (hasClass(modal,
|
|
1199
|
+
if (hasClass(modal, config.stateClosed)) {
|
|
1163
1200
|
_this2.working = true;
|
|
1164
|
-
setOverflowHidden(true,
|
|
1165
|
-
return Promise.resolve(openTransition(modal,
|
|
1201
|
+
setOverflowHidden(true, config.selectorOverflow);
|
|
1202
|
+
return Promise.resolve(openTransition(modal, config)).then(function () {
|
|
1166
1203
|
_this2.focusTrap.init(modal);
|
|
1167
1204
|
|
|
1168
|
-
focusTarget(modal,
|
|
1169
|
-
setInert(true,
|
|
1170
|
-
modal.dispatchEvent(new CustomEvent(
|
|
1205
|
+
focusTarget(modal, config);
|
|
1206
|
+
setInert(true, config.selectorInert);
|
|
1207
|
+
modal.dispatchEvent(new CustomEvent(config.customEventPrefix + 'opened', {
|
|
1171
1208
|
detail: _this2,
|
|
1172
1209
|
bubbles: true
|
|
1173
1210
|
}));
|
|
@@ -1273,39 +1310,96 @@ var Modal = /*#__PURE__*/function () {
|
|
|
1273
1310
|
return Modal;
|
|
1274
1311
|
}();
|
|
1275
1312
|
|
|
1313
|
+
var Collection = /*#__PURE__*/function () {
|
|
1314
|
+
function Collection() {
|
|
1315
|
+
this.collection = [];
|
|
1316
|
+
}
|
|
1317
|
+
|
|
1318
|
+
var _proto = Collection.prototype;
|
|
1319
|
+
|
|
1320
|
+
_proto.register = function register(item) {
|
|
1321
|
+
this.deregister(item);
|
|
1322
|
+
this.collection.push(item);
|
|
1323
|
+
return this.collection;
|
|
1324
|
+
};
|
|
1325
|
+
|
|
1326
|
+
_proto.deregister = function deregister(ref) {
|
|
1327
|
+
var index = this.collection.findIndex(function (entry) {
|
|
1328
|
+
return entry === ref;
|
|
1329
|
+
});
|
|
1330
|
+
|
|
1331
|
+
if (index >= 0) {
|
|
1332
|
+
var entry = this.collection[index];
|
|
1333
|
+
Object.getOwnPropertyNames(entry).forEach(function (prop) {
|
|
1334
|
+
delete entry[prop];
|
|
1335
|
+
});
|
|
1336
|
+
this.collection.splice(index, 1);
|
|
1337
|
+
}
|
|
1338
|
+
|
|
1339
|
+
return this.collection;
|
|
1340
|
+
};
|
|
1341
|
+
|
|
1342
|
+
_proto.registerCollection = function registerCollection(items) {
|
|
1343
|
+
var _this = this;
|
|
1344
|
+
|
|
1345
|
+
items.forEach(function (item) {
|
|
1346
|
+
_this.register(item);
|
|
1347
|
+
});
|
|
1348
|
+
return this.collection;
|
|
1349
|
+
};
|
|
1350
|
+
|
|
1351
|
+
_proto.deregisterCollection = function deregisterCollection() {
|
|
1352
|
+
while (this.collection.length > 0) {
|
|
1353
|
+
this.deregister(this.collection[0]);
|
|
1354
|
+
}
|
|
1355
|
+
|
|
1356
|
+
return this.collection;
|
|
1357
|
+
};
|
|
1358
|
+
|
|
1359
|
+
_proto.get = function get(query, key) {
|
|
1360
|
+
if (key === void 0) {
|
|
1361
|
+
key = 'id';
|
|
1362
|
+
}
|
|
1363
|
+
|
|
1364
|
+
var result = this.collection.find(function (item) {
|
|
1365
|
+
return item[key] === query;
|
|
1366
|
+
});
|
|
1367
|
+
return result || null;
|
|
1368
|
+
};
|
|
1369
|
+
|
|
1370
|
+
return Collection;
|
|
1371
|
+
}();
|
|
1372
|
+
|
|
1276
1373
|
var defaults = {
|
|
1277
1374
|
autoInit: false,
|
|
1278
|
-
//
|
|
1279
|
-
|
|
1280
|
-
|
|
1281
|
-
dataArrow: 'popover-arrow',
|
|
1282
|
-
dataEventType: 'popover-event',
|
|
1283
|
-
dataPlacement: 'popover-placement',
|
|
1375
|
+
// Selectors
|
|
1376
|
+
selectorPopover: '.popover',
|
|
1377
|
+
selectorArrow: '.popover__arrow',
|
|
1284
1378
|
// State classes
|
|
1285
1379
|
stateActive: 'is-active',
|
|
1286
1380
|
// Feature toggles
|
|
1287
|
-
eventType: 'click',
|
|
1288
1381
|
eventListeners: true,
|
|
1289
|
-
|
|
1382
|
+
eventType: 'click',
|
|
1383
|
+
placement: 'bottom'
|
|
1290
1384
|
};
|
|
1291
1385
|
|
|
1292
1386
|
function close(popover) {
|
|
1293
1387
|
// Update state class
|
|
1294
1388
|
popover.target.classList.remove(this.settings.stateActive); // Update a11y attributes
|
|
1295
1389
|
|
|
1296
|
-
popover.trigger.
|
|
1390
|
+
if (popover.trigger.hasAttribute('aria-controls')) {
|
|
1391
|
+
popover.trigger.setAttribute('aria-expanded', 'false');
|
|
1392
|
+
} // Disable popper event listeners
|
|
1393
|
+
|
|
1297
1394
|
|
|
1298
1395
|
popover.popper.setOptions({
|
|
1299
1396
|
modifiers: [{
|
|
1300
1397
|
name: 'eventListeners',
|
|
1301
1398
|
enabled: false
|
|
1302
1399
|
}]
|
|
1303
|
-
}); // Update
|
|
1400
|
+
}); // Update popover state
|
|
1304
1401
|
|
|
1305
|
-
|
|
1306
|
-
return item.target === popover.target;
|
|
1307
|
-
});
|
|
1308
|
-
this.collection[index].state = 'closed'; // Clear the memory if popover trigger matches the ones saved in memory
|
|
1402
|
+
popover.state = 'closed'; // Clear memory if popover trigger matches the one saved in memory
|
|
1309
1403
|
|
|
1310
1404
|
if (popover.trigger === this.memory.trigger) {
|
|
1311
1405
|
this.memory.trigger = null;
|
|
@@ -1315,19 +1409,15 @@ function close(popover) {
|
|
|
1315
1409
|
return popover;
|
|
1316
1410
|
}
|
|
1317
1411
|
function closeAll() {
|
|
1318
|
-
var _this = this;
|
|
1319
|
-
|
|
1320
1412
|
this.collection.forEach(function (popover) {
|
|
1321
1413
|
if (popover.state === 'opened') {
|
|
1322
|
-
|
|
1414
|
+
popover.close();
|
|
1323
1415
|
}
|
|
1324
1416
|
}); // Return the collection
|
|
1325
1417
|
|
|
1326
1418
|
return this.collection;
|
|
1327
1419
|
}
|
|
1328
1420
|
function closeCheck(popover) {
|
|
1329
|
-
var _this2 = this;
|
|
1330
|
-
|
|
1331
1421
|
// Only run closeCheck if provided popover is currently open
|
|
1332
1422
|
if (popover.state != 'opened') return; // Needed to correctly check which element is currently being focused
|
|
1333
1423
|
|
|
@@ -1335,10 +1425,10 @@ function closeCheck(popover) {
|
|
|
1335
1425
|
// Check if trigger or target are being hovered
|
|
1336
1426
|
var isHovered = popover.target.closest(':hover') === popover.target || popover.trigger.closest(':hover') === popover.trigger; // Check if trigger or target are being focused
|
|
1337
1427
|
|
|
1338
|
-
var isFocused = document.activeElement.closest("
|
|
1428
|
+
var isFocused = document.activeElement.closest("#" + popover.id + ", [aria-controls=\"" + popover.id + "\"]"); // Close if the trigger and target are not currently hovered or focused
|
|
1339
1429
|
|
|
1340
1430
|
if (!isHovered && !isFocused) {
|
|
1341
|
-
|
|
1431
|
+
popover.close();
|
|
1342
1432
|
} // Return the popover
|
|
1343
1433
|
|
|
1344
1434
|
|
|
@@ -1348,10 +1438,10 @@ function closeCheck(popover) {
|
|
|
1348
1438
|
|
|
1349
1439
|
function handlerClick(popover) {
|
|
1350
1440
|
if (popover.target.classList.contains(this.settings.stateActive)) {
|
|
1351
|
-
|
|
1441
|
+
popover.close();
|
|
1352
1442
|
} else {
|
|
1353
1443
|
this.memory.trigger = popover.trigger;
|
|
1354
|
-
|
|
1444
|
+
popover.open();
|
|
1355
1445
|
documentClick.call(this, popover);
|
|
1356
1446
|
}
|
|
1357
1447
|
}
|
|
@@ -1364,7 +1454,7 @@ function handlerKeydown(event) {
|
|
|
1364
1454
|
this.memory.trigger.focus();
|
|
1365
1455
|
}
|
|
1366
1456
|
|
|
1367
|
-
|
|
1457
|
+
closeAll.call(this);
|
|
1368
1458
|
return;
|
|
1369
1459
|
|
|
1370
1460
|
case 'Tab':
|
|
@@ -1378,19 +1468,21 @@ function handlerKeydown(event) {
|
|
|
1378
1468
|
}
|
|
1379
1469
|
}
|
|
1380
1470
|
function documentClick(popover) {
|
|
1381
|
-
var
|
|
1471
|
+
var root = this;
|
|
1382
1472
|
document.addEventListener('click', function _f(event) {
|
|
1383
|
-
|
|
1384
|
-
var
|
|
1473
|
+
// Check if a popover was clicked
|
|
1474
|
+
var result = event.target.closest("#" + popover.id + ", [aria-controls=\"" + popover.id + "\"]");
|
|
1385
1475
|
|
|
1386
|
-
if (!
|
|
1387
|
-
|
|
1388
|
-
|
|
1476
|
+
if (!result) {
|
|
1477
|
+
// If it doesn't match and popover is open, close it and remove event listener
|
|
1478
|
+
if (popover.target && popover.target.classList.contains(root.settings.stateActive)) {
|
|
1479
|
+
popover.close();
|
|
1389
1480
|
}
|
|
1390
1481
|
|
|
1391
1482
|
this.removeEventListener('click', _f);
|
|
1392
1483
|
} else {
|
|
1393
|
-
|
|
1484
|
+
// If it does match and popover isn't currently active, remove event listener
|
|
1485
|
+
if (popover.target && !popover.target.classList.contains(root.settings.stateActive)) {
|
|
1394
1486
|
this.removeEventListener('click', _f);
|
|
1395
1487
|
}
|
|
1396
1488
|
}
|
|
@@ -1407,30 +1499,23 @@ function getConfig(el, settings) {
|
|
|
1407
1499
|
'offset': 0,
|
|
1408
1500
|
'overflow-padding': 0,
|
|
1409
1501
|
'flip-padding': 0,
|
|
1410
|
-
'arrow-element':
|
|
1502
|
+
'arrow-element': settings.selectorArrow,
|
|
1411
1503
|
'arrow-padding': 0
|
|
1412
1504
|
}; // Loop through config obj
|
|
1413
1505
|
|
|
1414
1506
|
for (var prop in config) {
|
|
1415
1507
|
// Get the CSS variable property values
|
|
1416
1508
|
var prefix = getComputedStyle(document.body).getPropertyValue('--vrembem-variable-prefix');
|
|
1417
|
-
var
|
|
1509
|
+
var value = styles.getPropertyValue("--" + prefix + "popover-" + prop).trim(); // If a value was found, replace the default in config obj
|
|
1418
1510
|
|
|
1419
|
-
if (
|
|
1420
|
-
config[prop] =
|
|
1511
|
+
if (value) {
|
|
1512
|
+
config[prop] = value;
|
|
1421
1513
|
}
|
|
1422
1514
|
} // Return the config obj
|
|
1423
1515
|
|
|
1424
1516
|
|
|
1425
1517
|
return config;
|
|
1426
1518
|
}
|
|
1427
|
-
function getData(el, attr, fallback) {
|
|
1428
|
-
if (fallback === void 0) {
|
|
1429
|
-
fallback = false;
|
|
1430
|
-
}
|
|
1431
|
-
|
|
1432
|
-
return el.hasAttribute("data-" + attr) ? el.getAttribute("data-" + attr) : fallback;
|
|
1433
|
-
}
|
|
1434
1519
|
function getPadding(value) {
|
|
1435
1520
|
var padding; // Split the value by spaces if it's a string
|
|
1436
1521
|
|
|
@@ -1504,47 +1589,56 @@ function getModifiers(options) {
|
|
|
1504
1589
|
}
|
|
1505
1590
|
}];
|
|
1506
1591
|
}
|
|
1507
|
-
function
|
|
1508
|
-
//
|
|
1509
|
-
|
|
1592
|
+
function getPopoverID(obj) {
|
|
1593
|
+
// If it's a string
|
|
1594
|
+
if (typeof obj === 'string') {
|
|
1595
|
+
return obj;
|
|
1596
|
+
} // If it's an HTML element
|
|
1597
|
+
else if (typeof obj.hasAttribute === 'function') {
|
|
1598
|
+
// If it's a popover trigger
|
|
1599
|
+
if (obj.hasAttribute('aria-controls')) {
|
|
1600
|
+
return obj.getAttribute('aria-controls');
|
|
1601
|
+
} // If it's a popover tooltip trigger
|
|
1602
|
+
else if (obj.hasAttribute('aria-describedby')) {
|
|
1603
|
+
return obj.getAttribute('aria-describedby');
|
|
1604
|
+
} // If it's a popover target
|
|
1605
|
+
else if (obj.closest(this.settings.selectorPopover)) {
|
|
1606
|
+
return obj.id;
|
|
1607
|
+
} // Return false if no id was found
|
|
1608
|
+
else return false;
|
|
1609
|
+
} // If it has an ID property
|
|
1610
|
+
else if (obj.id) {
|
|
1611
|
+
return obj.id;
|
|
1612
|
+
} // Return false if no id was found
|
|
1613
|
+
else return false;
|
|
1614
|
+
}
|
|
1615
|
+
function getPopoverElements(query) {
|
|
1616
|
+
var id = getPopoverID.call(this, query);
|
|
1510
1617
|
|
|
1511
1618
|
if (id) {
|
|
1512
|
-
|
|
1513
|
-
|
|
1514
|
-
return document.querySelector("[data-" + settings.dataPopover + "=\"" + id + "\"]");
|
|
1515
|
-
} else {
|
|
1516
|
-
// If trigger attribute value doesn't exist, check if
|
|
1517
|
-
// - There is a nextElementSibling relative to the trigger
|
|
1518
|
-
// - And it has the popover data attribute.
|
|
1519
|
-
return trigger.nextElementSibling && trigger.nextElementSibling.hasAttribute("data-" + settings.dataPopover) ? // Return the element or false if the two checks fail
|
|
1520
|
-
trigger.nextElementSibling : false;
|
|
1521
|
-
}
|
|
1522
|
-
}
|
|
1523
|
-
|
|
1524
|
-
function open(popover) {
|
|
1525
|
-
// Update state class
|
|
1526
|
-
popover.target.classList.add(this.settings.stateActive); // Update a11y attributes
|
|
1527
|
-
|
|
1528
|
-
popover.trigger.setAttribute('aria-expanded', 'true'); // Update popover config
|
|
1529
|
-
|
|
1530
|
-
popover.config = getConfig(popover.target, this.settings); // Enable popper event listeners and set placement/modifiers
|
|
1531
|
-
|
|
1532
|
-
popover.popper.setOptions({
|
|
1533
|
-
placement: getData(popover.target, this.settings.dataPlacement, popover.config['placement']),
|
|
1534
|
-
modifiers: [{
|
|
1535
|
-
name: 'eventListeners',
|
|
1536
|
-
enabled: true
|
|
1537
|
-
}].concat(getModifiers(popover.config))
|
|
1538
|
-
}); // Update popover's position
|
|
1619
|
+
var trigger = document.querySelector("[aria-controls=\"" + id + "\"]") || document.querySelector("[aria-describedby=\"" + id + "\"]");
|
|
1620
|
+
var target = document.querySelector("#" + id);
|
|
1539
1621
|
|
|
1540
|
-
|
|
1541
|
-
|
|
1542
|
-
|
|
1543
|
-
|
|
1544
|
-
|
|
1545
|
-
|
|
1622
|
+
if (!trigger && !target) {
|
|
1623
|
+
console.error('No popover elements found using the provided ID:', id);
|
|
1624
|
+
} else if (!trigger) {
|
|
1625
|
+
console.error('No popover trigger associated with the provided popover:', target);
|
|
1626
|
+
} else if (!target) {
|
|
1627
|
+
console.error('No popover associated with the provided popover trigger:', trigger);
|
|
1628
|
+
}
|
|
1546
1629
|
|
|
1547
|
-
|
|
1630
|
+
if (!trigger || !target) {
|
|
1631
|
+
return false;
|
|
1632
|
+
} else {
|
|
1633
|
+
return {
|
|
1634
|
+
trigger: trigger,
|
|
1635
|
+
target: target
|
|
1636
|
+
};
|
|
1637
|
+
}
|
|
1638
|
+
} else {
|
|
1639
|
+
console.error('Could not resolve the popover ID:', query);
|
|
1640
|
+
return false;
|
|
1641
|
+
}
|
|
1548
1642
|
}
|
|
1549
1643
|
|
|
1550
1644
|
var top = 'top';
|
|
@@ -3330,72 +3424,98 @@ var createPopper = /*#__PURE__*/popperGenerator({
|
|
|
3330
3424
|
defaultModifiers: defaultModifiers
|
|
3331
3425
|
}); // eslint-disable-next-line import/no-unused-modules
|
|
3332
3426
|
|
|
3333
|
-
function
|
|
3334
|
-
//
|
|
3335
|
-
|
|
3336
|
-
// Try and get the target
|
|
3337
|
-
target = getPopover(trigger, this.settings); // If still no target is returned, log an error and return false
|
|
3427
|
+
function open(popover) {
|
|
3428
|
+
// Update state class
|
|
3429
|
+
popover.target.classList.add(this.settings.stateActive); // Update a11y attribute
|
|
3338
3430
|
|
|
3339
|
-
|
|
3340
|
-
|
|
3341
|
-
|
|
3342
|
-
|
|
3343
|
-
|
|
3431
|
+
if (popover.trigger.hasAttribute('aria-controls')) {
|
|
3432
|
+
popover.trigger.setAttribute('aria-expanded', 'true');
|
|
3433
|
+
} // Update popover config
|
|
3434
|
+
|
|
3435
|
+
|
|
3436
|
+
popover.config = getConfig(popover.target, this.settings); // Enable popper event listeners and set placement/modifiers
|
|
3437
|
+
|
|
3438
|
+
popover.popper.setOptions({
|
|
3439
|
+
placement: popover.config['placement'],
|
|
3440
|
+
modifiers: [{
|
|
3441
|
+
name: 'eventListeners',
|
|
3442
|
+
enabled: true
|
|
3443
|
+
}].concat(getModifiers(popover.config))
|
|
3444
|
+
}); // Update popover position
|
|
3344
3445
|
|
|
3446
|
+
popover.popper.update(); // Update popover state
|
|
3345
3447
|
|
|
3346
|
-
|
|
3347
|
-
return item.trigger === trigger && item.target === target;
|
|
3348
|
-
}); // Initiate popover variable
|
|
3448
|
+
popover.state = 'opened'; // Return the popover
|
|
3349
3449
|
|
|
3350
|
-
|
|
3450
|
+
return popover;
|
|
3451
|
+
}
|
|
3351
3452
|
|
|
3352
|
-
|
|
3353
|
-
|
|
3354
|
-
|
|
3355
|
-
|
|
3356
|
-
|
|
3357
|
-
var popperInstance = createPopper(trigger, target); // Build popover object and push to collection array
|
|
3453
|
+
function register(trigger, target) {
|
|
3454
|
+
// Deregister popover if it already exists in the collection
|
|
3455
|
+
this.deregister(target.id); // Create popper instance
|
|
3456
|
+
|
|
3457
|
+
var popperInstance = createPopper(trigger, target); // Save root this for use inside object & create methods API
|
|
3358
3458
|
|
|
3359
|
-
|
|
3360
|
-
|
|
3361
|
-
|
|
3362
|
-
|
|
3363
|
-
|
|
3364
|
-
|
|
3365
|
-
|
|
3459
|
+
var root = this;
|
|
3460
|
+
var methods = {
|
|
3461
|
+
open: function open$1() {
|
|
3462
|
+
open.call(root, this);
|
|
3463
|
+
},
|
|
3464
|
+
close: function close$1() {
|
|
3465
|
+
close.call(root, this);
|
|
3466
|
+
},
|
|
3467
|
+
deregister: function deregister() {
|
|
3468
|
+
_deregister.call(root, this);
|
|
3469
|
+
}
|
|
3470
|
+
}; // Build popover object and push to collection array
|
|
3366
3471
|
|
|
3367
|
-
|
|
3368
|
-
|
|
3472
|
+
var popover = _extends({
|
|
3473
|
+
id: target.id,
|
|
3474
|
+
state: 'closed',
|
|
3475
|
+
trigger: trigger,
|
|
3476
|
+
target: target,
|
|
3477
|
+
popper: popperInstance,
|
|
3478
|
+
config: getConfig(target, this.settings)
|
|
3479
|
+
}, methods); // Setup event listeners
|
|
3369
3480
|
|
|
3370
3481
|
|
|
3371
3482
|
registerEventListeners.call(this, popover); // Set initial state of popover
|
|
3372
3483
|
|
|
3373
3484
|
if (popover.target.classList.contains(this.settings.stateActive)) {
|
|
3374
|
-
|
|
3485
|
+
popover.open();
|
|
3375
3486
|
documentClick.call(this, popover);
|
|
3376
3487
|
} else {
|
|
3377
|
-
|
|
3378
|
-
} //
|
|
3488
|
+
popover.close();
|
|
3489
|
+
} // Add item to collection
|
|
3490
|
+
|
|
3379
3491
|
|
|
3492
|
+
this.collection.push(popover); // Return the popover object
|
|
3380
3493
|
|
|
3381
3494
|
return popover;
|
|
3382
3495
|
}
|
|
3383
|
-
|
|
3496
|
+
|
|
3497
|
+
function _deregister(popover) {
|
|
3384
3498
|
// Check if this item has been registered in the collection
|
|
3385
|
-
var index = this.collection.findIndex(function (
|
|
3386
|
-
return
|
|
3387
|
-
}); // If the
|
|
3499
|
+
var index = this.collection.findIndex(function (entry) {
|
|
3500
|
+
return entry.id === popover.id;
|
|
3501
|
+
}); // If the entry exists in the collection
|
|
3388
3502
|
|
|
3389
3503
|
if (index >= 0) {
|
|
3390
|
-
//
|
|
3391
|
-
|
|
3392
|
-
|
|
3504
|
+
// Get the collection entry
|
|
3505
|
+
var entry = this.collection[index]; // Close the collection entry if it's open
|
|
3506
|
+
|
|
3507
|
+
if (entry.state === 'opened') {
|
|
3508
|
+
entry.close();
|
|
3393
3509
|
} // Clean up the popper instance
|
|
3394
3510
|
|
|
3395
3511
|
|
|
3396
|
-
|
|
3512
|
+
entry.popper.destroy(); // Remove event listeners
|
|
3397
3513
|
|
|
3398
|
-
deregisterEventListeners(
|
|
3514
|
+
deregisterEventListeners(entry); // Delete properties from collection entry
|
|
3515
|
+
|
|
3516
|
+
Object.getOwnPropertyNames(entry).forEach(function (prop) {
|
|
3517
|
+
delete entry[prop];
|
|
3518
|
+
}); // Remove entry from collection
|
|
3399
3519
|
|
|
3400
3520
|
this.collection.splice(index, 1);
|
|
3401
3521
|
} // Return the new collection
|
|
@@ -3407,7 +3527,7 @@ function registerEventListeners(popover) {
|
|
|
3407
3527
|
// If event listeners aren't already setup
|
|
3408
3528
|
if (!popover.__eventListeners) {
|
|
3409
3529
|
// Add event listeners based on event type
|
|
3410
|
-
var eventType =
|
|
3530
|
+
var eventType = popover.config['event'];
|
|
3411
3531
|
|
|
3412
3532
|
if (eventType === 'hover') {
|
|
3413
3533
|
// Setup event listeners object for hover
|
|
@@ -3468,38 +3588,23 @@ function deregisterEventListeners(popover) {
|
|
|
3468
3588
|
|
|
3469
3589
|
return popover;
|
|
3470
3590
|
}
|
|
3471
|
-
function registerCollection() {
|
|
3472
|
-
var _this = this;
|
|
3473
|
-
|
|
3474
|
-
// Get all the triggers
|
|
3475
|
-
var triggers = document.querySelectorAll("[data-" + this.settings.dataTrigger + "]");
|
|
3476
|
-
triggers.forEach(function (trigger) {
|
|
3477
|
-
// Register the popover and save to collection array
|
|
3478
|
-
_this.register(trigger, false);
|
|
3479
|
-
}); // Return the popover collection
|
|
3480
3591
|
|
|
3481
|
-
|
|
3482
|
-
|
|
3483
|
-
function deregisterCollection() {
|
|
3484
|
-
// Loop through all items within the collection and pass them to deregister()
|
|
3485
|
-
while (this.collection.length > 0) {
|
|
3486
|
-
this.deregister(this.collection[0]);
|
|
3487
|
-
} // Return the popover collection
|
|
3592
|
+
var Popover = /*#__PURE__*/function (_Collection) {
|
|
3593
|
+
_inheritsLoose(Popover, _Collection);
|
|
3488
3594
|
|
|
3595
|
+
function Popover(options) {
|
|
3596
|
+
var _this;
|
|
3489
3597
|
|
|
3490
|
-
|
|
3491
|
-
|
|
3598
|
+
_this = _Collection.call(this) || this;
|
|
3599
|
+
_this.defaults = defaults;
|
|
3600
|
+
_this.settings = _extends({}, _this.defaults, options); // this.collection = [];
|
|
3492
3601
|
|
|
3493
|
-
|
|
3494
|
-
function Popover(options) {
|
|
3495
|
-
this.defaults = defaults;
|
|
3496
|
-
this.settings = _extends({}, this.defaults, options);
|
|
3497
|
-
this.collection = [];
|
|
3498
|
-
this.memory = {
|
|
3602
|
+
_this.memory = {
|
|
3499
3603
|
trigger: null
|
|
3500
3604
|
};
|
|
3501
|
-
|
|
3502
|
-
if (
|
|
3605
|
+
_this.__handlerKeydown = handlerKeydown.bind(_assertThisInitialized(_this));
|
|
3606
|
+
if (_this.settings.autoInit) _this.init();
|
|
3607
|
+
return _this;
|
|
3503
3608
|
}
|
|
3504
3609
|
|
|
3505
3610
|
var _proto = Popover.prototype;
|
|
@@ -3510,9 +3615,11 @@ var Popover = /*#__PURE__*/function () {
|
|
|
3510
3615
|
}
|
|
3511
3616
|
|
|
3512
3617
|
// Update settings with passed options
|
|
3513
|
-
if (options) this.settings = _extends({}, this.settings, options); //
|
|
3618
|
+
if (options) this.settings = _extends({}, this.settings, options); // Get all the popovers
|
|
3619
|
+
|
|
3620
|
+
var popovers = document.querySelectorAll(this.settings.selectorPopover); // Build the collections array with popover instances
|
|
3514
3621
|
|
|
3515
|
-
this.registerCollection(); // If eventListeners is enabled
|
|
3622
|
+
this.registerCollection(popovers); // If eventListeners is enabled
|
|
3516
3623
|
|
|
3517
3624
|
if (this.settings.eventListeners) {
|
|
3518
3625
|
// Pass false to initEventListeners() since registerCollection()
|
|
@@ -3537,7 +3644,7 @@ var Popover = /*#__PURE__*/function () {
|
|
|
3537
3644
|
;
|
|
3538
3645
|
|
|
3539
3646
|
_proto.initEventListeners = function initEventListeners(processCollection) {
|
|
3540
|
-
var
|
|
3647
|
+
var _this2 = this;
|
|
3541
3648
|
|
|
3542
3649
|
if (processCollection === void 0) {
|
|
3543
3650
|
processCollection = true;
|
|
@@ -3546,7 +3653,7 @@ var Popover = /*#__PURE__*/function () {
|
|
|
3546
3653
|
if (processCollection) {
|
|
3547
3654
|
// Loop through collection and setup event listeners
|
|
3548
3655
|
this.collection.forEach(function (popover) {
|
|
3549
|
-
registerEventListeners.call(
|
|
3656
|
+
registerEventListeners.call(_this2, popover);
|
|
3550
3657
|
});
|
|
3551
3658
|
} // Add keydown global event listener
|
|
3552
3659
|
|
|
@@ -3574,44 +3681,40 @@ var Popover = /*#__PURE__*/function () {
|
|
|
3574
3681
|
*/
|
|
3575
3682
|
;
|
|
3576
3683
|
|
|
3577
|
-
_proto.register = function register$1(
|
|
3578
|
-
|
|
3579
|
-
|
|
3580
|
-
|
|
3581
|
-
|
|
3582
|
-
return register.call(this, trigger, target);
|
|
3583
|
-
};
|
|
3584
|
-
|
|
3585
|
-
_proto.deregister = function deregister$1(popover) {
|
|
3586
|
-
return deregister.call(this, popover);
|
|
3587
|
-
};
|
|
3588
|
-
|
|
3589
|
-
_proto.registerCollection = function registerCollection$1() {
|
|
3590
|
-
return registerCollection.call(this);
|
|
3684
|
+
_proto.register = function register$1(query) {
|
|
3685
|
+
var els = getPopoverElements.call(this, query);
|
|
3686
|
+
if (!els) return false;
|
|
3687
|
+
return register.call(this, els.trigger, els.target);
|
|
3591
3688
|
};
|
|
3592
3689
|
|
|
3593
|
-
_proto.
|
|
3594
|
-
|
|
3690
|
+
_proto.deregister = function deregister(query) {
|
|
3691
|
+
var popover = this.get(getPopoverID(query));
|
|
3692
|
+
if (!popover) return false;
|
|
3693
|
+
return _deregister.call(this, popover);
|
|
3595
3694
|
}
|
|
3596
3695
|
/**
|
|
3597
3696
|
* Change state functionality
|
|
3598
3697
|
*/
|
|
3599
3698
|
;
|
|
3600
3699
|
|
|
3601
|
-
_proto.open = function open
|
|
3602
|
-
|
|
3700
|
+
_proto.open = function open(id) {
|
|
3701
|
+
var popover = this.get(id);
|
|
3702
|
+
if (!popover) return false;
|
|
3703
|
+
return popover.open();
|
|
3603
3704
|
};
|
|
3604
3705
|
|
|
3605
|
-
_proto.close = function close
|
|
3606
|
-
|
|
3607
|
-
|
|
3608
|
-
|
|
3609
|
-
|
|
3610
|
-
|
|
3706
|
+
_proto.close = function close(id) {
|
|
3707
|
+
if (id) {
|
|
3708
|
+
var popover = this.get(id);
|
|
3709
|
+
if (!popover) return false;
|
|
3710
|
+
return popover.close();
|
|
3711
|
+
} else {
|
|
3712
|
+
return closeAll.call(this);
|
|
3713
|
+
}
|
|
3611
3714
|
};
|
|
3612
3715
|
|
|
3613
3716
|
return Popover;
|
|
3614
|
-
}();
|
|
3717
|
+
}(Collection);
|
|
3615
3718
|
|
|
3616
3719
|
export { Checkbox, Drawer, Modal, Popover, index as core };
|
|
3617
3720
|
//# sourceMappingURL=scripts.esm.js.map
|