// SPDX-FileCopyrightText: 2022 Gregor Kleen // // 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; } })();