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
|
/*!
* MediaWiki Widgets - SelectWithInputWidget class.
*
* @copyright 2011-2017 MediaWiki Widgets Team and others; see AUTHORS.txt
* @license The MIT License (MIT); see LICENSE.txt
*/
( function ( $, mw ) {
/**
* Select with input widget. Displays an OO.ui.TextInputWidget along with
* an OO.ui.DropdownInputWidget.
* TODO Explain the OTHER option
*
* mw.loader.using( 'mediawiki.widgets.SelectWithInputWidget', function () {
* var swi = new mw.widgets.SelectWithInputWidget( {
* or: true,
* dropdowninput: {
* options: [
* { data: 'other', label: 'Other' },
* { data: 'a', label: 'First' },
* { data: 'b', label: 'Second' },
* { data: 'c', label: 'Third' }
* ]
* },
* textinput: {
* }
* } );
*
* $( 'body' ).append( swi.$element );
* } );
*
* @class mw.widgets.SelectWithInputWidget
* @extends OO.ui.Widget
*
* @constructor
* @param {Object} [config] Configuration options
* @cfg {Object} [dropdowninput] Config for the dropdown
* @cfg {Object} [textinput] Config for the text input
* @cfg {boolean} [or=false] Config for whether the widget is dropdown AND input
* or dropdown OR input
*/
mw.widgets.SelectWithInputWidget = function MwWidgetsSelectWithInputWidget( config ) {
// Config initialization
config = $.extend( { or: false }, config );
// Properties
this.textinput = new OO.ui.TextInputWidget( config.textinput );
this.dropdowninput = new OO.ui.DropdownInputWidget( config.dropdowninput );
this.or = config.or;
// Events
this.dropdowninput.on( 'change', this.onChange.bind( this ) );
// Parent constructor
mw.widgets.SelectWithInputWidget.parent.call( this, config );
// Initialization
this.$element
.addClass( 'mw-widget-selectWithInputWidget' )
.append(
this.dropdowninput.$element,
this.textinput.$element
);
this.onChange();
};
/* Setup */
OO.inheritClass( mw.widgets.SelectWithInputWidget, OO.ui.Widget );
/* Static Methods */
/**
* @inheritdoc
*/
mw.widgets.SelectWithInputWidget.static.reusePreInfuseDOM = function ( node, config ) {
config = mw.widgets.SelectWithInputWidget.parent.static.reusePreInfuseDOM( node, config );
config.dropdowninput = OO.ui.DropdownInputWidget.static.reusePreInfuseDOM(
$( node ).find( '.oo-ui-dropdownInputWidget' ),
config.dropdowninput
);
config.textinput = OO.ui.TextInputWidget.static.reusePreInfuseDOM(
$( node ).find( '.oo-ui-textInputWidget' ),
config.textinput
);
return config;
};
/**
* @inheritdoc
*/
mw.widgets.SelectWithInputWidget.static.gatherPreInfuseState = function ( node, config ) {
var state = mw.widgets.SelectWithInputWidget.parent.static.gatherPreInfuseState( node, config );
state.dropdowninput = OO.ui.DropdownInputWidget.static.gatherPreInfuseState(
$( node ).find( '.oo-ui-dropdownInputWidget' ),
config.dropdowninput
);
state.textinput = OO.ui.TextInputWidget.static.gatherPreInfuseState(
$( node ).find( '.oo-ui-textInputWidget' ),
config.textinput
);
return state;
};
/* Methods */
/**
* @inheritdoc
*/
mw.widgets.SelectWithInputWidget.prototype.restorePreInfuseState = function ( state ) {
mw.widgets.SelectWithInputWidget.parent.prototype.restorePreInfuseState.call( this, state );
this.dropdowninput.restorePreInfuseState( state.dropdowninput );
this.textinput.restorePreInfuseState( state.textinput );
};
/**
* @inheritdoc
*/
mw.widgets.SelectWithInputWidget.prototype.setDisabled = function ( disabled ) {
var textinputIsHidden = this.or && this.dropdowninput.getValue() !== 'other';
mw.widgets.SelectWithInputWidget.parent.prototype.setDisabled.call( this, disabled );
this.dropdowninput.setDisabled( disabled );
// It is impossible to submit a form with hidden fields failing validation, e.g. one that
// is required. However, validity is not checked for disabled fields, as these are not
// submitted with the form. So we should also disable fields when hiding them.
this.textinput.setDisabled( textinputIsHidden || disabled );
};
/**
* Handle change events on the DropdownInput
*
* @param {string|undefined} value
* @private
*/
mw.widgets.SelectWithInputWidget.prototype.onChange = function ( value ) {
if ( this.or ) {
value = value || this.dropdowninput.getValue();
this.textinput.$element.toggle( value === 'other' );
// It is impossible to submit a form with hidden fields failing validation, e.g. one that
// is required. However, validity is not checked for disabled fields, as these are not
// submitted with the form. So we should also disable fields when hiding them.
this.textinput.setDisabled( value !== 'other' || this.isDisabled() );
}
};
}( jQuery, mediaWiki ) );
|
