|
@@ -8,6 +8,7 @@
|
|
|
*/
|
|
*/
|
|
|
|
|
|
|
|
import View from '../view';
|
|
import View from '../view';
|
|
|
|
|
+import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
|
|
|
import '../../theme/components/inputtext/inputtext.css';
|
|
import '../../theme/components/inputtext/inputtext.css';
|
|
|
|
|
|
|
|
/**
|
|
/**
|
|
@@ -72,6 +73,31 @@ export default class InputTextView extends View {
|
|
|
*/
|
|
*/
|
|
|
this.set( 'ariaDescribedById' );
|
|
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;
|
|
const bind = this.bindTemplate;
|
|
|
|
|
|
|
|
this.setTemplate( {
|
|
this.setTemplate( {
|
|
@@ -82,6 +108,8 @@ export default class InputTextView extends View {
|
|
|
'ck',
|
|
'ck',
|
|
|
'ck-input',
|
|
'ck-input',
|
|
|
'ck-input-text',
|
|
'ck-input-text',
|
|
|
|
|
+ bind.if( 'isFocused', 'ck-input_focused' ),
|
|
|
|
|
+ bind.if( 'isEmpty', 'ck-input-text_empty' ),
|
|
|
bind.if( 'hasError', 'ck-error' )
|
|
bind.if( 'hasError', 'ck-error' )
|
|
|
],
|
|
],
|
|
|
id: bind.to( 'id' ),
|
|
id: bind.to( 'id' ),
|
|
@@ -91,7 +119,10 @@ 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' ),
|
|
|
|
|
+ change: bind.to( () => {
|
|
|
|
|
+ this.isEmpty = this._isEmpty;
|
|
|
|
|
+ } )
|
|
|
}
|
|
}
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
@@ -109,16 +140,24 @@ export default class InputTextView extends View {
|
|
|
render() {
|
|
render() {
|
|
|
super.render();
|
|
super.render();
|
|
|
|
|
|
|
|
|
|
+ this.focusTracker.add( this.element );
|
|
|
|
|
+
|
|
|
const setValue = value => {
|
|
const setValue = value => {
|
|
|
this.element.value = ( !value && value !== 0 ) ? '' : value;
|
|
this.element.value = ( !value && value !== 0 ) ? '' : value;
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
|
|
+ const setIsEmpty = () => {
|
|
|
|
|
+ this.isEmpty = this._isEmpty;
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
setValue( this.value );
|
|
setValue( this.value );
|
|
|
|
|
+ setIsEmpty();
|
|
|
|
|
|
|
|
// Bind `this.value` to the DOM element's value.
|
|
// 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.
|
|
// 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 ) => {
|
|
this.on( 'change:value', ( evt, name, value ) => {
|
|
|
setValue( value );
|
|
setValue( value );
|
|
|
|
|
+ setIsEmpty();
|
|
|
} );
|
|
} );
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -135,4 +174,11 @@ export default class InputTextView extends View {
|
|
|
focus() {
|
|
focus() {
|
|
|
this.element.focus();
|
|
this.element.focus();
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
|
|
+ /**
|
|
|
|
|
+ * TODO
|
|
|
|
|
+ */
|
|
|
|
|
+ get _isEmpty() {
|
|
|
|
|
+ return this.element.value === '';
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|