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

Commit f12a75b

Browse files
adamwojsandrerom
adamwojs
authored and
andrerom
committed
EZP-28953: RichText editor's toolbox obscures the preceding paragraph's content (#962)
* EZP-28953: RichText editor's toolbox obscures the preceding paragraph's content * fixup! EZP-28953: RichText editor's toolbox obscures the preceding paragraph's content * fixup! EZP-28953: RichText editor's toolbox obscures the preceding paragraph's content * fixup! EZP-28953: RichText editor's toolbox obscures the preceding paragraph's content * fixup! EZP-28953: RichText editor's toolbox obscures the preceding paragraph's content * fixup! EZP-28953: RichText editor's toolbox obscures the preceding paragraph's content * fixup! EZP-28953: RichText editor's toolbox obscures the preceding paragraph's content * fixup! EZP-28953: RichText editor's toolbox obscures the preceding paragraph's content * fixup! EZP-28953: RichText editor's toolbox obscures the preceding paragraph's content * fixup! EZP-28953: RichText editor's toolbox obscures the preceding paragraph's content
1 parent ea19286 commit f12a75b

File tree

13 files changed

+198
-30
lines changed

13 files changed

+198
-30
lines changed

‎Resources/config/yui.yml‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,11 +30,14 @@ system:
3030
ez-alloyeditor-toolbar-config-block-base:
3131
requires: ['ez-alloyeditor']
3232
path: "%ez_platformui.public_dir%/js/alloyeditor/toolbars/config/block-base.js"
33+
ez-alloyeditor-toolbar-config-block-floating-base:
34+
requires: ['ez-alloyeditor']
35+
path: "%ez_platformui.public_dir%/js/alloyeditor/toolbars/config/block-floating-base.js"
3336
ez-alloyeditor-toolbar-config-heading:
34-
requires: ['ez-alloyeditor', 'ez-alloyeditor-toolbar-config-block-base', 'ez-translator']
37+
requires: ['ez-alloyeditor', 'ez-alloyeditor-toolbar-config-block-floating-base', 'ez-translator']
3538
path: "%ez_platformui.public_dir%/js/alloyeditor/toolbars/config/heading.js"
3639
ez-alloyeditor-toolbar-config-paragraph:
37-
requires: ['ez-alloyeditor', 'ez-alloyeditor-toolbar-config-block-base', 'ez-translator']
40+
requires: ['ez-alloyeditor', 'ez-alloyeditor-toolbar-config-block-floating-base', 'ez-translator']
3841
path: "%ez_platformui.public_dir%/js/alloyeditor/toolbars/config/paragraph.js"
3942
ez-alloyeditor-toolbar-config-embed:
4043
requires: ['ez-alloyeditor', 'ez-alloyeditor-toolbar-config-block-base']
@@ -63,6 +66,9 @@ system:
6366
ez-alloyeditor-plugin-focusblock:
6467
requires: ['ez-alloyeditor']
6568
path: "%ez_platformui.public_dir%/js/alloyeditor/plugins/focusblock.js"
69+
ez-alloyeditor-plugin-floatingtoolbar:
70+
requires: ['ez-alloyeditor']
71+
path: "%ez_platformui.public_dir%/js/alloyeditor/plugins/floatingtoolbar.js"
6672
ez-alloyeditor-plugin-paste:
6773
requires: ['ez-alloyeditor']
6874
path: "%ez_platformui.public_dir%/js/alloyeditor/plugins/paste.js"
@@ -932,6 +938,7 @@ system:
932938
- 'ez-alloyeditor-plugin-removeblock'
933939
- 'ez-alloyeditor-plugin-moveelement'
934940
- 'ez-alloyeditor-plugin-focusblock'
941+
- 'ez-alloyeditor-plugin-floatingtoolbar'
935942
- 'ez-alloyeditor-plugin-paste'
936943
- 'ez-alloyeditor-plugin-yui3'
937944
- 'ez-alloyeditor-toolbar-ezadd'

‎Resources/public/css/alloyeditor/general.css‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,30 @@
33
* For full copyright and license information view LICENSE file distributed with this source code.
44
*/
55

6+
.ez-view-richtexteditview .ez-richtext-editor {
7+
padding: 0 .5em;
8+
}
9+
610
.ae-toolbar-add,
711
.ae-toolbar,
812
.ae-toolbar-styles {
913
z-index: 1200;
1014
}
1115

12-
.ae-ui .ae-arrow-box.ae-arrow-box-bottom.ez-ae-arrow-box-left:after {
13-
left: -75%;
16+
.ae-ui .ae-arrow-box:after {
17+
display: none;
18+
}
19+
20+
.ae-ui .ae-toolbar, .ae-ui [class^="ae-toolbar-"] {
21+
margin-top: .3em;
22+
padding: 0;
23+
}
24+
25+
.ae-ui .ae-toolbar-styles {
26+
margin-top: -.3em;
27+
}
28+
29+
.ae-ui .ae-toolbar-floating-fixed {
30+
position: fixed;
31+
margin: .5em 0 0 .5em;
1432
}

‎Resources/public/css/theme/alloyeditor/general.css‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,13 @@
44
*/
55

66
[class*="ae-icon-"], [class*=" ae-icon-"] {
7-
font-size: 18px;
7+
font-size: 1.2em;
88
}
99

1010
.ae-ui [class^=ae-toolbar] {
1111
border: 1px solid #333;
1212
}
13+
14+
.ae-ui .ae-toolbar-add .ae-button-add .ae-icon-add {
15+
font-size: 1.2em;
16+
}

‎Resources/public/js/alloyeditor/plugins/floatingtoolbar.js‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
/*
2+
* Copyright (C) eZ Systems AS. All rights reserved.
3+
* For full copyright and license information view LICENSE file distributed with this source code.
4+
*/
5+
/* global CKEDITOR */
6+
YUI.add('ez-alloyeditor-plugin-floatingtoolbar', function (Y) {
7+
'use strict';
8+
9+
if (CKEDITOR.plugins.get('ezfloatingtoolbar')) {
10+
return;
11+
}
12+
13+
var FLOATING_TOOLBAR_SELECTOR = '.ae-toolbar-floating',
14+
FLOATING_TOOLBAR_FIXED_CLASS = 'ae-toolbar-floating-fixed';
15+
16+
function findScrollParent(editor) {
17+
var container = editor.closest('.ez-main-content');
18+
19+
if (window.getComputedStyle(container).getPropertyValue('overflow') === 'auto') {
20+
return container;
21+
}
22+
23+
return window;
24+
}
25+
26+
function findFocusedEditor() {
27+
for (var name in CKEDITOR.instances) {
28+
if (CKEDITOR.instances[name].focusManager.hasFocus) {
29+
return CKEDITOR.instances[name];
30+
}
31+
}
32+
33+
return null;
34+
}
35+
36+
function scrollHandler () {
37+
var toolbar = document.querySelector(FLOATING_TOOLBAR_SELECTOR),
38+
editor = findFocusedEditor(),
39+
editorRect,
40+
top;
41+
42+
if (!toolbar || !editor) {
43+
return;
44+
}
45+
46+
editorRect = editor.element.getClientRect();
47+
top = editorRect.top < 0 ? 0 : editorRect.top + editor.element.getWindow().getScrollPosition().y - toolbar.getBoundingClientRect().height;
48+
toolbar.style.top = top + 'px';
49+
toolbar.classList.toggle(FLOATING_TOOLBAR_FIXED_CLASS, editorRect.top < 0);
50+
}
51+
52+
/**
53+
* CKEditor plugin to handle pin/unpin the floating toolbars on scrolling in viewport.
54+
*
55+
* @class ezfloatingtoolbar
56+
* @namespace CKEDITOR.plugins
57+
* @constructor
58+
*/
59+
CKEDITOR.plugins.add('ezfloatingtoolbar', {
60+
init: function (editor) {
61+
findScrollParent(editor.element.$).addEventListener('scroll', scrollHandler);
62+
},
63+
});
64+
});
65+

‎Resources/public/js/alloyeditor/toolbars/config/block-floating-base.js‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
/*
2+
* Copyright (C) eZ Systems AS. All rights reserved.
3+
* For full copyright and license information view LICENSE file distributed with this source code.
4+
*/
5+
/* global CKEDITOR */
6+
YUI.add('ez-alloyeditor-toolbar-config-block-floating-base', function (Y) {
7+
'use strict';
8+
/**
9+
* Provides base methods to toolbar dedicated to block element (heading,
10+
* paragraph, ...).
11+
*
12+
* @module ez-alloyeditor-toolbar-config-block-floating-base
13+
*/
14+
Y.namespace('eZ.AlloyEditorToolbarConfig');
15+
16+
var ReactDOM = window.ReactDOM,
17+
FLOATING_TOOLBAR_FIXED_CLASS = 'ae-toolbar-floating-fixed';
18+
19+
function setPositionFor (toolbar, block, editor) {
20+
var editorRect = editor.element.getClientRect(),
21+
top = editorRect.top < 0 ? 0 : editorRect.top + editor.element.getWindow().getScrollPosition().y - toolbar.getClientRect().height;
22+
23+
toolbar.setStyle('left', editorRect.left + 'px');
24+
toolbar.setStyle('top', top + 'px');
25+
toolbar[editorRect.top < 0 ? 'addClass' : 'removeClass'](FLOATING_TOOLBAR_FIXED_CLASS);
26+
27+
return true;
28+
}
29+
30+
Y.eZ.AlloyEditorToolbarConfig.BlockFloatingBase = {
31+
/**
32+
* Returns the arrow box classes for the toolbar. The toolbar is
33+
* always positioned above its related block and has a special class to
34+
* move its tail on the left.
35+
*
36+
* @method getArrowBoxClasses
37+
* @return {String}
38+
*/
39+
getArrowBoxClasses: function () {
40+
return 'ae-toolbar-floating ae-arrow-box ae-arrow-box-bottom ez-ae-arrow-box-left';
41+
},
42+
43+
/**
44+
* Sets the position of the toolbar. It overrides the default styles
45+
* toolbar positioning to position the toolbar just above its related
46+
* block element. The related block element is the block indicated in
47+
* CKEditor's path or the target of the editorEvent event.
48+
*
49+
* @method setPosition
50+
* @param {Object} payload
51+
* @param {AlloyEditor.Core} payload.editor
52+
* @param {Object} payload.selectionData
53+
* @param {Object} payload.editorEvent
54+
* @return {Boolean} true if the method was able to position the
55+
* toolbar
56+
*/
57+
setPosition: function (payload) {
58+
var editor = payload.editor.get('nativeEditor'),
59+
block = editor.elementPath().block,
60+
toolbar = new CKEDITOR.dom.element(ReactDOM.findDOMNode(this));
61+
62+
if (!block) {
63+
block = new CKEDITOR.dom.element(payload.editorEvent.data.nativeEvent.target);
64+
}
65+
66+
return setPositionFor(toolbar, block, editor);
67+
},
68+
};
69+
});

‎Resources/public/js/alloyeditor/toolbars/config/heading.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ YUI.add('ez-alloyeditor-toolbar-config-heading', function (Y) {
1111
*/
1212
Y.namespace('eZ.AlloyEditorToolbarConfig');
1313

14-
var BlockBase = Y.eZ.AlloyEditorToolbarConfig.BlockBase,
14+
var BlockFloatingBase = Y.eZ.AlloyEditorToolbarConfig.BlockFloatingBase,
1515
HeadingConfig,
1616
name = 'heading',
1717
getStyles = function () {
@@ -68,9 +68,9 @@ YUI.add('ez-alloyeditor-toolbar-config-heading', function (Y) {
6868
);
6969
};
7070

71-
this.getArrowBoxClasses = BlockBase.getArrowBoxClasses;
71+
this.getArrowBoxClasses = BlockFloatingBase.getArrowBoxClasses;
7272

73-
this.setPosition = BlockBase.setPosition;
73+
this.setPosition = BlockFloatingBase.setPosition;
7474
};
7575

7676
/**
@@ -81,7 +81,7 @@ YUI.add('ez-alloyeditor-toolbar-config-heading', function (Y) {
8181
* @namespace eZ.AlloyEditorToolbarConfig
8282
* @class HeadingConfig
8383
* @constructor
84-
* @extends BlockBase
84+
* @extends BlockFloatingBase
8585
*/
8686
Y.eZ.AlloyEditorToolbarConfig.HeadingConfig = HeadingConfig;
8787

@@ -95,7 +95,7 @@ YUI.add('ez-alloyeditor-toolbar-config-heading', function (Y) {
9595
* @namespace eZ.AlloyEditorToolbarConfig
9696
* @class Heading
9797
* @deprecated
98-
* @extends BlockBase
98+
* @extends BlockFloatingBase
9999
*/
100100
Y.eZ.AlloyEditorToolbarConfig.Heading = {
101101
name: name,
@@ -133,8 +133,8 @@ YUI.add('ez-alloyeditor-toolbar-config-heading', function (Y) {
133133
);
134134
},
135135

136-
getArrowBoxClasses: BlockBase.getArrowBoxClasses,
136+
getArrowBoxClasses: BlockFloatingBase.getArrowBoxClasses,
137137

138-
setPosition: BlockBase.setPosition,
138+
setPosition: BlockFloatingBase.setPosition,
139139
};
140140
});

‎Resources/public/js/alloyeditor/toolbars/config/paragraph.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ YUI.add('ez-alloyeditor-toolbar-config-paragraph', function (Y) {
1111
*/
1212
Y.namespace('eZ.AlloyEditorToolbarConfig');
1313

14-
var BlockBase = Y.eZ.AlloyEditorToolbarConfig.BlockBase,
14+
var BlockFloatingBase = Y.eZ.AlloyEditorToolbarConfig.BlockFloatingBase,
1515
ParagraphConfig,
1616
name = 'paragraph',
1717
getStyles = function () {
@@ -68,9 +68,9 @@ YUI.add('ez-alloyeditor-toolbar-config-paragraph', function (Y) {
6868
);
6969
};
7070

71-
this.getArrowBoxClasses = BlockBase.getArrowBoxClasses;
71+
this.getArrowBoxClasses = BlockFloatingBase.getArrowBoxClasses;
7272

73-
this.setPosition = BlockBase.setPosition;
73+
this.setPosition = BlockFloatingBase.setPosition;
7474
};
7575

7676
/*
@@ -95,7 +95,7 @@ YUI.add('ez-alloyeditor-toolbar-config-paragraph', function (Y) {
9595
* @namespace eZ.AlloyEditorToolbarConfig
9696
* @deprecated
9797
* @class Paragraph
98-
* @extends BlockBase
98+
* @extends BlockFloatingBase
9999
*/
100100
Y.eZ.AlloyEditorToolbarConfig.Paragraph = {
101101
name: name,
@@ -134,8 +134,8 @@ YUI.add('ez-alloyeditor-toolbar-config-paragraph', function (Y) {
134134
);
135135
},
136136

137-
getArrowBoxClasses: BlockBase.getArrowBoxClasses,
137+
getArrowBoxClasses: BlockFloatingBase.getArrowBoxClasses,
138138

139-
setPosition: BlockBase.setPosition,
139+
setPosition: BlockFloatingBase.setPosition,
140140
};
141141
});

‎Resources/public/js/views/fields/ez-richtext-editview.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -157,7 +157,7 @@ YUI.add('ez-richtext-editview', function (Y) {
157157
var editor, nativeEd, valid, setEditorFocused, unsetEditorFocused,
158158
extraPlugins = [
159159
'ezaddcontent', 'widget', 'ezembed', 'ezremoveblock',
160-
'ezfocusblock', 'yui3', 'ezpaste', 'ezmoveelement',
160+
'ezfocusblock', 'ezfloatingtoolbar', 'yui3', 'ezpaste', 'ezmoveelement',
161161
];
162162

163163
if (this.get('isNotTranslatable')) {

‎Tests/js/alloyeditor/toolbars/config/assets/ez-alloyeditor-toolbar-config-heading-tests.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,16 @@
44
*/
55
YUI.add('ez-alloyeditor-toolbar-config-heading-tests', function (Y) {
66
var defineTest, testTest,
7-
BlockBase = Y.eZ.AlloyEditorToolbarConfig.BlockBase,
7+
BlockFloatingBase = Y.eZ.AlloyEditorToolbarConfig.BlockFloatingBase,
88
Assert = Y.Assert, Mock = Y.Mock;
99

1010
defineTest = new Y.Test.Case(Y.merge(Y.eZ.Test.ToolbarConfigDefineTest, {
1111
name: 'eZ AlloyEditor heading config toolbar define test',
1212
toolbarConfig: new Y.eZ.AlloyEditorToolbarConfig.HeadingConfig(),
1313
toolbarConfigName: "heading",
1414
methods: {
15-
getArrowBoxClasses: BlockBase.getArrowBoxClasses,
16-
setPosition: BlockBase.setPosition,
15+
getArrowBoxClasses: BlockFloatingBase.getArrowBoxClasses,
16+
setPosition: BlockFloatingBase.setPosition,
1717
},
1818

1919
_should: {

‎Tests/js/alloyeditor/toolbars/config/assets/ez-alloyeditor-toolbar-config-paragraph-tests.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,16 @@
44
*/
55
YUI.add('ez-alloyeditor-toolbar-config-paragraph-tests', function (Y) {
66
var defineTest, testTest,
7-
BlockBase = Y.eZ.AlloyEditorToolbarConfig.BlockBase,
7+
BlockFloatingBase = Y.eZ.AlloyEditorToolbarConfig.BlockFloatingBase,
88
Assert = Y.Assert, Mock = Y.Mock;
99

1010
defineTest = new Y.Test.Case(Y.merge(Y.eZ.Test.ToolbarConfigDefineTest, {
1111
name: 'eZ AlloyEditor paragraph config toolbar define test',
1212
toolbarConfig: new Y.eZ.AlloyEditorToolbarConfig.ParagraphConfig(),
1313
toolbarConfigName: "paragraph",
1414
methods: {
15-
getArrowBoxClasses: BlockBase.getArrowBoxClasses,
16-
setPosition: BlockBase.setPosition,
15+
getArrowBoxClasses: BlockFloatingBase.getArrowBoxClasses,
16+
setPosition: BlockFloatingBase.setPosition,
1717
},
1818

1919
_should: {

0 commit comments

Comments
 (0)