123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158 |
- /**
- * @file
- * Table select functionality.
- */
- (function ($, Drupal) {
- /**
- * Initialize tableSelects.
- *
- * @type {Drupal~behavior}
- *
- * @prop {Drupal~behaviorAttach} attach
- * Attaches tableSelect functionality.
- */
- Drupal.behaviors.tableSelect = {
- attach(context, settings) {
- // Select the inner-most table in case of nested tables.
- $(context)
- .find('th.select-all')
- .closest('table')
- .once('table-select')
- .each(Drupal.tableSelect);
- },
- };
- /**
- * Callback used in {@link Drupal.behaviors.tableSelect}.
- */
- Drupal.tableSelect = function () {
- // Do not add a "Select all" checkbox if there are no rows with checkboxes
- // in the table.
- if ($(this).find('td input[type="checkbox"]').length === 0) {
- return;
- }
- // Keep track of the table, which checkbox is checked and alias the
- // settings.
- const table = this;
- let checkboxes;
- let lastChecked;
- const $table = $(table);
- const strings = {
- selectAll: Drupal.t('Select all rows in this table'),
- selectNone: Drupal.t('Deselect all rows in this table'),
- };
- const updateSelectAll = function (state) {
- // Update table's select-all checkbox (and sticky header's if available).
- $table.prev('table.sticky-header').addBack().find('th.select-all input[type="checkbox"]').each(function () {
- const $checkbox = $(this);
- const stateChanged = $checkbox.prop('checked') !== state;
- $checkbox.attr('title', state ? strings.selectNone : strings.selectAll);
- /**
- * @checkbox {HTMLElement}
- */
- if (stateChanged) {
- $checkbox.prop('checked', state).trigger('change');
- }
- });
- };
- // Find all <th> with class select-all, and insert the check all checkbox.
- $table.find('th.select-all').prepend($('<input type="checkbox" class="form-checkbox" />').attr('title', strings.selectAll)).on('click', (event) => {
- if ($(event.target).is('input[type="checkbox"]')) {
- // Loop through all checkboxes and set their state to the select all
- // checkbox' state.
- checkboxes.each(function () {
- const $checkbox = $(this);
- const stateChanged = $checkbox.prop('checked') !== event.target.checked;
- /**
- * @checkbox {HTMLElement}
- */
- if (stateChanged) {
- $checkbox.prop('checked', event.target.checked).trigger('change');
- }
- // Either add or remove the selected class based on the state of the
- // check all checkbox.
- /**
- * @checkbox {HTMLElement}
- */
- $checkbox.closest('tr').toggleClass('selected', this.checked);
- });
- // Update the title and the state of the check all box.
- updateSelectAll(event.target.checked);
- }
- });
- // For each of the checkboxes within the table that are not disabled.
- checkboxes = $table.find('td input[type="checkbox"]:enabled').on('click', function (e) {
- // Either add or remove the selected class based on the state of the
- // check all checkbox.
- /**
- * @this {HTMLElement}
- */
- $(this).closest('tr').toggleClass('selected', this.checked);
- // If this is a shift click, we need to highlight everything in the
- // range. Also make sure that we are actually checking checkboxes
- // over a range and that a checkbox has been checked or unchecked before.
- if (e.shiftKey && lastChecked && lastChecked !== e.target) {
- // We use the checkbox's parent <tr> to do our range searching.
- Drupal.tableSelectRange($(e.target).closest('tr')[0], $(lastChecked).closest('tr')[0], e.target.checked);
- }
- // If all checkboxes are checked, make sure the select-all one is checked
- // too, otherwise keep unchecked.
- updateSelectAll((checkboxes.length === checkboxes.filter(':checked').length));
- // Keep track of the last checked checkbox.
- lastChecked = e.target;
- });
- // If all checkboxes are checked on page load, make sure the select-all one
- // is checked too, otherwise keep unchecked.
- updateSelectAll((checkboxes.length === checkboxes.filter(':checked').length));
- };
- /**
- * @param {HTMLElement} from
- * The HTML element representing the "from" part of the range.
- * @param {HTMLElement} to
- * The HTML element representing the "to" part of the range.
- * @param {bool} state
- * The state to set on the range.
- */
- Drupal.tableSelectRange = function (from, to, state) {
- // We determine the looping mode based on the order of from and to.
- const mode = from.rowIndex > to.rowIndex ? 'previousSibling' : 'nextSibling';
- // Traverse through the sibling nodes.
- for (let i = from[mode]; i; i = i[mode]) {
- const $i = $(i);
- // Make sure that we're only dealing with elements.
- if (i.nodeType !== 1) {
- continue;
- }
- // Either add or remove the selected class based on the state of the
- // target checkbox.
- $i.toggleClass('selected', state);
- $i.find('input[type="checkbox"]').prop('checked', state);
- if (to.nodeType) {
- // If we are at the end of the range, stop.
- if (i === to) {
- break;
- }
- }
- // A faster alternative to doing $(i).filter(to).length.
- else if ($.filter(to, [i]).r.length) {
- break;
- }
- }
- };
- }(jQuery, Drupal));
|