zulip/zephyr/static/js/zephyr.js

var message_array = [];
var message_dict = {};
var subject_dict = {};
var people_hash = {};

var viewport = $(window);
var reloading_app = false;

var selected_message_id = -1;  /* to be filled in on document.ready */
var selected_message;  // = rows.get(selected_message_id)
var get_updates_params = {
    last: -1,
    pointer: -1,
    failures: 0,
    server_generation: -1, /* to be filled in on document.ready */
    reload_pending: 0
};

$(function () {
    var i;
    var send_status = $('#send-status');
    var buttons = $('#compose').find('input[type="submit"]');

    var options = {
        dataType: 'json', // This seems to be ignored. We still get back an xhr.
        beforeSubmit: compose.validate,
        success: function (resp, statusText, xhr, form) {
            form.find('textarea').val('');
            send_status.hide();
            compose.hide();
            buttons.removeAttr('disabled');
        },
        error: function (xhr, error_type) {
            if (error_type !== 'timeout' && get_updates_params.reload_pending) {
                // The error might be due to the server changing
                do_reload_app_preserving_compose(true);
                return;
            }
            var response = "Error sending message";
            if (xhr.status.toString().charAt(0) === "4") {
                // Only display the error response for 4XX, where we've crafted
                // a nice response.
                response += ": " + $.parseJSON(xhr.responseText).msg;
            }
            send_status.removeClass(status_classes)
                       .addClass('alert-error')
                       .text(response)
                       .append($('<span />')
                           .addClass('send-status-close').html('&times;')
                           .click(function () { send_status.stop(true).fadeOut(500); }))
                       .stop(true).fadeTo(0,1);

            buttons.removeAttr('disabled');
        }
    };

    send_status.hide();
    $("#compose form").ajaxForm(options);

    $.each(people_list, function (idx, person) {
        people_hash[person.email] = 1;
    });
});

// The "message groups", i.e. blocks of messages collapsed by recipient.
// Each message table has a list of lists.
var message_groups = {
    zhome: [],
    zfilt: []
};

// Why do we look at the 'bottom' in above_view_threshold and the top
// in below_view_threshold as opposed to vice versa?  Mostly to handle
// the case of gigantic messages.  Imagine the case of a selected
// message that's so big that it takes up an two entire screens. The
// selector shouldn't move away from it until after the *bottom* of
// the message has gone too high up on the screen.  (Otherwise we'd
// move the pointer right after part of the first screenful.)
function above_view_threshold(message, useTop) {
    // Barnowl-style thresholds: the bottom of the pointer is never
    // above the 1/5 mark.
    // (if useTop = true, we look at the top of the pointer instead)
    var position = message.offset().top;
    if (!useTop) {
        position += message.outerHeight(true);
    }
    return position < viewport.scrollTop() + viewport.height() / 5;
}

function below_view_threshold(message) {
    // Barnowl-style thresholds: the top of the pointer is never below
    // the 2/3-mark.
    return message.offset().top > viewport.scrollTop() + viewport.height() * 2 / 3;
}

function recenter_view(message) {
    // Barnowl-style recentering: if the pointer is too high, center
    // in the middle of the screen. If the pointer is too low, center
    // on the 1/5-mark.

    // If this logic changes, above_view_threshold andd
    // below_view_threshold must also change.
    if (above_view_threshold(message, true)) {
        // We specifically say useTop=true here, because suppose you're using
        // the arrow keys to arrow up and you've moved up to a huge message.
        // The message is so big that the bottom part of makes it not
        // "above the view threshold". But since we're using the arrow keys
        // to get here, the reason we selected this message is because
        // we want to read it; so here we care about the top part.
        viewport.scrollTop(selected_message.offset().top - viewport.height() / 2);
    } else if (below_view_threshold(message)) {
        viewport.scrollTop(selected_message.offset().top - viewport.height() / 5);
    }
}

function scroll_to_selected() {
    if (selected_message && (selected_message.length !== 0))
        recenter_view(selected_message);
}

