tableselect.es6.js 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185
  1. /**
  2. * @file
  3. * Table select functionality.
  4. */
  5. (function($, Drupal) {
  6. /**
  7. * Initialize tableSelects.
  8. *
  9. * @type {Drupal~behavior}
  10. *
  11. * @prop {Drupal~behaviorAttach} attach
  12. * Attaches tableSelect functionality.
  13. */
  14. Drupal.behaviors.tableSelect = {
  15. attach(context, settings) {
  16. // Select the inner-most table in case of nested tables.
  17. $(context)
  18. .find('th.select-all')
  19. .closest('table')
  20. .once('table-select')
  21. .each(Drupal.tableSelect);
  22. },
  23. };
  24. /**
  25. * Callback used in {@link Drupal.behaviors.tableSelect}.
  26. */
  27. Drupal.tableSelect = function() {
  28. // Do not add a "Select all" checkbox if there are no rows with checkboxes
  29. // in the table.
  30. if ($(this).find('td input[type="checkbox"]').length === 0) {
  31. return;
  32. }
  33. // Keep track of the table, which checkbox is checked and alias the
  34. // settings.
  35. const table = this;
  36. let checkboxes;
  37. let lastChecked;
  38. const $table = $(table);
  39. const strings = {
  40. selectAll: Drupal.t('Select all rows in this table'),
  41. selectNone: Drupal.t('Deselect all rows in this table'),
  42. };
  43. const updateSelectAll = function(state) {
  44. // Update table's select-all checkbox (and sticky header's if available).
  45. $table
  46. .prev('table.sticky-header')
  47. .addBack()
  48. .find('th.select-all input[type="checkbox"]')
  49. .each(function() {
  50. const $checkbox = $(this);
  51. const stateChanged = $checkbox.prop('checked') !== state;
  52. $checkbox.attr(
  53. 'title',
  54. state ? strings.selectNone : strings.selectAll,
  55. );
  56. /**
  57. * @checkbox {HTMLElement}
  58. */
  59. if (stateChanged) {
  60. $checkbox.prop('checked', state).trigger('change');
  61. }
  62. });
  63. };
  64. // Find all <th> with class select-all, and insert the check all checkbox.
  65. $table
  66. .find('th.select-all')
  67. .prepend(
  68. $('<input type="checkbox" class="form-checkbox" />').attr(
  69. 'title',
  70. strings.selectAll,
  71. ),
  72. )
  73. .on('click', event => {
  74. if ($(event.target).is('input[type="checkbox"]')) {
  75. // Loop through all checkboxes and set their state to the select all
  76. // checkbox' state.
  77. checkboxes.each(function() {
  78. const $checkbox = $(this);
  79. const stateChanged =
  80. $checkbox.prop('checked') !== event.target.checked;
  81. /**
  82. * @checkbox {HTMLElement}
  83. */
  84. if (stateChanged) {
  85. $checkbox.prop('checked', event.target.checked).trigger('change');
  86. }
  87. // Either add or remove the selected class based on the state of the
  88. // check all checkbox.
  89. /**
  90. * @checkbox {HTMLElement}
  91. */
  92. $checkbox.closest('tr').toggleClass('selected', this.checked);
  93. });
  94. // Update the title and the state of the check all box.
  95. updateSelectAll(event.target.checked);
  96. }
  97. });
  98. // For each of the checkboxes within the table that are not disabled.
  99. checkboxes = $table
  100. .find('td input[type="checkbox"]:enabled')
  101. .on('click', function(e) {
  102. // Either add or remove the selected class based on the state of the
  103. // check all checkbox.
  104. /**
  105. * @this {HTMLElement}
  106. */
  107. $(this)
  108. .closest('tr')
  109. .toggleClass('selected', this.checked);
  110. // If this is a shift click, we need to highlight everything in the
  111. // range. Also make sure that we are actually checking checkboxes
  112. // over a range and that a checkbox has been checked or unchecked before.
  113. if (e.shiftKey && lastChecked && lastChecked !== e.target) {
  114. // We use the checkbox's parent <tr> to do our range searching.
  115. Drupal.tableSelectRange(
  116. $(e.target).closest('tr')[0],
  117. $(lastChecked).closest('tr')[0],
  118. e.target.checked,
  119. );
  120. }
  121. // If all checkboxes are checked, make sure the select-all one is checked
  122. // too, otherwise keep unchecked.
  123. updateSelectAll(
  124. checkboxes.length === checkboxes.filter(':checked').length,
  125. );
  126. // Keep track of the last checked checkbox.
  127. lastChecked = e.target;
  128. });
  129. // If all checkboxes are checked on page load, make sure the select-all one
  130. // is checked too, otherwise keep unchecked.
  131. updateSelectAll(checkboxes.length === checkboxes.filter(':checked').length);
  132. };
  133. /**
  134. * @param {HTMLElement} from
  135. * The HTML element representing the "from" part of the range.
  136. * @param {HTMLElement} to
  137. * The HTML element representing the "to" part of the range.
  138. * @param {bool} state
  139. * The state to set on the range.
  140. */
  141. Drupal.tableSelectRange = function(from, to, state) {
  142. // We determine the looping mode based on the order of from and to.
  143. const mode =
  144. from.rowIndex > to.rowIndex ? 'previousSibling' : 'nextSibling';
  145. // Traverse through the sibling nodes.
  146. for (let i = from[mode]; i; i = i[mode]) {
  147. const $i = $(i);
  148. // Make sure that we're only dealing with elements.
  149. if (i.nodeType !== 1) {
  150. continue;
  151. }
  152. // Either add or remove the selected class based on the state of the
  153. // target checkbox.
  154. $i.toggleClass('selected', state);
  155. $i.find('input[type="checkbox"]').prop('checked', state);
  156. if (to.nodeType) {
  157. // If we are at the end of the range, stop.
  158. if (i === to) {
  159. break;
  160. }
  161. }
  162. // A faster alternative to doing $(i).filter(to).length.
  163. else if ($.filter(to, [i]).r.length) {
  164. break;
  165. }
  166. }
  167. };
  168. })(jQuery, Drupal);