소스 검색

Display a defined color label in text input field. Closes #6241.

Tomek Wytrębowicz 5 년 전
부모
커밋
543adbc909
2개의 변경된 파일53개의 추가작업 그리고 6개의 파일을 삭제
  1. 49 4
      packages/ckeditor5-table/src/ui/colorinputview.js
  2. 4 2
      packages/ckeditor5-ui/src/inputtext/inputtextview.js

+ 49 - 4
packages/ckeditor5-table/src/ui/colorinputview.js

@@ -105,6 +105,16 @@ export default class ColorInputView extends View {
 		 */
 		 */
 		this._inputView = this._createInputTextView( locale );
 		this._inputView = this._createInputTextView( locale );
 
 
+		/**
+		 * The flag that indicates whether the user is still typing.
+		 * If set to true, it means that the text input field ({@link #_inputView}) still has the focus.
+		 * So, we should interrupt the user by replacing the input's value.
+		 * 
+		 * @protected
+		 * @member {Boolean}
+		 */
+		this._stillTyping = false;
+
 		this.setTemplate( {
 		this.setTemplate( {
 			tag: 'div',
 			tag: 'div',
 			attributes: {
 			attributes: {
@@ -122,6 +132,31 @@ export default class ColorInputView extends View {
 				this._dropdownView
 				this._dropdownView
 			]
 			]
 		} );
 		} );
+
+		this.on( 
+			'change:value',
+			( ev, n, inputValue ) => this._setInputValue( inputValue ),
+			{ priority: 'high' }
+		);
+	}
+
+	/**
+	 * Sets {@link #_inputView}'s value property to the color value or color label,
+	 * if there is one and the user is not typing.
+	 * 
+	 * @private
+	 * @param {String} inputValue Color value to be set.
+	 */
+	_setInputValue( inputValue ){
+		if( !this._stillTyping ){
+			// Check if the value matches one of our defined colors.
+			const mappedColor = this.options.colorDefinitions.find( def => inputValue === def.color );
+			if ( mappedColor ) {
+				this._inputView.value = mappedColor.label;
+			} else {
+				this._inputView.value = inputValue || '';
+			}
+		}
 	}
 	}
 
 
 	/**
 	/**
@@ -193,14 +228,25 @@ export default class ColorInputView extends View {
 	 */
 	 */
 	_createInputTextView() {
 	_createInputTextView() {
 		const locale = this.locale;
 		const locale = this.locale;
-		const inputView = new InputTextView( locale );
+		const inputView = new InputTextView( locale, {
+			blur: this.bindTemplate.to('blur')
+		} );
 
 
-		inputView.bind( 'value' ).to( this );
+		inputView.value = this.value;
 		inputView.bind( 'isReadOnly' ).to( this );
 		inputView.bind( 'isReadOnly' ).to( this );
 		inputView.bind( 'hasError' ).to( this );
 		inputView.bind( 'hasError' ).to( this );
 
 
 		inputView.on( 'input', () => {
 		inputView.on( 'input', () => {
-			this.value = inputView.element.value;
+			const inputValue = inputView.element.value;
+			// Check if the value matches one of our defined colors' label.
+			const mappedColor = this.options.colorDefinitions.find( def => inputValue === def.label );
+
+			this._stillTyping = true;
+			this.value = mappedColor && mappedColor.color || inputValue;
+		} );
+		this.on( 'blur', () => {
+			this._stillTyping = false;
+			this._setInputValue( inputView.element.value );
 		} );
 		} );
 
 
 		inputView.delegate( 'input' ).to( this );
 		inputView.delegate( 'input' ).to( this );
@@ -247,7 +293,6 @@ export default class ColorInputView extends View {
 			this._dropdownView.isOpen = false;
 			this._dropdownView.isOpen = false;
 			this.fire( 'input' );
 			this.fire( 'input' );
 		} );
 		} );
-
 		colorGrid.bind( 'selectedColor' ).to( this, 'value' );
 		colorGrid.bind( 'selectedColor' ).to( this, 'value' );
 
 
 		return colorGrid;
 		return colorGrid;

+ 4 - 2
packages/ckeditor5-ui/src/inputtext/inputtextview.js

@@ -18,8 +18,9 @@ import '../../theme/components/inputtext/inputtext.css';
 export default class InputTextView extends View {
 export default class InputTextView extends View {
 	/**
 	/**
 	 * @inheritDoc
 	 * @inheritDoc
+	 * @param {Object} listeners Map of additional listeners to be attached on template
 	 */
 	 */
-	constructor( locale ) {
+	constructor( locale, listeners ) {
 		super( locale );
 		super( locale );
 
 
 		/**
 		/**
@@ -91,7 +92,8 @@ export default class InputTextView extends View {
 				'aria-describedby': bind.to( 'ariaDescribedById' )
 				'aria-describedby': bind.to( 'ariaDescribedById' )
 			},
 			},
 			on: {
 			on: {
-				input: bind.to( 'input' )
+				input: bind.to( 'input' ),
+				...listeners
 			}
 			}
 		} );
 		} );