2 * Utility functions for jazzing up HTMLForm elements.
4 * @class jQuery.plugin.htmlform
11 * Helper function for hide-if to find the nearby form field.
13 * Find the closest match for the given name, "closest" being the minimum
14 * level of parents to go to find a form field matching the given name or
15 * ending in array keys matching the given name (e.g. "baz" matches
19 * @param {jQuery} element
20 * @param {string} name
21 * @return {jQuery|null}
23 function hideIfGetField( $el
, name
) {
25 suffix
= name
.replace( /^([^\[]+)/, '[$1]' );
27 function nameFilter() {
28 return this.name
=== name
||
29 ( this.name
=== ( 'wp' + name
) ) ||
30 this.name
.slice( -suffix
.length
) === suffix
;
33 for ( $p
= $el
.parent(); $p
.length
> 0; $p
= $p
.parent() ) {
34 $found
= $p
.find( '[name]' ).filter( nameFilter
);
35 if ( $found
.length
) {
43 * Helper function for hide-if to return a test function and list of
44 * dependent fields for a hide-if specification.
47 * @param {jQuery} element
48 * @param {Array} hide-if spec
50 * @return {jQuery} return.0 Dependent fields
51 * @return {Function} return.1 Test function
53 function hideIfParse( $el
, spec
) {
54 var op
, i
, l
, v
, $field
, $fields
, fields
, func
, funcs
, getVal
;
65 for ( i
= 1; i
< l
; i
++ ) {
66 if ( !$.isArray( spec
[i
] ) ) {
67 throw new Error( op
+ ' parameters must be arrays' );
69 v
= hideIfParse( $el
, spec
[i
] );
70 fields
= fields
.concat( v
[0].toArray() );
73 $fields
= $( fields
);
80 for ( i
= 0; i
< l
; i
++ ) {
92 for ( i
= 0; i
< l
; i
++ ) {
104 for ( i
= 0; i
< l
; i
++ ) {
116 for ( i
= 0; i
< l
; i
++ ) {
126 return [ $fields
, func
];
130 throw new Error( 'NOT takes exactly one parameter' );
132 if ( !$.isArray( spec
[1] ) ) {
133 throw new Error( 'NOT parameters must be arrays' );
135 v
= hideIfParse( $el
, spec
[1] );
138 return [ $fields
, function () {
145 throw new Error( op
+ ' takes exactly two parameters' );
147 $field
= hideIfGetField( $el
, spec
[1] );
149 return [ $(), function () {
155 if ( $field
.first().prop( 'type' ) === 'radio' ||
156 $field
.first().prop( 'type' ) === 'checkbox'
158 getVal = function () {
159 var $selected
= $field
.filter( ':checked' );
160 return $selected
.length
? $selected
.val() : '';
163 getVal = function () {
171 return getVal() === v
;
176 return getVal() !== v
;
181 return [ $field
, func
];
184 throw new Error( 'Unrecognized operation \'' + op
+ '\'' );
189 * jQuery plugin to fade or snap to visible state.
191 * @param {boolean} [instantToggle=false]
195 $.fn
.goIn = function ( instantToggle
) {
196 if ( instantToggle
=== true ) {
199 return this.stop( true, true ).fadeIn();
203 * jQuery plugin to fade or snap to hiding state.
205 * @param {boolean} [instantToggle=false]
209 $.fn
.goOut = function ( instantToggle
) {
210 if ( instantToggle
=== true ) {
213 return this.stop( true, true ).fadeOut();
217 * Bind a function to the jQuery object via live(), and also immediately trigger
218 * the function on the objects with an 'instant' parameter set to true.
220 * @method liveAndTestAtStart
221 * @deprecated since 1.24 Use .on() and .each() directly.
222 * @param {Function} callback
223 * @param {boolean|jQuery.Event} callback.immediate True when the event is called immediately,
224 * an event object when triggered from an event.
228 mw
.log
.deprecate( $.fn
, 'liveAndTestAtStart', function ( callback
) {
230 // Can't really migrate to .on() generically, needs knowledge of
231 // calling code to know the correct selector. Fix callers and
232 // get rid of this .liveAndTestAtStart() hack.
233 .live( 'change', callback
)
235 callback
.call( this, true );
239 function enhance( $root
) {
243 * @param {boolean|jQuery.Event} instant
245 function handleSelectOrOther( instant
) {
246 var $other
= $root
.find( '#' + $( this ).attr( 'id' ) + '-other' );
247 $other
= $other
.add( $other
.siblings( 'br' ) );
248 if ( $( this ).val() === 'other' ) {
249 $other
.goIn( instant
);
251 $other
.goOut( instant
);
255 // Animate the SelectOrOther fields, to only show the text field when
256 // 'other' is selected.
258 .on( 'change', '.mw-htmlform-select-or-other', handleSelectOrOther
)
260 handleSelectOrOther
.call( this, true );
263 // Set up hide-if elements
264 $root
.find( '.mw-htmlform-hide-if' ).each( function () {
265 var v
, $fields
, test
, func
,
267 spec
= $el
.data( 'hideIf' );
273 v
= hideIfParse( $el
, spec
);
283 $fields
.on( 'change', func
);
287 function addMulti( $oldContainer
, $container
) {
288 var name
= $oldContainer
.find( 'input:first-child' ).attr( 'name' ),
289 oldClass
= ( ' ' + $oldContainer
.attr( 'class' ) + ' ' ).replace( /(mw-htmlform-field-HTMLMultiSelectField|mw-chosen)/g, '' ),
290 $select
= $( '<select>' ),
291 dataPlaceholder
= mw
.message( 'htmlform-chosen-placeholder' );
292 oldClass
= $.trim( oldClass
);
295 multiple
: 'multiple',
296 'data-placeholder': dataPlaceholder
.plain(),
297 'class': 'htmlform-chzn-select mw-input ' + oldClass
299 $oldContainer
.find( 'input' ).each( function () {
300 var $oldInput
= $( this ),
301 checked
= $oldInput
.prop( 'checked' ),
302 $option
= $( '<option>' );
303 $option
.prop( 'value', $oldInput
.prop( 'value' ) );
305 $option
.prop( 'selected', true );
307 $option
.text( $oldInput
.prop( 'value' ) );
308 $select
.append( $option
);
310 $container
.append( $select
);
313 function convertCheckboxesToMulti( $oldContainer
, type
) {
314 var $fieldLabel
= $( '<td>' ),
316 $fieldLabelText
= $( '<label>' ),
318 if ( type
=== 'tr' ) {
319 addMulti( $oldContainer
, $td
);
320 $container
= $( '<tr>' );
321 $container
.append( $td
);
322 } else if ( type
=== 'div' ) {
323 $fieldLabel
= $( '<div>' );
324 $container
= $( '<div>' );
325 addMulti( $oldContainer
, $container
);
327 $fieldLabel
.attr( 'class', 'mw-label' );
328 $fieldLabelText
.text( $oldContainer
.find( '.mw-label label' ).text() );
329 $fieldLabel
.append( $fieldLabelText
);
330 $container
.prepend( $fieldLabel
);
331 $oldContainer
.replaceWith( $container
);
335 if ( $root
.find( '.mw-chosen' ).length
) {
336 mw
.loader
.using( 'jquery.chosen', function () {
337 $root
.find( '.mw-chosen' ).each( function () {
338 var type
= this.nodeName
.toLowerCase(),
339 $converted
= convertCheckboxesToMulti( $( this ), type
);
340 $converted
.find( '.htmlform-chzn-select' ).chosen( { width
: 'auto' } );
345 var $matrixTooltips
= $root
.find( '.mw-htmlform-matrix .mw-htmlform-tooltip' );
346 if ( $matrixTooltips
.length
) {
347 mw
.loader
.using( 'jquery.tipsy', function () {
348 $matrixTooltips
.tipsy( { gravity
: 's' } );
352 // Add/remove cloner clones without having to resubmit the form
353 $root
.find( '.mw-htmlform-cloner-delete-button' ).click( function ( ev
) {
355 $( this ).closest( 'li.mw-htmlform-cloner-li' ).remove();
358 $root
.find( '.mw-htmlform-cloner-create-button' ).click( function ( ev
) {
363 $ul
= $( this ).prev( 'ul.mw-htmlform-cloner-ul' );
365 html
= $ul
.data( 'template' ).replace(
366 $ul
.data( 'uniqueId' ), 'clone' + ( ++cloneCounter
), 'g'
370 .addClass( 'mw-htmlform-cloner-li' )
377 mw
.hook( 'htmlform.enhance' ).fire( $root
);
382 enhance( $( document
) );
387 * @mixins jQuery.plugin.htmlform
389 }( mediaWiki
, jQuery
) );