textareaview.js 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  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 'ckeditor5-ui/src/view';
  9. import Template from 'ckeditor5-ui/src/template';
  10. /**
  11. * The TextAreaView class.
  12. *
  13. * @extends module:ui/view~View
  14. */
  15. export default class TextAreaView extends View {
  16. /**
  17. * @inheritDoc
  18. */
  19. constructor( locale ) {
  20. super( locale );
  21. /**
  22. * The value of the textarea.
  23. *
  24. * @observable
  25. * @member {String} #value
  26. */
  27. this.set( 'value' );
  28. /**
  29. * The `id` attribute of the textarea (i.e. to pair with a `<label>` element).
  30. *
  31. * @observable
  32. * @member {String} #id
  33. */
  34. this.set( 'id' );
  35. const bind = this.bindTemplate;
  36. this.template = new Template( {
  37. tag: 'textarea',
  38. attributes: {
  39. class: [
  40. 'ck-textarea',
  41. ],
  42. id: bind.to( 'id' )
  43. }
  44. } );
  45. // Note: `value` cannot be an HTML attribute, because it doesn't change HTMLInputElement value once changed.
  46. this.on( 'change:value', ( evt, propertyName, value ) => this.element.value = value || '' );
  47. }
  48. /**
  49. * Moves the focus to the textarea and selects the value.
  50. */
  51. select() {
  52. this.element.select();
  53. }
  54. }