zulip/static/js/message_list_view.js

function MessageListView(list, table_name, collapse_messages) {
    this.list = list;
    this.collapse_messages = collapse_messages;
    this._rows = {};
    this.table_name = table_name;
    if (this.table_name) {
        this.clear_table();
    }
    this._message_groups = [];

    // Half-open interval of the indices that define the current render window
    this._render_win_start = 0;
    this._render_win_end = 0;
}

(function () {

function stringify_time(time) {
    if (feature_flags.twenty_four_hour_time) {
        return time.toString('HH:mm');
    }
    return time.toString('h:mmtt');
}

function add_display_time(message, prev) {
    var time = new XDate(message.timestamp * 1000);

    if (prev !== undefined) {
        var prev_time = new XDate(prev.timestamp * 1000);
        if (time.toDateString() !== prev_time.toDateString()) {
            // NB: show_date is HTML, inserted into the document without escaping.
            message.show_date = (timerender.render_date(time, prev_time))[0].outerHTML;
        } else {
            // This is run on re-render, and must remove the date if a message
            // from the same day is added above this one when scrolling up.
            message.show_date = undefined;
        }
    } else {
        message.show_date = (timerender.render_date(time))[0].outerHTML;
    }

    if (message.timestr === undefined) {
        message.timestr = stringify_time(time);
    }
}

MessageListView.prototype = {
    // Number of messages to render at a time
    _RENDER_WINDOW_SIZE: 400,
    // Number of messages away from edge of render window at which we
    // trigger a re-render
    _RENDER_THRESHOLD: 50,

    render: function MessageListView__render(messages, where, messages_are_new) {
        var list = this.list; // for convenience

        // This function processes messages into chunks with separators between them,
        // and templates them to be inserted as table rows into the DOM.

        if (messages.length === 0 || this.table_name === undefined) {
            return;
        }

        var table_name = this.table_name;
        var table = rows.get_table(table_name);
        var messages_to_render = [];
        var ids_where_next_is_same_sender = {};
        var prev;
        var orig_scrolltop_offset, last_message_id;

        var current_group = [];
        var new_message_groups = [];

        var summary_group = {};
        var has_summary = false;
        var summary_start_id = 0;
        var self = this;

        if (where === "bottom") {
            // Remove the trailing bookend; it'll be re-added after we do our rendering
            self.clear_trailing_bookend();
        } else if (self.selected_row().length > 0) {
            orig_scrolltop_offset = self.selected_row().offset().top - viewport.scrollTop();
        }

        if (where === 'top' && self.collapse_messages && this._message_groups.length > 0) {
            // Delete the current top message group, and add it back in with these
            // messages, in order to collapse properly.
            //
            // This means we redraw the entire view on each update when narrowed by
            // subject, which could be a problem down the line.  For now we hope
            // that subject views will not be very big.

            var top_group = self._message_groups[0];
            var top_messages = [];
            _.each(top_group, function (id) {
                self.get_row(id).remove();
                // Remove any date row headers for these messages
                $('.date_row[data-zid=' + id + ']').remove();
                top_messages.push(self.get_message(id));
            });
            messages = messages.concat(top_messages);

            // Delete the leftover recipient label.
            table.find('.recipient_row:first').remove();
        } else {
            var last_row = table.find('tr[zid]:last');
            last_message_id = rows.id(last_row);
            prev = self.get_message(last_message_id);

            if (last_row.is('.summary_row')) {
                // Don't group with a summary, but don't put separators before the new message
                prev = _.pick(prev, 'timestamp', 'historical');
            }
        }

        function set_template_properties(message) {
            if (message.is_stream) {
                message.background_color = stream_data.get_color(message.stream);
                message.color_class = stream_color.get_color_class(message.background_color);
                message.invite_only = stream_data.get_invite_only(message.stream);
            }
        }

        function finish_summary() {
            var first = true;

            _.each(summary_group, function (summary_row) {
                summary_row.count = summary_row.messages.length;
                summary_row.message_ids = _.pluck(summary_row.messages, 'id').join(' ');
                if (first) {
                    summary_row.include_bookend = true;
                    first = false;
                }
                set_template_properties(summary_row);
                messages_to_render.push(summary_row);
                prev = summary_row;
            });

            prev.include_footer = true;

            has_summary = false;
            summary_group = {};
            prev = _.pick(prev, 'timestamp', 'historical');
        }

        function finish_group() {
            if (current_group.length > 0) {
                var message_ids = _.pluck(current_group, 'id');
                current_group[0].message_ids = message_ids;
                current_group[0].collapsible = feature_flags.collapsible;
                new_message_groups.push(message_ids);
            }
        }

        _.each(messages, function (message) {
            message.include_recipient = false;
            message.include_bookend   = false;
            message.include_footer    = false;

            add_display_time(message, prev);

            if (has_summary && message.show_date) {
                finish_summary();
            }

            var summary_adjective = list.summary_adjective(message);

            if (summary_adjective) {
                if (prev) {
                    prev.include_footer = true;
                }

                var key = util.recipient_key(message);
                if (summary_group[key] === undefined) {
                    // Start building a new summary row for messages from this recipient.
                    //
                    // Ugly: handlebars renderer only takes messages. We don't want to modify
                    // the original message, so we make a fake message based on the real one
                    // that will trigger the right part of the handlebars template and won't
                    // show the content, date, etc. from the real message.
                    var fake_message = _.extend(_.pick(message,
                        'timestamp', 'show_date', 'historical', 'stream',
                        'is_stream', 'subject', 'display_recipient', 'display_reply_to'), {
                        is_summary: true,
                        include_footer: false,
                        include_bookend: false,
                        first_message_id: message.id,
                        summary_adjective: summary_adjective,
                        messages: [message]
                    });
                    if (message.stream) {
                        fake_message.stream_url = narrow.by_stream_uri(message.stream);
                        fake_message.topic_url = narrow.by_stream_subject_uri(message.stream, message.subject);
                    } else {
                        fake_message.pm_with_url = narrow.pm_with_uri(message.reply_to);
                    }

                    summary_group[key] = fake_message;
                } else {
                    summary_group[key].messages.push(message);
                }
                has_summary = true;
                prev = message;
                return;
            } else if (has_summary) {
                finish_summary();
            }

            if (util.same_recipient(prev, message) && self.collapse_messages &&
               prev.historical === message.historical && !message.show_date) {
                current_group.push(message);
                // prev is no longer the last element in this block
                prev.include_footer = false;
            } else {
                finish_group();
                current_group = [message];

                // Add a space to the table, but not for the first element.
                message.include_recipient = true;
                message.include_bookend   = (prev !== undefined);
                if (prev !== undefined) {
                    prev.include_footer = true;
                }
                message.subscribed = false;
                message.unsubscribed = false;
                if (message.include_bookend && message.historical !== prev.historical) {
                    if (message.historical) {
                        message.unsubscribed = message.stream;
                    } else {
                        message.subscribed = message.stream;
                    }
                }

                if (message.stream) {
                    message.stream_url = narrow.by_stream_uri(message.stream);
                    message.topic_url = narrow.by_stream_subject_uri(message.stream, message.subject);
                } else {
                    message.pm_with_url = narrow.pm_with_uri(message.reply_to);
                }
            }

            message.include_sender = true;
            if (!message.include_recipient &&
                util.same_sender(prev, message)) {
                message.include_sender = false;
                ids_where_next_is_same_sender[prev.id] = true;
            }

            if (message.last_edit_timestamp !== undefined) {
                // Add or update the last_edit_timestr
                var last_edit_time = new XDate(message.last_edit_timestamp * 1000);
                message.last_edit_timestr =
                    (timerender.render_date(last_edit_time))[0].outerHTML
                    + " " + stringify_time(last_edit_time);
            }

            message.dom_id = table_name + message.id;

            message.small_avatar_url = ui.small_avatar_url(message);

            set_template_properties(message);

            message.contains_mention = notifications.speaking_at_me(message);
            message.unread = unread.message_unread(message);

            messages_to_render.push(message);
            prev = message;
            list.last_message_historical = message.historical;
        });

        if (prev) {
            prev.include_footer = true;
        }

        if (has_summary) {
            finish_summary();
        }

        if (messages_to_render.length === 0) {
            return;
        }

        finish_group();

        if (where === 'top') {
            self._message_groups = new_message_groups.concat(self._message_groups);
        } else {
            self._message_groups = self._message_groups.concat(new_message_groups);
        }

        var rendered_elems = $(templates.render('message', {
            messages: messages_to_render,
            include_layout_row: (table.find('tr:first').length === 0),
            use_match_properties: list.filter.is_search()
        }));

        _.each(rendered_elems, function (elem) {
            var row = $(elem);

            // Save DOM elements by id into self._rows for O(1) lookup
            if (row.hasClass('summary_row')) {
                _.each(row.attr('data-messages').split(' '), function (id) {
                    self._rows[id] = elem;
                });
            } else if (row.hasClass('message_row')) {
                self._rows[row.attr('zid')] = elem;
            }

            if (! row.hasClass('message_row')) {
                return;
            }
            var id = rows.id(row);
            if (ids_where_next_is_same_sender[id]) {
                row.find('.messagebox').addClass("next_is_same_sender");
            }

            if (row.hasClass('mention')) {
                row.find('.user-mention').each(function () {
                    var email = $(this).attr('data-user-email');
                    if (email === '*' || email === page_params.email) {
                        $(this).addClass('user-mention-me');
                    }
                });
            }
        });

        // The message that was last before this batch came in has to be
        // handled specially because we didn't just render it and
        // therefore have to lookup its associated element
        // If the previous message was part of the same block but
        // had a footer, we need to remove it.
        if (last_message_id !== undefined) {
            var row = self.get_row(last_message_id);
            if (ids_where_next_is_same_sender[last_message_id]) {
                row.find('.messagebox').addClass("next_is_same_sender");
            }
            // We didn't actually rerender the original last message,
            // but we might have set .include_footer=false for it in
            // the above loop since it was the previous message for
            // messages[0].  If so, we need to update the DOM.
            if (self.get_message(last_message_id) && ! self.get_message(last_message_id).include_footer) {
                row.removeClass('last_message');
            }
        }

        if (where === 'top' && table.find('.ztable_layout_row').length > 0) {
            // If we have a totally empty narrow, there may not
            // be a .ztable_layout_row.
            table.find('.ztable_layout_row').after(rendered_elems);
        } else {
            table.append(rendered_elems);

            list.update_trailing_bookend();

            // XXX: This is absolutely awful.  There is a firefox bug
            // where when table rows as DOM elements are appended (as
            // opposed to as a string) a border is sometimes added to the
            // row.  This border goes away if we add a dummy row to the
            // top of the table (it doesn't go away on any reflow,
            // though, as resizing the window doesn't make them go away).
            // So, we add an empty row and then garbage collect them
            // later when the user is idle.
            var dummy = $("<tr></tr>");
            table.find('.ztable_layout_row').after(dummy);
            $(document).idle({'idle': 1000*10,
                              'onIdle': function () {
                                  dummy.remove();
                              }});
        }

        _.each(rendered_elems, function (elem) {
            var row = $(elem);
            if (! row.hasClass('message_row')) {
                return;
            }
            var id = rows.id(row);
            message_edit.maybe_show_edit(row, id);
        });

        // Must happen after the elements are inserted into the document for
        // getBoundingClientRect to work.
        _.each(rendered_elems, ui.process_condensing);

        // Must happen after anything that changes the height of messages has
        // taken effect.
        if (where === 'top' && list === current_msg_list && orig_scrolltop_offset !== undefined) {
            // Restore the selected row to its original position in
            // relation to the top of the window
            viewport.scrollTop(self.selected_row().offset().top - orig_scrolltop_offset);
            list.reselect_selected_id();
        }

        if (list === current_msg_list) {
            // Update the fade.

            var get_elements = function (message) {
                // We don't have a Message class, but we can at least hide the messy details
                // of rows.js from compose_fade.  We provide a callback function to be lazy--
                // compose_fade may not actually need the elements depending on its internal
                // state.
                var message_row = self.get_row(message.id);
                var lst = [message_row];
                if (message.include_recipient) {
                    lst.unshift(message_row.prev('.recipient_row'));
                }
                return lst;
            };

            compose_fade.update_rendered_messages(messages, get_elements);
        }

        if (list === current_msg_list && messages_are_new) {
            self._maybe_autoscroll(rendered_elems);
        }
    },

    _maybe_autoscroll: function MessageListView__maybe_autoscroll(rendered_elems) {

        // If we are near the bottom of our feed (the bottom is visible) and can
        // scroll up without moving the pointer out of the viewport, do so, by
        // up to the amount taken up by the new message.

        var selected_row = this.selected_row();
        var last_visible = rows.last_visible();

        // Make sure we have a selected row and last visible row. (defensive)
        if (!(selected_row && (selected_row.length > 0) && last_visible)) {
            return;
        }

        var selected_row_offset = selected_row.offset().top;
        var info = viewport.message_viewport_info();
        var available_space_for_scroll = selected_row_offset - info.visible_top;

        // Don't scroll if we can't move the pointer up.
        if (available_space_for_scroll <= 0) {
            return;
        }

        var new_messages_height = 0;
        _.each(rendered_elems, function (elem) {
            // Sometimes there are non-DOM elements in rendered_elems; only
            // try to get the heights of actual trs.
            if ($(elem).is("tr")) {
                new_messages_height += $(elem).height();
            }
        });

        if (new_messages_height <= 0) {
            return;
        }

        // This next decision is fairly debatable.  For a big message that
        // would push the pointer off the screen, we do a partial autoscroll,
        // which has the following implications:
        //    a) user sees scrolling (good)
        //    b) user's pointer stays on screen (good)
        //    c) scroll amount isn't really tied to size of new messages (bad)
        //    d) all the bad things about scrolling for users who want messages
        //       to stay on the screen
        var scroll_amount = new_messages_height;

        if (scroll_amount > available_space_for_scroll) {
            scroll_amount = available_space_for_scroll;
        }

        // Let's work our way back to whether the user was already dealing
        // with messages off the screen, in which case we shouldn't autoscroll.
        var bottom_last_visible = last_visible.offset().top + last_visible.height();
        var bottom_old_last_visible = bottom_last_visible - new_messages_height;
        var bottom_viewport = info.visible_top + info.visible_height;

        // Exit if the user was already past the bottom.
        if (bottom_old_last_visible > bottom_viewport) {
            return;
        }

        // Ok, we are finally ready to actually scroll.
        viewport.system_initiated_animate_scroll(scroll_amount);
    },


    clear_rendering_state: function MessageListView__clear_rendering_state(clear_table) {
        this._message_groups = [];
        if (clear_table) {
            this.clear_table();
        }
        this.list.last_message_historical = false;

        this._render_win_start = 0;
        this._render_win_end = 0;
    },

    update_render_window: function MessageListView__update_render_window(selected_idx, check_for_changed) {
        var new_start = this.list.idx_full_messages_before(selected_idx, this._RENDER_WINDOW_SIZE / 2);
        if (check_for_changed && new_start === this._render_win_start) {
            return false;
        }

        this._render_win_start = new_start;
        this._render_win_end = this.list.idx_full_messages_after(selected_idx, this._RENDER_WINDOW_SIZE / 2);
        return true;
    },


    maybe_rerender: function MessageListView__maybe_rerender() {
        if (this.table_name === undefined) {
            return false;
        }

        var selected_idx = this.list.selected_idx();

        // We rerender under the following conditions:
        // * The selected message is within this._RENDER_THRESHOLD visible
        //   messages of the top of the currently rendered window and the top
        //   of the window does not abut the beginning of the message list
        // * The selected message is within this._RENDER_THRESHOLD visible
        //   messages of the bottom of the currently rendered window and the
        //   bottom of the window does not abut the end of the message list
        if (! (((this.list.count_full_messages_between(this._render_win_start, selected_idx) < this._RENDER_THRESHOLD)
                && (this._render_win_start !== 0)) ||
               ((this.list.count_full_messages_between(selected_idx, this._render_win_end) <= this._RENDER_THRESHOLD)
                && (this._render_win_end !== this.list.num_items()))))
        {
            return false;
        }

        if (!this.update_render_window(selected_idx, true)) {
            return false;
        }

        this.rerender_preserving_scrolltop();
        return true;
    },

    rerender_preserving_scrolltop: function MessageListView__rerender_preserving_scrolltop() {
        // scrolltop_offset is the number of pixels between the top of the
        // viewable window and the newly selected message
        var scrolltop_offset;
        var selected_row = this.selected_row();
        var selected_in_view = (selected_row.length > 0);
        if (selected_in_view) {
            scrolltop_offset = viewport.scrollTop() - selected_row.offset().top;
        }

        this.clear_table();
        this.render(this.list.get_messages().slice(this._render_win_start,
                                       this._render_win_end), 'bottom');

        // If we could see the newly selected message, scroll the
        // window such that the newly selected message is at the
        // same location as it would have been before we
        // re-rendered.
        if (selected_in_view) {
            // Must get this.list.selected_row() again since it is now a new DOM element
            viewport.scrollTop(this.selected_row().offset().top + scrolltop_offset);
        }
    },

    append: function MessageListView__append(messages, messages_are_new) {
        var cur_window_size = this.list.count_full_messages_between(this._render_win_start, this._render_win_end);
        if (cur_window_size < this._RENDER_WINDOW_SIZE) {
            var slice_to_render = messages.slice(0, this._RENDER_WINDOW_SIZE - cur_window_size);
            this.render(slice_to_render, 'bottom', messages_are_new);
            this._render_win_end += slice_to_render.length;
        }

        // If the pointer is high on the page such that there is a
        // lot of empty space below and the render window is full, a
        // newly recieved message should trigger a rerender so that
        // the new message, which will appear in the viewable area,
        // is rendered.
        this.maybe_rerender();
    },

    prepend: function MessageListView__prepend(messages) {
        this._render_win_start += messages.length;
        this._render_win_end += messages.length;

        this.maybe_rerender();
    },

    rerender_the_whole_thing: function MessageListView__rerender_the_whole_thing(messages) {
        // TODO: Figure out if we can unify this with this.list.rerender().

        this.clear_rendering_state(true);

        this.update_render_window(this.list.selected_idx(), false);

        this.render(this.list.get_messages().slice(this._render_win_start,
                                       this._render_win_end), 'bottom');
    },

    clear_table: function MessageListView_clear_table() {
        // We do not want to call .empty() because that also clears
        // jQuery data.  This does mean, however, that we need to be
        // mindful of memory leaks.
        rows.get_table(this.table_name).children().detach();
        this._rows = {};
    },

    get_row: function MessageListView_get_row(id) {
        return $(this._rows[id]);
    },

    clear_trailing_bookend: function MessageListView_clear_trailing_bookend() {
        var trailing_bookend = rows.get_table(this.table_name).find('#trailing_bookend');
        trailing_bookend.remove();
    },

    render_trailing_bookend: function MessageListView_render_trailng_bookend(trailing_bookend_content) {
        var rendered_trailing_bookend = $(templates.render('trailing_bookend', {
            trailing_bookend: trailing_bookend_content
        }));
        rows.get_table(this.table_name).append(rendered_trailing_bookend);
    },

    selected_row: function MessageListView_selected_row() {
        return this.get_row(this.list.selected_id());
    },

    is_expandable_row: function MessageListView_is_expandable_row(row) {
        return row.hasClass('summary_row');
    },

    get_message: function MessageListView_get_message(id) {
        return this.list.get(id);
    }

};

}());

if (typeof module !== 'undefined') {
    module.exports = MessageListView;
}