8
0
Quellcode durchsuchen

Aligned EditableUI component to the new View API.

Aleksander Nowodzinski vor 9 Jahren
Ursprung
Commit
b9cd894453

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

@@ -6,7 +6,6 @@
 'use strict';
 
 import Controller from '../controller.js';
-import Model from '../model.js';
 
 /**
  * @memberOf ui.editableUI
@@ -18,9 +17,10 @@ export default class EditableUI extends Controller {
 	 *
 	 * @param {ckeditor5.Editor} editor The editor instance.
 	 * @param {engine.view.RootEditableElement} editable The editable element.
+	 * @param {ui.View} [view] EditableUI View instance.
 	 */
-	constructor( editor, editable ) {
-		super();
+	constructor( editor, editable, view ) {
+		super( editable, view );
 
 		/**
 		 * The editor instance.
@@ -30,15 +30,7 @@ export default class EditableUI extends Controller {
 		 */
 		this.editor = editor;
 
-		/**
-		 * The model for the view.
-		 *
-		 * @readonly
-		 * @member {ui.Model} ui.editableUI.EditableUI#viewModel
-		 */
-		this.viewModel = new Model();
-
-		this.viewModel.bind( 'isReadOnly', 'isFocused' ).to( editable );
-		this.viewModel.set( 'name', editable.rootName );
+		view.model.bind( 'isReadOnly', 'isFocused' ).to( editable );
+		view.model.set( 'name', editable.rootName );
 	}
 }

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

