From 8c9488a9040016520f8e5797ecbe834bf7251fc6 Mon Sep 17 00:00:00 2001
From: Steve Howell <showell30@yahoo.com>
Date: Sat, 29 Oct 2016 11:19:25 -0700
Subject: [PATCH] Add topic_list.build_widget().

This gets us closer to a component model for topic lists.
---
 frontend_tests/node_tests/stream_list.js |  7 +-
 static/js/topic_list.js                  | 93 +++++++++++++-----------
 2 files changed, 56 insertions(+), 44 deletions(-)

diff --git a/frontend_tests/node_tests/stream_list.js b/frontend_tests/node_tests/stream_list.js
index 3fae028190..67e45ce07b 100644
--- a/frontend_tests/node_tests/stream_list.js
+++ b/frontend_tests/node_tests/stream_list.js
@@ -34,7 +34,7 @@ global.use_template('stream_sidebar_row');
 global.use_template('stream_privacy');
 global.use_template('topic_list_item');
 
-(function test_topic_list_build_list() {
+(function test_topic_list_build_widget() {
     var stream = "devel";
     var active_topic = "testing";
     var max_topics = 5;
@@ -47,8 +47,9 @@ global.use_template('topic_list_item');
         return 1;
     };
 
-    var topic_html = topic_list.build_list(stream, active_topic, max_topics);
-    global.write_test_output("test_topic_list_build_list", topic_html);
+    var widget = topic_list.build_widget(stream, active_topic, max_topics);
+    var topic_html = widget.get_dom();
+    global.write_test_output("test_topic_list_build_widget", topic_html);
 
     var topic = $(topic_html).find('a').text().trim();
     assert.equal(topic, 'coding');
diff --git a/static/js/topic_list.js b/static/js/topic_list.js
index 22bd5292dd..1d396d18dd 100644
--- a/static/js/topic_list.js
+++ b/static/js/topic_list.js
@@ -55,52 +55,63 @@ exports.set_count = function (stream_li, topic, count) {
     update_count_in_dom(count_span, value_span, count);
 };
 
-exports.build_list = function (stream, active_topic, max_topics) {
-    var topics = stream_data.get_recent_topics(stream) || [];
+exports.build_widget = function (stream, active_topic, max_topics) {
+    var self = {};
 
-    if (active_topic) {
-        active_topic = active_topic.toLowerCase();
-    }
+    function build_list(stream, active_topic, max_topics) {
+        var topics = stream_data.get_recent_topics(stream) || [];
 
-    var hiding_topics = false;
-
-    var ul = $('<ul class="expanded_subjects">');
-    ul.attr('data-stream', stream);
-
-    _.each(topics, function (subject_obj, idx) {
-        var topic_name = subject_obj.subject;
-        var num_unread = unread.num_unread_for_subject(stream, subject_obj.canon_subject);
-
-        // Show the most recent topics, as well as any with unread messages
-        var always_visible = (idx < max_topics) || (num_unread > 0) ||
-                             (active_topic === topic_name);
-
-        if (!always_visible) {
-            hiding_topics = true;
+        if (active_topic) {
+            active_topic = active_topic.toLowerCase();
         }
 
-        var topic_info = {
-            topic_name: topic_name,
-            unread: num_unread,
-            is_zero: num_unread === 0,
-            is_muted: muting.is_topic_muted(stream, topic_name),
-            zoom_out_hide: !always_visible,
-            url: narrow.by_stream_subject_uri(stream, topic_name)
-        };
-        var li = templates.render('topic_list_item', topic_info);
-        ul.append(li);
-    });
+        var hiding_topics = false;
 
-    if (hiding_topics) {
-        var show_more = $('<li class="show-more-topics">');
-        show_more.attr('data-stream', stream);
-        var link = $('<a href="#">');
-        link.html(i18n.t('more topics'));
-        show_more.html(link);
-        ul.append(show_more);
+        var ul = $('<ul class="expanded_subjects">');
+        ul.attr('data-stream', stream);
+
+        _.each(topics, function (subject_obj, idx) {
+            var topic_name = subject_obj.subject;
+            var num_unread = unread.num_unread_for_subject(stream, subject_obj.canon_subject);
+
+            // Show the most recent topics, as well as any with unread messages
+            var always_visible = (idx < max_topics) || (num_unread > 0) ||
+                                 (active_topic === topic_name);
+
+            if (!always_visible) {
+                hiding_topics = true;
+            }
+
+            var topic_info = {
+                topic_name: topic_name,
+                unread: num_unread,
+                is_zero: num_unread === 0,
+                is_muted: muting.is_topic_muted(stream, topic_name),
+                zoom_out_hide: !always_visible,
+                url: narrow.by_stream_subject_uri(stream, topic_name)
+            };
+            var li = templates.render('topic_list_item', topic_info);
+            ul.append(li);
+        });
+
+        if (hiding_topics) {
+            var show_more = $('<li class="show-more-topics">');
+            show_more.attr('data-stream', stream);
+            var link = $('<a href="#">');
+            link.html(i18n.t('more topics'));
+            show_more.html(link);
+            ul.append(show_more);
+        }
+
+        return ul;
     }
 
-    return ul;
+    self.get_dom = function () {
+        return self.dom;
+    };
+
+    self.dom = build_list(stream, active_topic, max_topics);
+    return self;
 };
 
 exports.rebuild = function (stream_li, stream, active_topic) {
@@ -108,8 +119,8 @@ exports.rebuild = function (stream_li, stream, active_topic) {
 
     exports.remove_expanded_topics();
 
-    var topic_dom = exports.build_list(stream, active_topic, max_topics);
-    stream_li.append(topic_dom);
+    var widget = exports.build_widget(stream, active_topic, max_topics);
+    stream_li.append(widget.get_dom());
 
     if (active_topic) {
         exports.activate_topic(stream_li, active_topic);