Enable translations on index when language is changed

Author: jjeffryes

index.html

@@ -81,8 +81,8 @@ <h2 class="txt-center">
       <i class="ion-android-sync spinner fontSize30 spinner-with-logo-icon"></i>
     </div>
     <div class="width100 positionTop">
-      <a class="btn btn-txt rowTop10 marginRight10 pull-right js-indexReload"><i class="ion-android-sync"></i> <span class="js-translate">Reload</span></a>
-      <a class="btn btn-txt rowTop10 marginRight10 pull-right" href="#home"><i class="ion-home"></i> <span class="js-translate">LoadIndex</span></a>
+      <a class="btn btn-txt rowTop10 marginRight10 pull-right js-indexReload"><i class="ion-android-sync"></i> <span class="js-translate" data-translate="Reload"></span></a>
+      <a class="btn btn-txt rowTop10 marginRight10 pull-right" href="#home"><i class="ion-home"></i> <span class="js-translate" data-translate="LoadIndex"></span></a>
     </div>
   </div>
 
@@ -92,6 +92,13 @@ <h2 class="txt-center">
   <script>
     var app = require('./js/main'),
         remote = require('remote');
+
+    window.translateIndex = function(){
+      $('.js-translate').each(function() {
+        $(this).text(polyglot.t($(this).data("translate")));
+      });
+    };
+    translateIndex();
     $('.js-closeIndexModal').on('click', function(){
       $(this).closest('.modal').addClass('hide');
     });
@@ -114,10 +121,6 @@ <h2 class="txt-center">
     $('.js-defaultServerIndexApp').on('click', function(){
       app.loadNewServer("http://localhost:18469/api/v1/");
     });
-    $('.js-translate').each(function() {
-      var translationKey = $(this).html();
-      $(this).replaceWith(polyglot.t(translationKey));
-    });
   </script>
 </body>
 </html>

js/main.js

@@ -85,6 +85,9 @@ user.on('change:language', function(md, lang) {
   window.lang = lang;
   extendPolyglot(lang);
   localStorage.setItem('lang', lang);
+  //trigger translation function on index
+  window.translateIndex();
+
 });
 
 //keep user and profile urls synced with the server configuration