8
0

labelview.js 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. /**
  2. * @license Copyright (c) 2003-2020, 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/label/labelview
  7. */
  8. import View from '../view';
  9. import uid from '@ckeditor/ckeditor5-utils/src/uid';
  10. import '../../theme/components/label/label.css';
  11. /**
  12. * The label view class.
  13. *
  14. * @extends module:ui/view~View
  15. */
  16. export default class LabelView extends View {
  17. /**
  18. * @inheritDoc
  19. */
  20. constructor( locale ) {
  21. super( locale );
  22. /**
  23. * The text of the label.
  24. *
  25. * @observable
  26. * @member {String} #text
  27. */
  28. this.set( 'text' );
  29. /**
  30. * The `for` attribute of the label (i.e. to pair with an `<input>` element).
  31. *
  32. * @observable
  33. * @member {String} #for
  34. */
  35. this.set( 'for' );
  36. /**
  37. * An unique id of the label. It can be used by other UI components to reference
  38. * the label, for instance, using the `aria-describedby` DOM attribute.
  39. *
  40. * @member {String} #id
  41. */
  42. this.id = `ck-editor__label_${ uid() }`;
  43. const bind = this.bindTemplate;
  44. this.setTemplate( {
  45. tag: 'label',
  46. attributes: {
  47. class: [
  48. 'ck',
  49. 'ck-label'
  50. ],
  51. id: this.id,
  52. for: bind.to( 'for' )
  53. },
  54. children: [
  55. {
  56. text: bind.to( 'text' )
  57. }
  58. ]
  59. } );
  60. }
  61. }