Sfoglia il codice sorgente

Merge pull request #38 from ckeditor/t/37

Aligned bindings to changes in the core
Aleksander Nowodzinski 9 anni fa
parent
commit
173cf5d2ba

+ 0 - 29
packages/ckeditor5-ui/src/bindings/stickytoolbar.js

@@ -1,29 +0,0 @@
-/**
- * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-'use strict';
-
-import Toolbar from './toolbar.js';
-
-/**
- * The editor sticky toolbar controller class.
- *
- * @memberOf ui.bindings
- * @extends ui.toolbar.Toolbar
- */
-export default class StickyToolbar extends Toolbar {
-	/**
-	 * Creates a new toolbar instance.
-	 *
-	 * @param {ui.Model} model
-	 * @param {ui.View} view
-	 * @param {ckeditor5.Editor} editor
-	 */
-	constructor( model, view, editor ) {
-		super( model, view, editor );
-
-		model.bind( 'isActive' ).to( editor.editables, 'current', c => !!c );
-	}
-}

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

@@ -1,46 +0,0 @@
-/**
- * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-'use strict';
-
-/**
- * Creates and if needed (if not yet done) binds the editable UI to the {@link ckeditor5.Editable editable instance}.
- *
- * @param {ckeditor5.Editor} editor The editor instance.
- * @param {ckeditor5.Editable} editable The editable instance with which the editable UI will be bound.
- * @param {Function} EditableUI Editable UI controller constructor.
- * @param {Function} EditableUIView Editable UI view constructor.
- * @returns {ui.editableui.EditableUI} Instance of the editable UI.
- */
-export function createEditableUI( editor, editable, EditableUI, EditableUIView ) {
-	const domElement = editable.domElement;
-	const editableUI = new EditableUI( editor, editable );
-	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;
-}
-
-/**
- * Creates editor UI instance.
- *
- * @param {ckeditor5.Editor} editor The editor instance.
- * @param {Function} Editor UI controller constructor.
- * @param {Function} Editor UI view constructor.
- */
-export function createEditorUI( editor, EditorUI, EditorUIView ) {
-	const editorUI = new EditorUI( editor );
-	const editorUIView = new EditorUIView( editorUI.viewModel, editor.locale );
-
-	editorUI.view = editorUIView;
-
-	return editorUI;
-}

+ 5 - 4
packages/ckeditor5-ui/src/editableui/editableui.js

@@ -17,9 +17,9 @@ export default class EditableUI extends Controller {
 	 * Creates a new instance of the Editable class.
 	 *
 	 * @param {ckeditor5.Editor} editor The editor instance.
-	 * @param {utils.Observable} editableModel The model for the editable.
+	 * @param {engine.view.RootEditableElement} editable The editable element.
 	 */
-	constructor( editor, editableModel ) {
+	constructor( editor, editable ) {
 		super();
 
 		/**
@@ -37,7 +37,8 @@ export default class EditableUI extends Controller {
 		 * @member {ui.Model} ui.editableUI.EditableUI#viewModel
 		 */
 		this.viewModel = new Model();
-		this.viewModel.bind( 'isEditable', 'isFocused' ).to( editableModel );
-		this.viewModel.set( 'editableName', editableModel.name );
+
+		this.viewModel.bind( 'isReadOnly', 'isFocused' ).to( editable );
+		this.viewModel.set( 'name', editable.rootName );
 	}
 }

+ 9 - 9
packages/ckeditor5-ui/src/editableui/editableuiview.js

@@ -17,7 +17,7 @@ export default class EditableUIView extends View {
 	 *
 	 * @param {utils.Observable} model (View)Model of this View.
 	 * @param {utils.Locale} [locale] The {@link ckeditor5.Editor#locale editor's locale} instance.
-	 * @param {HTMLElement} [editableElement] The editable element. If not specified, this View
+	 * @param {HTMLElement} [editableElement] The editable element. If not specified, this view
 	 * should create it. Otherwise, the existing element should be used.
 	 */
 	constructor( model, locale, editableElement ) {
@@ -36,9 +36,16 @@ export default class EditableUIView extends View {
 					bind.to( 'isFocused', value => value ? 'ck-focused' : 'ck-blurred' ),
 					'ck-editor__editable'
 				],
-				contenteditable: bind.to( 'isEditable' ),
+				contenteditable: bind.to( 'isReadOnly', value => !value ),
 			}
 		};
+
+		/**
+		 * The element which is the main editable element (usually the one with `contentEditable="true"`).
+		 *
+		 * @readonly
+		 * @member {HTMLElement} ui.editableUI.EditableUIView#editableElement
+		 */
 	}
 
 	/**
@@ -60,11 +67,4 @@ export default class EditableUIView extends View {
 
 		this.editableElement.contentEditable = false;
 	}
-
-	/**
-	 * The element which is the main editable element (usually the one with `contentEditable="true"`).
-	 *
-	 * @readonly
-	 * @member {HTMLElement} ui.editableUI.EditableUIView#editableElement
-	 */
 }

