diff options
author | Ian Coleman <coleman.ian@gmail.com> | 2016-11-29 16:07:23 +1100 |
---|---|---|
committer | Ian Coleman <coleman.ian@gmail.com> | 2016-11-29 16:21:45 +1100 |
commit | c3c3df473e0e5114b75dbe835ada59a0e8066543 (patch) | |
tree | ecd6d6fe4f5f0795fec9418b82e6bae973dfe74a /src/js/translate.js | |
parent | 60599f7ae9f59d6f0abadee1e0dd952ce4019d3d (diff) | |
download | BIP39-c3c3df473e0e5114b75dbe835ada59a0e8066543.tar.gz BIP39-c3c3df473e0e5114b75dbe835ada59a0e8066543.tar.zst BIP39-c3c3df473e0e5114b75dbe835ada59a0e8066543.zip |
Translation library does basic language switching
Diffstat (limited to 'src/js/translate.js')
-rw-r--r-- | src/js/translate.js | 140 |
1 files changed, 140 insertions, 0 deletions
diff --git a/src/js/translate.js b/src/js/translate.js new file mode 100644 index 0000000..89512df --- /dev/null +++ b/src/js/translate.js | |||
@@ -0,0 +1,140 @@ | |||
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 | })(); | ||