Skip to content

Commit 6200b85

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 2fb5dc3 commit 6200b85

5 files changed

Lines changed: 74 additions & 96 deletions

File tree

‎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
@@ -10,42 +10,32 @@
1010
<script src="https://unpkg.com/i18next@8.0.0/i18next.min.js"></script>
1111
<script src="https://unpkg.com/i18next-browser-languagedetector@1.0.1/i18nextBrowserLanguageDetector.min.js"></script>
1212
<script src="https://unpkg.com/i18next-xhr-backend@1.4.1/i18nextXHRBackend.min.js"></script>
13+
<script type="application/javascript" src="i18n.js"></script>
1314

1415
<h1>8values</h1>
1516
<hr>
16-
<button id="start" class="button translate" onclick="location.href='instructions.html';" style="font-size:36pt;"></button>
17+
<button data-i18n="start" class="button" onclick="location.href='instructions.html';" style="font-size:36pt;"></button>
1718
<img src="values.svg" class="center"></img>
1819

19-
<h2 id="faq_whatis" class="translate"></h2>
20-
<p id="faq_whatis_answer" class="translate"></p>
20+
<h2 data-i18n="faq_whatis"></h2>
21+
<p data-i18n="faq_whatis_answer"></p>
2122

2223
<h2 id="faq_values" class="translate"></h2>
23-
<p id="faq_values_answer" class="translate"></p>
24-
<p id="equality" class="value-description translate"></p>
25-
<p id="wealth" class="value-description translate"></p>
26-
<p id="might" class="value-description translate"></p>
27-
<p id="peace" class="value-description translate"></p>
28-
<p id="liberty" class="value-description translate"></p>
29-
<p id="authority" class="value-description translate"></p>
30-
<p id="tradition" class="value-description translate"></p>
31-
<p id="progress" class="value-description translate"></p>
32-
<h2 id="faq_match" class="translate"></h2>
33-
<p id="faq_match_answer" class="translate"></p>
34-
<h2 id="faq_scores" class="translate"></h2>
35-
<p id="faq_scores_answer" class="translate"></p>
24+
<p data-i18n="faq_values_answer"></p>
25+
<p data-i18n="equality" class="value-description"></p>
26+
<p data-i18n="wealth" class="value-description"></p>
27+
<p data-i18n="might" class="value-description"></p>
28+
<p data-i18n="peace" class="value-description"></p>
29+
<p data-i18n="liberty" class="value-description"></p>
30+
<p data-i18n="authority" class="value-description"></p>
31+
<p data-i18n="tradition" class="value-description"></p>
32+
<p data-i18n="progress" class="value-description"></p>
33+
<h2 data-i18n="faq_match"></h2>
34+
<p data-i18n="faq_match_answer"></p>
35+
<h2 data-i18n="faq_scores"></h2>
36+
<p data-i18n="faq_scores_answer"></p>
3637

3738
<script type="text/javascript">
38-
window.i18next
39-
.use(window.i18nextBrowserLanguageDetector)
40-
.use(window.i18nextXHRBackend)
41-
.init({
42-
"fallbackLng": "en"
43-
}, ready)
44-
45-
function ready() {
46-
for (i of document.getElementsByClassName("translate")) {
47-
document.getElementById(i.id).innerHTML=i18next.t(i.id)
48-
}
49-
}
39+
i18n_load_ns()
5040
</script>
5141
</body>

‎instructions.html‎

Lines changed: 6 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -10,28 +10,16 @@
1010
<script src="https://unpkg.com/i18next@8.0.0/i18next.min.js"></script>
1111
<script src="https://unpkg.com/i18next-browser-languagedetector@1.0.1/i18nextBrowserLanguageDetector.min.js"></script>
1212
<script src="https://unpkg.com/i18next-xhr-backend@1.4.1/i18nextXHRBackend.min.js"></script>
13+
<script type="application/javascript" src="i18n.js"></script>
1314

1415
<h1>8values</h1>
1516
<hr>
16-
<h2 id="title" style="text-align:center;"></h2>
17-
<p id="description" class="question"></p>
18-
<button id="confirm" class="button" onclick="location.href='quiz.html';" style="background-color: #2196f3;"></button> <br>
19-
<button id="cancel" class="button" onclick="location.href='index.html';" style="background-color: #f44336;"></button> <br>
17+
<h2 data-i18n="title" data-ns="instructions" style="text-align:center;"></h2>
18+
<p data-i18n="description" data-ns="instructions" class="question"></p>
19+
<button data-i18n="confirm" data-ns="instructions" class="button" onclick="location.href='quiz.html';" style="background-color: #2196f3;"></button> <br>
20+
<button data-i18n="cancel" data-ns="instructions" class="button" onclick="location.href='index.html';" style="background-color: #f44336;"></button> <br>
2021

