resources/src/mediawiki/mediawiki.htmlform.js

   1 /**
   2  * Utility functions for jazzing up HTMLForm elements.
   3  *
   4  * @class jQuery.plugin.htmlform
   5  */
   6 ( function ( mw, $ ) {
   7
   8         var cloneCounter = 0;
   9
  10         /**
  11          * Helper function for hide-if to find the nearby form field.
  12          *
  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
  16          * "foo[bar][baz]").
  17          *
  18          * @private
  19          * @param {jQuery} $el
  20          * @param {string} name
  21          * @return {jQuery|null}
  22          */
  23         function hideIfGetField( $el, name ) {
  24                 var $found, $p,
  25                         suffix = name.replace( /^([^\[]+)/, '[$1]' );
  26
  27                 function nameFilter() {
  28                         return this.name === name ||
  29                                 ( this.name === ( 'wp' + name ) ) ||
  30                                 this.name.slice( -suffix.length ) === suffix;
  31                 }
  32
  33                 for ( $p = $el.parent(); $p.length > 0; $p = $p.parent() ) {
  34                         $found = $p.find( '[name]' ).filter( nameFilter );
  35                         if ( $found.length ) {
  36                                 return $found;
  37                         }
  38                 }
  39                 return null;
  40         }
  41
  42         /**
  43          * Helper function for hide-if to return a test function and list of
  44          * dependent fields for a hide-if specification.
  45          *
  46          * @private
  47          * @param {jQuery} $el
  48          * @param {Array} spec
  49          * @return {Array}
  50          * @return {jQuery} return.0 Dependent fields
  51          * @return {Function} return.1 Test function
  52          */
  53         function hideIfParse( $el, spec ) {
  54                 var op, i, l, v, $field, $fields, fields, func, funcs, getVal;
  55
  56                 op = spec[ 0 ];
  57                 l = spec.length;
  58                 switch ( op ) {
  59                         case 'AND':
  60                         case 'OR':
  61                         case 'NAND':
  62                         case 'NOR':
  63                                 funcs = [];
  64                                 fields = [];
  65                                 for ( i = 1; i < l; i++ ) {
  66                                         if ( !$.isArray( spec[ i ] ) ) {
  67                                                 throw new Error( op + ' parameters must be arrays' );
  68                                         }
  69                                         v = hideIfParse( $el, spec[ i ] );
  70                                         fields = fields.concat( v[ 0 ].toArray() );
  71                                         funcs.push( v[ 1 ] );
  72                                 }
  73                                 $fields = $( fields );
  74
  75                                 l = funcs.length;
  76                                 switch ( op ) {
  77                                         case 'AND':
  78                                                 func = function () {
  79                                                         var i;
  80                                                         for ( i = 0; i < l; i++ ) {
  81                                                                 if ( !funcs[ i ]() ) {
  82                                                                         return false;
  83                                                                 }
  84                                                         }
  85                                                         return true;
  86                                                 };
  87                                                 break;
  88
  89                                         case 'OR':
  90                                                 func = function () {
  91                                                         var i;
  92                                                         for ( i = 0; i < l; i++ ) {
  93                                                                 if ( funcs[ i ]() ) {
  94                                                                         return true;
  95                                                                 }
  96                                                         }
  97                                                         return false;
  98                                                 };
  99                                                 break;
 100
 101                                         case 'NAND':
 102                                                 func = function () {
 103                                                         var i;
 104                                                         for ( i = 0; i < l; i++ ) {
 105                                                                 if ( !funcs[ i ]() ) {
 106                                                                         return true;
 107                                                                 }
 108                                                         }
 109                                                         return false;
 110                                                 };
 111                                                 break;
 112
 113                                         case 'NOR':
 114                                                 func = function () {
 115                                                         var i;
 116                                                         for ( i = 0; i < l; i++ ) {
 117                                                                 if ( funcs[ i ]() ) {
 118                                                                         return false;
 119                                                                 }
 120                                                         }
 121                                                         return true;
 122                                                 };
 123                                                 break;
 124                                 }
 125
 126                                 return [ $fields, func ];
 127
 128                         case 'NOT':
 129                                 if ( l !== 2 ) {
 130                                         throw new Error( 'NOT takes exactly one parameter' );
 131                                 }
 132                                 if ( !$.isArray( spec[ 1 ] ) ) {
 133                                         throw new Error( 'NOT parameters must be arrays' );
 134                                 }
 135                                 v = hideIfParse( $el, spec[ 1 ] );
 136                                 $fields = v[ 0 ];
 137                                 func = v[ 1 ];
 138                                 return [ $fields, function () {
 139                                         return !func();
 140                                 } ];
 141
 142                         case '===':
 143                         case '!==':
 144                                 if ( l !== 3 ) {
 145                                         throw new Error( op + ' takes exactly two parameters' );
 146                                 }
 147                                 $field = hideIfGetField( $el, spec[ 1 ] );
 148                                 if ( !$field ) {
 149                                         return [ $(), function () {
 150                                                 return false;
 151                                         } ];
 152                                 }
 153                                 v = spec[ 2 ];
 154
 155                                 if ( $field.first().prop( 'type' ) === 'radio' ||
 156                                         $field.first().prop( 'type' ) === 'checkbox'
 157                                 ) {
 158                                         getVal = function () {
 159                                                 var $selected = $field.filter( ':checked' );
 160                                                 return $selected.length ? $selected.val() : '';
 161                                         };
 162                                 } else {
 163                                         getVal = function () {
 164                                                 return $field.val();
 165                                         };
 166                                 }
 167
 168                                 switch ( op ) {
 169                                         case '===':
 170                                                 func = function () {
 171                                                         return getVal() === v;
 172                                                 };
 173                                                 break;
 174                                         case '!==':
 175                                                 func = function () {
 176                                                         return getVal() !== v;
 177                                                 };
 178                                                 break;
 179                                 }
 180
 181                                 return [ $field, func ];
 182
 183                         default:
 184                                 throw new Error( 'Unrecognized operation \'' + op + '\'' );
 185                 }
 186         }
 187
 188         /**
 189          * jQuery plugin to fade or snap to visible state.
 190          *
 191          * @param {boolean} [instantToggle=false]
 192          * @return {jQuery}
 193          * @chainable
 194          */
 195         $.fn.goIn = function ( instantToggle ) {
 196                 if ( instantToggle === true ) {
 197                         return this.show();
 198                 }
 199                 return this.stop( true, true ).fadeIn();
 200         };
 201
 202         /**
 203          * jQuery plugin to fade or snap to hiding state.
 204          *
 205          * @param {boolean} [instantToggle=false]
 206          * @return {jQuery}
 207          * @chainable
 208          */
 209         $.fn.goOut = function ( instantToggle ) {
 210                 if ( instantToggle === true ) {
 211                         return this.hide();
 212                 }
 213                 return this.stop( true, true ).fadeOut();
 214         };
 215
 216         /**
 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.
 219          *
 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.
 225          * @chainable
 226          * @return {jQuery}
 227          */
 228         mw.log.deprecate( $.fn, 'liveAndTestAtStart', function ( callback ) {
 229                 return this
 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 )
 234                         .each( function () {
 235                                 callback.call( this, true );
 236                         } );
 237         } );
 238
 239         function enhance( $root ) {
 240                 var $matrixTooltips, $autocomplete,
 241                         // cache the separator to avoid object creation on each keypress
 242                         colonSeparator = mw.message( 'colon-separator' ).text();
 243
 244                 /**
 245                  * @ignore
 246                  * @param {boolean|jQuery.Event} instant
 247                  */
 248                 function handleSelectOrOther( instant ) {
 249                         var $other = $root.find( '#' + $( this ).attr( 'id' ) + '-other' );
 250                         $other = $other.add( $other.siblings( 'br' ) );
 251                         if ( $( this ).val() === 'other' ) {
 252                                 $other.goIn( instant );
 253                         } else {
 254                                 $other.goOut( instant );
 255                         }
 256                 }
 257
 258                 // Animate the SelectOrOther fields, to only show the text field when
 259                 // 'other' is selected.
 260                 $root
 261                         .on( 'change', '.mw-htmlform-select-or-other', handleSelectOrOther )
 262                         .each( function () {
 263                                 handleSelectOrOther.call( this, true );
 264                         } );
 265
 266                 // Add a dynamic max length to the reason field of SelectAndOther
 267                 // This checks the length together with the value from the select field
 268                 // When the reason list is changed and the bytelimit is longer than the allowed,
 269                 // nothing is done
 270                 $root
 271                         .find( '.mw-htmlform-select-and-other-field' )
 272                         .each( function () {
 273                                 var $this = $( this ),
 274                                         // find the reason list
 275                                         $reasonList = $root.find( '#' + $this.data( 'id-select' ) ),
 276                                         // cache the current selection to avoid expensive lookup
 277                                         currentValReasonList = $reasonList.val();
 278
 279                                 $reasonList.change( function () {
 280                                         currentValReasonList = $reasonList.val();
 281                                 } );
 282
 283                                 $this.byteLimit( function ( input ) {
 284                                         // Should be built the same as in HTMLSelectAndOtherField::loadDataFromRequest
 285                                         var comment = currentValReasonList;
 286                                         if ( comment === 'other' ) {
 287                                                 comment = input;
 288                                         } else if ( input !== '' ) {
 289                                                 // Entry from drop down menu + additional comment
 290                                                 comment += colonSeparator + input;
 291                                         }
 292                                         return comment;
 293                                 } );
 294                         } );
 295
 296                 // Set up hide-if elements
 297                 $root.find( '.mw-htmlform-hide-if' ).each( function () {
 298                         var v, $fields, test, func,
 299                                 $el = $( this ),
 300                                 spec = $el.data( 'hideIf' );
 301
 302                         if ( !spec ) {
 303                                 return;
 304                         }
 305
 306                         v = hideIfParse( $el, spec );
 307                         $fields = v[ 0 ];
 308                         test = v[ 1 ];
 309                         func = function () {
 310                                 if ( test() ) {
 311                                         $el.hide();
 312                                 } else {
 313                                         $el.show();
 314                                 }
 315                         };
 316                         $fields.on( 'change', func );
 317                         func();
 318                 } );
 319
 320                 function addMulti( $oldContainer, $container ) {
 321                         var name = $oldContainer.find( 'input:first-child' ).attr( 'name' ),
 322                                 oldClass = ( ' ' + $oldContainer.attr( 'class' ) + ' ' ).replace( /(mw-htmlform-field-HTMLMultiSelectField|mw-chosen)/g, '' ),
 323                                 $select = $( '<select>' ),
 324                                 dataPlaceholder = mw.message( 'htmlform-chosen-placeholder' );
 325                         oldClass = $.trim( oldClass );
 326                         $select.attr( {
 327                                 name: name,
 328                                 multiple: 'multiple',
 329                                 'data-placeholder': dataPlaceholder.plain(),
 330                                 'class': 'htmlform-chzn-select mw-input ' + oldClass
 331                         } );
 332                         $oldContainer.find( 'input' ).each( function () {
 333                                 var $oldInput = $( this ),
 334                                 checked = $oldInput.prop( 'checked' ),
 335                                 $option = $( '<option>' );
 336                                 $option.prop( 'value', $oldInput.prop( 'value' ) );
 337                                 if ( checked ) {
 338                                         $option.prop( 'selected', true );
 339                                 }
 340                                 $option.text( $oldInput.prop( 'value' ) );
 341                                 $select.append( $option );
 342                         } );
 343                         $container.append( $select );
 344                 }
 345
 346                 function convertCheckboxesToMulti( $oldContainer, type ) {
 347                         var $fieldLabel = $( '<td>' ),
 348                         $td = $( '<td>' ),
 349                         $fieldLabelText = $( '<label>' ),
 350                         $container;
 351                         if ( type === 'tr' ) {
 352                                 addMulti( $oldContainer, $td );
 353                                 $container = $( '<tr>' );
 354                                 $container.append( $td );
 355                         } else if ( type === 'div' ) {
 356                                 $fieldLabel = $( '<div>' );
 357                                 $container = $( '<div>' );
 358                                 addMulti( $oldContainer, $container );
 359                         }
 360                         $fieldLabel.attr( 'class', 'mw-label' );
 361                         $fieldLabelText.text( $oldContainer.find( '.mw-label label' ).text() );
 362                         $fieldLabel.append( $fieldLabelText );
 363                         $container.prepend( $fieldLabel );
 364                         $oldContainer.replaceWith( $container );
 365                         return $container;
 366                 }
 367
 368                 if ( $root.find( '.mw-chosen' ).length ) {
 369                         mw.loader.using( 'jquery.chosen', function () {
 370                                 $root.find( '.mw-chosen' ).each( function () {
 371                                         var type = this.nodeName.toLowerCase(),
 372                                                 $converted = convertCheckboxesToMulti( $( this ), type );
 373                                         $converted.find( '.htmlform-chzn-select' ).chosen( { width: 'auto' } );
 374                                 } );
 375                         } );
 376                 }
 377
 378                 $matrixTooltips = $root.find( '.mw-htmlform-matrix .mw-htmlform-tooltip' );
 379                 if ( $matrixTooltips.length ) {
 380                         mw.loader.using( 'jquery.tipsy', function () {
 381                                 $matrixTooltips.tipsy( { gravity: 's' } );
 382                         } );
 383                 }
 384
 385                 // Set up autocomplete fields
 386                 $autocomplete = $root.find( '.mw-htmlform-autocomplete' );
 387                 if ( $autocomplete.length ) {
 388                         mw.loader.using( 'jquery.suggestions', function () {
 389                                 $autocomplete.suggestions( {
 390                                         fetch: function ( val ) {
 391                                                 var $el = $( this );
 392                                                 $el.suggestions( 'suggestions',
 393                                                         $.grep( $el.data( 'autocomplete' ), function ( v ) {
 394                                                                 return v.indexOf( val ) === 0;
 395                                                         } )
 396                                                 );
 397                                         }
 398                                 } );
 399                         } );
 400                 }
 401
 402                 // Add/remove cloner clones without having to resubmit the form
 403                 $root.find( '.mw-htmlform-cloner-delete-button' ).filter( ':input' ).click( function ( ev ) {
 404                         ev.preventDefault();
 405                         $( this ).closest( 'li.mw-htmlform-cloner-li' ).remove();
 406                 } );
 407
 408                 $root.find( '.mw-htmlform-cloner-create-button' ).filter( ':input' ).click( function ( ev ) {
 409                         var $ul, $li, html;
 410
 411                         ev.preventDefault();
 412
 413                         $ul = $( this ).prev( 'ul.mw-htmlform-cloner-ul' );
 414
 415                         html = $ul.data( 'template' ).replace(
 416                                 new RegExp( mw.RegExp.escape( $ul.data( 'uniqueId' ) ), 'g' ),
 417                                 'clone' + ( ++cloneCounter )
 418                         );
 419
 420                         $li = $( '<li>' )
 421                                 .addClass( 'mw-htmlform-cloner-li' )
 422                                 .html( html )
 423                                 .appendTo( $ul );
 424
 425                         enhance( $li );
 426                 } );
 427
 428                 mw.hook( 'htmlform.enhance' ).fire( $root );
 429
 430         }
 431
 432         $( function () {
 433                 enhance( $( document ) );
 434         } );
 435
 436         /**
 437          * @class jQuery
 438          * @mixins jQuery.plugin.htmlform
 439          */
 440 }( mediaWiki, jQuery ) );