Enable i18n in popup

- #20 - inspired by https://gist.github.com/eligrey/738199 and https://git.io/viasH
ipfs · Sep 13, 2016 · 0c8b147 · 0c8b147
1 parent 3cc6ca7
commit 0c8b147
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 16 deletions.
diff --git a/lib/data-i18n.js b/lib/data-i18n.js
@@ -0,0 +1,11 @@
+// Search for items with data-i18n attribute and replace them with values from current locale
+let items = document.querySelectorAll("[data-i18n]");
+for (let item of items) {
+  let translation = chrome.i18n.getMessage(item.getAttribute("data-i18n"));
+  if (typeof item.value !== "undefined" && item.value === "i18n") {
+    // things like inputs can trigger translation with value equal "i18n"
+    item.value = translation;
+  } else {
+    item.innerText = translation;
+  }
+}
diff --git a/popup/button-menu.html b/popup/button-menu.html
@@ -8,35 +8,36 @@
 <body>
   <img src="../icons/ipfs-logo-off.svg" id="icon"/>
   <ul id="gateway-status">
-    <li id="gateway-redirect">panel_status-gateway-redirect</span>
+    <li id="gateway-redirect"> <span data-i18n="panel_status-gateway-redirect"></span>
       <span>
-        <span id="redirect-enabled">panel_status-gateway-redirect-enabled</span>
-        <span id="redirect-disabled">panel_status-gateway-redirect-disabled</span>
+        <span id="redirect-enabled" data-i18n="panel_status-gateway-redirect-enabled"></span>
+        <span id="redirect-disabled" data-i18n="panel_status-gateway-redirect-disabled"></span>
       </span>
     </li>
-    <li id="gateway-address">panel_status-gateway-address<span id="gateway-address-val">⋯</span></li>
-    <li id="gateway-version">panel_status-gateway-version<span id="gateway-version-val">⋯</span></li>
-    <li id="swarm-peers">panel_status-swarm-peers<span id="swarm-peers-val">⋯</span></li>
+    <li id="gateway-address"><span data-i18n="panel_status-gateway-address"></span><span id="gateway-address-val">⋯</span></li>
+    <li id="gateway-version"><span data-i18n="panel_status-gateway-version"></span><span id="gateway-version-val">⋯</span></li>
+    <li id="swarm-peers"><span data-i18n="panel_status-swarm-peers"></span><span id="swarm-peers-val">⋯</span></li>
   </ul>
 
   <ul id="operations">
-    <li class="header">panel_operations-header</li>
+    <li class="header"><span data-i18n="panel_operations-header"></span></li>
     <li class="action" id="toggle-gateway-redirect">
-      <span id="enable-gateway-redirect">panel_toggle-gateway-redirect-enable</span>
-      <span id="disable-gateway-redirect">panel_toggle-gateway-redirect-disable</span>
+      <span id="enable-gateway-redirect"><span data-i18n="panel_toggle-gateway-redirect-enable"></span>
+      <span id="disable-gateway-redirect"><span data-i18n="panel_toggle-gateway-redirect-disable"></span>
     </li>
-    <li class="action" id="open-webui">panel_open-webui</li>
-    <li class="action" id="open-preferences">panel_open-preferences</li>
+    <li class="action" id="open-webui"><span data-i18n="panel_open-webui"></span></li>
+    <li class="action" id="open-preferences"><span data-i18n="panel_open-preferences"></span></li>
   </ul>
 
   <ul id="ipfs-resource-actions">
-    <li class="header">panel_ipfs-only-header</li>
-    <li class="action" id="pin-current-ipfs-address">panel_pin-current-ipfs-address</li>
-    <li class="action" id="copy-current-ipfs-address">panel_copy-current-ipfs-address</li>
-    <li class="action" id="copy-current-public-gw-url">panel_copy-current-public-gw-url</li>
+    <li class="header"><span data-i18n="panel_ipfs-only-header"></span></li>
+    <li class="action" id="pin-current-ipfs-address"><span data-i18n="panel_pin-current-ipfs-address"></span></li>
+    <li class="action" id="copy-current-ipfs-address"><span data-i18n="panel_copy-current-ipfs-address"></span></li>
+    <li class="action" id="copy-current-public-gw-url"><span data-i18n="panel_copy-current-public-gw-url"></span></li>
   </ul>
 
-  <script src="button-menu.js"></script>
+  <script src="../lib/data-i18n.js"></script>
+  <!--script src="button-menu.js"></script-->
 </body>
 
 </html>