3 * Table select functionality.
8 * Initialize tableSelects.
10 * @type {Drupal~behavior}
12 * @prop {Drupal~behaviorAttach} attach
13 * Attaches tableSelect functionality.
15 Drupal.behaviors.tableSelect = {
16 attach(context, settings) {
17 // Select the inner-most table in case of nested tables.
19 .find('th.select-all')
22 .each(Drupal.tableSelect);
27 * Callback used in {@link Drupal.behaviors.tableSelect}.
29 Drupal.tableSelect = function() {
30 // Do not add a "Select all" checkbox if there are no rows with checkboxes
32 if ($(this).find('td input[type="checkbox"]').length === 0) {
36 // Keep track of the table, which checkbox is checked and alias the
41 const $table = $(table);
43 selectAll: Drupal.t('Select all rows in this table'),
44 selectNone: Drupal.t('Deselect all rows in this table'),
46 const updateSelectAll = function(state) {
47 // Update table's select-all checkbox (and sticky header's if available).
49 .prev('table.sticky-header')
51 .find('th.select-all input[type="checkbox"]')
53 const $checkbox = $(this);
54 const stateChanged = $checkbox.prop('checked') !== state;
58 state ? strings.selectNone : strings.selectAll,
62 * @checkbox {HTMLElement}
65 $checkbox.prop('checked', state).trigger('change');
70 // Find all <th> with class select-all, and insert the check all checkbox.
72 .find('th.select-all')
74 $('<input type="checkbox" class="form-checkbox" />').attr(
79 .on('click', event => {
80 if ($(event.target).is('input[type="checkbox"]')) {
81 // Loop through all checkboxes and set their state to the select all
83 checkboxes.each(function() {
84 const $checkbox = $(this);
86 $checkbox.prop('checked') !== event.target.checked;
89 * @checkbox {HTMLElement}
92 $checkbox.prop('checked', event.target.checked).trigger('change');
94 // Either add or remove the selected class based on the state of the
95 // check all checkbox.
98 * @checkbox {HTMLElement}
100 $checkbox.closest('tr').toggleClass('selected', this.checked);
102 // Update the title and the state of the check all box.
103 updateSelectAll(event.target.checked);
107 // For each of the checkboxes within the table that are not disabled.
109 .find('td input[type="checkbox"]:enabled')
110 .on('click', function(e) {
111 // Either add or remove the selected class based on the state of the
112 // check all checkbox.
115 * @this {HTMLElement}
119 .toggleClass('selected', this.checked);
121 // If this is a shift click, we need to highlight everything in the
122 // range. Also make sure that we are actually checking checkboxes
123 // over a range and that a checkbox has been checked or unchecked before.
124 if (e.shiftKey && lastChecked && lastChecked !== e.target) {
125 // We use the checkbox's parent <tr> to do our range searching.
126 Drupal.tableSelectRange(
127 $(e.target).closest('tr')[0],
128 $(lastChecked).closest('tr')[0],
133 // If all checkboxes are checked, make sure the select-all one is checked
134 // too, otherwise keep unchecked.
136 checkboxes.length === checkboxes.filter(':checked').length,
139 // Keep track of the last checked checkbox.
140 lastChecked = e.target;
143 // If all checkboxes are checked on page load, make sure the select-all one
144 // is checked too, otherwise keep unchecked.
145 updateSelectAll(checkboxes.length === checkboxes.filter(':checked').length);
149 * @param {HTMLElement} from
150 * The HTML element representing the "from" part of the range.
151 * @param {HTMLElement} to
152 * The HTML element representing the "to" part of the range.
153 * @param {bool} state
154 * The state to set on the range.
156 Drupal.tableSelectRange = function(from, to, state) {
157 // We determine the looping mode based on the order of from and to.
159 from.rowIndex > to.rowIndex ? 'previousSibling' : 'nextSibling';
161 // Traverse through the sibling nodes.
162 for (let i = from[mode]; i; i = i[mode]) {
164 // Make sure that we're only dealing with elements.
165 if (i.nodeType !== 1) {
168 // Either add or remove the selected class based on the state of the
170 $i.toggleClass('selected', state);
171 $i.find('input[type="checkbox"]').prop('checked', state);
174 // If we are at the end of the range, stop.
179 // A faster alternative to doing $(i).filter(to).length.
180 else if ($.filter(to, [i]).r.length) {