`);
+
+ // Insert dropzone before the wrapper and move the wrapper to the
+ // dropzone.
+ $dropzone
+ .insertBefore($wrapper)
+ .find('.dropzone__no-trigger')
+ .append($wrapper);
+
+ // If there is an image widget, move that before the file wrapper to
+ // allow easier theming.
+ $wrapper.find('.js-image-widget').insertAfter($wrapper);
+
+ // Attach listeners for drag/drop events.
+ $(this)
+ .on('dragover mouseenter', e => {
+ $(e.currentTarget)
+ .closest('.dropzone')
+ .find('.dropzone__trigger')
+ .addClass('is-hovering');
+ })
+ .on('dragleave mouseleave', e => {
+ $(e.currentTarget)
+ .closest('.dropzone')
+ .find('.dropzone__trigger')
+ .removeClass('is-hovering');
+ });
+ });
+
+ Drupal.ajax.instances
+ .filter(instance => {
+ if (instance && instance.element) {
+ const element = $(instance.element);
+ return (
+ element.length > 0 &&
+ element.hasClass('js-upload-button') &&
+ element.once('magic').length > 0
+ );
+ }
+ return null;
+ })
+ .forEach(instance => {
+ const $element = $(instance.element);
+
+ // Trigger the file field when the 'Add file' button is clicked to
+ // open the local file browser.
+ $element
+ .closest('.dropzone')
+ .find('.js-dropzone-add-button')
+ .on('click', e => {
+ e.preventDefault();
+ $(e.currentTarget)
+ .closest('.js-form-item')
+ .find('input[type="file"]')
+ .trigger('click');
+ });
+
+ // Hide the dropzone trigger when uploading files.
+ const beforeSend = instance.beforeSend;
+ $element.bind('beforeSend', beforeSend);
+ instance.beforeSend = function(xmlhttprequest, options) {
+ beforeSend.call(this, xmlhttprequest, options);
+ $element.trigger('beforeSend');
+ $element
+ .closest('.dropzone')
+ .find('.dropzone__trigger')
+ .addClass('is-hidden');
+ };
+ });
+
+ /**
+ * Fix the reflowing of the changed marker. Output after filesize span.
+ */
+ if (Drupal.tableDrag) {
+ Drupal.tableDrag.prototype.row.prototype.markChanged = function() {
+ const marker = Drupal.theme('tableDragChangedMarker');
+ const cell = $(this.element).find('td:first-of-type');
+ if (cell.find('abbr.tabledrag-changed').length === 0) {
+ // @todo Change the selector to '.js-file-size' when
+ // https://www.drupal.org/project/drupal/issues/3033279 is fixed.
+ if (cell.find('.file-size').length) {
+ cell.find('.file-size').append(marker);
+ } else {
+ cell.append(marker);
+ }
+ }
+ };
+ }
+ },
+ };
+})(jQuery, Drupal, drupalSettings);
diff --git a/core/themes/seven/js/dropzone.js b/core/themes/seven/js/dropzone.js
new file mode 100644
index 0000000000..77f50a7505
--- /dev/null
+++ b/core/themes/seven/js/dropzone.js
@@ -0,0 +1,86 @@
+/**
+* DO NOT EDIT THIS FILE.
+* See the following change record for more information,
+* https://www.drupal.org/node/2815083
+* @preserve
+**/
+
+(function ($, Drupal, drupalSettings) {
+ Drupal.behaviors.dropzone = {
+ attach: function attach(context) {
+ $(context).find('.js-form-managed-file-wrapper').addClass('form-managed-file-wrapper--dropzone').each(function () {
+ if ($(this).hasClass('has-file')) {
+ $(this).find('> .js-description').appendTo($('.js-image-widget-data', this));
+ }
+
+ var $files = $(this).find('.js-form-type-checkbox');
+ if ($files.length) {
+ var $filesWrapper = $('');
+ $files.appendTo($filesWrapper);
+ $filesWrapper.insertBefore($(this));
+ $(this).find('.js-remove-button-multiple').appendTo($filesWrapper);
+ }
+ });
+
+ $(context).find('.js-form-file').once('managed-file-dropzone').each(function () {
+ var $wrapper = $(this).parents('.js-form-managed-file-wrapper');
+
+ var buttonText = Drupal.t('Add file');
+ if (this.hasAttribute('multiple')) {
+ buttonText = Drupal.t('Add files');
+ }
+ var $button = $('');
+ $button.insertAfter($wrapper.find('.form-managed-file'));
+
+ var $dropzone = $('
\n \n
\n
\n
');
+
+ $dropzone.insertBefore($wrapper).find('.dropzone__no-trigger').append($wrapper);
+
+ $wrapper.find('.js-image-widget').insertAfter($wrapper);
+
+ $(this).on('dragover mouseenter', function (e) {
+ $(e.currentTarget).closest('.dropzone').find('.dropzone__trigger').addClass('is-hovering');
+ }).on('dragleave mouseleave', function (e) {
+ $(e.currentTarget).closest('.dropzone').find('.dropzone__trigger').removeClass('is-hovering');
+ });
+ });
+
+ Drupal.ajax.instances.filter(function (instance) {
+ if (instance && instance.element) {
+ var element = $(instance.element);
+ return element.length > 0 && element.hasClass('js-upload-button') && element.once('magic').length > 0;
+ }
+ return null;
+ }).forEach(function (instance) {
+ var $element = $(instance.element);
+
+ $element.closest('.dropzone').find('.js-dropzone-add-button').on('click', function (e) {
+ e.preventDefault();
+ $(e.currentTarget).closest('.js-form-item').find('input[type="file"]').trigger('click');
+ });
+
+ var beforeSend = instance.beforeSend;
+ $element.bind('beforeSend', beforeSend);
+ instance.beforeSend = function (xmlhttprequest, options) {
+ beforeSend.call(this, xmlhttprequest, options);
+ $element.trigger('beforeSend');
+ $element.closest('.dropzone').find('.dropzone__trigger').addClass('is-hidden');
+ };
+ });
+
+ if (Drupal.tableDrag) {
+ Drupal.tableDrag.prototype.row.prototype.markChanged = function () {
+ var marker = Drupal.theme('tableDragChangedMarker');
+ var cell = $(this.element).find('td:first-of-type');
+ if (cell.find('abbr.tabledrag-changed').length === 0) {
+ if (cell.find('.file-size').length) {
+ cell.find('.file-size').append(marker);
+ } else {
+ cell.append(marker);
+ }
+ }
+ };
+ }
+ }
+ };
+})(jQuery, Drupal, drupalSettings);
\ No newline at end of file
diff --git a/core/themes/seven/seven.libraries.yml b/core/themes/seven/seven.libraries.yml
index 6ae159416e..912d190ff8 100644
--- a/core/themes/seven/seven.libraries.yml
+++ b/core/themes/seven/seven.libraries.yml
@@ -15,10 +15,12 @@ global-styling:
css/components/details.css: {}
css/components/messages.css: {}
css/components/dropbutton.component.css: {}
+ css/components/dropzone.css: {}
css/components/entity-meta.css: {}
css/components/field-ui.css: {}
css/components/form.css: {}
css/components/help.css: {}
+ css/components/managed-file.css: {}
css/components/menus-and-lists.css: {}
css/components/modules-page.css: {}
css/components/node.css: {}
@@ -39,7 +41,11 @@ global-styling:
css/theme/colors.css: {}
layout:
css/layout/layout.css: {}
+ js:
+ js/dropzone.js: {}
dependencies:
+ - core/drupal.ajax
+ - core/drupal.progress
- system/admin
node-form:
diff --git a/core/themes/seven/seven.theme b/core/themes/seven/seven.theme
index 479a4e310a..ba0ed4dfdf 100644
--- a/core/themes/seven/seven.theme
+++ b/core/themes/seven/seven.theme
@@ -6,6 +6,7 @@
*/
use Drupal\Core\Form\FormStateInterface;
+use Drupal\Core\Render\Element;
use Drupal\media\MediaForm;
/**
@@ -127,6 +128,35 @@ function seven_element_info_alter(&$type) {
if (isset($type['button'])) {
$type['button']['#attached']['library'][] = 'core/modernizr';
}
+ if (isset($type['managed_file'])) {
+ $type['managed_file']['#process'][] = 'seven_process_managed_file';
+ }
+}
+
+/**
+ * Render API callback: Expands the managed_file element type.
+ *
+ * @return mixed
+ */
+function seven_process_managed_file($element) {
+ $element['upload']['#attributes']['class'][] = 'managed-file-upload';
+ $element['upload']['#weight'] = 1;
+ $element['upload_button']['#attributes']['class'][] = 'upload-button';
+ $element['upload_button']['#attributes']['class'][] = 'js-upload-button';
+ $element['upload_button']['#weight'] = 2;
+
+ // Add a different class to the remove button for multivalue fields since the
+ // remove button has different behavior for multivalue fields.
+ if ($element['#multiple']) {
+ $element['remove_button']['#attributes']['class'][] = 'button--small';
+ $element['remove_button']['#attributes']['class'][] = 'remove-button-multiple';
+ $element['remove_button']['#attributes']['class'][] = 'js-remove-button-multiple';
+ }
+ else {
+ $element['remove_button']['#attributes']['class'][] = 'remove-button';
+ }
+
+ return $element;
}
/**
@@ -145,6 +175,15 @@ function seven_preprocess_maintenance_page(&$variables) {
$variables['#attached']['library'][] = 'seven/maintenance-page';
}
+/**
+ * Implements hook_preprocess_file_widget_multiple().
+ */
+function seven_preprocess_file_widget_multiple(&$variables) {
+ foreach (Element::children($variables['element']) as $key) {
+ $variables['element'][$key]['#title_display'] = 'invisible';
+ }
+}
+
/**
* Implements hook_form_BASE_FORM_ID_alter() for \Drupal\node\NodeForm.
*
@@ -164,6 +203,13 @@ function seven_form_node_form_alter(&$form, FormStateInterface $form_state) {
$form['revision_information']['#group'] = 'meta';
}
+/**
+ * Implements hook_theme_suggestions_form_element_alter().
+ */
+function seven_theme_suggestions_form_element_alter(&$suggestions, $variables) {
+ $suggestions[] = 'form_element__' . $variables['element']['#type'];
+}
+
/**
* Implements hook_form_BASE_FORM_ID_alter() for \Drupal\media\MediaForm.
*/
diff --git a/core/themes/seven/templates/file-upload-help.html.twig b/core/themes/seven/templates/file-upload-help.html.twig
new file mode 100644
index 0000000000..5a19d30555
--- /dev/null
+++ b/core/themes/seven/templates/file-upload-help.html.twig
@@ -0,0 +1,16 @@
+{#
+/**
+ * @file
+ * Theme override to display help text for file fields.
+ *
+ * Available variables:
+ * - descriptions: Lines of help text for uploading a file.
+ *
+ * @see template_preprocess_file_upload_help()
+ */
+#}
+
+ {% for description in descriptions %}
+
{{ description|trim('.') }}
+ {% endfor %}
+
diff --git a/core/themes/seven/templates/file-widget-multiple.html.twig b/core/themes/seven/templates/file-widget-multiple.html.twig
new file mode 100644
index 0000000000..a0212a2d3c
--- /dev/null
+++ b/core/themes/seven/templates/file-widget-multiple.html.twig
@@ -0,0 +1,16 @@
+{#
+/**
+ * @file
+ * Theme override to display a multi file form widget.
+ *
+ * Available variables:
+ * - table: Table of previously uploaded files.
+ * - element: The form element for uploading another file.
+ *
+ * @see template_preprocess_file_widget_multiple()
+ */
+#}
+
+ {{ table }}
+ {{ element }}
+
diff --git a/core/themes/seven/templates/form-element--managed-file.html.twig b/core/themes/seven/templates/form-element--managed-file.html.twig
new file mode 100644
index 0000000000..3458fe091b
--- /dev/null
+++ b/core/themes/seven/templates/form-element--managed-file.html.twig
@@ -0,0 +1,98 @@
+{#
+/**
+ * @file
+ * Theme override for a form element.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing element.
+ * - errors: (optional) Any errors for this form element, may not be set.
+ * - prefix: (optional) The form element prefix, may not be set.
+ * - suffix: (optional) The form element suffix, may not be set.
+ * - required: The required marker, or empty if the associated form element is
+ * not required.
+ * - type: The type of the element.
+ * - name: The name of the element.
+ * - label: A rendered label element.
+ * - label_display: Label display setting. It can have these values:
+ * - before: The label is output before the element. This is the default.
+ * The label includes the #title and the required marker, if #required.
+ * - after: The label is output after the element. For example, this is used
+ * for radio and checkbox #type elements. If the #title is empty but the
+ * field is #required, the label will contain only the required marker.
+ * - invisible: Labels are critical for screen readers to enable them to
+ * properly navigate through forms but can be visually distracting. This
+ * property hides the label for everyone except screen readers.
+ * - attribute: Set the title attribute on the element to create a tooltip but
+ * output no label element. This is supported only for checkboxes and radios
+ * in \Drupal\Core\Render\Element\CompositeFormElementTrait::preRenderCompositeFormElement().
+ * It is used where a visual label is not needed, such as a table of
+ * checkboxes where the row and column provide the context. The tooltip will
+ * include the title and required marker.
+ * - description: (optional) A list of description properties containing:
+ * - content: A description of the form element, may not be set.
+ * - attributes: (optional) A list of HTML attributes to apply to the
+ * description content wrapper. Will only be set when description is set.
+ * - description_display: Description display setting. It can have these values:
+ * - before: The description is output before the element.
+ * - after: The description is output after the element. This is the default
+ * value.
+ * - invisible: The description is output after the element, hidden visually
+ * but available to screen readers.
+ * - disabled: True if the element is disabled.
+ * - title_display: Title display setting.
+ *
+ * @see template_preprocess_form_element()
+ */
+#}
+{%
+ set classes = [
+ 'js-form-item',
+ 'form-item',
+ 'js-form-type-' ~ type|clean_class,
+ 'form-type-' ~ type|clean_class,
+ 'js-form-item-' ~ name|clean_class,
+ 'form-item-' ~ name|clean_class,
+ title_display not in ['after', 'before'] ? 'form-no-label',
+ disabled == 'disabled' ? 'form-disabled',
+ errors ? 'form-item--error',
+ ]
+%}
+{%
+ set description_classes = [
+ 'description',
+ 'js-description',
+ description_display == 'invisible' ? 'visually-hidden',
+ ]
+%}
+
+ {% if label_display in ['before', 'invisible'] %}
+ {{ label }}
+ {% endif %}
+ {% if prefix is not empty %}
+ {{ prefix }}
+ {% endif %}
+ {% if description_display == 'before' and description.content %}
+
+ {{ description.content }}
+
+ {% endif %}
+ {% if errors %}
+
+ {{ errors }}
+
+ {% endif %}
+
+ {{ children }}
+ {% if description_display in ['after', 'invisible'] and description.content %}
+
+ {{ description.content }}
+