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

Issue #3081983 by oknate, Wim Leers: Double Alignment classes on widget wrapper for embedded media in CKEditor

merge-requests/55/head
effulgentsia 2019-09-21 18:34:48 -07:00
parent 683dda01d7
commit 0df5ad93be
3 changed files with 29 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
core/modules/media/js/plugins/drupalmedia/plugin.es6.js
View File

@ -244,20 +244,19 @@
// Convert data-align attribute to class so we're not applying styles
// to data attributes.
// @todo Consider removing this in https://www.drupal.org/project/drupal/issues/3072279
// Remove any align classes from from the widget wrapper. These
// classes are moved to the wrapper so that the alignment will still
// display within CKEditor.
const classes = this.element.getParent().$.classList;
for (let i = 0; i < classes.length; i++) {
if (classes[i].indexOf('align-') === 0) {
this.element.getParent().removeClass(classes[i]);
}
}
if (this.data.attributes.hasOwnProperty('data-align')) {
this.element
.getParent()
.addClass(`align-${this.data.attributes['data-align']}`);
} else {
// If data-align property is removed, remove any align classes from
// from the widget wrapper. These classes are moved to the wrapper
// so that the alignment will still display within CKEditor.
const classes = this.element.getParent().$.classList;
for (let i = 0; i < classes.length; i++) {
if (classes[i].indexOf('align-') === 0) {
this.element.getParent().removeClass(classes[i]);
}
}
}
// Track the previous state to allow checking if preview needs

13
core/modules/media/js/plugins/drupalmedia/plugin.js
View File

@ -178,15 +178,14 @@
this.element.setAttributes(this.data.attributes);
var classes = this.element.getParent().$.classList;
for (var i = 0; i < classes.length; i++) {
if (classes[i].indexOf('align-') === 0) {
this.element.getParent().removeClass(classes[i]);
}
}
if (this.data.attributes.hasOwnProperty('data-align')) {
this.element.getParent().addClass('align-' + this.data.attributes['data-align']);
} else {
var classes = this.element.getParent().$.classList;
for (var i = 0; i < classes.length; i++) {
if (classes[i].indexOf('align-') === 0) {
this.element.getParent().removeClass(classes[i]);
}
}
}
this.oldData = CKEDITOR.tools.clone(this.data);

15
core/modules/media/tests/src/FunctionalJavascript/CKEditorIntegrationTest.php
View File

@ -1042,9 +1042,22 @@ class CKEditorIntegrationTest extends WebDriverTestBase {
];
foreach ($alignments as $alignment) {
$this->fillFieldInMetadataDialogAndSubmit('attributes[data-align]', $alignment);
// Now verify the result.
// Now verify the result. Assert the first element within the
// <drupal-media> element has the alignment class.
$selector = sprintf('drupal-media[data-align="%s"] .caption-drupal-media.align-%s', $alignment, $alignment);
$this->assertNotEmpty($assert_session->waitForElementVisible('css', $selector, 2000));
foreach ($alignments as $wrapper_alignment) {
$selector = sprintf('.cke_widget_drupalmedia.align-%s', $wrapper_alignment);
if ($wrapper_alignment === $alignment) {
// Assert that the alignment class exists on the wrapper.
$assert_session->elementExists('css', $selector);
}
else {
// Assert that the other alignment classes don't exist on the wrapper.
$assert_session->elementNotExists('css', $selector);
}
}
// Assert that the resultant downcast drupal-media element has the proper
// `data-align` attribute.
$this->pressEditorButton('source');