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

Issue #2170085 by Wim Leers, jessebeach: Caption filter may not wrap images that are only aligned, not captioned.

8.0.x
webchick 2014-01-13 18:53:06 -08:00
parent 9e017ada4f
commit 839dcc1c5d
7 changed files with 59 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
core/modules/ckeditor/js/plugins/drupalimagecaption/theme.js
View File

@ -67,7 +67,7 @@ CKEDITOR.on('instanceCreated', function (event) {
// The image is not wrapped in <figure>.
else if (this.element.is('img')) {
// The image is not wrapped in <figure>, but it should be.
if (this.data.hasCaption || this.data.data_align !== null) {
if (this.data.hasCaption) {
// Destroy this widget, so we can wrap the <img>.
editor.widgets.destroy(this);
// Replace the widget's element (the <img>) with the template (a
@ -80,6 +80,9 @@ CKEDITOR.on('instanceCreated', function (event) {
// Reinitialize this widget with the current data.
editor.widgets.initOn(figure, 'drupalimagecaption', this.data);
}
else if (this.data.data_align !== null) {
this.element.addClass('align-' + this.data.data_align);
}
}
};
});
@ -94,8 +97,8 @@ CKEDITOR.on('instanceCreated', function (event) {
var captionValue = el.attributes['data-caption'];
var alignValue = el.attributes['data-align'];
// Wrap image in <figure> only if data-caption or data-align is set.
if (captionValue !== undefined || alignValue !== undefined) {
// Wrap image in <figure> only if data-caption is set.
if (captionValue !== undefined) {
var classes = 'caption caption-img';
if (alignValue !== null) {
classes += ' caption-' + alignValue;
@ -104,6 +107,12 @@ CKEDITOR.on('instanceCreated', function (event) {
var caption = CKEDITOR.htmlParser.fragment.fromHtml(captionValue || '', 'figcaption');
figure.add(caption);
}
else if (alignValue !== undefined) {
if (el.attributes['class'] === undefined) {
el.attributes['class'] = '';
}
el.attributes['class'] += 'align-' + alignValue;
}
return figure || el;
}
@ -147,9 +156,8 @@ CKEDITOR.on('instanceCreated', function (event) {
if (typeof returnValues.hasCaption === 'number') {
returnValues.hasCaption = !!returnValues.hasCaption;
}
// Use the original save callback if the image has neither a caption
// nor alignment.
if (returnValues.hasCaption === false && returnValues.attributes.data_align === null) {
// Use the original save callback if the image has no caption.
if (returnValues.hasCaption === false) {
widgetDefinition._insertSaveCallback.apply(this, arguments);
return;
}

2
core/modules/ckeditor/lib/Drupal/ckeditor/Plugin/CKEditorPlugin/Internal.php
View File

@ -45,7 +45,7 @@ class Internal extends CKEditorPluginBase {
'customConfig' => '', // Don't load CKEditor's config.js file.
'pasteFromWordPromptCleanup' => TRUE,
'resize_dir' => 'vertical',
'justifyClasses' => array('align-left', 'align-center', 'align-right', 'align-justify'),
'justifyClasses' => array('text-align-left', 'text-align-center', 'text-align-right', 'text-align-justify'),
);
// Add the allowedContent setting, which ensures CKEditor only allows tags

2
core/modules/ckeditor/lib/Drupal/ckeditor/Tests/CKEditorTest.php
View File

@ -351,7 +351,7 @@ class CKEditorTest extends DrupalUnitTestBase {
'customConfig' => '',
'pasteFromWordPromptCleanup' => TRUE,
'resize_dir' => 'vertical',
'justifyClasses' => array('align-left', 'align-center', 'align-right', 'align-justify'),
'justifyClasses' => array('text-align-left', 'text-align-center', 'text-align-right', 'text-align-justify'),
);
}

13
core/modules/filter/lib/Drupal/filter/Plugin/Filter/FilterCaption.php
View File

@ -57,9 +57,16 @@ class FilterCaption extends FilterBase {
}
}
// If neither attribute has a value after validation, then don't
// transform the HTML.
if ($caption === NULL && $align === NULL) {
// Don't transform the HTML if there isn't a caption after validation.
if ($caption === NULL) {
// If there is a valid alignment, then transform the data-align
// attribute to a corresponding alignment class.
if ($align !== NULL) {
$classes = $node->getAttribute('class');
$classes = (strlen($classes) > 0) ? explode(' ', $classes) : array();
$classes[] = 'align-' . $align;
$node->setAttribute('class', implode(' ', $classes));
}
continue;
}

15
core/modules/filter/lib/Drupal/filter/Tests/FilterUnitTest.php
View File

@ -93,13 +93,13 @@ class FilterUnitTest extends DrupalUnitTestBase {
// Only data-align attribute: all 3 allowed values.
$input = '<img src="llama.jpg" data-align="left" />';
$expected = '<figure class="caption caption-img caption-left"><img src="llama.jpg" /></figure>';
$expected = '<img src="llama.jpg" class="align-left" />';
$this->assertIdentical($expected, $test($input));
$input = '<img src="llama.jpg" data-align="center" />';
$expected = '<figure class="caption caption-img caption-center"><img src="llama.jpg" /></figure>';
$expected = '<img src="llama.jpg" class="align-center" />';
$this->assertIdentical($expected, $test($input));
$input = '<img src="llama.jpg" data-align="right" />';
$expected = '<figure class="caption caption-img caption-right"><img src="llama.jpg" /></figure>';
$expected = '<img src="llama.jpg" class="align-right" />';
$this->assertIdentical($expected, $test($input));
// Only data-align attribute: a disallowed value.
@ -112,7 +112,14 @@ class FilterUnitTest extends DrupalUnitTestBase {
$expected = '<img src="llama.jpg" />';
$this->assertIdentical($expected, $test($input));
// Both data-caption and data-align attributes.
// Both data-caption and data-align attributes: all 3 allowed values for the
// data-align attribute.
$input = '<img src="llama.jpg" data-caption="Loquacious llama!" data-align="left" />';
$expected = '<figure class="caption caption-img caption-left"><img src="llama.jpg" /><figcaption>Loquacious llama!</figcaption></figure>';
$this->assertIdentical($expected, $test($input));
$input = '<img src="llama.jpg" data-caption="Loquacious llama!" data-align="center" />';
$expected = '<figure class="caption caption-img caption-center"><img src="llama.jpg" /><figcaption>Loquacious llama!</figcaption></figure>';
$this->assertIdentical($expected, $test($input));
$input = '<img src="llama.jpg" data-caption="Loquacious llama!" data-align="right" />';
$expected = '<figure class="caption caption-img caption-right"><img src="llama.jpg" /><figcaption>Loquacious llama!</figcaption></figure>';
$this->assertIdentical($expected, $test($input));

6
core/modules/filter/templates/filter-caption.html.twig
View File

@ -5,14 +5,12 @@
* Available variables
* - string node: The complete HTML tag whose contents are being captioned.
* - string tag: The name of the HTML tag whose contents are being captioned.
* - string|NULL caption: (optional) The caption text, or NULL.
* - string caption: The caption text.
* - string|NULL align: (optional) The alignment: 'left', 'center', 'right' or
* NULL.
*/
#}
<figure class="caption caption-{{ tag }} {%- if align %} caption-{{ align }} {%- endif %}">
{{ node }}
{% if caption %}
<figcaption>{{ caption }}</figcaption>
{% endif %}
<figcaption>{{ caption }}</figcaption>
</figure>

25
core/modules/system/css/system.module.css
View File

@ -335,17 +335,32 @@ tr .ajax-progress-throbber .throbber {
}
/**
* Content display classes.
* Text alignment classes.
*/
.align-left {
.text-align-left {
text-align: left;
}
.align-right {
.text-align-right {
text-align: right;
}
.align-center {
.text-align-center {
text-align: center;
}
.align-justify {
.text-align-justify {
text-align: justify;
}
/**
* Alignment classes (images, videos, blockquotes …).
*/
.align-left {
float: left;
}
.align-right {
float: right;
}
.align-center {
display: block;
margin-left: auto;
margin-right: auto;
}