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]
14 $.fn
.goIn = function ( instantToggle
) {
15 if ( instantToggle
=== true ) {
16 return $( this ).show();
18 return $( this ).stop( true, true ).fadeIn();
22 * jQuery plugin to fade or snap to hiding state.
24 * @param {boolean} [instantToggle=false]
27 $.fn
.goOut = function ( instantToggle
) {
28 if ( instantToggle
=== true ) {
29 return $( this ).hide();
31 return $( this ).stop( true, true ).fadeOut();
35 * Bind a function to the jQuery object via live(), and also immediately trigger
36 * the function on the objects with an 'instant' parameter set to true.
37 * @param {Function} callback
38 * @param {boolean|jQuery.Event} callback.immediate True when the event is called immediately,
39 * an event object when triggered from an event.
41 $.fn
.liveAndTestAtStart = function ( callback
) {
43 .live( 'change', callback
)
45 callback
.call( this, true );
51 // Animate the SelectOrOther fields, to only show the text field when
52 // 'other' is selected.
53 $( '.mw-htmlform-select-or-other' ).liveAndTestAtStart( function ( instant
) {
54 var $other
= $( '#' + $( this ).attr( 'id' ) + '-other' );
55 $other
= $other
.add( $other
.siblings( 'br' ) );
56 if ( $( this ).val() === 'other' ) {
57 $other
.goIn( instant
);
59 $other
.goOut( instant
);
65 function addMulti( $oldContainer
, $container
) {
66 var name
= $oldContainer
.find( 'input:first-child' ).attr( 'name' ),
67 oldClass
= ( ' ' + $oldContainer
.attr( 'class' ) + ' ' ).replace( /(mw-htmlform-field-HTMLMultiSelectField|mw-chosen)/g, '' ),
68 $select
= $( '<select>' ),
69 dataPlaceholder
= mw
.message( 'htmlform-chosen-placeholder' );
70 oldClass
= $.trim( oldClass
);
74 'data-placeholder': dataPlaceholder
.plain(),
75 'class': 'htmlform-chzn-select mw-input ' + oldClass
77 $oldContainer
.find( 'input' ).each( function () {
78 var $oldInput
= $( this ),
79 checked
= $oldInput
.prop( 'checked' ),
80 $option
= $( '<option>' );
81 $option
.prop( 'value', $oldInput
.prop( 'value' ) );
83 $option
.prop( 'selected', true );
85 $option
.text( $oldInput
.prop( 'value' ) );
86 $select
.append( $option
);
88 $container
.append( $select
);
91 function convertCheckboxesToMulti( $oldContainer
, type
) {
92 var $fieldLabel
= $( '<td>' ),
94 $fieldLabelText
= $( '<label>' ),
96 if ( type
=== 'tr' ) {
97 addMulti( $oldContainer
, $td
);
98 $container
= $( '<tr>' );
99 $container
.append( $td
);
100 } else if ( type
=== 'div' ) {
101 $fieldLabel
= $( '<div>' );
102 $container
= $( '<div>' );
103 addMulti( $oldContainer
, $container
);
105 $fieldLabel
.attr( 'class', 'mw-label' );
106 $fieldLabelText
.text( $oldContainer
.find( '.mw-label label' ).text() );
107 $fieldLabel
.append( $fieldLabelText
);
108 $container
.prepend( $fieldLabel
);
109 $oldContainer
.replaceWith( $container
);
113 if ( $( '.mw-chosen' ).length
) {
114 mw
.loader
.using( 'jquery.chosen', function () {
115 $( '.mw-chosen' ).each( function () {
116 var type
= this.nodeName
.toLowerCase(),
117 $converted
= convertCheckboxesToMulti( $( this ), type
);
118 $converted
.find( '.htmlform-chzn-select' ).chosen( { width
: 'auto' } );
124 var $matrixTooltips
= $( '.mw-htmlform-matrix .mw-htmlform-tooltip' );
125 if ( $matrixTooltips
.length
) {
126 mw
.loader
.using( 'jquery.tipsy', function () {
127 $matrixTooltips
.tipsy( { gravity
: 's' } );
134 * @mixins jQuery.plugin.htmlform
136 }( mediaWiki
, jQuery
) );