// This file is part of Moodle - http://moodle.org/
//
// Moodle is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Moodle is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Moodle. If not, see <http://www.gnu.org/licenses/>.
/**
* A module to help with toggle select/deselect all.
*
* @module core/checkbox-toggleall
* @copyright 2019 Andrew Nicols <andrew@nicols.co.uk>
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
define(['jquery', 'core/pubsub'], function($, PubSub) {
/**
* Whether event listeners have already been registered.
*
* @private
* @type {boolean}
*/
var registered = false;
/**
* List of custom events that this module publishes.
*
* @private
* @type {{checkboxToggled: string}}
*/
var events = {
checkboxToggled: 'core/checkbox-toggleall:checkboxToggled',
};
/**
* Fetches elements that are member of a given toggle group.
*
* @private
* @param {jQuery} root The root jQuery element.
* @param {string} toggleGroup The toggle group name that we're searching form.
* @param {boolean} exactMatch Whether we want an exact match we just want to match toggle groups that start with the given
* toggle group name.
* @returns {jQuery} The elements matching the given toggle group.
*/
var getToggleGroupElements = function(root, toggleGroup, exactMatch) {
if (exactMatch) {
return root.find('[data-action="toggle"][data-togglegroup="' + toggleGroup + '"]');
} else {
return root.find('[data-action="toggle"][data-togglegroup^="' + toggleGroup + '"]');
}
};
/**
* Fetches the slave checkboxes for a given toggle group.
*
* @private
* @param {jQuery} root The root jQuery element.
* @param {string} toggleGroup The toggle group name.
* @returns {jQuery} The slave checkboxes belonging to the toggle group.
*/
var getAllSlaveCheckboxes = function(root, toggleGroup) {
return getToggleGroupElements(root, toggleGroup, false).filter('[data-toggle="slave"]');
};
/**
* Fetches the master elements (checkboxes or buttons) that control the slave checkboxes in a given toggle group.
*
* @private
* @param {jQuery} root The root jQuery element.
* @param {string} toggleGroup The toggle group name.
* @param {boolean} exactMatch
* @returns {jQuery} The control elements belonging to the toggle group.
*/
var getControlCheckboxes = function(root, toggleGroup, exactMatch) {
return getToggleGroupElements(root, toggleGroup, exactMatch).filter('[data-toggle="master"]');
};
/**
* Fetches the action elements that perform actions on the selected checkboxes in a given toggle group.
*
* @private
* @param {jQuery} root The root jQuery element.
* @param {string} toggleGroup The toggle group name.
* @returns {jQuery} The action elements belonging to the toggle group.
*/
var getActionElements = function(root, toggleGroup) {
return getToggleGroupElements(root, toggleGroup, true).filter('[data-toggle="action"]');
};
/**
* Toggles the slave checkboxes in a given toggle group when a master element in that toggle group is toggled.
*
* @private
* @param {Object} e The event object.
*/
var toggleSlavesFromMasters = function(e) {
var root = e.data.root;
var target = $(e.target);
var toggleGroupName = target.data('togglegroup');
var targetState;
if (target.is(':checkbox')) {
targetState = target.is(':checked');
} else {
targetState = target.data('checkall') === 1;
}
toggleSlavesToState(root, toggleGroupName, targetState);
};
/**
* Toggles the slave checkboxes from the masters.
*
* @param {HTMLElement} root
* @param {String} toggleGroupName
*/
var updateSlavesFromMasterState = function(root, toggleGroupName) {
// Normalise to jQuery Object.
root = $(root);
var target = getControlCheckboxes(root, toggleGroupName, false);
var targetState;
if (target.is(':checkbox')) {
targetState = target.is(':checked');
} else {
targetState = target.data('checkall') === 1;
}
toggleSlavesToState(root, toggleGroupName, targetState);
};
/**
* Toggles the master checkboxes and action elements in a given toggle group.
*
* @param {jQuery} root The root jQuery element.
* @param {String} toggleGroupName The name of the toggle group
*/
var toggleMastersAndActionElements = function(root, toggleGroupName) {
var toggleGroupSlaves = getAllSlaveCheckboxes(root, toggleGroupName);
if (toggleGroupSlaves.length > 0) {
var toggleGroupCheckedSlaves = toggleGroupSlaves.filter(':checked');
var targetState = toggleGroupSlaves.length === toggleGroupCheckedSlaves.length;
// Make sure to toggle the exact master checkbox in the given toggle group.
setMasterStates(root, toggleGroupName, targetState, true);
// Enable the action elements if there's at least one checkbox checked in the given toggle group.
// Disable otherwise.
setActionElementStates(root, toggleGroupName, !toggleGroupCheckedSlaves.length);
}
};
/**
* Returns an array containing every toggle group level of a given toggle group.
*
* @param {String} toggleGroupName The name of the toggle group
* @return {Array} toggleGroupLevels Array that contains every toggle group level of a given toggle group
*/
var getToggleGroupLevels = function(toggleGroupName) {
var toggleGroups = toggleGroupName.split(' ');
var toggleGroupLevels = [];
var toggleGroupLevel = '';
toggleGroups.forEach(function(toggleGroupName) {
toggleGroupLevel += ' ' + toggleGroupName;
toggleGroupLevels.push(toggleGroupLevel.trim());
});
return toggleGroupLevels;
};
/**
* Toggles the slave checkboxes to a specific state.
*
* @param {HTMLElement} root
* @param {String} toggleGroupName
* @param {Bool} targetState
*/
var toggleSlavesToState = function(root, toggleGroupName, targetState) {
var slaves = getAllSlaveCheckboxes(root, toggleGroupName);
// Set the slave checkboxes from the masters and manually trigger the native 'change' event.
slaves.prop('checked', targetState).trigger('change');
// Get all checked slaves after the change of state.
var checkedSlaves = slaves.filter(':checked');
// Toggle the master checkbox in the given toggle group.
setMasterStates(root, toggleGroupName, targetState, false);
// Enable the action elements if there's at least one checkbox checked in the given toggle group. Disable otherwise.
setActionElementStates(root, toggleGroupName, !checkedSlaves.length);
// Get all toggle group levels and toggle accordingly all parent master checkboxes and action elements from each
// level. Exclude the given toggle group (toggleGroupName) as the master checkboxes and action elements from this
// level have been already toggled.
var toggleGroupLevels = getToggleGroupLevels(toggleGroupName)
.filter(toggleGroupLevel => toggleGroupLevel !== toggleGroupName);
toggleGroupLevels.forEach(function(toggleGroupLevel) {
// Toggle the master checkboxes action elements in the given toggle group level.
toggleMastersAndActionElements(root, toggleGroupLevel);
});
PubSub.publish(events.checkboxToggled, {
root: root,
toggleGroupName: toggleGroupName,
slaves: slaves,
checkedSlaves: checkedSlaves,
anyChecked: targetState,
});
};
/**
* Set the state for an entire group of checkboxes.
*
* @param {HTMLElement} root
* @param {String} toggleGroupName
* @param {Bool} targetState
*/
var setGroupState = function(root, toggleGroupName, targetState) {
// Normalise to jQuery Object.
root = $(root);
// Set the master and slaves.
setMasterStates(root, toggleGroupName, targetState, true);
toggleSlavesToState(root, toggleGroupName, targetState);
};
/**
* Toggles the master checkboxes in a given toggle group when all or none of the slave checkboxes in the same toggle group
* have been selected.
*
* @private
* @param {Object} e The event object.
*/
var toggleMastersFromSlaves = function(e) {
var root = e.data.root;
var target = $(e.target);
var toggleGroupName = target.data('togglegroup');
var slaves = getAllSlaveCheckboxes(root, toggleGroupName);
var checkedSlaves = slaves.filter(':checked');
// Get all toggle group levels for the given toggle group and toggle accordingly all master checkboxes
// and action elements from each level.
var toggleGroupLevels = getToggleGroupLevels(toggleGroupName);
toggleGroupLevels.forEach(function(toggleGroupLevel) {
// Toggle the master checkboxes action elements in the given toggle group level.
toggleMastersAndActionElements(root, toggleGroupLevel);
});
PubSub.publish(events.checkboxToggled, {
root: root,
toggleGroupName: toggleGroupName,
slaves: slaves,
checkedSlaves: checkedSlaves,
anyChecked: !!checkedSlaves.length,
});
};
/**
* Enables or disables the action elements.
*
* @private
* @param {jQuery} root The root jQuery element.
* @param {string} toggleGroupName The toggle group name of the action element(s).
* @param {boolean} disableActionElements Whether to disable or to enable the action elements.
*/
var setActionElementStates = function(root, toggleGroupName, disableActionElements) {
getActionElements(root, toggleGroupName).prop('disabled', disableActionElements);
};
/**
* Selects or deselects the master elements.
*
* @private
* @param {jQuery} root The root jQuery element.
* @param {string} toggleGroupName The toggle group name of the master element(s).
* @param {boolean} targetState Whether to select (true) or deselect (false).
* @param {boolean} exactMatch Whether to do an exact match for the toggle group name or not.
*/
var setMasterStates = function(root, toggleGroupName, targetState, exactMatch) {
// Set the master checkboxes value and ARIA labels..
var masters = getControlCheckboxes(root, toggleGroupName, exactMatch);
masters.prop('checked', targetState);
masters.each(function(i, masterElement) {
masterElement = $(masterElement);
var targetString;
if (targetState) {
targetString = masterElement.data('toggle-deselectall');
} else {
targetString = masterElement.data('toggle-selectall');
}
if (masterElement.is(':checkbox')) {
var masterLabel = root.find('[for="' + masterElement.attr('id') + '"]');
if (masterLabel.length) {
if (masterLabel.html() !== targetString) {
masterLabel.html(targetString);
}
}
} else {
masterElement.text(targetString);
// Set the checkall data attribute.
masterElement.data('checkall', targetState ? 0 : 1);
}
});
};
/**
* Registers the event listeners.
*
* @private
*/
var registerListeners = function() {
if (!registered) {
registered = true;
var root = $(document.body);
root.on('click', '[data-action="toggle"][data-toggle="master"]', {root: root}, toggleSlavesFromMasters);
root.on('click', '[data-action="toggle"][data-toggle="slave"]', {root: root}, toggleMastersFromSlaves);
}
};
return {
init: function() {
registerListeners();
},
events: events,
setGroupState: setGroupState,
updateSlavesFromMasterState: updateSlavesFromMasterState,
};
});