瀏覽代碼

Introduced new names based on a better convention. Merged Chrome with the UI into EditorUI. Pulled out view's creation to parent classes, so views can be easily altered.

Piotrek Koszuliński 10 年之前
父節點
當前提交
3abbe9b788
共有 20 個文件被更改,包括 238 次插入178 次删除
  1. 1 1
      packages/ckeditor5-engine/src/creator.js
  2. 11 3
      packages/ckeditor5-engine/src/editable/editable.js
  3. 0 0
      packages/ckeditor5-engine/src/editable/editableview.js
  4. 32 0
      packages/ckeditor5-engine/src/editorui.js
  5. 0 33
      packages/ckeditor5-engine/src/ui/ui.js
  6. 37 0
      packages/ckeditor5-engine/tests/_utils/ui/boxededitorui/boxededitorui.js
  7. 1 1
      packages/ckeditor5-engine/tests/_utils/ui/boxededitorui/boxededitoruiview.js
  8. 25 0
      packages/ckeditor5-engine/tests/_utils/ui/boxlesseditorui/boxlesseditorui.js
  9. 0 21
      packages/ckeditor5-engine/tests/_utils/ui/chrome/controller.js
  10. 0 22
      packages/ckeditor5-engine/tests/_utils/ui/chromeless/controller.js
  11. 1 4
      packages/ckeditor5-engine/tests/_utils/ui/editable/framed/framededitable.js
  12. 1 1
      packages/ckeditor5-engine/tests/_utils/ui/editable/framed/framededitableview.js
  13. 0 9
      packages/ckeditor5-engine/tests/_utils/ui/editable/inline/inlineeditable.js
  14. 7 1
      packages/ckeditor5-engine/tests/_utils/ui/editable/inline/inlineeditableview.js
  15. 0 41
      packages/ckeditor5-engine/tests/creator/manual/_utils/creator/classic.js
  16. 59 0
      packages/ckeditor5-engine/tests/creator/manual/_utils/creator/classiccreator.js
  17. 0 38
      packages/ckeditor5-engine/tests/creator/manual/_utils/creator/inline.js
  18. 56 0
      packages/ckeditor5-engine/tests/creator/manual/_utils/creator/inlinecreator.js
  19. 6 2
      packages/ckeditor5-engine/tests/creator/manual/creator-classic.js
  20. 1 1
      packages/ckeditor5-engine/tests/creator/manual/creator-inline.js

+ 1 - 1
packages/ckeditor5-engine/src/creator.js

