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

   1 /**
   2  * @file media_library.widget.js
   3  */
   4 (($, Drupal) => {
   5   /**
   6    * Allows users to re-order their selection with drag+drop.
   7    */
   8   Drupal.behaviors.MediaLibraryWidgetSortable = {
   9     attach(context) {
  10       // Allow media items to be re-sorted with drag+drop in the widget.
  11       $('.js-media-library-selection', context)
  12         .once('media-library-sortable')
  13         .sortable({
  14           tolerance: 'pointer',
  15           helper: 'clone',
  16           handle: '.js-media-library-item-preview',
  17           stop: ({ target }) => {
  18             // Update all the hidden "weight" fields.
  19             $(target)
  20               .children()
  21               .each((index, child) => {
  22                 $(child)
  23                   .find('.js-media-library-item-weight')
  24                   .val(index);
  25               });
  26           },
  27         });
  28     },
  29   };
  30
  31   /**
  32    * Allows selection order to be set without drag+drop for accessibility.
  33    */
  34   Drupal.behaviors.MediaLibraryWidgetToggleWeight = {
  35     attach(context) {
  36       const strings = {
  37         show: Drupal.t('Show media item weights'),
  38         hide: Drupal.t('Hide media item weights'),
  39       };
  40       $('.js-media-library-widget-toggle-weight', context)
  41         .once('media-library-toggle')
  42         .on('click', e => {
  43           e.preventDefault();
  44           $(e.currentTarget)
  45             .toggleClass('active')
  46             .text(
  47               $(e.currentTarget).hasClass('active')
  48                 ? strings.hide
  49                 : strings.show,
  50             )
  51             .parent()
  52             .find('.js-media-library-item-weight')
  53             .parent()
  54             .toggle();
  55         })
  56         .text(strings.show);
  57       $('.js-media-library-item-weight', context)
  58         .once('media-library-toggle')
  59         .parent()
  60         .hide();
  61     },
  62   };
  63
  64   /**
  65    * Warn users when clicking outgoing links from the library or widget.
  66    */
  67   Drupal.behaviors.MediaLibraryWidgetWarn = {
  68     attach(context) {
  69       $('.js-media-library-item a[href]', context)
  70         .once('media-library-warn-link')
  71         .on('click', e => {
  72           const message = Drupal.t(
  73             'Unsaved changes to the form will be lost. Are you sure you want to leave?',
  74           );
  75           const confirmation = window.confirm(message);
  76           if (!confirmation) {
  77             e.preventDefault();
  78           }
  79         });
  80     },
  81   };
  82
  83   /**
  84    * Prevent users from selecting more items than allowed in the view.
  85    */
  86   Drupal.behaviors.MediaLibraryWidgetRemaining = {
  87     attach(context, settings) {
  88       const $view = $('.js-media-library-view', context).once(
  89         'media-library-remaining',
  90       );
  91       $view
  92         .find('.js-media-library-item input[type="checkbox"]')
  93         .on('change', () => {
  94           if (
  95             settings.media_library &&
  96             settings.media_library.selection_remaining
  97           ) {
  98             const $checkboxes = $view.find(
  99               '.js-media-library-item input[type="checkbox"]',
 100             );
 101             if (
 102               $checkboxes.filter(':checked').length ===
 103               settings.media_library.selection_remaining
 104             ) {
 105               $checkboxes
 106                 .not(':checked')
 107                 .prop('disabled', true)
 108                 .closest('.js-media-library-item')
 109                 .addClass('media-library-item--disabled');
 110             } else {
 111               $checkboxes
 112                 .prop('disabled', false)
 113                 .closest('.js-media-library-item')
 114                 .removeClass('media-library-item--disabled');
 115             }
 116           }
 117         });
 118     },
 119   };
 120 })(jQuery, Drupal);