easyi18n
Version:
Easy to use internationalisation (i18n): translate and localise your website or app. Uniquely, this does not require any refactoring of your code to work.
94 lines (78 loc) • 3.2 kB
HTML
<html>
<head>
<title>Simple i18njs example</title>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<!-- i18n.js (please download your own copy) -->
<script src='i18n.js'></script>
<script>
// Normally you'd get the language from user settings.
// Here we get it from the url.
var url = ""+window.location;
var _lang = url.match(/lang=(\w+)/);
var lang = _lang? _lang[1] : false;
// Let's make an I18N object!
var i18n;
if (lang == 'cockney') {
// Option 1: We'll define the translations here
// Cockney (generated using http://www.rinkworks.com/dialect/)
i18n = new I18N();
i18n.add("Hello World", "'Allo World");
i18n.add("Hello {Alice}", "Wotcher {Alice}");
i18n.add("You have 3 message(s)", "Yer 'ave 3 message(s)");
i18n.add("Back to i18njs site", "Hammer and tack to i18njs site");
i18n.add("flag.png", "http://www.cockneypride.co.uk/cockney2.jpg");
} else if (lang) {
// Option 2: We'll load the translations from a tab-separated csv file.
i18n = new I18N(lang, lang+'.csv');
} else {
// No translations -- but we can still clean up plural(s)
i18n = new I18N(null, '#foo');
i18n.add("flag.png", "http://www.blisstree.com/files/2008/12/dsc_0364_tea_cup.jpg");
lang = "default (English)";
}
// Export tr() to global for easy access.
window.tr = function(s) {return i18n.tr(s);};
</script>
</head>
<body>
<div class='container'>
<h1><span class='translate'>Hello World!</span> <span class='class='translate'>Simple i18njs example... in</span> <script>document.write(lang)</script></h1>
<ul>
<li>"Hello World", using tr() directly: <script>document.write(
tr('Hello World')
)</script></li>
<li>"Hello {Alice}" (i.e. using a placeholder): <script>document.write(
tr('Hello {Alice}')
)</script></li>
<li>"You have 3 message(s)" (i.e. using numbers and plurals):
<script>document.write(
tr('You have 3 message(s)')
)</script></li>
<li>Hello using jQuery: <span class='translate'>Hello using jQuery</span></li>
<li>You can also use tr() for non-textual localisation:
<script>document.write(
"<img src='"+tr('flag.png')+"'>"
)</script>
</li>
</ul>
<ul>
<li><a href='HelloWorld.html'>English</a></li>
<li><a href='HelloWorld.html?lang=fr'>French</a></li>
<li><a href='HelloWorld.html?lang=lolcat'>LOL Cat</a></li>
<li><a href='HelloWorld.html?lang=cockney'>Cockney</a></li>
</ul>
<p><a href='index.html' class='translate'>Back to i18njs site</a></p>
</div>
<!-- Use jQuery at the end of the page - but NOT in a post-load $() wrapper (which could cause some flickering). -->
<script>
$('.translate').each(function(){
var original = $(this).text();
var trans = tr(original);
console.log(this, original, trans);
$(this).text(trans);
});
</script>
</body>
</html>