Skip to content
This repository has been archived by the owner on May 3, 2022. It is now read-only.

Commit

Permalink
Merge pull request #406 from ezsystems/ezp-24971_remaining_focused_class
Browse files Browse the repository at this point in the history 
Fix EZP-24971: Remaining is-block-focused class in the saved richtext html
  • Loading branch information
@dpobel
dpobel committed Oct 26, 2015
2 parents 7d3918a + fb3670a commit c7ff34b
Show file tree
Hide file tree
Showing 3 changed files with 124 additions and 23 deletions.
28 changes: 27 additions & 1 deletion Resources/public/js/alloyeditor/plugins/focusblock.js
View file
Expand Up @@ -15,7 +15,7 @@ YUI.add('ez-alloyeditor-plugin-focusblock', function (Y) {
function findFocusedBlock(editor) {
return editor.element.findOne('.' + FOCUSED_CLASS);
}

function updateFocusedBlock(e) {
var block = e.data.path.block,
oldBlock = findFocusedBlock(e.editor);
Expand All @@ -36,6 +36,31 @@ YUI.add('ez-alloyeditor-plugin-focusblock', function (Y) {
}
}

function clearFocusedBlockFromData(e) {
var doc = document.createDocumentFragment(),
root, element, list, i;

root = document.createElement('div');
doc.appendChild(root);
root.innerHTML = e.data.dataValue;
list = root.querySelectorAll('.' + FOCUSED_CLASS);
if ( list.length ) {
for (i = 0; i != list.length; ++i) {
element = list[i];

element.classList.remove(FOCUSED_CLASS);
// Workaround to https://jira.ez.no/browse/EZP-25028
// RichText xhtml5edit parser does not accept empty class
// attributes...
// @TODO remove once fixed.
if ( !element.getAttribute('class') ) {
element.removeAttribute('class');
}
}
e.data.dataValue = root.innerHTML;
}
}

/**
* CKEditor plugin to add/remove the focused class on the block holding the
* caret.
Expand All @@ -47,6 +72,7 @@ YUI.add('ez-alloyeditor-plugin-focusblock', function (Y) {
init: function (editor) {
editor.on('selectionChange', updateFocusedBlock);
editor.on('blur', clearFocusedBlock);
editor.on('getData', clearFocusedBlockFromData);
},
});
});
94 changes: 76 additions & 18 deletions Tests/js/alloyeditor/plugins/assets/ez-alloyeditor-plugin-focusblock-tests.js
View file
Expand Up @@ -4,7 +4,7 @@
*/
/* global CKEDITOR, AlloyEditor */
YUI.add('ez-alloyeditor-plugin-focusblock-tests', function (Y) {
var definePluginTest, selectionChangeTest, blurTest,
var definePluginTest, selectionChangeTest, blurTest, getDataTest,
Assert = Y.Assert, Mock = Y.Mock;

definePluginTest = new Y.Test.Case({
Expand Down Expand Up @@ -41,8 +41,9 @@ YUI.add('ez-alloyeditor-plugin-focusblock-tests', function (Y) {

CKEDITOR.plugins.addExternal('lineutils', '../../../lineutils/');
CKEDITOR.plugins.addExternal('widget', '../../../widget/');
this.container = Y.one('.container-selectionchange');
this.editor = AlloyEditor.editable(
Y.one('.container').getDOMNode(), {
this.container.getDOMNode(), {
extraPlugins: AlloyEditor.Core.ATTRS.extraPlugins.value + ',ezfocusblock,widget,ezembed',
}
);
Expand All @@ -53,9 +54,6 @@ YUI.add('ez-alloyeditor-plugin-focusblock-tests', function (Y) {

destroy: function () {
this.editor.destroy();
Y.one('.container').all('.is-block-focused').each(function (node) {
node.removeClass('is-block-focused');
});
},

_moveCaretToElement: function (editor, element) {
Expand All @@ -71,7 +69,7 @@ YUI.add('ez-alloyeditor-plugin-focusblock-tests', function (Y) {
this._moveCaretToElement(editor, editor.element.findOne('blockquote'));

Assert.isTrue(
Y.one('blockquote').hasClass('is-block-focused'),
this.container.one('blockquote').hasClass('is-block-focused'),
"The blockquote should have the focus class"
);
},
Expand All @@ -83,7 +81,7 @@ YUI.add('ez-alloyeditor-plugin-focusblock-tests', function (Y) {
editor.widgets.getByElement(editor.element.findOne('#embed')).focus();

Assert.areEqual(
0, Y.all('.is-block-focused').size(),
0, this.container.all('.is-block-focused').size(),
"No element should have the focused class"
);
},
Expand All @@ -95,11 +93,11 @@ YUI.add('ez-alloyeditor-plugin-focusblock-tests', function (Y) {
this._moveCaretToElement(editor, editor.element.findOne('p'));

Assert.isFalse(
Y.one('blockquote').hasClass('is-block-focused'),
this.container.one('blockquote').hasClass('is-block-focused'),
"The blockquote should NOT have the focus class"
);
Assert.isTrue(
Y.one('p').hasClass('is-block-focused'),
this.container.one('p').hasClass('is-block-focused'),
"The p should have the focus class"
);
},
Expand All @@ -111,8 +109,9 @@ YUI.add('ez-alloyeditor-plugin-focusblock-tests', function (Y) {
"async:init": function () {
var startTest = this.callback();

this.container = Y.one('.container-blur');
this.editor = AlloyEditor.editable(
Y.one('.container').getDOMNode(), {
this.container.getDOMNode(), {
extraPlugins: AlloyEditor.Core.ATTRS.extraPlugins.value + ',ezfocusblock',
}
);
Expand All @@ -123,41 +122,100 @@ YUI.add('ez-alloyeditor-plugin-focusblock-tests', function (Y) {

destroy: function () {
this.editor.destroy();
Y.one('.container').all('.is-block-focused').each(function (node) {
node.removeClass('is-block-focused');
});
},

"Should remove the focus block class": function () {
var editor = this.editor.get('nativeEditor');

Y.one('blockquote').addClass('is-block-focused');
this.container.one('blockquote').addClass('is-block-focused');
editor.fire('blur');
Assert.isFalse(
Y.one('blockquote').hasClass('is-block-focused'),
this.container.one('blockquote').hasClass('is-block-focused'),
"The blockquote should NOT have the focus class"
);
Assert.isFalse(
Y.one('p').hasClass('is-block-focused'),
this.container.one('p').hasClass('is-block-focused'),
"The p should NOT have the focus class"
);
},

"Should handle no focus block case": function () {
this.editor.get('nativeEditor').fire('blur');
Assert.isFalse(
Y.one('blockquote').hasClass('is-block-focused'),
this.container.one('blockquote').hasClass('is-block-focused'),
"The blockquote should NOT have the focus class"
);
Assert.isFalse(
Y.one('p').hasClass('is-block-focused'),
this.container.one('p').hasClass('is-block-focused'),
"The p should NOT have the focus class"
);
},
});

getDataTest = new Y.Test.Case({
name: "eZ AlloyEditor focusblock plugin getData event test",

"async:init": function () {
var startTest = this.callback();

this.editor = AlloyEditor.editable(
Y.one('.container-getdata').getDOMNode(), {
extraPlugins: AlloyEditor.Core.ATTRS.extraPlugins.value + ',ezfocusblock',
}
);
this.editor.get('nativeEditor').on('instanceReady', function () {
startTest();
});
},

destroy: function () {
this.editor.destroy();
},

_moveCaretToElement: function (editor, element) {
var range = editor.createRange();

range.moveToPosition(element, CKEDITOR.POSITION_AFTER_START);
editor.getSelection().selectRanges([range]);
},

"Should remove the focus block class": function () {
var content, editor = this.editor.get('nativeEditor');

this._moveCaretToElement(editor, editor.element.findOne('#additional-classes'));

content = Y.Node.create(editor.getData());
Assert.areEqual(
0, content.all('.is-focused-block').size(),
"The is-focused-block class should be removed"
);
Assert.isTrue(
content.one('#additional-classes').hasClass('additional'),
"The others classes should be kept"
);
},

"Should remove the empty class attribute": function () {
// test of the workaround to https://jira.ez.no/browse/EZP-25028
var content, editor = this.editor.get('nativeEditor');

this._moveCaretToElement(editor, editor.element.findOne('#only-focusedblock'));

content = Y.Node.create(editor.getData());
Assert.areEqual(
0, content.all('[class=""]').size(),
"The empty class attribute should be removed"
);
},

"Should handle an invalid DOM structure": function () {
this.editor.get('nativeEditor').fire('getData', {data: {dataValue: '<invalid></xml>'}});
},
});

Y.Test.Runner.setName("eZ AlloyEditor focusblock plugin tests");
Y.Test.Runner.add(definePluginTest);
Y.Test.Runner.add(selectionChangeTest);
Y.Test.Runner.add(blurTest);
Y.Test.Runner.add(getDataTest);
}, '', {requires: ['test', 'node', 'ez-alloyeditor-plugin-embed', 'ez-alloyeditor-plugin-focusblock']});
25 changes: 21 additions & 4 deletions Tests/js/alloyeditor/plugins/ez-alloyeditor-plugin-focusblock.html
View file
Expand Up @@ -6,10 +6,27 @@
</head>
<body>

<div class="container">
<blockquote>I thought of that while riding my bike.</blockquote>
<p>Albert Einstein On the Theory of Relativity.</p>
<div id="embed" data-ezelement="ezembed">Embed</div>
<div class="container-selectionchange">
<section>
<blockquote>I thought of that while riding my bike.</blockquote>
<p>Albert Einstein On the Theory of Relativity.</p>
<div id="embed" data-ezelement="ezembed">Embed</div>
</section>
</div>

<div class="container-blur">
<section>
<blockquote>I thought of that while riding my bike.</blockquote>
<p>Albert Einstein On the Theory of Relativity.</p>
</section>
</div>


<div class="container-getdata">
<section>
<blockquote id="only-focusedblock">I thought of that while riding my bike.</blockquote>
<p id="additional-classes" class="additional">Albert Einstein On the Theory of Relativity.</p>
</section>
</div>

<script type="text/javascript" src="../../assets/function.bind.polyfill.js"></script>
Expand Down

0 comments on commit c7ff34b

Please sign in to comment.