resources/src/mediawiki.htmlform/selectorother.js

   1 /*
   2  * HTMLForm enhancements:
   3  * Animate the SelectOrOther fields, to only show the text field when 'other' is selected.
   4  */
   5
   6 /**
   7  * jQuery plugin to fade or snap to visible state.
   8  *
   9  * @param {boolean} [instantToggle=false]
  10  * @return {jQuery}
  11  */
  12 $.fn.goIn = function ( instantToggle ) {
  13         if ( instantToggle === true ) {
  14                 return this.show();
  15         }
  16         return this.stop( true, true ).fadeIn();
  17 };
  18
  19 /**
  20  * jQuery plugin to fade or snap to hiding state.
  21  *
  22  * @param {boolean} [instantToggle=false]
  23  * @return {jQuery}
  24  */
  25 $.fn.goOut = function ( instantToggle ) {
  26         if ( instantToggle === true ) {
  27                 return this.hide();
  28         }
  29         return this.stop( true, true ).fadeOut();
  30 };
  31
  32 mw.hook( 'htmlform.enhance' ).add( ( $root ) => {
  33         /**
  34          * @ignore
  35          * @param {boolean|jQuery.Event} instant
  36          */
  37         function handleSelectOrOther( instant ) {
  38                 const $select = $( this ).find( 'select' );
  39                 let $other = $( this ).find( 'input' );
  40                 $other = $other.add( $other.siblings( 'br' ) );
  41                 if ( $select.val() === 'other' ) {
  42                         $other.goIn( instant );
  43                 } else {
  44                         $other.goOut( instant );
  45                 }
  46         }
  47
  48         // Exclude OOUI widgets, since they're infused and SelectWithInputWidget
  49         // is responsible for this logic.
  50         $root
  51                 .on( 'change', '.mw-htmlform-select-or-other:not(.oo-ui-widget)', handleSelectOrOther )
  52                 .find( '.mw-htmlform-select-or-other:not(.oo-ui-widget)' )
  53                 .each( function () {
  54                         handleSelectOrOther.call( this, true );
  55                 } );
  56 } );