src/js/translate.js

   1 // An extremely basic translation library
   2 //
   3 // Example usage:
   4 //
   5 // Set some html to be translated. Do this using the 'data-translate' attribute:
   6 //
   7 //   <div data-translate>Test</div>
   8 //   <div data-translate-html><em>keep em tag</em></div>
   9 //   <input data-translate-placeholder placeholder="Example placeholder">
  10 //   <span data-translate-title title="Example title"></span>
  11 //
  12 // Obtain all the phrases to be translated via js debug console:
  13 //
  14 //   Translate.phrasesAsJson();
  15 //
  16 // Use that template to translate the phrases into another language.
  17 // Leave the key the same. Change the value to the new language.
  18 //
  19 // Create a js file to load the new phrases. In this example for Spanish,
  20 // es.js will contain the following code:
  21 //
  22 //   Translate.loadForeignPhrases("es", {
  23 //       "Test": "Test in Spanish",
  24 //       "<em>keep em tag</em>": "<em>keep em tag in Spanish</em>",
  25 //       "Example placeholder": "Example placeholder in Spanish"
  26 //       "Example title": "Example title in Spanish"
  27 //   });
  28 //
  29 // In your UI put a listener for clicking on the Spanish button:
  30 //
  31 //   mySpanishButton.addEventListener("click", function() {
  32 //       Translate.setLanguage("es");
  33 //   });
  34 //   myEnglishButton.addEventListener("click", function() {
  35 //       Translate.setLanguage("en");
  36 //   });
  37
  38 Translate = new (function() {
  39
  40     var defaultLanguage = "en";
  41
  42     var allPhrases = {};
  43     allPhrases[defaultLanguage] = {};
  44
  45     // Node types
  46
  47     var text = {
  48         selector: "[data-translate]",
  49         getKey: function() {
  50             return this.textContent.trim().replace(/\s+/g, " ");
  51         },
  52         setPhrase: function(p) {
  53             this.textContent = p;
  54         },
  55     }
  56
  57     var html = {
  58         selector: "[data-translate-html]",
  59         getKey: function() {
  60             return this.innerHTML.trim().replace(/\s+/g, " ");
  61         },
  62         setPhrase: function(p) {
  63             this.innerHTML = p;
  64         },
  65     }
  66
  67     var placeholder = {
  68         selector: "[data-translate-placeholder]",
  69         getKey: function() {
  70             return this.getAttribute("placeholder").trim().replace(/\s+/g, " ");
  71         },
  72         setPhrase: function(p) {
  73             this.setAttribute("placeholder", p);
  74         },
  75     }
  76
  77     var title = {
  78         selector: "[data-translate-title]",
  79         getKey: function() {
  80             return this.getAttribute("title").trim().replace(/\s+/g, " ");
  81         },
  82         setPhrase: function(p) {
  83             this.setAttribute("title", p);
  84         },
  85     }
  86
  87     // Get elements to be translated
  88     var allEls = getEls(text)
  89         .concat(getEls(html))
  90         .concat(getEls(placeholder))
  91         .concat(getEls(title));
  92
  93     // Provides access to phrases from a non-default language.
  94     // See phrases_en.js for example usage.
  95     this.loadForeignPhrases = function(language, phrases) {
  96         allPhrases[language] =  phrases;
  97     }
  98
  99     // Displays a different language, eg "en" or "fr"
 100     this.setLanguage = function(language) {
 101         for (var i=0; i<allEls.length; i++) {
 102             var el = allEls[i];
 103             var key = el.key;
 104             if (!(language in allPhrases)) {
 105                 console.log(language + " not in allPhrases");
 106                 return;
 107             }
 108             if (!(key in allPhrases[language])) {
 109                 console.log(language + " does not contain phrase: " + key);
 110                 return;
 111             }
 112             var phrase = allPhrases[language][key];
 113             el.setPhrase(phrase);
 114         }
 115     }
 116
 117     // Converts the phrases to a key-pair json file.
 118     // This is a good way to export phrases for use in translation tools.
 119     this.phrasesAsJson = function(language) {
 120         var keys = [];
 121         for (var i=0; i<allEls.length; i++) {
 122             var el = allEls[i];
 123             var key = el.key;
 124             keys.push(key);
 125         }
 126         keys.sort();
 127         var output = {};
 128         for (var i=0; i<keys.length; i++) {
 129             var key = keys[i];
 130             var translated = "";
 131             if (language in allPhrases && key in allPhrases[language]) {
 132                 translated = allPhrases[language][key];
 133             }
 134             output[key] = translated;
 135         }
 136         return JSON.stringify(output, null, 2);
 137     }
 138
 139     function getEls(nodeType) {
 140         var nodes = document.querySelectorAll(nodeType.selector);
 141         var els = [];
 142         for (var i=0; i<nodes.length; i++) {
 143             var node = nodes[i];
 144             node.getKey = nodeType.getKey;
 145             node.setPhrase = nodeType.setPhrase;
 146             node.key = node.getKey();
 147             allPhrases[defaultLanguage][node.key] = node.key;
 148             els.push(node);
 149         }
 150         return els;
 151     }
 152
 153 })();