Skip to content

Instantly share code, notes, and snippets.

@villesiltala

villesiltala/i18n.html

Last active April 4, 2016 06:59
Show Gist options
  • Save villesiltala/274a57207db9b2590598cedcf6bcd3c4 to your computer and use it in GitHub Desktop.
Save villesiltala/274a57207db9b2590598cedcf6bcd3c4 to your computer and use it in GitHub Desktop.
Download ZIP
A client-side i18n example with some simple jQuery DOM manipulation.
Raw
i18n.html
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment