| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138 |
- /**
- * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
- /**
- * @module ui/inputtext/inputtextview
- */
- import View from '../view';
- import '../../theme/components/inputtext/inputtext.css';
- /**
- * The text input view class.
- *
- * @extends module:ui/view~View
- */
- export default class InputTextView extends View {
- /**
- * @inheritDoc
- */
- constructor( locale ) {
- super( locale );
- /**
- * The value of the input.
- *
- * @observable
- * @member {String} #value
- */
- this.set( 'value' );
- /**
- * The `id` attribute of the input (i.e. to pair with a `<label>` element).
- *
- * @observable
- * @member {String} #id
- */
- this.set( 'id' );
- /**
- * The `placeholder` attribute of the input.
- *
- * @observable
- * @member {String} #placeholder
- */
- this.set( 'placeholder' );
- /**
- * Controls whether the input view is in read-only mode.
- *
- * @observable
- * @member {Boolean} #isReadOnly
- */
- this.set( 'isReadOnly', false );
- /**
- * Set to `true` when the field has some error. Usually controlled via
- * {@link module:ui/labeledinput/labeledinputview~LabeledInputView#errorText}.
- *
- * @observable
- * @member {Boolean} #hasError
- */
- this.set( 'hasError', false );
- /**
- * The `id` of the element describing this field, e.g. when it has
- * some error, it helps screen readers read the error text.
- *
- * @observable
- * @member {Boolean} #ariaDesribedById
- */
- this.set( 'ariaDesribedById' );
- const bind = this.bindTemplate;
- this.setTemplate( {
- tag: 'input',
- attributes: {
- type: 'text',
- class: [
- 'ck',
- 'ck-input',
- 'ck-input-text',
- bind.if( 'hasError', 'ck-error' )
- ],
- id: bind.to( 'id' ),
- placeholder: bind.to( 'placeholder' ),
- readonly: bind.to( 'isReadOnly' ),
- 'aria-invalid': bind.if( 'hasError', true ),
- 'aria-describedby': bind.to( 'ariaDesribedById' )
- },
- on: {
- input: bind.to( 'input' )
- }
- } );
- /**
- * Fired when the user types in the input. Corresponds to the native
- * DOM `input` event.
- *
- * @event input
- */
- }
- /**
- * @inheritDoc
- */
- render() {
- super.render();
- const setValue = value => {
- this.element.value = ( !value && value !== 0 ) ? '' : value;
- };
- setValue( this.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.
- this.on( 'change:value', ( evt, name, value ) => {
- setValue( value );
- } );
- }
- /**
- * Moves the focus to the input and selects the value.
- */
- select() {
- this.element.select();
- }
- /**
- * Focuses the input.
- */
- focus() {
- this.element.focus();
- }
- }
|