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