textareaview.js 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. /**
  2. * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /**
  6. * @module image/imagealternatetext/ui/textareaview
  7. */
  8. import View from '@ckeditor/ckeditor5-ui/src/view';
  9. import Template from '@ckeditor/ckeditor5-ui/src/template';
  10. import '../../../theme/textareaview/theme.scss';
  11. /**
  12. * The TextAreaView class.
  13. *
  14. * @extends module:ui/view~View
  15. */
  16. export default class TextAreaView extends View {
  17. /**
  18. * @inheritDoc
  19. */
  20. constructor( locale ) {
  21. super( locale );
  22. /**
  23. * The value of the textarea.
  24. *
  25. * @observable
  26. * @member {String} #value
  27. */
  28. this.set( 'value' );
  29. /**
  30. * The `id` attribute of the textarea (i.e. to pair with a `<label>` element).
  31. *
  32. * @observable
  33. * @member {String} #id
  34. */
  35. this.set( 'id' );
  36. const bind = this.bindTemplate;
  37. this.template = new Template( {
  38. tag: 'textarea',
  39. attributes: {
  40. class: [
  41. 'ck-textarea',
  42. ],
  43. id: bind.to( 'id' )
  44. }
  45. } );
  46. // Note: `value` cannot be an HTML attribute, because it doesn't change HTMLInputElement value once changed.
  47. this.on( 'change:value', ( evt, propertyName, value ) => this.element.value = value || '' );
  48. }
  49. /**
  50. * Moves the focus to the textarea and selects the value.
  51. */
  52. select() {
  53. this.element.select();
  54. }
  55. }