comparison core/modules/media_library/js/media_library.widget.es6.js @ 5:12f9dff5fda9 tip

Update to Drupal core 8.7.1

  * @file media_library.widget.js
  */
 (($, Drupal) => {
   /**
    * Allows users to re-order their selection with drag+drop.
+   *
+   * @type {Drupal~behavior}
+   *
+   * @prop {Drupal~behaviorAttach} attach
+   *   Attaches behavior to re-order selected media items.
    */
   Drupal.behaviors.MediaLibraryWidgetSortable = {
     attach(context) {
       // Allow media items to be re-sorted with drag+drop in the widget.
       $('.js-media-library-selection', context)

     },
   };
 
   /**
    * Allows selection order to be set without drag+drop for accessibility.
+   *
+   * @type {Drupal~behavior}
+   *
+   * @prop {Drupal~behaviorAttach} attach
+   *   Attaches behavior to toggle the weight field for media items.
    */
   Drupal.behaviors.MediaLibraryWidgetToggleWeight = {
     attach(context) {
       const strings = {
         show: Drupal.t('Show media item weights'),

         .hide();
     },
   };
 
   /**
-   * Warn users when clicking outgoing links from the library or widget.
+   * Disable the open button when the user is not allowed to add more items.
+   *
+   * @type {Drupal~behavior}
+   *
+   * @prop {Drupal~behaviorAttach} attach
+   *   Attaches behavior to disable the media library open button.
    */
-  Drupal.behaviors.MediaLibraryWidgetWarn = {
+  Drupal.behaviors.MediaLibraryWidgetDisableButton = {
     attach(context) {
-      $('.js-media-library-item a[href]', context)
-        .once('media-library-warn-link')
-        .on('click', e => {
-          const message = Drupal.t(
-            'Unsaved changes to the form will be lost. Are you sure you want to leave?',
-          );
-          const confirmation = window.confirm(message);
-          if (!confirmation) {
-            e.preventDefault();
-          }
-        });
-    },
-  };
+      // When the user returns from the modal to the widget, we want to shift
+      // the focus back to the open button. If the user is not allowed to add
+      // more items, the button needs to be disabled. Since we can't shift the
+      // focus to disabled elements, the focus is set back to the open button
+      // via JavaScript by adding the 'data-disabled-focus' attribute.
+      $('.js-media-library-open-button[data-disabled-focus="true"]', context)
+        .once('media-library-disable')
+        .each(function() {
+          $(this).focus();
 
-  /**
-   * Prevent users from selecting more items than allowed in the view.
-   */
-  Drupal.behaviors.MediaLibraryWidgetRemaining = {
-    attach(context, settings) {
-      const $view = $('.js-media-library-view', context).once(
-        'media-library-remaining',
-      );
-      $view
-        .find('.js-media-library-item input[type="checkbox"]')
-        .on('change', () => {
-          if (
-            settings.media_library &&
-            settings.media_library.selection_remaining
-          ) {
-            const $checkboxes = $view.find(
-              '.js-media-library-item input[type="checkbox"]',
-            );
-            if (
-              $checkboxes.filter(':checked').length ===
-              settings.media_library.selection_remaining
-            ) {
-              $checkboxes
-                .not(':checked')
-                .prop('disabled', true)
-                .closest('.js-media-library-item')
-                .addClass('media-library-item--disabled');
-            } else {
-              $checkboxes
-                .prop('disabled', false)
-                .closest('.js-media-library-item')
-                .removeClass('media-library-item--disabled');
-            }
-          }
+          // There is a small delay between the focus set by the browser and the
+          // focus of screen readers. We need to give screen readers time to
+          // shift the focus as well before the button is disabled.
+          setTimeout(() => {
+            $(this).attr('disabled', 'disabled');
+          }, 50);
         });
     },
   };
 })(jQuery, Drupal);