@@ -46,7 +46,7 @@ export default class Creator extends Plugin {
 	 */
 	_replaceElement( newElement ) {
 		if ( !newElement ) {
-			newElement = this.editor.ui.chrome.view.element;
+			newElement = this.editor.ui.view.element;
 		}
 
 		this._elementReplacement = newElement;

+ 11 - 3
packages/ckeditor5-engine/src/editable/editable.js

@@ -11,17 +11,21 @@ import utils from '../utils.js';
 import ObservableMixin from '../observablemixin.js';
 
 /**
+ * @class core.editable.Editable
  * @extends core.ui.Controller
  * @mixins core.ObservableMixin
  */
 export default class Editable extends Controller {
 	/**
 	 * Creates a new instance of the Editable class.
+	 *
 	 * @constructor
 	 */
-	constructor() {
+	constructor( editor ) {
 		super();
 
+		this.editor = editor;
+
 		/**
 		 * Whether the editable is in read-write or read-only mode.
 		 *
@@ -38,16 +42,20 @@ export default class Editable extends Controller {
 		this.set( 'isFocused', false );
 
 		/**
-		 * The parent editable of this editable
+		 * The parent editable of this editable.
 		 *
 		 * @readonly
 		 * @property {Editable} parent
 		 */
 		this.parent = null;
+
+		/**
+		 * @private {Model} _viewModel
+		 */
 	}
 
 	/**
-	 * @protected
+	 * The model for the editable view.
 	 */
 	get viewModel() {
 		if ( this._viewModel ) {

+ 0 - 0
packages/ckeditor5-engine/src/editable/view.js → packages/ckeditor5-engine/src/editable/editableview.js


+ 32 - 0
packages/ckeditor5-engine/src/editorui.js

@@ -0,0 +1,32 @@
+/**
+ * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+'use strict';
+
+import Controller from './ui/controller.js';
+import utils from './utils.js';
+import ObservableMixin from './observablemixin.js';
+
+/**
+ * Base class for the editor main view controllers.
+ *
+ * @class core.EditorUI
+ * @extends core.ui.Controller
+ * @mixins core.ObservableMixin
+ */
+
+export default class EditorUI extends Controller {
+	constructor( editor ) {
+		super();
+
+		/**
+		 * @readonly
+		 * @property {core.Editor}
+		 */
+		this.editor = editor;
+	}
+}
+
+utils.mix( EditorUI, ObservableMixin );

+ 0 - 33
packages/ckeditor5-engine/src/ui/ui.js

@@ -1,33 +0,0 @@
-/**
- * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-'use strict';
-
-import ObservableMixin from '../observablemixin.js';
-import utils from '../utils.js';
-
-export default class Ui {
-	constructor( editor, chrome ) {
-		this.chrome = chrome;
-
-		this.set( 'width', editor.config.width );
-		this.set( 'height', editor.config.height );
-	}
-
-	init() {
-		return this.chrome.init();
-	}
-
-	destroy() {
-		const chrome = this.chrome;
-
-		this.stopListening();
-		this.chrome = null;
-
-		return chrome.destroy();
-	}
-}
-
-utils.mix( Ui, ObservableMixin );

+ 37 - 0
packages/ckeditor5-engine/tests/_utils/ui/boxededitorui/boxededitorui.js

@@ -0,0 +1,37 @@
+/**
+ * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+'use strict';
+
+import EditorUI from '/ckeditor5/core/editorui.js';
+import ControllerCollection from '/ckeditor5/core/ui/controllercollection.js';
+
+export default class BoxedEditorUI extends EditorUI {
+	constructor( editor ) {
+		super( editor );
+
+		this.collections.add( new ControllerCollection( 'main' ) );
+
+		const config = editor.config;
+
+		/**
+		 * @property {Number} width
+		 */
+		this.set( 'width', config.get( 'ui.width' ) );
+
+		/**
+		 * @property {Number} height
+		 */
+		this.set( 'height', config.get( 'ui.height' ) );
+	}
+
+	/**
+	 * @readonly
+	 * @property {Model} viewModel
+	 */
+	get viewModel() {
+		return this;
+	}
+}

+ 1 - 1
packages/ckeditor5-engine/tests/_utils/ui/chrome/view.js → packages/ckeditor5-engine/tests/_utils/ui/boxededitorui/boxededitoruiview.js

@@ -7,7 +7,7 @@
 
 import View from '/ckeditor5/core/ui/view.js';
 
-export default class ChromeView extends View {
+export default class BoxedEditorUIView extends View {
 	constructor( model ) {
 		super( model );
 

+ 25 - 0
packages/ckeditor5-engine/tests/_utils/ui/boxlesseditorui/boxlesseditorui.js

@@ -0,0 +1,25 @@
+/**
+ * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+'use strict';
+
+import EditorUI from '/ckeditor5/core/editorui.js';
+import ControllerCollection from '/ckeditor5/core/ui/controllercollection.js';
+
+export default class BoxlessEditorUI extends EditorUI {
+	constructor( editor ) {
+		super( editor );
+
+		this.collections.add( new ControllerCollection( 'editable' ) );
+	}
+
+	init() {
+		// We cannot register the region earlier because the view is set after classes instantiation.
+		// TODO We can change view property into a setter and create region immediately.
+		this.view.register( 'editable', true );
+
+		return super.init();
+	}
+}

+ 0 - 21
packages/ckeditor5-engine/tests/_utils/ui/chrome/controller.js

@@ -1,21 +0,0 @@
-/**
- * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-'use strict';
-
-import Model from '/ckeditor5/core/ui/model.js';
-import Controller from '/ckeditor5/core/ui/controller.js';
-import ControllerCollection from '/ckeditor5/core/ui/controllercollection.js';
-import ChromeView from './view.js';
-
-export default class ChromeController extends Controller {
-	constructor() {
-		const model = new Model();
-
-		super( model, new ChromeView( model ) );
-
-		this.collections.add( new ControllerCollection( 'main' ) );
-	}
-}

+ 0 - 22
packages/ckeditor5-engine/tests/_utils/ui/chromeless/controller.js

@@ -1,22 +0,0 @@
-/**
- * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-'use strict';
-
-import Model from '/ckeditor5/core/ui/model.js';
-import Controller from '/ckeditor5/core/ui/controller.js';
-import ControllerCollection from '/ckeditor5/core/ui/controllercollection.js';
-import View from '/ckeditor5/core/ui/view.js';
-
-export default class ChromeLessController extends Controller {
-	constructor() {
-		const model = new Model();
-
-		super( model, new View( model ) );
-		this.view.register( 'editable', true );
-
-		this.collections.add( new ControllerCollection( 'editable' ) );
-	}
-}

+ 1 - 4
packages/ckeditor5-engine/tests/_utils/ui/editable/framed/controller.js → packages/ckeditor5-engine/tests/_utils/ui/editable/framed/framededitable.js

@@ -6,14 +6,11 @@
 'use strict';
 
 import Editable from '/ckeditor5/core/editable/editable.js';
-import FramedEditableView from './view.js';
 
 export default class FramedEditable extends Editable {
 	constructor( editor ) {
-		super( FramedEditableView );
+		super( editor );
 
 		this.viewModel.bind( 'width', 'height' ).to( editor.ui );
-
-		this.view = new FramedEditableView( this.viewModel );
 	}
 }

+ 1 - 1
packages/ckeditor5-engine/tests/_utils/ui/editable/framed/view.js → packages/ckeditor5-engine/tests/_utils/ui/editable/framed/framededitableview.js

@@ -5,7 +5,7 @@
 
 'use strict';
 
-import EditableView from '/ckeditor5/core/editable/view.js';
+import EditableView from '/ckeditor5/core/editable/editableview.js';
 
 export default class FramedEditableView extends EditableView {
 	constructor( model ) {

+ 0 - 9
packages/ckeditor5-engine/tests/_utils/ui/editable/inline/controller.js → packages/ckeditor5-engine/tests/_utils/ui/editable/inline/inlineeditable.js

@@ -6,15 +6,6 @@
 'use strict';
 
 import Editable from '/ckeditor5/core/editable/editable.js';
-import InlineEditableView from './view.js';
 
 export default class InlineEditable extends Editable {
-	constructor( editor, editableElement ) {
-		super();
-
-		this.viewModel.bind( 'width', 'height' ).to( editor.ui );
-
-		this.view = new InlineEditableView( this.viewModel );
-		this.view.element = editableElement;
-	}
 }

+ 7 - 1
packages/ckeditor5-engine/tests/_utils/ui/editable/inline/view.js → packages/ckeditor5-engine/tests/_utils/ui/editable/inline/inlineeditableview.js

@@ -5,9 +5,15 @@
 
 'use strict';
 
-import EditableView from '/ckeditor5/core/editable/view.js';
+import EditableView from '/ckeditor5/core/editable/editableview.js';
 
 export default class InlineEditableView extends EditableView {
+	constructor( model, editableElement ) {
+		super( model );
+
+		this.element = editableElement;
+	}
+
 	init() {
 		this.setEditableElement( this.element );
 

+ 0 - 41
packages/ckeditor5-engine/tests/creator/manual/_utils/creator/classic.js

@@ -1,41 +0,0 @@
-/**
- * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-'use strict';
-
-import Creator from '/ckeditor5/core/creator.js';
-import Ui from '/ckeditor5/core/ui/ui.js';
-import Chrome from '/tests/core/_utils/ui/chrome/controller.js';
-import FramedEditable from '/tests/core/_utils/ui/editable/framed/controller.js';
-
-export default class ClassicCreator extends Creator {
-	constructor( editor ) {
-		super( editor );
-
-		editor.ui = new Ui( editor, new Chrome() );
-	}
-
-	create() {
-		this._replaceElement();
-		this._setupEditable();
-
-		return super.create()
-			.then( () => this.loadDataFromEditorElement() );
-	}
-
-	destroy() {
-		this.updateEditorElement();
-
-		return super.destroy();
-	}
-
-	_setupEditable() {
-		const editor = this.editor;
-		const editable = new FramedEditable( editor );
-
-		this.editor.editable = editable;
-		this.editor.ui.chrome.collections.get( 'main' ).add( editable );
-	}
-}

+ 59 - 0
packages/ckeditor5-engine/tests/creator/manual/_utils/creator/classiccreator.js

@@ -0,0 +1,59 @@
+/**
+ * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+'use strict';
+
+import Creator from '/ckeditor5/core/creator.js';
+import BoxedEditorUI from '/tests/core/_utils/ui/boxededitorui/boxededitorui.js';
+import BoxedEditorUIView from '/tests/core/_utils/ui/boxededitorui/boxededitoruiview.js';
+import FramedEditable from '/tests/core/_utils/ui/editable/framed/framededitable.js';
+import FramedEditableView from '/tests/core/_utils/ui/editable/framed/framededitableview.js';
+
+export default class ClassicCreator extends Creator {
+	constructor( editor ) {
+		super( editor );
+
+		editor.ui = this._createEditorUI();
+	}
+
+	create() {
+		this._replaceElement();
+		this._setupEditable();
+
+		return super.create()
+			.then( () => this.loadDataFromEditorElement() );
+	}
+
+	destroy() {
+		this.updateEditorElement();
+
+		return super.destroy();
+	}
+
+	_setupEditable() {
+		const editable = this._createEditable();
+
+		this.editor.editable = editable;
+		this.editor.ui.collections.get( 'main' ).add( editable );
+	}
+
+	_createEditable() {
+		const editable = new FramedEditable( this.editor );
+		const editableView = new FramedEditableView( editable.viewModel );
+
+		editable.view = editableView;
+
+		return editable;
+	}
+
+	_createEditorUI() {
+		const editorUI = new BoxedEditorUI( this.editor );
+		const editorUIView = new BoxedEditorUIView( editorUI.viewModel );
+
+		editorUI.view = editorUIView;
+
+		return editorUI;
+	}
+}

+ 0 - 38
packages/ckeditor5-engine/tests/creator/manual/_utils/creator/inline.js

@@ -1,38 +0,0 @@
-/**
- * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-'use strict';
-
-import Creator from '/ckeditor5/core/creator.js';
-import Ui from '/ckeditor5/core/ui/ui.js';
-import ChromeLess from '/tests/core/_utils/ui/chromeless/controller.js';
-import InlineEditable from '/tests/core/_utils/ui/editable/inline/controller.js';
-
-export default class InlineCreator extends Creator {
-	constructor( editor ) {
-		super( editor );
-
-		editor.ui = new Ui( editor, new ChromeLess() );
-	}
-
-	create() {
-		this._setupEditable();
-
-		return super.create()
-			.then( () => this.loadDataFromEditorElement() );
-	}
-
-	destroy() {
-		this.updateEditorElement();
-
-		return super.destroy();
-	}
-
-	_setupEditable() {
-		this.editor.editable = new InlineEditable( this.editor, this.editor.element );
-
-		this.editor.ui.chrome.collections.get( 'editable' ).add( this.editor.editable );
-	}
-}

+ 56 - 0
packages/ckeditor5-engine/tests/creator/manual/_utils/creator/inlinecreator.js

@@ -0,0 +1,56 @@
+/**
+ * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+'use strict';
+
+import Creator from '/ckeditor5/core/creator.js';
+import View from '/ckeditor5/core/ui/view.js';
+import BoxlessEditorUI from '/tests/core/_utils/ui/boxlesseditorui/boxlesseditorui.js';
+import InlineEditable from '/tests/core/_utils/ui/editable/inline/inlineeditable.js';
+import InlineEditableView from '/tests/core/_utils/ui/editable/inline/inlineeditableview.js';
+
+export default class InlineCreator extends Creator {
+	constructor( editor ) {
+		super( editor );
+
+		editor.ui = this._createEditorUI();
+	}
+
+	create() {
+		this._setupEditable();
+
+		return super.create()
+			.then( () => this.loadDataFromEditorElement() );
+	}
+
+	destroy() {
+		this.updateEditorElement();
+
+		return super.destroy();
+	}
+
+	_setupEditable() {
+		this.editor.editable = this._createEditable();
+
+		this.editor.ui.collections.get( 'editable' ).add( this.editor.editable );
+	}
+
+	_createEditable() {
+		const editable = new InlineEditable( this.editor );
+		const editableView = new InlineEditableView( editable.viewModel, this.editor.element );
+
+		editable.view = editableView;
+
+		return editable;
+	}
+
+	_createEditorUI() {
+		const editorUI = new BoxlessEditorUI( this.editor );
+
+		editorUI.view = new View( editorUI.viewModel );
+
+		return editorUI;
+	}
+}

+ 6 - 2
packages/ckeditor5-engine/tests/creator/manual/creator-classic.js

@@ -8,13 +8,17 @@
 'use strict';
 
 import CKEDITOR from '/ckeditor.js';
-import ClassicCreator from '/tests/core/creator/manual/_utils/creator/classic.js';
+import ClassicCreator from '/tests/core/creator/manual/_utils/creator/classiccreator.js';
 
 let editor;
 
 function initEditor() {
 	CKEDITOR.create( '#editor', {
-		creator: ClassicCreator
+		creator: ClassicCreator,
+		ui: {
+			width: 400,
+			height: 400
+		}
 	} )
 	.then( ( newEditor ) => {
 		console.log( 'Editor was initialized', newEditor );

+ 1 - 1
packages/ckeditor5-engine/tests/creator/manual/creator-inline.js

@@ -8,7 +8,7 @@
 'use strict';
 
 import CKEDITOR from '/ckeditor.js';
-import InlineCreator from '/tests/core/creator/manual/_utils/creator/inline.js';
+import InlineCreator from '/tests/core/creator/manual/_utils/creator/inlinecreator.js';
 
 let editor;