+ 1 - 1
packages/ckeditor5-ui/src/editableui/inline/inlineeditableuiview.js

@@ -25,7 +25,7 @@ export default class InlineEditableUIView extends EditableUIView {
 	constructor( model, locale, editableElement ) {
 		super( model, locale, editableElement );
 
-		const label = this.t( 'Rich Text Editor, %0', [ this.model.editableName ] );
+		const label = this.t( 'Rich Text Editor, %0', [ this.model.name ] );
 
 		Object.assign( this.template.attributes, {
 			role: 'textbox',

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

@@ -36,15 +36,6 @@ 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
 		 */

+ 0 - 38
packages/ckeditor5-ui/tests/bindings/stickytoolbar.js

@@ -1,38 +0,0 @@
-/**
- * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-/* bender-tags: ui, stickytoolbar */
-
-'use strict';
-
-import Editor from '/ckeditor5/editor.js';
-import Editable from '/ckeditor5/editable.js';
-import Model from '/ckeditor5/ui/model.js';
-import View from '/ckeditor5/ui/view.js';
-import StickyToolbar from '/ckeditor5/ui/bindings/stickytoolbar.js';
-
-describe( 'StickyToolbar', () => {
-	let toolbar, view, model, editor, editable;
-
-	beforeEach( () => {
-		editor = new Editor();
-		editable = new Editable( editor, 'foo' );
-		model = new Model();
-		view = new View( model );
-		toolbar = new StickyToolbar( model, view, editor );
-	} );
-
-	describe( 'constructor', () => {
-		it( 'binds model#isActive to editor.editables#current', () => {
-			expect( model.isActive ).to.be.false;
-
-			editor.editables.current = editable;
-			expect( model.isActive ).to.be.true;
-
-			editor.editables.current = null;
-			expect( model.isActive ).to.be.false;
-		} );
-	} );
-} );

+ 1 - 1
packages/ckeditor5-ui/tests/bindings/toolbar.js

@@ -7,7 +7,7 @@
 
 'use strict';
 
-import Editor from '/ckeditor5/editor.js';
+import Editor from '/ckeditor5/editor/editor.js';
 import Model from '/ckeditor5/ui/model.js';
 import View from '/ckeditor5/ui/view.js';
 import Controller from '/ckeditor5/ui/controller.js';

+ 1 - 1
packages/ckeditor5-ui/tests/boxededitorui/boxededitorui.js

@@ -5,7 +5,7 @@
 
 'use strict';
 
-import Editor from '/ckeditor5/editor.js';
+import Editor from '/ckeditor5/editor/editor.js';
 import BoxedEditorUI from '/ckeditor5/ui/editorui/boxed/boxededitorui.js';
 import ControllerCollection from '/ckeditor5/ui/controllercollection.js';
 

+ 1 - 1
packages/ckeditor5-ui/tests/componentfactory.js

@@ -7,7 +7,7 @@
 
 'use strict';
 
-import Editor from '/ckeditor5/editor.js';
+import Editor from '/ckeditor5/editor/editor.js';
 import ComponentFactory from '/ckeditor5/ui/componentfactory.js';
 import CKEditorError from '/ckeditor5/utils/ckeditorerror.js';
 

+ 0 - 126
packages/ckeditor5-ui/tests/creator-utils.js

@@ -1,126 +0,0 @@
-/**
- * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-/* bender-tags: ui */
-
-'use strict';
-
-import { createEditableUI, createEditorUI } from '/ckeditor5/ui/creator-utils.js';
-import ObservableMixin from '/ckeditor5/utils/observablemixin.js';
-import mix from '/ckeditor5/utils/mix.js';
-import Editor from '/ckeditor5/editor.js';
-import Controller from '/ckeditor5/ui/controller.js';
-import View from '/ckeditor5/ui/view.js';
-import Model from '/ckeditor5/ui/model.js';
-
-describe( 'creator-utils', () => {
-	let editor;
-
-	beforeEach( () => {
-		editor = new Editor();
-	} );
-
-	describe( 'createEditableUI', () => {
-		let editable;
-
-		class Editable {}
-		mix( Editable, ObservableMixin );
-
-		class TestController extends Controller {
-			constructor( editor, editable ) {
-				super();
-
-				this.editor = editor;
-				this.editable = editable;
-
-				this.viewModel = new Model();
-			}
-		}
-
-		class TestView extends View {
-			constructor( model, locale, editableElement ) {
-				super( model, locale );
-
-				this.editableElement = editableElement;
-			}
-		}
-
-		beforeEach( () => {
-			editable = new Editable();
-			editable.bindTo = sinon.spy();
-		} );
-
-		it( 'creates an instance of editable UI', () => {
-			const editableUI = createEditableUI( editor, editable, TestController, TestView );
-
-			expect( editableUI ).to.be.instanceof( TestController );
-			expect( editableUI ).to.have.property( 'editor', editor );
-			expect( editableUI ).to.have.property( 'editable', editable );
-
-			const view = editableUI.view;
-			expect( view ).to.be.instanceof( TestView );
-			expect( view.model ).to.equal( editableUI.viewModel );
-			expect( view.editableElement ).to.be.undefined;
-			expect( view.locale ).to.equal( editor.locale );
-		} );
-
-		it( 'passes the editable.domElement to the view and do not try to bind it again', () => {
-			const editableElement = document.createElement( 'div' );
-
-			editable.domElement = editableElement;
-			editable.bindTo = sinon.spy();
-
-			const editableUI = createEditableUI( editor, editable, TestController, TestView );
-
-			expect( editableUI.view.editableElement ).to.equal( editableElement );
-			expect( editable.bindTo.callCount ).to.equal( 0 );
-		} );
-
-		it( 'passes the editable.domElement to the view and do not try to bind it again', () => {
-			const editableElement = document.createElement( 'div' );
-
-			editable.domElement = editableElement;
-
-			const editableUI = createEditableUI( editor, editable, TestController, TestView );
-
-			expect( editableUI.view.editableElement ).to.equal( editableElement );
-			expect( editable.bindTo.callCount ).to.equal( 0 );
-		} );
-
-		it( 'if editable.domElement is not yet defined, tries to bind the editable element', () => {
-			const editableElement = document.createElement( 'div' );
-			const editableUI = createEditableUI( editor, editable, TestController, TestView );
-
-			editableUI.view.editableElement = editableElement;
-			editableUI.fire( 'ready' );
-
-			expect( editable.bindTo.calledWith( editableElement ) ).to.be.true;
-		} );
-	} );
-
-	describe( 'createEditorUI', () => {
-		class TestController extends Controller {
-			constructor( editor ) {
-				super();
-
-				this.editor = editor;
-				this.viewModel = new Model();
-			}
-		}
-
-		class TestView extends View {}
-
-		it( 'creates an instance of the EditorUI', () => {
-			const editorUI = createEditorUI( editor, TestController, TestView );
-
-			expect( editorUI ).to.be.instanceof( TestController );
-			expect( editorUI.editor ).to.equal( editor );
-
-			expect( editorUI.view ).to.be.instanceof( TestView );
-			expect( editorUI.view.model ).to.equal( editorUI.viewModel );
-			expect( editorUI.view.locale ).to.equal( editor.locale );
-		} );
-	} );
-} );

+ 8 - 9
packages/ckeditor5-ui/tests/editableui/editableui.js

@@ -7,8 +7,7 @@
 
 'use strict';
 
-import Editor from '/ckeditor5/editor.js';
-import Editable from '/ckeditor5/editable.js';
+import StandardEditor from '/ckeditor5/editor/standardeditor.js';
 import EditableUI from '/ckeditor5/ui/editableui/editableui.js';
 import Model from '/ckeditor5/ui/model.js';
 import testUtils from '/tests/utils/_utils/utils.js';
@@ -17,8 +16,8 @@ describe( 'EditableUI', () => {
 	let editable, editableUI, editor;
 
 	beforeEach( () => {
-		editor = new Editor();
-		editable = new Editable( editor, 'foo' );
+		editor = new StandardEditor();
+		editable = editor.editing.view.createRoot( document.createElement( 'div' ) );
 		editableUI = new EditableUI( editor, editable );
 	} );
 
@@ -31,7 +30,7 @@ describe( 'EditableUI', () => {
 
 	describe( 'viewModel', () => {
 		it( 'constains observable attributes', () => {
-			expect( editableUI.viewModel ).to.have.property( 'isEditable', true );
+			expect( editableUI.viewModel ).to.have.property( 'isReadOnly', false );
 			expect( editableUI.viewModel ).to.have.property( 'isFocused', false );
 		} );
 
@@ -46,14 +45,14 @@ describe( 'EditableUI', () => {
 			);
 		} );
 
-		it( 'binds isEditable to editable.isEditable', () => {
+		it( 'binds isReadOnly to editable.isReadOnly', () => {
 			testUtils.assertBinding(
 				editableUI.viewModel,
-				{ isEditable: true },
+				{ isReadOnly: false },
 				[
-					[ editable, { isEditable: false } ]
+					[ editable, { isReadOnly: true } ]
 				],
-				{ isEditable: false }
+				{ isReadOnly: true }
 			);
 		} );
 	} );

+ 5 - 5
packages/ckeditor5-ui/tests/editableui/editableuiview.js

@@ -15,7 +15,7 @@ describe( 'EditableUIView', () => {
 	let model, view, editableElement, locale;
 
 	beforeEach( () => {
-		model = new Model( { isEditable: true, isFocused: false } );
+		model = new Model( { isReadOnly: false, isFocused: false } );
 		locale = new Locale( 'en' );
 		view = new EditableUIView( model, locale );
 		editableElement = document.createElement( 'div' );
@@ -59,13 +59,13 @@ describe( 'EditableUIView', () => {
 
 		describe( 'contenteditable', () => {
 			it( 'has initial value set', () => {
-				expect( view.element.attributes.getNamedItem( 'contenteditable' ).value ).to.equal( 'true' );
+				expect( view.element.getAttribute( 'contenteditable' ) ).to.equal( 'true' );
 			} );
 
-			it( 'reacts on model.isEditable', () => {
-				model.isEditable = false;
+			it( 'reacts on model.isReadOnly', () => {
+				model.isReadOnly = true;
 
-				expect( view.element.attributes.getNamedItem( 'contenteditable' ).value ).to.equal( 'false' );
+				expect( view.element.getAttribute( 'contenteditable' ) ).to.equal( 'false' );
 			} );
 		} );
 	} );

+ 5 - 3
packages/ckeditor5-ui/tests/editableui/inline/inlineeditableuiview.js

@@ -15,7 +15,7 @@ describe( 'InlineEditableUIView', () => {
 	let model, view, editableElement, locale;
 
 	beforeEach( () => {
-		model = new Model( { isEditable: true, isFocused: false } );
+		model = new Model( { isEditable: true, isFocused: false, name: 'foo' } );
 		locale = new Locale( 'en' );
 		view = new InlineEditableUIView( model, locale );
 		editableElement = document.createElement( 'div' );
@@ -44,16 +44,18 @@ describe( 'InlineEditableUIView', () => {
 	} );
 
 	describe( 'editableElement', () => {
+		const ariaLabel = 'Rich Text Editor, foo';
+
 		it( 'has proper accessibility role', () => {
 			expect( view.element.attributes.getNamedItem( 'role' ).value ).to.equal( 'textbox' );
 		} );
 
 		it( 'has proper ARIA label', () => {
-			expect( view.element.attributes.getNamedItem( 'aria-label' ).value ).to.be.a( 'string' );
+			expect( view.element.getAttribute( 'aria-label' ) ).to.equal( ariaLabel );
 		} );
 
 		it( 'has proper title', () => {
-			expect( view.element.attributes.getNamedItem( 'title' ).value ).to.be.a( 'string' );
+			expect( view.element.getAttribute( 'title' ) ).to.equal( ariaLabel );
 		} );
 
 		it( 'has proper class name', () => {

+ 1 - 5
packages/ckeditor5-ui/tests/editorui/editorui.js

@@ -6,7 +6,7 @@
 'use strict';
 
 import testUtils from '/tests/ckeditor5/_utils/utils.js';
-import Editor from '/ckeditor5/editor.js';
+import Editor from '/ckeditor5/editor/editor.js';
 import EditorUI from '/ckeditor5/ui/editorui/editorui.js';
 import ComponentFactory from '/ckeditor5/ui/componentfactory.js';
 import ControllerCollection from '/ckeditor5/ui/controllercollection.js';
@@ -29,10 +29,6 @@ describe( 'EditorUI', () => {
 
 			expect( editorUI.collections.get( 'body' ) ).to.be.instanceof( ControllerCollection );
 		} );
-
-		it( 'sets editor.ui property', () => {
-			expect( editor ).to.have.property( 'ui', editorUI );
-		} );
 	} );
 
 	describe( 'init', () => {