ソースを参照

Created ColorInputView #isFocused and #isEmpty observable properties.

Aleksander Nowodzinski 5 年 前
コミット
ff716fef23

+ 23 - 2
packages/ckeditor5-table/src/ui/colorinputview.js

@@ -74,6 +74,27 @@ export default class ColorInputView extends View {
 		this.set( 'hasError', false );
 
 		/**
+		 * An observable flag set to `true` when the input is focused by the user.
+		 * `false` otherwise.
+		 *
+		 * @readonly
+		 * @observable
+		 * @member {Boolean} #isFocused
+		 * @default false
+		 */
+		this.set( 'isFocused', false );
+
+		/**
+		 * An observable flag set to `true` when the input contains no text.
+		 *
+		 * @readonly
+		 * @observable
+		 * @member {Boolean} #isEmpty
+		 * @default true
+		 */
+		this.set( 'isEmpty', true );
+
+		/**
 		 * The `id` of the element describing this field. When the field has
 		 * some error, it helps screen readers read the error text.
 		 *
@@ -214,8 +235,8 @@ export default class ColorInputView extends View {
 		} );
 
 		inputView.value = this.value;
-		inputView.bind( 'isReadOnly' ).to( this );
-		inputView.bind( 'hasError' ).to( this );
+		inputView.bind( 'isReadOnly', 'hasError' ).to( this );
+		this.bind( 'isFocused', 'isEmpty' ).to( inputView );
 
 		inputView.on( 'input', () => {
 			const inputValue = inputView.element.value;

+ 26 - 2
packages/ckeditor5-table/tests/ui/colorinputview.js

@@ -71,6 +71,30 @@ describe( 'ColorInputView', () => {
 			expect( view.hasError ).to.be.false;
 		} );
 
+		it( 'should set #isFocused', () => {
+			expect( view.isFocused ).to.be.false;
+		} );
+
+		it( 'should set #isEmpty', () => {
+			expect( view.isEmpty ).to.be.true;
+		} );
+
+		it( 'should have #isEmpty bound to the text input', () => {
+			inputView.isEmpty = true;
+			expect( view.isEmpty ).to.be.true;
+
+			inputView.isEmpty = false;
+			expect( view.isEmpty ).to.be.false;
+		} );
+
+		it( 'should have #isFocused bound to the text input', () => {
+			inputView.isFocused = true;
+			expect( view.isFocused ).to.be.true;
+
+			inputView.isFocused = false;
+			expect( view.isFocused ).to.be.false;
+		} );
+
 		describe( 'dropdown', () => {
 			it( 'should be created', () => {
 				expect( view._dropdownView ).to.be.instanceOf( DropdownView );
@@ -352,8 +376,8 @@ describe( 'ColorInputView', () => {
 		it( 'should set the template', () => {
 			expect( view.element.classList.contains( 'ck' ) ).to.be.true;
 			expect( view.element.classList.contains( 'ck-input-color' ) ).to.be.true;
-			expect( view.element.firstChild ).to.equal( inputView.element );
-			expect( view.element.lastChild ).to.equal( view._dropdownView.element );
+			expect( view.element.firstChild ).to.equal( view._dropdownView.element );
+			expect( view.element.lastChild ).to.equal( inputView.element );
 		} );
 
 		describe( 'options', () => {