-
-
Notifications
You must be signed in to change notification settings - Fork 3.7k
/
formrowview.js
103 lines (91 loc) · 2.59 KB
/
formrowview.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
/**
* @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
*/
/**
* @module table/ui/formrowview
*/
import View from '@ckeditor/ckeditor5-ui/src/view';
import '../../theme/formrow.css';
/**
* The class representing a single row in a complex form,
* used by {@link module:table/tablecellproperties/ui/tablecellpropertiesview~TableCellPropertiesView}.
*
* **Note**: For now this class is private. When more use cases arrive (beyond ckeditor5-table),
* it will become a component in ckeditor5-ui.
*
* @private
* @extends module:ui/view~View
*/
export default class FormRowView extends View {
/**
* Creates an instance of the form row class.
*
* @param {module:utils/locale~Locale} locale The locale instance.
* @param {Object} options
* @param {Array.<module:ui/view~View>} options.children
* @param {String} [options.class]
* @param {module:ui/view~View} [options.labelView] When passed, the row gets the `group` and `aria-labelledby`
* DOM attributes and gets described by the label.
*/
constructor( locale, options = {} ) {
super( locale );
const bind = this.bindTemplate;
/**
* An additional CSS class added to the {@link #element}.
*
* @observable
* @member {String} #class
*/
this.set( 'class', options.class || null );
/**
* A collection of row items (buttons, dropdowns, etc.).
*
* @readonly
* @member {module:ui/viewcollection~ViewCollection}
*/
this.children = this.createCollection();
if ( options.children ) {
options.children.forEach( child => this.children.add( child ) );
}
/**
* The role property reflected by the `role` DOM attribute of the {@link #element}.
*
* **Note**: Used only when a `labelView` is passed to constructor `options`.
*
* @private
* @observable
* @member {String} #role
*/
this.set( '_role', null );
/**
* The ARIA property reflected by the `aria-labelledby` DOM attribute of the {@link #element}.
*
* **Note**: Used only when a `labelView` is passed to constructor `options`.
*
* @private
* @observable
* @member {String} #ariaLabelledBy
*/
this.set( '_ariaLabelledBy', null );
if ( options.labelView ) {
this.set( {
_role: 'group',
_ariaLabelledBy: options.labelView.id
} );
}
this.setTemplate( {
tag: 'div',
attributes: {
class: [
'ck',
'ck-form__row',
bind.to( 'class' )
],
role: bind.to( '_role' ),
'aria-labelledby': bind.to( '_ariaLabelledBy' )
},
children: this.children
} );
}
}