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
) {
240 var $matrixTooltips
, $autocomplete
;
244 * @param {boolean|jQuery.Event} instant
246 function handleSelectOrOther( instant
) {
247 var $other
= $root
.find( '#' + $( this ).attr( 'id' ) + '-other' );
248 $other
= $other
.add( $other
.siblings( 'br' ) );
249 if ( $( this ).val() === 'other' ) {
250 $other
.goIn( instant
);
252 $other
.goOut( instant
);
256 // Animate the SelectOrOther fields, to only show the text field when
257 // 'other' is selected.
259 .on( 'change', '.mw-htmlform-select-or-other', handleSelectOrOther
)
261 handleSelectOrOther
.call( this, true );
264 // Set up hide-if elements
265 $root
.find( '.mw-htmlform-hide-if' ).each( function () {
266 var v
, $fields
, test
, func
,
268 spec
= $el
.data( 'hideIf' );
274 v
= hideIfParse( $el
, spec
);
284 $fields
.on( 'change', func
);
288 function addMulti( $oldContainer
, $container
) {
289 var name
= $oldContainer
.find( 'input:first-child' ).attr( 'name' ),
290 oldClass
= ( ' ' + $oldContainer
.attr( 'class' ) + ' ' ).replace( /(mw-htmlform-field-HTMLMultiSelectField|mw-chosen)/g, '' ),
291 $select
= $( '<select>' ),
292 dataPlaceholder
= mw
.message( 'htmlform-chosen-placeholder' );
293 oldClass
= $.trim( oldClass
);
296 multiple
: 'multiple',
297 'data-placeholder': dataPlaceholder
.plain(),
298 'class': 'htmlform-chzn-select mw-input ' + oldClass
300 $oldContainer
.find( 'input' ).each( function () {
301 var $oldInput
= $( this ),
302 checked
= $oldInput
.prop( 'checked' ),
303 $option
= $( '<option>' );
304 $option
.prop( 'value', $oldInput
.prop( 'value' ) );
306 $option
.prop( 'selected', true );
308 $option
.text( $oldInput
.prop( 'value' ) );
309 $select
.append( $option
);
311 $container
.append( $select
);
314 function convertCheckboxesToMulti( $oldContainer
, type
) {
315 var $fieldLabel
= $( '<td>' ),
317 $fieldLabelText
= $( '<label>' ),
319 if ( type
=== 'tr' ) {
320 addMulti( $oldContainer
, $td
);
321 $container
= $( '<tr>' );
322 $container
.append( $td
);
323 } else if ( type
=== 'div' ) {
324 $fieldLabel
= $( '<div>' );
325 $container
= $( '<div>' );
326 addMulti( $oldContainer
, $container
);
328 $fieldLabel
.attr( 'class', 'mw-label' );
329 $fieldLabelText
.text( $oldContainer
.find( '.mw-label label' ).text() );
330 $fieldLabel
.append( $fieldLabelText
);
331 $container
.prepend( $fieldLabel
);
332 $oldContainer
.replaceWith( $container
);
336 if ( $root
.find( '.mw-chosen' ).length
) {
337 mw
.loader
.using( 'jquery.chosen', function () {
338 $root
.find( '.mw-chosen' ).each( function () {
339 var type
= this.nodeName
.toLowerCase(),
340 $converted
= convertCheckboxesToMulti( $( this ), type
);
341 $converted
.find( '.htmlform-chzn-select' ).chosen( { width
: 'auto' } );
346 $matrixTooltips
= $root
.find( '.mw-htmlform-matrix .mw-htmlform-tooltip' );
347 if ( $matrixTooltips
.length
) {
348 mw
.loader
.using( 'jquery.tipsy', function () {
349 $matrixTooltips
.tipsy( { gravity
: 's' } );
353 // Set up autocomplete fields
354 $autocomplete
= $root
.find( '.mw-htmlform-autocomplete' );
355 if ( $autocomplete
.length
) {
356 mw
.loader
.using( 'jquery.suggestions', function () {
357 $autocomplete
.suggestions( {
358 fetch: function ( val
) {
360 $el
.suggestions( 'suggestions',
361 $.grep( $el
.data( 'autocomplete' ), function ( v
) {
362 return v
.indexOf( val
) === 0;
370 // Add/remove cloner clones without having to resubmit the form
371 $root
.find( '.mw-htmlform-cloner-delete-button' ).filter( ':input' ).click( function ( ev
) {
373 $( this ).closest( 'li.mw-htmlform-cloner-li' ).remove();
376 $root
.find( '.mw-htmlform-cloner-create-button' ).filter( ':input' ).click( function ( ev
) {
381 $ul
= $( this ).prev( 'ul.mw-htmlform-cloner-ul' );
383 html
= $ul
.data( 'template' ).replace(
384 new RegExp( $.escapeRE( $ul
.data( 'uniqueId' ) ), 'g' ),
385 'clone' + ( ++cloneCounter
)
389 .addClass( 'mw-htmlform-cloner-li' )
396 mw
.hook( 'htmlform.enhance' ).fire( $root
);
401 enhance( $( document
) );
406 * @mixins jQuery.plugin.htmlform
408 }( mediaWiki
, jQuery
) );