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 ( $, mw ) {
  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( {
  33                 prefix: '',
  34                 keys: {},
  35                 params: {}
  36         }, options );
  37
  38         function msg( key ) {
  39                 var args = key in options.params ? options.params[key] : [];
  40                 // Format: mw.msg( key [, p1, p2, ...] )
  41                 args.unshift( options.prefix + ( key in options.keys ? options.keys[key] : key ) );
  42                 return mw.msg.apply( mw, args );
  43         }
  44
  45         return $(this)
  46                 // Ok, so here's the story on this selector.
  47                 // In IE 6/7, searching for 'msg' turns up the 'html:msg', but searching for 'html:msg' does not.
  48                 // In later IE and other browsers, searching for 'html:msg' turns up the 'html:msg', but searching for 'msg' does not.
  49                 // So searching for both 'msg' and 'html:msg' seems to get the job done.
  50                 // This feels pretty icky, though.
  51                 .find( 'msg,html\\:msg' )
  52                         .each( function () {
  53                                 var $el = $(this);
  54                                 var msgText = msg( $el.attr( 'key' ) );
  55
  56                                 if ( $el.attr( 'raw' ) ) {
  57                                         $el.html(msgText);
  58                                 } else {
  59                                         $el.text(msgText);
  60                                 }
  61
  62                                 $el
  63                                         .replaceWith( $el.html() );
  64                         } )
  65                         .end()
  66                 .find( '[title-msg]' )
  67                         .each( function () {
  68                                 var $el = $(this);
  69                                 $el
  70                                         .attr( 'title', msg( $el.attr( 'title-msg' ) ) )
  71                                         .removeAttr( 'title-msg' );
  72                         } )
  73                         .end()
  74                 .find( '[alt-msg]' )
  75                         .each( function () {
  76                                 var $el = $(this);
  77                                 $el
  78                                         .attr( 'alt', msg( $el.attr( 'alt-msg' ) ) )
  79                                         .removeAttr( 'alt-msg' );
  80                         } )
  81                         .end();
  82 };
  83
  84 // Let IE know about the msg tag before it's used...
  85 document.createElement( 'msg' );
  86
  87 }( jQuery, mediaWiki ) );