So you’ve built a cool widget for everyone to use, but will everyone understand what it displays? What language to display could be detected from the browser’s current language, or maybe by inferring language from geo-location. However, wouldn’t it be great if you already had this information right in your widget?
We’ll make liberal use of a fantastic article written by Andrea Giammarchi; Easy i18n in 10 lines of JavaScript (PoC). She’s built a very simple i18n function that will suit our needs nicely. When building your widget, you’ll want to choose the i18n library or toolsets that meet your specific needs and workflow.
In your digital workplace, window.parent.currentLang provides us with the currently selected language. To provide a more personal message, we’ll also pull out the user’s name using window.parent.Igloo.currentUser.name.
It's as simple as:
// set the current local for our i18n function using Igloo's current language: i18n.locale = window.parent.currentLang; // get the user's name: var whoami = window.parent.Igloo.currentUser.name;
After a user changes their language settings, the Widget and Page will reload and window.parent.currentLang will contain the new ‘current’ language.
Here’s the entire International Hello World widget script:
<html><head><meta name="viewport" content="initial-scale=1.0, user-scalable=no" charset="utf-8"></head>
<body>
<h1 id="greeting"></h1>
<script>
// Here's Andrea Giammarchi's i18n code.
// See: https://codeburst.io/easy-i18n-in-10-lines-of-javascript-poc-eb9e5444d71e
function i18n(template) {
for (var
info = i18n.db[i18n.locale][template.join('\x01')],
out = [info.t[0]],
i = 1, length = info.t.length; i < length; i++
) out[i] = arguments[1 + info.v[i - 1]] + info.t[i];
return out.join('');
}
i18n.set = locale => (tCurrent, ...rCurrent) => {
const key = tCurrent.join('\x01');
let db = i18n.db[locale] || (i18n.db[locale] = {});
db[key] = {
t: tCurrent.slice(),
v: rCurrent.map((value, i) => i)
};
const config = {
for: other => (tOther, ...rOther) => {
db = i18n.db[other] || (i18n.db[other] = {});
db[key] = {
t: tOther.slice(),
v: rOther.map((value, i) => rCurrent.indexOf(value))
};
return config;
}
};
return config;
};
// let's initialize the language database.
i18n.db = {};
i18n.set('en')`Hello ${'name'}`
.for('de')`Hallo ${'name'}`
.for('it')`Ciao ${'name'}`
.for('fr')`Bonjour ${'name'}`
.for('sp')`Hola ${'name'}`;
// we'll set the current local for our i18n function using
// igloo's current language:
i18n.locale = window.parent.currentLang;
// lets also get the user's name:
var whoami = window.parent.Igloo.currentUser.name;
// and we'll create our 'greeting' as a variable
var greeting = i18n`Hello ${whoami}`
// grab the html tag where we'll put our greeting
var element = document.getElementById('greeting');
// and assign the text.
element.innerText = greeting;
</script>
</body>
</html>
As a quick example, this is great – but for production use we would want to add the usual suspects: Unit testing, documentation, and to minify it. We would also want to implement the i18n database of strings in a more scalable manner – so that we don’t need to build/upload the whole widget every time we want to add a locale/language.
So - Was baust du?
1 Comment
Disclaimer: I don't really speak all of those languages. Liberal use of Google Translate was employed.