function get_huddle_recipient(message, attr) {
    var recipient, i;
    var other_recipients = $.grep(message.display_recipient,
                                  function (element, index) {
                                      return element.email !== email;
                                  });
    if (other_recipients.length === 0) {
        // huddle with oneself
        return message.display_recipient[0][attr];
    }

    recipient = other_recipients[0][attr];
    for (i = 1; i < other_recipients.length; i++) {
        recipient += ', ' + other_recipients[i][attr];
    }
    return recipient;
}

function respond_to_message(reply_type) {
    var message, msg_type;
    message = message_dict[selected_message_id];

    var stream = '';
    var subject = '';
    if (message.type === "stream") {
        stream = message.display_recipient;
        subject = message.subject;
    }

    var huddle_recipient = message.reply_to;
    if (reply_type === "personal" && message.type === "huddle") {
        // reply_to for huddle messages is the whole huddle, so for
        // personals replies we need to set the the huddle recipient
        // to just the sender
        huddle_recipient = message.sender_email;
    }
    msg_type = reply_type;
    if (msg_type === undefined) {
        msg_type = message.type;
    }
    if (msg_type === "huddle") {
        // Huddle messages use the personals compose box
        msg_type = "personal";
    }
    compose.start(msg_type, {'stream': stream, 'subject': subject,
                             'huddle_recipient': huddle_recipient});
}

// Called by mouseover etc.
function select_message_by_id(message_id, opts) {
    opts = $.extend({}, {then_scroll: false, update_server: true}, opts);
    return select_message(rows.get(message_id), opts);
}

var last_message_id_sent = -1;
var message_id_to_send = -1;
// We only send pointer updates every second to avoid hammering the
// server
function send_pointer_update() {
    if (message_id_to_send !== last_message_id_sent) {
        $.post("json/update_pointer", {pointer: message_id_to_send});
        last_message_id_sent = message_id_to_send;
    }
    setTimeout(send_pointer_update, 1000);
}

$(setTimeout(send_pointer_update, 1000));

function update_selected_message(message, opts) {
    opts = $.extend({}, {
        update_server: true,
        for_narrow: narrow.active()
    }, opts);

    var cls = opts.for_narrow ? 'narrowed_selected_message' : 'selected_message';
    $('.' + cls).removeClass(cls);
    message.addClass(cls);

    var new_selected_id = rows.id(message);
    if (opts.update_server && !narrow.active()
        && new_selected_id !== message_id_to_send)
    {
        // Narrowing is a temporary view on top of the home view and
        // doesn't permanently affect where you are.
        //
        // We also don't want to post if there's no effective change.
        message_id_to_send = new_selected_id;
    }
    selected_message_id = new_selected_id;
    selected_message = message;
}

function select_message(next_message, opts) {
    opts = $.extend({}, {then_scroll: false, update_server: true}, opts);

    /* If the message exists but is hidden, try to find the next visible one. */
    if (next_message.is(':hidden')) {
        next_message = rows.next_visible(next_message);
    }

    /* Fall back to the last visible message. */
    if (next_message.length === 0) {
        next_message = rows.last_visible();
        if (next_message.length === 0) {
            // There are no messages!
            return false;
        }
    }

    if (next_message.id !== selected_message_id) {
        update_selected_message(next_message, opts);
    }

    if (opts.then_scroll) {
        recenter_view(next_message);
    }

    return true;
}

function same_recipient(a, b) {
    if ((a === undefined) || (b === undefined))
        return false;
    if (a.type !== b.type)
        return false;

    switch (a.type) {
    case 'huddle':
        return a.recipient_id === b.recipient_id;
    case 'personal':
        return a.reply_to === b.reply_to;
    case 'stream':
        return (a.recipient_id === b.recipient_id) &&
               (a.subject     === b.subject);
    }

    // should never get here
    return false;
}

function same_sender(a, b) {
    return ((a !== undefined) && (b !== undefined) &&
            (a.sender_email === b.sender_email));
}

function clear_table(table_name) {
    rows.get_table(table_name).empty();
    message_groups[table_name] = [];
}

