labeledinputview.js 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  1. /**
  2. * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  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. /**
  12. * The labeled input view class.
  13. *
  14. * @extends module:ui/view~View
  15. */
  16. export default class LabeledInputView extends View {
  17. /**
  18. * Creates an instance of the labeled input view class.
  19. *
  20. * @param {module:utils/locale~Locale} locale The locale instance.
  21. * @param {Function} InputView Constructor of the input view.
  22. */
  23. constructor( locale, InputView ) {
  24. super( locale );
  25. const id = `ck-input-${ uid() }`;
  26. /**
  27. * The text of the label.
  28. *
  29. * @observable
  30. * @member {String} #label
  31. */
  32. this.set( 'label' );
  33. /**
  34. * The value of the input.
  35. *
  36. * @observable
  37. * @member {String} #value
  38. */
  39. this.set( 'value' );
  40. /**
  41. * Controls whether the component is in read-only mode.
  42. *
  43. * @observable
  44. * @member {Boolean} #isReadOnly
  45. */
  46. this.set( 'isReadOnly', false );
  47. /**
  48. * The label view.
  49. *
  50. * @member {module:ui/label/labelview~LabelView} #labelView
  51. */
  52. this.labelView = this._createLabelView( id );
  53. /**
  54. * The input view.
  55. *
  56. * @member {module:ui/view~View} #inputView
  57. */
  58. this.inputView = this._createInputView( InputView, id );
  59. const bind = this.bindTemplate;
  60. this.setTemplate( {
  61. tag: 'div',
  62. attributes: {
  63. class: [
  64. bind.if( 'isReadOnly', 'ck-disabled' )
  65. ]
  66. },
  67. children: [
  68. this.labelView,
  69. this.inputView
  70. ]
  71. } );
  72. }
  73. /**
  74. * Creates label view class instance and bind with view.
  75. *
  76. * @private
  77. * @param {String} id Unique id to set as labelView#for attribute.
  78. * @returns {module:ui/label/labelview~LabelView}
  79. */
  80. _createLabelView( id ) {
  81. const labelView = new LabelView( this.locale );
  82. labelView.for = id;
  83. labelView.bind( 'text' ).to( this, 'label' );
  84. return labelView;
  85. }
  86. /**
  87. * Creates input view class instance and bind with view.
  88. *
  89. * @private
  90. * @param {Function} InputView Input view constructor.
  91. * @param {String} id Unique id to set as inputView#id attribute.
  92. * @returns {module:ui/inputtext/inputtextview~InputTextView}
  93. */
  94. _createInputView( InputView, id ) {
  95. const inputView = new InputView( this.locale );
  96. inputView.id = id;
  97. inputView.bind( 'value' ).to( this );
  98. inputView.bind( 'isReadOnly' ).to( this );
  99. return inputView;
  100. }
  101. /**
  102. * Moves the focus to the input and selects the value.
  103. */
  104. select() {
  105. this.inputView.select();
  106. }
  107. /**
  108. * Focuses the input.
  109. */
  110. focus() {
  111. this.inputView.focus();
  112. }
  113. }