Skip to content

Commit 12aa91b

Browse files
gervasiocajgervasiocaj
committed
Modularizes the localization binding
In order to load the namespaces and do the string binding, just load the i18n.js file on the HTML and call the i18n_load_ns with the namespaces notation found [here](http://i18next.com/translate/namespace/). To fill the string data (e.g. "12 apples), the element must adhere to the following notation (see HTML data-* attributes): ```html <p data-i18n="apple_count" data-amount="18"></p> ``` ```json { "apple_count": "{{amount}} apples" } ``` To refresh the string, alter the data-* attribute accordingly and call `i18n_ready()`.
1 parent 1e1b1a1 commit 12aa91b

File tree

5 files changed

+78
-99
lines changed

5 files changed

+78
-99
lines changed

‎i18n.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
function i18n_load_ns(namespaces, callback) {
2+
var options = {
3+
"fallbackLng": "en"
4+
}
5+
6+
if (namespaces) options.ns = namespaces
7+
8+
window.i18next
9+
.use(window.i18nextBrowserLanguageDetector)
10+
.use(window.i18nextXHRBackend)
11+
.init(options, function() {
12+
i18n_ready()
13+
if (callback) callback()
14+
})
15+
}
16+
17+
function i18n_ready() {
18+
var fields = document.querySelectorAll("[data-i18n]")
19+
for (var i = 0; i < fields.length; i++) {
20+
fields[i].innerHTML=i18next.t(fields[i].dataset.i18n, fields[i].dataset)
21+
}
22+
}

‎index.html

Lines changed: 18 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -17,29 +17,30 @@
1717
<script src="https://unpkg.com/[email protected]/i18next.min.js"></script>
1818
<script src="https://unpkg.com/[email protected]/i18nextBrowserLanguageDetector.min.js"></script>
1919
<script src="https://unpkg.com/[email protected]/i18nextXHRBackend.min.js"></script>
20+
<script type="application/javascript" src="i18n.js"></script>
2021

2122
<h1>8values</h1>
2223
<hr>
23-
<button id="start" class="button translate" onclick="location.href='instructions.html';" style="font-size:36pt;"></button>
24+
<button data-i18n="start" class="button" onclick="location.href='instructions.html';" style="font-size:36pt;"></button>
2425
<img src="values.svg" class="center"></img>
2526

26-
<h2 id="faq_whatis" class="translate"></h2>
27-
<p id="faq_whatis_answer" class="translate"></p>
27+
<h2 data-i18n="faq_whatis"></h2>
28+
<p data-i18n="faq_whatis_answer"></p>
2829

2930
<h2 id="faq_values" class="translate"></h2>
30-
<p id="faq_values_answer" class="translate"></p>
31-
<p id="equality" class="value-description translate"></p>
32-
<p id="wealth" class="value-description translate"></p>
33-
<p id="might" class="value-description translate"></p>
34-
<p id="peace" class="value-description translate"></p>
35-
<p id="liberty" class="value-description translate"></p>
36-
<p id="authority" class="value-description translate"></p>
37-
<p id="tradition" class="value-description translate"></p>
38-
<p id="progress" class="value-description translate"></p>
39-
<h2 id="faq_match" class="translate"></h2>
40-
<p id="faq_match_answer" class="translate"></p>
41-
<h2 id="faq_scores" class="translate"></h2>
42-
<p id="faq_scores_answer" class="translate"></p>
31+
<p data-i18n="faq_values_answer"></p>
32+
<p data-i18n="equality" class="value-description"></p>
33+
<p data-i18n="wealth" class="value-description"></p>
34+
<p data-i18n="might" class="value-description"></p>
35+
<p data-i18n="peace" class="value-description"></p>
36+
<p data-i18n="liberty" class="value-description"></p>
37+
<p data-i18n="authority" class="value-description"></p>
38+
<p data-i18n="tradition" class="value-description"></p>
39+
<p data-i18n="progress" class="value-description"></p>
40+
<h2 data-i18n="faq_match"></h2>
41+
<p data-i18n="faq_match_answer"></p>
42+
<h2 data-i18n="faq_scores"></h2>
43+
<p data-i18n="faq_scores_answer"></p>
4344

4445
<!-- Website visit statistics - no personal information is collected! -->
4546
<script type="text/javascript">
@@ -59,17 +60,6 @@ <h2 id="faq_scores" class="translate"></h2>
5960
stats"></a></div></noscript>
6061

6162
<script type="text/javascript">
62-
window.i18next
63-
.use(window.i18nextBrowserLanguageDetector)
64-
.use(window.i18nextXHRBackend)
65-
.init({
66-
"fallbackLng": "en"
67-
}, ready)
68-
69-
function ready() {
70-
for (i of document.getElementsByClassName("translate")) {
71-
document.getElementById(i.id).innerHTML=i18next.t(i.id)
72-
}
73-
}
63+
i18n_load_ns()
7464
</script>
7565
</body>

‎instructions.html

Lines changed: 6 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,14 @@
1717
<script src="https://unpkg.com/[email protected]/i18next.min.js"></script>
1818
<script src="https://unpkg.com/[email protected]/i18nextBrowserLanguageDetector.min.js"></script>
1919
<script src="https://unpkg.com/[email protected]/i18nextXHRBackend.min.js"></script>
20+
<script type="application/javascript" src="i18n.js"></script>
2021

2122
<h1>8values</h1>
2223
<hr>
23-
<h2 id="title" style="text-align:center;"></h2>
24-
<p id="description" class="question"></p>
25-
<button id="confirm" class="button" onclick="location.href='quiz.html';" style="background-color: #2196f3;"></button> <br>
26-
<button id="cancel" class="button" onclick="location.href='index.html';" style="background-color: #f44336;"></button> <br>
24+
<h2 data-i18n="title" data-ns="instructions" style="text-align:center;"></h2>
25+
<p data-i18n="description" data-ns="instructions" class="question"></p>
26+
<button data-i18n="confirm" data-ns="instructions" class="button" onclick="location.href='quiz.html';" style="background-color: #2196f3;"></button> <br>
27+
<button data-i18n="cancel" data-ns="instructions" class="button" onclick="location.href='index.html';" style="background-color: #f44336;"></button> <br>
2728

2829
<!-- Website visit statistics - no personal information is collected! -->
2930
<script type="text/javascript">
@@ -43,19 +44,6 @@ <h2 id="title" style="text-align:center;"></h2>
4344
stats"></a></div></noscript>
4445

4546
<script type="text/javascript">
46-
window.i18next
47-
.use(window.i18nextBrowserLanguageDetector)
48-
.use(window.i18nextXHRBackend)
49-
.init({
50-
"fallbackLng": "en",
51-
"ns": [ "instructions" ]
52-
}, ready)
53-
54-
function ready() {
55-
ins = i18next.getFixedT(null, 'instructions')
56-
for (i of ["title", "description", "confirm", "cancel"]) {
57-
document.getElementById(i).innerHTML=ins(i)
58-
}
59-
}
47+
i18n_load_ns("instructions")
6048
</script>
6149
</body>

‎quiz.html

Lines changed: 21 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -17,18 +17,18 @@
1717
<script src="https://unpkg.com/[email protected]/i18next.min.js"></script>
1818
<script src="https://unpkg.com/[email protected]/i18nextBrowserLanguageDetector.min.js"></script>
1919
<script src="https://unpkg.com/[email protected]/i18nextXHRBackend.min.js"></script>
20-
<script type="application/javascript"
21-
src="questions.js">
22-
</script>
20+
<script type="application/javascript" src="questions.js"></script>
21+
<script type="application/javascript" src="i18n.js"></script>
22+
2323
<h1>8values</h1>
2424
<hr>
25-
<h2 style="text-align:center;" id="question-number">Loading...</h2>
26-
<p class="question" id="question-text"></p>
27-
<button class="button" onclick="next_question( 1.0)" style="background-color: #1b5e20;" id="strongly_agree"></button> <br>
28-
<button class="button" onclick="next_question( 0.5)" style="background-color: #4caf50;" id="agree"></button> <br>
29-
<button class="button" onclick="next_question( 0.0)" style="background-color: #bbbbbb;" id="neutral"></button> <br>
30-
<button class="button" onclick="next_question(-0.5)" style="background-color: #f44336;" id="disagree"></button> <br>
31-
<button class="button" onclick="next_question(-1.0)" style="background-color: #b71c1c;" id="strongly_disagree"></button> <br>
25+
<h2 style="text-align:center;" id="question-number" data-i18n="question_no" data-ns="quiz">Loading...</h2>
26+
<p class="question" id="question-text" data-ns="questions"></p>
27+
<button class="button" onclick="next_question( 1.0)" style="background-color: #1b5e20;" data-i18n="strongly_agree" data-ns="quiz"></button> <br>
28+
<button class="button" onclick="next_question( 0.5)" style="background-color: #4caf50;" data-i18n="agree" data-ns="quiz"></button> <br>
29+
<button class="button" onclick="next_question( 0.0)" style="background-color: #bbbbbb;" data-i18n="neutral" data-ns="quiz"></button> <br>
30+
<button class="button" onclick="next_question(-0.5)" style="background-color: #f44336;" data-i18n="disagree" data-ns="quiz"></button> <br>
31+
<button class="button" onclick="next_question(-1.0)" style="background-color: #b71c1c;" data-i18n="strongly_disagree" data-ns="quiz"></button> <br>
3232
<button class="small_button" onclick="prev_question()" id="back_button">Back</button>
3333
<button class="small_button_off" id="back_button_off">Back</button><br>
3434

@@ -50,15 +50,10 @@ <h2 style="text-align:center;" id="question-number">Loading...</h2>
5050
stats"></a></div></noscript>
5151

5252
<script>
53-
window.i18next
54-
.use(window.i18nextBrowserLanguageDetector)
55-
.use(window.i18nextXHRBackend)
56-
.init({
57-
"fallbackLng": "en",
58-
"ns": [ "questions", "quiz" ]
59-
}, ready)
53+
i18n_load_ns([ "questions", "quiz" ], function() {
54+
display_progress()
55+
})
6056

61-
var qs, qz;
6257
var max_econ, max_dipl, max_govt, max_scty; // Max possible scores
6358
max_econ = max_dipl = max_govt = max_scty = 0;
6459
var econ, dipl, govt, scty; // User's scores
@@ -72,18 +67,14 @@ <h2 style="text-align:center;" id="question-number">Loading...</h2>
7267
max_govt += Math.abs(questions[i].effect.govt)
7368
max_scty += Math.abs(questions[i].effect.scty)
7469
}
75-
function ready() {
76-
qs = i18next.getFixedT(null, 'questions')
77-
qz = i18next.getFixedT(null, 'quiz')
7870

79-
for (i of ["strongly_agree", "agree", "neutral", "disagree", "strongly_disagree"]) {
80-
document.getElementById(i).innerHTML=qz(i)
81-
}
82-
display_progress()
83-
}
8471
function display_progress() {
85-
document.getElementById("question-text").innerHTML=qs(questions[qn].question)
86-
document.getElementById("question-number").innerHTML=qz("question_no", { current: qn + 1, total: questions.length })
72+
document.getElementById("question-text").dataset.i18n=questions[qn].question
73+
document.getElementById("question-number").dataset.current=qn+1
74+
document.getElementById("question-number").dataset.total=questions.length
75+
76+
i18n_ready()
77+
8778
if (prev_answer == null) {
8879
document.getElementById("back_button").style.display = 'none';
8980
document.getElementById("back_button_off").style.display = 'block';
@@ -92,7 +83,6 @@ <h2 style="text-align:center;" id="question-number">Loading...</h2>
9283
document.getElementById("back_button_off").style.display = 'none';
9384
}
9485
}
95-
9686
function next_question(mult) {
9787
econ += mult*questions[qn].effect.econ
9888
dipl += mult*questions[qn].effect.dipl
@@ -101,9 +91,9 @@ <h2 style="text-align:center;" id="question-number">Loading...</h2>
10191
qn++;
10292
prev_answer = mult;
10393
if (qn < questions.length) {
104-
display_progress();
94+
display_progress()
10595
} else {
106-
results();
96+
results()
10797
}
10898
}
10999
function prev_question() {

‎results.html

Lines changed: 11 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -16,49 +16,48 @@
1616
<script src="https://unpkg.com/[email protected]/i18next.min.js"></script>
1717
<script src="https://unpkg.com/[email protected]/i18nextBrowserLanguageDetector.min.js"></script>
1818
<script src="https://unpkg.com/[email protected]/i18nextXHRBackend.min.js"></script>
19-
<script type="application/javascript"
20-
src="ideologies.js">
21-
</script>
19+
<script type="application/javascript" src="ideologies.js"></script>
20+
<script type="application/javascript" src="i18n.js"></script>
2221

2322
<body>
2423
<h1>8values</h1>
2524
<hr>
2625

27-
<h1 id="results" class="translate"></h1>
26+
<h1 data-i18n="results"></h1>
2827

29-
<h2><span id="economic_axis" class="translate"></span><span class="weight-300" id="economic-label"></span></h2>
28+
<h2><span data-i18n="economic_axis"></span><span class="weight-300" id="economic-label"></span></h2>
3029
<div class="axis">
3130
<img id="img-equality" src="value_images/equality.svg" height="128pt"/>
3231
<div class="bar equality" id="bar-equality"><div class="text-wrapper" id="equality"></div></div>
3332
<div class="bar wealth" id="bar-wealth"><div class="text-wrapper" id="wealth"></div></div>
3433
<img id="img-wealth" src="value_images/wealth.svg" height="128pt"/>
3534
</div>
36-
<h2><span id="diplomatic_axis" class="translate"></span><span class="weight-300" id="diplomatic-label"></span></h2>
35+
<h2><span data-i18n="diplomatic_axis"></span><span class="weight-300" id="diplomatic-label"></span></h2>
3736
<div class="axis">
3837
<img id="img-might" src="value_images/might.svg" height="128pt"/>
3938
<div class="bar might" id="bar-might"><div class="text-wrapper" id="might"></div></div>
4039
<div class="bar peace" id="bar-peace"><div class="text-wrapper" id="peace"></div></div>
4140
<img id="img-peace" src="value_images/peace.svg" height="128pt"/>
4241
</div>
43-
<h2><span id="civic_axis" class="translate"></span><span class="weight-300" id="state-label"></span></h2>
42+
<h2><span data-i18n="civic_axis"></span><span class="weight-300" id="state-label"></span></h2>
4443
<div class="axis">
4544
<img id="img-liberty" src="value_images/liberty.svg" height="128pt"/>
4645
<div class="bar liberty" id="bar-liberty"><div class="text-wrapper" id="liberty"></div></div>
4746
<div class="bar authority" id="bar-authority"><div class="text-wrapper" id="authority"></div></div>
4847
<img id="img-authority" src="value_images/authority.svg" height="128pt"/>
4948
</div>
50-
<h2><span id="societal_axis" class="translate"></span><span class="weight-300" id="society-label"></span></h2>
49+
<h2><span data-i18n="societal_axis"></span><span class="weight-300" id="society-label"></span></h2>
5150
<div class="axis">
5251
<img id="img-tradition" src="value_images/tradition.svg" height="128pt"/>
5352
<div class="bar tradition" id="bar-tradition"><div class="text-wrapper" id="tradition"></div></div>
5453
<div class="bar progress" id="bar-progress"><div class="text-wrapper" id="progress"></div></div>
5554
<img id="img-progress" src="value_images/progress.svg" height="128pt"/>
5655
</div>
57-
<h2><span id="closest_match" class="translate"></span><span class="weight-300" id="ideology-label"></span></h2>
58-
<p id="match_desc" class="translate"></p>
56+
<h2><span data-i18n="closest_match"></span><span class="weight-300" id="ideology-label"></span></h2>
57+
<p data-i18n="match_desc"></p>
5958
<hr/>
6059
<canvas id="banner" width=800 height=600 style="font-family:Montserrat"></canvas>
61-
<button id="back" class="button translate" onclick="location.href='index.html';" style="background-color: #2196f3;"></button> <br>
60+
<button data-i18n="back" class="button" onclick="location.href='index.html';" style="background-color: #2196f3;"></button> <br>
6261

6362
<!-- Website visit statistics - no personal information is collected! -->
6463
<script type="text/javascript">
@@ -152,20 +151,10 @@ <h2><span id="closest_match" class="translate"></span><span class="weight-300" i
152151
}
153152

154153
window.onload = function() {
155-
window.i18next
156-
.use(window.i18nextBrowserLanguageDetector)
157-
.use(window.i18nextXHRBackend)
158-
.init({
159-
"fallbackLng": "en",
160-
"ns": [ "ideologies", "matches", "translation" ]
161-
}, ready)
154+
i18n_load_ns([ "ideologies", "matches", "translation" ], ready)
162155
}
163156

164157
function ready() {
165-
for (i of document.getElementsByClassName("translate")) {
166-
document.getElementById(i.id).innerHTML=i18next.t(i.id)
167-
}
168-
169158
ideo_t = i18next.getFixedT(null, "ideologies")
170159
mat_t = i18next.getFixedT(null, "matches")
171160

0 commit comments

Comments
 (0)