Merge pull request #2539 from uProxy/jab-fix-issue-1693

initialize language setting based on browser settings

Author: jab

src/generic_core/globals.ts

@@ -49,7 +49,7 @@ export var settings :uproxy_core_api.GlobalSettings = {
   splashState: 0,
   statsReportingEnabled: false,
   consoleFilter: loggingprovider.Level.warn,
-  language: 'en',
+  language: null,  // sentinel indicating lang should be calculated from browser settings
   force_message_version: 0, // zero means "don't override"
   quiverUserName: '',
   showCloud: false,

src/generic_ui/polymer/root.ts

@@ -2,6 +2,7 @@
 /// <reference path='../../../../third_party/polymer/polymer.d.ts' />
 /// <reference path='../../../../third_party/typings/browser.d.ts' />
 
+import _ = require('lodash');
 import social = require('../../interfaces/social');
 import translator = require('../scripts/translator');
 import ui_types = require('../../interfaces/ui');
@@ -148,7 +149,7 @@ Polymer({
       var browserCustomElement = document.createElement(ui.browserApi.browserSpecificElement);
       this.$.browserElementContainer.appendChild(browserCustomElement);
     }
-    this.updateDirectionality();
+    this.setDirectionality();
   },
   tabSelected: function(e :Event) {
     if (this.ui.isSharingDisabled &&
@@ -214,15 +215,15 @@ Polymer({
       this.isSharingEnabledWithOthers = trustedContacts.length > 0;
     }
   },
-  updateDirectionality: function() {
-    // Update the directionality of the UI.
-    for (var i = 0; i < RTL_LANGUAGES.length; i++) {
-      if (RTL_LANGUAGES[i] == model.globalSettings.language.substring(0,2)) {
-        this.dir = 'rtl';
-        return;
-      }
+  /*
+   * Set our `dir` value to 'ltr' or 'rtl' based on current language.
+   */
+  setDirectionality: function() {
+    if (_.includes(RTL_LANGUAGES, model.globalSettings.language)) {
+      this.dir = 'rtl';
+    } else {
+      this.dir = 'ltr';
     }
-    this.dir = 'ltr';
   },
   languageChanged: function(oldLanguage :string, newLanguage :string) {
     if (oldLanguage && oldLanguage !== newLanguage) {

src/generic_ui/scripts/model.ts

@@ -63,7 +63,7 @@ export class Model {
     allowNonUnicast: false,
     statsReportingEnabled: false,
     consoleFilter: 0,
-    language: 'en',
+    language: null,  // sentinel indicating lang should be calculated from browser settings
     force_message_version: 0,
     quiverUserName: '',
     showCloud: false,

src/generic_ui/scripts/translator.ts

@@ -59,3 +59,5 @@ export const i18n_t = (placeholder :string, params ?:any): string => {
 };
 
 export const i18n_setLng = i18next.setLng;
+
+export const i18n_languagesAvailable :string[] = Object.keys(window.i18nResources);

src/generic_ui/scripts/ui.ts

@@ -9,6 +9,7 @@
  * Common User Interface state holder and changer.
  */
 
+import _ = require('lodash');
 import ui_constants = require('../../interfaces/ui');
 import background_ui = require('./background_ui');
 import CoreConnector = require('./core_connector');
@@ -78,6 +79,12 @@ export function getImageData(userId: string, oldImageData: string,
       jdenticon.toSvg(userIdHash, 100).replace(/#/g, '%23') + '\'';
 }
 
+
+/* Suppress `error TS2339: Property 'languages' does not exist on type
+ * 'Navigator'` triggered by `navigator.languages` reference below.
+ */
+declare var navigator :any;
+
 /**
  * The User Interface class.
  *
@@ -1071,6 +1078,21 @@ export class UserInterface implements ui_constants.UiApi {
     this.model.networkNames = state.networkNames;
     this.model.cloudProviderNames = state.cloudProviderNames;
     this.availableVersion = state.availableVersion;
+    if (!state.globalSettings.language) {
+      // Set state.globalSettings.language based on browser settings:
+      // Choose the first language in navigator.languages we have available.
+      let lang :string;
+      try {
+        lang = _(navigator.languages).map((langCode :string) => {
+          return langCode.substring(0, 2).toLowerCase();  // Normalize
+        }).find((langCode :string) => {  // Return first lang we have available.
+          return _.includes(translator_module.i18n_languagesAvailable, langCode);
+        });
+      } catch (e) {
+        lang = 'en';
+      }
+      state.globalSettings.language = lang || 'en';
+    }
     if (state.globalSettings.language !== this.model.globalSettings.language) {
       this.updateLanguage(state.globalSettings.language);
     }