aleph1.co.uk Git - yaffs-website/blob - web/core/modules/media_library/js/media_library.view.es6.js

   1 /**
   2  * @file media_library.view.es6.js
   3  */
   4 (($, Drupal) => {
   5   /**
   6    * Adds hover effect to media items.
   7    */
   8   Drupal.behaviors.MediaLibraryHover = {
   9     attach(context) {
  10       $(
  11         '.media-library-item .js-click-to-select-trigger,.media-library-item .js-click-to-select-checkbox',
  12         context,
  13       )
  14         .once('media-library-item-hover')
  15         .on('mouseover mouseout', ({ currentTarget, type }) => {
  16           $(currentTarget)
  17             .closest('.media-library-item')
  18             .toggleClass('is-hover', type === 'mouseover');
  19         });
  20     },
  21   };
  22
  23   /**
  24    * Adds focus effect to media items.
  25    */
  26   Drupal.behaviors.MediaLibraryFocus = {
  27     attach(context) {
  28       $('.media-library-item .js-click-to-select-checkbox input', context)
  29         .once('media-library-item-focus')
  30         .on('focus blur', ({ currentTarget, type }) => {
  31           $(currentTarget)
  32             .closest('.media-library-item')
  33             .toggleClass('is-focus', type === 'focus');
  34         });
  35     },
  36   };
  37
  38   /**
  39    * Adds checkbox to select all items in the library.
  40    */
  41   Drupal.behaviors.MediaLibrarySelectAll = {
  42     attach(context) {
  43       const $view = $('.media-library-view', context).once(
  44         'media-library-select-all',
  45       );
  46       if ($view.length && $view.find('.media-library-item').length) {
  47         const $checkbox = $(
  48           '<input type="checkbox" class="form-checkbox" />',
  49         ).on('click', ({ currentTarget }) => {
  50           // Toggle all checkboxes.
  51           const $checkboxes = $(currentTarget)
  52             .closest('.media-library-view')
  53             .find('.media-library-item input[type="checkbox"]');
  54           $checkboxes
  55             .prop('checked', $(currentTarget).prop('checked'))
  56             .trigger('change');
  57           // Announce the selection.
  58           const announcement = $(currentTarget).prop('checked')
  59             ? Drupal.t('Zero items selected')
  60             : Drupal.t('All @count items selected', {
  61                 '@count': $checkboxes.length,
  62               });
  63           Drupal.announce(announcement);
  64         });
  65         const $label = $(
  66           '<label class="media-library-select-all"></label>',
  67         ).text(Drupal.t('Select all media'));
  68         $label.prepend($checkbox);
  69         $view
  70           .find('.media-library-item')
  71           .first()
  72           .before($label);
  73       }
  74     },
  75   };
  76 })(jQuery, Drupal);