labeledinputview.js 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239
  1. /**
  2. * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  4. */
  5. /**
  6. * @module ui/labeledinput/labeledinputview
  7. */
  8. import View from '../view';
  9. import uid from '@ckeditor/ckeditor5-utils/src/uid';
  10. import LabelView from '../label/labelview';
  11. import '../../theme/components/labeledinput/labeledinput.css';
  12. /**
  13. * The labeled input view class.
  14. *
  15. * @extends module:ui/view~View
  16. */
  17. export default class LabeledInputView extends View {
  18. /**
  19. * Creates an instance of the labeled input view class.
  20. *
  21. * @param {module:utils/locale~Locale} locale The locale instance.
  22. * @param {Function} InputView Constructor of the input view.
  23. */
  24. constructor( locale, InputView ) {
  25. super( locale );
  26. const inputUid = `ck-input-${ uid() }`;
  27. const statusUid = `ck-status-${ uid() }`;
  28. /**
  29. * The text of the label.
  30. *
  31. * @observable
  32. * @member {String} #label
  33. */
  34. this.set( 'label' );
  35. /**
  36. * The value of the input.
  37. *
  38. * @observable
  39. * @member {String} #value
  40. */
  41. this.set( 'value' );
  42. /**
  43. * Controls whether the component is in read-only mode.
  44. *
  45. * @observable
  46. * @member {Boolean} #isReadOnly
  47. */
  48. this.set( 'isReadOnly', false );
  49. /**
  50. * The validation error text. When set, it will be displayed
  51. * next to the {@link #inputView} as a typical validation error message.
  52. * Set it to `null` to hide the message.
  53. *
  54. * **Note:** Setting this property to anything but `null` will automatically
  55. * make the {@link module:ui/inputtext/inputtextview~InputTextView#hasError `hasError`}
  56. * of the {@link #inputView} `true`.
  57. *
  58. * **Note:** Typing in the {@link #inputView} which fires the
  59. * {@link module:ui/inputtext/inputtextview~InputTextView#event:input `input` event}
  60. * resets this property back to `null`, indicating that the input field can be re–validated.
  61. *
  62. * @observable
  63. * @member {String|null} #errorText
  64. */
  65. this.set( 'errorText', null );
  66. /**
  67. * The additional information text displayed next to the {@link #inputView} which can
  68. * be used to inform the user about the purpose of the input, provide help or hints.
  69. *
  70. * Set it to `null` to hide the message.
  71. *
  72. * **Note:** This text will be displayed in the same place as {@link #errorText} but the
  73. * latter always takes precedence: if the {@link #errorText} is set, it replaces
  74. * {@link #errorText} for as long as the value of the input is invalid.
  75. *
  76. * @observable
  77. * @member {String|null} #infoText
  78. */
  79. this.set( 'infoText', null );
  80. /**
  81. * The label view.
  82. *
  83. * @member {module:ui/label/labelview~LabelView} #labelView
  84. */
  85. this.labelView = this._createLabelView( inputUid );
  86. /**
  87. * The input view.
  88. *
  89. * @member {module:ui/inputtext/inputtextview~InputTextView} #inputView
  90. */
  91. this.inputView = this._createInputView( InputView, inputUid, statusUid );
  92. /**
  93. * The status view for the {@link #inputView}. It displays {@link #errorText} and
  94. * {@link #infoText}.
  95. *
  96. * @member {module:ui/view~View} #statusView
  97. */
  98. this.statusView = this._createStatusView( statusUid );
  99. /**
  100. * The combined status text made of {@link #errorText} and {@link #infoText}.
  101. * Note that when present, {@link #errorText} always takes precedence in the
  102. * status.
  103. *
  104. * @see #errorText
  105. * @see #infoText
  106. * @see #statusView
  107. * @private
  108. * @observable
  109. * @member {String|null} #_statusText
  110. */
  111. this.bind( '_statusText' ).to(
  112. this, 'errorText',
  113. this, 'infoText',
  114. ( errorText, infoText ) => errorText || infoText
  115. );
  116. const bind = this.bindTemplate;
  117. this.setTemplate( {
  118. tag: 'div',
  119. attributes: {
  120. class: [
  121. 'ck',
  122. 'ck-labeled-input',
  123. bind.if( 'isReadOnly', 'ck-disabled' )
  124. ]
  125. },
  126. children: [
  127. this.labelView,
  128. this.inputView,
  129. this.statusView
  130. ]
  131. } );
  132. }
  133. /**
  134. * Creates label view class instance and bind with view.
  135. *
  136. * @private
  137. * @param {String} id Unique id to set as labelView#for attribute.
  138. * @returns {module:ui/label/labelview~LabelView}
  139. */
  140. _createLabelView( id ) {
  141. const labelView = new LabelView( this.locale );
  142. labelView.for = id;
  143. labelView.bind( 'text' ).to( this, 'label' );
  144. return labelView;
  145. }
  146. /**
  147. * Creates input view class instance and bind with view.
  148. *
  149. * @private
  150. * @param {Function} InputView Input view constructor.
  151. * @param {String} inputUid Unique id to set as inputView#id attribute.
  152. * @param {String} statusUid Unique id of the status for the input's `aria-describedby` attribute.
  153. * @returns {module:ui/inputtext/inputtextview~InputTextView}
  154. */
  155. _createInputView( InputView, inputUid, statusUid ) {
  156. const inputView = new InputView( this.locale, statusUid );
  157. inputView.id = inputUid;
  158. inputView.ariaDescribedById = statusUid;
  159. inputView.bind( 'value' ).to( this );
  160. inputView.bind( 'isReadOnly' ).to( this );
  161. inputView.bind( 'hasError' ).to( this, 'errorText', value => !!value );
  162. inputView.on( 'input', () => {
  163. // UX: Make the error text disappear and disable the error indicator as the user
  164. // starts fixing the errors.
  165. this.errorText = null;
  166. } );
  167. return inputView;
  168. }
  169. /**
  170. * Creates the status view instance. It displays {@link #errorText} and {@link #infoText}
  171. * next to the {@link #inputView}. See {@link #_statusText}.
  172. *
  173. * @private
  174. * @param {String} statusUid Unique id of the status, shared with the input's `aria-describedby` attribute.
  175. * @returns {module:ui/view~View}
  176. */
  177. _createStatusView( statusUid ) {
  178. const statusView = new View( this.locale );
  179. const bind = this.bindTemplate;
  180. statusView.setTemplate( {
  181. tag: 'div',
  182. attributes: {
  183. class: [
  184. 'ck',
  185. 'ck-labeled-input__status',
  186. bind.if( 'errorText', 'ck-labeled-input__status_error' ),
  187. bind.if( '_statusText', 'ck-hidden', value => !value )
  188. ],
  189. id: statusUid,
  190. role: bind.if( 'errorText', 'alert' )
  191. },
  192. children: [
  193. {
  194. text: bind.to( '_statusText' )
  195. }
  196. ]
  197. } );
  198. return statusView;
  199. }
  200. /**
  201. * Moves the focus to the input and selects the value.
  202. */
  203. select() {
  204. this.inputView.select();
  205. }
  206. /**
  207. * Focuses the input.
  208. */
  209. focus() {
  210. this.inputView.focus();
  211. }
  212. }