resources/src/mediawiki/htmlform/multiselect.js

   1 /*
   2  * HTMLForm enhancements:
   3  * Convert multiselect fields from checkboxes to Chosen selector when requested.
   4  */
   5 ( function ( mw, $ ) {
   6
   7         function addMulti( $oldContainer, $container ) {
   8                 var name = $oldContainer.find( 'input:first-child' ).attr( 'name' ),
   9                         oldClass = ( ' ' + $oldContainer.attr( 'class' ) + ' ' ).replace( /(mw-htmlform-field-HTMLMultiSelectField|mw-chosen|mw-htmlform-dropdown)/g, '' ),
  10                         $select = $( '<select>' ),
  11                         dataPlaceholder = mw.message( 'htmlform-chosen-placeholder' );
  12                 oldClass = $.trim( oldClass );
  13                 $select.attr( {
  14                         name: name,
  15                         multiple: 'multiple',
  16                         'data-placeholder': dataPlaceholder.plain(),
  17                         'class': 'htmlform-chzn-select mw-input ' + oldClass
  18                 } );
  19                 $oldContainer.find( 'input' ).each( function () {
  20                         var $oldInput = $( this ),
  21                         checked = $oldInput.prop( 'checked' ),
  22                         $option = $( '<option>' );
  23                         $option.prop( 'value', $oldInput.prop( 'value' ) );
  24                         if ( checked ) {
  25                                 $option.prop( 'selected', true );
  26                         }
  27                         $option.text( $oldInput.prop( 'value' ) );
  28                         $select.append( $option );
  29                 } );
  30                 $container.append( $select );
  31         }
  32
  33         function convertCheckboxesToMulti( $oldContainer, type ) {
  34                 var $fieldLabel = $( '<td>' ),
  35                 $td = $( '<td>' ),
  36                 $fieldLabelText = $( '<label>' ),
  37                 $container;
  38                 if ( type === 'tr' ) {
  39                         addMulti( $oldContainer, $td );
  40                         $container = $( '<tr>' );
  41                         $container.append( $td );
  42                 } else if ( type === 'div' ) {
  43                         $fieldLabel = $( '<div>' );
  44                         $container = $( '<div>' );
  45                         addMulti( $oldContainer, $container );
  46                 }
  47                 $fieldLabel.attr( 'class', 'mw-label' );
  48                 $fieldLabelText.text( $oldContainer.find( '.mw-label label' ).text() );
  49                 $fieldLabel.append( $fieldLabelText );
  50                 $container.prepend( $fieldLabel );
  51                 $oldContainer.replaceWith( $container );
  52                 return $container;
  53         }
  54
  55         mw.hook( 'htmlform.enhance' ).add( function ( $root ) {
  56                 if ( $root.find( '.mw-htmlform-dropdown' ).length ) {
  57                         mw.loader.using( 'jquery.chosen', function () {
  58                                 $root.find( '.mw-htmlform-dropdown' ).each( function () {
  59                                         var type = this.nodeName.toLowerCase(),
  60                                                 $converted = convertCheckboxesToMulti( $( this ), type );
  61                                         $converted.find( '.htmlform-chzn-select' ).chosen( { width: 'auto' } );
  62                                 } );
  63                         } );
  64                 }
  65         } );
  66
  67 }( mediaWiki, jQuery ) );