forked from ezsystems/PlatformUIBundle
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
EZP-28953: RichText editor's toolbox obscures the preceding paragraph…
…'s content (ezsystems#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
- Loading branch information
Showing
13 changed files
with
198 additions
and
30 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
65 changes: 65 additions & 0 deletions
65
Resources/public/js/alloyeditor/plugins/floatingtoolbar.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| /* | ||
| * Copyright (C) eZ Systems AS. All rights reserved. | ||
| * For full copyright and license information view LICENSE file distributed with this source code. | ||
| */ | ||
| /* global CKEDITOR */ | ||
| YUI.add('ez-alloyeditor-plugin-floatingtoolbar', function (Y) { | ||
| 'use strict'; | ||
|
|
||
| if (CKEDITOR.plugins.get('ezfloatingtoolbar')) { | ||
| return; | ||
| } | ||
|
|
||
| var FLOATING_TOOLBAR_SELECTOR = '.ae-toolbar-floating', | ||
| FLOATING_TOOLBAR_FIXED_CLASS = 'ae-toolbar-floating-fixed'; | ||
|
|
||
| function findScrollParent(editor) { | ||
| var container = editor.closest('.ez-main-content'); | ||
|
|
||
| if (window.getComputedStyle(container).getPropertyValue('overflow') === 'auto') { | ||
| return container; | ||
| } | ||
|
|
||
| return window; | ||
| } | ||
|
|
||
| function findFocusedEditor() { | ||
| for (var name in CKEDITOR.instances) { | ||
| if (CKEDITOR.instances[name].focusManager.hasFocus) { | ||
| return CKEDITOR.instances[name]; | ||
| } | ||
| } | ||
|
|
||
| return null; | ||
| } | ||
|
|
||
| function scrollHandler () { | ||
| var toolbar = document.querySelector(FLOATING_TOOLBAR_SELECTOR), | ||
| editor = findFocusedEditor(), | ||
| editorRect, | ||
| top; | ||
|
|
||
| if (!toolbar || !editor) { | ||
| return; | ||
| } | ||
|
|
||
| editorRect = editor.element.getClientRect(); | ||
| top = editorRect.top < 0 ? 0 : editorRect.top + editor.element.getWindow().getScrollPosition().y - toolbar.getBoundingClientRect().height; | ||
| toolbar.style.top = top + 'px'; | ||
| toolbar.classList.toggle(FLOATING_TOOLBAR_FIXED_CLASS, editorRect.top < 0); | ||
| } | ||
|
|
||
| /** | ||
| * CKEditor plugin to handle pin/unpin the floating toolbars on scrolling in viewport. | ||
| * | ||
| * @class ezfloatingtoolbar | ||
| * @namespace CKEDITOR.plugins | ||
| * @constructor | ||
| */ | ||
| CKEDITOR.plugins.add('ezfloatingtoolbar', { | ||
| init: function (editor) { | ||
| findScrollParent(editor.element.$).addEventListener('scroll', scrollHandler); | ||
| }, | ||
| }); | ||
| }); | ||
|
|
69 changes: 69 additions & 0 deletions
69
Resources/public/js/alloyeditor/toolbars/config/block-floating-base.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| /* | ||
| * Copyright (C) eZ Systems AS. All rights reserved. | ||
| * For full copyright and license information view LICENSE file distributed with this source code. | ||
| */ | ||
| /* global CKEDITOR */ | ||
| YUI.add('ez-alloyeditor-toolbar-config-block-floating-base', function (Y) { | ||
| 'use strict'; | ||
| /** | ||
| * Provides base methods to toolbar dedicated to block element (heading, | ||
| * paragraph, ...). | ||
| * | ||
| * @module ez-alloyeditor-toolbar-config-block-floating-base | ||
| */ | ||
| Y.namespace('eZ.AlloyEditorToolbarConfig'); | ||
|
|
||
| var ReactDOM = window.ReactDOM, | ||
| FLOATING_TOOLBAR_FIXED_CLASS = 'ae-toolbar-floating-fixed'; | ||
|
|
||
| function setPositionFor (toolbar, block, editor) { | ||
| var editorRect = editor.element.getClientRect(), | ||
| top = editorRect.top < 0 ? 0 : editorRect.top + editor.element.getWindow().getScrollPosition().y - toolbar.getClientRect().height; | ||
|
|
||
| toolbar.setStyle('left', editorRect.left + 'px'); | ||
| toolbar.setStyle('top', top + 'px'); | ||
| toolbar[editorRect.top < 0 ? 'addClass' : 'removeClass'](FLOATING_TOOLBAR_FIXED_CLASS); | ||
|
|
||
| return true; | ||
| } | ||
|
|
||
| Y.eZ.AlloyEditorToolbarConfig.BlockFloatingBase = { | ||
| /** | ||
| * Returns the arrow box classes for the toolbar. The toolbar is | ||
| * always positioned above its related block and has a special class to | ||
| * move its tail on the left. | ||
| * | ||
| * @method getArrowBoxClasses | ||
| * @return {String} | ||
| */ | ||
| getArrowBoxClasses: function () { | ||
| return 'ae-toolbar-floating ae-arrow-box ae-arrow-box-bottom ez-ae-arrow-box-left'; | ||
| }, | ||
|
|
||
| /** | ||
| * Sets the position of the toolbar. It overrides the default styles | ||
| * toolbar positioning to position the toolbar just above its related | ||
| * block element. The related block element is the block indicated in | ||
| * CKEditor's path or the target of the editorEvent event. | ||
| * | ||
| * @method setPosition | ||
| * @param {Object} payload | ||
| * @param {AlloyEditor.Core} payload.editor | ||
| * @param {Object} payload.selectionData | ||
| * @param {Object} payload.editorEvent | ||
| * @return {Boolean} true if the method was able to position the | ||
| * toolbar | ||
| */ | ||
| setPosition: function (payload) { | ||
| var editor = payload.editor.get('nativeEditor'), | ||
| block = editor.elementPath().block, | ||
| toolbar = new CKEDITOR.dom.element(ReactDOM.findDOMNode(this)); | ||
|
|
||
| if (!block) { | ||
| block = new CKEDITOR.dom.element(payload.editorEvent.data.nativeEvent.target); | ||
| } | ||
|
|
||
| return setPositionFor(toolbar, block, editor); | ||
| }, | ||
| }; | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.