瀏覽代碼

Prototyping.

Piotrek Koszuliński 10 年之前
父節點
當前提交
20a08f537b

+ 87 - 0
packages/ckeditor5-ui/src/editable/editable.js

@@ -0,0 +1,87 @@
+/**
+ * @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 Model from '../ui/model.js';
+import utils from '../utils.js';
+import ObservableMixin from '../observablemixin.js';
+
+/**
+ * @extends core.ui.Controller
+ * @mixins core.ObservableMixin
+ */
+export default class Editable extends Controller {
+	/**
+	 * Creates a new instance of the Editable class.
+	 * @constructor
+	 */
+	constructor() {
+		super();
+
+		/**
+		 * Whether the editable is in read-write or read-only mode.
+		 *
+		 * @property {Boolean} isEditable
+		 */
+		this.set( 'isEditable', true );
+
+		/**
+		 * Whether the editable is focused.
+		 *
+		 * @readonly
+		 * @property {Boolean} isFocused
+		 */
+		this.set( 'isFocused', false );
+
+		/**
+		 * The parent editable of this editable
+		 *
+		 * @readonly
+		 * @property {Editable} parent
+		 */
+		this.parent = null;
+	}
+
+	/**
+	 * @protected
+	 */
+	get viewModel() {
+		if ( this._viewModel ) {
+			return this._viewModel;
+		}
+
+		const viewModel = new Model( {
+			isFocused: this.isFocused
+		} );
+		this._viewModel = viewModel;
+
+		viewModel.bind( 'isEditable' ).to( this );
+		this.bind( 'isFocused' ).to( viewModel );
+
+		return viewModel;
+	}
+
+	/**
+	 * Temporary implementation (waiting for integration with the data model).
+	 *
+	 * @param {String} data HTML to be loaded.
+	 */
+	setData( data ) {
+		this.view.setData( data );
+	}
+
+	/**
+	 * Temporary implementation (waiting for integration with the data model).
+	 *
+	 * @returns {String} HTML string.
+	 */
+	getData() {
+		return this.view.getData();
+	}
+}
+
+utils.mix( Editable, ObservableMixin );

+ 58 - 0
packages/ckeditor5-ui/src/editable/view.js

@@ -0,0 +1,58 @@
+/**
+ * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+'use strict';
+
+import View from '../ui/view.js';
+import CKEditorError from '../ckeditorerror.js';
+
+export default class EditableView extends View {
+	/**
+	 * The element which is the main editable element (usually the one with `contentEditable="true"`).
+	 *
+	 * @property {HTMLElement} editableElement
+	 */
+
+	setEditableElement( editableElement ) {
+		if ( this.editableElement ) {
+			throw new CKEditorError(
+				'editableview-cannot-override-editableelement: The editableElement cannot be overriden.'
+			);
+		}
+
+		this.editableElement = editableElement;
+		this.editableElement.contentEditable = this.model.isEditable;
+
+		this.listenTo( editableElement, 'focus', () => {
+			this.model.isFocused = true;
+		} );
+
+		this.listenTo( editableElement, 'blur', () => {
+			this.model.isFocused = false;
+		} );
+
+		this.listenTo( this.model, 'change:isEditable', ( evt, value ) => {
+			editableElement.contentEditable = value;
+		} );
+	}
+
+	/**
+	 * Temporary implementation (waiting for integration with the data model).
+	 *
+	 * @param {String} data HTML to be loaded.
+	 */
+	setData( data ) {
+		this.editableElement.innerHTML = data;
+	}
+
+	/**
+	 * Temporary implementation (waiting for integration with the data model).
+	 *
+	 * @returns {String} HTML string.
+	 */
+	getData() {
+		return this.editableElement.innerHTML;
+	}
+}

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

@@ -0,0 +1,33 @@
+/**
+ * @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 );

+ 0 - 3
packages/ckeditor5-ui/tests/creator.html

@@ -1,3 +0,0 @@
-<textarea id="getData-textarea">&lt;b&gt;foo&lt;/b&gt;</textarea>
-<div id="getData-div"><b>foo</b></div>
-<template id="getData-template"><b>foo</b></template>

+ 0 - 33
packages/ckeditor5-ui/tests/creator.js

@@ -1,33 +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';
-
-describe( 'Creator', () => {
-	describe( 'getDataFromElement', () => {
-		[ 'textarea', 'template', 'div' ].forEach( ( elementName ) => {
-			it( 'should return the content of a ' + elementName, function() {
-				const data = Creator.getDataFromElement( document.getElementById( 'getData-' + elementName ) );
-				expect( data ).to.equal( '<b>foo</b>' );
-			} );
-		} );
-	} );
-
-	describe( 'setDataInElement', () => {
-		[ 'textarea', 'template', 'div' ].forEach( ( elementName ) => {
-			it( 'should set the content of a ' + elementName, () => {
-				const el = document.createElement( elementName );
-				const expectedData = '<b>foo</b>';
-
-				Creator.setDataInElement( el, expectedData );
-
-				const actualData = Creator.getDataFromElement( el );
-				expect( actualData ).to.equal( actualData );
-			} );
-		} );
-	} );
-} );