瀏覽代碼

Aligner ClassicEditor package to the changes in View (View#render, refactored StickyToolbarView).

Aleksander Nowodzinski 8 年之前
父節點
當前提交
91a51bbaf9

+ 2 - 2
packages/ckeditor5-editor-classic/src/classiceditor.js

@@ -128,9 +128,9 @@ export default class ClassicEditor extends StandardEditor {
 
 			resolve(
 				editor.initPlugins()
-					.then( () => editor._elementReplacer.replace( element, editor.ui.view.element ) )
+					.then( () => editor.ui.init() )
 					.then( () => {
-						editor.ui.init();
+						editor._elementReplacer.replace( element, editor.ui.view.element );
 						editor.fire( 'uiReady' );
 					} )
 					.then( () => editor.editing.view.attachDomRoot( editor.ui.view.editableElement ) )

+ 10 - 12
packages/ckeditor5-editor-classic/src/classiceditorui.js

@@ -52,10 +52,16 @@ export default class ClassicEditorUI {
 		 * @private
 		 */
 		this._toolbarConfig = normalizeToolbarConfig( editor.config.get( 'toolbar' ) );
+	}
+
+	/**
+	 * Initializes the UI.
+	 */
+	init() {
+		const editor = this.editor;
+		const view = this.view;
 
-		// Set–up the view.
-		view.set( 'width', editor.config.get( 'ui.width' ) );
-		view.set( 'height', editor.config.get( 'ui.height' ) );
+		view.render();
 
 		// Set–up the sticky panel with toolbar.
 		view.stickyPanel.bind( 'isActive' ).to( this.focusTracker, 'isFocused' );
@@ -70,16 +76,8 @@ export default class ClassicEditorUI {
 		view.editable.bind( 'isReadOnly' ).to( editingRoot );
 		view.editable.bind( 'isFocused' ).to( editor.editing.view );
 		view.editable.name = editingRoot.rootName;
-		this.focusTracker.add( view.editableElement );
-	}
-
-	/**
-	 * Initializes the UI.
-	 */
-	init() {
-		const editor = this.editor;
 
-		this.view.init();
+		this.focusTracker.add( this.view.editableElement );
 
 		if ( this._toolbarConfig ) {
 			this.view.toolbar.fillFromConfig( this._toolbarConfig.items, this.componentFactory );

+ 11 - 5
packages/ckeditor5-editor-classic/src/classiceditoruiview.js

@@ -11,7 +11,6 @@ import BoxedEditorUIView from '@ckeditor/ckeditor5-ui/src/editorui/boxed/boxeded
 import InlineEditableUIView from '@ckeditor/ckeditor5-ui/src/editableui/inline/inlineeditableuiview';
 import StickyPanelView from '@ckeditor/ckeditor5-ui/src/panel/sticky/stickypanelview';
 import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview';
-import Template from '@ckeditor/ckeditor5-ui/src/template';
 
 /**
  * Classic editor UI view. Uses an inline editable and a sticky toolbar, all
@@ -45,15 +44,12 @@ export default class ClassicEditorUIView extends BoxedEditorUIView {
 		 */
 		this.toolbar = new ToolbarView( locale );
 
-		Template.extend( this.toolbar.template, {
+		this.toolbar.extendTemplate( {
 			attributes: {
 				class: 'ck-editor-toolbar'
 			}
 		} );
 
-		// Set toolbar as a child of a stickyPanel and makes toolbar sticky.
-		this.stickyPanel.content.add( this.toolbar );
-
 		/**
 		 * Editable UI view.
 		 *
@@ -61,6 +57,16 @@ export default class ClassicEditorUIView extends BoxedEditorUIView {
 		 * @member {module:ui/editableui/inline/inlineeditableuiview~InlineEditableUIView}
 		 */
 		this.editable = new InlineEditableUIView( locale );
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	render() {
+		super.render();
+
+		// Set toolbar as a child of a stickyPanel and makes toolbar sticky.
+		this.stickyPanel.content.add( this.toolbar );
 
 		this.top.add( this.stickyPanel );
 		this.main.add( this.editable );

+ 28 - 20
packages/ckeditor5-editor-classic/tests/classiceditor.js

@@ -39,27 +39,33 @@ describe( 'ClassicEditor', () => {
 			editor = new ClassicEditor( editorElement );
 		} );
 
-		it( 'creates a single div editable root in the view', () => {
-			expect( editor.editing.view.getRoot() ).to.have.property( 'name', 'div' );
-		} );
-
 		it( 'creates a single document root', () => {
 			expect( count( editor.document.getRootNames() ) ).to.equal( 1 );
 			expect( editor.document.getRoot() ).to.have.property( 'name', '$root' );
 		} );
 
-		it( 'creates the UI using BoxedEditorUI classes', () => {
-			expect( editor.ui ).to.be.instanceof( ClassicEditorUI );
-			expect( editor.ui.view ).to.be.instanceof( ClassicEditorUIView );
-		} );
-
 		it( 'uses HTMLDataProcessor', () => {
 			expect( editor.data.processor ).to.be.instanceof( HtmlDataProcessor );
 		} );
+
+		describe( 'ui', () => {
+			it( 'creates a single div editable root in the view', () => {
+				editor.ui.init();
+
+				expect( editor.editing.view.getRoot() ).to.have.property( 'name', 'div' );
+
+				editor.ui.destroy();
+			} );
+
+			it( 'creates the UI using BoxedEditorUI classes', () => {
+				expect( editor.ui ).to.be.instanceof( ClassicEditorUI );
+				expect( editor.ui.view ).to.be.instanceof( ClassicEditorUIView );
+			} );
+		} );
 	} );
 
 	describe( 'create()', () => {
-		beforeEach( function() {
+		beforeEach( () => {
 			return ClassicEditor
 				.create( editorElement, {
 					plugins: [ Paragraph, Bold ]
@@ -77,14 +83,6 @@ describe( 'ClassicEditor', () => {
 			expect( editor ).to.be.instanceof( ClassicEditor );
 		} );
 
-		it( 'inserts editor UI next to editor element', () => {
-			expect( editor.ui.view.element.previousSibling ).to.equal( editorElement );
-		} );
-
-		it( 'attaches editable UI as view\'s DOM root', () => {
-			expect( editor.editing.view.getDomRoot() ).to.equal( editor.ui.view.editable.element );
-		} );
-
 		it( 'loads data from the editor element', () => {
 			expect( editor.getData() ).to.equal( '<p><strong>foo</strong> bar</p>' );
 		} );
@@ -106,6 +104,16 @@ describe( 'ClassicEditor', () => {
 					return newEditor.destroy();
 				} );
 		} );
+
+		describe( 'ui', () => {
+			it( 'inserts editor UI next to editor element', () => {
+				expect( editor.ui.view.element.previousSibling ).to.equal( editorElement );
+			} );
+
+			it( 'attaches editable UI as view\'s DOM root', () => {
+				expect( editor.editing.view.getDomRoot() ).to.equal( editor.ui.view.editable.element );
+			} );
+		} );
 	} );
 
 	describe( 'create - events', () => {
@@ -162,13 +170,13 @@ describe( 'ClassicEditor', () => {
 				} );
 		} );
 
-		it( 'fires uiReady once UI is ready', () => {
+		it( 'fires uiReady once UI is rendered', () => {
 			let isReady;
 
 			class EventWatcher extends Plugin {
 				init() {
 					this.editor.on( 'uiReady', () => {
-						isReady = this.editor.ui.view.ready;
+						isReady = this.editor.ui.view.isRendered;
 					} );
 				}
 			}

+ 81 - 62
packages/ckeditor5-editor-classic/tests/classiceditorui.js

@@ -8,9 +8,9 @@
 import ComponentFactory from '@ckeditor/ckeditor5-ui/src/componentfactory';
 import View from '@ckeditor/ckeditor5-ui/src/view';
 
+import VirtualTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/virtualtesteditor';
 import ClassicEditorUI from '../src/classiceditorui';
 import ClassicEditorUIView from '../src/classiceditoruiview';
-import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor';
 
 import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
 
@@ -21,14 +21,11 @@ import utils from '@ckeditor/ckeditor5-utils/tests/_utils/utils';
 testUtils.createSinonSandbox();
 
 describe( 'ClassicEditorUI', () => {
-	let editorElement, editor, editable, view, ui;
+	let editor, view, ui;
 
 	beforeEach( () => {
-		editorElement = document.createElement( 'div' );
-		document.body.appendChild( editorElement );
-
-		return ClassicTestEditor
-			.create( editorElement, {
+		return VirtualTestEditor
+			.create( {
 				toolbar: [ 'foo', 'bar' ],
 				ui: {
 					width: 100,
@@ -40,16 +37,16 @@ describe( 'ClassicEditorUI', () => {
 
 				view = new ClassicEditorUIView( editor.locale );
 				ui = new ClassicEditorUI( editor, view );
-				editable = editor.editing.view.getRoot();
 
 				ui.componentFactory.add( 'foo', viewCreator( 'foo' ) );
 				ui.componentFactory.add( 'bar', viewCreator( 'bar' ) );
+
+				ui.init();
 			} );
 	} );
 
 	afterEach( () => {
-		editorElement.remove();
-
+		ui.destroy();
 		editor.destroy();
 	} );
 
@@ -69,10 +66,23 @@ describe( 'ClassicEditorUI', () => {
 		it( 'creates #focusTracker', () => {
 			expect( ui.focusTracker ).to.be.instanceOf( FocusTracker );
 		} );
+	} );
+
+	describe( 'init()', () => {
+		it( 'renders the #view', () => {
+			return VirtualTestEditor.create()
+				.then( editor => {
+					const view = new ClassicEditorUIView( editor.locale );
+					const ui = new ClassicEditorUI( editor, view );
+					const spy = sinon.spy( view, 'render' );
+
+					ui.init();
+					sinon.assert.calledOnce( spy );
+
+					ui.destroy();
 
-		it( 'sets view#width and view#height', () => {
-			expect( view.width ).to.equal( 100 );
-			expect( view.height ).to.equal( 200 );
+					return editor.destroy();
+				} );
 		} );
 
 		describe( 'stickyPanel', () => {
@@ -93,23 +103,21 @@ describe( 'ClassicEditorUI', () => {
 			} );
 
 			it( 'sets view.stickyPanel#viewportTopOffset, when specified in the config', () => {
-				editorElement = document.createElement( 'div' );
-				document.body.appendChild( editorElement );
-
-				return ClassicTestEditor
-					.create( editorElement, {
+				return VirtualTestEditor
+					.create( {
 						toolbar: {
 							viewportTopOffset: 100
 						}
 					} )
 					.then( editor => {
-						view = new ClassicEditorUIView( editor.locale );
-						ui = new ClassicEditorUI( editor, view );
-						editable = editor.editing.view.getRoot();
+						const view = new ClassicEditorUIView( editor.locale );
+						const ui = new ClassicEditorUI( editor, view );
 
+						ui.init();
 						expect( view.stickyPanel.viewportTopOffset ).to.equal( 100 );
 
-						editorElement.remove();
+						ui.destroy();
+
 						return editor.destroy();
 					} );
 			} );
@@ -124,6 +132,8 @@ describe( 'ClassicEditorUI', () => {
 			} );
 
 			it( 'sets view.editable#name', () => {
+				const editable = editor.editing.view.getRoot();
+
 				expect( view.editable.name ).to.equal( editable.rootName );
 			} );
 
@@ -139,6 +149,8 @@ describe( 'ClassicEditorUI', () => {
 			} );
 
 			it( 'binds view.editable#isReadOnly', () => {
+				const editable = editor.editing.view.getRoot();
+
 				utils.assertBinding(
 					view.editable,
 					{ isReadOnly: false },
@@ -149,84 +161,91 @@ describe( 'ClassicEditorUI', () => {
 				);
 			} );
 		} );
-	} );
 
-	describe( 'init()', () => {
-		afterEach( () => {
-			ui.destroy();
-		} );
+		describe( 'view.toolbar#items', () => {
+			it( 'are filled with the config.toolbar (specified as an Array)', () => {
+				return VirtualTestEditor
+					.create( {
+						toolbar: [ 'foo', 'bar' ]
+					} )
+					.then( editor => {
+						const view = new ClassicEditorUIView( editor.locale );
+						const ui = new ClassicEditorUI( editor, view );
+						const spy = testUtils.sinon.spy( view.toolbar, 'fillFromConfig' );
 
-		it( 'initializes the #view', () => {
-			const spy = sinon.spy( view, 'init' );
+						ui.componentFactory.add( 'foo', viewCreator( 'foo' ) );
+						ui.componentFactory.add( 'bar', viewCreator( 'bar' ) );
 
-			ui.init();
-			sinon.assert.calledOnce( spy );
-		} );
+						ui.init();
+						sinon.assert.calledWithExactly( spy, editor.config.get( 'toolbar' ), ui.componentFactory );
 
-		describe( 'view.toolbar#items', () => {
-			it( 'are filled with the config.toolbar (specified as an Array)', () => {
-				const spy = testUtils.sinon.spy( view.toolbar, 'fillFromConfig' );
+						ui.destroy();
 
-				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)', () => {
-				editorElement = document.createElement( 'div' );
-				document.body.appendChild( editorElement );
-
-				return ClassicTestEditor
-					.create( editorElement, {
+				return VirtualTestEditor
+					.create( {
 						toolbar: {
 							items: [ 'foo', 'bar' ],
 							viewportTopOffset: 100
 						}
 					} )
 					.then( editor => {
-						view = new ClassicEditorUIView( editor.locale );
-						ui = new ClassicEditorUI( editor, view );
+						const view = new ClassicEditorUIView( editor.locale );
+						const ui = new ClassicEditorUI( editor, view );
+						const spy = testUtils.sinon.spy( view.toolbar, 'fillFromConfig' );
 
 						ui.componentFactory.add( 'foo', viewCreator( 'foo' ) );
 						ui.componentFactory.add( 'bar', viewCreator( 'bar' ) );
 
-						const spy = testUtils.sinon.spy( view.toolbar, 'fillFromConfig' );
-
 						ui.init();
 						sinon.assert.calledWithExactly( spy,
 							editor.config.get( 'toolbar.items' ),
 							ui.componentFactory
 						);
+
+						ui.destroy();
+
+						return editor.destroy();
 					} );
 			} );
 		} );
 
 		it( 'initializes keyboard navigation between view#toolbar and view#editable', () => {
-			const spy = testUtils.sinon.spy( view.toolbar, 'focus' );
+			return VirtualTestEditor.create()
+				.then( editor => {
+					const view = new ClassicEditorUIView( editor.locale );
+					const ui = new ClassicEditorUI( editor, view );
+					const spy = testUtils.sinon.spy( view.toolbar, 'focus' );
+
+					ui.init();
+
+					ui.focusTracker.isFocused = true;
+					ui.view.toolbar.focusTracker.isFocused = false;
+
+					editor.keystrokes.press( {
+						keyCode: keyCodes.f10,
+						altKey: true,
+						preventDefault: sinon.spy(),
+						stopPropagation: sinon.spy()
+					} );
 
-			ui.init();
-			ui.focusTracker.isFocused = true;
-			ui.view.toolbar.focusTracker.isFocused = false;
+					sinon.assert.calledOnce( spy );
 
-			editor.keystrokes.press( {
-				keyCode: keyCodes.f10,
-				altKey: true,
-				preventDefault: sinon.spy(),
-				stopPropagation: sinon.spy()
-			} );
+					ui.destroy();
 
-			sinon.assert.calledOnce( spy );
+					return editor.destroy();
+				} );
 		} );
 	} );
 
 	describe( 'destroy()', () => {
-		beforeEach( () => {
-			document.body.appendChild( view.element );
-		} );
-
 		it( 'destroys the #view', () => {
 			const spy = sinon.spy( view, 'destroy' );
 
-			ui.init();
 			ui.destroy();
 			sinon.assert.calledOnce( spy );
 		} );

+ 6 - 1
packages/ckeditor5-editor-classic/tests/classiceditoruiview.js

@@ -17,6 +17,11 @@ describe( 'ClassicEditorUIView', () => {
 	beforeEach( () => {
 		locale = new Locale( 'en' );
 		view = new ClassicEditorUIView( locale );
+		view.render();
+	} );
+
+	afterEach( () => {
+		view.destroy();
 	} );
 
 	describe( 'constructor()', () => {
@@ -72,10 +77,10 @@ describe( 'ClassicEditorUIView', () => {
 			document.body.appendChild( view.element );
 
 			view.stickyPanel.limiterElement = view.element;
-			view.init();
 
 			expect( view.editableElement.getAttribute( 'contentEditable' ) ).to.equal( 'true' );
 
+			view.element.remove();
 			view.destroy();
 		} );
 	} );

+ 2 - 0
packages/ckeditor5-editor-classic/tests/manual/classiceditor.js

@@ -53,3 +53,5 @@ function destroyEditor() {
 
 document.getElementById( 'initEditor' ).addEventListener( 'click', initEditor );
 document.getElementById( 'destroyEditor' ).addEventListener( 'click', destroyEditor );
+
+initEditor();

+ 1 - 1
packages/ckeditor5-editor-classic/theme/theme.scss

@@ -23,7 +23,7 @@
 		border-bottom-width: 0;
 	}
 
-	&_sticky {
+	.ck-sticky-panel__content_sticky {
 		.ck-toolbar {
 			border-bottom-width: 1px;