imageuploadformrowview.js 2.7 KB

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