(function() {
"use strict";
/*
* @class Lokalizr
* @constructor Lokalizr
* @param languages {Object} [required]
* @param defaultLanguage {String} [optional]
**/
function Lokalizr(languages, defaultLanguage) {
this.languages = languages || {};
if(defaultLanguage) {
this.localize(defaultLanguage);
}
}
Lokalizr.prototype = {
/*
* @map ATTR
* @public
**/
ATTRS: {
lang: "data-lang"
},
/*
* @map MESSAGES
* @public
**/
MESSAGES: {
invalid: "Invalid language code."
},
/*
* @method localize
* @public
* @param langCode {String} [required]
**/
localize: function(langCode) {
if(false === "querySelectorAll" in document) {
return;
}
var
lang = this.languages[langCode],
attr = this.ATTRS.lang,
elements = document.querySelectorAll("[" + attr + "]");
if(!lang) {
this.error(this.MESSAGES.invalid);
return;
}
for(var i = 0, len = elements.length; i < len; i++) {
var
element = elements[i],
key = element.getAttribute(attr);
element.innerHTML = lang[key];
}
},
/*
* @method getLangString
* @public
* @param langCode {String} [required]
* @param langString {String} [required]
* @return {String}
**/
getLangString: function(langCode, langString) {
if(langCode && langString) {
return this.languages[langCode][langString];
}
},
/*
* @method error
* @public
* @param message {String} [required]
**/
error: function(message) {
window.alert(message);
}
};
window.Lokalizr = Lokalizr;
})();
[/sourcecode]
Example Markup:
[sourcecode language=”xml”]
<p data-lang="hello">Hello</p>
<p data-lang="good-morning">Good Morning</p>
<p data-lang="good-evening">Good Evening</p>
[/sourcecode]
Usage:
[sourcecode language=”javascript”]
(function() {
// instantiate Lokalizr and localize automatically
window.lang = new window.Lokalizr({
"en-US": {
"hello": "Hi",
"good-morning": "Good morning",
"good-evening": "Good evening"
},
"de-DE": {
"hello": "Hallo",
"good-morning": "guten Morgen",
"good-evening": "guten Abend"
}
} , "de-DE");
// localize on demand
window.lang.localize("en-US");
// get specific language keys
window.console.log("language string",
window.lang.getLangString("de-DE", "hello"));
window.console.log("language string",
window.lang.getLangString("de-DE", "good-morning"));
window.console.log("language string",
window.lang.getLangString("de-DE", "good-evening"));
})();
[/sourcecode]
That’s it! Did you check the demo?.
Enjoy the weekend!
Related Posts
© 2006 - 2025 Martin Ivanov