function add_display_time(message, prev) {
    var two_digits = function (x) { return ('0' + x).slice(-2); };
    var time = new XDate(message.timestamp * 1000);
    var include_date = message.include_recipient;

    if (prev !== undefined) {
        var prev_time = new XDate(prev.timestamp * 1000);
        if (time.toDateString() !== prev_time.toDateString()) {
            include_date = true;
        }
    }

    if (include_date) {
        message.timestr = time.toString("MMM dd") + "&nbsp;&nbsp;" +
            time.toString("HH:mm");
    } else {
        message.timestr = time.toString("HH:mm");
    }
    message.full_date_str = time.toLocaleString();
}

function add_to_table(messages, table_name, filter_function, where) {
    if (messages.length === 0)
        return;

    var table = rows.get_table(table_name);
    var messages_to_render = [];
    var ids_where_next_is_same_sender = [];
    var prev;

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

    if (where === 'top') {
        // Assumption: We never get a 'top' update as the first update.

        // 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 = message_groups[table_name][0];
        var top_messages = [];
        $.each(top_group, function (index, id) {
            rows.get(id, table_name).remove();
            top_messages.push(message_dict[id]);
        });
        messages = messages.concat(top_messages);

        // Delete the leftover recipient label.
        table.find('.recipient_row:first').remove();
    } else {
        prev = message_dict[table.find('tr:last-child').attr('zid')];
    }

    $.each(messages, function (index, message) {
        if (! filter_function(message))
            return;

        message.include_recipient = false;
        message.include_bookend   = false;
        if (same_recipient(prev, message)) {
            current_group.push(message.id);
        } else {
            if (current_group.length > 0)
                new_message_groups.push(current_group);
            current_group = [message.id];

            // Add a space to the table, but not for the first element.
            message.include_recipient = true;
            message.include_bookend   = (prev !== undefined);
        }

        message.include_sender = true;
        if (!message.include_recipient &&
            same_sender(prev, message) &&
            (Math.abs(message.timestamp - prev.timestamp) < 60*10)) {
            message.include_sender = false;
            ids_where_next_is_same_sender.push(prev.id);
        }

        add_display_time(message, prev);

        message.dom_id = table_name + message.id;

        messages_to_render.push(message);
        prev = message;
    });

    if (current_group.length > 0)
        new_message_groups.push(current_group);

    if (where === 'top') {
        message_groups[table_name] = new_message_groups.concat(message_groups[table_name]);
    } else {
        message_groups[table_name] = message_groups[table_name].concat(new_message_groups);
    }

    var rendered = templates.message({
        messages: messages_to_render,
        include_layout_row: (table.find('tr:first').length === 0)
    });

    if (where === 'top') {
        table.find('.ztable_layout_row').after(rendered);
    } else {
        table.append(rendered);
    }

    $.each(messages_to_render, function (index, message) {
        var row = rows.get(message.id, table_name);
        register_onclick(row, message.id);

        row.find('.message_content a').each(function (index, link) {
            link = $(link);
            link.attr('target',  '_blank')
                .attr('title',   link.attr('href'))
                .attr('onclick', 'event.cancelBubble = true;'); // would a closure work here?
        });
    });

    $.each(ids_where_next_is_same_sender, function (index, id) {
        rows.get(id, table_name).find('.messagebox').addClass("next_is_same_sender");
    });
}

