8
0
Pārlūkot izejas kodu

Merge pull request #35 from ckeditor/t/34

t/34: Refactoring in ClassicEditor classes and tests.
Piotrek Koszuliński 9 gadi atpakaļ
vecāks
revīzija
1037bbbfad

+ 3 - 8
packages/ckeditor5-editor-classic/src/classic.js

@@ -4,12 +4,8 @@
  */
 
 import StandardEditor from '../core/editor/standardeditor.js';
-
 import HtmlDataProcessor from '../engine/dataprocessor/htmldataprocessor.js';
-
-import ClassicEditorUI from './classiceditorui.js';
-import BoxedEditorUIView from '../ui/editorui/boxed/boxededitoruiview.js';
-
+import ClassicEditorUIView from './classiceditoruiview.js';
 import ElementReplacer from '../utils/elementreplacer.js';
 
 /**
@@ -36,8 +32,7 @@ export default class ClassicEditor extends StandardEditor {
 
 		this.data.processor = new HtmlDataProcessor();
 
-		this.ui = new ClassicEditorUI( this );
-		this.ui.view = new BoxedEditorUIView( this.locale );
+		this.ui = new ClassicEditorUIView( this, this.locale );
 
 		/**
 		 * The element replacer instance used to hide the editor element.
@@ -88,7 +83,7 @@ export default class ClassicEditor extends StandardEditor {
 
 			resolve(
 				editor.initPlugins()
-					.then( () => editor._elementReplacer.replace( element, editor.ui.view.element ) )
+					.then( () => editor._elementReplacer.replace( element, editor.ui.element ) )
 					.then( () => editor.ui.init() )
 					.then( () => editor.editing.view.attachDomRoot( editor.ui.editableElement ) )
 					.then( () => editor.loadDataFromEditorElement() )

+ 0 - 106
packages/ckeditor5-editor-classic/src/classiceditorui.js

@@ -1,106 +0,0 @@
-/**
- * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-import BoxedEditorUI from '../ui/editorui/boxed/boxededitorui.js';
-
-import EditableUI from '../ui/editableui/editableui.js';
-import InlineEditableUIView from '../ui/editableui/inline/inlineeditableuiview.js';
-
-import Model from '../ui/model.js';
-import StickyToolbar from '../ui/bindings/stickytoolbar.js';
-import StickyToolbarView from '../ui/toolbar/sticky/stickytoolbarview.js';
-
-/**
- * Classic editor UI. Uses inline editable and sticky toolbar, all
- * enclosed in a boxed UI.
- *
- * @memberOf editor-classic
- * @extends ui.editorUI.boxed.BoxedEditorUI
- */
-export default class ClassicEditorUI extends BoxedEditorUI {
-	/**
-	 * Creates an instance of the classic editor UI.
-	 *
-	 * @param {core.editor.Editor} editor
-	 */
-	constructor( editor ) {
-		super( editor );
-
-		/**
-		 * Toolbar controller.
-		 *
-		 * @readonly
-		 * @member {ui.toolbar.Toolbar} editor-classic.ClassicEditorUI#toolbar
-		 */
-		this.toolbar = this._createToolbar();
-
-		/**
-		 * Editable UI controller.
-		 *
-		 * @readonly
-		 * @member {ui.editableUI.EditableUI} editor-classic.ClassicEditorUI#editable
-		 */
-		this.editable = this._createEditableUI();
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	init() {
-		this.toolbar.model.set( 'limiterElement', this.editor.ui.view.element );
-
-		return super.init();
-	}
-
-	/**
-	 * The editing host.
-	 *
-	 * @readonly
-	 * @type {HTMLElement}
-	 */
-	get editableElement() {
-		return this.editable.view.element;
-	}
-
-	/**
-	 * Creates the sticky toolbar of the editor.
-	 *
-	 * @protected
-	 * @returns {ui.toolbar.Toolbar}
-	 */
-	_createToolbar() {
-		const editor = this.editor;
-		const model = new Model( {
-			config: this.editor.config.get( 'toolbar' )
-		} );
-
-		model.bind( 'isActive' ).to( editor.focusTracker, 'isFocused' );
-
-		const toolbar = new StickyToolbar( model, new StickyToolbarView( editor.locale ), editor );
-		this.add( 'top', toolbar );
-
-		return toolbar;
-	}
-
-	/**
-	 * Creates the main editable of the editor and registers it in {@link core.editor.Editor#focusTracker}.
-	 *
-	 * @protected
-	 * @returns {ui.editableUI.EditableUI}
-	 */
-	_createEditableUI() {
-		const editor = this.editor;
-
-		const editable = editor.editing.view.getRoot();
-		const editableUI = new EditableUI( editable, new InlineEditableUIView( editor.locale ), editor );
-
-		this.add( 'main', editableUI );
-
-		// @TODO: Do it automatically ckeditor5-core#23
-		editor.focusTracker.add( editableUI.view.element );
-
-		return editableUI;
-	}
-}

+ 108 - 0
packages/ckeditor5-editor-classic/src/classiceditoruiview.js

@@ -0,0 +1,108 @@
+/**
+ * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+import BoxedEditorUIView from '../ui/editorui/boxed/boxededitoruiview.js';
+import InlineEditableUIView from '../ui/editableui/inline/inlineeditableuiview.js';
+import StickyToolbarView from '../ui/toolbar/sticky/stickytoolbarview.js';
+
+/**
+ * Classic editor UI view. Uses inline editable and sticky toolbar, all
+ * enclosed in a boxed UI view.
+ *
+ * @memberOf editor-classic
+ * @extends ui.editorUI.boxed.BoxedEditorUIView
+ */
+export default class ClassicEditorUIView extends BoxedEditorUIView {
+	/**
+	 * Creates an instance of the classic editor UI.
+	 *
+	 * @param {core.editor.Editor} editor
+	 */
+	constructor( editor, locale ) {
+		super( editor, locale );
+
+		/**
+		 * Toolbar view.
+		 *
+		 * @readonly
+		 * @member {ui.toolbar.ToolbarView} editor-classic.ClassicEditorUI#toolbar
+		 */
+		this.toolbar = this._createToolbar();
+
+		/**
+		 * Editable UI view.
+		 *
+		 * @readonly
+		 * @member {ui.editableUI.EditableUIView} editor-classic.ClassicEditorUI#editable
+		 */
+		this.editable = this._createEditableUIView( editor );
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	init() {
+		this.toolbar.limiterElement = this.element;
+
+		const toolbarConfig = this.editor.config.get( 'toolbar' );
+
+		if ( toolbarConfig ) {
+			for ( let name of toolbarConfig ) {
+				this.toolbar.items.add( this.featureComponents.create( name ) );
+			}
+		}
+
+		return super.init();
+	}
+
+	/**
+	 * The editing host element, {@link editor-classic.ClassicEditorUI#editable}.
+	 *
+	 * @readonly
+	 * @type {HTMLElement}
+	 */
+	get editableElement() {
+		return this.editable.element;
+	}
+
+	/**
+	 * Creates the sticky toolbar view of the editor.
+	 *
+	 * @protected
+	 * @returns {ui.stickyToolbar.StickyToolbarView}
+	 */
+	_createToolbar() {
+		const editor = this.editor;
+		const toolbar = new StickyToolbarView( editor.locale );
+
+		toolbar.bind( 'isActive' ).to( editor.focusTracker, 'isFocused' );
+		this.top.add( toolbar );
+
+		return toolbar;
+	}
+
+	/**
+	 * Creates the main editable view of the editor and registers it
+	 * in {@link core.editor.Editor#focusTracker}.
+	 *
+	 * @protected
+	 * @returns {ui.editableUI.EditableUIView}
+	 */
+	_createEditableUIView() {
+		const editor = this.editor;
+		const editable = editor.editing.view.getRoot();
+		const editableUIView = new InlineEditableUIView( editor.locale );
+
+		editableUIView.bind( 'isReadOnly', 'isFocused' ).to( editable );
+		editableUIView.name = editable.rootName;
+
+		this.main.add( editableUIView );
+
+		// @TODO: Do it automatically ckeditor5-core#23
+		editor.focusTracker.add( editableUIView.element );
+
+		return editableUIView;
+	}
+}

+ 4 - 6
packages/ckeditor5-editor-classic/tests/classic.js

@@ -6,8 +6,7 @@
 /* globals document */
 /* bender-tags: editor, browser-only */
 
-import ClassicEditorUI from 'ckeditor5/editor-classic/classiceditorui.js';
-import BoxedEditorUIView from 'ckeditor5/ui/editorui/boxed/boxededitoruiview.js';
+import ClassicEditorUIView from 'ckeditor5/editor-classic/classiceditoruiview.js';
 
 import HtmlDataProcessor from 'ckeditor5/engine/dataprocessor/htmldataprocessor.js';
 
@@ -49,8 +48,7 @@ describe( 'ClassicEditor', () => {
 		} );
 
 		it( 'creates the UI using BoxedEditorUI classes', () => {
-			expect( editor.ui ).to.be.instanceof( ClassicEditorUI );
-			expect( editor.ui.view ).to.be.instanceof( BoxedEditorUIView );
+			expect( editor.ui ).to.be.instanceof( ClassicEditorUIView );
 		} );
 
 		it( 'uses HTMLDataProcessor', () => {
@@ -73,11 +71,11 @@ describe( 'ClassicEditor', () => {
 		} );
 
 		it( 'inserts editor UI next to editor element', () => {
-			expect( editor.ui.view.element.previousSibling ).to.equal( editorElement );
+			expect( editor.ui.element.previousSibling ).to.equal( editorElement );
 		} );
 
 		it( 'attaches editable UI as view\'s DOM root', () => {
-			expect( editor.editing.view.getDomRoot() ).to.equal( editor.ui.editable.view.element );
+			expect( editor.editing.view.getDomRoot() ).to.equal( editor.ui.editable.element );
 		} );
 
 		it( 'loads data from the editor element', () => {

+ 0 - 105
packages/ckeditor5-editor-classic/tests/classiceditorui.js

@@ -1,105 +0,0 @@
-/**
- * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-/* globals document, Event */
-/* bender-tags: editor, browser-only */
-
-import ClassicEditorUI from 'ckeditor5/editor-classic/classiceditorui.js';
-import BoxedEditorUIView from 'ckeditor5/ui/editorui/boxed/boxededitoruiview.js';
-
-import Model from 'ckeditor5/ui/model.js';
-import Button from 'ckeditor5/ui/button/button.js';
-import ButtonView from 'ckeditor5/ui/button/buttonview.js';
-
-import Toolbar from 'ckeditor5/ui/toolbar/toolbar.js';
-import StickyToolbarView from 'ckeditor5/ui/toolbar/sticky/stickytoolbarview.js';
-
-import EditableUI from 'ckeditor5/ui/editableui/editableui.js';
-import InlineEditableUIView from 'ckeditor5/ui/editableui/inline/inlineeditableuiview.js';
-
-import ClassicTestEditor from 'tests/core/_utils/classictesteditor.js';
-
-describe( 'ClassicEditorUI', () => {
-	let editorElement, editor, editorUI;
-
-	beforeEach( () => {
-		editorElement = document.createElement( 'div' );
-		document.body.appendChild( editorElement );
-
-		editor = new ClassicTestEditor( editorElement, {
-			toolbar: [ 'foo', 'bar' ]
-		} );
-
-		editor.ui = editorUI = new ClassicEditorUI( editor );
-		editorUI.view = new BoxedEditorUIView( editor.locale );
-
-		editorUI.featureComponents.add( 'foo', Button, ButtonView, new Model( {} ) );
-		editorUI.featureComponents.add( 'bar', Button, ButtonView, new Model( {} ) );
-	} );
-
-	describe( 'constructor()', () => {
-		it( 'creates toolbar', () => {
-			expect( editorUI.toolbar ).to.be.instanceof( Toolbar );
-			expect( editorUI.toolbar.view ).to.be.instanceof( StickyToolbarView );
-		} );
-
-		it( 'binds editorUI.toolbar#model to editor.focusTracker', () => {
-			expect( editorUI.toolbar.model.isActive ).to.false;
-
-			editor.focusTracker.isFocused = true;
-
-			expect( editorUI.toolbar.model.isActive ).to.true;
-		} );
-
-		it( 'creates editable', () => {
-			expect( editorUI.editable ).to.be.instanceof( EditableUI );
-			expect( editorUI.editable.view ).to.be.instanceof( InlineEditableUIView );
-		} );
-
-		it( 'registers editable element in editor Focus Tracker', () => {
-			return editorUI.init()
-				.then( () => {
-					editor.focusTracker.isFocused = false;
-
-					editorUI.editable.view.element.dispatchEvent( new Event( 'focus' ) );
-
-					expect( editor.focusTracker.isFocused ).to.true;
-				} );
-		} );
-	} );
-
-	describe( 'editableElement', () => {
-		it( 'returns editable\'s view element', () => {
-			document.body.appendChild( editorUI.view.element );
-
-			return editorUI.init()
-				.then( () => {
-					expect( editorUI.editableElement.getAttribute( 'contentEditable' ) ).to.equal( 'true' );
-				} );
-		} );
-	} );
-
-	describe( 'init', () => {
-		it( 'returns a promise', () => {
-			document.body.appendChild( editorUI.view.element );
-
-			expect( editorUI.init() ).to.be.instanceof( Promise );
-		} );
-
-		it( 'sets toolbar.model#limiterElement', ( done ) => {
-			editorUI.init().then( () => {
-				expect( editorUI.toolbar.model.limiterElement ).to.equal( editorUI.view.element );
-
-				done();
-			} );
-		} );
-	} );
-
-	describe( '_createToolbar', () => {
-		it( 'passes toolbar config to the model', () => {
-			expect( editorUI.toolbar.model.config ).to.have.members( [ 'foo', 'bar' ] );
-		} );
-	} );
-} );

+ 136 - 0
packages/ckeditor5-editor-classic/tests/classiceditoruiview.js

@@ -0,0 +1,136 @@
+/**
+ * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals document, Event */
+/* bender-tags: editor, browser-only */
+
+import ClassicEditorUIView from 'ckeditor5/editor-classic/classiceditoruiview.js';
+import ClassicTestEditor from 'tests/core/_utils/classictesteditor.js';
+
+import View from 'ckeditor5/ui/view.js';
+import StickyToolbarView from 'ckeditor5/ui/toolbar/sticky/stickytoolbarview.js';
+import InlineEditableUIView from 'ckeditor5/ui/editableui/inline/inlineeditableuiview.js';
+
+import testUtils from 'tests/utils/_utils/utils.js';
+
+describe( 'ClassicEditorUIView', () => {
+	let editorElement, editor, editable, view;
+
+	beforeEach( () => {
+		editorElement = document.createElement( 'div' );
+		document.body.appendChild( editorElement );
+
+		editor = new ClassicTestEditor( editorElement, {
+			toolbar: [ 'foo', 'bar' ]
+		} );
+
+		editable = editor.editing.view.createRoot( document.createElement( 'div' ) );
+		editor.ui = view = new ClassicEditorUIView( editor, editor.locale );
+
+		function viewCreator( name ) {
+			return ( locale ) => {
+				const view = new View( locale );
+
+				view.name = name;
+
+				return view;
+			};
+		}
+
+		view.featureComponents.add( 'foo', viewCreator( 'foo' ) );
+		view.featureComponents.add( 'bar', viewCreator( 'bar' ) );
+	} );
+
+	describe( 'constructor()', () => {
+		describe( 'toolbar', () => {
+			it( 'creates toolbar', () => {
+				expect( view.toolbar ).to.be.instanceof( StickyToolbarView );
+			} );
+
+			it( 'binds view.toolbar#isFocused to editor#focusTracker', () => {
+				editor.focusTracker.isFocused = false;
+				expect( view.toolbar.isActive ).to.false;
+
+				editor.focusTracker.isFocused = true;
+				expect( view.toolbar.isActive ).to.true;
+			} );
+		} );
+
+		describe( 'editable', () => {
+			it( 'creates view#editable', () => {
+				expect( view.editable ).to.be.instanceof( InlineEditableUIView );
+			} );
+
+			it( 'registers editable#element in editor focus tracker', () => {
+				return view.init()
+					.then( () => {
+						editor.focusTracker.isFocused = false;
+
+						view.editable.element.dispatchEvent( new Event( 'focus' ) );
+						expect( editor.focusTracker.isFocused ).to.true;
+					} );
+			} );
+
+			it( 'sets view.editable#name', () => {
+				expect( view.editable.name ).to.equal( editable.rootName );
+			} );
+
+			it( 'binds view.editable#isFocused', () => {
+				testUtils.assertBinding(
+					view.editable,
+					{ isFocused: false },
+					[
+						[ editable, { isFocused: true } ]
+					],
+					{ isFocused: true }
+				);
+			} );
+
+			it( 'binds view.editable#isReadOnly', () => {
+				testUtils.assertBinding(
+					view.editable,
+					{ isReadOnly: false },
+					[
+						[ editable, { isReadOnly: true } ]
+					],
+					{ isReadOnly: true }
+				);
+			} );
+		} );
+	} );
+
+	describe( 'editableElement', () => {
+		it( 'returns editable\'s view element', () => {
+			document.body.appendChild( view.element );
+
+			return view.init()
+				.then( () => {
+					expect( view.editableElement.getAttribute( 'contentEditable' ) ).to.equal( 'true' );
+				} );
+		} );
+	} );
+
+	describe( 'init', () => {
+		it( 'returns a promise', () => {
+			document.body.appendChild( view.element );
+
+			expect( view.init() ).to.be.instanceof( Promise );
+		} );
+
+		it( 'sets view.toolbar#limiterElement', () => {
+			return view.init().then( () => {
+				expect( view.toolbar.limiterElement ).to.equal( view.element );
+			} );
+		} );
+
+		it( 'fills view.toolbar#items with editor config', () => {
+			return view.init().then( () => {
+				expect( view.toolbar.items ).to.have.length( 2 );
+				expect( view.toolbar.items.get( 0 ).name ).to.equal( 'foo' );
+				expect( view.toolbar.items.get( 1 ).name ).to.equal( 'bar' );
+			} );
+		} );
+	} );
+} );