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

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

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

@ -178,15 +178,14 @@
this.element.setAttributes(this.data.attributes); this.element.setAttributes(this.data.attributes);
if (this.data.attributes.hasOwnProperty('data-align')) {
this.element.getParent().addClass('align-' + this.data.attributes['data-align']);
} else {
var classes = this.element.getParent().$.classList; var classes = this.element.getParent().$.classList;
for (var i = 0; i < classes.length; i++) { for (var i = 0; i < classes.length; i++) {
if (classes[i].indexOf('align-') === 0) { if (classes[i].indexOf('align-') === 0) {
this.element.getParent().removeClass(classes[i]); this.element.getParent().removeClass(classes[i]);
} }
} }
if (this.data.attributes.hasOwnProperty('data-align')) {
this.element.getParent().addClass('align-' + this.data.attributes['data-align']);
} }
this.oldData = CKEDITOR.tools.clone(this.data); 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) { foreach ($alignments as $alignment) {
$this->fillFieldInMetadataDialogAndSubmit('attributes[data-align]', $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); $selector = sprintf('drupal-media[data-align="%s"] .caption-drupal-media.align-%s', $alignment, $alignment);
$this->assertNotEmpty($assert_session->waitForElementVisible('css', $selector, 2000)); $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 // Assert that the resultant downcast drupal-media element has the proper
// `data-align` attribute. // `data-align` attribute.
$this->pressEditorButton('source'); $this->pressEditorButton('source');