-
-
Notifications
You must be signed in to change notification settings - Fork 1k
/
field-collection.js
96 lines (76 loc) · 4.46 KB
/
field-collection.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
const eaCollectionHandler = function (event) {
document.querySelectorAll('button.field-collection-add-button').forEach((addButton) => {
const collection = addButton.closest('[data-ea-collection-field]');
if (!collection || collection.classList.contains('processed')) {
return;
}
EaCollectionProperty.handleAddButton(addButton, collection);
EaCollectionProperty.updateCollectionItemCssClasses(collection);
});
document.querySelectorAll('button.field-collection-delete-button').forEach((deleteButton) => {
deleteButton.addEventListener('click', () => {
const collection = deleteButton.closest('[data-ea-collection-field]');
const item = deleteButton.closest('.field-collection-item');
item.remove();
document.dispatchEvent(new Event('ea.collection.item-removed'));
EaCollectionProperty.updateCollectionItemCssClasses(collection);
});
});
}
window.addEventListener('DOMContentLoaded', eaCollectionHandler);
document.addEventListener('ea.collection.item-added', eaCollectionHandler);
const EaCollectionProperty = {
handleAddButton: (addButton, collection) => {
addButton.addEventListener('click', function() {
const isArrayCollection = collection.classList.contains('field-array');
// Use a counter to avoid having the same index more than once
let numItems = parseInt(collection.dataset.numItems);
// Remove the 'Empty Collection' badge, if present
const emptyCollectionBadge = this.parentElement.querySelector('.collection-empty');
if (null !== emptyCollectionBadge) {
emptyCollectionBadge.outerHTML = isArrayCollection ? '<div class="ea-form-collection-items"></div>' : '<div class="ea-form-collection-items"><div class="accordion"><div class="form-widget-compound"><div data-empty-collection></div></div></div></div>';
}
const formTypeNamePlaceholder = collection.dataset.formTypeNamePlaceholder;
const labelRegexp = new RegExp(formTypeNamePlaceholder + 'label__', 'g');
const nameRegexp = new RegExp(formTypeNamePlaceholder, 'g');
let newItemHtml = collection.dataset.prototype
.replace(labelRegexp, numItems)
.replace(nameRegexp, numItems);
collection.dataset.numItems = ++numItems;
const newItemInsertionSelector = isArrayCollection ? '.ea-form-collection-items' : '.ea-form-collection-items .accordion > .form-widget-compound [data-empty-collection]';
const collectionItemsWrapper = collection.querySelector(newItemInsertionSelector);
collectionItemsWrapper.insertAdjacentHTML('beforeend', newItemHtml);
// Execute JS scripts embedded in prototype
const collectionItems = collectionItemsWrapper.querySelectorAll('.field-collection-item');
const lastElement = collectionItems[collectionItems.length - 1];
lastElement.querySelectorAll('script').forEach(script => eval(script.innerHTML));
// for complex collections of items, show the newly added item as not collapsed
if (!isArrayCollection) {
EaCollectionProperty.updateCollectionItemCssClasses(collection);
const lastElementCollapseButton = lastElement.querySelector('.accordion-button');
lastElementCollapseButton.classList.remove('collapsed');
const lastElementBody = lastElement.querySelector('.accordion-collapse');
lastElementBody.classList.add('show');
}
document.dispatchEvent(new Event('ea.collection.item-added'));
});
collection.classList.add('processed');
},
updateCollectionItemCssClasses: (collection) => {
if (null === collection) {
return;
}
const collectionItems = collection.querySelectorAll('.field-collection-item');
collectionItems.forEach((item) => item.classList.remove('field-collection-item-first', 'field-collection-item-last'));
const firstElement = collectionItems[0];
if (undefined === firstElement) {
return;
}
firstElement.classList.add('field-collection-item-first');
const lastElement = collectionItems[collectionItems.length - 1];
if (undefined === lastElement) {
return;
}
lastElement.classList.add('field-collection-item-last');
}
};