Issue #2962110 by samuel.mortenson, drpal, andrewmacpherson, ckrina,...

Issue #2962110 by samuel.mortenson, drpal, andrewmacpherson, ckrina, phenaproxima, yoroy, webchick, amateescu, chr.fritsch, starshaped, lauriii, webflo, Dennis Cohn, dawehner, seanB, rfmarcelino, DyanneNova, benjifisher, jan.stoeckler, danbohea, John Pitcairn: Add the Media Library module to Drupal core

core/composer.json

@@ -133,6 +133,7 @@
         "drupal/locale": "self.version",
         "drupal/minimal": "self.version",
         "drupal/media": "self.version",
+        "drupal/media_library": "self.version",
         "drupal/menu_link_content": "self.version",
         "drupal/menu_ui": "self.version",
         "drupal/migrate": "self.version",

core/modules/media_library/config/install/core.entity_view_mode.media.media_library.yml

+langcode: en
+status: true
+dependencies:
+  enforced:
+    module:
+      - media_library
+  module:
+    - media
+id: media.media_library
+label: 'Media library'
+targetEntityType: media
+cache: true

core/modules/media_library/config/optional/core.entity_view_display.media.audio.media_library.yml

+langcode: en
+status: true
+dependencies:
+  config:
+    - core.entity_view_mode.media.media_library
+    - field.field.media.audio.field_media_audio_file
+    - image.style.thumbnail
+    - media.type.audio
+  module:
+    - image
+id: media.audio.media_library
+targetEntityType: media
+bundle: audio
+mode: media_library
+content:
+  thumbnail:
+    type: image
+    weight: 0
+    region: content
+    label: hidden
+    settings:
+      image_style: thumbnail
+      image_link: ''
+    third_party_settings: {  }
+hidden:
+  created: true
+  field_media_audio_file: true
+  name: true
+  uid: true

core/modules/media_library/config/optional/core.entity_view_display.media.file.media_library.yml

+langcode: en
+status: true
+dependencies:
+  config:
+    - core.entity_view_mode.media.media_library
+    - field.field.media.file.field_media_file
+    - image.style.thumbnail
+    - media.type.file
+  module:
+    - image
+id: media.file.media_library
+targetEntityType: media
+bundle: file
+mode: media_library
+content:
+  thumbnail:
+    type: image
+    weight: 0
+    region: content
+    label: hidden
+    settings:
+      image_style: thumbnail
+      image_link: ''
+    third_party_settings: {  }
+hidden:
+  created: true
+  field_media_file: true
+  name: true
+  uid: true

core/modules/media_library/config/optional/core.entity_view_display.media.image.media_library.yml

+langcode: en
+status: true
+dependencies:
+  config:
+    - core.entity_view_mode.media.media_library
+    - field.field.media.image.field_media_image
+    - image.style.medium
+    - media.type.image
+  module:
+    - image
+id: media.image.media_library
+targetEntityType: media
+bundle: image
+mode: media_library
+content:
+  thumbnail:
+    type: image
+    weight: 0
+    region: content
+    label: hidden
+    settings:
+      image_style: medium
+      image_link: ''
+    third_party_settings: {  }
+hidden:
+  created: true
+  field_media_image: true
+  name: true
+  uid: true

core/modules/media_library/config/optional/core.entity_view_display.media.video.media_library.yml

+langcode: en
+status: true
+dependencies:
+  config:
+    - core.entity_view_mode.media.media_library
+    - field.field.media.video.field_media_video_file
+    - image.style.thumbnail
+    - media.type.video
+  module:
+    - image
+id: media.video.media_library
+targetEntityType: media
+bundle: video
+mode: media_library
+content:
+  thumbnail:
+    type: image
+    weight: 0
+    region: content
+    label: hidden
+    settings:
+      image_style: thumbnail
+      image_link: ''
+    third_party_settings: {  }
+hidden:
+  created: true
+  field_media_video_file: true
+  name: true
+  uid: true

core/modules/media_library/css/media_library.module.css

