formheaderview.js 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  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 table/ui/formheaderview
  7. */
  8. import View from '@ckeditor/ckeditor5-ui/src/view';
  9. import '../../theme/formheader.css';
  10. /**
  11. * The class representing a header in a complex form.
  12. *
  13. * **Note**: For now this class is private. When more use cases arrive (beyond ckeditor5-table),
  14. * it will become a component in ckeditor5-ui.
  15. *
  16. * @private
  17. * @extends module:ui/view~View
  18. */
  19. export default class FormHeaderView extends View {
  20. /**
  21. * Creates an instance of the form header view class.
  22. *
  23. * @param {module:utils/locale~Locale} locale The locale instance.
  24. * @param {Object} [options]
  25. * @param {String} [options.class] When passed, the class will be set on the header element.
  26. * @param {String} [options.label] When passed, the label will be used for the header.
  27. */
  28. constructor( locale, options = {} ) {
  29. super( locale );
  30. const bind = this.bindTemplate;
  31. /**
  32. * A collection of header items.
  33. *
  34. * @readonly
  35. * @member {module:ui/viewcollection~ViewCollection}
  36. */
  37. this.children = this.createCollection();
  38. /**
  39. * An additional CSS class added to the {@link #element}.
  40. *
  41. * @observable
  42. * @member {String} #class
  43. */
  44. this.set( 'class', options.class || null );
  45. /**
  46. * Label of the header.
  47. *
  48. * @readonly
  49. * @member {String} #label
  50. */
  51. this.set( 'label', options.label || '' );
  52. const label = new View( locale );
  53. label.setTemplate( {
  54. tag: 'span',
  55. attributes: {
  56. class: [
  57. 'ck',
  58. 'ck-form__header__label'
  59. ],
  60. },
  61. children: [
  62. { text: bind.to( 'label' ) }
  63. ]
  64. } );
  65. this.children.add( label );
  66. this.setTemplate( {
  67. tag: 'div',
  68. attributes: {
  69. class: [
  70. 'ck',
  71. 'ck-form__header',
  72. bind.to( 'class' )
  73. ]
  74. },
  75. children: this.children
  76. } );
  77. }
  78. }