jQuery.i18n.properties is a lightweight jQuery plugin for providing internationalization to javascript from ‘.properties’ files, just like in Java Resource Bundles. It loads and parses resource bundles (.properties) based on provided language and country codes (ISO-639 and ISO-3166) or language reported by browser.
Resource bundles are ‘.properties‘ files containing locale specific key-value pairs. The use of ‘.properties‘ files for translation is specially useful when sharing i18n files between Java and Javascript projects. This plugin loads the default file (eg, Messages.properties) first and then locale specific files (Messages_pt.properties, then Messages_pt_BR.properties), so that a default value is always available when there is no translation provided. Translation keys will be available to developer as javascript variables/functions (functions, if translated value contains substitutions (eg, {0}) or as a map.
This plugin was inspired on the Localisation assistance for jQuery from Keith Wood.
1.2.7
This project was originally created by Nuno Miguel Correia Serra Fernandes and published on Google Code. In 2014 it has been migrated to Github which is now the official repository.
Since then, other great contributors joined the project (see Credits section below).
It has been used in various projects, including the WebRTC phone JSCommunicator (see the demo there to see jquery-i18n-properties in action), some Sakai Project tools, etc.
Take as an example the following .properties files:
Messages.properties:
# This line is ignored by the plugin
msg_hello = Hello
msg_world = World
msg_complex = Good morning {0}!
Messages_pt.properties:
# We only provide a translation for the 'msg_hello' key msg_hello = Bom dia
Messages_pt_BR.properties:
# We only provide a translation for the 'msg_hello' key msg_hello = Olá
Now, suppose these files are located on the bundle/ folder. One can invoke the plugin like below:
// This will initialize the plugin
// and show two dialog boxes: one with the text "Olá World"
// and other with the text "Good morning John!"
jQuery.i18n.properties({
name:'Messages',
path:'bundle/',
mode:'both',
language:'pt_BR',
async: true,
callback: function() {
// We specified mode: 'both' so translated values will be
// available as JS vars/functions and as a map
// Accessing a simple value through the map
jQuery.i18n.prop('msg_hello');
// Accessing a value with placeholders through the map
jQuery.i18n.prop('msg_complex', 'John');
// Accessing a simple value through a JS variable
alert(msg_hello +' '+ msg_world);
// Accessing a value with placeholders through a JS function
alert(msg_complex('John'));
}
});
This will initialize the plugin (loading bundle files and parsing them) and show a dialog box with the text “Olá World” and other with “Good morning John!”. The english word “World” is shown because we didn’t provide a translation for the msg_world key. Also notice that keys are available as a map and also as javascript variables (for simple strings) and javascript functions (for strings with placeholders for substitution).
Synchronous Ajax has now been deprecated and will be removed at some point in the future, so web developers need to start thinking about writing their code as callbacks (https://xhr.spec.whatwg.org/).
With this in mind ...
If you supply the flag 'async' on the settings and set it to true, all ajax calls are executed asynchronously and the supplied callback is called after the language files have all been downloaded and parsed. If you leave the flag off, or set it to false, the behaviour is as before: all the files are parsed synchronously and the callback is called at the end of the process.
<head> section:<script type="text/javascript" language="JavaScript" src="js/jquery.i18n.properties-min.js"></script>
<script>
jQuery.i18n.properties({
name: 'Messages',
callback: function(){ alert( org.somekey ); }
});
</script> Additional requirement on Firefox
If using Firefox and a Tomcat webapp, you may get a syntax error in the Javascript console. The solution is to tell Tomcat the properties files should be interpreted as text/plain. To do this, add the following to your web.xml: <mime-mapping> <extension>properties</extension> <mime-type>text/plain</mime-type> </mime-mapping>
Install the closure compiler tool:
apt-get update && apt-get install closure-compiler
Run it:
closure-compiler --js jquery.i18n.properties.js \ --js_output_file jquery.i18n.properties.min.js
Copyright © 2011 Nuno Miguel Correia Serra Fernandes (nunogrilo.com)
Special thanks to great contributors:
Licensed under the MIT License.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4