resources/src/mediawiki/mediawiki.htmlform.js

   1 /**
   2  * Utility functions for jazzing up HTMLForm elements.
   3  *
   4  * @class jQuery.plugin.htmlform
   5  */
   6 ( function ( mw, $ ) {
   7
   8         /**
   9          * jQuery plugin to fade or snap to visible state.
  10          *
  11          * @param {boolean} [instantToggle=false]
  12          * @return {jQuery}
  13          * @chainable
  14          */
  15         $.fn.goIn = function ( instantToggle ) {
  16                 if ( instantToggle === true ) {
  17                         return $( this ).show();
  18                 }
  19                 return $( this ).stop( true, true ).fadeIn();
  20         };
  21
  22         /**
  23          * jQuery plugin to fade or snap to hiding state.
  24          *
  25          * @param {boolean} [instantToggle=false]
  26          * @return jQuery
  27          * @chainable
  28          */
  29         $.fn.goOut = function ( instantToggle ) {
  30                 if ( instantToggle === true ) {
  31                         return $( this ).hide();
  32                 }
  33                 return $( this ).stop( true, true ).fadeOut();
  34         };
  35
  36         /**
  37          * Bind a function to the jQuery object via live(), and also immediately trigger
  38          * the function on the objects with an 'instant' parameter set to true.
  39          * @param {Function} callback
  40          * @param {boolean|jQuery.Event} callback.immediate True when the event is called immediately,
  41          *  an event object when triggered from an event.
  42          */
  43         $.fn.liveAndTestAtStart = function ( callback ) {
  44                 $( this )
  45                         .live( 'change', callback )
  46                         .each( function () {
  47                                 callback.call( this, true );
  48                         } );
  49         };
  50
  51         $( function () {
  52
  53                 // Animate the SelectOrOther fields, to only show the text field when
  54                 // 'other' is selected.
  55                 $( '.mw-htmlform-select-or-other' ).liveAndTestAtStart( function ( instant ) {
  56                         var $other = $( '#' + $( this ).attr( 'id' ) + '-other' );
  57                         $other = $other.add( $other.siblings( 'br' ) );
  58                         if ( $( this ).val() === 'other' ) {
  59                                 $other.goIn( instant );
  60                         } else {
  61                                 $other.goOut( instant );
  62                         }
  63                 } );
  64
  65         } );
  66
  67         function addMulti( $oldContainer, $container ) {
  68                 var name = $oldContainer.find( 'input:first-child' ).attr( 'name' ),
  69                         oldClass = ( ' ' + $oldContainer.attr( 'class' ) + ' ' ).replace( /(mw-htmlform-field-HTMLMultiSelectField|mw-chosen)/g, '' ),
  70                         $select = $( '<select>' ),
  71                         dataPlaceholder = mw.message( 'htmlform-chosen-placeholder' );
  72                 oldClass = $.trim( oldClass );
  73                 $select.attr( {
  74                         name: name,
  75                         multiple: 'multiple',
  76                         'data-placeholder': dataPlaceholder.plain(),
  77                         'class': 'htmlform-chzn-select mw-input ' + oldClass
  78                 } );
  79                 $oldContainer.find( 'input' ).each( function () {
  80                         var $oldInput = $( this ),
  81                         checked = $oldInput.prop( 'checked' ),
  82                         $option = $( '<option>' );
  83                         $option.prop( 'value', $oldInput.prop( 'value' ) );
  84                         if ( checked ) {
  85                                 $option.prop( 'selected', true );
  86                         }
  87                         $option.text( $oldInput.prop( 'value' ) );
  88                         $select.append( $option );
  89                 } );
  90                 $container.append( $select );
  91         }
  92
  93         function convertCheckboxesToMulti( $oldContainer, type ) {
  94                 var $fieldLabel = $( '<td>' ),
  95                 $td = $( '<td>' ),
  96                 $fieldLabelText = $( '<label>' ),
  97                 $container;
  98                 if ( type === 'tr' ) {
  99                         addMulti( $oldContainer, $td );
 100                         $container = $( '<tr>' );
 101                         $container.append( $td );
 102                 } else if ( type === 'div' ) {
 103                         $fieldLabel = $( '<div>' );
 104                         $container = $( '<div>' );
 105                         addMulti( $oldContainer, $container );
 106                 }
 107                 $fieldLabel.attr( 'class', 'mw-label' );
 108                 $fieldLabelText.text( $oldContainer.find( '.mw-label label' ).text() );
 109                 $fieldLabel.append( $fieldLabelText );
 110                 $container.prepend( $fieldLabel );
 111                 $oldContainer.replaceWith( $container );
 112                 return $container;
 113         }
 114
 115         if ( $( '.mw-chosen' ).length ) {
 116                 mw.loader.using( 'jquery.chosen', function () {
 117                         $( '.mw-chosen' ).each( function () {
 118                                 var type = this.nodeName.toLowerCase(),
 119                                         $converted = convertCheckboxesToMulti( $( this ), type );
 120                                 $converted.find( '.htmlform-chzn-select' ).chosen( { width: 'auto' } );
 121                         } );
 122                 } );
 123         }
 124
 125         $( function () {
 126                 var $matrixTooltips = $( '.mw-htmlform-matrix .mw-htmlform-tooltip' );
 127                 if ( $matrixTooltips.length ) {
 128                         mw.loader.using( 'jquery.tipsy', function () {
 129                                 $matrixTooltips.tipsy( { gravity: 's' } );
 130                         } );
 131                 }
 132         } );
 133
 134         /**
 135          * @class jQuery
 136          * @mixins jQuery.plugin.htmlform
 137          */
 138 }( mediaWiki, jQuery ) );