86 lines
3.3 KiB
Plaintext
86 lines
3.3 KiB
Plaintext
// SPDX-FileCopyrightText: 2022 Gregor Kleen <gregor.kleen@ifi.lmu.de>
|
|
//
|
|
// SPDX-License-Identifier: AGPL-3.0-or-later
|
|
|
|
(function() {
|
|
|
|
var IMPORT_ACTIONS_SELECTOR = '.actions';
|
|
var IMPORT_ACTION_SELECTOR = '.action';
|
|
var IMPORT_ACTION_CHECKBOX_SELECTOR = '.action__checkbox ';
|
|
var IMPORT_ACTION_OPTIONS_SELECTOR = '.action__options';
|
|
var IMPORT_ACTION_TOGGLE_ALL_SELECTOR = '.action__toggle-all [type="checkbox"]';
|
|
var IMPORT_ACTION_CHECKED_COUNTER_SELECTOR = '.action__checked-counter';
|
|
|
|
var importActionsElement;
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
importActionsElement = document.querySelector(IMPORT_ACTIONS_SELECTOR);
|
|
|
|
setupActions();
|
|
});
|
|
|
|
function setupActions() {
|
|
var actionElements = Array.from(importActionsElement.querySelectorAll(IMPORT_ACTION_SELECTOR));
|
|
|
|
actionElements.forEach(function(element) {
|
|
setupAction(element);
|
|
});
|
|
}
|
|
|
|
function setupAction(actionElement) {
|
|
var actionCheckbox = actionElement.querySelector(IMPORT_ACTION_CHECKBOX_SELECTOR);
|
|
var actionOptions = actionElement.querySelector(IMPORT_ACTION_OPTIONS_SELECTOR);
|
|
if (actionOptions) {
|
|
var actionCheckboxes = Array.from(actionOptions.querySelectorAll('[type="checkbox"]'));
|
|
var toggleAllCheckbox = actionElement.querySelector(IMPORT_ACTION_TOGGLE_ALL_SELECTOR);
|
|
|
|
// setup action checkbox to toggle all child checkboxes if changed
|
|
actionCheckbox.addEventListener('change', function() {
|
|
actionCheckboxes.forEach(function(checkbox) {
|
|
checkbox.checked = actionCheckbox.checked;
|
|
});
|
|
updateCheckedCounter(actionElement, actionCheckboxes);
|
|
updateToggleAllCheckbox(toggleAllCheckbox, actionCheckboxes);
|
|
});
|
|
|
|
// update counter and toggle checkbox initially
|
|
updateCheckedCounter(actionElement, actionCheckboxes);
|
|
updateToggleAllCheckbox(toggleAllCheckbox, actionCheckboxes);
|
|
|
|
// register change listener for individual checkboxes
|
|
actionCheckboxes.forEach(function(checkbox) {
|
|
checkbox.addEventListener('change', function() {
|
|
updateCheckedCounter(actionElement, actionCheckboxes);
|
|
updateToggleAllCheckbox(toggleAllCheckbox, actionCheckboxes);
|
|
});
|
|
});
|
|
|
|
// register change listener for toggle all checkbox
|
|
if (toggleAllCheckbox) {
|
|
toggleAllCheckbox.addEventListener('change', function() {
|
|
actionCheckboxes.forEach(function(checkbox) {
|
|
checkbox.checked = toggleAllCheckbox.checked;
|
|
});
|
|
updateCheckedCounter(actionElement, actionCheckboxes);
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
// update checked state of toggle all checkbox based on all other checkboxes
|
|
function updateToggleAllCheckbox(toggleAllCheckbox, actionCheckboxes) {
|
|
var allChecked = actionCheckboxes.reduce(function(acc, checkbox) {
|
|
return acc && checkbox.checked;
|
|
}, true);
|
|
toggleAllCheckbox.checked = allChecked;
|
|
}
|
|
|
|
// update value of checked counter
|
|
function updateCheckedCounter(actionElement, actionCheckboxes) {
|
|
var checkedCounter = actionElement.querySelector(IMPORT_ACTION_CHECKED_COUNTER_SELECTOR);
|
|
var checkedCheckboxes = actionCheckboxes.reduce(function(acc, checkbox) { return checkbox.checked ? acc + 1 : acc; }, 0);
|
|
checkedCounter.innerHTML = checkedCheckboxes + '/' + actionCheckboxes.length;
|
|
}
|
|
|
|
})();
|