function add_message_metadata(dummy, message) {
    get_updates_params.last = Math.max(get_updates_params.last, message.id);

    var involved_people;

    switch (message.type) {
    case 'stream':
        message.is_stream = true;
        if (! subject_dict.hasOwnProperty(message.display_recipient)) {
            subject_dict[message.display_recipient] = [];
        }
        if ($.inArray(message.subject, subject_dict[message.display_recipient]) === -1) {
            subject_dict[message.display_recipient].push(message.subject);
            subject_dict[message.display_recipient].sort();
            // We don't need to update the autocomplete after this because
            // the subject box's source is a function
        }
        message.reply_to = message.sender_email;

        involved_people = [{'full_name': message.sender_full_name,
                            'email': message.sender_email}];
        break;

    case 'huddle':
        message.is_huddle = true;
        message.reply_to = get_huddle_recipient(message, 'email');
        message.display_reply_to = get_huddle_recipient(message, 'full_name');

        involved_people = message.display_recipient;
        break;

    case 'personal':
        message.is_personal = true;

        if (message.sender_email === email) { // that is, we sent the original message
            message.reply_to = message.display_recipient.email;
            message.display_reply_to = message.display_recipient.full_name;
        } else {
            message.reply_to = message.sender_email;
            message.display_reply_to = message.sender_full_name;
        }

        involved_people = [message.display_recipient,
                           {'email': message.sender_email,
                            'full_name': message.sender_full_name}];

        break;
    }

    // Add new people involved in this message to the people list
    $.each(involved_people, function (idx, person) {
        // Do the hasOwnProperty() call via the prototype to avoid problems
        // with keys like "hasOwnProperty"
        if (! Object.prototype.hasOwnProperty.call(people_hash, person.email)) {
            people_hash[person.email] = 1;
            people_list.push(person);
            autocomplete_needs_update = true;
        }
    });

    message_dict[message.id] = message;
}

function add_messages(messages, where) {
    if (!messages)
        return;

    if (loading_spinner) {
        loading_spinner.stop();
        $('#loading_indicator').hide();
        loading_spinner = undefined;

        $('#load_more').show();
    }

    messages = $.grep(messages, function (elem, idx) {
        return ! message_dict[elem.id];
    });
    $.each(messages, add_message_metadata);

    if (where === 'top') {
        message_array = messages.concat(message_array);
    } else {
        message_array = message_array.concat(messages);
    }

    if (narrow.active())
        add_to_table(messages, 'zfilt', narrow.predicate(), where);

    // Even when narrowed, add messages to the home view so they exist when we un-narrow.
    add_to_table(messages, 'zhome', function () { return true; }, where);

    // If we received the initially selected message, select it on the client side,
    // but not if the user has already selected another one during load.
    if ((selected_message_id === -1) && (message_dict.hasOwnProperty(initial_pointer))) {
        select_message_by_id(initial_pointer,
                             {then_scroll: true, update_server: false});
    }

    // If we prepended messages, then we need to scroll back to the pointer.
    // This will mess with the user's scrollwheel use; possibly we should be
    // more clever here.  However (for now) we only prepend on page load,
    // so maybe it's okay.
    //
    // We also need to re-select the message by ID, because we might have
    // removed and re-added the row as part of prepend collapsing.
    if ((where === 'top') && (selected_message_id >= 0)) {
        select_message_by_id(selected_message_id,
                             {then_scroll: true, update_server: false});
    }

    if (autocomplete_needs_update)
        update_autocomplete();
}

function do_reload_app() {
    // TODO: We need a better API for showing messages.
    report_message("The application has been updated; reloading!", $("#reloading-application"));
    reloading_app = true;
    window.location.reload(true);
}

function start_reload_app() {
    if (get_updates_params.reload_pending) {
        return;
    }
    get_updates_params.reload_pending = 1;

    // Always reload after 30 minutes
    setTimeout(function () { do_reload_app_preserving_compose(false); },
               1000 * 60 * 30);

    // If the user is composing a message, reload if they become
    // idle while composing.  If they finish composing, the
    // submit code will reload the app.  If they cancel the
    // compose, wait until they're idle again

    // If the user is not composing, reload if the user becomes idle.
    // If they start composing, postpone reloading

    var idle_control;
    var composing_timeout = 1000*60*10;
    var home_timeout = 1000*60;
    var compose_canceled_handler, compose_started_handler;

    compose_canceled_handler = function () {
        idle_control.cancel();
        idle_control = $(document).idle({'idle': home_timeout,
                                         'onIdle': do_reload_app});
        $(document).one('compose_started.zephyr', compose_started_handler);
    };
    compose_started_handler = function () {
        idle_control.cancel();
        idle_control = $(document).idle({'idle': composing_timeout,
                                         'onIdle': do_reload_app_preserving_compose});
        $(document).one('compose_canceled.zephyr', compose_canceled_handler);
    };

    if (compose.composing()) {
        idle_control = $(document).idle({'idle': composing_timeout,
                                         'onIdle': do_reload_app_preserving_compose});
        $(document).one('compose_canceled.zephyr', compose_canceled_handler);
    } else {
        idle_control = $(document).idle({'idle': home_timeout,
                                         'onIdle': do_reload_app});
        $(document).one('compose_started.zephyr', compose_started_handler);
    }
}

