[New] Initial commit
This commit is contained in:
parent
5ea335ebd3
commit
4fc98720a8
|
@ -0,0 +1 @@
|
||||||
|
.idea
|
|
@ -0,0 +1,5 @@
|
||||||
|
{
|
||||||
|
"app.name" : "My App",
|
||||||
|
"app.title" : "My title",
|
||||||
|
"myElement.i18n": "Lorem ipsum"
|
||||||
|
}
|
|
@ -0,0 +1,98 @@
|
||||||
|
var i18n = {
|
||||||
|
resource: "messages",
|
||||||
|
locale: null,
|
||||||
|
bundle: null,
|
||||||
|
detectLocale: function () {
|
||||||
|
var locale;
|
||||||
|
locale = navigator.language; // (Netscape - Browser Localization)
|
||||||
|
if (!locale) {
|
||||||
|
navigator.browserLanguage; //(IE-Specific - Browser Localized Language)
|
||||||
|
}
|
||||||
|
if (!locale) {
|
||||||
|
navigator.systemLanguage; //(IE-Specific - Windows OS - Localized Language)
|
||||||
|
}
|
||||||
|
if (!locale) {
|
||||||
|
navigator.userLanguage;
|
||||||
|
}
|
||||||
|
if (!locale) {
|
||||||
|
locale = "en";
|
||||||
|
console.info("Defaulting to " + locale)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (locale.length > 2) {
|
||||||
|
console.info("Shortening locale to top level: " + locale)
|
||||||
|
locale = locale.substring(0, 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
console.info("Current locale: " + locale);
|
||||||
|
return locale;
|
||||||
|
},
|
||||||
|
|
||||||
|
load18n: function (locale, resource) {
|
||||||
|
|
||||||
|
var bundle = [null];
|
||||||
|
|
||||||
|
var client = new XMLHttpRequest();
|
||||||
|
client.onreadystatechange = function () {
|
||||||
|
if (client.readyState == 4) {
|
||||||
|
if (client.status == 200) {
|
||||||
|
var queryResult = JSON.parse(client.responseText);
|
||||||
|
bundle[0] = queryResult;
|
||||||
|
} else {
|
||||||
|
alert("The request did not succeed!\n\nThe response status was: " + client.status + " "
|
||||||
|
+ client.statusText + ".\n\nClient response: " + client.responseText);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var url = locale + "/" + resource + ".json";
|
||||||
|
client.open("GET", url, false);
|
||||||
|
client.setRequestHeader("Accept", "application/json");
|
||||||
|
//client.setRequestHeader("Content-Type", "plain/text"); // "application/x-www-form-urlencoded"
|
||||||
|
client.send();
|
||||||
|
|
||||||
|
return bundle[0];
|
||||||
|
},
|
||||||
|
|
||||||
|
t: function (key) {
|
||||||
|
if (this.locale == null) {
|
||||||
|
this.locale = this.detectLocale();
|
||||||
|
}
|
||||||
|
if (this.bundle == null) {
|
||||||
|
this.bundle = this.load18n(this.locale, this.resource);
|
||||||
|
}
|
||||||
|
|
||||||
|
var msg = this.bundle[key];
|
||||||
|
if (msg == null)
|
||||||
|
msg = key;
|
||||||
|
|
||||||
|
return msg;
|
||||||
|
},
|
||||||
|
|
||||||
|
translate_document: function () {
|
||||||
|
var listToI18n = document.querySelectorAll("*[data-i18n]");
|
||||||
|
console.info("Translating " + listToI18n.length + " elements.")
|
||||||
|
Array.prototype.slice.call(listToI18n).forEach(function (itemToI18n, index, arr) {
|
||||||
|
var key = itemToI18n.getAttribute("data-i18n");
|
||||||
|
if (key != null && key.length > 0) {
|
||||||
|
var msg = i18n.t(key);
|
||||||
|
if (msg != null || msg.length == 0) {
|
||||||
|
console.info("Missing translation for key: " + key);
|
||||||
|
} else {
|
||||||
|
itemToI18n.innerText = msg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function run() {
|
||||||
|
|
||||||
|
// translate all elements which have a "data-i18n" attribute
|
||||||
|
i18n.translate_document();
|
||||||
|
|
||||||
|
// translate a single item:
|
||||||
|
var myValue = i18n.t("app.name")
|
||||||
|
var elem = document.getElementById("myElement");
|
||||||
|
elem.innerText = myValue
|
||||||
|
}
|
|
@ -0,0 +1,14 @@
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>i18n test</title>
|
||||||
|
|
||||||
|
<script src="i18n.js"></script>
|
||||||
|
</head>
|
||||||
|
<body onload="run()">
|
||||||
|
<h1>Bla bla</h1>
|
||||||
|
|
||||||
|
<p id="myElement">Original text...</p>
|
||||||
|
|
||||||
|
<p id="myParagraph" data-i18n="myElement.i18n">Untranslated bla bla</p>
|
||||||
|
</body>
|
||||||
|
</html>
|
Loading…
Reference in New Issue