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

Update to Drupal core 8.7.1

+/**
+ * @file media_library.widget.js
+ */
+(($, Drupal, window) => {
+  /**
+   * Wrapper object for the current state of the media library.
+   */
+  Drupal.MediaLibrary = {
+    /**
+     * When a user interacts with the media library we want the selection to
+     * persist as long as the media library modal is opened. We temporarily
+     * store the selected items while the user filters the media library view or
+     * navigates to different tabs.
+     */
+    currentSelection: [],
+  };
+
+  /**
+   * Command to update the current media library selection.
+   *
+   * @param {Drupal.Ajax} [ajax]
+   *   The Drupal Ajax object.
+   * @param {object} response
+   *   Object holding the server response.
+   * @param {number} [status]
+   *   The HTTP status code.
+   */
+  Drupal.AjaxCommands.prototype.updateMediaLibrarySelection = function(
+    ajax,
+    response,
+    status,
+  ) {
+    Object.values(response.mediaIds).forEach(value => {
+      Drupal.MediaLibrary.currentSelection.push(value);
+    });
+  };
+
+  /**
+   * Warn users when clicking outgoing links from the library or widget.
+   *
+   * @type {Drupal~behavior}
+   *
+   * @prop {Drupal~behaviorAttach} attach
+   *   Attaches behavior to links in the media library.
+   */
+  Drupal.behaviors.MediaLibraryWidgetWarn = {
+    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();
+          }
+        });
+    },
+  };
+
+  /**
+   * Load media library content through AJAX.
+   *
+   * Standard AJAX links (using the 'use-ajax' class) replace the entire library
+   * dialog. When navigating to a media type through the vertical tabs, we only
+   * want to load the changed library content. This is not only more efficient,
+   * but also provides a more accessible user experience for screen readers.
+   *
+   * @type {Drupal~behavior}
+   *
+   * @prop {Drupal~behaviorAttach} attach
+   *   Attaches behavior to vertical tabs in the media library.
+   *
+   * @todo Remove when the AJAX system adds support for replacing a specific
+   *   selector via a link.
+   *   https://www.drupal.org/project/drupal/issues/3026636
+   */
+  Drupal.behaviors.MediaLibraryTabs = {
+    attach(context) {
+      const $menu = $('.js-media-library-menu');
+      $menu
+        .find('a', context)
+        .once('media-library-menu-item')
+        .on('click', e => {
+          e.preventDefault();
+          e.stopPropagation();
+
+          // Replace the library content.
+          const ajaxObject = Drupal.ajax({
+            wrapper: 'media-library-content',
+            url: e.currentTarget.href,
+            dialogType: 'ajax',
+            progress: {
+              type: 'fullscreen',
+              message: Drupal.t('Please wait...'),
+            },
+          });
+
+          // Override the AJAX success callback to shift focus to the media
+          // library content.
+          ajaxObject.success = function(response, status) {
+            // Remove the progress element.
+            if (this.progress.element) {
+              $(this.progress.element).remove();
+            }
+            if (this.progress.object) {
+              this.progress.object.stopMonitoring();
+            }
+            $(this.element).prop('disabled', false);
+
+            // Execute the AJAX commands.
+            Object.keys(response || {}).forEach(i => {
+              if (response[i].command && this.commands[response[i].command]) {
+                this.commands[response[i].command](this, response[i], status);
+              }
+            });
+
+            // Set focus to the media library content.
+            document.getElementById('media-library-content').focus();
+
+            // Remove any response-specific settings so they don't get used on
+            // the next call by mistake.
+            this.settings = null;
+          };
+          ajaxObject.execute();
+
+          // Set the active tab.
+          $menu.find('.active-tab').remove();
+          $menu.find('a').removeClass('active');
+          $(e.currentTarget)
+            .addClass('active')
+            .html(
+              Drupal.t(
+                '@title<span class="active-tab visually-hidden"> (active tab)</span>',
+                { '@title': $(e.currentTarget).html() },
+              ),
+            );
+        });
+    },
+  };
+
+  /**
+   * Load media library displays through AJAX.
+   *
+   * Standard AJAX links (using the 'use-ajax' class) replace the entire library
+   * dialog. When navigating to a media library views display, we only want to
+   * load the changed views display content. This is not only more efficient,
+   * but also provides a more accessible user experience for screen readers.
+   *
+   * @type {Drupal~behavior}
+   *
+   * @prop {Drupal~behaviorAttach} attach
+   *   Attaches behavior to vertical tabs in the media library.
+   *
+   * @todo Remove when the AJAX system adds support for replacing a specific
+   *   selector via a link.
+   *   https://www.drupal.org/project/drupal/issues/3026636
+   */
+  Drupal.behaviors.MediaLibraryViewsDisplay = {
+    attach(context) {
+      const $view = $(context).hasClass('.js-media-library-view')
+        ? $(context)
+        : $('.js-media-library-view', context);
+
+      // Add a class to the view to allow it to be replaced via AJAX.
+      // @todo Remove the custom ID when the AJAX system allows replacing
+      //    elements by selector.
+      //    https://www.drupal.org/project/drupal/issues/2821793
+      $view
+        .closest('.views-element-container')
+        .attr('id', 'media-library-view');
+
+      // We would ideally use a generic JavaScript specific class to detect the
+      // display links. Since we have no good way of altering display links yet,
+      // this is the best we can do for now.
+      // @todo Add media library specific classes and data attributes to the
+      //    media library display links when we can alter display links.
+      //    https://www.drupal.org/project/drupal/issues/3036694
+      $('.views-display-link-widget, .views-display-link-widget_table', context)
+        .once('media-library-views-display-link')
+        .on('click', e => {
+          e.preventDefault();
+          e.stopPropagation();
+
+          const $link = $(e.currentTarget);
+
+          // Add a loading and display announcement for screen reader users.
+          let loadingAnnouncement = '';
+          let displayAnnouncement = '';
+          let focusSelector = '';
+          if ($link.hasClass('views-display-link-widget')) {
+            loadingAnnouncement = Drupal.t('Loading grid view.');
+            displayAnnouncement = Drupal.t('Changed to grid view.');
+            focusSelector = '.views-display-link-widget';
+          } else if ($link.hasClass('views-display-link-widget_table')) {
+            loadingAnnouncement = Drupal.t('Loading table view.');
+            displayAnnouncement = Drupal.t('Changed to table view.');
+            focusSelector = '.views-display-link-widget_table';
+          }
+
+          // Replace the library view.
+          const ajaxObject = Drupal.ajax({
+            wrapper: 'media-library-view',
+            url: e.currentTarget.href,
+            dialogType: 'ajax',
+            progress: {
+              type: 'fullscreen',
+              message: loadingAnnouncement || Drupal.t('Please wait...'),
+            },
+          });
+
+          // Override the AJAX success callback to announce the updated content
+          // to screen readers.
+          if (displayAnnouncement || focusSelector) {
+            const success = ajaxObject.success;
+            ajaxObject.success = function(response, status) {
+              success.bind(this)(response, status);
+              // The AJAX link replaces the whole view, including the clicked
+              // link. Move the focus back to the clicked link when the view is
+              // replaced.
+              if (focusSelector) {
+                $(focusSelector).focus();
+              }
+              // Announce the new view is loaded to screen readers.
+              if (displayAnnouncement) {
+                Drupal.announce(displayAnnouncement);
+              }
+            };
+          }
+
+          ajaxObject.execute();
+
+          // Announce the new view is being loaded to screen readers.
+          // @todo Replace custom announcement when
+          //   https://www.drupal.org/project/drupal/issues/2973140 is in.
+          if (loadingAnnouncement) {
+            Drupal.announce(loadingAnnouncement);
+          }
+        });
+    },
+  };
+
+  /**
+   * Update the media library selection when loaded or media items are selected.
+   *
+   * @type {Drupal~behavior}
+   *
+   * @prop {Drupal~behaviorAttach} attach
+   *   Attaches behavior to select media items.
+   */
+  Drupal.behaviors.MediaLibraryItemSelection = {
+    attach(context, settings) {
+      const $form = $(
+        '.js-media-library-views-form, .js-media-library-add-form',
+        context,
+      );
+      const currentSelection = Drupal.MediaLibrary.currentSelection;
+
+      if (!$form.length) {
+        return;
+      }
+
+      const $mediaItems = $(
+        '.js-media-library-item input[type="checkbox"]',
+        $form,
+      );
+
+      /**
+       * Disable media items.
+       *
+       * @param {jQuery} $items
+       *   A jQuery object representing the media items that should be disabled.
+       */
+      function disableItems($items) {
+        $items
+          .prop('disabled', true)
+          .closest('.js-media-library-item')
+          .addClass('media-library-item--disabled');
+      }
+
+      /**
+       * Enable media items.
+       *
+       * @param {jQuery} $items
+       *   A jQuery object representing the media items that should be enabled.
+       */
+      function enableItems($items) {
+        $items
+          .prop('disabled', false)
+          .closest('.js-media-library-item')
+          .removeClass('media-library-item--disabled');
+      }
+
+      /**
+       * Update the number of selected items in the button pane.
+       *
+       * @param {number} remaining
+       *   The number of remaining slots.
+       */
+      function updateSelectionCount(remaining) {
+        // When the remaining number of items is a negative number, we allow an
+        // unlimited number of items. In that case we don't want to show the
+        // number of remaining slots.
+        const selectItemsText =
+          remaining < 0
+            ? Drupal.formatPlural(
+                currentSelection.length,
+                '1 item selected',
+                '@count items selected',
+              )
+            : Drupal.formatPlural(
+                remaining,
+                '@selected of @count item selected',
+                '@selected of @count items selected',
+                {
+                  '@selected': currentSelection.length,
+                },
+              );
+        // The selected count div could have been created outside of the
+        // context, so we unfortunately can't use context here.
+        $('.js-media-library-selected-count').html(selectItemsText);
+      }
+
+      // Update the selection array and the hidden form field when a media item
+      // is selected.
+      $mediaItems.once('media-item-change').on('change', e => {
+        const id = e.currentTarget.value;
+
+        // Update the selection.
+        const position = currentSelection.indexOf(id);
+        if (e.currentTarget.checked) {
+          // Check if the ID is not already in the selection and add if needed.
+          if (position === -1) {
+            currentSelection.push(id);
+          }
+        } else if (position !== -1) {
+          // Remove the ID when it is in the current selection.
+          currentSelection.splice(position, 1);
+        }
+
+        // Set the selection in the hidden form element.
+        $form
+          .find('#media-library-modal-selection')
+          .val(currentSelection.join())
+          .trigger('change');
+
+        // Set the selection in the media library add form. Since the form is
+        // not necessarily loaded within the same context, we can't use the
+        // context here.
+        $('.js-media-library-add-form-current-selection').val(
+          currentSelection.join(),
+        );
+      });
+
+      // The hidden selection form field changes when the selection is updated.
+      $('#media-library-modal-selection', $form)
+        .once('media-library-selection-change')
+        .on('change', e => {
+          updateSelectionCount(settings.media_library.selection_remaining);
+
+          // Prevent users from selecting more items than allowed.
+          if (
+            currentSelection.length ===
+            settings.media_library.selection_remaining
+          ) {
+            disableItems($mediaItems.not(':checked'));
+            enableItems($mediaItems.filter(':checked'));
+          } else {
+            enableItems($mediaItems);
+          }
+        });
+
+      // Apply the current selection to the media library view. Changing the
+      // checkbox values triggers the change event for the media items. The
+      // change event handles updating the hidden selection field for the form.
+      currentSelection.forEach(value => {
+        $form
+          .find(`input[type="checkbox"][value="${value}"]`)
+          .prop('checked', true)
+          .trigger('change');
+      });
+
+      // Add the selection count to the button pane when a media library dialog
+      // is created.
+      $(window)
+        .once('media-library-selection-info')
+        .on('dialog:aftercreate', () => {
+          // Since the dialog HTML is not part of the context, we can't use
+          // context here.
+          const $buttonPane = $(
+            '.media-library-widget-modal .ui-dialog-buttonpane',
+          );
+          if (!$buttonPane.length) {
+            return;
+          }
+          $buttonPane.append(Drupal.theme('mediaLibrarySelectionCount'));
+          updateSelectionCount(settings.media_library.selection_remaining);
+        });
+    },
+  };
+
+  /**
+   * Clear the current selection.
+   *
+   * @type {Drupal~behavior}
+   *
+   * @prop {Drupal~behaviorAttach} attach
+   *   Attaches behavior to clear the selection when the library modal closes.
+   */
+  Drupal.behaviors.MediaLibraryModalClearSelection = {
+    attach() {
+      $(window)
+        .once('media-library-clear-selection')
+        .on('dialog:afterclose', () => {
+          Drupal.MediaLibrary.currentSelection = [];
+        });
+    },
+  };
+
+  /**
+   * Theme function for the selection count.
+   *
+   * @return {string}
+   *   The corresponding HTML.
+   */
+  Drupal.theme.mediaLibrarySelectionCount = function() {
+    return `<div class="media-library-selected-count js-media-library-selected-count" role="status" aria-live="polite" aria-atomic="true"></div>`;
+  };
+})(jQuery, Drupal, window);