8
0
Эх сурвалжийг харах

Aligned ButtonView to the View#render API. Code refactoring in the component.

Aleksander Nowodzinski 8 жил өмнө
parent
commit
5843900cbb

+ 61 - 34
packages/ckeditor5-ui/src/button/buttonview.js

@@ -8,7 +8,6 @@
  */
 
 import View from '../view';
-import Template from '../template';
 import IconView from '../icon/iconview';
 import TooltipView from '../tooltip/tooltipview';
 
@@ -26,7 +25,7 @@ import { getEnvKeystrokeText } from '@ckeditor/ckeditor5-utils/src/keyboard';
  *			withText: true
  *		} );
  *
- *		view.init();
+ *		view.render();
  *
  *		document.body.append( view.element );
  *
@@ -39,6 +38,8 @@ export default class ButtonView extends View {
 	constructor( locale ) {
 		super( locale );
 
+		const bind = this.bindTemplate;
+
 		/**
 		 * The label of the button view visible to the user when {@link #withText} is `true`.
 		 * It can also be used to create a {@link #tooltip}.
@@ -151,6 +152,30 @@ export default class ButtonView extends View {
 		 */
 		this.set( 'tabindex', -1 );
 
+		/**
+		 * Collection of the child views inside of the button {@link #element}.
+		 *
+		 * @readonly
+		 * @member {module:ui/viewcollection~ViewCollection}
+		 */
+		this.children = this.createCollection();
+
+		/**
+		 * Tooltip of the button view. It is configurable using the {@link #tooltip tooltip attribute}.
+		 *
+		 * @readonly
+		 * @member {module:ui/tooltip/tooltipview~TooltipView} #tooltipView
+		 */
+		this.tooltipView = this._createTooltipView();
+
+		/**
+		 * Label of the button view. It is configurable using the {@link #label label attribute}.
+		 *
+		 * @readonly
+		 * @member {module:ui/view~View} #labelView
+		 */
+		this.labelView = this._createLabelView();
+
 		/**
 		 * Tooltip of the button bound to the template.
 		 *
@@ -167,14 +192,6 @@ export default class ButtonView extends View {
 			this._getTooltipString.bind( this )
 		);
 
-		/**
-		 * Tooltip of the button view. It is configurable using the {@link #tooltip tooltip attribute}.
-		 *
-		 * @readonly
-		 * @member {module:ui/tooltip/tooltipview~TooltipView} #tooltipView
-		 */
-		this.tooltipView = this._createTooltipView();
-
 		/**
 		 * (Optional) The icon view of the button. Only present when the {@link #icon icon attribute} is defined.
 		 *
@@ -182,9 +199,7 @@ export default class ButtonView extends View {
 		 * @member {module:ui/icon/iconview~IconView} #iconView
 		 */
 
-		const bind = this.bindTemplate;
-
-		this.template = new Template( {
+		this.setTemplate( {
 			tag: 'button',
 
 			attributes: {
@@ -199,22 +214,7 @@ export default class ButtonView extends View {
 				tabindex: bind.to( 'tabindex' )
 			},
 
-			children: [
-				{
-					tag: 'span',
-
-					attributes: {
-						class: [ 'ck-button__label' ]
-					},
-
-					children: [
-						{
-							text: bind.to( 'label' )
-						}
-					]
-				},
-				this.tooltipView
-			],
+			children: this.children,
 
 			on: {
 				mousedown: bind.to( evt => {
@@ -246,18 +246,19 @@ export default class ButtonView extends View {
 	/**
 	 * @inheritDoc
 	 */
-	init() {
+	render() {
+		super.render();
+
 		if ( this.icon ) {
 			const iconView = this.iconView = new IconView();
 
 			iconView.bind( 'content' ).to( this, 'icon' );
-			this.element.insertBefore( iconView.element, this.element.firstChild );
 
-			// Make sure the icon will be destroyed along with the button.
-			this.addChildren( iconView );
+			this.children.add( iconView );
 		}
 
-		super.init();
+		this.children.add( this.tooltipView );
+		this.children.add( this.labelView );
 	}
 
 	/**
@@ -283,6 +284,32 @@ export default class ButtonView extends View {
 		return tooltipView;
 	}
 
+	/**
+	 * Creates a label view instance and binds it with button attributes.
+	 *
+	 * @private
+	 * @returns {module:ui/view~View}
+	 */
+	_createLabelView() {
+		const labelView = new View();
+
+		labelView.setTemplate( {
+			tag: 'span',
+
+			attributes: {
+				class: [ 'ck-button__label' ]
+			},
+
+			children: [
+				{
+					text: this.bindTemplate.to( 'label' )
+				}
+			]
+		} );
+
+		return labelView;
+	}
+
 	/**
 	 * Gets the text for the {@link #tooltipView} from the combination of
 	 * {@link #tooltip}, {@link #label} and {@link #keystroke} attributes.

+ 21 - 18
packages/ckeditor5-ui/tests/button/buttonview.js

@@ -9,6 +9,8 @@ import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
 import ButtonView from '../../src/button/buttonview';
 import IconView from '../../src/icon/iconview';
 import TooltipView from '../../src/tooltip/tooltipview';
+import View from '../../src/view';
+import ViewCollection from '../../src/viewcollection';
 
 testUtils.createSinonSandbox();
 
@@ -18,7 +20,22 @@ describe( 'ButtonView', () => {
 	beforeEach( () => {
 		locale = { t() {} };
 
-		return ( view = new ButtonView( locale ) ).init();
+		view = new ButtonView( locale );
+		view.render();
+	} );
+
+	describe( 'constructor()', () => {
+		it( 'creates view#children collection', () => {
+			expect( view.children ).to.be.instanceOf( ViewCollection );
+		} );
+
+		it( 'creates #tooltipView', () => {
+			expect( view.tooltipView ).to.be.instanceOf( TooltipView );
+		} );
+
+		it( 'creates #labelView', () => {
+			expect( view.labelView ).to.be.instanceOf( View );
+		} );
 	} );
 
 	describe( '<button> bindings', () => {
@@ -76,19 +93,13 @@ describe( 'ButtonView', () => {
 		} );
 
 		describe( 'tooltip', () => {
-			beforeEach( () => {
-				view = new ButtonView( locale );
-			} );
-
 			it( 'is initially set', () => {
-				expect( view.tooltipView ).to.be.instanceof( TooltipView );
-				expect( Array.from( view.template.children ) ).to.include( view.tooltipView );
+				expect( view.children.getIndex( view.tooltipView ) ).to.equal( 0 );
 			} );
 
 			it( 'it reacts to #tooltipPosition attribute', () => {
 				view.tooltip = 'foo';
 				view.icon = 'bar';
-				view.init();
 
 				expect( view.tooltipPosition ).to.equal( 's' );
 				expect( view.tooltipView.position ).to.equal( 's' );
@@ -102,7 +113,6 @@ describe( 'ButtonView', () => {
 					view.tooltip = true;
 					view.label = 'bar';
 					view.keystroke = 'A';
-					view.init();
 
 					expect( view.tooltipView.text ).to.equal( 'bar (A)' );
 				} );
@@ -111,7 +121,6 @@ describe( 'ButtonView', () => {
 					view.tooltip = false;
 					view.label = 'bar';
 					view.keystroke = 'A';
-					view.init();
 
 					expect( view.tooltipView.text ).to.equal( '' );
 				} );
@@ -120,7 +129,6 @@ describe( 'ButtonView', () => {
 					view.tooltip = true;
 					view.label = 'foo';
 					view.keystroke = 'B';
-					view.init();
 
 					expect( view.tooltipView.text ).to.equal( 'foo (B)' );
 
@@ -136,14 +144,12 @@ describe( 'ButtonView', () => {
 					view.tooltip = 'bar';
 					view.label = 'foo';
 					view.keystroke = 'A';
-					view.init();
 
 					expect( view.tooltipView.text ).to.equal( 'bar' );
 				} );
 
 				it( 'reacts to changes of #tooltip', () => {
 					view.tooltip = 'bar';
-					view.init();
 
 					expect( view.tooltipView.text ).to.equal( 'bar' );
 
@@ -157,7 +163,6 @@ describe( 'ButtonView', () => {
 					view.tooltip = ( l, k ) => `${ l } - ${ k }`;
 					view.label = 'foo';
 					view.keystroke = 'A';
-					view.init();
 
 					expect( view.tooltipView.text ).to.equal( 'foo - A' );
 				} );
@@ -166,7 +171,6 @@ describe( 'ButtonView', () => {
 					view.tooltip = ( l, k ) => `${ l } - ${ k }`;
 					view.label = 'foo';
 					view.keystroke = 'A';
-					view.init();
 
 					expect( view.tooltipView.text ).to.equal( 'foo - A' );
 
@@ -237,8 +241,8 @@ describe( 'ButtonView', () => {
 		it( 'is set when view#icon is defined', () => {
 			view = new ButtonView( locale );
 			view.icon = 'foo';
+			view.render();
 
-			view.init();
 			expect( view.element.childNodes ).to.have.length( 3 );
 			expect( view.element.childNodes[ 0 ] ).to.equal( view.iconView.element );
 
@@ -252,8 +256,7 @@ describe( 'ButtonView', () => {
 		it( 'is destroyed with the view', () => {
 			view = new ButtonView( locale );
 			view.icon = 'foo';
-
-			view.init();
+			view.render();
 
 			const spy = sinon.spy( view.iconView, 'destroy' );