Browse Source

Aligned the editor-inline package to the View#render API.

Aleksander Nowodzinski 8 years ago
parent
commit
58bcc44a34

+ 4 - 3
packages/ckeditor5-editor-inline/src/inlineeditorui.js

@@ -89,18 +89,19 @@ export default class InlineEditorUI {
 	 */
 	init() {
 		const editor = this.editor;
+		const view = this.view;
 
-		this.view.init();
+		view.render();
 
 		if ( this._toolbarConfig ) {
-			this.view.toolbar.fillFromConfig( this._toolbarConfig.items, this.componentFactory );
+			view.toolbar.fillFromConfig( this._toolbarConfig.items, this.componentFactory );
 		}
 
 		enableToolbarKeyboardFocus( {
 			origin: editor.editing.view,
 			originFocusTracker: this.focusTracker,
 			originKeystrokeHandler: editor.keystrokes,
-			toolbar: this.view.toolbar
+			toolbar: view.toolbar
 		} );
 	}
 

+ 5 - 6
packages/ckeditor5-editor-inline/src/inlineeditoruiview.js

@@ -11,7 +11,6 @@ import EditorUIView from '@ckeditor/ckeditor5-ui/src/editorui/editoruiview';
 import InlineEditableUIView from '@ckeditor/ckeditor5-ui/src/editableui/inline/inlineeditableuiview';
 import BalloonPanelView from '@ckeditor/ckeditor5-ui/src/panel/balloon/balloonpanelview';
 import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview';
-import Template from '@ckeditor/ckeditor5-ui/src/template';
 
 /**
  * Inline editor UI view. Uses an nline editable and a floating toolbar.
@@ -50,7 +49,7 @@ export default class InlineEditorUIView extends EditorUIView {
 		 */
 		this.set( 'viewportTopOffset', 0 );
 
-		Template.extend( this.toolbar.template, {
+		this.toolbar.extendTemplate( {
 			attributes: {
 				class: [
 					'ck-editor-toolbar',
@@ -118,7 +117,7 @@ export default class InlineEditorUIView extends EditorUIView {
 		 */
 		this.panelPositions = this._getPanelPositions();
 
-		Template.extend( this.panel.template, {
+		this.panel.extendTemplate( {
 			attributes: {
 				class: 'ck-toolbar-container'
 			}
@@ -133,14 +132,14 @@ export default class InlineEditorUIView extends EditorUIView {
 		this.editable = new InlineEditableUIView( locale, editableElement );
 
 		this.body.add( this.panel );
-		this.addChildren( this.editable );
+		this.registerChildren( this.editable );
 	}
 
 	/**
 	 * @inheritDoc
 	 */
-	init() {
-		super.init();
+	render() {
+		super.render();
 
 		this.panel.content.add( this.toolbar );
 	}

+ 1 - 1
packages/ckeditor5-editor-inline/tests/inlineeditor.js

@@ -179,7 +179,7 @@ describe( 'InlineEditor', () => {
 			class EventWatcher extends Plugin {
 				init() {
 					this.editor.on( 'uiReady', () => {
-						isReady = this.editor.ui.view.ready;
+						isReady = this.editor.ui.view.isRendered;
 					} );
 				}
 			}

+ 96 - 64
packages/ckeditor5-editor-inline/tests/inlineeditorui.js

@@ -21,22 +21,23 @@ import utils from '@ckeditor/ckeditor5-utils/tests/_utils/utils';
 testUtils.createSinonSandbox();
 
 describe( 'InlineEditorUI', () => {
-	let editor, editable, view, ui;
+	let editor, view, ui;
 
 	describe( 'constructor()', () => {
 		beforeEach( () => {
-			return VirtualTestEditor
+			return VirtualInlineTestEditor
 				.create( {
-					toolbar: [ 'foo', 'bar' ]
+					toolbar: [ 'foo', 'bar' ],
 				} )
 				.then( newEditor => {
-					initializeUiAndView( newEditor );
-					ui.init();
+					editor = newEditor;
+
+					ui = editor.ui;
+					view = ui.view;
 				} );
 		} );
 
 		afterEach( () => {
-			ui.destroy();
 			editor.destroy();
 		} );
 
@@ -70,19 +71,17 @@ describe( 'InlineEditorUI', () => {
 			} );
 
 			it( 'sets view#viewportTopOffset, if specified', () => {
-				return VirtualTestEditor
+				return VirtualInlineTestEditor
 					.create( {
 						toolbar: {
 							viewportTopOffset: 100
 						}
 					} )
 					.then( editor => {
-						const view = new InlineEditorUIView( editor.locale );
-						const ui = new InlineEditorUI( editor, view );
+						const ui = editor.ui;
+						const view = ui.view;
 
-						ui.init();
 						expect( view.viewportTopOffset ).to.equal( 100 );
-						ui.destroy();
 
 						return editor.destroy();
 					} );
@@ -109,6 +108,12 @@ describe( 'InlineEditorUI', () => {
 		} );
 
 		describe( 'editable', () => {
+			let editable;
+
+			beforeEach( () => {
+				editable = editor.editing.view.getRoot();
+			} );
+
 			it( 'registers view.editable#element in editor focus tracker', () => {
 				ui.focusTracker.isFocused = false;
 
@@ -146,12 +151,15 @@ describe( 'InlineEditorUI', () => {
 
 	describe( 'init()', () => {
 		beforeEach( () => {
-			return VirtualTestEditor
+			return VirtualInlineTestEditor
 				.create( {
-					toolbar: [ 'foo', 'bar' ]
+					toolbar: [ 'foo', 'bar' ],
 				} )
 				.then( newEditor => {
-					initializeUiAndView( newEditor );
+					editor = newEditor;
+
+					ui = editor.ui;
+					view = ui.view;
 				} );
 		} );
 
@@ -160,40 +168,39 @@ describe( 'InlineEditorUI', () => {
 			editor.destroy();
 		} );
 
-		it( 'initializes the #view', () => {
-			const spy = sinon.spy( view, 'init' );
-
-			ui.init();
-			sinon.assert.calledOnce( spy );
+		it( 'renders the #view', () => {
+			expect( view.isRendered ).to.be.true;
 		} );
 
 		describe( 'view.toolbar#items', () => {
 			it( 'are filled with the config.toolbar (specified as an Array)', () => {
-				const spy = testUtils.sinon.spy( view.toolbar, 'fillFromConfig' );
+				return VirtualInlineTestEditor
+					.create( {
+						toolbar: [ 'foo', 'bar' ]
+					} )
+					.then( editor => {
+						const items = editor.ui.view.toolbar.items;
+
+						expect( items.get( 0 ).name ).to.equal( 'foo' );
+						expect( items.get( 1 ).name ).to.equal( 'bar' );
 
-				ui.init();
-				sinon.assert.calledWithExactly( spy, editor.config.get( 'toolbar' ), ui.componentFactory );
+						return editor.destroy();
+					} );
 			} );
 
 			it( 'are filled with the config.toolbar (specified as an Object)', () => {
-				return VirtualTestEditor
+				return VirtualInlineTestEditor
 					.create( {
 						toolbar: {
 							items: [ 'foo', 'bar' ],
 							viewportTopOffset: 100
 						}
 					} )
-					.then( newEditor => {
-						initializeUiAndView( newEditor );
-
-						const spy = testUtils.sinon.spy( view.toolbar, 'fillFromConfig' );
+					.then( editor => {
+						const items = editor.ui.view.toolbar.items;
 
-						ui.init();
-						sinon.assert.calledWithExactly( spy,
-							editor.config.get( 'toolbar.items' ),
-							ui.componentFactory
-						);
-						ui.destroy();
+						expect( items.get( 0 ).name ).to.equal( 'foo' );
+						expect( items.get( 1 ).name ).to.equal( 'bar' );
 
 						return editor.destroy();
 					} );
@@ -201,49 +208,39 @@ describe( 'InlineEditorUI', () => {
 		} );
 
 		it( 'initializes keyboard navigation between view#toolbar and view#editable', () => {
-			const spy = testUtils.sinon.spy( view.toolbar, 'focus' );
-
-			ui.init();
-			ui.focusTracker.isFocused = true;
-			ui.view.toolbar.focusTracker.isFocused = false;
+			return VirtualInlineTestEditor.create()
+				.then( editor => {
+					const ui = editor.ui;
+					const view = ui.view;
+					const spy = testUtils.sinon.spy( view.toolbar, 'focus' );
+
+					ui.focusTracker.isFocused = true;
+					ui.view.toolbar.focusTracker.isFocused = false;
+
+					editor.keystrokes.press( {
+						keyCode: keyCodes.f10,
+						altKey: true,
+						preventDefault: sinon.spy(),
+						stopPropagation: sinon.spy()
+					} );
 
-			editor.keystrokes.press( {
-				keyCode: keyCodes.f10,
-				altKey: true,
-				preventDefault: sinon.spy(),
-				stopPropagation: sinon.spy()
-			} );
+					sinon.assert.calledOnce( spy );
 
-			sinon.assert.calledOnce( spy );
+					return editor.destroy();
+				} );
 		} );
 	} );
 
 	describe( 'destroy()', () => {
 		it( 'destroys the #view', () => {
-			return VirtualTestEditor.create()
-				.then( editor => {
-					initializeUiAndView( editor );
-
-					const spy = sinon.spy( view, 'destroy' );
+			const spy = sinon.spy( view, 'destroy' );
 
-					ui.init();
-					ui.destroy();
+			return editor.destroy()
+				.then( () => {
 					sinon.assert.calledOnce( spy );
-
-					return editor.destroy();
 				} );
 		} );
 	} );
-
-	function initializeUiAndView( newEditor ) {
-		editor = newEditor;
-		view = new InlineEditorUIView( editor.locale );
-		ui = new InlineEditorUI( editor, view );
-		editable = editor.editing.view.getRoot();
-
-		ui.componentFactory.add( 'foo', viewCreator( 'foo' ) );
-		ui.componentFactory.add( 'bar', viewCreator( 'bar' ) );
-	}
 } );
 
 function viewCreator( name ) {
@@ -256,3 +253,38 @@ function viewCreator( name ) {
 		return view;
 	};
 }
+
+class VirtualInlineTestEditor extends VirtualTestEditor {
+	constructor( config ) {
+		super( config );
+
+		const view = new InlineEditorUIView( this.locale );
+		this.ui = new InlineEditorUI( this, view );
+
+		this.ui.componentFactory.add( 'foo', viewCreator( 'foo' ) );
+		this.ui.componentFactory.add( 'bar', viewCreator( 'bar' ) );
+	}
+
+	destroy() {
+		this.ui.destroy();
+
+		return super.destroy();
+	}
+
+	static create( config ) {
+		return new Promise( resolve => {
+			const editor = new this( config );
+
+			resolve(
+				editor.initPlugins()
+					.then( () => {
+						editor.ui.init();
+						editor.fire( 'uiReady' );
+						editor.fire( 'dataReady' );
+						editor.fire( 'ready' );
+					} )
+					.then( () => editor )
+			);
+		} );
+	}
+}

+ 9 - 3
packages/ckeditor5-editor-inline/tests/inlineeditoruiview.js

@@ -15,6 +15,11 @@ describe( 'InlineEditorUIView', () => {
 	beforeEach( () => {
 		locale = new Locale( 'en' );
 		view = new InlineEditorUIView( locale );
+		view.render();
+	} );
+
+	afterEach( () => {
+		view.destroy();
 	} );
 
 	describe( 'constructor()', () => {
@@ -71,7 +76,6 @@ describe( 'InlineEditorUIView', () => {
 			it( 'is registered as a child', () => {
 				const spy = sinon.spy( view.editable, 'destroy' );
 
-				view.init();
 				view.destroy();
 				sinon.assert.calledOnce( spy );
 			} );
@@ -80,17 +84,19 @@ describe( 'InlineEditorUIView', () => {
 
 	describe( 'init()', () => {
 		it( 'appends #toolbar to panel#content', () => {
+			const view = new InlineEditorUIView( locale );
+
 			expect( view.panel.content ).to.have.length( 0 );
 
-			view.init();
+			view.render();
 			expect( view.panel.content.get( 0 ) ).to.equal( view.toolbar );
+
 			view.destroy();
 		} );
 	} );
 
 	describe( 'editableElement', () => {
 		it( 'returns editable\'s view element', () => {
-			view.init();
 			expect( view.editableElement.getAttribute( 'contentEditable' ) ).to.equal( 'true' );
 			view.destroy();
 		} );