88 lines
3.8 KiB
Plaintext
88 lines
3.8 KiB
Plaintext
(function() {
|
|
|
|
var MASS_INPUT_SELECTOR = '.massinput';
|
|
var RECIPIENT_CATEGORIES_SELECTOR = '.recipient-categories';
|
|
var RECIPIENT_CATEGORY_SELECTOR = '.recipient-category';
|
|
var RECIPIENT_CATEGORY_CHECKBOX_SELECTOR = '.recipient-category__checkbox ';
|
|
var RECIPIENT_CATEGORY_OPTIONS_SELECTOR = '.recipient-category__options';
|
|
var RECIPIENT_CATEGORY_TOGGLE_ALL_SELECTOR = '.recipient-category__toggle-all [type="checkbox"]';
|
|
var RECIPIENT_CATEGORY_CHECKED_COUNTER_SELECTOR = '.recipient-category__checked-counter';
|
|
|
|
var massInputElement;
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
var recipientCategoriesElement = document.querySelector(RECIPIENT_CATEGORIES_SELECTOR);
|
|
massInputElement = recipientCategoriesElement.closest(MASS_INPUT_SELECTOR);
|
|
|
|
setupRecipientCategories();
|
|
|
|
var recipientObserver = new MutationObserver(setupRecipientCategories);
|
|
recipientObserver.observe(massInputElement, { childList: true });
|
|
});
|
|
|
|
function setupRecipientCategories() {
|
|
var recipientCategoryElements = Array.from(massInputElement.querySelectorAll(RECIPIENT_CATEGORY_SELECTOR));
|
|
|
|
recipientCategoryElements.forEach(function(element) {
|
|
setupRecipientCategory(element);
|
|
});
|
|
}
|
|
|
|
function setupRecipientCategory(recipientCategoryElement) {
|
|
var categoryCheckbox = recipientCategoryElement.querySelector(RECIPIENT_CATEGORY_CHECKBOX_SELECTOR);
|
|
var categoryOptions = recipientCategoryElement.querySelector(RECIPIENT_CATEGORY_OPTIONS_SELECTOR);
|
|
if (categoryOptions) {
|
|
|
|
var categoryCheckboxes = Array.from(categoryOptions.querySelectorAll('[type="checkbox"]'));
|
|
var toggleAllCheckbox = recipientCategoryElement.querySelector(RECIPIENT_CATEGORY_TOGGLE_ALL_SELECTOR);
|
|
|
|
// setup category checkbox to toggle all child checkboxes if changed
|
|
categoryCheckbox.addEventListener('change', function() {
|
|
categoryCheckboxes.forEach(function(checkbox) {
|
|
checkbox.checked = categoryCheckbox.checked;
|
|
});
|
|
updateCheckedCounter(recipientCategoryElement, categoryCheckboxes);
|
|
updateToggleAllCheckbox(toggleAllCheckbox, categoryCheckboxes);
|
|
});
|
|
|
|
// update counter and toggle checkbox initially
|
|
updateCheckedCounter(recipientCategoryElement, categoryCheckboxes);
|
|
updateToggleAllCheckbox(toggleAllCheckbox, categoryCheckboxes);
|
|
|
|
// register change listener for individual checkboxes
|
|
categoryCheckboxes.forEach(function(checkbox) {
|
|
checkbox.addEventListener('change', function() {
|
|
updateCheckedCounter(recipientCategoryElement, categoryCheckboxes);
|
|
updateToggleAllCheckbox(toggleAllCheckbox, categoryCheckboxes);
|
|
});
|
|
});
|
|
|
|
// register change listener for toggle all checkbox
|
|
if (toggleAllCheckbox) {
|
|
toggleAllCheckbox.addEventListener('change', function() {
|
|
categoryCheckboxes.forEach(function(checkbox) {
|
|
checkbox.checked = toggleAllCheckbox.checked;
|
|
});
|
|
updateCheckedCounter(recipientCategoryElement, categoryCheckboxes);
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
// update checked state of toggle all checkbox based on all other checkboxes
|
|
function updateToggleAllCheckbox(toggleAllCheckbox, categoryCheckboxes) {
|
|
var allChecked = categoryCheckboxes.reduce(function(acc, checkbox) {
|
|
return acc && checkbox.checked;
|
|
}, true);
|
|
toggleAllCheckbox.checked = allChecked;
|
|
}
|
|
|
|
// update value of checked counter
|
|
function updateCheckedCounter(recipientCategoryElement, categoryCheckboxes) {
|
|
var checkedCounter = recipientCategoryElement.querySelector(RECIPIENT_CATEGORY_CHECKED_COUNTER_SELECTOR);
|
|
var checkedCheckboxes = categoryCheckboxes.reduce(function(acc, checkbox) { return checkbox.checked ? acc + 1 : acc; }, 0);
|
|
checkedCounter.innerHTML = checkedCheckboxes + '/' + categoryCheckboxes.length;
|
|
}
|
|
|
|
})();
|