Commit 4e88aed4 authored by webchick's avatar webchick

Issue #2938116 by samuel.mortenson, sjerdo, jefuri, chr.fritsch, yogeshmpawar,...

Issue #2938116 by samuel.mortenson, sjerdo, jefuri, chr.fritsch, yogeshmpawar, starshaped, phenaproxima, jibran, webchick, seanB, Berdir, lauriii, xjm, tstoeckler, dawehner, benjifisher, marcoscano, bdimaggio, martin107, mtodor, slashrsm, Gábor Hojtsy, ckrina, yoroy: Allow media to be uploaded with the Media Library field widget

(cherry picked from commit 53d521a3)
parent 33511d35
langcode: en
status: true
dependencies:
module:
- media
id: media.media_library
label: 'Media library'
targetEntityType: media
cache: true
langcode: en
status: true
dependencies:
config:
- core.entity_form_mode.media.media_library
- field.field.media.audio.field_media_audio_file
- media.type.audio
id: media.audio.media_library
targetEntityType: media
bundle: audio
mode: media_library
content:
name:
type: string_textfield
weight: 0
region: content
settings:
size: 60
placeholder: ''
third_party_settings: { }
hidden:
created: true
field_media_audio_file: true
path: true
status: true
uid: true
langcode: en
status: true
dependencies:
config:
- core.entity_form_mode.media.media_library
- field.field.media.file.field_media_file
- media.type.file
id: media.file.media_library
targetEntityType: media
bundle: file
mode: media_library
content:
name:
type: string_textfield
weight: 0
region: content
settings:
size: 60
placeholder: ''
third_party_settings: { }
hidden:
created: true
field_media_file: true
path: true
status: true
uid: true
langcode: en
status: true
dependencies:
config:
- core.entity_form_mode.media.media_library
- field.field.media.image.field_media_image
- image.style.thumbnail
- media.type.image
module:
- image
id: media.image.media_library
targetEntityType: media
bundle: image
mode: media_library
content:
field_media_image:
type: image_image
weight: 1
region: content
settings:
progress_indicator: throbber
preview_image_style: thumbnail
third_party_settings: { }
name:
type: string_textfield
weight: 0
region: content
settings:
size: 60
placeholder: ''
third_party_settings: { }
hidden:
created: true
path: true
status: true
uid: true
langcode: en
status: true
dependencies:
config:
- core.entity_form_mode.media.media_library
- field.field.media.video.field_media_video_file
- media.type.video
id: media.video.media_library
targetEntityType: media
bundle: video
mode: media_library
content:
name:
type: string_textfield
weight: 0
region: content
settings:
size: 60
placeholder: ''
third_party_settings: { }
hidden:
created: true
field_media_video_file: true
path: true
status: true
uid: true
......@@ -198,6 +198,44 @@
border-color: #40b6ff;
}
/* Style the wrappers around new media and files */
.media-library-upload__media,
.media-library-upload__file {
display: flex;
flex-wrap: wrap;
padding: 20px 0 20px 0;
}
.media-library-upload__file {
align-items: center;
}
.media-library-upload__file-label {
margin-right: 10px;
}
/* @todo Remove in https://www.drupal.org/project/drupal/issues/2987921 */
.media-library-upload__source-field .file,
.media-library-upload__source-field .button,
.media-library-upload__source-field .image-preview,
.media-library-upload__source-field .form-type-managed-file > label,
.media-library-upload__source-field .file-size {
display: none;
}
.media-library-upload__media-preview {
margin-right: 20px;
width: 220px;
background: #ebebeb;
display: flex;
align-items: center;
justify-content: center;
}
.media-library-upload__media-preview img {
display: block;
}
/* @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 {
......
......@@ -6,11 +6,13 @@
*/
use Drupal\Component\Utility\UrlHelper;
use Drupal\Component\Serialization\Json;
use Drupal\Core\Field\Plugin\Field\FieldType\EntityReferenceItem;
use Drupal\Core\Form\FormStateInterface;
use Drupal\Core\Render\Element;
use Drupal\Core\Routing\RouteMatchInterface;
use Drupal\Core\Template\Attribute;
use Drupal\Core\Url;
use Drupal\views\Form\ViewsForm;
use Drupal\views\Plugin\views\cache\CachePluginBase;
use Drupal\views\Plugin\views\query\QueryPluginBase;
......@@ -42,6 +44,36 @@ function media_library_theme() {
];
}
/**
* Implements hook_preprocess_view().
*
* Adds a link to add media above the view.
*/
function media_library_preprocess_views_view(&$variables) {
$view = $variables['view'];
if ($view->id() === 'media_library' && $view->current_display === 'widget') {
$url = Url::fromRoute('media_library.upload');
if ($url->access()) {
$url->setOption('query', \Drupal::request()->query->all());
$variables['header']['add_media'] = [
'#type' => 'link',
'#title' => t('Add media'),
'#url' => $url,
'#attributes' => [
'class' => ['button', 'button-action', 'button--primary', 'use-ajax'],
'data-dialog-type' => 'modal',
'data-dialog-options' => Json::encode([
'dialogClass' => 'media-library-widget-modal',
'height' => '75%',
'width' => '75%',
'title' => t('Add media'),
]),
],
];
}
}
}
/**
* Implements hook_views_post_render().
*/
......
media_library.upload:
path: '/admin/content/media-widget-upload'
defaults:
_form: '\Drupal\media_library\Form\MediaLibraryUploadForm'
requirements:
_custom_access: '\Drupal\media_library\Form\MediaLibraryUploadForm::access'
This diff is collapsed.
......@@ -124,31 +124,6 @@ public function formElement(FieldItemListInterface $items, $delta, array $elemen
],
];
// @todo Remove in https://www.drupal.org/project/drupal/issues/2938116
$allowed_bundles = !empty($element['#target_bundles']) ? $element['#target_bundles'] : [];
$add_url = _media_get_add_url($allowed_bundles);
if ($add_url) {
$element['create_help'] = [
'#type' => 'container',
];
$element['create_help']['label'] = [
'#type' => 'html_tag',
'#tag' => 'h4',
'#attributes' => [
'class' => ['label'],
],
'#value' => $this->t('Create new media'),
];
$element['create_help']['description'] = [
'#type' => 'html_tag',
'#tag' => 'div',
'#attributes' => [
'class' => ['description'],
],
'#value' => $this->t('Create your media on the <a href=":add_page" target="_blank">media add page</a> (opens a new window), then select it in the library.', [':add_page' => $add_url]),
];
}
$element['selection'] = [
'#type' => 'container',
'#attributes' => [
......@@ -242,6 +217,18 @@ public function formElement(FieldItemListInterface $items, $delta, array $elemen
$element['#description'] .= '<br />' . $cardinality_message;
}
$query = [
'media_library_widget_id' => $field_name . $id_suffix,
'media_library_allowed_types' => $element['#target_bundles'],
'media_library_remaining' => $cardinality_unlimited ? FieldStorageDefinitionInterface::CARDINALITY_UNLIMITED : $remaining,
];
$dialog_options = Json::encode([
'dialogClass' => 'media-library-widget-modal',
'height' => '75%',
'width' => '75%',
'title' => $this->t('Media library'),
]);
// Add a button that will load the Media library in a modal using AJAX.
$element['media_library_open_button'] = [
'#type' => 'link',
......@@ -249,27 +236,36 @@ public function formElement(FieldItemListInterface $items, $delta, array $elemen
'#name' => $field_name . '-media-library-open-button' . $id_suffix,
// @todo Make the view configurable in https://www.drupal.org/project/drupal/issues/2971209
'#url' => Url::fromRoute('view.media_library.widget', [], [
'query' => [
'media_library_widget_id' => $field_name . $id_suffix,
'media_library_allowed_types' => $element['#target_bundles'],
'media_library_remaining' => $cardinality_unlimited ? FieldStorageDefinitionInterface::CARDINALITY_UNLIMITED : $remaining,
],
'query' => $query,
]),
'#attributes' => [
'class' => ['button', 'use-ajax', 'media-library-open-button'],
'data-dialog-type' => 'modal',
'data-dialog-options' => Json::encode([
'dialogClass' => 'media-library-widget-modal',
'height' => '75%',
'width' => '75%',
'title' => $this->t('Media library'),
]),
'data-dialog-options' => $dialog_options,
],
// Prevent errors in other widgets from preventing addition.
'#limit_validation_errors' => $limit_validation_errors,
'#access' => $cardinality_unlimited || $remaining > 0,
];
$add_url = Url::fromRoute('media_library.upload', [], [
'query' => $query,
]);
$element['media_library_add_button'] = [
'#type' => 'link',
'#title' => $this->t('Add media'),
'#name' => $field_name . '-media-library-add-button' . $id_suffix,
'#url' => $add_url,
'#attributes' => [
'class' => ['button', 'use-ajax', 'media-library-add-button'],
'data-dialog-type' => 'modal',
'data-dialog-options' => $dialog_options,
],
// Prevent errors in other widgets from preventing addition.
'#limit_validation_errors' => $limit_validation_errors,
'#access' => $add_url->access() && ($cardinality_unlimited || $remaining > 0),
];
// This hidden field and button are used to add new items to the widget.
$element['media_library_selection'] = [
'#type' => 'hidden',
......
langcode: en
status: true
dependencies:
config:
- field.field.media.type_four.field_media_test_image
- field.field.media.type_four.field_media_extra_image
- image.style.medium
- media.type.type_four
module:
- image
- path
id: media.type_four.default
targetEntityType: media
bundle: type_four
mode: default
content:
created:
type: datetime_timestamp
weight: 10
region: content
settings: { }
third_party_settings: { }
field_media_test_image:
weight: 0
settings:
progress_indicator: throbber
preview_image_style: medium
third_party_settings: { }
type: image_image
region: content
field_media_extra_image:
weight: 1
settings:
progress_indicator: throbber
preview_image_style: medium
third_party_settings: { }
type: image_image
region: content
name:
type: string_textfield
weight: -5
region: content
settings:
size: 60
placeholder: ''
third_party_settings: { }
path:
type: path
weight: 30
region: content
settings: { }
third_party_settings: { }
status:
type: boolean_checkbox
settings:
display_label: true
weight: 100
region: content
third_party_settings: { }
uid:
type: entity_reference_autocomplete
weight: 5
settings:
match_operator: CONTAINS
size: 60
placeholder: ''
region: content
third_party_settings: { }
hidden: { }
langcode: en
status: true
dependencies:
config:
- core.entity_form_mode.media.media_library
- field.field.media.type_four.field_media_test_image
- image.style.thumbnail
- media.type.type_four
module:
- image
id: media.type_four.media_library
targetEntityType: media
bundle: type_four
mode: media_library
content:
field_media_test_image:
weight: 2
settings:
progress_indicator: throbber
preview_image_style: thumbnail
third_party_settings: { }
type: image_image
region: content
field_media_extra_image:
weight: 1
settings:
progress_indicator: throbber
preview_image_style: medium
third_party_settings: { }
type: image_image
region: content
name:
type: string_textfield
weight: 0
region: content
settings:
size: 60
placeholder: ''
third_party_settings: { }
hidden:
created: true
path: true
status: true
uid: true
langcode: en
status: true
dependencies:
config:
- field.field.media.type_three.field_media_test_image
- image.style.medium
- media.type.type_three
module:
- image
- path
id: media.type_three.default
targetEntityType: media
bundle: type_three
mode: default
content:
created:
type: datetime_timestamp
weight: 10
region: content
settings: { }
third_party_settings: { }
field_media_test_image:
weight: 0
settings:
progress_indicator: throbber
preview_image_style: medium
third_party_settings: { }
type: image_image
region: content
name:
type: string_textfield
weight: -5
region: content
settings:
size: 60
placeholder: ''
third_party_settings: { }
path:
type: path
weight: 30
region: content
settings: { }
third_party_settings: { }
status:
type: boolean_checkbox
settings:
display_label: true
weight: 100
region: content
third_party_settings: { }
uid:
type: entity_reference_autocomplete
weight: 5
settings:
match_operator: CONTAINS
size: 60
placeholder: ''
region: content
third_party_settings: { }
hidden: { }
langcode: en
status: true
dependencies:
config:
- core.entity_form_mode.media.media_library
- field.field.media.type_three.field_media_test_image
- image.style.thumbnail
- media.type.type_three
module:
- image
id: media.type_three.media_library
targetEntityType: media
bundle: type_three
mode: media_library
content:
field_media_test_image:
weight: 1
settings:
progress_indicator: throbber
preview_image_style: thumbnail
third_party_settings: { }
type: image_image
region: content
name:
type: string_textfield
weight: 0
region: content
settings:
size: 60
placeholder: ''
third_party_settings: { }
hidden:
created: true
path: true
status: true
uid: true
langcode: en
status: true
dependencies:
config:
- field.field.media.type_three.field_media_test_image
- image.style.thumbnail
- media.type.type_three
module:
- image
- user
id: media.type_three.default
targetEntityType: media
bundle: type_three
mode: default
content:
created:
label: hidden
type: timestamp
weight: 0
region: content
settings:
date_format: medium
custom_date_format: ''
timezone: ''
third_party_settings: { }
field_media_test_image:
weight: 6
label: above
settings:
image_style: ''
image_link: ''
third_party_settings: { }
type: image
region: content
thumbnail:
type: image
weight: 5
label: hidden
settings:
image_style: thumbnail
image_link: ''
region: content
third_party_settings: { }
uid:
label: hidden
type: author
weight: 0
region: content
settings: { }
third_party_settings: { }
hidden:
name: true
langcode: en
status: true
dependencies:
config:
- field.storage.media.field_media_extra_image
- media.type.type_four
module:
- image
id: media.type_three.field_media_extra_image
field_name: field_media_extra_image
entity_type: media
bundle: type_four
label: Extra Image
description: ''
required: false
translatable: true
default_value: { }
default_value_callback: ''
settings:
file_extensions: 'jpg'
alt_field: false
alt_field_required: false
title_field: false
title_field_required: false
max_resolution: ''
min_resolution: ''
default_image:
uuid: null
alt: ''
title: ''
width: null
height: null
file_directory: 'type-four-extra-dir'
max_filesize: ''
handler: 'default:file'
handler_settings: { }
field_type: image
langcode: en
status: true
dependencies:
config:
- field.storage.media.field_media_test_image
- media.type.type_four
module:
- image
id: media.type_three.field_media_test_image
field_name: field_media_test_image
entity_type: media
bundle: type_four
label: Image
description: ''
required: true
translatable: true
default_value: { }
default_value_callback: ''
settings:
file_extensions: 'jpg'
alt_field: true
alt_field_required: true
title_field: false