|
@@ -3,19 +3,17 @@
|
|
|
* For licensing, see LICENSE.md.
|
|
* For licensing, see LICENSE.md.
|
|
|
*/
|
|
*/
|
|
|
|
|
|
|
|
-/* global Event */
|
|
|
|
|
-
|
|
|
|
|
import ClassicEditor from 'ckeditor5-editor-classic/src/classic';
|
|
import ClassicEditor from 'ckeditor5-editor-classic/src/classic';
|
|
|
import ImageToolbar from 'ckeditor5-image/src/imagetoolbar';
|
|
import ImageToolbar from 'ckeditor5-image/src/imagetoolbar';
|
|
|
import Image from 'ckeditor5-image/src/image';
|
|
import Image from 'ckeditor5-image/src/image';
|
|
|
import global from 'ckeditor5-utils/src/dom/global';
|
|
import global from 'ckeditor5-utils/src/dom/global';
|
|
|
-import BalloonPanelView from 'ckeditor5-ui/src/balloonpanel/balloonpanelview';
|
|
|
|
|
|
|
+import ImageBalloonPanel from 'ckeditor5-image/src/ui/imageballoonpanel';
|
|
|
import Plugin from 'ckeditor5-core/src/plugin';
|
|
import Plugin from 'ckeditor5-core/src/plugin';
|
|
|
import ButtonView from 'ckeditor5-ui/src/button/buttonview';
|
|
import ButtonView from 'ckeditor5-ui/src/button/buttonview';
|
|
|
import { setData } from 'ckeditor5-engine/src/dev-utils/model';
|
|
import { setData } from 'ckeditor5-engine/src/dev-utils/model';
|
|
|
|
|
|
|
|
describe( 'ImageToolbar', () => {
|
|
describe( 'ImageToolbar', () => {
|
|
|
- let editor, button, editingView, doc, panel;
|
|
|
|
|
|
|
+ let editor, button, editingView, doc, panel, plugin;
|
|
|
|
|
|
|
|
beforeEach( () => {
|
|
beforeEach( () => {
|
|
|
const editorElement = global.document.createElement( 'div' );
|
|
const editorElement = global.document.createElement( 'div' );
|
|
@@ -31,7 +29,8 @@ describe( 'ImageToolbar', () => {
|
|
|
editor = newEditor;
|
|
editor = newEditor;
|
|
|
editingView = editor.editing.view;
|
|
editingView = editor.editing.view;
|
|
|
doc = editor.document;
|
|
doc = editor.document;
|
|
|
- panel = getBalloonPanelView( editor.ui.view.body );
|
|
|
|
|
|
|
+ plugin = editor.plugins.get( ImageToolbar );
|
|
|
|
|
+ panel = plugin._panel;
|
|
|
} );
|
|
} );
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
@@ -55,8 +54,7 @@ describe( 'ImageToolbar', () => {
|
|
|
plugins: [ ImageToolbar ],
|
|
plugins: [ ImageToolbar ],
|
|
|
} )
|
|
} )
|
|
|
.then( newEditor => {
|
|
.then( newEditor => {
|
|
|
- const viewBody = newEditor.ui.view.body;
|
|
|
|
|
- expect( getBalloonPanelView( viewBody ) ).to.be.undefined;
|
|
|
|
|
|
|
+ expect( newEditor.plugins.get( ImageToolbar )._panel ).to.be.undefined;
|
|
|
|
|
|
|
|
newEditor.destroy();
|
|
newEditor.destroy();
|
|
|
} );
|
|
} );
|
|
@@ -70,7 +68,7 @@ describe( 'ImageToolbar', () => {
|
|
|
plugins: [ ImageToolbar, FakeButton, AlterDefaultConfig ]
|
|
plugins: [ ImageToolbar, FakeButton, AlterDefaultConfig ]
|
|
|
} )
|
|
} )
|
|
|
.then( newEditor => {
|
|
.then( newEditor => {
|
|
|
- const panel = getBalloonPanelView( newEditor.ui.view.body );
|
|
|
|
|
|
|
+ const panel = newEditor.plugins.get( ImageToolbar )._panel;
|
|
|
const toolbar = panel.content.get( 0 );
|
|
const toolbar = panel.content.get( 0 );
|
|
|
const button = toolbar.items.get( 0 );
|
|
const button = toolbar.items.get( 0 );
|
|
|
|
|
|
|
@@ -81,95 +79,34 @@ describe( 'ImageToolbar', () => {
|
|
|
} );
|
|
} );
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
- it( 'should add BalloonPanelView to view body', () => {
|
|
|
|
|
- expect( panel ).to.be.instanceOf( BalloonPanelView );
|
|
|
|
|
- } );
|
|
|
|
|
-
|
|
|
|
|
- it( 'should attach toolbar when image is selected', () => {
|
|
|
|
|
- const spy = sinon.spy( panel, 'attachTo' );
|
|
|
|
|
- setData( doc, '[<image src=""></image>]' );
|
|
|
|
|
-
|
|
|
|
|
- testPanelAttach( spy );
|
|
|
|
|
|
|
+ it( 'should add ImageBalloonPanel to view body', () => {
|
|
|
|
|
+ expect( panel ).to.be.instanceOf( ImageBalloonPanel );
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
- it( 'should calculate panel position on scroll event', () => {
|
|
|
|
|
|
|
+ it( 'should show the panel when editor gains focus and image is selected', () => {
|
|
|
setData( doc, '[<image src=""></image>]' );
|
|
setData( doc, '[<image src=""></image>]' );
|
|
|
- const spy = sinon.spy( panel, 'attachTo' );
|
|
|
|
|
-
|
|
|
|
|
- global.window.dispatchEvent( new Event( 'scroll' ) );
|
|
|
|
|
-
|
|
|
|
|
- testPanelAttach( spy );
|
|
|
|
|
- } );
|
|
|
|
|
-
|
|
|
|
|
- it( 'should calculate panel position on resize event', () => {
|
|
|
|
|
- setData( doc, '[<image src=""></image>]' );
|
|
|
|
|
- const spy = sinon.spy( panel, 'attachTo' );
|
|
|
|
|
-
|
|
|
|
|
- global.window.dispatchEvent( new Event( 'resize' ) );
|
|
|
|
|
-
|
|
|
|
|
- testPanelAttach( spy );
|
|
|
|
|
- } );
|
|
|
|
|
-
|
|
|
|
|
- it( 'should not calculate panel position on scroll if no image is selected', () => {
|
|
|
|
|
- setData( doc, '<image src=""></image>' );
|
|
|
|
|
- const spy = sinon.spy( panel, 'attachTo' );
|
|
|
|
|
-
|
|
|
|
|
- global.window.dispatchEvent( new Event( 'scroll' ) );
|
|
|
|
|
|
|
|
|
|
- sinon.assert.notCalled( spy );
|
|
|
|
|
- } );
|
|
|
|
|
-
|
|
|
|
|
- it( 'should not calculate panel position on resize if no image is selected', () => {
|
|
|
|
|
- setData( doc, '<image src=""></image>' );
|
|
|
|
|
- const spy = sinon.spy( panel, 'attachTo' );
|
|
|
|
|
-
|
|
|
|
|
- global.window.dispatchEvent( new Event( 'resize' ) );
|
|
|
|
|
|
|
+ editor.ui.focusTracker.isFocused = false;
|
|
|
|
|
+ const spy = sinon.spy( plugin, 'show' );
|
|
|
|
|
+ editor.ui.focusTracker.isFocused = true;
|
|
|
|
|
|
|
|
- sinon.assert.notCalled( spy );
|
|
|
|
|
|
|
+ sinon.assert.calledOnce( spy );
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
- it( 'should hide the panel when editor looses focus', () => {
|
|
|
|
|
- setData( doc, '[<image src=""></image>]' );
|
|
|
|
|
|
|
+ it( 'should not show the panel when editor looses focus', () => {
|
|
|
editor.ui.focusTracker.isFocused = true;
|
|
editor.ui.focusTracker.isFocused = true;
|
|
|
- const spy = sinon.spy( panel, 'hide' );
|
|
|
|
|
|
|
+ const spy = sinon.spy( plugin, 'show' );
|
|
|
editor.ui.focusTracker.isFocused = false;
|
|
editor.ui.focusTracker.isFocused = false;
|
|
|
|
|
|
|
|
- sinon.assert.calledOnce( spy );
|
|
|
|
|
|
|
+ sinon.assert.notCalled( spy );
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
- // Returns BalloonPanelView from provided collection.
|
|
|
|
|
- function getBalloonPanelView( viewCollection ) {
|
|
|
|
|
- return viewCollection.find( item => item instanceof BalloonPanelView );
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- // Tests if panel.attachTo() was called correctly.
|
|
|
|
|
- function testPanelAttach( spy ) {
|
|
|
|
|
- const domRange = editor.editing.view.domConverter.viewRangeToDom( editingView.selection.getFirstRange() );
|
|
|
|
|
|
|
+ it( 'should detach panel with hide() method', () => {
|
|
|
|
|
+ const spy = sinon.spy( panel, 'detach' );
|
|
|
|
|
+ plugin.hide();
|
|
|
|
|
|
|
|
sinon.assert.calledOnce( spy );
|
|
sinon.assert.calledOnce( spy );
|
|
|
- const options = spy.firstCall.args[ 0 ];
|
|
|
|
|
-
|
|
|
|
|
- // Check if proper range was used.
|
|
|
|
|
- expect( options.target.startContainer ).to.equal( domRange.startContainer );
|
|
|
|
|
- expect( options.target.startOffset ).to.equal( domRange.startOffset );
|
|
|
|
|
- expect( options.target.endContainer ).to.equal( domRange.endContainer );
|
|
|
|
|
- expect( options.target.endOffset ).to.equal( domRange.endOffset );
|
|
|
|
|
-
|
|
|
|
|
- // Check if north/south calculation is correct.
|
|
|
|
|
- const [ north, south ] = options.positions;
|
|
|
|
|
- const targetRect = { top: 10, left: 20, width: 200, height: 100, bottom: 110, right: 220 };
|
|
|
|
|
- const balloonRect = { width: 50, height: 20 };
|
|
|
|
|
-
|
|
|
|
|
- const northPosition = north( targetRect, balloonRect );
|
|
|
|
|
- expect( northPosition.name ).to.equal( 'n' );
|
|
|
|
|
- expect( northPosition.top ).to.equal( targetRect.top - balloonRect.height - BalloonPanelView.arrowVerticalOffset );
|
|
|
|
|
- expect( northPosition.left ).to.equal( targetRect.left + targetRect.width / 2 - balloonRect.width / 2 );
|
|
|
|
|
-
|
|
|
|
|
- const southPosition = south( targetRect, balloonRect );
|
|
|
|
|
- expect( southPosition.name ).to.equal( 's' );
|
|
|
|
|
- expect( southPosition.top ).to.equal( targetRect.bottom + BalloonPanelView.arrowVerticalOffset );
|
|
|
|
|
- expect( southPosition.left ).to.equal( targetRect.left + targetRect.width / 2 - balloonRect.width / 2 );
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ } );
|
|
|
|
|
|
|
|
// Plugin that adds fake_button to editor's component factory.
|
|
// Plugin that adds fake_button to editor's component factory.
|
|
|
class FakeButton extends Plugin {
|
|
class FakeButton extends Plugin {
|