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 02db7d1ec0..a0c35c5cd2 100644 --- a/core/modules/media_library/css/media_library.theme.css +++ b/core/modules/media_library/css/media_library.theme.css @@ -334,6 +334,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; @@ -344,6 +345,10 @@ 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 { padding-bottom: 0; @@ -372,6 +377,54 @@ margin-left: 20px; } +.media-library-add-form .media-library-add-form__remove-button[type="submit"] { + position: absolute; + top: 25px; + right: 6px; /* LTR */ + width: auto; + margin: 0; + padding: 2px 20px 2px 2px; /* LTR */ + text-transform: lowercase; + color: transparent; + border: 0; + border-radius: 0; + background: transparent url(../../../misc/icons/787878/ex.svg) right 2px no-repeat; /* LTR */ + font-weight: normal; + line-height: 16px; +} +[dir="rtl"] .media-library-add-form .media-library-add-form__remove-button[type="submit"] { + right: auto; + left: 13px; + padding: 2px 2px 2px 20px; + background-position: left 2px; +} + +.media-library-add-form .media-library-add-form__remove-button:focus, +.media-library-add-form .media-library-add-form__remove-button.button:disabled, +.media-library-add-form .media-library-add-form__remove-button.button:disabled:active, +.media-library-add-form .media-library-add-form__remove-button.button:focus { + color: #787878; + background: transparent url(../../../misc/icons/787878/ex.svg) right 2px no-repeat; /* LTR */ +} +[dir="rtl"] .media-library-add-form .media-library-add-form__remove-button:focus, +[dir="rtl"] .media-library-add-form .media-library-add-form__remove-button.button:disabled, +[dir="rtl"] .media-library-add-form .media-library-add-form__remove-button.button:disabled:active, +[dir="rtl"] .media-library-add-form .media-library-add-form__remove-button.button:focus { + background-position: left 2px; +} + +.media-library-add-form .media-library-add-form__remove-button:hover, +.media-library-add-form .media-library-add-form__remove-button.button:hover { + color: #e00; + border: 0; + background: transparent url(../../../misc/icons/ee0000/ex.svg) right 2px no-repeat; /* LTR */ + box-shadow: none; +} +[dir="rtl"] .media-library-add-form .media-library-add-form__remove-button:hover, +[dir="rtl"] .media-library-add-form .media-library-add-form__remove-button.button:hover { + background-position: left 2px; +} + /* @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 2f078af9cb..aa0c1fb105 100644 --- a/core/modules/media_library/src/Form/AddFormBase.php +++ b/core/modules/media_library/src/Form/AddFormBase.php @@ -179,6 +179,14 @@ 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 and the wrong media item is + // removed. + // @see ::removeButtonSubmit() + $parents = $form['#parents']; + $id_suffix = $parents ? '-' . implode('-', $parents) : ''; + $element = [ '#type' => 'container', '#attributes' => [ @@ -186,6 +194,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'], + // Ensure errors in other media items do not prevent removal. + '#limit_validation_errors' => [], + ], 'preview' => [ '#type' => 'container', '#attributes' => [ @@ -326,6 +350,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 item 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 in 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. * @@ -348,6 +391,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; } @@ -414,6 +465,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 @@ -423,12 +487,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 6b14884b4e..1c63b1f91f 100644 --- a/core/modules/media_library/tests/src/FunctionalJavascript/MediaLibraryTest.php +++ b/core/modules/media_library/tests/src/FunctionalJavascript/MediaLibraryTest.php @@ -768,6 +768,25 @@ public function testWidgetUpload() { $assert_session->assertWaitOnAjaxRequest(); $assert_session->pageTextNotContains('Media library'); $assert_session->pageTextContains($jpg_image->filename); + + // Assert removing an 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'); } /** @@ -867,6 +886,26 @@ public function testWidgetOEmbed() { $assert_session->assertWaitOnAjaxRequest(); $assert_session->pageTextNotContains('Media library'); $assert_session->pageTextContains('Custom video title'); + + // Assert removing an 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 Five'); + $assert_session->assertWaitOnAjaxRequest(); + $page->fillField('Add Type Five via URL', $video_url); + $page->pressButton('Add'); + $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'); } }