system.modules.es6.js 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. /**
  2. * @file
  3. * Module page behaviors.
  4. */
  5. (function($, Drupal, debounce) {
  6. /**
  7. * Filters the module list table by a text input search string.
  8. *
  9. * Additionally accounts for multiple tables being wrapped in "package" details
  10. * elements.
  11. *
  12. * Text search input: input.table-filter-text
  13. * Target table: input.table-filter-text[data-table]
  14. * Source text: .table-filter-text-source, .module-name, .module-description
  15. *
  16. * @type {Drupal~behavior}
  17. */
  18. Drupal.behaviors.tableFilterByText = {
  19. attach(context, settings) {
  20. const $input = $('input.table-filter-text').once('table-filter-text');
  21. const $table = $($input.attr('data-table'));
  22. let $rowsAndDetails;
  23. let $rows;
  24. let $details;
  25. let searching = false;
  26. function hidePackageDetails(index, element) {
  27. const $packDetails = $(element);
  28. const $visibleRows = $packDetails.find('tbody tr:visible');
  29. $packDetails.toggle($visibleRows.length > 0);
  30. }
  31. function filterModuleList(e) {
  32. const query = $(e.target).val();
  33. // Case insensitive expression to find query at the beginning of a word.
  34. const re = new RegExp(`\\b${query}`, 'i');
  35. function showModuleRow(index, row) {
  36. const $row = $(row);
  37. const $sources = $row.find(
  38. '.table-filter-text-source, .module-name, .module-description',
  39. );
  40. const textMatch = $sources.text().search(re) !== -1;
  41. $row.closest('tr').toggle(textMatch);
  42. }
  43. // Search over all rows and packages.
  44. $rowsAndDetails.show();
  45. // Filter if the length of the query is at least 2 characters.
  46. if (query.length >= 2) {
  47. searching = true;
  48. $rows.each(showModuleRow);
  49. // Note that we first open all <details> to be able to use ':visible'.
  50. // Mark the <details> elements that were closed before filtering, so
  51. // they can be reclosed when filtering is removed.
  52. $details
  53. .not('[open]')
  54. .attr('data-drupal-system-state', 'forced-open');
  55. // Hide the package <details> if they don't have any visible rows.
  56. // Note that we first show() all <details> to be able to use ':visible'.
  57. $details.attr('open', true).each(hidePackageDetails);
  58. Drupal.announce(
  59. Drupal.t('!modules modules are available in the modified list.', {
  60. '!modules': $rowsAndDetails.find('tbody tr:visible').length,
  61. }),
  62. );
  63. } else if (searching) {
  64. searching = false;
  65. $rowsAndDetails.show();
  66. // Return <details> elements that had been closed before filtering
  67. // to a closed state.
  68. $details
  69. .filter('[data-drupal-system-state="forced-open"]')
  70. .removeAttr('data-drupal-system-state')
  71. .attr('open', false);
  72. }
  73. }
  74. function preventEnterKey(event) {
  75. if (event.which === 13) {
  76. event.preventDefault();
  77. event.stopPropagation();
  78. }
  79. }
  80. if ($table.length) {
  81. $rowsAndDetails = $table.find('tr, details');
  82. $rows = $table.find('tbody tr');
  83. $details = $rowsAndDetails.filter('.package-listing');
  84. $input.on({
  85. keyup: debounce(filterModuleList, 200),
  86. keydown: preventEnterKey,
  87. });
  88. }
  89. },
  90. };
  91. })(jQuery, Drupal, Drupal.debounce);