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 ( function ( mw, $ ) {
   6
   7         /**
   8          * @class jQuery.plugin.htmlform
   9          */
  10
  11         /**
  12          * jQuery plugin to fade or snap to visible state.
  13          *
  14          * @param {boolean} [instantToggle=false]
  15          * @return {jQuery}
  16          * @chainable
  17          */
  18         $.fn.goIn = function ( instantToggle ) {
  19                 if ( instantToggle === true ) {
  20                         return this.show();
  21                 }
  22                 return this.stop( true, true ).fadeIn();
  23         };
  24
  25         /**
  26          * jQuery plugin to fade or snap to hiding state.
  27          *
  28          * @param {boolean} [instantToggle=false]
  29          * @return {jQuery}
  30          * @chainable
  31          */
  32         $.fn.goOut = function ( instantToggle ) {
  33                 if ( instantToggle === true ) {
  34                         return this.hide();
  35                 }
  36                 return this.stop( true, true ).fadeOut();
  37         };
  38
  39         mw.hook( 'htmlform.enhance' ).add( function ( $root ) {
  40                 /**
  41                  * @ignore
  42                  * @param {boolean|jQuery.Event} instant
  43                  */
  44                 function handleSelectOrOther( instant ) {
  45                         var $other = $root.find( '#' + $( this ).attr( 'id' ) + '-other' );
  46                         $other = $other.add( $other.siblings( 'br' ) );
  47                         if ( $( this ).val() === 'other' ) {
  48                                 $other.goIn( instant );
  49                         } else {
  50                                 $other.goOut( instant );
  51                         }
  52                 }
  53
  54                 $root
  55                         .on( 'change', '.mw-htmlform-select-or-other', handleSelectOrOther )
  56                         .find( '.mw-htmlform-select-or-other' )
  57                         .each( function () {
  58                                 handleSelectOrOther.call( this, true );
  59                         } );
  60         } );
  61
  62 }( mediaWiki, jQuery ) );