Commit 96aaa70a authored by alexpott's avatar alexpott

Issue #2473943 by Manjit.Singh, Cottser, mu5a5hi, LewisNyman, mortendk,...

Issue #2473943 by Manjit.Singh, Cottser, mu5a5hi, LewisNyman, mortendk, rteijeiro, rachel_norfolk: Prefix form-file and form-managed-file classes with js-
parent 74c8c599
......@@ -65,7 +65,7 @@ public static function processFile(&$element, FormStateInterface $form_state, &$
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;
}
......
......@@ -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'));
}
/**
......
......@@ -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);
},
......
......@@ -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>
......@@ -21,7 +21,7 @@
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']);
......
......@@ -317,8 +317,8 @@ function testImageFieldSettings() {
'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">');
}
/**
......
......@@ -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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment