From b0a8e4befe33578d68a080d60bc91a2a0fec7c4f Mon Sep 17 00:00:00 2001
From: Steve Howell <showell30@yahoo.com>
Date: Thu, 10 Nov 2016 11:46:01 -0800
Subject: [PATCH] topic lists: Rebuild DOM when we zoom in or zoom out.

This change sets the stage to reload more topics from the back
end when we zoom in, and it slims the DOM for the typical use
case of being zoomed out.
---
 static/js/topic_list.js                     | 26 ++++++++++++++++-----
 static/templates/topic_list_item.handlebars |  2 +-
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/static/js/topic_list.js b/static/js/topic_list.js
index 29de8c8f6c..c9366126cd 100644
--- a/static/js/topic_list.js
+++ b/static/js/topic_list.js
@@ -50,15 +50,21 @@ exports.build_widget = function (parent_elem, stream, active_topic, max_topics)
         ul.attr('data-stream', stream);
 
         _.each(topics, function (subject_obj, idx) {
+            var show_topic;
             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 (zoomed) {
+                show_topic = true;
+            } else {
+                // Show the most recent topics, as well as any with unread messages
+                show_topic = (idx < max_topics) || (num_unread > 0) ||
+                             (active_topic === topic_name);
 
-            if (!always_visible) {
-                hiding_topics = true;
+                if (!show_topic) {
+                    hiding_topics = true;
+                    return;
+                }
             }
 
             var topic_info = {
@@ -66,7 +72,6 @@ exports.build_widget = function (parent_elem, stream, active_topic, max_topics)
                 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));
@@ -154,12 +159,21 @@ exports.rebuild = function (stream_li, stream) {
 // handle hiding/showing the non-narrowed streams
 exports.zoom_in = function () {
     zoomed = true;
+
+    if (!active_widget) {
+        blueslip.error('Cannot find widget for topic history zooming.');
+        return;
+    }
+
+    exports.rebuild(active_widget.get_parent(), active_widget.get_stream_name());
 };
 
 exports.zoom_out = function (options) {
     zoomed = false;
     if (options && options.clear_topics) {
         exports.remove_expanded_topics();
+    } else {
+        exports.rebuild(active_widget.get_parent(), active_widget.get_stream_name());
     }
 };
 
diff --git a/static/templates/topic_list_item.handlebars b/static/templates/topic_list_item.handlebars
index bf9636ceac..741bd26b84 100644
--- a/static/templates/topic_list_item.handlebars
+++ b/static/templates/topic_list_item.handlebars
@@ -1,4 +1,4 @@
-<li class='{{#if is_zero}}zero-subject-unreads{{/if}} {{#if is_muted}}muted_topic{{/if}} {{#if zoom_out_hide}} zoom-out-hide{{/if}} topic-list-item' data-name='{{topic_name}}'>
+<li class='{{#if is_zero}}zero-subject-unreads{{/if}} {{#if is_muted}}muted_topic{{/if}} topic-list-item' data-name='{{topic_name}}'>
     <span class='topic-box'>
         <a href='{{url}}' class="topic-name">
             {{topic_name}}