3 * A JavaScript version of CheckMatrixWidget.
6 * @extends OO.ui.Widget
9 * @param {Object} [config] Configuration options
10 * @cfg {Object} columns Required object mapping column labels (as HTML) to
12 * @cfg {Object} rows Required object mapping row labels (as HTML) to their
14 * @cfg {string[]} [forcedOn] Array of column-row tags to be displayed as
15 * enabled but unavailable to change.
16 * @cfg {string[]} [forcedOff] Array of column-row tags to be displayed as
17 * disabled but unavailable to change.
18 * @cfg {Object} [tooltips] Optional object mapping row labels to tooltips
19 * (as text, will be escaped).
21 mw
.widgets
.CheckMatrixWidget
= function MWWCheckMatrixWidget( config
) {
22 var $headRow
= $( '<tr>' ),
23 $table
= $( '<table>' ),
24 $thead
= $( '<thead>' ),
25 $tbody
= $( '<tbody>' ),
27 config
= config
|| {};
30 mw
.widgets
.CheckMatrixWidget
.parent
.call( this, config
);
32 this.name
= config
.name
;
34 this.rows
= config
.rows
|| {};
35 this.columns
= config
.columns
|| {};
36 this.tooltips
= config
.tooltips
|| [];
37 this.values
= config
.values
|| [];
38 this.forcedOn
= config
.forcedOn
|| [];
39 this.forcedOff
= config
.forcedOff
|| [];
42 $headRow
.append( $( '<td>' ).text( '\u00A0' ) );
44 // Iterate over the columns object (ignore the value)
45 // eslint-disable-next-line jquery/no-each-util
46 $.each( this.columns
, function ( columnLabel
) {
47 $headRow
.append( $( '<th>' ).html( columnLabel
) );
49 $thead
.append( $headRow
);
52 // eslint-disable-next-line jquery/no-each-util
53 $.each( this.rows
, function ( rowLabel
, rowTag
) {
54 var $row
= $( '<tr>' ),
55 labelField
= new OO
.ui
.FieldLayout(
56 new OO
.ui
.Widget(), // Empty widget, since we don't have the checkboxes here
58 label
: new OO
.ui
.HtmlSnippet( rowLabel
),
59 help
: widget
.tooltips
[ rowLabel
],
65 $row
.append( $( '<td>' ).append( labelField
.$element
) );
68 // eslint-disable-next-line jquery/no-each-util
69 $.each( widget
.columns
, function ( columnLabel
, columnTag
) {
70 var thisTag
= columnTag
+ '-' + rowTag
,
71 checkbox
= new OO
.ui
.CheckboxInputWidget( {
73 name
: widget
.name
? widget
.name
+ '[]' : undefined,
74 id
: widget
.id
? widget
.id
+ '-' + thisTag
: undefined,
75 selected
: widget
.isTagSelected( thisTag
),
76 disabled
: widget
.isTagDisabled( thisTag
)
79 widget
.checkboxes
[ thisTag
] = checkbox
;
80 $row
.append( $( '<td>' ).append( checkbox
.$element
) );
83 $tbody
.append( $row
);
86 .addClass( 'mw-htmlform-matrix mw-widget-checkMatrixWidget-matrix' )
87 .append( $thead
, $tbody
);
90 .addClass( 'mw-widget-checkMatrixWidget' )
96 OO
.inheritClass( mw
.widgets
.CheckMatrixWidget
, OO
.ui
.Widget
);
101 * Check whether the given tag is selected
103 * @param {string} tagName Tag name
104 * @return {boolean} Tag is selected
106 mw
.widgets
.CheckMatrixWidget
.prototype.isTagSelected = function ( tagName
) {
108 // If tag is not forced off
109 this.forcedOff
.indexOf( tagName
) === -1 &&
111 // If tag is in values
112 this.values
.indexOf( tagName
) > -1 ||
113 // If tag is forced on
114 this.forcedOn
.indexOf( tagName
) > -1
120 * Check whether the given tag is disabled
122 * @param {string} tagName Tag name
123 * @return {boolean} Tag is disabled
125 mw
.widgets
.CheckMatrixWidget
.prototype.isTagDisabled = function ( tagName
) {
127 // If the entire widget is disabled
129 // If tag is forced off or forced on
130 this.forcedOff
.indexOf( tagName
) > -1 ||
131 this.forcedOn
.indexOf( tagName
) > -1
137 mw
.widgets
.CheckMatrixWidget
.prototype.setDisabled = function ( isDisabled
) {
141 mw
.widgets
.CheckMatrixWidget
.parent
.prototype.setDisabled
.call( this, isDisabled
);
143 // setDisabled sometimes gets called before the widget is ready
144 if ( this.checkboxes
&& Object
.keys( this.checkboxes
).length
> 0 ) {
145 // Propagate to all checkboxes and update their disabled state
146 // eslint-disable-next-line jquery/no-each-util
147 $.each( this.checkboxes
, function ( name
, checkbox
) {
148 checkbox
.setDisabled( widget
.isTagDisabled( name
) );