Moved i18n locale apply to boot

Moved i18n config to config.js
App is booted after locale data is fully downloaded
The app needs reload after locale change

app/js/controllers.js

@@ -2185,8 +2185,10 @@ angular.module('myApp.controllers', ['myApp.i18n'])
       }
 
       $scope.$watch('i18n.locale', function (newValue, oldValue) {
-        _.locale(newValue);
         Storage.set({i18n_locale: newValue});
+        ErrorService.confirm({type: 'APPLY_LANG_WITH_RELOAD'}).then(function () {
+          location.reload();
+        });
       });
     });
 

app/js/i18n.js

@@ -1,16 +1,10 @@
 'use strict';
 
 angular.module('myApp.i18n', ['izhukov.utils'])
-  .factory('_', ['$http', '$route', 'Storage', '$locale', function($http, $route, Storage, $locale) {
+  .factory('_', [function() {
-    var locale = 'en-us';
+    var locale = Config.I18n.locale;
-    var messages = {};
+    var messages = Config.I18n.messages;
-    var fallbackMessages = {};
+    var fallbackMessages = Config.I18n.fallback_messages;
-    var supported = {
-      'en-us': 'English'
-    };
-    var aliases = {
-      'en': 'en-us'
-    };
     var paramRegEx = /\{\s*([a-zA-Z\d\--]+)(?:\s*:\s*(.*?))?\s*\}/g;
 
     function insertParams(msgstr, params) {
@@ -83,76 +77,13 @@ angular.module('myApp.i18n', ['izhukov.utils'])
     }
 
     _.supported = function () {
-      return supported;
+      return Config.I18n.supported;
     };
 
-    _.locale = function(newValue) {
+    _.locale = function () {
-      if (newValue === undefined) {
       return locale;
-      }
-
-      if (!supported.hasOwnProperty(newValue)) {
-        newValue = 'en-us'; // fallback
-      }
-
-      if (locale != newValue) {
-        var newMessages = false;
-        var ngLocaleReady = false;
-        var onReady = function() {
-          if (newMessages === 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 = newMessages;
-          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){
-          newMessages = json;
-          onReady();
-        });
-      }
-    };
-
-    $http({method: 'GET', url: 'js/locales/en-us.json'}).success(function(json){
-      fallbackMessages = json;
-      if (locale == 'en-us') {
-        messages = fallbackMessages;
-      }
-      $route.reload();
-    });
-
-    Storage.get('i18n_locale').then(function(newLocale) {
-      if (!newLocale) {
-        newLocale = (navigator.language || '').toLowerCase();
-        newLocale = aliases[newLocale] ? aliases[newLocale] : newLocale;
-      }
-      _.locale(newLocale);
-    });
-
     return _;
   }])
 

app/js/init.js

@@ -72,18 +72,78 @@
   }
   $(document.body).addClass(classes.join(' '));
 
-  ConfigStorage.get('current_layout', function (layout) {
+  ConfigStorage.get('current_layout', 'i18n_locale', function (params) {
+    var layout = params[0],
+        locale = params[1],
+        defaultLocale = 'en-us',
+        bootReady = {
+          dom: false,
+          i18n_ng: Config.I18n.locale == defaultLocale, // Already included
+          i18n_messages: false,
+          i18n_fallback: false
+        }
+
     switch (layout) {
       case 'mobile': Config.Mobile = true; break;
       case 'desktop': Config.Mobile = false; break;
       default: Config.Mobile = Config.Navigator.mobile; break;
     }
-
     $('head').append(
       '<link rel="stylesheet" href="css/' + (Config.Mobile ? 'mobile.css' : 'desktop.css') + '" />'
     );
+
+    if (!locale) {
+      locale = (navigator.language || '').toLowerCase();
+      locale = Config.I18n.aliases[locale] || locale;
+    }
+    if (Config.I18n.supported[locale]) {
+      Config.I18n.locale = locale;
+    }
+
+    if (!bootReady.i18n_ng) {
+      $('head').append($('<script>')
+        .on('load', function() {
+          bootReady.i18n_ng = true;
+          checkReady();
+        })
+        .attr('src', 'vendor/angular/i18n/angular-locale_' + Config.I18n.locale + '.js')
+      );
+    }
+
+    $.get('js/locales/' + Config.I18n.locale + '.json').success(function (json) {
+      Config.I18n.messages = json;
+      bootReady.i18n_messages = true;
+      if (locale == defaultLocale) { // No fallback, leave empty object
+        bootReady.i18n_fallback = true;
+      }
+      checkReady();
+    });
+
+    if (Config.I18n.locale != defaultLocale) {
+      $.get('js/locales/en-us.json').success(function (json) {
+        Config.I18n.fallback_messages = json;
+        bootReady.i18n_fallback = true;
+        checkReady();
+      });
+    }
+
     $(document).ready(function() {
-      angular.bootstrap(document, ['myApp']);
+      bootReady.dom = true;
+      checkReady();
     });
+
+    var checkReady = function checkReady () {
+      var i, ready = true;
+      for (i in bootReady) {
+        if (bootReady.hasOwnProperty(i) && bootReady[i] === false) {
+          ready = false;
+          break;
+        }
+      }
+      if (ready) {
+        bootReady.boot = false; 
+        angular.bootstrap(document, ['myApp']);
+      }
+    }
   });
 })();