2122
<script type="text/javascript">
22-
window.i18next
23-
.use(window.i18nextBrowserLanguageDetector)
24-
.use(window.i18nextXHRBackend)
25-
.init({
26-
"fallbackLng": "en",
27-
"ns": [ "instructions" ]
28-
}, ready)
29-
30-
function ready() {
31-
ins = i18next.getFixedT(null, 'instructions')
32-
for (i of ["title", "description", "confirm", "cancel"]) {
33-
document.getElementById(i).innerHTML=ins(i)
34-
}
35-
}
23+
i18n_load_ns("instructions")
3624
</script>
3725
</body>

‎quiz.html‎

Lines changed: 17 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -10,29 +10,24 @@
1010
<script src="https://unpkg.com/i18next@8.0.0/i18next.min.js"></script>
1111
<script src="https://unpkg.com/i18next-browser-languagedetector@1.0.1/i18nextBrowserLanguageDetector.min.js"></script>
1212
<script src="https://unpkg.com/i18next-xhr-backend@1.4.1/i18nextXHRBackend.min.js"></script>
13-
<script type="application/javascript"
14-
src="questions.js">
15-
</script>
13+
<script type="application/javascript" src="questions.js"></script>
14+
<script type="application/javascript" src="i18n.js"></script>
15+
1616
<h1>8values</h1>
1717
<hr>
18-
<h2 style="text-align:center;" id="question-number">Loading...</h2>
19-
<p class="question" id="question-text"></p>
20-
<button class="button" onclick="next_question( 1.0)" style="background-color: #1b5e20;" id="strongly_agree"></button> <br>
21-
<button class="button" onclick="next_question( 0.5)" style="background-color: #4caf50;" id="agree"></button> <br>
22-
<button class="button" onclick="next_question( 0.0)" style="background-color: #bbbbbb;" id="neutral"></button> <br>
23-
<button class="button" onclick="next_question(-0.5)" style="background-color: #f44336;" id="disagree"></button> <br>
24-
<button class="button" onclick="next_question(-1.0)" style="background-color: #b71c1c;" id="strongly_disagree"></button> <br>
18+
<h2 style="text-align:center;" id="question-number" data-i18n="question_no" data-ns="quiz">Loading...</h2>
19+
<p class="question" id="question-text" data-ns="questions"></p>
20+
<button class="button" onclick="next_question( 1.0)" style="background-color: #1b5e20;" data-i18n="strongly_agree" data-ns="quiz"></button> <br>
21+
<button class="button" onclick="next_question( 0.5)" style="background-color: #4caf50;" data-i18n="agree" data-ns="quiz"></button> <br>
22+
<button class="button" onclick="next_question( 0.0)" style="background-color: #bbbbbb;" data-i18n="neutral" data-ns="quiz"></button> <br>
23+
<button class="button" onclick="next_question(-0.5)" style="background-color: #f44336;" data-i18n="disagree" data-ns="quiz"></button> <br>
24+
<button class="button" onclick="next_question(-1.0)" style="background-color: #b71c1c;" data-i18n="strongly_disagree" data-ns="quiz"></button> <br>
2525

2626
<script>
27-
window.i18next
28-
.use(window.i18nextBrowserLanguageDetector)
29-
.use(window.i18nextXHRBackend)
30-
.init({
31-
"fallbackLng": "en",
32-
"ns": [ "questions", "quiz" ]
33-
}, ready)
27+
i18n_load_ns([ "questions", "quiz" ], function() {
28+
display_progress()
29+
})
3430

