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.
This commit is contained in:
Steve Howell 2016-11-10 11:46:01 -08:00 committed by Tim Abbott
parent f923320de8
commit b0a8e4befe
2 changed files with 21 additions and 7 deletions

View File

@ -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);
if (zoomed) {
show_topic = true;
} else {
// Show the most recent topics, as well as any with unread messages
var always_visible = (idx < max_topics) || (num_unread > 0) ||
show_topic = (idx < max_topics) || (num_unread > 0) ||
(active_topic === topic_name);
if (!always_visible) {
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());
}
};

View File

@ -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}}