formrowview.js 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  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/formrowview
  7. */
  8. import View from '@ckeditor/ckeditor5-ui/src/view';
  9. /**
  10. * The class representing a single row in the complex form,
  11. * used by {@link module:table/ui/tablecellpropertiesview~TableCellPropertiesView}.
  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 FormRowView extends View {
  20. /**
  21. * Creates an instance of the form row class.
  22. *
  23. * @param {module:utils/locale~Locale} locale The locale instance.
  24. * @param {Object} options
  25. * @param {Array.<module:ui/view~View>} options.children
  26. * @param {String} [options.class]
  27. * @param {module:ui/view~View} [options.labelView] When passed, the row gets the `group` and `aria-labelledby`
  28. * DOM attributes and get described by the label.
  29. */
  30. constructor( locale, options = {} ) {
  31. super( locale );
  32. const bind = this.bindTemplate;
  33. /**
  34. * An additional CSS class added to the {@link #element}.
  35. *
  36. * @observable
  37. * @member {String} #class
  38. */
  39. this.set( 'class', options.class || null );
  40. /**
  41. * A collection of row items (buttons, dropdowns, etc.).
  42. *
  43. * @readonly
  44. * @member {module:ui/viewcollection~ViewCollection}
  45. */
  46. this.children = this.createCollection();
  47. if ( options.children ) {
  48. options.children.forEach( child => this.children.add( child ) );
  49. }
  50. /**
  51. * The role property reflected by the `role` DOM attribute of the {@link #element}.
  52. *
  53. * **Note**: Used only when a `labelView` is passed to constructor `options`.
  54. *
  55. * @private
  56. * @observable
  57. * @member {String} #role
  58. */
  59. this.set( '_role', null );
  60. /**
  61. * The ARIA property reflected by the `aria-labelledby` DOM attribute of the {@link #element}.
  62. *
  63. * **Note**: Used only when a `labelView` is passed to constructor `options`.
  64. *
  65. * @private
  66. * @observable
  67. * @member {String} #ariaLabelledBy
  68. */
  69. this.set( '_ariaLabelledBy', null );
  70. if ( options.labelView ) {
  71. this.set( {
  72. _role: 'group',
  73. _ariaLabelledBy: options.labelView.id
  74. } );
  75. }
  76. this.setTemplate( {
  77. tag: 'div',
  78. attributes: {
  79. class: [
  80. 'ck',
  81. 'ck-form__row',
  82. bind.to( 'class' )
  83. ],
  84. role: bind.to( '_role' ),
  85. 'aria-labelledby': bind.to( '_ariaLabelledBy' )
  86. },
  87. children: this.children
  88. } );
  89. }
  90. }