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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
|
( function () {
/**
* @classdesc A JavaScript version of CheckMatrixWidget.
*
* @class
* @extends OO.ui.Widget
*
* @constructor
* @description Create an instance of `mw.widgets.CheckMatrixWidget`.
* @param {Object} [config] Configuration options
* @param {Object} config.columns Required object mapping column labels (as HTML) to
* their tags.
* @param {Object} config.rows Required object mapping row labels (as HTML) to their
* tags.
* @param {string[]} [config.forcedOn] Array of column-row tags to be displayed as
* enabled but unavailable to change.
* @param {string[]} [config.forcedOff] Array of column-row tags to be displayed as
* disabled but unavailable to change.
* @param {Object} [config.tooltips] Optional object mapping row labels to tooltips
* (as text, will be escaped).
* @param {Object} [config.tooltipsHtml] Optional object mapping row labels to tooltips
* (as HTML). Takes precedence over text tooltips.
*/
mw.widgets.CheckMatrixWidget = function MWWCheckMatrixWidget( config ) {
config = config || {};
// Parent constructor
mw.widgets.CheckMatrixWidget.super.call( this, config );
this.checkboxes = {};
this.name = config.name;
this.id = config.id;
this.rows = config.rows || {};
this.columns = config.columns || {};
this.tooltips = config.tooltips || [];
this.tooltipsHtml = config.tooltipsHtml || [];
this.values = config.values || [];
this.forcedOn = config.forcedOn || [];
this.forcedOff = config.forcedOff || [];
// Build header
const $headRow = $( '<tr>' );
$headRow.append( $( '<td>' ).text( '\u00A0' ) );
// Iterate over the columns object (ignore the value)
// eslint-disable-next-line no-jquery/no-each-util
$.each( this.columns, ( columnLabel ) => {
$headRow.append( $( '<th>' ).html( columnLabel ) );
} );
const $thead = $( '<thead>' );
$thead.append( $headRow );
const $tbody = $( '<tbody>' );
// Build table
// eslint-disable-next-line no-jquery/no-each-util
$.each( this.rows, ( rowLabel, rowTag ) => {
const $row = $( '<tr>' ),
labelField = new OO.ui.FieldLayout(
new OO.ui.Widget(), // Empty widget, since we don't have the checkboxes here
{
label: new OO.ui.HtmlSnippet( rowLabel ),
help: this.tooltips[ rowLabel ] ||
this.tooltipsHtml[ rowLabel ] && new OO.ui.HtmlSnippet( this.tooltipsHtml[ rowLabel ] ),
align: 'inline'
}
);
// Label
$row.append( $( '<td>' ).append( labelField.$element ) );
// Columns
// eslint-disable-next-line no-jquery/no-each-util
$.each( this.columns, ( columnLabel, columnTag ) => {
const thisTag = columnTag + '-' + rowTag,
checkbox = new OO.ui.CheckboxInputWidget( {
value: thisTag,
name: this.name ? this.name + '[]' : undefined,
id: this.id ? this.id + '-' + thisTag : undefined,
selected: this.isTagSelected( thisTag ),
disabled: this.isTagDisabled( thisTag )
} );
this.checkboxes[ thisTag ] = checkbox;
$row.append( $( '<td>' ).append( checkbox.$element ) );
} );
$tbody.append( $row );
} );
const $table = $( '<table>' );
$table
.addClass( 'mw-htmlform-matrix mw-widget-checkMatrixWidget-matrix' )
.append( $thead, $tbody );
this.$element
.addClass( 'mw-widget-checkMatrixWidget' )
.append( $table );
};
/* Setup */
OO.inheritClass( mw.widgets.CheckMatrixWidget, OO.ui.Widget );
/* Methods */
/**
* Check whether the given tag is selected.
*
* @param {string} tagName Tag name
* @return {boolean} Tag is selected
*/
mw.widgets.CheckMatrixWidget.prototype.isTagSelected = function ( tagName ) {
return (
// If tag is not forced off
!this.forcedOff.includes( tagName ) &&
(
// If tag is in values
this.values.includes( tagName ) ||
// If tag is forced on
this.forcedOn.includes( tagName )
)
);
};
/**
* Check whether the given tag is disabled.
*
* @param {string} tagName Tag name
* @return {boolean} Tag is disabled
*/
mw.widgets.CheckMatrixWidget.prototype.isTagDisabled = function ( tagName ) {
return (
// If the entire widget is disabled
this.isDisabled() ||
// If tag is forced off or forced on
this.forcedOff.includes( tagName ) ||
this.forcedOn.includes( tagName )
);
};
/**
* @inheritdoc
*/
mw.widgets.CheckMatrixWidget.prototype.setDisabled = function ( isDisabled ) {
// Parent method
mw.widgets.CheckMatrixWidget.super.prototype.setDisabled.call( this, isDisabled );
// setDisabled sometimes gets called before the widget is ready
if ( this.checkboxes ) {
// Propagate to all checkboxes and update their disabled state
// eslint-disable-next-line no-jquery/no-each-util
$.each( this.checkboxes, ( name, checkbox ) => {
checkbox.setDisabled( this.isTagDisabled( name ) );
} );
}
};
}() );
|