+/**
+* @file media_library.module.css
+*/
+
+.media-library-page-form {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.media-library-page-form > .form-actions {
+  flex-basis: 100%;
+}
+
+.media-library-page-form__header > div,
+.media-library-view .form--inline {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.media-library-page-form__header {
+  flex-basis: 100%;
+}
+
+.media-library-item {
+  position: relative;
+}
+
+.media-library-item .js-click-to-select__trigger {
+  overflow: hidden;
+  cursor: pointer;
+}
+
+.media-library-view .form-actions {
+  align-self: flex-end;
+}
+
+.media-library-item .js-click-to-select__checkbox {
+  position: absolute;
+  display: block;
+  z-index: 1;
+  top: 5px;
+  right: 0;
+}
+
+.media-library-item__status {
+  position: absolute;
+  top: 10px;
+  left: 2px;
+  pointer-events: none;
+}
+
+.media-library-select-all {
+  flex-basis: 100%;
+}
+
+@media screen and (max-width: 600px) {
+  .media-library-view .form-actions {
+    flex-basis: 100%;
+  }
+}

core/modules/media_library/css/media_library.theme.css

+/**
+ * @file media_library.theme.css
+ *
+ * @todo Move into the Seven theme when this module is marked as stable.
+ * @see https://www.drupal.org/project/drupal/issues/2980769
+ */
+
+.media-library-page-form__header .form-item {
+  margin-right: 8px;
+}
+
+#drupal-modal .view-header {
+  margin: 16px 0;
+}
+
+.media-library-item {
+  justify-content: center;
+  vertical-align: top;
+  padding: 2px;
+  border: 1px solid #ebebeb;
+  margin: 16px 16px 2px 2px;
+  width: 180px;
+  background: #fff;
+  transition: border-color 0.2s, color 0.2s, background 0.2s;
+}
+
+.media-library-view .form-actions {
+  margin: 0.75em 0;
+}
+
+.media-library-item .field--name-thumbnail {
+  background-color: #ebebeb;
+  margin: 2px;
+  overflow: hidden;
+  text-align: center;
+}
+
+.media-library-item .field--name-thumbnail img {
+  height: 180px;
+  object-fit: contain;
+  object-position: center center;
+}
+
+.media-library-item.is-hover,
+.media-library-item.checked,
+.media-library-item.is-focus {
+  border-color: #40b6ff;
+  border-width: 3px;
+  border-radius: 3px;
+  margin: 14px 14px 0 0;
+}
+
+.media-library-item.checked {
+  border-color: #0076c0;
+}
+
+.media-library-item .js-click-to-select__checkbox input {
+  width: 30px;
+  height: 30px;
+}
+
+.media-library-item .js-click-to-select__checkbox .form-item {
+  margin: 0;
+}
+
+.media-library-item__preview {
+  padding-bottom: 44px;
+}
+
+.media-library-item__status {
+  color: #e4e4e4;
+  font-style: italic;
+  background: #666;
+  padding: 5px 10px;
+  font-size: 12px;
+}
+
+.media-library-item .views-field-operations {
+  height: 30px;
+}
+
+.media-library-item .views-field-operations .dropbutton-wrapper {
+  display: inline-block;
+  position: absolute;
+  right: 5px;
+  bottom: 5px;
+}
+
+.media-library-item__attributes {
+  position: absolute;
+  bottom: 0;
+  display: block;
+  padding: 10px;
+  max-width: calc(100% - 20px);
+  max-height: calc(100% - 60px);
+  overflow: hidden;
+  background: white;
+}
+
+.media-library-item__name {
+  font-size: 14px;
+}
+
+.media-library-item__name a {
+  display: block;
+  text-decoration: underline;
+  margin: 2px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.media-library-item__attributes:hover .media-library-item__name a,
+.media-library-item__name a:focus,
+.media-library-item.is-focus .media-library-item__name a,
+.media-library-item.checked .media-library-item__name a {
+  white-space: normal;
+}
+
+.media-library-item__name a:focus {
+  border: 2px solid;
+  margin: 0;
+}
+
+.media-library-item__type {
+  font-size: 12px;
+  color: #696969;
+}
+
+.media-library-select-all {
+  margin: 10px 0 10px 0;
+}
+
+.media-library-select-all input {
+  margin-right: 10px;
+}
+
+@media screen and (max-width: 600px) {
+  .media-library-item {
+    width: 150px;
+  }
+  .media-library-item .field--name-thumbnail img {
+    height: 150px;
+    width: 150px;
+  }
+  .media-library-item .views-field-operations .dropbutton-wrapper {
+    position: relative;
+    right: 0;
+    border: 0;
+  }
+}

core/modules/media_library/js/media_library.click_to_select.es6.js

+/**
+ * @file media_library.click_to_select.es6.js
+ */
+
+(($, Drupal) => {
+  /**
+   * Allows users to select an element which checks a hidden checkbox.
+   */
+  Drupal.behaviors.ClickToSelect = {
+    attach(context) {
+      $('.js-click-to-select__trigger', context)
+        .once('media-library-click-to-select')
+        .on('click', (event) => {
+          // Links inside the trigger should not be click-able.
+          event.preventDefault();
+          // Click the hidden checkbox when the trigger is clicked.
+          const $input = $(event.currentTarget)
+            .closest('.js-click-to-select')
+            .find('.js-click-to-select__checkbox input');
+          $input.prop('checked', !$input.prop('checked')).trigger('change');
+        });
+      $('.js-click-to-select__checkbox input', context)
+        .once('media-library-click-to-select')
+        .on('change', ({ currentTarget }) => {
+          $(currentTarget)
+            .closest('.js-click-to-select')
+            .toggleClass('checked', $(currentTarget).prop('checked'));
+        });
+    },
+  };
+})(jQuery, Drupal);

core/modules/media_library/js/media_library.click_to_select.js

+/**
+* DO NOT EDIT THIS FILE.
+* See the following change record for more information,
+* https://www.drupal.org/node/2815083
+* @preserve
+**/
+
+(function ($, Drupal) {
+  Drupal.behaviors.ClickToSelect = {
+    attach: function attach(context) {
+      $('.js-click-to-select__trigger', context).once('media-library-click-to-select').on('click', function (event) {
+        event.preventDefault();
+
+        var $input = $(event.currentTarget).closest('.js-click-to-select').find('.js-click-to-select__checkbox input');
+        $input.prop('checked', !$input.prop('checked')).trigger('change');
+      });
+      $('.js-click-to-select__checkbox input', context).once('media-library-click-to-select').on('change', function (_ref) {
+        var currentTarget = _ref.currentTarget;
+
+        $(currentTarget).closest('.js-click-to-select').toggleClass('checked', $(currentTarget).prop('checked'));
+      });
+    }
+  };
+})(jQuery, Drupal);
\ No newline at end of file

core/modules/media_library/js/media_library.view.es6.js

+/**
+ * @file media_library.view.es6.js
+ */
+(($, Drupal) => {
+  /**
+   * Adds hover effect to media items.
+   */
+  Drupal.behaviors.MediaLibraryHover = {
+    attach(context) {
+      $('.media-library-item .js-click-to-select__trigger,.media-library-item .js-click-to-select__checkbox', context).once('media-library-item-hover')
+        .on('mouseover mouseout', ({ currentTarget, type }) => {
+          $(currentTarget).closest('.media-library-item').toggleClass('is-hover', type === 'mouseover');
+        });
+    },
+  };
+
+  /**
+   * Adds focus effect to media items.
+   */
+  Drupal.behaviors.MediaLibraryFocus = {
+    attach(context) {
+      $('.media-library-item .js-click-to-select__checkbox input', context).once('media-library-item-focus')
+        .on('focus blur', ({ currentTarget, type }) => {
+          $(currentTarget).closest('.media-library-item').toggleClass('is-focus', type === 'focus');
+        });
+    },
+  };
+
+  /**
+   * Adds checkbox to select all items in the library.
+   */
+  Drupal.behaviors.MediaLibrarySelectAll = {
+    attach(context) {
+      const $view = $('.media-library-view', context).once('media-library-select-all');
+      if ($view.length && $view.find('.media-library-item').length) {
+        const $checkbox = $('<input type="checkbox" class="form-checkbox" />')
+          .on('click', ({ currentTarget }) => {
+            // Toggle all checkboxes.
+            const $checkboxes = $(currentTarget)
+              .closest('.media-library-view')
+              .find('.media-library-item input[type="checkbox"]');
+            $checkboxes
+              .prop('checked', $(currentTarget).prop('checked'))
+              .trigger('change');
+            // Announce the selection.
+            const announcement = $(currentTarget).prop('checked') ?
+              Drupal.t('Zero items selected') :
+              Drupal.t('All @count items selected', { '@count': $checkboxes.length });
+            Drupal.announce(announcement);
+          });
+        const $label = $('<label class="media-library-select-all"></label>')
+          .text(Drupal.t('Select all media'));
+        $label.prepend($checkbox);
+        $view.find('.media-library-item').first().before($label);
+      }
+    },
+  };
+})(jQuery, Drupal);

core/modules/media_library/js/media_library.view.js

+/**
+* DO NOT EDIT THIS FILE.
+* See the following change record for more information,
+* https://www.drupal.org/node/2815083
+* @preserve
+**/
+
+(function ($, Drupal) {
+  Drupal.behaviors.MediaLibraryHover = {
+    attach: function attach(context) {
+      $('.media-library-item .js-click-to-select__trigger,.media-library-item .js-click-to-select__checkbox', context).once('media-library-item-hover').on('mouseover mouseout', function (_ref) {
+        var currentTarget = _ref.currentTarget,
+            type = _ref.type;
+
+        $(currentTarget).closest('.media-library-item').toggleClass('is-hover', type === 'mouseover');
+      });
+    }
+  };
+
+  Drupal.behaviors.MediaLibraryFocus = {
+    attach: function attach(context) {
+      $('.media-library-item .js-click-to-select__checkbox input', context).once('media-library-item-focus').on('focus blur', function (_ref2) {
+        var currentTarget = _ref2.currentTarget,
+            type = _ref2.type;
+
+        $(currentTarget).closest('.media-library-item').toggleClass('is-focus', type === 'focus');
+      });
+    }
+  };
+
+  Drupal.behaviors.MediaLibrarySelectAll = {
+    attach: function attach(context) {
+      var $view = $('.media-library-view', context).once('media-library-select-all');
+      if ($view.length && $view.find('.media-library-item').length) {
+        var $checkbox = $('<input type="checkbox" class="form-checkbox" />').on('click', function (_ref3) {
+          var currentTarget = _ref3.currentTarget;
+
+          var $checkboxes = $(currentTarget).closest('.media-library-view').find('.media-library-item input[type="checkbox"]');
+          $checkboxes.prop('checked', $(currentTarget).prop('checked')).trigger('change');
+
+          var announcement = $(currentTarget).prop('checked') ? Drupal.t('Zero items selected') : Drupal.t('All @count items selected', { '@count': $checkboxes.length });
+          Drupal.announce(announcement);
+        });
+        var $label = $('<label class="media-library-select-all"></label>').text(Drupal.t('Select all media'));
+        $label.prepend($checkbox);
+        $view.find('.media-library-item').first().before($label);
+      }
+    }
+  };
+})(jQuery, Drupal);
\ No newline at end of file

core/modules/media_library/media_library.info.yml

+name: 'Media library'
+type: module
+description: 'Provides a library for re-using Media Items.'
+package: Core (Experimental)
+version: VERSION
+core: 8.x
+dependencies:
+  - drupal:media
+  - drupal:views
+  - drupal:user

core/modules/media_library/media_library.install

+<?php
+
+/**
+ * @file
+ * Install, update and uninstall functions for the media_library module.
+ */
+
+use Drupal\views\Entity\View;
+
+/**
+ * Implements hook_install().
+ */
+function media_library_install() {
+  // Change the path to the original media view.
+  /** @var \Drupal\views\Entity\View $view */
+  if ($view = View::load('media')) {
+    $display = &$view->getDisplay('media_page_list');
+    if (!empty($display)) {
+      $display['display_options']['path'] = 'admin/content/media-table';
+      unset($display['display_options']['menu']);
+      $view->trustData()->save();
+    }
+  }
+}
+
+/**
+ * Implements hook_uninstall().
+ */
+function media_library_uninstall() {
+  // Restore the path to the original media view.
+  /** @var \Drupal\views\Entity\View $view */
+  if ($view = View::load('media')) {
+    $display = &$view->getDisplay('media_page_list');
+    if (!empty($display)) {
+      $display['display_options']['path'] = 'admin/content/media';
+      $display['display_options']['menu'] = [
+        'type' => 'tab',
+        'title' => 'Media',
+        'description' => '',
+        'expanded' => FALSE,
+        'parent' => '',
+        'weight' => 0,
+        'context' => '0',
+        'menu_name' => 'main',
+      ];
+      $view->trustData()->save();
+    }
+  }
+}

core/modules/media_library/media_library.libraries.yml

+style:
+  version: VERSION
+  css:
+    component:
+      css/media_library.module.css: {}
+    theme:
+      css/media_library.theme.css: {}
+
+click_to_select:
+  version: VERSION
+  js:
+    js/media_library.click_to_select.js: {}
+  dependencies:
+    - core/drupal
+    - core/jquery.once
+
+view:
+  version: VERSION
+  js:
+    js/media_library.view.js: {}
+  dependencies:
+    - media_library/style
+    - media_library/click_to_select
+    - core/drupal.announce
+    - core/jquery.once

core/modules/media_library/media_library.links.action.yml

+media_library.add:
+  route_name: entity.media.add_page
+  title: 'Add media'
+  appears_on:
+    - view.media_library.page

core/modules/media_library/media_library.links.task.yml

+media_library.grid:
+  title: 'Grid'
+  parent_id: entity.media.collection
+  route_name: entity.media.collection
+  weight: 10
+media_library.table:
+  title: 'Table'
+  parent_id: entity.media.collection
+  route_name: view.media.media_page_list
+  weight: 20

core/modules/media_library/media_library.module

+<?php
+
+/**
+ * @file
+ * Contains hook implementations for the media_library module.
+ */
+
+use Drupal\Core\Routing\RouteMatchInterface;
+use Drupal\views\Plugin\views\cache\CachePluginBase;
+use Drupal\views\ViewExecutable;
+use Drupal\Core\Template\Attribute;
+use Drupal\Core\Form\FormStateInterface;
+use Drupal\Core\Render\Element;
+
+/**
+ * Implements hook_help().
+ *
+ * @todo Update in https://www.drupal.org/project/drupal/issues/2964789
+ */
+function media_library_help($route_name, RouteMatchInterface $route_match) {
+  switch ($route_name) {
+    case 'help.page.media_library':
+      $output = '<h3>' . t('About') . '</h3>';
+      $output .= '<p>' . t('The Media library module overrides the /admin/content/media view to provide a rich visual interface for performing administrative operations on media. For more information, see the <a href=":media">online documentation for the Media library module</a>.', [':media' => 'https://www.drupal.org/docs/8/core/modules/media']) . '</p>';
+      return $output;
+  }
+}
+
+/**
+ * Implements hook_theme().
+ */
+function media_library_theme() {
+  return [
+    'media__media_library' => [
+      'base hook' => 'media',
+    ],
+  ];
+}
+
+/**
+ * Implements hook_views_post_render().
+ */
+function media_library_views_post_render(ViewExecutable $view, &$output, CachePluginBase $cache) {
+  if ($view->id() === 'media_library') {
+    $output['#attached']['library'][] = 'media_library/view';
+  }
+}
+
+/**
+ * Implements hook_preprocess_media().
+ */
+function media_library_preprocess_media(&$variables) {
+  if ($variables['view_mode'] === 'media_library') {
+    /** @var \Drupal\media\MediaInterface $media */
+    $media = $variables['media'];
+    $variables['#cache']['contexts'][] = 'user.permissions';
+    $rel = $media->access('edit') ? 'edit-form' : 'canonical';
+    $variables['url'] = $media->toUrl($rel, [