From 96aaa70ac9dcc42f294ec0a568e80fe94e86f666 Mon Sep 17 00:00:00 2001 From: Alex Pott Date: Mon, 8 Jun 2015 22:53:52 +0100 Subject: [PATCH] Issue #2473943 by Manjit.Singh, Cottser, mu5a5hi, LewisNyman, mortendk, rteijeiro, rachel_norfolk: Prefix form-file and form-managed-file classes with js- --- core/lib/Drupal/Core/Render/Element/File.php | 2 +- core/modules/file/file.field.inc | 4 ++-- core/modules/file/file.js | 22 +++++++++---------- .../templates/file-managed-file.html.twig | 8 ++++++- core/modules/image/image.field.inc | 2 +- .../image/src/Tests/ImageFieldDisplayTest.php | 4 ++-- .../content-edit/file-managed-file.html.twig | 8 ++++++- 7 files changed, 31 insertions(+), 19 deletions(-) diff --git a/core/lib/Drupal/Core/Render/Element/File.php b/core/lib/Drupal/Core/Render/Element/File.php index 5f72c8d38a1..c8b3c7fa2cb 100644 --- a/core/lib/Drupal/Core/Render/Element/File.php +++ b/core/lib/Drupal/Core/Render/Element/File.php @@ -65,7 +65,7 @@ class File extends FormElement { public static function preRenderFile($element) { $element['#attributes']['type'] = 'file'; Element::setAttributes($element, array('id', 'name', 'size')); - static::setAttributes($element, array('form-file')); + static::setAttributes($element, array('js-form-file', 'form-file')); return $element; } diff --git a/core/modules/file/file.field.inc b/core/modules/file/file.field.inc index 25788444de8..782ae70f591 100644 --- a/core/modules/file/file.field.inc +++ b/core/modules/file/file.field.inc @@ -27,8 +27,8 @@ function template_preprocess_file_widget(&$variables) { $element['file_' . $file->id()]['filename']['#suffix'] = ' (' . format_size($file->getSize()) . ') '; } $variables['element'] = $element; - // The "form-managed-file" class is required for proper Ajax functionality. - $variables['attributes'] = array('class' => array('file-widget', 'form-managed-file', 'clearfix')); + // The "js-form-managed-file" class is required for proper Ajax functionality. + $variables['attributes'] = array('class' => array('file-widget', 'js-form-managed-file', 'form-managed-file', 'clearfix')); } /** diff --git a/core/modules/file/file.js b/core/modules/file/file.js index ec607fc2166..5a4aea826e8 100644 --- a/core/modules/file/file.js +++ b/core/modules/file/file.js @@ -74,12 +74,12 @@ attach: function (context) { var $context = $(context); $context.find('.js-form-submit').on('mousedown', Drupal.file.disableFields); - $context.find('.form-managed-file .js-form-submit').on('mousedown', Drupal.file.progressBar); + $context.find('.js-form-managed-file .js-form-submit').on('mousedown', Drupal.file.progressBar); }, detach: function (context) { var $context = $(context); $context.find('.js-form-submit').off('mousedown', Drupal.file.disableFields); - $context.find('.form-managed-file .js-form-submit').off('mousedown', Drupal.file.progressBar); + $context.find('.js-form-managed-file .js-form-submit').off('mousedown', Drupal.file.progressBar); } }; @@ -90,10 +90,10 @@ */ Drupal.behaviors.filePreviewLinks = { attach: function (context) { - $(context).find('div.form-managed-file .file a, .file-widget .file a').on('click', Drupal.file.openInNewWindow); + $(context).find('div.js-form-managed-file .file a, .file-widget .file a').on('click', Drupal.file.openInNewWindow); }, detach: function (context) { - $(context).find('div.form-managed-file .file a, .file-widget .file a').off('click', Drupal.file.openInNewWindow); + $(context).find('div.js-form-managed-file .file a, .file-widget .file a').off('click', Drupal.file.openInNewWindow); } }; @@ -132,7 +132,7 @@ '%filename': this.value.replace('C:\\fakepath\\', ''), '%extensions': extensionPattern.replace(/\|/g, ', ') }); - $(this).closest('div.form-managed-file').prepend('
' + error + '
'); + $(this).closest('div.js-form-managed-file').prepend('
' + error + '
'); this.value = ''; // Cancel all other change event handlers. event.stopImmediatePropagation(); @@ -148,7 +148,7 @@ * @param {jQuery.Event} event */ triggerUploadButton: function (event) { - $(event.target).closest('.form-managed-file').find('.js-form-submit').trigger('mousedown'); + $(event.target).closest('.js-form-managed-file').find('.js-form-submit').trigger('mousedown'); }, /** @@ -168,8 +168,8 @@ // Check if we're working with an "Upload" button. var $enabledFields = []; - if ($clickedButton.closest('div.form-managed-file').length > 0) { - $enabledFields = $clickedButton.closest('div.form-managed-file').find('input.form-file'); + if ($clickedButton.closest('div.js-form-managed-file').length > 0) { + $enabledFields = $clickedButton.closest('div.js-form-managed-file').find('input.js-form-file'); } // Temporarily disable upload fields other than the one we're currently @@ -181,7 +181,7 @@ // functions are called, so we don't have to worry about the fields being // re-enabled too soon. @todo If the previous sentence is true, why not // set the timeout to 0? - var $fieldsToTemporarilyDisable = $('div.form-managed-file input.form-file').not($enabledFields).not(':disabled'); + var $fieldsToTemporarilyDisable = $('div.js-form-managed-file input.js-form-file').not($enabledFields).not(':disabled'); $fieldsToTemporarilyDisable.prop('disabled', true); setTimeout(function () { $fieldsToTemporarilyDisable.prop('disabled', false); @@ -197,7 +197,7 @@ */ progressBar: function (event) { var $clickedButton = $(this); - var $progressId = $clickedButton.closest('div.form-managed-file').find('input.file-progress'); + var $progressId = $clickedButton.closest('div.js-form-managed-file').find('input.file-progress'); if ($progressId.length) { var originalName = $progressId.attr('name'); @@ -211,7 +211,7 @@ } // Show the progress bar if the upload takes longer than half a second. setTimeout(function () { - $clickedButton.closest('div.form-managed-file').find('div.ajax-progress-bar').slideDown(); + $clickedButton.closest('div.js-form-managed-file').find('div.ajax-progress-bar').slideDown(); }, 500); }, diff --git a/core/modules/file/templates/file-managed-file.html.twig b/core/modules/file/templates/file-managed-file.html.twig index 7a875118c39..39de9b4fa39 100644 --- a/core/modules/file/templates/file-managed-file.html.twig +++ b/core/modules/file/templates/file-managed-file.html.twig @@ -12,6 +12,12 @@ * @ingroup themeable */ #} - +{% + set classes = [ + 'js-form-managed-file', + 'form-managed-file', + ] +%} + {{ element }} diff --git a/core/modules/image/image.field.inc b/core/modules/image/image.field.inc index dbdbcc857cc..49c6534f580 100644 --- a/core/modules/image/image.field.inc +++ b/core/modules/image/image.field.inc @@ -21,7 +21,7 @@ use Drupal\Core\Render\Element; function template_preprocess_image_widget(&$variables) { $element = $variables['element']; - $variables['attributes'] = array('class' => array('image-widget', 'form-managed-file', 'clearfix')); + $variables['attributes'] = array('class' => array('image-widget', 'js-form-managed-file', 'form-managed-file', 'clearfix')); if (!empty($element['fids']['#value'])) { $file = reset($element['#files']); diff --git a/core/modules/image/src/Tests/ImageFieldDisplayTest.php b/core/modules/image/src/Tests/ImageFieldDisplayTest.php index 875a2a2d90e..74b07ed78a2 100644 --- a/core/modules/image/src/Tests/ImageFieldDisplayTest.php +++ b/core/modules/image/src/Tests/ImageFieldDisplayTest.php @@ -317,8 +317,8 @@ class ImageFieldDisplayTest extends ImageFieldTestBase { 'files[' . $field_name . '_2][]' => drupal_realpath($test_image->uri), ); $this->drupalPostAjaxForm(NULL, $edit, $field_name . '_2_upload_button'); - $this->assertNoRaw(''); - $this->assertRaw(''); + $this->assertNoRaw(''); + $this->assertRaw(''); } /** diff --git a/core/themes/classy/templates/content-edit/file-managed-file.html.twig b/core/themes/classy/templates/content-edit/file-managed-file.html.twig index 43739bedc03..f639237d2a0 100644 --- a/core/themes/classy/templates/content-edit/file-managed-file.html.twig +++ b/core/themes/classy/templates/content-edit/file-managed-file.html.twig @@ -10,6 +10,12 @@ * @see template_preprocess_file_managed_file() */ #} - +{% + set classes = [ + 'js-form-managed-file', + 'form-managed-file', + ] +%} + {{ element }}