<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Client-side i18n</title>
</head>
<body>
<div class="container">
<header>
<ul id="i18n-menu">
<li><a href="#" id="fi-FI">FI</a></li>
<li><a href="#" id="en-GB">EN</a></li>
</ul>
</header>
<section>
<p id="p1"></p>
<p id="p2"></p>
</section>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
window.i18n = ( function( window, document, $ ) {
var app = {
locales: {
fi: {
p1: "Ensimmäinen kappale.",
p2: "Toinen kappale."
},
en: {
p1: "First paragraph.",
p2: "Second paragraph."
}
}
};
app.cache = function() {
app.$menu = $("#i18n-menu");
};
app.init = function() {
app.cache();
var locale = app.getLocale();
if (locale)
app.localize(locale);
else
app.localize("fi-FI"); // fallback to fi-FI
app.$menu.on("click", "a", app.toggleLocale);
};
app.toggleLocale = function(e) {
e.preventDefault();
app.localize(e.target.id);
};
app.localize = function(locale) {
switch(locale) {
case "fi-FI":
$.each( app.locales.fi, function( key, value ) {
var elem = $("#" + key);
elem.html(value);
});
break;
case "en":
case "en-GB":
case "en-US":
// etc
$.each( app.locales.en, function( key, value ) {
var elem = $("#" + key);
elem.html(value);
});
break;
};
};
app.getLocale = function() {
return window.navigator.userLanguage || window.navigator.language;
};
$(document).ready( app.init );
return app;
})( window, document, jQuery );
</script>
</body>
</html>