diff --git a/core/misc/icons/ee0000/ex.svg b/core/misc/icons/ee0000/ex.svg new file mode 100644 index 0000000000..6b45a1d572 --- /dev/null +++ b/core/misc/icons/ee0000/ex.svg @@ -0,0 +1 @@ + diff --git a/core/modules/media_library/css/media_library.theme.css b/core/modules/media_library/css/media_library.theme.css index e5ca9ab6d5..1b00001d42 100644 --- a/core/modules/media_library/css/media_library.theme.css +++ b/core/modules/media_library/css/media_library.theme.css @@ -291,6 +291,7 @@ /* Style the wrappers around new media and files. */ .media-library-add-form__media { + position: relative; display: flex; padding: 20px 0 20px 0; border-bottom: 1px solid #c0c0c0; @@ -301,10 +302,14 @@ padding-top: 0; } +.media-library-add-form__media:first-child .media-library-add-form__remove-button[type="submit"] { + top: 5px; +} + /* 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 */ @@ -329,6 +334,40 @@ margin-left: 20px; } +.media-library-add-form .media-library-add-form__remove-button[type="submit"] { + position: absolute; + top: 25px; + right: 5px; + width: auto; + margin: 0; + padding: 0 20px 0 0; + text-transform: lowercase; + color: transparent; + border: 0; + border-radius: 0; + background: transparent url(../../../misc/icons/787878/ex.svg) right 0 no-repeat; + font-weight: normal; + line-height: 16px; +} +[dir="rtl"] .media-library-add-form .media-library-add-form__remove-button[type="submit"] { + right: auto; + left: 15px; + padding: 0 0 0 20px; + background-position: left 0; +} + +.media-library-add-form .media-library-add-form__remove-button:focus { + color: #787878; + border: 0; +} + +.media-library-add-form .media-library-add-form__remove-button:hover { + color: #e00; + border: 0; + background: transparent url(../../../misc/icons/ee0000/ex.svg) right 0 no-repeat; + box-shadow: none; +} + /* @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 { diff --git a/core/modules/media_library/src/Form/AddFormBase.php b/core/modules/media_library/src/Form/AddFormBase.php index da783d36ab..b8b45fdf3c 100644 --- a/core/modules/media_library/src/Form/AddFormBase.php +++ b/core/modules/media_library/src/Form/AddFormBase.php @@ -179,6 +179,13 @@ public function buildForm(array $form, FormStateInterface $form_state) { * The element containing the required fields sub-form. */ protected function buildEntityFormElement(MediaInterface $media, array $form, FormStateInterface $form_state, $delta) { + // We need to make sure each button has a unique name attribute. The default + // name for button elements is 'op'. If the name is not unique, the + // triggering element is not set correctly. + // @see ::removeButtonSubmit() + $parents = $form['#parents']; + $id_suffix = $parents ? '-' . implode('-', $parents) : ''; + $element = [ '#type' => 'container', '#attributes' => [ @@ -186,6 +193,22 @@ protected function buildEntityFormElement(MediaInterface $media, array $form, Fo 'media-library-add-form__media', ], ], + 'remove_button' => [ + '#type' => 'submit', + '#value' => $this->t('Remove'), + '#name' => 'media-' . $delta . '-remove-button' . $id_suffix, + '#attributes' => [ + 'class' => ['media-library-add-form__remove-button'], + 'aria-label' => $this->t('Remove @label', ['@label' => $media->getName()]), + ], + '#ajax' => [ + 'callback' => '::updateFormCallback', + 'wrapper' => 'media-library-add-form-wrapper', + ], + '#submit' => ['::removeButtonSubmit'], + // Prevent errors in other media items from preventing removal. + '#limit_validation_errors' => [], + ], 'preview' => [ '#type' => 'container', '#attributes' => [ @@ -324,6 +347,25 @@ protected function prepareMediaEntityForSave(MediaInterface $media) { // Intentionally empty by default. } + /** + * Submit handler for the remove button. + * + * @param array $form + * The form render array. + * @param \Drupal\Core\Form\FormStateInterface $form_state + * The form state. + */ + public function removeButtonSubmit(array $form, FormStateInterface $form_state) { + // Retrieve the delta of the media items from the parents of the remove + // button. + $triggering_element = $form_state->getTriggeringElement(); + $delta = array_slice($triggering_element['#array_parents'], -2, 1)[0]; + // Update the list of added media items from the form state. + $added_media = $form_state->get('media'); + unset($added_media[$delta]); + $form_state->set('media', $added_media)->setRebuild(); + } + /** * AJAX callback to update the entire form based on source field input. * @@ -346,6 +388,14 @@ public function updateFormCallback(array &$form, FormStateInterface $form_state) return $response; } + // When the list of added media is empty, return to the media library. + $added_media = $form_state->get('media'); + if (empty($added_media)) { + $response = new AjaxResponse(); + $response->addCommand(new ReplaceCommand('#media-library-add-form-wrapper', $this->buildMediaLibraryUi())); + return $response; + } + return $form; } @@ -412,6 +462,19 @@ public function updateWidget(array &$form, FormStateInterface $form_state) { return $media->id(); }, $added_media); + $response = new AjaxResponse(); + $response->addCommand(new UpdateSelectionCommand($media_ids)); + $response->addCommand(new ReplaceCommand('#media-library-add-form-wrapper', $this->buildMediaLibraryUi())); + return $response; + } + + /** + * Build the render array of the media library UI. + * + * @return array + * The render array for the media library. + */ + protected function buildMediaLibraryUi() { // Get the render array for the media library. The media library state might // contain the 'media_library_content' when it has been opened from a // vertical tab. We need to remove that to make sure the render array @@ -421,12 +484,7 @@ public function updateWidget(array &$form, FormStateInterface $form_state) { $state = MediaLibraryState::fromRequest($this->getRequest()); $state->remove('media_library_content'); $state->set('_media_library_form_rebuild', TRUE); - $library_ui = $this->libraryUiBuilder->buildUi($state); - - $response = new AjaxResponse(); - $response->addCommand(new UpdateSelectionCommand($media_ids)); - $response->addCommand(new ReplaceCommand('#media-library-add-form-wrapper', $library_ui)); - return $response; + return $this->libraryUiBuilder->buildUi($state); } /** diff --git a/core/modules/media_library/tests/src/FunctionalJavascript/MediaLibraryTest.php b/core/modules/media_library/tests/src/FunctionalJavascript/MediaLibraryTest.php index 34245daec4..5174ab3892 100644 --- a/core/modules/media_library/tests/src/FunctionalJavascript/MediaLibraryTest.php +++ b/core/modules/media_library/tests/src/FunctionalJavascript/MediaLibraryTest.php @@ -750,6 +750,27 @@ public function testWidgetUpload() { $assert_session->assertWaitOnAjaxRequest(); $assert_session->pageTextNotContains('Media library'); $assert_session->pageTextContains($jpg_image->filename); + + // Assert removing a uploaded media item before save works as expected. + $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(); + $page->attachFileToField('Add files', $this->container->get('file_system')->realpath($png_image->uri)); + $assert_session->assertWaitOnAjaxRequest(); + + // Assert the media item fields are shown and the vertical tabs are no + // longer shown. + $assert_session->elementExists('css', '.media-library-add-form__fields'); + $assert_session->elementNotExists('css', '.media-library-menu'); + + // Press the 'Remove button' and assert the user is sent back to the media + // library. + $assert_session->elementExists('css', '.media-library-add-form__remove-button')->click(); + $assert_session->assertWaitOnAjaxRequest(); + $assert_session->elementNotExists('css', '.media-library-add-form__fields'); + $assert_session->elementExists('css', '.media-library-menu'); } }