Chris@0: /**
Chris@0:  * @file
Chris@0:  * Module page behaviors.
Chris@0:  */
Chris@0: 
Chris@17: (function($, Drupal, debounce) {
Chris@0:   /**
Chris@0:    * Filters the module list table by a text input search string.
Chris@0:    *
Chris@0:    * Additionally accounts for multiple tables being wrapped in "package" details
Chris@0:    * elements.
Chris@0:    *
Chris@0:    * Text search input: input.table-filter-text
Chris@0:    * Target table:      input.table-filter-text[data-table]
Chris@0:    * Source text:       .table-filter-text-source, .module-name, .module-description
Chris@0:    *
Chris@0:    * @type {Drupal~behavior}
Chris@0:    */
Chris@0:   Drupal.behaviors.tableFilterByText = {
Chris@0:     attach(context, settings) {
Chris@0:       const $input = $('input.table-filter-text').once('table-filter-text');
Chris@0:       const $table = $($input.attr('data-table'));
Chris@0:       let $rowsAndDetails;
Chris@0:       let $rows;
Chris@0:       let $details;
Chris@0:       let searching = false;
Chris@0: 
Chris@0:       function hidePackageDetails(index, element) {
Chris@0:         const $packDetails = $(element);
Chris@0:         const $visibleRows = $packDetails.find('tbody tr:visible');
Chris@0:         $packDetails.toggle($visibleRows.length > 0);
Chris@0:       }
Chris@0: 
Chris@0:       function filterModuleList(e) {
Chris@0:         const query = $(e.target).val();
Chris@0:         // Case insensitive expression to find query at the beginning of a word.
Chris@0:         const re = new RegExp(`\\b${query}`, 'i');
Chris@0: 
Chris@0:         function showModuleRow(index, row) {
Chris@0:           const $row = $(row);
Chris@17:           const $sources = $row.find(
Chris@17:             '.table-filter-text-source, .module-name, .module-description',
Chris@17:           );
Chris@0:           const textMatch = $sources.text().search(re) !== -1;
Chris@0:           $row.closest('tr').toggle(textMatch);
Chris@0:         }
Chris@0:         // Search over all rows and packages.
Chris@0:         $rowsAndDetails.show();
Chris@0: 
Chris@0:         // Filter if the length of the query is at least 2 characters.
Chris@0:         if (query.length >= 2) {
Chris@0:           searching = true;
Chris@0:           $rows.each(showModuleRow);
Chris@0: 
Chris@0:           // Note that we first open all <details> to be able to use ':visible'.
Chris@0:           // Mark the <details> elements that were closed before filtering, so
Chris@0:           // they can be reclosed when filtering is removed.
Chris@17:           $details
Chris@17:             .not('[open]')
Chris@17:             .attr('data-drupal-system-state', 'forced-open');
Chris@0: 
Chris@0:           // Hide the package <details> if they don't have any visible rows.
Chris@0:           // Note that we first show() all <details> to be able to use ':visible'.
Chris@0:           $details.attr('open', true).each(hidePackageDetails);
Chris@0: 
Chris@0:           Drupal.announce(
Chris@17:             Drupal.t('!modules modules are available in the modified list.', {
Chris@17:               '!modules': $rowsAndDetails.find('tbody tr:visible').length,
Chris@17:             }),
Chris@0:           );
Chris@17:         } else if (searching) {
Chris@0:           searching = false;
Chris@0:           $rowsAndDetails.show();
Chris@0:           // Return <details> elements that had been closed before filtering
Chris@0:           // to a closed state.
Chris@17:           $details
Chris@17:             .filter('[data-drupal-system-state="forced-open"]')
Chris@0:             .removeAttr('data-drupal-system-state')
Chris@0:             .attr('open', false);
Chris@0:         }
Chris@0:       }
Chris@0: 
Chris@0:       function preventEnterKey(event) {
Chris@0:         if (event.which === 13) {
Chris@0:           event.preventDefault();
Chris@0:           event.stopPropagation();
Chris@0:         }
Chris@0:       }
Chris@0: 
Chris@0:       if ($table.length) {
Chris@0:         $rowsAndDetails = $table.find('tr, details');
Chris@0:         $rows = $table.find('tbody tr');
Chris@0:         $details = $rowsAndDetails.filter('.package-listing');
Chris@0: 
Chris@0:         $input.on({
Chris@0:           keyup: debounce(filterModuleList, 200),
Chris@0:           keydown: preventEnterKey,
Chris@0:         });
Chris@0:       }
Chris@0:     },
Chris@0:   };
Chris@17: })(jQuery, Drupal, Drupal.debounce);