[New] Initial commit

2014-07-22 21:53:16 +02:00 · 2014-07-22 21:53:16 +02:00 · 4fc98720a8
parent 5ea335ebd3
commit 4fc98720a8
4 changed files with 118 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1 @@
+.idea
--- a/en/messages.json
+++ b/en/messages.json
@ -0,0 +1,5 @@
+{
+    "app.name" : "My App",
+    "app.title" : "My title",
+    "myElement.i18n": "Lorem ipsum"
+}
--- a/i18n.js
+++ b/i18n.js
@ -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
+}
--- a/i18n_test.html
+++ b/i18n_test.html
@ -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>