2 * MediaWiki Widgets - SelectWithInputWidget class.
4 * @copyright 2011-2017 MediaWiki Widgets Team and others; see AUTHORS.txt
5 * @license The MIT License (MIT); see LICENSE.txt
10 * Select with input widget. Displays an OO.ui.TextInputWidget along with
11 * an OO.ui.DropdownInputWidget.
12 * TODO Explain the OTHER option
14 * mw.loader.using( 'mediawiki.widgets.SelectWithInputWidget', function () {
15 * var swi = new mw.widgets.SelectWithInputWidget( {
19 * { data: 'other', label: 'Other' },
20 * { data: 'a', label: 'First' },
21 * { data: 'b', label: 'Second' },
22 * { data: 'c', label: 'Third' }
29 * $( 'body' ).append( swi.$element );
32 * @class mw.widgets.SelectWithInputWidget
33 * @extends OO.ui.Widget
36 * @param {Object} [config] Configuration options
37 * @cfg {Object} [dropdowninput] Config for the dropdown
38 * @cfg {Object} [textinput] Config for the text input
39 * @cfg {boolean} [or=false] Config for whether the widget is dropdown AND input
40 * or dropdown OR input
42 mw
.widgets
.SelectWithInputWidget
= function MwWidgetsSelectWithInputWidget( config
) {
43 // Config initialization
44 config
= $.extend( { or
: false }, config
);
47 this.textinput
= new OO
.ui
.TextInputWidget( config
.textinput
);
48 this.dropdowninput
= new OO
.ui
.DropdownInputWidget( config
.dropdowninput
);
50 if ( config
.or
=== true ) {
51 this.dropdowninput
.on( 'change', this.onChange
.bind( this ) );
56 mw
.widgets
.SelectWithInputWidget
.parent
.call( this, config
);
60 .addClass( 'mw-widget-selectWithInputWidget' )
62 this.dropdowninput
.$element
,
63 this.textinput
.$element
68 OO
.inheritClass( mw
.widgets
.SelectWithInputWidget
, OO
.ui
.Widget
);
75 mw
.widgets
.SelectWithInputWidget
.static.reusePreInfuseDOM = function ( node
, config
) {
76 config
= mw
.widgets
.SelectWithInputWidget
.parent
.static.reusePreInfuseDOM( node
, config
);
77 config
.dropdowninput
= OO
.ui
.DropdownInputWidget
.static.reusePreInfuseDOM(
78 $( node
).find( '.oo-ui-dropdownInputWidget' ),
81 config
.textinput
= OO
.ui
.TextInputWidget
.static.reusePreInfuseDOM(
82 $( node
).find( '.oo-ui-textInputWidget' ),
91 mw
.widgets
.SelectWithInputWidget
.static.gatherPreInfuseState = function ( node
, config
) {
92 var state
= mw
.widgets
.SelectWithInputWidget
.parent
.static.gatherPreInfuseState( node
, config
);
93 state
.dropdowninput
= OO
.ui
.DropdownInputWidget
.static.gatherPreInfuseState(
94 $( node
).find( '.oo-ui-dropdownInputWidget' ),
97 state
.textinput
= OO
.ui
.TextInputWidget
.static.gatherPreInfuseState(
98 $( node
).find( '.oo-ui-textInputWidget' ),
109 mw
.widgets
.SelectWithInputWidget
.prototype.restorePreInfuseState = function ( state
) {
110 mw
.widgets
.SelectWithInputWidget
.parent
.prototype.restorePreInfuseState
.call( this, state
);
111 this.dropdowninput
.restorePreInfuseState( state
.dropdowninput
);
112 this.textinput
.restorePreInfuseState( state
.textinput
);
118 mw
.widgets
.SelectWithInputWidget
.prototype.setDisabled = function ( disabled
) {
119 mw
.widgets
.SelectWithInputWidget
.parent
.prototype.setDisabled
.call( this, disabled
);
120 this.textinput
.setDisabled( disabled
);
121 this.dropdowninput
.setDisabled( disabled
);
125 * Handle change events on the DropdownInput
127 * @param {string|undefined} value
130 mw
.widgets
.SelectWithInputWidget
.prototype.onChange = function ( value
) {
131 value
= value
|| this.dropdowninput
.getValue();
132 this.textinput
.$element
.toggle( value
=== 'other' );
135 }( jQuery
, mediaWiki
) );