function do_reload_app_preserving_compose(send_after_reload) {
    var url = "#reload:send_after_reload=" + Number(send_after_reload);
    if (compose.composing() === 'stream') {
        url += "+msg_type=stream";
        url += "+stream=" + encodeURIComponent(compose.stream_name());
        url += "+subject=" + encodeURIComponent(compose.subject());
    } else {
        url += "+msg_type=huddle";
        url += "+recipient=" + encodeURIComponent(compose.recipient());
    }
    url += "+msg="+ encodeURIComponent(compose.message_content());

    window.location.replace(url);
    do_reload_app();
}

// Check if we're doing a compose-preserving reload.  This must be
// done before the first call to get_updates
$(function () {
    var location = window.location.toString();
    window.location = '#';
    var fragment = location.substring(location.indexOf('#') + 1);
    if (fragment.search("reload:") !== 0) {
        return;
    }

    fragment = fragment.replace(/^reload:/, "");
    var keyvals = fragment.split("+");
    var vars = {};
    $.each(keyvals, function (idx, str) {
        var pair = str.split("=");
        vars[pair[0]] = decodeURIComponent(pair[1]);
    });

    var tab;
    var send_now = parseInt(vars.send_after_reload, 10);

    // TODO: preserve focus
   compose.start(vars.msg_type, {stream: vars.stream,
                                 subject: vars.subject,
                                 huddle_recipient: vars.recipient,
                                 message: vars.msg});
    if (send_now) {
        $("#compose form").ajaxSubmit();
    }
});

var get_updates_xhr;
var get_updates_timeout;
function get_updates() {
    get_updates_params.pointer = selected_message_id;

    get_updates_xhr = $.ajax({
        type:     'POST',
        url:      '/json/get_updates',
        data:     get_updates_params,
        dataType: 'json',
        timeout:  55*1000, // 55 seconds in ms -- needs to be under a
                           // minute to deal with crappy home wireless
                           // routers that kill "inactive" http connections.
        success: function (data) {
            if (! data) {
                // The server occationally returns no data during a
                // restart.  Ignore those responses so the page keeps
                // working
                get_updates_timeout = setTimeout(get_updates, 0);
                return;
            }

            get_updates_params.failures = 0;
            $('#connection-error').hide();

            if (get_updates_params.server_generation === -1) {
                get_updates_params.server_generation = data.server_generation;
            } else if (data.server_generation !== get_updates_params.server_generation) {
                start_reload_app();
            }

            if (data.messages.length !== 0) {
                add_messages(data.messages, "bottom");
            }

            if (data.new_pointer !== undefined
                && data.new_pointer !== selected_message_id)
            {
                select_message_by_id(data.new_pointer,
                                     {then_scroll: true, update_server: false});
            }

            get_updates_timeout = setTimeout(get_updates, 0);
        },
        error: function (xhr, error_type, exn) {
            if (error_type === 'timeout') {
                // Retry indefinitely on timeout.
                get_updates_params.failures = 0;
                $('#connection-error').hide();
            } else {
                get_updates_params.failures += 1;
            }

            if (get_updates_params.failures >= 5) {
                $('#connection-error').show();
            } else {
                $('#connection-error').hide();
            }

            var retry_sec = Math.min(90, Math.exp(get_updates_params.failures/2));
            get_updates_timeout = setTimeout(get_updates, retry_sec*1000);
        }
    });
}

