Translation library does basic language switching

src/js/translate.js

@@ -0,0 +1,140 @@
+// An extremely basic translation library
+//
+// Example usage:
+//
+// Set some html to be translated. Do this using the 'data-translate' attribute:
+//
+//   <div data-translate>Test</div>
+//   <div data-translate-html><em>keep em tag</em></div>
+//   <input data-translate-placeholder placeholder="Example text">
+//
+// Obtain all the phrases to be translated via js debug console:
+//
+//   Translate.phrasesAsJson();
+//
+// Use that template to translate the phrases into another language.
+// Leave the key the same. Change the value to the new language.
+//
+// Create a js file to load the new phrases. In this example for Spanish,
+// es.js will contain the following code:
+//
+//   Translate.loadForeignPhrases("es", {
+//       "Test": "Test in Spanish",
+//       "<em>keep em tag</em>": "<em>keep em tag in Spanish</em>",
+//       "Example text": "Example text in Spanish"
+//   });
+//
+// In your UI put a listener for clicking on the Spanish button:
+//
+//   mySpanishButton.addEventListener("click", function() {
+//       Translate.setLanguage("es");
+//   });
+//   myEnglishButton.addEventListener("click", function() {
+//       Translate.setLanguage("en");
+//   });
+
+Translate = new (function() {
+
+    var defaultLanguage = "en";
+
+    var allPhrases = {};
+    allPhrases[defaultLanguage] = {};
+
+    // Node types
+
+    var text = {
+        selector: "[data-translate]",
+        getKey: function() {
+            return this.textContent.trim().replace(/\s+/g, " ");
+        },
+        setPhrase: function(p) {
+            this.textContent = p;
+        },
+    }
+
+    var html = {
+        selector: "[data-translate-html]",
+        getKey: function() {
+            return this.innerHTML.trim().replace(/\s+/g, " ");
+        },
+        setPhrase: function(p) {
+            this.innerHTML = p;
+        },
+    }
+
+    var placeholder = {
+        selector: "[data-translate-placeholder]",
+        getKey: function() {
+            return this.getAttribute("placeholder").trim().replace(/\s+/g, " ");
+        },
+        setPhrase: function(p) {
+            this.setAttribute("placeholder", p);
+        },
+    }
+
+    // Get elements to be translated
+    var allEls = getEls(text)
+        .concat(getEls(html))
+        .concat(getEls(placeholder));
+
+    // Provides access to phrases from a non-default language.
+    // See phrases_en.js for example usage.
+    this.loadForeignPhrases = function(language, phrases) {
+        allPhrases[language] =  phrases;
+    }
+
+    // Displays a different language, eg "en" or "fr"
+    this.setLanguage = function(language) {
+        for (var i=0; i<allEls.length; i++) {
+            var el = allEls[i];
+            var key = el.key;
+            if (!(language in allPhrases)) {
+                console.log(language + " not in allPhrases");
+                return;
+            }
+            if (!(key in allPhrases[language])) {
+                console.log(language + " does not contain phrase: " + key);
+                return;
+            }
+            var phrase = allPhrases[language][key];
+            el.setPhrase(phrase);
+        }
+    }
+
+    // Converts the phrases to a key-pair json file.
+    // This is a good way to export phrases for use in translation tools.
+    this.phrasesAsJson = function(language) {
+        var keys = [];
+        for (var i=0; i<allEls.length; i++) {
+            var el = allEls[i];
+            var key = el.key;
+            keys.push(key);
+        }
+        keys.sort();
+        var output = {};
+        for (var i=0; i<keys.length; i++) {
+            var key = keys[i];
+            var translated = "";
+            if (language in allPhrases && key in allPhrases[language]) {
+                translated = allPhrases[language][key];
+            }
+            output[key] = translated;
+        }
+        return JSON.stringify(output, null, 2);
+    }
+
+    function getEls(nodeType) {
+        var nodes = document.querySelectorAll(nodeType.selector);
+        var els = [];
+        for (var i=0; i<nodes.length; i++) {
+            var node = nodes[i];
+            node.getKey = nodeType.getKey;
+            node.setPhrase = nodeType.setPhrase;
+            node.key = node.getKey();
+            allPhrases[defaultLanguage][node.key] = node.key;
+            els.push(node);
+        }
+        return els;
+    }
+
+})();