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                                 var msgText = msg( $el.attr( 'key' ) );
  49
  50                                 if ( $el.attr('raw') ) {
  51                                         $el.html(msgText);
  52                                 } else {
  53                                         $el.text(msgText);
  54                                 }
  55
  56                                 $el
  57                                         .replaceWith( $el.html() );
  58                         } )
  59                         .end()
  60                 .find( '[title-msg]' )
  61                         .each( function() {
  62                                 var $el = $(this);
  63                                 $el
  64                                         .attr( 'title', msg( $el.attr( 'title-msg' ) ) )
  65                                         .removeAttr( 'title-msg' );
  66                         } )
  67                         .end()
  68                 .find( '[alt-msg]' )
  69                         .each( function() {
  70                                 var $el = $(this);
  71                                 $el
  72                                         .attr( 'alt', msg( $el.attr( 'alt-msg' ) ) )
  73                                         .removeAttr( 'alt-msg' );
  74                         } )
  75                         .end();
  76 };
  77
  78 // Let IE know about the msg tag before it's used...
  79 document.createElement( 'msg' );
  80 } )( jQuery );