X-Git-Url: https://scripts.mit.edu/gitweb/autoinstallsdev/mediawiki.git/blobdiff_plain/19e297c21b10b1b8a3acad5e73fc71dcb35db44a..6932310fd58ebef145fa01eb76edf7150284d8ea:/resources/src/jquery/jquery.localize.js
diff --git a/resources/src/jquery/jquery.localize.js b/resources/src/jquery/jquery.localize.js
new file mode 100644
index 00000000..05b3891d
--- /dev/null
+++ b/resources/src/jquery/jquery.localize.js
@@ -0,0 +1,170 @@
+/**
+ * @class jQuery.plugin.localize
+ */
+( function ( $, mw ) {
+
+ /**
+ * Gets a localized message, using parameters from options if present.
+ *
+ * @ignore
+ * @param {Object} options
+ * @param {string} key
+ * @return {string} Localized message
+ */
+ function msg( options, key ) {
+ var args = options.params[ key ] || [];
+ // Format: mw.msg( key [, p1, p2, ...] )
+ args.unshift( options.prefix + ( options.keys[ key ] || key ) );
+ return mw.msg.apply( mw, args );
+ }
+
+ /**
+ * Localizes a DOM selection by replacing
\
+ *
+ * Awesome + * + * + *
+ * + * Arguments can be passed into uses of a message using the params property of the options object + * given to .localize(). Multiple messages can be given parameters, because the params property is + * an object keyed by the message key to apply the parameters to, each containing an array of + * parameters to use. The limitation is that you can not use different parameters to individual uses + * of a message in the same selection being localized - they will all recieve the same parameters. + * + * Example: + * // Messages: { 'easy-as': 'Easy as $1 $2 $3.' } + * var html = 'Easy as a, b, c
+ * + * Raw HTML content can be used, instead of it being escaped as text. To do this, just use the raw + * attribute on a msg element. + * + * Example: + * // Messages: { 'hello': 'Hello $1!' } + * var html = '\ + *\
+ *
+ * <b><i>Hello</i> world!</b> + * Hello world! + *
+ * + * Message keys can also be remapped, allowing the same generic template to be used with a variety + * of messages. This is important for improving re-usability of templates. + * + * Example: + * // Messages: { 'good-afternoon': 'Good afternoon' } + * var html = 'Good afternoon
+ * + * Message keys can also be prefixed globally, which is handy when writing extensions, where by + * convention all messages are prefixed with the extension's name. + * + * Example: + * // Messages: { 'teleportation-warning': 'You may not get there all in one piece.' } + * var html = 'You may not get there all in one piece.
+ * + * @param {Object} options Map of options to be used while localizing + * @param {string} options.prefix String to prepend to all message keys + * @param {Object} options.keys Message key aliases, used for remapping keys to a template + * @param {Object} options.params Lists of parameters to use with certain message keys + * @return {jQuery} + * @chainable + */ + $.fn.localize = function ( options ) { + var $target = this, + attributes = [ 'title', 'alt', 'placeholder' ]; + + // Extend options + options = $.extend( { + prefix: '', + keys: {}, + params: {} + }, options ); + + // Elements + // 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' doesn't. In later IE and other browsers, searching + // for 'html:msg' turns up the 'html:msg', but searching for 'msg' doesn't. So searching for + // both 'msg' and 'html:msg' seems to get the job done. This feels pretty icky, though. + $target.find( 'msg,html\\:msg' ).each( function () { + var $el = $( this ); + // Escape by default + if ( $el.attr( 'raw' ) ) { + $el.html( msg( options, $el.attr( 'key' ) ) ); + } else { + $el.text( msg( options, $el.attr( 'key' ) ) ); + } + // Remove wrapper + $el.replaceWith( $el.html() ); + } ); + + // Attributes + // Note: there's no way to prevent escaping of values being injected into attributes, this is + // on purpose, not a design flaw. + $.each( attributes, function ( i, attr ) { + var msgAttr = attr + '-msg'; + $target.find( '[' + msgAttr + ']' ).each( function () { + var $el = $( this ); + $el.attr( attr, msg( options, $el.attr( msgAttr ) ) ).removeAttr( msgAttr ); + } ); + } ); + + // HTML, Text for elements which cannot have children e.g. OPTION + $target.find( '[data-msg-text]' ).each( function () { + var $el = $( this ); + $el.text( msg( options, $el.attr( 'data-msg-text' ) ) ); + } ); + + $target.find( '[data-msg-html]' ).each( function () { + var $el = $( this ); + $el.html( msg( options, $el.attr( 'data-msg-html' ) ) ); + } ); + + return $target; + }; + + // Let IE know about the msg tag before it's used... + document.createElement( 'msg' ); + + /** + * @class jQuery + * @mixins jQuery.plugin.localize + */ + +}( jQuery, mediaWiki ) );