Last active
August 29, 2015 14:05
-
-
Save jokesterfr/dbaa43dd45623d542c44 to your computer and use it in GitHub Desktop.
Example of i18n implementation with message format and handlebars
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<!-- | |
title: Demo using both handlebars and messageformat | |
date: 2014-08-12 | |
--> | |
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script> | |
<script src="https://raw.githubusercontent.com/SlexAxton/messageformat.js/master/messageformat.js"></script> | |
<script src="https://raw.githubusercontent.com/SlexAxton/messageformat.js/master/locale/en.js"></script> | |
<script src="https://raw.githubusercontent.com/SlexAxton/messageformat.js/master/locale/fr.js"></script> | |
<script type="text/javascript"> | |
document.addEventListener('DOMContentLoaded', main); | |
function main () { | |
// Set our default language | |
var currentLanguage = 'en-EN'; | |
// Our i18n dictionnary using messageformat syntax | |
var i18n = { | |
'en-EN': { | |
title: 'This is a demo', | |
toggleLanguage: 'Print this page in french', | |
genderExample: '{GENDER, select, male{He} female{She} other{They}} liked this.', | |
pluralExample: 'I like {NB, plural, one{this unique result} other{these # items}}.' | |
}, | |
'fr-FR': { | |
title: 'Ceci est une démo', | |
toggleLanguage: 'Afficher cette page en anglais', | |
genderExample: '{GENDER, select, male{Il} female{Elle} other{They}} a aimé ça.', | |
pluralExample: 'J\'aime {NB, plural, one{cet unique item} other{tous les # items}}.' | |
} | |
}; | |
// Compile the dictionnary | |
for (var lang in i18n) { | |
// Known messageformat issue | |
// @see https://github.com/SlexAxton/messageformat.js/issues/27 | |
var countryCode = lang.split('-')[0]; | |
var mf = new MessageFormat(countryCode); | |
for (var label in i18n[lang]) { | |
i18n[lang][label] = mf.compile(i18n[lang][label]); | |
} | |
} | |
// Declaring our i18n helper to handlebars | |
Handlebars.registerHelper('i18n', function(text, options) { | |
text = text || 'undefined'; | |
options = options || {}; | |
var translate = i18n[currentLanguage][text]; | |
return new Handlebars.SafeString(translate(options.hash)); | |
}); | |
// Our data view (ie dynamic vars, u can play with them) | |
var view = { | |
nbitems: 1, // or 5 | |
mygender: 'male' // or female | |
}; | |
function renderTemplate() { | |
var source = document.getElementById('button-template').innerHTML; | |
var template = Handlebars.compile(source); | |
var dest = document.getElementById('dest'); | |
dest.innerHTML = template(view); | |
} | |
renderTemplate(); | |
window.toggleLanguage = function () { | |
if (currentLanguage === 'fr-FR') { | |
currentLanguage = 'en-EN'; | |
} else { | |
currentLanguage = 'fr-FR'; | |
} | |
renderTemplate(); | |
} | |
} | |
</script> | |
<!-- Our handlebar simple template using i18n helper --> | |
<script id="button-template" type="text/x-handlebars-template"> | |
<h2>{{i18n "title"}}</h2> | |
<div>{{i18n "pluralExample" NB=nbitems}}</div> | |
<div>{{i18n "genderExample" GENDER=mygender}}</div> | |
<button onclick="toggleLanguage()">{{i18n "toggleLanguage"}}</button> | |
</script> | |
<!-- To receive dom content when tpl is compiled --> | |
<div id="dest"></div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment