resources/src/mediawiki.widgets/mw.widgets.SelectWithInputWidget.js

   1 /*!
   2  * MediaWiki Widgets - SelectWithInputWidget class.
   3  *
   4  * @copyright 2011-2017 MediaWiki Widgets Team and others; see AUTHORS.txt
   5  * @license The MIT License (MIT); see LICENSE.txt
   6  */
   7 ( function () {
   8
   9         /**
  10          * @classdesc Select with input widget. Displays an OO.ui.TextInputWidget along with
  11          * an OO.ui.DropdownInputWidget.
  12          * TODO Explain the OTHER option
  13          *
  14          * @example
  15          * mw.loader.using( 'mediawiki.widgets.SelectWithInputWidget', function () {
  16          *   let swi = new mw.widgets.SelectWithInputWidget( {
  17          *     or: true,
  18          *     dropdowninput: {
  19          *       options: [
  20          *         { data: 'other', label: 'Other' },
  21          *         { data: 'a', label: 'First' },
  22          *         { data: 'b', label: 'Second' },
  23          *         { data: 'c', label: 'Third' }
  24          *       ]
  25          *     },
  26          *     textinput: {
  27          *     }
  28          *   } );
  29          *
  30          *   $( document.body ).append( swi.$element );
  31          * } );
  32          *
  33          * @class mw.widgets.SelectWithInputWidget
  34          * @extends OO.ui.Widget
  35          *
  36          * @constructor
  37          * @description Create an instance of `mw.widgets.SelectWithInputWidget`.
  38          * @param {Object} [config] Configuration options
  39          * @param {Object} [config.dropdowninput] Config for the dropdown
  40          * @param {Object} [config.textinput] Config for the text input
  41          * @param {boolean} [config.or=false] Config for whether the widget is dropdown AND input
  42          *                           or dropdown OR input
  43          * @param {boolean} [config.required=false] Config for whether input is required
  44          */
  45         mw.widgets.SelectWithInputWidget = function MwWidgetsSelectWithInputWidget( config ) {
  46                 // Config initialization
  47                 config = Object.assign( { or: false, required: false }, config );
  48
  49                 // Properties
  50                 this.textinput = new OO.ui.TextInputWidget( config.textinput );
  51                 this.dropdowninput = new OO.ui.DropdownInputWidget( config.dropdowninput );
  52                 this.or = config.or;
  53                 this.required = config.required;
  54
  55                 // Events
  56                 this.dropdowninput.on( 'change', this.onChange.bind( this ) );
  57                 this.textinput.on( 'change', () => {
  58                         this.emit( 'change', this.getValue() );
  59                 } );
  60
  61                 // Parent constructor
  62                 mw.widgets.SelectWithInputWidget.super.call( this, config );
  63
  64                 // Initialization
  65                 this.$element
  66                         .addClass( 'mw-widget-selectWithInputWidget' )
  67                         .append(
  68                                 this.dropdowninput.$element,
  69                                 this.textinput.$element
  70                         );
  71                 this.onChange();
  72         };
  73
  74         /* Setup */
  75         OO.inheritClass( mw.widgets.SelectWithInputWidget, OO.ui.Widget );
  76
  77         /* Static Methods */
  78
  79         /**
  80          * @inheritdoc
  81          */
  82         mw.widgets.SelectWithInputWidget.static.reusePreInfuseDOM = function ( node, config ) {
  83                 config = mw.widgets.SelectWithInputWidget.super.static.reusePreInfuseDOM( node, config );
  84                 config.dropdowninput = OO.ui.DropdownInputWidget.static.reusePreInfuseDOM(
  85                         $( node ).find( '.oo-ui-dropdownInputWidget' ),
  86                         config.dropdowninput
  87                 );
  88                 config.textinput = OO.ui.TextInputWidget.static.reusePreInfuseDOM(
  89                         $( node ).find( '.oo-ui-textInputWidget' ),
  90                         config.textinput
  91                 );
  92                 return config;
  93         };
  94
  95         /**
  96          * @inheritdoc
  97          */
  98         mw.widgets.SelectWithInputWidget.static.gatherPreInfuseState = function ( node, config ) {
  99                 const state = mw.widgets.SelectWithInputWidget.super.static.gatherPreInfuseState( node, config );
 100                 state.dropdowninput = OO.ui.DropdownInputWidget.static.gatherPreInfuseState(
 101                         $( node ).find( '.oo-ui-dropdownInputWidget' ),
 102                         config.dropdowninput
 103                 );
 104                 state.textinput = OO.ui.TextInputWidget.static.gatherPreInfuseState(
 105                         $( node ).find( '.oo-ui-textInputWidget' ),
 106                         config.textinput
 107                 );
 108                 return state;
 109         };
 110
 111         /* Methods */
 112
 113         /**
 114          * @inheritdoc
 115          */
 116         mw.widgets.SelectWithInputWidget.prototype.restorePreInfuseState = function ( state ) {
 117                 mw.widgets.SelectWithInputWidget.super.prototype.restorePreInfuseState.call( this, state );
 118                 this.dropdowninput.restorePreInfuseState( state.dropdowninput );
 119                 this.textinput.restorePreInfuseState( state.textinput );
 120         };
 121
 122         /**
 123          * @inheritdoc
 124          */
 125         mw.widgets.SelectWithInputWidget.prototype.setDisabled = function ( disabled ) {
 126                 const textinputIsHidden = this.or && this.dropdowninput.getValue() !== 'other';
 127                 mw.widgets.SelectWithInputWidget.super.prototype.setDisabled.call( this, disabled );
 128                 this.dropdowninput.setDisabled( disabled );
 129                 // It is impossible to submit a form with hidden fields failing validation, e.g. one that
 130                 // is required. However, validity is not checked for disabled fields, as these are not
 131                 // submitted with the form. So we should also disable fields when hiding them.
 132                 this.textinput.setDisabled( textinputIsHidden || disabled );
 133                 // If the widget is required, set the text field as required, but only if the widget is visible.
 134                 if ( this.required ) {
 135                         this.textinput.setRequired( !this.textinput.isDisabled() );
 136                 }
 137         };
 138
 139         /**
 140          * Set the value from outside.
 141          *
 142          * @param {string|undefined} value
 143          */
 144         mw.widgets.SelectWithInputWidget.prototype.setValue = function ( value ) {
 145                 let selectable = false;
 146
 147                 if ( this.or ) {
 148                         if ( value !== 'other' ) {
 149                                 selectable = !!this.dropdowninput.dropdownWidget.getMenu().findItemFromData( value );
 150                         }
 151
 152                         if ( selectable ) {
 153                                 this.dropdowninput.setValue( value );
 154                                 this.textinput.setValue( undefined );
 155                         } else {
 156                                 this.dropdowninput.setValue( 'other' );
 157                                 this.textinput.setValue( value );
 158                         }
 159
 160                         this.emit( 'change', value );
 161                 }
 162         };
 163
 164         /**
 165          * Get the value from outside.
 166          *
 167          * @return {string}
 168          */
 169         mw.widgets.SelectWithInputWidget.prototype.getValue = function () {
 170                 if ( this.or ) {
 171                         if ( this.dropdowninput.getValue() !== 'other' ) {
 172                                 return this.dropdowninput.getValue();
 173                         }
 174
 175                         return this.textinput.getValue();
 176                 } else {
 177                         return '';
 178                 }
 179         };
 180
 181         /**
 182          * Handle change events on the DropdownInput
 183          *
 184          * @param {string|undefined} value
 185          * @private
 186          */
 187         mw.widgets.SelectWithInputWidget.prototype.onChange = function ( value ) {
 188                 if ( this.or ) {
 189                         value = value || this.dropdowninput.getValue();
 190                         this.textinput.$element.toggle( value === 'other' );
 191                         // It is impossible to submit a form with hidden fields failing validation, e.g. one that
 192                         // is required. However, validity is not checked for disabled fields, as these are not
 193                         // submitted with the form. So we should also disable fields when hiding them.
 194                         this.textinput.setDisabled( value !== 'other' || this.isDisabled() );
 195                 }
 196
 197                 this.emit( 'change', this.getValue() );
 198         };
 199
 200 }() );