Drupal
/
drupal
mirror of https://git.drupalcode.org/project/drupal.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Issue #2473943 by Manjit.Singh, Cottser, mu5a5hi, LewisNyman, mortendk, rteijeiro, rachel_norfolk: Prefix form-file and form-managed-file classes with js-

8.0.x
Alex Pott 2015-06-08 22:53:52 +01:00
parent 74c8c59941
commit 96aaa70ac9
7 changed files with 31 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
core/lib/Drupal/Core/Render/Element/File.php
View File

@ -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;
}

4
core/modules/file/file.field.inc
View File

@ -27,8 +27,8 @@ function template_preprocess_file_widget(&$variables) {
$element['file_' . $file->id()]['filename']['#suffix'] = ' <span class="file-size">(' . format_size($file->getSize()) . ')</span> ';
}
$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'));
}
/**

22
core/modules/file/file.js
View File

@ -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('<div class="messages messages--error file-upload-js-error" aria-live="polite">' + error + '</div>');
$(this).closest('div.js-form-managed-file').prepend('<div class="messages messages--error file-upload-js-error" aria-live="polite">' + error + '</div>');
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);
},

8
core/modules/file/templates/file-managed-file.html.twig
View File

@ -12,6 +12,12 @@
* @ingroup themeable
*/
#}
<div{{ attributes.addClass('form-managed-file') }}>
{%
set classes = [
'js-form-managed-file',
'form-managed-file',
]
%}
<div{{ attributes.addClass(classes) }}>
{{ element }}
</div>

2
core/modules/image/image.field.inc
View File

@ -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']);

4
core/modules/image/src/Tests/ImageFieldDisplayTest.php
View File

@ -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('<input multiple type="file" id="edit-' . strtr($field_name, '_', '-') . '-2-upload" name="files[' . $field_name . '_2][]" size="22" class="form-file">');
$this->assertRaw('<input multiple type="file" id="edit-' . strtr($field_name, '_', '-') . '-3-upload" name="files[' . $field_name . '_3][]" size="22" class="form-file">');
$this->assertNoRaw('<input multiple type="file" id="edit-' . strtr($field_name, '_', '-') . '-2-upload" name="files[' . $field_name . '_2][]" size="22" class="js-form-file form-file">');
$this->assertRaw('<input multiple type="file" id="edit-' . strtr($field_name, '_', '-') . '-3-upload" name="files[' . $field_name . '_3][]" size="22" class="js-form-file form-file">');
}
/**

8
core/themes/classy/templates/content-edit/file-managed-file.html.twig
View File

@ -10,6 +10,12 @@
* @see template_preprocess_file_managed_file()
*/
#}
<div{{ attributes.addClass('form-managed-file') }}>
{%
set classes = [
'js-form-managed-file',
'form-managed-file',
]
%}
<div{{ attributes.addClass(classes) }}>
{{ element }}
</div>