8
0

formheaderview.js 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  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/formheader/formheaderview
  7. */
  8. import View from '../view';
  9. import '../../theme/components/formheader/formheader.css';
  10. /**
  11. * The class component representing a form header view. It should be used in more advanced forms to
  12. * describe the main purpose of the form.
  13. *
  14. * By default the component contains a bolded label view that has to be set. The label is usually a short (at most 3-word) string.
  15. * The component can also be extended by any other elements, like: icons, dropdowns, etc.
  16. *
  17. * It is used i.a.
  18. * by {@link module:table/tablecellproperties/ui/tablecellpropertiesview~TableCellPropertiesView}
  19. * and {@link module:special-characters/ui/specialcharactersnavigationview~SpecialCharactersNavigationView}.
  20. *
  21. * The latter is an example, where the component has been extended by {@link module:ui/dropdown/dropdownview~DropdownView} view.
  22. *
  23. * @extends module:ui/view~View
  24. */
  25. export default class FormHeaderView extends View {
  26. /**
  27. * Creates an instance of the form header class.
  28. *
  29. * @param {module:utils/locale~Locale} locale The locale instance.
  30. * @param {Object} options
  31. * @param {String} options.label A label.
  32. * @param {String} [options.class] An additional class.
  33. */
  34. constructor( locale, options = {} ) {
  35. super( locale );
  36. const bind = this.bindTemplate;
  37. /**
  38. * The label of the header.
  39. *
  40. * @observable
  41. * @member {String} #label
  42. */
  43. this.set( 'label', options.label || '' );
  44. /**
  45. * An additional CSS class added to the {@link #element}.
  46. *
  47. * @observable
  48. * @member {String} #class
  49. */
  50. this.set( 'class', options.class || null );
  51. /**
  52. * A collection of header items.
  53. *
  54. * @readonly
  55. * @member {module:ui/viewcollection~ViewCollection}
  56. */
  57. this.children = this.createCollection();
  58. this.setTemplate( {
  59. tag: 'div',
  60. attributes: {
  61. class: [
  62. 'ck',
  63. 'ck-form__header',
  64. bind.to( 'class' )
  65. ]
  66. },
  67. children: this.children
  68. } );
  69. const label = new View( locale );
  70. label.setTemplate( {
  71. tag: 'span',
  72. attributes: {
  73. class: [
  74. 'ck',
  75. 'ck-form__header__label'
  76. ]
  77. },
  78. children: [
  79. { text: bind.to( 'label' ) }
  80. ]
  81. } );
  82. this.children.add( label );
  83. }
  84. }