function load_old_messages(start, which, number, cont) {
    $.ajax({
        type:     'POST',
        url:      '/json/get_old_messages',
        data:     {start: start, which: which, number: number},
        dataType: 'json',
        success: function (data) {
            if (! data) {
                // The server occationally returns no data during a
                // restart.  Ignore those responses and try again
                setTimeout(function () {
                    load_old_messages(start, which, number, cont);
                }, 0);
                return;
            }

            $('#connection-error').hide();

            if (data.messages.length !== 0) {
                var where;
                if (which === "older") {
                    where = "top";
                } else {
                    where = "botton";
                }
                add_messages(data.messages, where);
            }

            if (cont !== undefined) {
                cont(data.messages);
            }
        },
        error: function (xhr, error_type, exn) {
            // We might want to be more clever here
            $('#connection-error').show();
            setTimeout(function () {
                load_old_messages(start, which, number, cont);
            }, 5000);
        }
    });
}

// get the initial message list
$(function () {
    function load_more(messages) {
        // catch the user up
        if (messages.length !== 0) {
            var latest_id = messages[messages.length-1].id;
            load_old_messages(latest_id + 1, "newer", 400, load_more);
            return;
        }
        // now start subscribing to updates
        get_updates();

        // backfill more messages after the user is idle
        $(document).idle({'idle': 1000*10,
                          'onIdle': function () {
                              var first_id = message_array[0].id;
                              load_old_messages(first_id - 1, "older", 1000);
                          }});
    }

    load_old_messages(initial_pointer, "around", 400, load_more);
});

function restart_get_updates() {
    if (get_updates_xhr !== undefined)
        get_updates_xhr.abort();

    if (get_updates_timeout !== undefined)
        clearTimeout(get_updates_timeout);

    get_updates();
}

function load_more_messages() {
    load_old_messages(message_array[0].id - 1, "older", 400,
                      function (messages) {
                          if (messages.length === 0) {
                              $('#load_more').hide();
                          }
                      });
}

var watchdog_time = $.now();
setInterval(function() {
    var new_time = $.now();
    if ((new_time - watchdog_time) > 20000) { // 20 seconds.
        // Our app's JS wasn't running (the machine was probably
        // asleep). Now that we're running again, immediately poll for
        // new updates.
        get_updates_params.failures = 0;
        restart_get_updates();
    }
    watchdog_time = new_time;
}, 5000);

function at_top_of_viewport() {
    return (viewport.scrollTop() === 0);
}

function at_bottom_of_viewport() {
    return (viewport.scrollTop() + viewport.height() >= $("#main_div").outerHeight(true));
}

function keep_pointer_in_view() {
    var candidate;
    var next_message = rows.get(selected_message_id);
    if (next_message.length === 0)
        return;

    if (above_view_threshold(next_message) && (!at_top_of_viewport())) {
        while (above_view_threshold(next_message)) {
            candidate = rows.next_visible(next_message);
            if (candidate.length === 0) {
                break;
            } else {
                next_message = candidate;
            }
        }
    } else if (below_view_threshold(next_message) && (!at_bottom_of_viewport())) {
        while (below_view_threshold(next_message)) {
            candidate = rows.prev_visible(next_message);
            if (candidate.length === 0) {
                break;
            } else {
                next_message = candidate;
            }
        }
    }
    update_selected_message(next_message, {update_server: true});
}

// The idea here is when you've scrolled to the very
// bottom of the page, e.g., the scroll handler isn't
// going to fire anymore. But if I continue to use
// the scrollwheel, the selection should advance until
// I'm at the very top or the very bottom of the page.
function move_pointer_at_page_top_and_bottom(delta) {
    if (delta !== 0 && (at_top_of_viewport() || at_bottom_of_viewport())) {
        var next_message = rows.get(selected_message_id);
        if (delta > 0) {
            // Scrolling up (want older messages)
            next_message = rows.prev_visible(next_message);
        } else {
            // We're scrolling down (we want more recent messages)
            next_message = rows.next_visible(next_message);
        }
        if (next_message.length !== 0) {
            update_selected_message(next_message);
        }
    }
}