i18n: Reorganize language_list logic.

This reorganization follows our modern coding conventions for avoid
leaving data in page_params that should be owned by a single module.

frontend_tests/node_tests/i18n.js

@@ -25,7 +25,7 @@ page_params.translation_data = {
 // `i18n.js` initializes FormatJS and is imported by
 // `templates.js`.
 unmock_module("../../static/js/i18n");
-const {$t, $t_html, get_language_list_columns} = zrequire("i18n");
+const {$t, $t_html, get_language_name, get_language_list_columns, initialize} = zrequire("i18n");
 
 run_test("$t", () => {
     // Normally the id would be provided by babel-plugin-formatjs, but
@@ -108,7 +108,7 @@ run_test("tr_tag", () => {
 });
 
 run_test("language_list", () => {
-    page_params.language_list = [
+    const language_list = [
         {
             code: "en",
             locale: "en",
@@ -127,6 +127,8 @@ run_test("language_list", () => {
             percent_translated: 32,
         },
     ];
+    initialize({language_list});
+    assert.equal(get_language_name("en"), "English");
 
     const successful_formatted_list = [
         {

static/js/i18n.js

@@ -44,13 +44,24 @@ export function $t_html(descriptor, values) {
     });
 }
 
-// This formats language data for the language selection modal in a
+let language_list;
-// 2-column format.
-export function get_language_list_columns(default_language) {
-    const language_list = [];
 
-    // Only render languages with percentage translation >= 5%
+export function get_language_name(language_code) {
-    for (const language of page_params.language_list) {
+    const language_list_map = {};
+
+    // One-to-one mapping from code to name for all languages
+    for (const language of language_list) {
+        language_list_map[language.code] = language.name;
+    }
+    return language_list_map[language_code];
+}
+
+export function initialize(language_params) {
+    const language_list_raw = language_params.language_list;
+
+    // Limit offered languages to options with percentage translation >= 5%
+    language_list = [];
+    for (const language of language_list_raw) {
         if (language.percent_translated === undefined || language.percent_translated >= 5) {
             language_list.push({
                 code: language.code,
@@ -60,13 +71,16 @@ export function get_language_list_columns(default_language) {
             });
         }
     }
+}
 
+// This formats language data for the language selection modal in a
+// 2-column format.
+export function get_language_list_columns(default_language) {
     const formatted_list = [];
     const language_len = language_list.length;
     const firsts_end = Math.floor(language_len / 2) + (language_len % 2);
     const firsts = _.range(0, firsts_end);
     const seconds = _.range(firsts_end, language_len);
-
     const longest_zip = [];
 
     // Create a zip (itertool.zip_longest in python)

static/js/settings_display.js

@@ -2,7 +2,7 @@ import $ from "jquery";
 
 import * as channel from "./channel";
 import * as emojisets from "./emojisets";
-import {$t_html} from "./i18n";
+import {$t_html, get_language_name} from "./i18n";
 import * as loading from "./loading";
 import * as overlays from "./overlays";
 import {page_params} from "./page_params";
@@ -14,16 +14,6 @@ const meta = {
     loaded: false,
 };
 
-function get_default_language_name(language_code) {
-    const language_list_map = {};
-
-    // One-to-one mapping from code to name for all languages
-    for (const language of page_params.language_list) {
-        language_list_map[language.code] = language.name;
-    }
-    return language_list_map[language_code];
-}
-
 export let default_language_name;
 
 export function set_default_language_name(name) {
@@ -223,6 +213,6 @@ export function update_page() {
 }
 
 export function initialize() {
-    const language_name = get_default_language_name(page_params.default_language);
+    const language_name = get_language_name(page_params.default_language);
     set_default_language_name(language_name);
 }

static/js/ui_init.js

@@ -27,6 +27,7 @@ import * as gear_menu from "./gear_menu";
 import * as giphy from "./giphy";
 import * as hashchange from "./hashchange";
 import * as hotspots from "./hotspots";
+import * as i18n from "./i18n";
 import * as invite from "./invite";
 import * as lightbox from "./lightbox";
 import * as linkifiers from "./linkifiers";
@@ -465,7 +466,9 @@ export function initialize_everything() {
     const user_groups_params = pop_fields("realm_user_groups");
 
     const user_status_params = pop_fields("user_status");
+    const i18n_params = pop_fields("language_list");
 
+    i18n.initialize(i18n_params);
     tippyjs.initialize();
     // We need to initialize compose early, because other modules'
     // initialization expects `#compose` to be already present in the