Ensure translations are loaded.

Since i18next loads translations asynchronously we need to make sure
that they are loaded before we call the JS code which depends on them.

Fixes #982

frontend_tests/casper_tests/05-settings.js

@@ -8,6 +8,9 @@ var form_sel = 'form[action^="/json/settings/change"]';
 casper.then(function () {
     casper.test.info('Settings page');
     casper.click('a[href^="#settings"]');
+});
+
+casper.waitForSelector("#settings-change-box", function () {
     casper.test.assertUrlMatch(/^http:\/\/[^\/]+\/#settings/, 'URL suggests we are on settings page');
     casper.test.assertExists('#settings.tab-pane.active', 'Settings page is active');
 

static/js/admin.js

@@ -135,7 +135,7 @@ exports.populate_emoji = function (emoji_data) {
     loading.destroy_indicator($('#admin_page_emoji_loading_indicator'));
 };
 
-exports.setup_page = function () {
+function _setup_page() {
     var options = {
         realm_name:                 page_params.realm_name,
         domain:                     page_params.domain,
@@ -596,6 +596,10 @@ exports.setup_page = function () {
         });
     });
 
+}
+
+exports.setup_page = function () {
+    i18n.ensure_i18n(_setup_page);
 };
 
 return exports;

static/js/settings.js

@@ -126,7 +126,7 @@ function render_bots() {
 // Choose avatar stamp fairly randomly, to help get old avatars out of cache.
 exports.avatar_stamp = Math.floor(Math.random()*100);
 
-exports.setup_page = function () {
+function _setup_page() {
     // To build the edit bot streams dropdown we need both the bot and stream
     // API results. To prevent a race streams will be initialized to a promise
     // at page load. This promise will be resolved with a list of streams after
@@ -670,6 +670,10 @@ exports.setup_page = function () {
             }
         });
     });
+}
+
+exports.setup_page = function () {
+    i18n.ensure_i18n(_setup_page);
 };
 
 return exports;

static/js/src/main.js

@@ -1,26 +1,45 @@
 // commonjs code goes here
 
-var i18n = window.i18n = require('i18next');
+(function () {
-var XHR = require('i18next-xhr-backend');
+    var i18n = window.i18n = require('i18next');
-var lngDetector = require('i18next-browser-languagedetector');
+    var XHR = require('i18next-xhr-backend');
-var backendOptions = {
+    var lngDetector = require('i18next-browser-languagedetector');
-    loadPath: '/static/locale/__lng__/translations.json'
+    var backendOptions = {
-};
+        loadPath: '/static/locale/__lng__/translations.json'
+    };
+    var callbacks = [];
+    var initialized = false;
 
-var detectionOptions = {
+    var detectionOptions = {
-    order: ['htmlTag'],
+        order: ['htmlTag'],
-    htmlTag: document.documentElement
+        htmlTag: document.documentElement
-};
+    };
 
-i18n.use(XHR)
+    i18n.use(XHR)
-    .use(lngDetector)
+        .use(lngDetector)
-    .init({
+        .init({
-        nsSeparator: false,
+            nsSeparator: false,
-        keySeparator: false,
+            keySeparator: false,
-        interpolation: {
+            interpolation: {
-            prefix: "__",
+                prefix: "__",
-            suffix: "__"
+                suffix: "__"
-        },
+            },
-        backend: backendOptions,
+            backend: backendOptions,
-        detection: detectionOptions
+            detection: detectionOptions
-});
+        }, function () {
+            var i;
+            initialized = true;
+            for (i=0; i<callbacks.length; i++) {
+                callbacks[i]();
+            }
+        });
+
+    i18n.ensure_i18n = function (callback) {
+        if (initialized) {
+            callback();
+        } else {
+            callbacks.push(callback);
+        }
+    };
+
+}());

static/js/subs.js

@@ -428,7 +428,7 @@ function populate_subscriptions(subs, subscribed) {
 exports.setup_page = function () {
     loading.make_indicator($('#subs_page_loading_indicator'));
 
-    function populate_and_fill(public_streams) {
+    function _populate_and_fill(public_streams) {
 
         // Build up our list of subscribed streams from the data we already have.
         var subscribed_rows = stream_data.subscribed_subs();
@@ -486,6 +486,12 @@ exports.setup_page = function () {
         $(document).trigger($.Event('subs_page_loaded.zulip'));
     }
 
+    function populate_and_fill(public_streams) {
+        i18n.ensure_i18n(function () {
+            _populate_and_fill(public_streams);
+        });
+    }
+
     function failed_listing(xhr, error) {
         loading.destroy_indicator($('#subs_page_loading_indicator'));
         ui.report_error("Error listing streams or subscriptions", xhr,