Add toggle component.

This adds the toggle component which removes the necessity to have HTML.

static/js/components.js

@@ -0,0 +1,81 @@
+var components = (function () {
+
+var exports = {};
+
+exports.toggle = (function () {
+    var keys = {};
+
+    var __toggle = function (opts) {
+        var component = (function render_component (opts) {
+            var _component = $("<div class='tab-switcher'></div>");
+            opts.values.forEach(function (value, i) {
+                var tab = $("<div class='ind-tab' data-tab-id='" + i + "'>" + value.label + "</div>");
+                if (i === 0) {
+                    tab.addClass("first");
+                } else {
+                    tab.addClass("second");
+                }
+                _component.append(tab);
+            });
+            return _component;
+        }(opts));
+
+        var meta = {
+            retrieved: false,
+            $ind_tab: component.find(".ind-tab")
+        };
+
+        (function () {
+            var last_value = null;
+            meta.$ind_tab.each(function () {
+                $(this).click(function () {
+                    meta.$ind_tab.removeClass("selected");
+                    $(this).addClass("selected");
+                    if (opts.callback) {
+                        var id = +$(this).data("tab-id");
+                        if (last_value !== opts.values[id].label) {
+                            last_value = opts.values[id].label;
+                            opts.callback(last_value);
+                        }
+                    }
+                });
+            });
+            if (typeof opts.selected === "number") {
+                $(component).find(".ind-tab[data-tab-id='" + opts.selected + "']").click();
+            }
+        }());
+
+        var prototype = {
+            value: function () {
+                var sel = component.find(".selected");
+
+                if (sel.length > 0) {
+                    var id = +sel.eq(0).data("tab-id");
+                    return opts.values[id].label;
+                }
+            },
+            get: function () {
+                return component;
+            }
+        };
+
+        if (opts.name) {
+            keys[opts.name] = {
+                opts: opts,
+                component: component,
+                value: prototype.value
+            };
+        }
+
+        return prototype;
+    };
+
+    __toggle.lookup = function (id) {
+        return keys[id];
+    };
+
+    return __toggle;
+}());
+
+return exports;
+}());

tools/jslint/check-all.js

@@ -29,7 +29,7 @@ var globals =
     + ' avatar feature_flags search_suggestion referral stream_color Dict'
     + ' Filter summary admin stream_data muting WinChan muting_ui Socket channel gear_menu'
     + ' message_flags bot_data loading favicon resize scroll_bar condense floating_recipient_bar'
-    + ' copy_and_paste click_handlers topic_list pm_list unread_ui'
+    + ' copy_and_paste click_handlers topic_list pm_list unread_ui components'
 
     // colorspace.js
     + ' colorspace'

zproject/settings.py

@@ -762,6 +762,7 @@ JS_SPECS = {
             'js/loading.js',
             'js/util.js',
             'js/dict.js',
+            'js/components.js',
             'js/localstorage.js',
             'js/channel.js',
             'js/setup.js',