var popovers = (function () { var exports = {}; var current_actions_popover_elem; var current_message_info_popover_elem; var emoji_map_is_open = false; var userlist_placement = "right"; function show_message_info_popover(element, id) { var last_popover_elem = current_message_info_popover_elem; popovers.hide_all(); if (last_popover_elem !== undefined && last_popover_elem.get()[0] === element) { // We want it to be the case that a user can dismiss a popover // by clicking on the same element that caused the popover. return; } current_msg_list.select_id(id); var elt = $(element); if (elt.data('popover') === undefined) { timerender.set_full_datetime(current_msg_list.get(id), elt.closest(".message_row").find(".message_time")); var message = current_msg_list.get(id); var args = { message: message, pm_with_uri: narrow.pm_with_uri(message.sender_email), sent_by_uri: narrow.by_sender_uri(message.sender_email), narrowed: narrow.active() }; var ypos = elt.offset().top - viewport.scrollTop(); elt.popover({ placement: (ypos > (viewport.height() - 300)) ? 'top' : 'bottom', title: templates.render('message_info_popover_title', args), content: templates.render('message_info_popover_content', args), trigger: "manual" }); elt.popover("show"); current_message_info_popover_elem = elt; } } exports.toggle_actions_popover = function (element, id) { var last_popover_elem = current_actions_popover_elem; popovers.hide_all(); if (last_popover_elem !== undefined && last_popover_elem.get()[0] === element) { // We want it to be the case that a user can dismiss a popover // by clicking on the same element that caused the popover. return; } current_msg_list.select_id(id); var elt = $(element); if (elt.data('popover') === undefined) { var message = current_msg_list.get(id); var can_edit = message.sent_by_me && message.local_id === undefined && page_params.realm_allow_message_editing; var can_mute_topic = message.stream && message.subject && !muting.is_topic_muted(message.stream, message.subject); var can_unmute_topic = message.stream && message.subject && muting.is_topic_muted(message.stream, message.subject); var args = { message: message, can_edit_message: can_edit, can_mute_topic: can_mute_topic, can_unmute_topic: can_unmute_topic, conversation_time_uri: narrow.by_conversation_and_time_uri(message), narrowed: narrow.active() }; var ypos = elt.offset().top - viewport.scrollTop(); elt.popover({ placement: (ypos > (viewport.height() - 300)) ? 'top' : 'bottom', title: "", content: templates.render('actions_popover_content', args), trigger: "manual" }); elt.popover("show"); current_actions_popover_elem = elt; } }; function get_action_menu_menu_items() { return $('li:not(.divider):visible a', current_actions_popover_elem.data('popover').$tip); } function focus_first_action_popover_item() { // For now I recommend only calling this when the user opens the menu with a hotkey. // Our popup menus act kind of funny when you mix keyboard and mouse. var items = get_action_menu_menu_items(); items.eq(0).expectOne().focus(); } exports.open_message_menu = function () { var id = current_msg_list.selected_id(); popovers.toggle_actions_popover($(".selected_message .actions_hover")[0], id); if (current_actions_popover_elem) { focus_first_action_popover_item(); } return true; }; exports.actions_menu_handle_keyboard = function (key) { var items = get_action_menu_menu_items(); var index = items.index(items.filter(':focus')); if (key === "enter" && index >= 0 && index < items.length) { return items.eq(index).trigger('click'); } if (index === -1) { index = 0; } else if ((key === 'down_arrow' || key === 'vim_down') && index < items.length - 1) { ++index; } else if ((key === 'up_arrow' || key === 'vim_up') && index > 0) { --index; } items.eq(index).focus(); }; exports.actions_popped = function () { return current_actions_popover_elem !== undefined; }; exports.hide_actions_popover = function () { if (popovers.actions_popped()) { current_actions_popover_elem.popover("destroy"); current_actions_popover_elem = undefined; } }; exports.topic_ops = { mute: function (stream, topic) { popovers.hide_topic_sidebar_popover(); muting.mute_topic(stream, topic); muting_ui.persist_and_rerender(); muting_ui.notify_with_undo_option(stream, topic); }, // we don't run a unmute_notif function because it isn't an issue as much // if someone accidentally unmutes a stream rather than if they mute it // and miss out on info. unmute: function (stream, topic) { popovers.hide_topic_sidebar_popover(); muting.unmute_topic(stream, topic); muting_ui.persist_and_rerender(); } }; function message_info_popped() { return current_message_info_popover_elem !== undefined; } exports.hide_message_info_popover = function () { if (message_info_popped()) { current_message_info_popover_elem.popover("destroy"); current_message_info_popover_elem = undefined; } }; exports.hide_userlist_sidebar = function () { $(".app-main .column-right").removeClass("expanded"); }; exports.hide_streamlist_sidebar = function () { $(".app-main .column-left").removeClass("expanded"); }; exports.hide_pm_list_sidebar = function () { $(".app-main .column-left").removeClass("expanded"); }; exports.show_userlist_sidebar = function () { $(".app-main .column-right").addClass("expanded"); resize.resize_page_components(); }; exports.show_streamlist_sidebar = function () { $(".app-main .column-left").addClass("expanded"); resize.resize_page_components(); }; exports.show_pm_list_sidebar = function () { $(".app-main .column-left").addClass("expanded"); resize.resize_page_components(); }; var current_stream_sidebar_elem; var current_topic_sidebar_elem; var current_user_sidebar_email; var current_user_sidebar_popover; function user_sidebar_popped() { return current_user_sidebar_popover !== undefined; } function stream_sidebar_popped() { return current_stream_sidebar_elem !== undefined; } function topic_sidebar_popped() { return current_topic_sidebar_elem !== undefined; } exports.hide_emoji_map_popover = function () { if (emoji_map_is_open) { $('.emoji_popover').css('display', 'none'); $('.drag').css('display', 'none'); emoji_map_is_open = false; } }; exports.hide_stream_sidebar_popover = function () { if (stream_sidebar_popped()) { $(current_stream_sidebar_elem).popover("destroy"); current_stream_sidebar_elem = undefined; } }; exports.hide_topic_sidebar_popover = function () { if (topic_sidebar_popped()) { $(current_topic_sidebar_elem).popover("destroy"); current_topic_sidebar_elem = undefined; } }; exports.hide_user_sidebar_popover = function () { if (user_sidebar_popped()) { // this hide_* method looks different from all the others since // the presence list may be redrawn. Due to funkiness with jquery's .data() // this would confuse $.popover("destroy"), which looks at the .data() attached // to a certain element. We thus save off the .data("popover") in the show_user_sidebar_popover // and inject it here before calling destroy. $('#user_presences').data("popover", current_user_sidebar_popover); $('#user_presences').popover("destroy"); current_user_sidebar_email = undefined; current_user_sidebar_popover = undefined; } }; function render_emoji_popover() { var content = templates.render('emoji_popover_content', { emoji_list: emoji.emojis_name_to_css_class }); $('.emoji_popover').append(content); $('.drag').show(); $('.emoji_popover').css('display', 'inline-block'); $("#new_message_content").focus(); emoji_map_is_open = true; } exports.register_click_handlers = function () { $("#main_div").on("click", ".actions_hover", function (e) { var row = $(this).closest(".message_row"); e.stopPropagation(); popovers.toggle_actions_popover(this, rows.id(row)); }); $("#main_div").on("click", ".sender_info_hover", function (e) { var row = $(this).closest(".message_row"); e.stopPropagation(); show_message_info_popover(this, rows.id(row)); }); var isDragging=false; var top_border = $('#floating_recipient_bar').position().top + $('#floating_recipient_bar').height(); var total_height; var emoji_popover_height; var emoji_popover_elem; var previous_mouse_position; var compose_box_padding; var emoji_height = 25; $("body").on("mouseover", ".emoji_popover", function (e) { total_height = $('body > .app').outerHeight() - top_border - 70; if (total_height <= 300) { // don't allow dragging if the viewport is small enough that it // would obscure everything to drag the emojis $('.drag').hide(); } else { $('.drag').show(); } }); $("body").on("mousedown", ".drag", function (e) { // leave a little extra padding for the message box so that it doesn't get too big total_height = $('body > .app').outerHeight() - top_border - 70; isDragging = true; previous_mouse_position = e.pageY; emoji_popover_elem = $(".emoji_popover"); emoji_popover_height = emoji_popover_elem.height(); compose_box_padding = $('#compose').height() - emoji_popover_height; }); $("body").on("mousemove", function (e) { e.preventDefault(); if (isDragging) { var new_height = emoji_popover_height + (previous_mouse_position - e.pageY); if (new_height + compose_box_padding > total_height) { emoji_popover_elem.height(total_height - compose_box_padding); } else if (new_height < emoji_height) { emoji_popover_elem.height(emoji_height); } else { emoji_popover_elem.height(new_height); } } }); $("body").on("mouseup", function (e) { isDragging = false; emoji_popover_height = null; }); $("body").on("click", ".emoji_popover", function (e) { e.stopPropagation(); }); $(".emoji_popover").on("click", ".emoji", function (e) { var emoji_choice = $(e.target).attr("title"); var textarea = $("#new_message_content"); textarea.val(textarea.val() + " " + emoji_choice); textarea.focus(); e.stopPropagation(); }); $("#compose").on("click", "#emoji_map", function (e) { e.preventDefault(); e.stopPropagation(); if (emoji_map_is_open) { // If the popover is already shown, clicking again should toggle it. popovers.hide_emoji_map_popover(); return; } popovers.hide_all(); render_emoji_popover(); }); $('body').on('click', '.user_popover .narrow_to_private_messages', function (e) { var email = $(e.target).parents('ul').attr('data-email'); popovers.hide_user_sidebar_popover(); narrow.by('pm-with', email, {select_first_unread: true, trigger: 'user sidebar popover'}); e.stopPropagation(); }); $('body').on('click', '.user_popover .narrow_to_messages_sent', function (e) { var email = $(e.target).parents('ul').attr('data-email'); popovers.hide_user_sidebar_popover(); narrow.by('sender', email, {select_first_unread: true, trigger: 'user sidebar popover'}); e.stopPropagation(); }); $('body').on('click', '.user_popover .compose_private_message', function (e) { var email = $(e.target).parents('ul').attr('data-email'); popovers.hide_user_sidebar_popover(); compose.start('private', {"private_message_recipient": email, trigger: 'sidebar user actions'}); e.stopPropagation(); }); $('body').on('click', '.sender_info_popover .narrow_to_private_messages', function (e) { var email = $(e.target).parents('ul').attr('data-email'); narrow.by('pm-with', email, {select_first_unread: true, trigger: 'user sidebar popover'}); popovers.hide_message_info_popover(); e.stopPropagation(); e.preventDefault(); }); $('body').on('click', '.sender_info_popover .narrow_to_messages_sent', function (e) { var email = $(e.target).parents('ul').attr('data-email'); narrow.by('sender', email, {select_first_unread: true, trigger: 'user sidebar popover'}); popovers.hide_message_info_popover(); e.stopPropagation(); e.preventDefault(); }); $('#user_presences').on('click', 'span.arrow', function (e) { e.stopPropagation(); // use email of currently selected user, rather than some elem comparison, // as the presence list may be redrawn with new elements. var target = $(this).closest('li'); var email = target.find('a').attr('data-email'); var name = target.find('a').attr('data-name'); if (current_user_sidebar_email === email) { // If the popover is already shown, clicking again should toggle it. popovers.hide_all(); return; } popovers.hide_all(); if (userlist_placement === "right") { popovers.show_userlist_sidebar(); } var template_vars = {email: email, name: name}; var content = templates.render('user_sidebar_actions', template_vars); target.popover({ content: content, placement: userlist_placement === "left" ? "right" : "left", trigger: "manual", fixed: true }); target.popover("show"); current_user_sidebar_email = email; current_user_sidebar_popover = target.data('popover'); }); $('#stream_filters').on('click', '.topic-sidebar-arrow', function (e) { var elt = e.target; if (topic_sidebar_popped() && current_topic_sidebar_elem === elt) { // If the popover is already shown, clicking again should toggle it. popovers.hide_topic_sidebar_popover(); e.stopPropagation(); return; } popovers.hide_all(); popovers.show_streamlist_sidebar(); var stream_name = $(elt).closest('.expanded_subjects').expectOne().attr('data-stream'); var topic_name = $(elt).closest('li').expectOne().attr('data-name'); var is_muted = muting.is_topic_muted(stream_name, topic_name); var can_mute_topic = !is_muted; var can_unmute_topic = is_muted; var content = templates.render('topic_sidebar_actions', { 'stream_name': stream_name, 'topic_name': topic_name, 'can_mute_topic': can_mute_topic, 'can_unmute_topic': can_unmute_topic }); $(elt).popover({ content: content, trigger: "manual", fixed: true }); $(elt).popover("show"); current_topic_sidebar_elem = elt; e.stopPropagation(); }); $('body').on('click', '.narrow_to_topic', function (e) { popovers.hide_topic_sidebar_popover(); var row = $(e.currentTarget).closest('.narrow_to_topic').expectOne(); var stream_name = row.attr('data-stream-name'); var topic_name = row.attr('data-topic-name'); var operators = [ {operator: 'stream', operand: stream_name}, {operator: 'topic', operand: topic_name} ]; var opts = {select_first_unread: true, trigger: 'sidebar'}; narrow.activate(operators, opts); e.stopPropagation(); }); $('body').on('click', '.sidebar-popover-mute-topic', function (e) { var stream = $(e.currentTarget).attr('data-stream-name'); var topic = $(e.currentTarget).attr('data-topic-name'); exports.topic_ops.mute(stream, topic); e.stopPropagation(); e.preventDefault(); }); $('body').on('click', '.sidebar-popover-unmute-topic', function (e) { var stream = $(e.currentTarget).attr('data-stream-name'); var topic = $(e.currentTarget).attr('data-topic-name'); exports.topic_ops.unmute(stream, topic); e.stopPropagation(); e.preventDefault(); }); $('body').on('click', '.sidebar-popover-mark-topic-read', function (e) { var topic = $(e.currentTarget).attr('data-topic-name'); var stream = $(e.currentTarget).attr('data-stream-name'); popovers.hide_topic_sidebar_popover(); unread.mark_topic_as_read(stream,topic); e.stopPropagation(); }); $('#stream_filters').on('click', '.stream-sidebar-arrow', function (e) { var elt = e.target; if (stream_sidebar_popped() && current_stream_sidebar_elem === elt) { // If the popover is already shown, clicking again should toggle it. popovers.hide_stream_sidebar_popover(); e.stopPropagation(); return; } popovers.hide_all(); popovers.show_streamlist_sidebar(); var stream = $(elt).parents('li').attr('data-name'); var ypos = $(elt).offset().top - viewport.scrollTop(); $(elt).popover({ content: templates.render('stream_sidebar_actions', {'stream': stream_data.get_sub(stream)}), trigger: "manual", fixed: true }); // This little function is a workaround for the fact that // Bootstrap popovers don't properly handle being resized -- // so after resizing our popover to add in the spectrum color // picker, we need to adjust its height accordingly. function update_spectrum(popover, update_func) { var initial_height = popover[0].offsetHeight; var colorpicker = popover.find('.colorpicker-container').find('.colorpicker'); update_func(colorpicker); var after_height = popover[0].offsetHeight; var popover_root = popover.closest(".popover"); var current_top_px = parseFloat(popover_root.css('top').replace('px', '')); var height_delta = - (after_height - initial_height) * 0.5; popover_root.css('top', (current_top_px + height_delta) + "px"); } $(elt).popover("show"); var data_id = stream_data.get_sub(stream).stream_id; var popover = $('.streams_popover[data-id=' + data_id + ']'); update_spectrum(popover, function (colorpicker) { colorpicker.spectrum(stream_color.sidebar_popover_colorpicker_options); }); $('.streams_popover').on('click', '.custom_color', function (e) { update_spectrum($(e.target).closest('.streams_popover'), function (colorpicker) { colorpicker.spectrum("destroy"); colorpicker.spectrum(stream_color.sidebar_popover_colorpicker_options_full); // In theory this should clean up the old color picker, // but this seems a bit flaky -- the new colorpicker // doesn't fire until you click a button, but the buttons // have been hidden. We work around this by just manually // fixing it up here. colorpicker.parent().find('.sp-container').removeClass('sp-buttons-disabled'); $(e.target).hide(); }); $('.streams_popover').on('click', 'a.sp-cancel', function (e) { popovers.hide_stream_sidebar_popover(); }); }); current_stream_sidebar_elem = elt; e.stopPropagation(); }); $('body').on('click', '.respond_button', function (e) { compose.respond_to_message({trigger: 'popover respond'}); popovers.hide_actions_popover(); e.stopPropagation(); e.preventDefault(); }); $('body').on('click', '.respond_personal_button', function (e) { compose.respond_to_message({reply_type: 'personal', trigger: 'popover respond pm'}); popovers.hide_all(); e.stopPropagation(); e.preventDefault(); }); $('body').on('click', '.popover_narrow_by_id', function (e) { var msgid = $(e.currentTarget).data('msgid'); popovers.hide_actions_popover(); narrow.by_id(msgid, {trigger: 'popover'}); e.stopPropagation(); e.preventDefault(); }); $('body').on('click', '.popover_narrow_by_conversation_and_time', function (e) { var msgid = $(e.currentTarget).data('msgid'); popovers.hide_actions_popover(); narrow.by_conversation_and_time(msgid, {trigger: 'popover'}); e.stopPropagation(); e.preventDefault(); }); $('body').on('click', '.popover_toggle_collapse', function (e) { var msgid = $(e.currentTarget).data('msgid'); var row = current_msg_list.get_row(msgid); var message = current_msg_list.get(rows.id(row)); popovers.hide_actions_popover(); if (row) { if (message.collapsed) { condense.uncollapse(row); } else { condense.collapse(row); } } e.stopPropagation(); e.preventDefault(); }); $('body').on('click', '.popover_edit_message', function (e) { var msgid = $(e.currentTarget).data('msgid'); var row = current_msg_list.get_row(msgid); popovers.hide_actions_popover(); message_edit.start(row); e.stopPropagation(); e.preventDefault(); }); $('body').on('click', '.popover_mute_topic', function (e) { var stream = $(e.currentTarget).data('msg-stream'); var topic = $(e.currentTarget).data('msg-topic'); exports.topic_ops.mute(stream, topic); e.stopPropagation(); e.preventDefault(); }); $('body').on('click', '.popover_unmute_topic', function (e) { var stream = $(e.currentTarget).data('msg-stream'); var topic = $(e.currentTarget).data('msg-topic'); popovers.hide_actions_popover(); muting.unmute_topic(stream, topic); muting_ui.persist_and_rerender(); e.stopPropagation(); e.preventDefault(); }); $('body').on('click', '.toggle_home', function (e) { var stream = $(e.currentTarget).parents('ul').attr('data-name'); popovers.hide_stream_sidebar_popover(); subs.toggle_home(stream); e.stopPropagation(); }); $('body').on('click', '.narrow_to_stream', function (e) { var stream = $(e.currentTarget).parents('ul').attr('data-name'); popovers.hide_stream_sidebar_popover(); narrow.by('stream', stream, {select_first_unread: true, trigger: 'sidebar popover'}); e.stopPropagation(); }); $('body').on('click', '.compose_to_stream', function (e) { var stream = $(e.currentTarget).parents('ul').attr('data-name'); popovers.hide_stream_sidebar_popover(); compose.start('stream', {"stream": stream, trigger: 'sidebar stream actions'}); e.stopPropagation(); }); $('body').on('click', '.mark_stream_as_read', function (e) { var stream = $(e.currentTarget).parents('ul').attr('data-name'); popovers.hide_stream_sidebar_popover(); unread.mark_stream_as_read(stream); e.stopPropagation(); }); $('body').on('click', '.pin_to_top', function (e) { var stream = $(e.currentTarget).parents('ul').attr('data-name'); popovers.hide_stream_sidebar_popover(); subs.toggle_pin_to_top_stream(stream); e.stopPropagation(); }); $('body').on('click', '.open_stream_settings', function (e) { var stream = $(e.currentTarget).parents('ul').attr('data-name'); popovers.hide_stream_sidebar_popover(); if (! $('#subscriptions').hasClass('active')) { // Go to streams page and once it loads, expand the relevant // stream's settings. $(document).one('subs_page_loaded.zulip', function (event) { subs.show_settings_for(stream); }); ui.change_tab_to('#subscriptions'); } else { // Already on streams page, so just expand the relevant stream. subs.show_settings_for(stream); } }); }; exports.any_active = function () { // True if any popover (that this module manages) is currently shown. return popovers.actions_popped() || user_sidebar_popped() || stream_sidebar_popped() || topic_sidebar_popped() || message_info_popped() || emoji_map_is_open; }; exports.hide_all = function () { popovers.hide_actions_popover(); popovers.hide_message_info_popover(); popovers.hide_stream_sidebar_popover(); popovers.hide_topic_sidebar_popover(); popovers.hide_user_sidebar_popover(); popovers.hide_userlist_sidebar(); popovers.hide_streamlist_sidebar(); popovers.hide_emoji_map_popover(); }; exports.set_userlist_placement = function (placement) { userlist_placement = placement || "right"; }; return exports; }());