resources/mediawiki/mediawiki.htmlform.js

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