--- /dev/null
+// 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;
+ }
+
+})();