2 * HTMLForm enhancements:
3 * Convert multiselect fields from checkboxes to Chosen selector when requested.
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
);
16 'data-placeholder': dataPlaceholder
.plain(),
17 'class': 'htmlform-chzn-select mw-input ' + oldClass
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' ) );
25 $option
.prop( 'selected', true );
27 $option
.text( $oldInput
.prop( 'value' ) );
28 $select
.append( $option
);
30 $container
.append( $select
);
33 function convertCheckboxesToMulti( $oldContainer
, type
) {
34 var $fieldLabel
= $( '<td>' ),
36 $fieldLabelText
= $( '<label>' ),
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
);
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
);
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' } );
67 }( mediaWiki
, jQuery
) );