80 lines
2.5 KiB
JavaScript
80 lines
2.5 KiB
JavaScript
/**
|
|
* Simple Placeholder-based Localization
|
|
*
|
|
* Call on a selection of HTML which contains <html:msg key="message-key" /> elements or elements with
|
|
* title-msg="message-key" or alt-msg="message-key" attributes. <html:msg /> elements will be replaced
|
|
* with localized text, elements with title-msg and alt-msg attributes will receive localized title
|
|
* and alt attributes.
|
|
* *
|
|
* Example:
|
|
* <p class="somethingCool">
|
|
* <html:msg key="my-message" />
|
|
* <img src="something.jpg" title-msg="my-title-message" alt-msg="my-alt-message" />
|
|
* </p>
|
|
*
|
|
* Localizes to...
|
|
* <p class="somethingCool">
|
|
* My Message
|
|
* <img src="something.jpg" title="My Title Message" alt="My Alt Message" />
|
|
* </p>
|
|
*/
|
|
( function( $ ) {
|
|
/**
|
|
* Localizes a DOM selection by replacing <html:msg /> elements with localized text and adding
|
|
* localized title and alt attributes to elements with title-msg and alt-msg attributes
|
|
* respectively.
|
|
*
|
|
* @param Object: options Map of options
|
|
* * prefix: Message prefix to use when localizing elements and attributes
|
|
*/
|
|
|
|
$.fn.localize = function( options ) {
|
|
options = $.extend( { 'prefix': '', 'keys': {}, 'params': {} }, options );
|
|
function msg( key ) {
|
|
var args = key in options.params ? options.params[key] : [];
|
|
// Format: mw.msg( key [, p1, p2, ...] )
|
|
args.unshift( options.prefix + ( key in options.keys ? options.keys[key] : key ) );
|
|
return mw.msg.apply( mw, args );
|
|
};
|
|
return $(this)
|
|
// Ok, so here's the story on this selector.
|
|
// In IE 6/7, searching for 'msg' turns up the 'html:msg', but searching for 'html:msg' does not.
|
|
// In later IE and other browsers, searching for 'html:msg' turns up the 'html:msg', but searching for 'msg' does not.
|
|
// So searching for both 'msg' and 'html:msg' seems to get the job done.
|
|
// This feels pretty icky, though.
|
|
.find( 'msg,html\\:msg' )
|
|
.each( function() {
|
|
var $el = $(this);
|
|
var msgText = msg( $el.attr( 'key' ) );
|
|
|
|
if ( $el.attr('raw') ) {
|
|
$el.html(msgText);
|
|
} else {
|
|
$el.text(msgText);
|
|
}
|
|
|
|
$el
|
|
.replaceWith( $el.html() );
|
|
} )
|
|
.end()
|
|
.find( '[title-msg]' )
|
|
.each( function() {
|
|
var $el = $(this);
|
|
$el
|
|
.attr( 'title', msg( $el.attr( 'title-msg' ) ) )
|
|
.removeAttr( 'title-msg' );
|
|
} )
|
|
.end()
|
|
.find( '[alt-msg]' )
|
|
.each( function() {
|
|
var $el = $(this);
|
|
$el
|
|
.attr( 'alt', msg( $el.attr( 'alt-msg' ) ) )
|
|
.removeAttr( 'alt-msg' );
|
|
} )
|
|
.end();
|
|
};
|
|
|
|
// Let IE know about the msg tag before it's used...
|
|
document.createElement( 'msg' );
|
|
} )( jQuery );
|