resources/jquery/jquery.localize.js

   1 /**
   2  * Simple Placeholder-based Localization
   3  *
   4  * Call on a selection of HTML which contains <html:msg key="message-key" /> elements or elements with
   5  * title-msg="message-key" or alt-msg="message-key" attributes. <html:msg /> elements will be replaced
   6  * with localized text, elements with title-msg and alt-msg attributes will receive localized title
   7  * and alt attributes.
   8  * *
   9  * Example:
  10  *              <p class="somethingCool">
  11  *                      <html:msg key="my-message" />
  12  *                      <img src="something.jpg" title-msg="my-title-message" alt-msg="my-alt-message" />
  13  *              </p>
  14  *
  15  * Localizes to...
  16  *              <p class="somethingCool">
  17  *                      My Message
  18  *                      <img src="something.jpg" title="My Title Message" alt="My Alt Message" />
  19  *              </p>
  20  */
  21 ( function( $ ) {
  22 /**
  23  * Localizes a DOM selection by replacing <html:msg /> elements with localized text and adding
  24  * localized title and alt attributes to elements with title-msg and alt-msg attributes
  25  * respectively.
  26  *
  27  * @param Object: options Map of options
  28  *  * prefix: Message prefix to use when localizing elements and attributes
  29  */
  30
  31 $.fn.localize = function( options ) {
  32         options = $.extend( { 'prefix': '', 'keys': {}, 'params': {} }, options );
  33         function msg( key ) {
  34                 var args = key in options.params ? options.params[key] : [];
  35                 // Format: mw.msg( key [, p1, p2, ...] )
  36                 args.unshift( options.prefix + ( key in options.keys ? options.keys[key] : key ) );
  37                 return mw.msg.apply( mw, args );
  38         };
  39         return $(this)
  40                 // Ok, so here's the story on this selector.
  41                 // In IE 6/7, searching for 'msg' turns up the 'html:msg', but searching for 'html:msg' does not.
  42                 // In later IE and other browsers, searching for 'html:msg' turns up the 'html:msg', but searching for 'msg' does not.
  43                 // So searching for both 'msg' and 'html:msg' seems to get the job done.
  44                 // This feels pretty icky, though.
  45                 .find( 'msg,html\\:msg' )
  46                         .each( function() {
  47                                 var $el = $(this);
  48                                 $el
  49                                         .text( msg( $el.attr( 'key' ) ) )
  50                                         .replaceWith( $el.html() );
  51                         } )
  52                         .end()
  53                 .find( '[title-msg]' )
  54                         .each( function() {
  55                                 var $el = $(this);
  56                                 $el
  57                                         .attr( 'title', msg( $el.attr( 'title-msg' ) ) )
  58                                         .removeAttr( 'title-msg' );
  59                         } )
  60                         .end()
  61                 .find( '[alt-msg]' )
  62                         .each( function() {
  63                                 var $el = $(this);
  64                                 $el
  65                                         .attr( 'alt', msg( $el.attr( 'alt-msg' ) ) )
  66                                         .removeAttr( 'alt-msg' );
  67                         } )
  68                         .end();
  69 };
  70
  71 // Let IE know about the msg tag before it's used...
  72 document.createElement( 'msg' );
  73 } )( jQuery );