media_library.view.es6.js 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  1. /**
  2. * @file media_library.view.es6.js
  3. */
  4. (($, Drupal) => {
  5. /**
  6. * Adds checkbox to select all items in the library.
  7. *
  8. * @type {Drupal~behavior}
  9. *
  10. * @prop {Drupal~behaviorAttach} attach
  11. * Attaches behavior to select all media items.
  12. */
  13. Drupal.behaviors.MediaLibrarySelectAll = {
  14. attach(context) {
  15. const $view = $(
  16. '.js-media-library-view[data-view-display-id="page"]',
  17. context,
  18. ).once('media-library-select-all');
  19. if ($view.length && $view.find('.js-media-library-item').length) {
  20. const $checkbox = $(Drupal.theme('checkbox')).on(
  21. 'click',
  22. ({ currentTarget }) => {
  23. // Toggle all checkboxes.
  24. const $checkboxes = $(currentTarget)
  25. .closest('.js-media-library-view')
  26. .find('.js-media-library-item input[type="checkbox"]');
  27. $checkboxes
  28. .prop('checked', $(currentTarget).prop('checked'))
  29. .trigger('change');
  30. // Announce the selection.
  31. const announcement = $(currentTarget).prop('checked')
  32. ? Drupal.t('All @count items selected', {
  33. '@count': $checkboxes.length,
  34. })
  35. : Drupal.t('Zero items selected');
  36. Drupal.announce(announcement);
  37. },
  38. );
  39. const $label = $(
  40. '<label class="media-library-select-all"></label>',
  41. ).text(Drupal.t('Select all media'));
  42. $label.prepend($checkbox);
  43. $view
  44. .find('.js-media-library-item')
  45. .first()
  46. .before($label);
  47. }
  48. },
  49. };
  50. })(jQuery, Drupal);