2 * Utility functions for jazzing up HTMLForm elements.
4 * @class jQuery.plugin.htmlform
9 * jQuery plugin to fade or snap to visible state.
11 * @param {boolean} [instantToggle=false]
15 $.fn
.goIn = function ( instantToggle
) {
16 if ( instantToggle
=== true ) {
17 return $( this ).show();
19 return $( this ).stop( true, true ).fadeIn();
23 * jQuery plugin to fade or snap to hiding state.
25 * @param {boolean} [instantToggle=false]
29 $.fn
.goOut = function ( instantToggle
) {
30 if ( instantToggle
=== true ) {
31 return $( this ).hide();
33 return $( this ).stop( true, true ).fadeOut();
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.
43 $.fn
.liveAndTestAtStart = function ( callback
) {
45 .live( 'change', callback
)
47 callback
.call( this, true );
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
);
61 $other
.goOut( instant
);
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
);
76 'data-placeholder': dataPlaceholder
.plain(),
77 'class': 'htmlform-chzn-select mw-input ' + oldClass
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' ) );
85 $option
.prop( 'selected', true );
87 $option
.text( $oldInput
.prop( 'value' ) );
88 $select
.append( $option
);
90 $container
.append( $select
);
93 function convertCheckboxesToMulti( $oldContainer
, type
) {
94 var $fieldLabel
= $( '<td>' ),
96 $fieldLabelText
= $( '<label>' ),
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
);
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
);
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' } );
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' } );
136 * @mixins jQuery.plugin.htmlform
138 }( mediaWiki
, jQuery
) );