Przeglądaj źródła

Support for multiple editables and nicer creators.

Piotrek Koszuliński 9 lat temu
rodzic
commit
96f259f245

+ 31 - 0
packages/ckeditor5-ui/src/bindings/creator-utils.js

@@ -0,0 +1,31 @@
+/**
+ * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+'use strict';
+
+export function createEditableUI( editor, editable, EditableUI, EditableUIView ) {
+	const domElement = editable.domElement;
+	const editableUI = new EditableUI( editor, editable );
+	// TODO InlineEditable must be defined in this package so we can define that domElement is its 3rd arg.
+	const editableUIView = new EditableUIView( editableUI.viewModel, editor.locale, domElement );
+
+	editableUI.view = editableUIView;
+
+	// If editable.domElement is set then the editable.bindTo() must've been already called.
+	if ( !domElement ) {
+		editable.listenTo( editableUI, 'ready', () => editable.bindTo( editableUIView.editableElement ) );
+	}
+
+	return editableUI;
+}
+
+export function createEditorUI( editor, EditorUI, EditorUIView ) {
+	const editorUI = new EditorUI( editor );
+	const editorUIView = new EditorUIView( editorUI.viewModel, editor.locale );
+
+	editorUI.view = editorUIView;
+
+	return editorUI;
+}

+ 7 - 0
packages/ckeditor5-ui/src/controller.js

@@ -115,6 +115,7 @@ export default class Controller {
 			.then( this._initCollections.bind( this ) )
 			.then( () => {
 				this.ready = true;
+				this.fire( 'ready' );
 			} );
 	}
 
@@ -215,3 +216,9 @@ export default class Controller {
 }
 
 utils.mix( Controller, EmitterMixin );
+
+/**
+ * Fired when the controller is fully initialized.
+ *
+ * @event ui.Controller#ready
+ */

+ 7 - 23
packages/ckeditor5-ui/src/editable/editable.js

@@ -21,25 +21,11 @@ export default class Editable extends Controller {
 	 *
 	 * @param editor
 	 */
-	constructor( editor ) {
+	constructor( editor, editableModel ) {
 		super();
 
 		this.editor = editor;
-
-		/**
-		 * Whether the editable is in read-write or read-only mode.
-		 *
-		 * @member {Boolean} ui.editable.Editable#isEditable
-		 */
-		this.set( 'isEditable', true );
-
-		/**
-		 * Whether the editable is focused.
-		 *
-		 * @readonly
-		 * @member {Boolean} ui.editable.Editable#isFocused
-		 */
-		this.set( 'isFocused', false );
+		this._editableModel = editableModel;
 	}
 
 	/**
@@ -53,15 +39,11 @@ export default class Editable extends Controller {
 			return this._viewModel;
 		}
 
-		const viewModel = new Model( {
-			isFocused: this.isFocused
-		} );
-		this._viewModel = viewModel;
+		this._viewModel = new Model();
 
-		viewModel.bind( 'isEditable' ).to( this );
-		this.bind( 'isFocused' ).to( viewModel );
+		this._viewModel.bind( 'isEditable', 'isFocused' ).to( this._editableModel );
 
-		return viewModel;
+		return this._viewModel;
 	}
 
 	/**
@@ -95,11 +77,13 @@ utils.mix( Editable, ObservableMixin );
 /**
  * Whether the editable has focus.
  *
+ * @readonly
  * @member {Boolean} ui.editable.EditableModel#isFocused
  */
 
 /**
  * Whether the editable is not in read-only mode.
  *
+ * @readonly
  * @member {Boolean} ui.editable.EditableModel#isEditable
  */

+ 2 - 10
packages/ckeditor5-ui/src/editable/editableview.js

@@ -37,17 +37,9 @@ export default class EditableView extends View {
 		this.editableElement = editableElement;
 
 		this.applyTemplateToElement( editableElement, {
-			on: {
-				focus: () => {
-					this.model.isFocused = true;
-				},
-				blur: () => {
-					this.model.isFocused = false;
-				}
-			},
-
 			attributes: {
-				contentEditable: bind.to( 'isEditable' )
+				contentEditable: bind.to( 'isEditable' ),
+				class: [ bind.to( 'isFocused', value => value ? 'ck-focused' : 'ck-blurred' ) ]
 			}
 		} );
 	}

+ 9 - 0
packages/ckeditor5-ui/src/editorui/editorui.js

@@ -35,6 +35,15 @@ export default class EditorUI extends Controller {
 		this.editor = editor;
 
 		/**
+		 * Property used by the [CKEditor UI library](https://github.com/ckeditor/ckeditor5-ui) for storing
+		 * the main UI controller.
+		 *
+		 * @readonly
+		 * @member {ui.editorui.EditorUI} ckeditor5.Editor#ui
+		 */
+		editor.ui = this;
+
+		/**
 		 * @readonly
 		 * @member {ui.ComponentFactory} ui.editorUI.EditorUI#featureComponents
 		 */