]>
Commit | Line | Data |
---|---|---|
c3c3df47 IC |
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> | |
ede5137f IC |
9 | // <input data-translate-placeholder placeholder="Example placeholder"> |
10 | // <span data-translate-title title="Example title"></span> | |
c3c3df47 IC |
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>", | |
ede5137f IC |
25 | // "Example placeholder": "Example placeholder in Spanish" |
26 | // "Example title": "Example title in Spanish" | |
c3c3df47 IC |
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 | ||
ede5137f IC |
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 | ||
c3c3df47 IC |
87 | // Get elements to be translated |
88 | var allEls = getEls(text) | |
89 | .concat(getEls(html)) | |
ede5137f IC |
90 | .concat(getEls(placeholder)) |
91 | .concat(getEls(title)); | |
c3c3df47 IC |
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 | })(); |