diff --git a/core/modules/media_library/css/media_library.module.css b/core/modules/media_library/css/media_library.module.css
index 694c5b33e9..bf8011a971 100644
--- a/core/modules/media_library/css/media_library.module.css
+++ b/core/modules/media_library/css/media_library.module.css
@@ -24,6 +24,7 @@
.media-library-views-form,
.media-library-selection,
+.media-library-add-form-selection,
.media-library-views-form__bulk_form,
.media-library-view .form--inline {
display: flex;
@@ -81,7 +82,8 @@
/* @todo Remove or re-work in https://www.drupal.org/node/2985168 */
.media-library-widget .media-library-item__name a,
-.media-library-view.view-display-id-widget .media-library-item__name a {
+.media-library-view.view-display-id-widget .media-library-item__name a,
+.media-library-add-form-selection .media-library-item__name a {
pointer-events: none;
}
diff --git a/core/modules/media_library/css/media_library.theme.css b/core/modules/media_library/css/media_library.theme.css
index e5ca9ab6d5..c7055682ec 100644
--- a/core/modules/media_library/css/media_library.theme.css
+++ b/core/modules/media_library/css/media_library.theme.css
@@ -96,6 +96,20 @@
margin: 8px 0 0;
}
+/* Media add form selection styles. */
+.media-library-add-form-selection {
+ margin-top: 1em;
+ border-top: 1px solid #c0c0c0;
+}
+
+.media-library-add-form-selection .media-library-item {
+ width: 120px;
+}
+
+.media-library-add-form-selection .media-library-item .field--name-thumbnail img {
+ height: 100px;
+}
+
.media-library-views-form__header .form-item {
margin-right: 8px;
}
@@ -303,8 +317,8 @@
/* Do not show the bottom border and padding for the last item. */
.media-library-add-form__media:last-child {
- border-bottom: 0;
padding-bottom: 0;
+ border-bottom: 0;
}
/* @todo Remove in https://www.drupal.org/project/drupal/issues/2987921 */
@@ -331,7 +345,8 @@
/* @todo Remove or re-work in https://www.drupal.org/node/2985168 */
.media-library-widget .media-library-item__name a,
-.media-library-view.view-display-id-widget .media-library-item__name a {
+.media-library-view.view-display-id-widget .media-library-item__name a,
+.media-library-add-form-selection .media-library-item__name a {
text-decoration: none;
color: black;
}
diff --git a/core/modules/media_library/js/media_library.click_to_select.es6.js b/core/modules/media_library/js/media_library.click_to_select.es6.js
index db42fe4790..dae8d1380a 100644
--- a/core/modules/media_library/js/media_library.click_to_select.es6.js
+++ b/core/modules/media_library/js/media_library.click_to_select.es6.js
@@ -24,12 +24,29 @@
.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')
+ // Adds checked effect to media items.
.on('change', ({ currentTarget }) => {
$(currentTarget)
.closest('.js-click-to-select')
.toggleClass('checked', $(currentTarget).prop('checked'));
+ })
+ // Adds focus effect to media items.
+ .on('focus blur', ({ currentTarget, type }) => {
+ $(currentTarget)
+ .closest('.media-library-item')
+ .toggleClass('is-focus', type === 'focus');
+ });
+
+ // Adds hover effect to media items.
+ $('.js-click-to-select-trigger, .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');
});
},
};
diff --git a/core/modules/media_library/js/media_library.click_to_select.js b/core/modules/media_library/js/media_library.click_to_select.js
index 01cbb1431b..155e4c22f6 100644
--- a/core/modules/media_library/js/media_library.click_to_select.js
+++ b/core/modules/media_library/js/media_library.click_to_select.js
@@ -14,10 +14,23 @@
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'));
+ }).on('focus blur', function (_ref2) {
+ var currentTarget = _ref2.currentTarget,
+ type = _ref2.type;
+
+ $(currentTarget).closest('.media-library-item').toggleClass('is-focus', type === 'focus');
+ });
+
+ $('.js-click-to-select-trigger, .js-click-to-select-checkbox', context).once('media-library-item-hover').on('mouseover mouseout', function (_ref3) {
+ var currentTarget = _ref3.currentTarget,
+ type = _ref3.type;
+
+ $(currentTarget).closest('.media-library-item').toggleClass('is-hover', type === 'mouseover');
});
}
};
diff --git a/core/modules/media_library/js/media_library.ui.es6.js b/core/modules/media_library/js/media_library.ui.es6.js
index f0676d1013..a9cec2041d 100644
--- a/core/modules/media_library/js/media_library.ui.es6.js
+++ b/core/modules/media_library/js/media_library.ui.es6.js
@@ -150,7 +150,10 @@
*/
Drupal.behaviors.MediaLibraryItemSelection = {
attach(context, settings) {
- const $form = $('.js-media-library-views-form', context);
+ const $form = $(
+ '.js-media-library-views-form, .js-media-library-add-form',
+ context,
+ );
const currentSelection = Drupal.MediaLibrary.currentSelection;
if (!$form.length) {
@@ -162,30 +165,6 @@
$form,
);
- // 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');
- });
-
/**
* Disable media items.
*
@@ -242,23 +221,49 @@
}
}
- // The hidden selection form field changes when the selection is updated.
- $('#media-library-modal-selection', $form)
- .once('media-library-selection-change')
- .on('change', e => {
- updateSelectionInfo(settings.media_library.selection_remaining);
+ // 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;
- // 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);
+ // 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(),
+ );
+
+ // Update the number of selected items in the button pane.
+ updateSelectionInfo(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
diff --git a/core/modules/media_library/js/media_library.ui.js b/core/modules/media_library/js/media_library.ui.js
index 4d3e916934..c0b73a2d91 100644
--- a/core/modules/media_library/js/media_library.ui.js
+++ b/core/modules/media_library/js/media_library.ui.js
@@ -77,7 +77,7 @@
Drupal.behaviors.MediaLibraryItemSelection = {
attach: function attach(context, settings) {
- var $form = $('.js-media-library-views-form', context);
+ var $form = $('.js-media-library-views-form, .js-media-library-add-form', context);
var currentSelection = Drupal.MediaLibrary.currentSelection;
if (!$form.length) {
@@ -86,21 +86,6 @@
var $mediaItems = $('.js-media-library-item input[type="checkbox"]', $form);
- $mediaItems.once('media-item-change').on('change', function (e) {
- var id = e.currentTarget.value;
-
- var position = currentSelection.indexOf(id);
- if (e.currentTarget.checked) {
- if (position === -1) {
- currentSelection.push(id);
- }
- } else if (position !== -1) {
- currentSelection.splice(position, 1);
- }
-
- $form.find('#media-library-modal-selection').val(currentSelection.join()).trigger('change');
- });
-
function disableItems($items) {
$items.prop('disabled', true).closest('.js-media-library-item').addClass('media-library-item--disabled');
}
@@ -124,7 +109,22 @@
}
}
- $('#media-library-modal-selection', $form).once('media-library-selection-change').on('change', function (e) {
+ $mediaItems.once('media-item-change').on('change', function (e) {
+ var id = e.currentTarget.value;
+
+ var position = currentSelection.indexOf(id);
+ if (e.currentTarget.checked) {
+ if (position === -1) {
+ currentSelection.push(id);
+ }
+ } else if (position !== -1) {
+ currentSelection.splice(position, 1);
+ }
+
+ $form.find('#media-library-modal-selection').val(currentSelection.join()).trigger('change');
+
+ $('.js-media-library-add-form-current-selection').val(currentSelection.join());
+
updateSelectionInfo(settings.media_library.selection_remaining);
if (currentSelection.length === settings.media_library.selection_remaining) {
diff --git a/core/modules/media_library/js/media_library.view.es6.js b/core/modules/media_library/js/media_library.view.es6.js
index 8bc7fc1c13..2130494260 100644
--- a/core/modules/media_library/js/media_library.view.es6.js
+++ b/core/modules/media_library/js/media_library.view.es6.js
@@ -2,46 +2,6 @@
* @file media_library.view.es6.js
*/
(($, Drupal) => {
- /**
- * Adds hover effect to media items.
- *
- * @type {Drupal~behavior}
- *
- * @prop {Drupal~behaviorAttach} attach
- * Attaches behavior to add a class when hovering over media items.
- */
- Drupal.behaviors.MediaLibraryHover = {
- attach(context) {
- $('.js-click-to-select-trigger, .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.
- *
- * @type {Drupal~behavior}
- *
- * @prop {Drupal~behaviorAttach} attach
- * Attaches behavior to add a focus effect to media items.
- */
- Drupal.behaviors.MediaLibraryFocus = {
- attach(context) {
- $('.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.
*
diff --git a/core/modules/media_library/js/media_library.view.js b/core/modules/media_library/js/media_library.view.js
index 73028f6af8..7840f95d24 100644
--- a/core/modules/media_library/js/media_library.view.js
+++ b/core/modules/media_library/js/media_library.view.js
@@ -6,34 +6,12 @@
**/
(function ($, Drupal) {
- Drupal.behaviors.MediaLibraryHover = {
- attach: function attach(context) {
- $('.js-click-to-select-trigger, .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) {
- $('.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 = $('.js-media-library-view', context).once('media-library-select-all');
if ($view.length && $view.find('.media-library-item').length) {
- var $checkbox = $('').on('click', function (_ref3) {
- var currentTarget = _ref3.currentTarget;
+ var $checkbox = $('').on('click', function (_ref) {
+ var currentTarget = _ref.currentTarget;
var $checkboxes = $(currentTarget).closest('.media-library-view').find('.media-library-item input[type="checkbox"]');
$checkboxes.prop('checked', $(currentTarget).prop('checked')).trigger('change');
diff --git a/core/modules/media_library/src/Form/AddFormBase.php b/core/modules/media_library/src/Form/AddFormBase.php
index da783d36ab..c3ec671198 100644
--- a/core/modules/media_library/src/Form/AddFormBase.php
+++ b/core/modules/media_library/src/Form/AddFormBase.php
@@ -3,6 +3,8 @@
namespace Drupal\media_library\Form;
use Drupal\Core\Ajax\AjaxResponse;
+use Drupal\Core\Ajax\CloseDialogCommand;
+use Drupal\Core\Ajax\InvokeCommand;
use Drupal\Core\Ajax\ReplaceCommand;
use Drupal\Core\Entity\Entity\EntityFormDisplay;
use Drupal\Core\Entity\EntityStorageInterface;
@@ -14,6 +16,7 @@
use Drupal\media_library\Ajax\UpdateSelectionCommand;
use Drupal\media_library\MediaLibraryState;
use Drupal\media_library\MediaLibraryUiBuilder;
+use Drupal\media_library\Plugin\Field\FieldWidget\MediaLibraryWidget;
use Symfony\Component\DependencyInjection\ContainerInterface;
/**
@@ -47,6 +50,13 @@ abstract class AddFormBase extends FormBase {
*/
protected $mediaType;
+ /**
+ * The media view builder.
+ *
+ * @var \Drupal\Core\Entity\EntityViewBuilderInterface
+ */
+ protected $viewBuilder;
+
/**
* Constructs a AddFormBase object.
*
@@ -58,6 +68,7 @@ abstract class AddFormBase extends FormBase {
public function __construct(EntityTypeManagerInterface $entity_type_manager, MediaLibraryUiBuilder $library_ui_builder) {
$this->entityTypeManager = $entity_type_manager;
$this->libraryUiBuilder = $library_ui_builder;
+ $this->viewBuilder = $this->entityTypeManager->getViewBuilder('media');
}
/**
@@ -122,7 +133,11 @@ public function buildForm(array $form, FormStateInterface $form_state) {
'#type' => 'status_messages',
];
- $form['#attributes']['class'][] = 'media-library-add-form';
+ $form['#attributes']['class'] = [
+ 'media-library-add-form',
+ 'js-media-library-add-form',
+ ];
+
$added_media = $form_state->get('media');
if (empty($added_media)) {
$form['#attributes']['class'][] = 'media-library-add-form--without-input';
@@ -139,8 +154,28 @@ public function buildForm(array $form, FormStateInterface $form_state) {
$form['media'][$delta] = $this->buildEntityFormElement($media, $form, $form_state, $delta);
}
+ $media_ids = array_filter(explode(',', $form_state->getValue('current_selection')));
+ if ($media_ids) {
+ $media_items = $this->entityTypeManager->getStorage('media')->loadMultiple($media_ids);
+ $form['selection'] = $this->buildCurrentSelectionArea($media_items, $form, $form_state);
+ }
+
$form['actions'] = $this->buildActions($form, $form_state);
}
+
+ // Allow the current selection to be set in a hidden field so the selection
+ // can be passed between different states of the form.
+ // @see Drupal.behaviors.MediaLibraryItemSelection
+ $form['current_selection'] = [
+ '#type' => 'hidden',
+ '#default_value' => '',
+ '#attributes' => [
+ 'class' => [
+ 'js-media-library-add-form-current-selection',
+ ],
+ ],
+ ];
+
return $form;
}
@@ -247,6 +282,75 @@ protected function buildEntityFormElement(MediaInterface $media, array $form, Fo
return $element;
}
+ /**
+ * Returns a render array containing the current selection.
+ *
+ * @param \Drupal\media\MediaInterface[] $media_items
+ * The current selection of media items.
+ * @param array $form
+ * The complete form.
+ * @param \Drupal\Core\Form\FormStateInterface $form_state
+ * The current form state.
+ *
+ * @return array
+ * A render array containing the current selection.
+ */
+ protected function buildCurrentSelectionArea($media_items, array $form, FormStateInterface $form_state) {
+ $selection = [
+ '#type' => 'container',
+ '#attributes' => [
+ 'class' => [
+ 'media-library-add-form-selection',
+ ],
+ ],
+ ];
+ foreach ($media_items as $media_id => $media) {
+ $selection[$media_id] = $this->buildSelectedItemElement($media, $form, $form_state);
+ }
+ return $selection;
+ }
+
+ /**
+ * Returns a render array containing the current selection.
+ *
+ * @param \Drupal\media\MediaInterface $media
+ * The media item.
+ * @param array $form
+ * The complete form.
+ * @param \Drupal\Core\Form\FormStateInterface $form_state
+ * The current form state.
+ *
+ * @return array
+ * A render array of a selected media item.
+ */
+ protected function buildSelectedItemElement(MediaInterface $media, array $form, FormStateInterface $form_state) {
+ return [
+ '#type' => 'container',
+ '#attributes' => [
+ 'class' => [
+ 'media-library-item',
+ 'js-media-library-item',
+ 'js-click-to-select',
+ ],
+ ],
+ 'select' => [
+ '#type' => 'container',
+ '#attributes' => [
+ 'class' => [
+ 'js-click-to-select-checkbox',
+ ],
+ ],
+ 'select_checkbox' => [
+ '#type' => 'checkbox',
+ '#title' => $this->t('Select @name', ['@name' => $media->label()]),
+ '#title_display' => 'invisible',
+ '#return_value' => $media->id(),
+ ],
+ ],
+ 'rendered_entity' => $this->viewBuilder->view($media, 'media_library'),
+ ];
+ }
+
/**
* Returns an array of supported actions for the form.
*
@@ -261,9 +365,18 @@ protected function buildEntityFormElement(MediaInterface $media, array $form, Fo
protected function buildActions(array $form, FormStateInterface $form_state) {
return [
'#type' => 'actions',
- 'submit' => [
+ 'save_submit' => [
'#type' => 'submit',
- '#value' => $this->t('Save'),
+ '#button_type' => 'primary',
+ '#value' => $this->t('Save and select'),
+ '#ajax' => [
+ 'callback' => '::updateLibrary',
+ 'wrapper' => 'media-library-add-form-wrapper',
+ ],
+ ],
+ 'insert_submit' => [
+ '#type' => 'submit',
+ '#value' => $this->t('Save and insert'),
'#ajax' => [
'callback' => '::updateWidget',
'wrapper' => 'media-library-add-form-wrapper',
@@ -391,7 +504,7 @@ public function submitForm(array &$form, FormStateInterface $form_state) {
}
/**
- * AJAX callback to send the new media item(s) to the calling code.
+ * AJAX callback to send the new media item(s) to the media library.
*
* @param array $form
* The complete form.
@@ -399,10 +512,10 @@ public function submitForm(array &$form, FormStateInterface $form_state) {
* The current form state.
*
* @return array|\Drupal\Core\Ajax\AjaxResponse
- * The form array when there are form errors or a AJAX response to select
- * the created items in the media library.
+ * The form array if there are validation errors, or an AJAX response to add
+ * the created items to the current selection.
*/
- public function updateWidget(array &$form, FormStateInterface $form_state) {
+ public function updateLibrary(array &$form, FormStateInterface $form_state) {
if ($form_state::hasAnyErrors()) {
return $form;
}
@@ -429,6 +542,33 @@ public function updateWidget(array &$form, FormStateInterface $form_state) {
return $response;
}
+ /**
+ * AJAX callback to send the new media item(s) to the calling code.
+ *
+ * @param array $form
+ * The complete form.
+ * @param \Drupal\Core\Form\FormStateInterface $form_state
+ * The current form state.
+ *
+ * @return array|\Drupal\Core\Ajax\AjaxResponse
+ * The form array when there are form errors or a AJAX response to select
+ * the created items in the media library.
+ */
+ public function updateWidget(array &$form, FormStateInterface $form_state) {
+ if ($form_state::hasAnyErrors()) {
+ return $form;
+ }
+
+ // Pass the selection to the field widget based on the current widget ID.
+ $opener_id = MediaLibraryState::fromRequest($this->getRequest())->getOpenerId();
+ if ($field_id = MediaLibraryWidget::getOpenerFieldId($opener_id)) {
+ return (new AjaxResponse())
+ ->addCommand(new InvokeCommand("[data-media-library-widget-value=\"$field_id\"]", 'val', [implode(',', $this->getAllSelectedMediaIds($form_state))]))
+ ->addCommand(new InvokeCommand("[data-media-library-widget-update=\"$field_id\"]", 'trigger', ['mousedown']))
+ ->addCommand(new CloseDialogCommand());
+ }
+ }
+
/**
* Returns the name of the source field for a media type.
*
@@ -444,4 +584,22 @@ protected function getSourceFieldName(MediaTypeInterface $media_type) {
->getName();
}
+ /**
+ * Get all selected media IDs from the form state.
+ *
+ * @param \Drupal\Core\Form\FormStateInterface $form_state
+ * The current form state.
+ *
+ * @return int[]
+ * An array containing the selected media IDs.
+ */
+ protected function getAllSelectedMediaIds(FormStateInterface $form_state) {
+ $selected_media_ids = array_filter(explode(',', $form_state->getValue('current_selection')));
+ $added_media = $form_state->get('media') ?: [];
+ $added_media_ids = array_map(function (MediaInterface $media) {
+ return $media->id();
+ }, $added_media);
+ return array_merge($selected_media_ids, $added_media_ids);
+ }
+
}
diff --git a/core/modules/media_library/src/Form/FileUploadForm.php b/core/modules/media_library/src/Form/FileUploadForm.php
index e89b67e7d1..b25d271297 100644
--- a/core/modules/media_library/src/Form/FileUploadForm.php
+++ b/core/modules/media_library/src/Form/FileUploadForm.php
@@ -176,6 +176,14 @@ public function validateUploadElement(array $element, FormStateInterface $form_s
*/
public function processUploadElement(array $element, FormStateInterface $form_state) {
$element['upload_button']['#submit'] = ['::uploadButtonSubmit'];
+ // Limit the validation errors to make sure
+ // FormValidator::handleErrorsWithLimitedValidation doesn't remove the
+ // current selection from the form state.
+ // @see Drupal\Core\Form\FormValidator::handleErrorsWithLimitedValidation()
+ $element['upload_button']['#limit_validation_errors'] = [
+ ['upload'],
+ ['current_selection'],
+ ];
$element['upload_button']['#ajax'] = [
'callback' => '::updateFormCallback',
'wrapper' => 'media-library-wrapper',
diff --git a/core/modules/media_library/src/Plugin/views/field/MediaLibrarySelectForm.php b/core/modules/media_library/src/Plugin/views/field/MediaLibrarySelectForm.php
index 5660e43f4a..48b3f8461c 100644
--- a/core/modules/media_library/src/Plugin/views/field/MediaLibrarySelectForm.php
+++ b/core/modules/media_library/src/Plugin/views/field/MediaLibrarySelectForm.php
@@ -93,7 +93,8 @@ public function viewsForm(array &$form, FormStateInterface $form_state) {
'callback' => [static::class, 'updateWidget'],
];
- $form['actions']['submit']['#value'] = $this->t('Select media');
+ $form['actions']['submit']['#value'] = $this->t('Insert selected');
+ $form['actions']['submit']['#button_type'] = 'primary';
$form['actions']['submit']['#field_id'] = $selection_field_id;
$form['actions']['submit']['#attributes'] = [
'class' => ['media-library-select'],
diff --git a/core/modules/media_library/tests/src/FunctionalJavascript/MediaLibraryTest.php b/core/modules/media_library/tests/src/FunctionalJavascript/MediaLibraryTest.php
index 34245daec4..7e451e076d 100644
--- a/core/modules/media_library/tests/src/FunctionalJavascript/MediaLibraryTest.php
+++ b/core/modules/media_library/tests/src/FunctionalJavascript/MediaLibraryTest.php
@@ -364,7 +364,7 @@ public function testWidget() {
$this->assertTrue($checkboxes[2]->hasAttribute('disabled'));
$this->assertTrue($checkboxes[3]->hasAttribute('disabled'));
// Select the items.
- $assert_session->elementExists('css', '.ui-dialog-buttonpane')->pressButton('Select media');
+ $assert_session->elementExists('css', '.ui-dialog-buttonpane')->pressButton('Insert selected');
$assert_session->assertWaitOnAjaxRequest();
// Ensure that the selection completed successfully.
@@ -386,7 +386,7 @@ public function testWidget() {
$assert_session->assertWaitOnAjaxRequest();
$checkboxes = $page->findAll('css', '.media-library-view .js-click-to-select-checkbox input');
$checkboxes[0]->click();
- $assert_session->elementExists('css', '.ui-dialog-buttonpane')->pressButton('Select media');
+ $assert_session->elementExists('css', '.ui-dialog-buttonpane')->pressButton('Insert selected');
$assert_session->assertWaitOnAjaxRequest();
$assert_session->pageTextContains('Dog');
$assert_session->pageTextNotContains('Cat');
@@ -463,7 +463,7 @@ public function testWidget() {
$checkboxes[1]->click();
$checkboxes[2]->click();
$checkboxes[3]->click();
- $assert_session->elementExists('css', '.ui-dialog-buttonpane')->pressButton('Select media');
+ $assert_session->elementExists('css', '.ui-dialog-buttonpane')->pressButton('Insert selected');
$assert_session->assertWaitOnAjaxRequest();
$assert_session->pageTextContains('Dog');
$assert_session->pageTextContains('Cat');
@@ -506,7 +506,7 @@ public function testWidgetAnonymous() {
// Select the first media item (should be Dog).
$page->find('css', '.media-library-view .js-click-to-select-checkbox input')->click();
- $assert_session->elementExists('css', '.ui-dialog-buttonpane')->pressButton('Select media');
+ $assert_session->elementExists('css', '.ui-dialog-buttonpane')->pressButton('Insert selected');
$assert_session->assertWaitOnAjaxRequest();
// Ensure that the selection completed successfully.
@@ -593,10 +593,8 @@ public function testWidgetUpload() {
$assert_session->elementExists('css', '.media-library-open-button[href*="field_twin_media"]')->click();
$assert_session->assertWaitOnAjaxRequest();
$assert_session->pageTextContains('Media library');
-
// Assert the default tab for media type one does not have an upload form.
$assert_session->fieldNotExists('files[upload][]');
-
// Assert we can upload a file to media type three.
$page->clickLink('Type Three');
$assert_session->assertWaitOnAjaxRequest();
@@ -606,36 +604,31 @@ public function testWidgetUpload() {
$assert_session->assertWaitOnAjaxRequest();
$assert_session->elementExists('css', '.media-library-add-form--with-input');
$assert_session->elementNotExists('css', '.media-library-add-form--without-input');
-
+ $assert_session->elementNotExists('css', '.media-library-add-form-selection');
// Files are temporary until the form is saved.
$files = $file_storage->loadMultiple();
$file = array_pop($files);
$this->assertSame('public://type-three-dir', $file_system->dirname($file->getFileUri()));
$this->assertTrue($file->isTemporary());
-
// Assert the revision_log_message field is not shown.
$upload_form = $assert_session->elementExists('css', '.media-library-add-form');
$assert_session->fieldNotExists('Revision log message', $upload_form);
-
// Assert the name field contains the filename and the alt text is required.
$this->assertSame($assert_session->fieldExists('Name')->getValue(), $png_image->filename);
- $assert_session->elementExists('css', '.ui-dialog-buttonpane')->pressButton('Save');
+ $assert_session->elementExists('css', '.ui-dialog-buttonpane')->pressButton('Save and select');
$assert_session->assertWaitOnAjaxRequest();
$assert_session->pageTextContains('Alternative text field is required');
$page->fillField('Alternative text', $this->randomString());
- $assert_session->elementExists('css', '.ui-dialog-buttonpane')->pressButton('Save');
+ $assert_session->elementExists('css', '.ui-dialog-buttonpane')->pressButton('Save and select');
$assert_session->assertWaitOnAjaxRequest();
-
// The file should be permanent now.
$files = $file_storage->loadMultiple();
$file = array_pop($files);
$this->assertFalse($file->isTemporary());
-
// Load the created media item.
$media_storage = $this->container->get('entity_type.manager')->getStorage('media');
$media_items = $media_storage->loadMultiple();
$added_media = array_pop($media_items);
-
// Ensure the media item was saved to the library and automatically
// selected. The added media items should be in the first position of the
// add form.
@@ -644,42 +637,64 @@ public function testWidgetUpload() {
$assert_session->fieldValueEquals('media_library_select_form[0]', $added_media->id());
$assert_session->checkboxChecked('media_library_select_form[0]');
$assert_session->pageTextContains('1 of 2 items selected');
-
+ $assert_session->hiddenFieldValueEquals('current_selection', $added_media->id());
// Ensure the created item is added in the widget.
- $assert_session->elementExists('css', '.ui-dialog-buttonpane')->pressButton('Select media');
+ $assert_session->elementExists('css', '.ui-dialog-buttonpane')->pressButton('Insert selected');
$assert_session->assertWaitOnAjaxRequest();
$assert_session->pageTextNotContains('Media library');
$assert_session->pageTextContains($png_image->filename);
+ // Remove the item.
+ $assert_session->elementExists('css', '.media-library-item__remove')->click();
+ $assert_session->assertWaitOnAjaxRequest();
+ $assert_session->pageTextNotContains($png_image->filename);
+
+ // Assert we can also directly insert uploaded files in the widget.
+ $assert_session->elementExists('css', '.media-library-open-button[href*="field_twin_media"]')->click();
+ $assert_session->assertWaitOnAjaxRequest();
+ $assert_session->pageTextContains('Media library');
+ $page->clickLink('Type Three');
+ $assert_session->assertWaitOnAjaxRequest();
+ $png_uri_2 = file_unmanaged_copy($png_image->uri);
+ $page->attachFileToField('Add files', $this->container->get('file_system')->realpath($png_uri_2));
+ $assert_session->assertWaitOnAjaxRequest();
+ $page->fillField('Alternative text', $this->randomString());
+ $assert_session->elementExists('css', '.ui-dialog-buttonpane')->pressButton('Save and insert');
+ $assert_session->assertWaitOnAjaxRequest();
+ $assert_session->pageTextNotContains('Media library');
+ $assert_session->pageTextContains($file_system->basename($png_uri_2));
+
// Also make sure that we can upload to the unlimited cardinality field.
$assert_session->elementExists('css', '.media-library-open-button[href*="field_unlimited_media"]')->click();
$assert_session->assertWaitOnAjaxRequest();
$assert_session->pageTextContains('Media library');
-
- // Navigate to the media type three tab first.
$page->clickLink('Type Three');
$assert_session->assertWaitOnAjaxRequest();
-
- // Select a media item.
- $page->find('css', '.media-library-view .js-click-to-select-checkbox input')->click();
+ // Select a media item to check if the selection is persisted when adding
+ // new items.
+ $existing_media_name = $file_system->basename($png_uri_2);
+ $checkbox = $page->findField("Select $existing_media_name");
+ $selected_item_id = $checkbox->getAttribute('value');
+ $checkbox->click();
$assert_session->pageTextContains('1 item selected');
-
+ $assert_session->hiddenFieldValueEquals('current_selection', $selected_item_id);
// Multiple uploads should be allowed.
// @todo Add test when https://github.com/minkphp/Mink/issues/358 is closed
$this->assertTrue($assert_session->fieldExists('Add files')->hasAttribute('multiple'));
-
- $page->attachFileToField('Add files', $this->container->get('file_system')->realpath($png_image->uri));
+ $png_uri_3 = file_unmanaged_copy($png_image->uri);
+ $page->attachFileToField('Add files', $this->container->get('file_system')->realpath($png_uri_3));
$assert_session->assertWaitOnAjaxRequest();
+ $selection_area = $assert_session->elementExists('css', '.media-library-add-form-selection');
+ $assert_session->checkboxChecked("Select $existing_media_name", $selection_area);
$page->fillField('Name', 'Unlimited Cardinality Image');
$page->fillField('Alternative text', $this->randomString());
- $assert_session->elementExists('css', '.ui-dialog-buttonpane')->pressButton('Save');
+ $assert_session->elementExists('css', '.ui-dialog-buttonpane')->pressButton('Save and select');
$assert_session->assertWaitOnAjaxRequest();
-
// Load the created media item.
$media_storage = $this->container->get('entity_type.manager')->getStorage('media');
$media_items = $media_storage->loadMultiple();
$added_media = array_pop($media_items);
-
+ $added_media_name = $added_media->label();
// Ensure the media item was saved to the library and automatically
// selected. The added media items should be in the first position of the
// add form.
@@ -687,69 +702,101 @@ public function testWidgetUpload() {
$assert_session->pageTextContains('Unlimited Cardinality Image');
$assert_session->fieldValueEquals('media_library_select_form[0]', $added_media->id());
$assert_session->checkboxChecked('media_library_select_form[0]');
-
// Assert the item that was selected before uploading the file is still
// selected.
$assert_session->pageTextContains('2 items selected');
+ $assert_session->checkboxChecked("Select $added_media_name");
+ $assert_session->checkboxChecked("Select $existing_media_name");
+ $assert_session->hiddenFieldValueEquals('current_selection', implode(',', [$selected_item_id, $added_media->id()]));
$checkboxes = $page->findAll('css', '.media-library-view .js-click-to-select-checkbox input');
$selected_checkboxes = [];
foreach ($checkboxes as $checkbox) {
if ($checkbox->isChecked()) {
- $selected_checkboxes[] = $checkbox->getValue();
+ $selected_checkboxes[] = $checkbox->getAttribute('value');
}
}
$this->assertCount(2, $selected_checkboxes);
-
// Ensure the created item is added in the widget.
- $assert_session->elementExists('css', '.ui-dialog-buttonpane')->pressButton('Select media');
+ $assert_session->elementExists('css', '.ui-dialog-buttonpane')->pressButton('Insert selected');
$assert_session->assertWaitOnAjaxRequest();
$assert_session->pageTextNotContains('Media library');
$assert_session->pageTextContains('Unlimited Cardinality Image');
- // Verify we can only upload the files allowed by the media type.
+ // Assert we can now only upload one more media item.
$assert_session->elementExists('css', '.media-library-open-button[href*="field_twin_media"]')->click();
$assert_session->assertWaitOnAjaxRequest();
$assert_session->pageTextContains('Media library');
$page->clickLink('Type Four');
$assert_session->assertWaitOnAjaxRequest();
-
- // Assert we can now only upload one more media item.
$this->assertFalse($assert_session->fieldExists('Add file')->hasAttribute('multiple'));
$assert_session->pageTextContains('One file only.');
// Assert media type four should only allow jpg files by trying a png file
// first.
- $page->attachFileToField('Add file', $file_system->realpath($png_image->uri));
+ $png_uri_4 = file_unmanaged_copy($png_image->uri);
+ $page->attachFileToField('Add file', $file_system->realpath($png_uri_4));
$assert_session->assertWaitOnAjaxRequest();
$assert_session->pageTextContains('Only files with the following extensions are allowed');
-
// Assert that jpg files are accepted by type four.
- $page->attachFileToField('Add file', $file_system->realpath($jpg_image->uri));
+ $jpg_uri_2 = file_unmanaged_copy($jpg_image->uri);
+ $page->attachFileToField('Add file', $file_system->realpath($jpg_uri_2));
$assert_session->assertWaitOnAjaxRequest();
$page->fillField('Alternative text', $this->randomString());
-
// The type_four media type has another optional image field.
$assert_session->pageTextContains('Extra Image');
- $page->attachFileToField('Extra Image', $this->container->get('file_system')->realpath($jpg_image->uri));
+ $jpg_uri_3 = file_unmanaged_copy($jpg_image->uri);
+ $page->attachFileToField('Extra Image', $this->container->get('file_system')->realpath($jpg_uri_3));
$assert_session->assertWaitOnAjaxRequest();
// Ensure that the extra image was uploaded to the correct directory.
$files = $file_storage->loadMultiple();
$file = array_pop($files);
$this->assertSame('public://type-four-extra-dir', $file_system->dirname($file->getFileUri()));
-
- $assert_session->elementExists('css', '.ui-dialog-buttonpane')->pressButton('Save');
+ $assert_session->elementExists('css', '.ui-dialog-buttonpane')->pressButton('Save and select');
$assert_session->assertWaitOnAjaxRequest();
-
// Ensure the media item was saved to the library and automatically
// selected.
$assert_session->pageTextContains('Media library');
- $assert_session->pageTextContains($jpg_image->filename);
-
+ $assert_session->pageTextContains($file_system->basename($jpg_uri_2));
// Ensure the created item is added in the widget.
- $assert_session->elementExists('css', '.ui-dialog-buttonpane')->pressButton('Select media');
+ $assert_session->elementExists('css', '.ui-dialog-buttonpane')->pressButton('Insert selected');
+ $assert_session->assertWaitOnAjaxRequest();
+ $assert_session->pageTextNotContains('Media library');
+ $assert_session->pageTextContains($file_system->basename($jpg_uri_2));
+
+ // Assert we can also remove selected items from the selection area in the
+ // upload form.
+ $assert_session->elementExists('css', '.media-library-open-button[href*="field_unlimited_media"]')->click();
+ $assert_session->assertWaitOnAjaxRequest();
+ $assert_session->pageTextContains('Media library');
+ $page->clickLink('Type Three');
+ $assert_session->assertWaitOnAjaxRequest();
+ $checkbox = $page->findField("Select $existing_media_name");
+ $selected_item_id = $checkbox->getAttribute('value');
+ $checkbox->click();
+ $assert_session->hiddenFieldValueEquals('current_selection', $selected_item_id);
+ $this->assertTrue($assert_session->fieldExists('Add files')->hasAttribute('multiple'));
+ $png_uri_5 = file_unmanaged_copy($png_image->uri);
+ $page->attachFileToField('Add files', $this->container->get('file_system')->realpath($png_uri_5));
+ $assert_session->assertWaitOnAjaxRequest();
+ $selection_area = $assert_session->elementExists('css', '.media-library-add-form-selection');
+ $assert_session->checkboxChecked("Select $existing_media_name", $selection_area);
+ $page->uncheckField("Select $existing_media_name");
+ $page->fillField('Alternative text', $this->randomString());
+ $assert_session->hiddenFieldValueEquals('current_selection', '');
+ $assert_session->elementExists('css', '.ui-dialog-buttonpane')->pressButton('Save and select');
+ $assert_session->assertWaitOnAjaxRequest();
+ $media_storage = $this->container->get('entity_type.manager')->getStorage('media');
+ $media_items = $media_storage->loadMultiple();
+ $added_media = array_pop($media_items);
+ $added_media_name = $added_media->label();
+ $assert_session->pageTextContains('1 item selected');
+ $assert_session->checkboxChecked("Select $added_media_name");
+ $assert_session->checkboxNotChecked("Select $existing_media_name");
+ $assert_session->hiddenFieldValueEquals('current_selection', $added_media->id());
+ $assert_session->elementExists('css', '.ui-dialog-buttonpane')->pressButton('Insert selected');
$assert_session->assertWaitOnAjaxRequest();
$assert_session->pageTextNotContains('Media library');
- $assert_session->pageTextContains($jpg_image->filename);
+ $assert_session->pageTextContains($file_system->basename($png_uri_5));
}
}