Add localization for images

gervasiocaj · gervasiocaj · commit f7fe42bd06cf · 2017-05-05T13:36:43.000-03:00
To localize images, add the file-[lng].svg to the value_images/ diretory and add an entry on the corresponding translation.json:

    "file.svg": "file-[lng].svg"
diff --git a/i18n.js b/i18n.js
@@ -17,6 +17,10 @@ function i18n_load_ns(namespaces, callback) {
 function i18n_ready() {
     var fields = document.querySelectorAll("[data-i18n]")
     for (var i = 0; i < fields.length; i++) {
-        fields[i].innerHTML=i18next.t(fields[i].dataset.i18n, fields[i].dataset)
+        if (fields[i].tagName === "IMG") {
+            fields[i].src = 'value_images/' + i18next.t(fields[i].dataset.i18n)
+        } else {
+            fields[i].innerHTML=i18next.t(fields[i].dataset.i18n, fields[i].dataset)
+        }
     }
 }
diff --git a/index.html b/index.html
@@ -22,7 +22,7 @@
 <h1>8values</h1>
 <hr>
 <button data-i18n="start" class="button" onclick="location.href='instructions.html';" style="font-size:36pt;"></button>
-<img src="values.svg" class="center"></img>
+<img data-i18n="values.svg" class="center"></img>
 
 <h2 data-i18n="faq_whatis"></h2>
     <p data-i18n="faq_whatis_answer"></p>
diff --git a/results.html b/results.html
@@ -27,31 +27,31 @@ <h1 data-i18n="results"></h1>
 
 <h2><span data-i18n="economic_axis"></span><span class="weight-300" id="economic-label"></span></h2>
 <div class="axis">
-    <img id="img-equality" src="value_images/equality.svg" height="128pt"/>
+    <img id="img-equality" data-i18n="equality.svg" height="128pt"/>
     <div class="bar equality" id="bar-equality"><div class="text-wrapper" id="equality"></div></div>
     <div class="bar wealth" id="bar-wealth"><div class="text-wrapper" id="wealth"></div></div>
-    <img id="img-wealth" src="value_images/wealth.svg" height="128pt"/>
+    <img id="img-wealth" data-i18n="wealth.svg" height="128pt"/>
 </div>
 <h2><span data-i18n="diplomatic_axis"></span><span class="weight-300" id="diplomatic-label"></span></h2>
 <div class="axis">
-    <img id="img-might" src="value_images/might.svg" height="128pt"/>
+    <img id="img-might" data-i18n="might.svg" height="128pt"/>
     <div class="bar might" id="bar-might"><div class="text-wrapper" id="might"></div></div>
     <div class="bar peace" id="bar-peace"><div class="text-wrapper" id="peace"></div></div>
-    <img id="img-peace" src="value_images/peace.svg" height="128pt"/>
+    <img id="img-peace" data-i18n="peace.svg" height="128pt"/>
 </div>
 <h2><span data-i18n="civic_axis"></span><span class="weight-300" id="state-label"></span></h2>
 <div class="axis">
-    <img id="img-liberty" src="value_images/liberty.svg" height="128pt"/>
+    <img id="img-liberty" data-i18n="liberty.svg" height="128pt"/>
     <div class="bar liberty" id="bar-liberty"><div class="text-wrapper" id="liberty"></div></div>
     <div class="bar authority" id="bar-authority"><div class="text-wrapper" id="authority"></div></div>
-    <img id="img-authority" src="value_images/authority.svg" height="128pt"/>
+    <img id="img-authority" data-i18n="authority.svg" height="128pt"/>
 </div>
 <h2><span data-i18n="societal_axis"></span><span class="weight-300" id="society-label"></span></h2>
 <div class="axis">
-    <img id="img-tradition" src="value_images/tradition.svg" height="128pt"/>
+    <img id="img-tradition" data-i18n="tradition.svg" height="128pt"/>
     <div class="bar tradition" id="bar-tradition"><div class="text-wrapper" id="tradition"></div></div>
     <div class="bar progress" id="bar-progress"><div class="text-wrapper" id="progress"></div></div>
-    <img id="img-progress" src="value_images/progress.svg" height="128pt"/>
+    <img id="img-progress" data-i18n="progress.svg" height="128pt"/>
 </div>
 <h2><span data-i18n="closest_match"></span><span class="weight-300" id="ideology-label"></span></h2>
 <p data-i18n="match_desc"></p>
diff --git a/value_images/values.svg b/value_images/values.svg

Original file line number	Diff line number	Diff line change
`@@ -17,6 +17,10 @@ function i18n_load_ns(namespaces, callback) {`
`17`	`17`	`function i18n_ready() {`
`18`	`18`	`var fields = document.querySelectorAll("[data-i18n]")`
`19`	`19`	`for (var i = 0; i < fields.length; i++) {`
`20`		`- fields[i].innerHTML=i18next.t(fields[i].dataset.i18n, fields[i].dataset)`
	`20`	`+ if (fields[i].tagName === "IMG") {`
	`21`	`+ fields[i].src = 'value_images/' + i18next.t(fields[i].dataset.i18n)`
	`22`	`+ } else {`
	`23`	`+ fields[i].innerHTML=i18next.t(fields[i].dataset.i18n, fields[i].dataset)`
	`24`	`+ }`
`21`	`25`	`}`
`22`	`26`	`}`