35-
var qs, qz;
3631
var max_econ, max_dipl, max_govt, max_scty; // Max possible scores
3732
max_econ = max_dipl = max_govt = max_scty = 0
3833
var econ, dipl, govt, scty; // User's scores
@@ -45,18 +40,12 @@ <h2 style="text-align:center;" id="question-number">Loading...</h2>
4540
max_govt += Math.abs(questions[i].effect.govt)
4641
max_scty += Math.abs(questions[i].effect.scty)
4742
}
48-
function ready() {
49-
qs = i18next.getFixedT(null, 'questions')
50-
qz = i18next.getFixedT(null, 'quiz')
5143

52-
for (i of ["strongly_agree", "agree", "neutral", "disagree", "strongly_disagree"]) {
53-
document.getElementById(i).innerHTML=qz(i)
54-
}
55-
display_progress()
56-
}
5744
function display_progress() {
58-
document.getElementById("question-text").innerHTML=qs(questions[qn].question)
59-
document.getElementById("question-number").innerHTML=qz("question_no", { current: qn + 1, total: questions.length })
45+
document.getElementById("question-text").dataset.i18n=questions[qn].question
46+
document.getElementById("question-number").dataset.current=qn+1
47+
document.getElementById("question-number").dataset.total=questions.length
48+
i18n_ready()
6049
}
6150
function next_question(mult) {
6251
econ += mult*questions[qn].effect.econ

‎results.html‎

Lines changed: 11 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -9,49 +9,48 @@
99
<script src="https://unpkg.com/i18next@8.0.0/i18next.min.js"></script>
1010
<script src="https://unpkg.com/i18next-browser-languagedetector@1.0.1/i18nextBrowserLanguageDetector.min.js"></script>
1111
<script src="https://unpkg.com/i18next-xhr-backend@1.4.1/i18nextXHRBackend.min.js"></script>
12-
<script type="application/javascript"
13-
src="ideologies.js">
14-
</script>
12+
<script type="application/javascript" src="ideologies.js"></script>
13+
<script type="application/javascript" src="i18n.js"></script>
1514

1615
<body>
1716
<h1>8values</h1>
1817
<hr>
1918

20-
<h1 id="results" class="translate"></h1>
19+
<h1 data-i18n="results"></h1>
2120

22-
<h2><span id="economic_axis" class="translate"></span><span class="weight-300" id="economic-label"></span></h2>
21+
<h2><span data-i18n="economic_axis"></span><span class="weight-300" id="economic-label"></span></h2>
2322
<div class="axis">
2423
<img id="img-equality" src="value_images/equality.svg" height="128pt"/>
2524
<div class="bar equality" id="bar-equality"><div class="text-wrapper" id="equality"></div></div>
2625
<div class="bar wealth" id="bar-wealth"><div class="text-wrapper" id="wealth"></div></div>
2726
<img id="img-wealth" src="value_images/wealth.svg" height="128pt"/>
2827
</div>
29-
<h2><span id="diplomatic_axis" class="translate"></span><span class="weight-300" id="diplomatic-label"></span></h2>
28+
<h2><span data-i18n="diplomatic_axis"></span><span class="weight-300" id="diplomatic-label"></span></h2>
3029
<div class="axis">
3130
<img id="img-might" src="value_images/might.svg" height="128pt"/>
3231
<div class="bar might" id="bar-might"><div class="text-wrapper" id="might"></div></div>
3332
<div class="bar peace" id="bar-peace"><div class="text-wrapper" id="peace"></div></div>
3433
<img id="img-peace" src="value_images/peace.svg" height="128pt"/>
3534
</div>
36-
<h2><span id="civic_axis" class="translate"></span><span class="weight-300" id="state-label"></span></h2>
35+
<h2><span data-i18n="civic_axis"></span><span class="weight-300" id="state-label"></span></h2>
3736
<div class="axis">
3837
<img id="img-liberty" src="value_images/liberty.svg" height="128pt"/>
3938
<div class="bar liberty" id="bar-liberty"><div class="text-wrapper" id="liberty"></div></div>
4039
<div class="bar authority" id="bar-authority"><div class="text-wrapper" id="authority"></div></div>
4140
<img id="img-authority" src="value_images/authority.svg" height="128pt"/>
4241
</div>
43-
<h2><span id="societal_axis" class="translate"></span><span class="weight-300" id="society-label"></span></h2>
42+
<h2><span data-i18n="societal_axis"></span><span class="weight-300" id="society-label"></span></h2>
4443
<div class="axis">
4544
<img id="img-tradition" src="value_images/tradition.svg" height="128pt"/>
4645
<div class="bar tradition" id="bar-tradition"><div class="text-wrapper" id="tradition"></div></div>
4746
<div class="bar progress" id="bar-progress"><div class="text-wrapper" id="progress"></div></div>
4847
<img id="img-progress" src="value_images/progress.svg" height="128pt"/>
4948
</div>
50-
<h2><span id="closest_match" class="translate"></span><span class="weight-300" id="ideology-label"></span></h2>
51-
<p id="match_desc" class="translate"></p>
49+
<h2><span data-i18n="closest_match"></span><span class="weight-300" id="ideology-label"></span></h2>
50+
<p data-i18n="match_desc"></p>
5251
<hr/>
5352
<canvas id="banner" width=800 height=600 style="font-family:Montserrat"></canvas>
54-
<button id="back" class="button translate" onclick="location.href='index.html';" style="background-color: #2196f3;"></button> <br>
53+
<button data-i18n="back" class="button" onclick="location.href='index.html';" style="background-color: #2196f3;"></button> <br>
5554
<script>
5655
function getQueryVariable(variable)
5756
{
@@ -127,20 +126,10 @@ <h2><span id="closest_match" class="translate"></span><span class="weight-300" i
127126
}
128127

129128
window.onload = function() {
130-
window.i18next
131-
.use(window.i18nextBrowserLanguageDetector)
132-
.use(window.i18nextXHRBackend)
133-
.init({
134-
"fallbackLng": "en",
135-
"ns": [ "ideologies", "matches", "translation" ]
136-
}, ready)
129+
i18n_load_ns([ "ideologies", "matches", "translation" ], ready)
137130
}
138131

139132
function ready() {
140-
for (i of document.getElementsByClassName("translate")) {
141-
document.getElementById(i.id).innerHTML=i18next.t(i.id)
142-
}
143-
144133
ideo_t = i18next.getFixedT(null, "ideologies")
145134
mat_t = i18next.getFixedT(null, "matches")
146135

0 commit comments

Comments
 (0)