settings: Lazy-load settings sections.

For the settings UI, we now wait until a user goes to a particular
settings section before calling the appropriate function to set
up the section (which usually involves setting up click handlers
and populating initial data).

.eslintrc.json

@@ -38,6 +38,7 @@
         "settings_muting": false,
         "settings_lab": false,
         "settings_bots": false,
+        "settings_sections": false,
         "settings": false,
         "resize": false,
         "loading": false,

static/js/click_handlers.js

@@ -581,6 +581,7 @@ $(function () {
         }
 
         $(".settings-section, .settings-wrapper").removeClass("show");
+        settings_sections.load_settings_section(section);
         $(".settings-section" + sel + ", .settings-wrapper" + sel).addClass("show");
     });
 

static/js/settings.js

@@ -66,14 +66,9 @@ function _setup_page() {
 
     $(".settings-box").html(settings_tab);
 
-    alert_words_ui.set_up_alert_words();
-    attachments_ui.set_up_attachments();
-    settings_account.set_up();
-    settings_display.set_up();
-    settings_notifications.set_up();
-    settings_bots.set_up();
-    settings_muting.set_up();
-    settings_lab.set_up();
+    // Since we just swapped in a whole new settings widget, we need to
+    // tell settings_sections nothing is loaded.
+    settings_sections.reset_sections();
 
     if (tab) {
         exports.launch_page(tab);

static/js/settings_sections.js

@@ -0,0 +1,47 @@
+var settings_sections = (function () {
+
+var exports = {};
+
+var load_func_dict = new Dict(); // section -> function
+var is_loaded = new Dict(); // section -> bool
+
+exports.initialize = function () {
+    load_func_dict.set('your-account', settings_account.set_up);
+    load_func_dict.set('display-settings', settings_display.set_up);
+    load_func_dict.set('notifications', settings_notifications.set_up);
+    load_func_dict.set('your-bots', settings_bots.set_up);
+    load_func_dict.set('alert-words', alert_words_ui.set_up_alert_words);
+    load_func_dict.set('uploaded-files', attachments_ui.set_up_attachments);
+    load_func_dict.set('muted-topics', settings_muting.set_up);
+    load_func_dict.set('zulip-labs', settings_lab.set_up);
+};
+
+exports.load_settings_section = function (section) {
+    if (!load_func_dict.has(section)) {
+        // admin sections don't have loaders yet, and that's ok
+        return;
+    }
+
+    if (is_loaded.get(section)) {
+        // We only load sections once (unless somebody calls
+        // reset_sections).
+        return;
+    }
+
+    var load_func = load_func_dict.get(section);
+
+    // Do the real work here!
+    load_func();
+    is_loaded.set(section, true);
+};
+
+exports.reset_sections = function () {
+    is_loaded.clear();
+};
+
+return exports;
+}());
+
+if (typeof module !== 'undefined') {
+    module.exports = settings_sections;
+}

static/js/ui_init.js

@@ -257,6 +257,7 @@ $(function () {
     activity.initialize();
     emoji.initialize();
     hotspots.initialize();
+    settings_sections.initialize();
 });
 
 

zproject/settings.py

@@ -911,6 +911,7 @@ JS_SPECS = {
             'js/settings_bots.js',
             'js/settings_muting.js',
             'js/settings_lab.js',
+            'js/settings_sections.js',
             'js/settings.js',
             'js/admin.js',
             'js/tab_bar.js',