@@ -21,8 +21,8 @@ export default class EditableUIView extends 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 ) {
-		super( model, locale );
+	constructor( locale, editableElement ) {
+		super( locale );
 
 		const bind = this.bind;
 

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

@@ -23,16 +23,21 @@ export default class InlineEditableUIView extends EditableUIView {
 	 * @param {HTMLElement} [editableElement] The editable element. If not specified, the {@link EditableUIView}
 	 * should create it. Otherwise, the existing element should be used.
 	 */
-	constructor( model, locale, editableElement ) {
-		super( model, locale, editableElement );
+	constructor( locale, editableElement ) {
+		super( locale, editableElement );
 
-		const label = this.t( 'Rich Text Editor, %0', [ this.model.name ] );
+		const bind = this.bind;
+
+		// TODO: Allow passing context to bind.to()/bind.it().
+		const getLabel = ( value ) => {
+			return this.t( 'Rich Text Editor, %0', [ value ] );
+		};
 
 		Template.extend( this.template, {
 			attributes: {
 				role: 'textbox',
-				'aria-label': label,
-				title: label,
+				'aria-label': bind.to( 'name', getLabel ),
+				title: bind.to( 'name', getLabel ),
 				class: 'ck-editor__editable_inline'
 			}
 		} );

+ 28 - 29
packages/ckeditor5-ui/tests/editableui/editableui.js

@@ -9,51 +9,50 @@
 
 import StandardEditor from '/ckeditor5/editor/standardeditor.js';
 import EditableUI from '/ckeditor5/ui/editableui/editableui.js';
-import Model from '/ckeditor5/ui/model.js';
+import EditableUIView from '/ckeditor5/ui/editableui/editableuiview.js';
 import testUtils from '/tests/utils/_utils/utils.js';
 
 describe( 'EditableUI', () => {
-	let editable, editableUI, editor;
+	let editable, editableUI, editableUIView, editor;
 
 	beforeEach( () => {
 		editor = new StandardEditor();
 		editable = editor.editing.view.createRoot( document.createElement( 'div' ) );
-		editableUI = new EditableUI( editor, editable );
+		editableUIView = new EditableUIView( editor.locale );
+		editableUI = new EditableUI( editor, editable, editableUIView );
 	} );
 
 	describe( 'constructor', () => {
 		it( 'sets all properties', () => {
 			expect( editableUI.editor ).to.equal( editor );
-			expect( editableUI.viewModel ).to.be.instanceof( Model );
-		} );
-	} );
-
-	describe( 'viewModel', () => {
-		it( 'constains observable attributes', () => {
-			expect( editableUI.viewModel ).to.have.property( 'isReadOnly', false );
-			expect( editableUI.viewModel ).to.have.property( 'isFocused', false );
 		} );
 
-		it( 'binds isFocused to editable.isFocused', () => {
-			testUtils.assertBinding(
-				editableUI.viewModel,
-				{ isFocused: false },
-				[
-					[ editable, { isFocused: true } ]
-				],
-				{ isFocused: true }
-			);
+		it( 'binds editableUIView#model attributes to the editable', () => {
+			it( 'binds isFocused to editable.isFocused', () => {
+				testUtils.assertBinding(
+					editableUIView.model,
+					{ isFocused: false },
+					[
+						[ editable, { isFocused: true } ]
+					],
+					{ isFocused: true }
+				);
+			} );
+
+			it( 'binds isReadOnly to editable.isReadOnly', () => {
+				testUtils.assertBinding(
+					editableUIView.model,
+					{ isReadOnly: false },
+					[
+						[ editable, { isReadOnly: true } ]
+					],
+					{ isReadOnly: true }
+				);
+			} );
 		} );
 
-		it( 'binds isReadOnly to editable.isReadOnly', () => {
-			testUtils.assertBinding(
-				editableUI.viewModel,
-				{ isReadOnly: false },
-				[
-					[ editable, { isReadOnly: true } ]
-				],
-				{ isReadOnly: true }
-			);
+		it( 'sets editableUIView.model#name to editable#rootName', () => {
+			expect( editableUIView.model.name ).to.equal( editable.rootName );
 		} );
 	} );
 } );

+ 19 - 16
packages/ckeditor5-ui/tests/editableui/editableuiview.js

@@ -7,28 +7,30 @@
 
 'use strict';
 
+import EditableUI from '/ckeditor5/ui/editableui/editableui.js';
 import EditableUIView from '/ckeditor5/ui/editableui/editableuiview.js';
 import Model from '/ckeditor5/ui/model.js';
 import Locale from '/ckeditor5/utils/locale.js';
 
 describe( 'EditableUIView', () => {
-	let model, view, editableElement, locale;
+	let editable, view, editableElement, locale;
 
 	beforeEach( () => {
-		model = new Model( {
+		editable = new Model( {
 			isReadOnly: false,
-			isFocused: false
+			isFocused: false,
+			rootName: 'foo'
 		} );
 		locale = new Locale( 'en' );
-		view = new EditableUIView( model, locale );
+		view = new EditableUIView( locale );
 		editableElement = document.createElement( 'div' );
 
-		view.init();
+		return new EditableUI( null, editable, view ).init();
 	} );
 
 	describe( 'constructor', () => {
 		it( 'renders element from template when no editableElement', () => {
-			view = new EditableUIView( model, locale );
+			view = new EditableUIView( locale );
 			view.init();
 
 			expect( view.element ).to.equal( view.editableElement );
@@ -36,7 +38,7 @@ describe( 'EditableUIView', () => {
 		} );
 
 		it( 'accepts editableElement as an argument', () => {
-			view = new EditableUIView( model, locale, editableElement );
+			view = new EditableUIView( locale, editableElement );
 			view.init();
 
 			expect( view.element ).to.equal( editableElement );
@@ -52,8 +54,8 @@ describe( 'EditableUIView', () => {
 				expect( view.element.classList.contains( 'ck-focused' ) ).to.be.false;
 			} );
 
-			it( 'reacts on model.isFocused', () => {
-				model.isFocused = true;
+			it( 'reacts on editable.isFocused', () => {
+				editable.isFocused = true;
 
 				expect( view.element.classList.contains( 'ck-blurred' ) ).to.be.false;
 				expect( view.element.classList.contains( 'ck-focused' ) ).to.be.true;
@@ -65,8 +67,8 @@ describe( 'EditableUIView', () => {
 				expect( view.element.getAttribute( 'contenteditable' ) ).to.equal( 'true' );
 			} );
 
-			it( 'reacts on model.isReadOnly', () => {
-				model.isReadOnly = true;
+			it( 'reacts on editable.isReadOnly', () => {
+				editable.isReadOnly = true;
 
 				expect( view.element.getAttribute( 'contenteditable' ) ).to.equal( 'false' );
 			} );
@@ -75,14 +77,15 @@ describe( 'EditableUIView', () => {
 
 	describe( 'destroy', () => {
 		it( 'updates contentEditable property of editableElement', () => {
-			view = new EditableUIView( model, locale, editableElement );
-			view.init();
+			view = new EditableUIView( locale, editableElement );
 
-			expect( view.editableElement.contentEditable ).to.equal( 'true' );
+			return new EditableUI( null, editable, view ).init().then( () => {
+				expect( view.editableElement.contentEditable ).to.equal( 'true' );
 
-			view.destroy();
+				view.destroy();
 
-			expect( view.editableElement.contentEditable ).to.equal( 'false' );
+				expect( view.editableElement.contentEditable ).to.equal( 'false' );
+			} );
 		} );
 	} );
 } );

+ 10 - 9
packages/ckeditor5-ui/tests/editableui/inline/inlineeditableuiview.js

@@ -7,33 +7,34 @@
 
 'use strict';
 
+import EditableUI from '/ckeditor5/ui/editableui/editableui.js';
 import InlineEditableUIView from '/ckeditor5/ui/editableui/inline/inlineeditableuiview.js';
 import Model from '/ckeditor5/ui/model.js';
 import Locale from '/ckeditor5/utils/locale.js';
 
 describe( 'InlineEditableUIView', () => {
-	let model, view, editableElement, locale;
+	let editable, view, editableElement, locale;
 
 	beforeEach( () => {
-		model = new Model( { isEditable: true, isFocused: false, name: 'foo' } );
+		editable = new Model( {
+			isReadOnly: false,
+			isFocused: false,
+			rootName: 'foo'
+		} );
 		locale = new Locale( 'en' );
-		view = new InlineEditableUIView( model, locale );
+		view = new InlineEditableUIView( locale );
 		editableElement = document.createElement( 'div' );
 
-		return view.init();
+		return new EditableUI( null, editable, view ).init();
 	} );
 
 	describe( 'constructor', () => {
-		it( 'accepts model', () => {
-			expect( view.model ).to.equal( model );
-		} );
-
 		it( 'accepts locale', () => {
 			expect( view.locale ).to.equal( locale );
 		} );
 
 		it( 'accepts editableElement', () => {
-			view = new InlineEditableUIView( model, locale, editableElement );
+			view = new InlineEditableUIView( locale, editableElement );
 
 			expect( view.element ).to.equal( editableElement );
 		} );