1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
|
// 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 placeholder">
// <span data-translate-title title="Example title"></span>
//
// 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 placeholder": "Example placeholder in Spanish"
// "Example title": "Example title 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);
},
}
var title = {
selector: "[data-translate-title]",
getKey: function() {
return this.getAttribute("title").trim().replace(/\s+/g, " ");
},
setPhrase: function(p) {
this.setAttribute("title", p);
},
}
// Get elements to be translated
var allEls = getEls(text)
.concat(getEls(html))
.concat(getEls(placeholder))
.concat(getEls(title));
// 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;
}
})();
|
