8
0
Quellcode durchsuchen

Materialized labeled and text inputs PoC.

Aleksander Nowodzinski vor 6 Jahren
Ursprung
Commit
a356bd36d9

+ 47 - 1
packages/ckeditor5-ui/src/inputtext/inputtextview.js

@@ -8,6 +8,7 @@
  */
 
 import View from '../view';
+import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
 import '../../theme/components/inputtext/inputtext.css';
 
 /**
@@ -72,6 +73,31 @@ export default class InputTextView extends View {
 		 */
 		this.set( 'ariaDescribedById' );
 
+		/**
+		 * Stores the information about the editor UI focus and propagates it so various plugins and components
+		 * are unified as a focus group.
+		 *
+		 * @readonly
+		 * @member {module:utils/focustracker~FocusTracker} #focusTracker
+		 */
+		this.focusTracker = new FocusTracker();
+
+		/**
+		 * TODO
+		 *
+		 * @member {Boolean} #isFocused
+		 */
+		this.set( 'isFocused', false );
+
+		this.bind( 'isFocused' ).to( this.focusTracker );
+
+		/**
+		 * TODO
+		 *
+		 * @member {Boolean} #isEmpty
+		 */
+		this.set( 'isEmpty', false );
+
 		const bind = this.bindTemplate;
 
 		this.setTemplate( {
@@ -82,6 +108,8 @@ export default class InputTextView extends View {
 					'ck',
 					'ck-input',
 					'ck-input-text',
+					bind.if( 'isFocused', 'ck-input_focused' ),
+					bind.if( 'isEmpty', 'ck-input-text_empty' ),
 					bind.if( 'hasError', 'ck-error' )
 				],
 				id: bind.to( 'id' ),
@@ -91,7 +119,10 @@ export default class InputTextView extends View {
 				'aria-describedby': bind.to( 'ariaDescribedById' )
 			},
 			on: {
-				input: bind.to( 'input' )
+				input: bind.to( 'input' ),
+				change: bind.to( () => {
+					this.isEmpty = this._isEmpty;
+				} )
 			}
 		} );
 
@@ -109,16 +140,24 @@ export default class InputTextView extends View {
 	render() {
 		super.render();
 
+		this.focusTracker.add( this.element );
+
 		const setValue = value => {
 			this.element.value = ( !value && value !== 0 ) ? '' : value;
 		};
 
+		const setIsEmpty = () => {
+			this.isEmpty = this._isEmpty;
+		};
+
 		setValue( this.value );
+		setIsEmpty();
 
 		// Bind `this.value` to the DOM element's value.
 		// We cannot use `value` DOM attribute because removing it on Edge does not clear the DOM element's value property.
 		this.on( 'change:value', ( evt, name, value ) => {
 			setValue( value );
+			setIsEmpty();
 		} );
 	}
 
@@ -135,4 +174,11 @@ export default class InputTextView extends View {
 	focus() {
 		this.element.focus();
 	}
+
+	/**
+	 * TODO
+	 */
+	get _isEmpty() {
+		return this.element.value === '';
+	}
 }

+ 12 - 2
packages/ckeditor5-ui/src/labeledinput/labeledinputview.js

@@ -87,6 +87,13 @@ export default class LabeledInputView extends View {
 		 */
 		this.set( 'infoText', null );
 
+		/**
+		 * TODO
+		 *
+		 * @observable
+		 */
+		this.set( 'isFocused', false );
+
 		/**
 		 * The label view.
 		 *
@@ -127,6 +134,8 @@ export default class LabeledInputView extends View {
 			( errorText, infoText ) => errorText || infoText
 		);
 
+		this.bind( 'isFocused' ).to( this.inputView );
+
 		const bind = this.bindTemplate;
 
 		this.setTemplate( {
@@ -135,12 +144,13 @@ export default class LabeledInputView extends View {
 				class: [
 					'ck',
 					'ck-labeled-input',
-					bind.if( 'isReadOnly', 'ck-disabled' )
+					bind.if( 'isReadOnly', 'ck-disabled' ),
+					bind.if( 'isFocused', 'ck-labeled-input_focused' ),
 				]
 			},
 			children: [
-				this.labelView,
 				this.inputView,
+				this.labelView,
 				this.statusView
 			]
 		} );