Page MenuHomeWickedGov Phorge
Files F1428388

mw.widgets.SelectWithInputWidget.js
No OneTemporary
Actions

Size
6 KB
Referenced Files
None
Subscribers
None

mw.widgets.SelectWithInputWidget.js
View Options

/*!
* MediaWiki Widgets - SelectWithInputWidget class.
*
* @copyright 2011-2017 MediaWiki Widgets Team and others; see AUTHORS.txt
* @license The MIT License (MIT); see LICENSE.txt
*/
( function () {
/**
* @classdesc Select with input widget. Displays an OO.ui.TextInputWidget along with
* an OO.ui.DropdownInputWidget.
* TODO Explain the OTHER option
*
* @example
* mw.loader.using( 'mediawiki.widgets.SelectWithInputWidget', function () {
* let 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: {
* }
* } );
*
* $( document.body ).append( swi.$element );
* } );
*
* @class mw.widgets.SelectWithInputWidget
* @extends OO.ui.Widget
*
* @constructor
* @description Create an instance of `mw.widgets.SelectWithInputWidget`.
* @param {Object} [config] Configuration options
* @param {Object} [config.dropdowninput] Config for the dropdown
* @param {Object} [config.textinput] Config for the text input
* @param {boolean} [config.or=false] Config for whether the widget is dropdown AND input
* or dropdown OR input
* @param {boolean} [config.required=false] Config for whether input is required
*/
mw.widgets.SelectWithInputWidget = function MwWidgetsSelectWithInputWidget( config ) {
// Config initialization
config = Object.assign( { or: false, required: false }, config );
// Properties
this.textinput = new OO.ui.TextInputWidget( config.textinput );
this.dropdowninput = new OO.ui.DropdownInputWidget( config.dropdowninput );
this.or = config.or;
this.required = config.required;
// Events
this.dropdowninput.on( 'change', this.onChange.bind( this ) );
this.textinput.on( 'change', () => {
this.emit( 'change', this.getValue() );
} );
// Parent constructor
mw.widgets.SelectWithInputWidget.super.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.super.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 ) {
const state = mw.widgets.SelectWithInputWidget.super.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.super.prototype.restorePreInfuseState.call( this, state );
this.dropdowninput.restorePreInfuseState( state.dropdowninput );
this.textinput.restorePreInfuseState( state.textinput );
};
/**
* @inheritdoc
*/
mw.widgets.SelectWithInputWidget.prototype.setDisabled = function ( disabled ) {
const textinputIsHidden = this.or && this.dropdowninput.getValue() !== 'other';
mw.widgets.SelectWithInputWidget.super.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 );
// If the widget is required, set the text field as required, but only if the widget is visible.
if ( this.required ) {
this.textinput.setRequired( !this.textinput.isDisabled() );
}
};
/**
* Set the value from outside.
*
* @param {string|undefined} value
*/
mw.widgets.SelectWithInputWidget.prototype.setValue = function ( value ) {
let selectable = false;
if ( this.or ) {
if ( value !== 'other' ) {
selectable = !!this.dropdowninput.dropdownWidget.getMenu().findItemFromData( value );
}
if ( selectable ) {
this.dropdowninput.setValue( value );
this.textinput.setValue( undefined );
} else {
this.dropdowninput.setValue( 'other' );
this.textinput.setValue( value );
}
this.emit( 'change', value );
}
};
/**
* Get the value from outside.
*
* @return {string}
*/
mw.widgets.SelectWithInputWidget.prototype.getValue = function () {
if ( this.or ) {
if ( this.dropdowninput.getValue() !== 'other' ) {
return this.dropdowninput.getValue();
}
return this.textinput.getValue();
} else {
return '';
}
};
/**
* 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() );
}
this.emit( 'change', this.getValue() );
};
}() );

File Metadata

Mime Type
text/plain
Expires
Sat, May 16, 16:10 (13 h, 27 m)
Storage Engine
local-disk
Storage Format
Raw Data
Storage Handle
7b/67/a0f741243be988364ad1b4d72bca
Default Alt Text
mw.widgets.SelectWithInputWidget.js (6 KB)

Event Timeline