8
0

labeledinputview.js 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  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. 'ck-labeled-input',
  65. bind.if( 'isReadOnly', 'ck-disabled' )
  66. ]
  67. },
  68. children: [
  69. this.labelView,
  70. this.inputView
  71. ]
  72. } );
  73. }
  74. /**
  75. * Creates label view class instance and bind with view.
  76. *
  77. * @private
  78. * @param {String} id Unique id to set as labelView#for attribute.
  79. * @returns {module:ui/label/labelview~LabelView}
  80. */
  81. _createLabelView( id ) {
  82. const labelView = new LabelView( this.locale );
  83. labelView.for = id;
  84. labelView.bind( 'text' ).to( this, 'label' );
  85. return labelView;
  86. }
  87. /**
  88. * Creates input view class instance and bind with view.
  89. *
  90. * @private
  91. * @param {Function} InputView Input view constructor.
  92. * @param {String} id Unique id to set as inputView#id attribute.
  93. * @returns {module:ui/inputtext/inputtextview~InputTextView}
  94. */
  95. _createInputView( InputView, id ) {
  96. const inputView = new InputView( this.locale );
  97. inputView.id = id;
  98. inputView.bind( 'value' ).to( this );
  99. inputView.bind( 'isReadOnly' ).to( this );
  100. return inputView;
  101. }
  102. /**
  103. * Moves the focus to the input and selects the value.
  104. */
  105. select() {
  106. this.inputView.select();
  107. }
  108. /**
  109. * Focuses the input.
  110. */
  111. focus() {
  112. this.inputView.focus();
  113. }
  114. }