created i18n-service and configuration in settings

app/index.html

@@ -70,6 +70,7 @@
   <script type="text/javascript" src="js/services.js"></script>
   <script type="text/javascript" src="js/controllers.js"></script>
   <script type="text/javascript" src="js/filters.js"></script>
+  <script type="text/javascript" src="js/i18n.js"></script>
 
   <!--PRODUCTION_ONLY_BEGIN
     <script type="text/javascript" src="js/templates.js"></script>

app/js/controllers.js

@@ -9,7 +9,7 @@
 
 /* Controllers */
 
-angular.module('myApp.controllers', [])
+angular.module('myApp.controllers', ['myApp.i18n'])
 
   .controller('AppWelcomeController', function($scope, $location, MtpApiManager, ErrorService, ChangelogNotifyService) {
     MtpApiManager.getUserID().then(function (id) {
@@ -2024,7 +2024,7 @@ angular.module('myApp.controllers', [])
 
   })
 
-  .controller('SettingsModalController', function ($rootScope, $scope, $timeout, $modal, AppUsersManager, AppChatsManager, AppPhotosManager, MtpApiManager, Storage, NotificationsManager, MtpApiFileManager, ApiUpdatesManager, ChangelogNotifyService, ErrorService) {
+  .controller('SettingsModalController', function ($rootScope, $scope, $timeout, $modal, AppUsersManager, AppChatsManager, AppPhotosManager, MtpApiManager, Storage, NotificationsManager, MtpApiFileManager, ApiUpdatesManager, ChangelogNotifyService, ErrorService, _) {
 
     $scope.profile = {};
     $scope.photo = {};
@@ -2047,6 +2047,7 @@ angular.module('myApp.controllers', [])
 
     $scope.notify = {};
     $scope.send = {};
+    $scope.i18n = {supported: _.supported()};
 
     $scope.$watch('photo.file', onPhotoSelected);
 
@@ -2120,9 +2121,10 @@ angular.module('myApp.controllers', [])
       });
     };
 
-    Storage.get('notify_nodesktop', 'notify_nosound', 'send_ctrlenter', 'notify_volume', 'notify_novibrate').then(function (settings) {
+    Storage.get('notify_nodesktop', 'notify_nosound', 'send_ctrlenter', 'notify_volume', 'notify_novibrate', 'i18n_locale').then(function (settings) {
       $scope.notify.desktop = !settings[0];
       $scope.send.enter = settings[2] ? '' : '1';
+      $scope.i18n.locale = settings[5];
 
       if (settings[1]) {
         $scope.notify.volume = 0;
@@ -2194,6 +2196,11 @@ angular.module('myApp.controllers', [])
         }
         $rootScope.$broadcast('settings_changed');
       }
+
+      $scope.$watch('i18n.locale', function (newValue, oldValue) {
+        _.locale(newValue);
+        Storage.set({i18n_locale: newValue});
+      });
     });
 
     $scope.openChangelog = function () {

app/js/i18n.js

@@ -0,0 +1,151 @@
+'use strict';
+
+angular.module('myApp.i18n', ['izhukov.utils'])
+  .factory('_', ['$http', '$route', 'Storage', '$locale', function($http, $route, Storage, $locale) {
+    var locale = 'en-us';
+    var messages = {};
+    var fallback_messages = {};
+    var supported = {
+      'en-us': 'English'
+    };
+    var aliases = {
+      'en': 'en-us'
+    };
+
+    function insertParams(msgstr, params) {
+      for (var i in params) {
+        if (params.hasOwnProperty(i)){
+          var param = params[i];
+          var regex = new RegExp('\{ *' + i + '(?: *: *(.*))? *\}');
+          var match = regex.exec(msgstr);
+          if (match) {
+            if (match[1] != undefined) {
+              param = insertParams(param, match[1].split('|'));
+            }
+            msgstr = msgstr.replace(match[0], param.toString().trim());
+          }
+        }
+      }
+      return msgstr;
+    }
+
+    function _(msgid, params) {
+      var msgstr = msgid;
+      if (messages.hasOwnProperty(msgid)) {
+        msgstr = messages[msgid];
+      } else if (fallback_messages.hasOwnProperty(msgid)) {
+        msgstr = fallback_messages[msgid];
+        console.log('missing message for key ' + msgid + ' for current locale ' + locale);
+      } else {
+        console.log('missing message for key ' + msgid);
+      }
+      if (arguments.length > 1) {
+        if (typeof params == 'string') {
+          Array.prototype.shift.apply(arguments);
+          msgstr = insertParams(msgstr, arguments);
+        } else {
+          msgstr = insertParams(msgstr, params);
+        }
+      }
+      return msgstr;
+    }
+
+    _.supported = function() {
+      return supported;
+    };
+
+    _.locale = function(newValue) {
+      if (newValue === undefined) {
+        return locale;
+      }
+
+      if (!supported.hasOwnProperty(newValue)) {
+        newValue = 'en-us'; // fallback
+      }
+
+      if (locale != newValue) {
+        var new_messages = false;
+        var ngLocaleReady = false;
+        var onReady = function() {
+          if (new_messages === false || ngLocaleReady === false) {
+            // only execute when both - ngLocale and the new messages - are loaded
+            return;
+          }
+          function deepUpdate(oldValue, newValue) {
+            for (var i in newValue) {
+              if (i in oldValue && typeof oldValue[i] === 'object' && i !== null){
+                deepUpdate(oldValue[i], newValue[i]);
+              } else {
+                oldValue[i] = newValue[i];
+              }
+            }
+          }
+          // first we need to explizitly request the new $locale so it gets initialized
+          // then we recursively update our current $locale with it so all other modules
+          // already holding a reference to our $locale will get the new values as well
+          // this hack is necessary because ngLocale just isn't designed to be changed at runtime
+          deepUpdate($locale, angular.injector(['ngLocale']).get('$locale'));
+          messages = new_messages;
+          locale = newValue;
+          $route.reload();
+        };
+
+        angular.element('<script>')
+          .appendTo(angular.element('head'))
+          .on('load', function() {
+            ngLocaleReady = true;
+            onReady();
+          })
+          .attr('src', 'vendor/angular/i18n/angular-locale_' + newValue + '.js');
+
+        $http({method: 'GET', url: 'js/locales/' + newValue + '.json'}).success(function(json){
+          new_messages = json;
+          onReady();
+        });
+      }
+    };
+
+    $http({method: 'GET', url: 'js/locales/en-us.json'}).success(function(json){
+      fallback_messages = json;
+      if (locale == 'en-us') {
+        messages = fallback_messages;
+      }
+      $route.reload();
+    });
+
+    Storage.get('i18n_locale').then(function(newLocale) {
+      if (!newLocale) {
+        newLocale = (navigator.language || '').toLowerCase();
+        newLocale = aliases[newLocale] ? aliases[newLocale] : newLocale;
+      }
+      _.locale(newLocale);
+    });
+
+    return _;
+  }])
+
+  .filter('i18n', ['_', function(_) {
+    return _;
+  }])
+
+  .directive('myI18n', ['_', function(_) {
+    return {
+      restrict: 'EA',
+      compile: function(element) {
+        var params = element.children('my-i18n-param:not([name]), [my-i18n-param=""]:not([name])').map(function(index, param) {
+          return param.outerHTML;
+        }).toArray();
+        element.children('my-i18n-param[name], [my-i18n-param]:not([my-i18n-param=""]), [my-i18n-param][name]').each(function(i, param) {
+          params[angular.element(param).attr('my-i18n-param') || angular.element(param).attr('name')] = param.outerHTML;
+        });
+        element.children('my-i18n-param').remove();
+        var formats = element.attr("my-i18n") || element.attr("msgid") ? element : element.children('my-i18n-format, [my-i18n-format]');
+        formats.each(function(index, element) {
+          var format = angular.element(element);
+          var msgid = format.attr("my-i18n") || format.attr("msgid") || format.attr("my-i18n-format") || format.html().replace(/\s+/g, ' ').trim();
+          var msgstr = _(msgid, params);
+          format.html(msgstr);
+        });
+      }
+    }
+  }]);

app/partials/settings_modal.html

@@ -60,6 +60,11 @@
       <div class="modal_section_body">
 
         <div class="tg_form_group">
+          <label>Language</label>
+          <select class="tg_select" ng-model="i18n.locale">
+            <option value="{{lang}}" ng-selected="lang == i18n.locale" ng-repeat="(lang, name) in i18n.supported">{{name}}</option>
+          </select>
+
           <a class="tg_checkbox" ng-click="toggleDesktop()" ng-class="notify.desktop ? 'tg_checkbox_on' : ''">
             <span class="icon icon-checkbox-outer"><i class="icon-checkbox-inner"></i></span>
             <span class="tg_checkbox_label">Desktop notifications</span>