Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Refactor popovers into their own file 

(imported from commit 36ad3c61e4d7eb05751f9b886d15edceab656d71)
This commit is contained in:
Scott Feeney 2013-06-28 16:38:40 -04:00
parent cfe9e268f4
commit c42bf9b9b2
5 changed files with 326 additions and 287 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
humbug/settings.py
View File

@ -358,6 +358,7 @@ PIPELINE_JS = {
'js/subs.js',
'js/message_edit.js',
'js/ui.js',
'js/popovers.js',
'js/typeahead_helper.js',
'js/search.js',
'js/composebox_typeahead.js',

2
tools/jslint/check-all.js
View File

@ -21,7 +21,7 @@ var globals =
+ ' compose rows hotkeys narrow reload notifications_bar search subs'
+ ' composebox_typeahead typeahead_helper notifications hashchange'
+ ' invite ui util activity timerender MessageList blueslip unread stream_list'
+ ' onboarding message_edit tab_bar emoji'
+ ' onboarding message_edit tab_bar emoji popovers'
// colorspace.js
+ ' colorspace'

4
zephyr/static/js/hotkey.js
View File

@ -237,8 +237,8 @@ function process_hotkey(e) {
}
return true;
case 'escape': // Esc: close actions popup, cancel compose, clear a find, or un-narrow
if (ui.actions_currently_popped()) {
ui.hide_actions_popover();
if (popovers.any_active()) {
popovers.hide_all();
} else if (compose.composing()) {
compose.cancel();
} else {

313
zephyr/static/js/popovers.js Normal file
View File

@ -0,0 +1,313 @@
var popovers = (function () {
var exports = {};
var current_actions_popover_elem;
function show_actions_popover(element, id) {
var last_popover_elem = current_actions_popover_elem;
popovers.hide_actions_popover();
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 can_edit = message.sent_by_me;
var args = {
message: message,
can_edit_message: can_edit,
narrowed: narrow.active()
};
var ypos = elt.offset().top - viewport.scrollTop();
elt.popover({
placement: (ypos > (viewport.height() - 300)) ? 'top' : 'bottom',
title: templates.render('actions_popover_title', args),
content: templates.render('actions_popover_content', args),
trigger: "manual"
});
elt.popover("show");
current_actions_popover_elem = elt;
}
}
function actions_popped() {
return current_actions_popover_elem !== undefined;
}
exports.hide_actions_popover = function () {
if (actions_popped()) {
current_actions_popover_elem.popover("destroy");
current_actions_popover_elem = undefined;
}
};
var current_stream_sidebar_elem;
var current_user_sidebar_elem;
var stream_sidebar_popup_shown_this_click = false;
var user_sidebar_popup_shown_this_click = false;
function user_sidebar_popped() {
return current_user_sidebar_elem !== undefined;
}
function stream_sidebar_popped() {
return current_stream_sidebar_elem !== undefined;
}
exports.hide_stream_sidebar_popover = function () {
if (stream_sidebar_popped()) {
$(current_stream_sidebar_elem).popover("destroy");
current_stream_sidebar_elem = undefined;
}
};
exports.hide_user_sidebar_popover = function () {
if (user_sidebar_popped()) {
current_user_sidebar_elem.popover("destroy");
current_user_sidebar_elem = undefined;
}
};
exports.show_user_sidebar_popover = function () {
// TODO: implement & use
};
exports.register_click_handlers = function () {
$("#main_div").on("click", ".actions_hover", function (e) {
var row = $(this).closest(".message_row");
e.stopPropagation();
show_actions_popover(this, rows.id(row));
});
$('body').on('click', '.user_sidebar_entry', function (e) {
var last_sidebar_elem = current_user_sidebar_elem;
popovers.hide_user_sidebar_popover();
user_sidebar_popup_shown_this_click = true;
var email = $(e.target).find('a').attr('data-email');
var name = $(e.target).find('a').attr('data-name');
$(e.target).popover({
content: templates.render('user_sidebar_actions', {'email': email,
'name': name}),
placement: "left",
trigger: "manual",
fixed: true
});
$(e.target).popover("show");
current_user_sidebar_elem = $(e.target);
e.preventDefault();
});
$('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();
});
$('#stream_filters').on('click', 'span.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();
return;
}
var last_sidebar_elem = current_stream_sidebar_elem;
popovers.hide_stream_sidebar_popover();
stream_sidebar_popup_shown_this_click = true;
var stream = $(elt).parents('li').attr('data-name');
var ypos = $(elt).offset().top - viewport.scrollTop();
$(elt).popover({
content: templates.render('stream_sidebar_actions', {'stream': subs.get(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 popover = $('.streams_popover[data-id=' + subs.get(stream).id + ']');
update_spectrum(popover, function (colorpicker) {
colorpicker.spectrum(subs.sidebar_popover_colorpicker_options);
});
$('.streams_popover').on('click', '.custom_color', function (e) {
update_spectrum($(elt).closest('.streams_popover'), function (colorpicker) {
colorpicker.spectrum("destroy");
colorpicker.spectrum(subs.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');
$(elt).hide();
});
$('.streams_popover').on('click', 'a.sp-cancel', function (e) {
popovers.hide_stream_sidebar_popover();
});
});
current_stream_sidebar_elem = elt;
e.preventDefault();
});
$('body').on('click', '.respond_button', function (e) {
respond_to_message({trigger: 'popover respond'});
popovers.hide_actions_popover();
e.stopPropagation();
});
$('body').on('click', '.respond_personal_button', function (e) {
respond_to_message({reply_type: 'personal', trigger: 'popover respond pm'});
popovers.hide_actions_popover();
e.stopPropagation();
});
$('body').on('click', '.popover_narrow_by_subject_button', function (e) {
var msgid = $(e.currentTarget).data('msgid');
popovers.hide_actions_popover();
narrow.by_subject(msgid, {trigger: 'popover'});
e.stopPropagation();
});
$('body').on('click', '.popover_narrow_by_recipient_button', function (e) {
var msgid = $(e.currentTarget).data('msgid');
popovers.hide_actions_popover();
narrow.by_recipient(msgid, {trigger: 'popover'});
e.stopPropagation();
});
$('body').on('click', '.popover_narrow_by_time_travel_button', function (e) {
var msgid = $(e.currentTarget).data('msgid');
popovers.hide_actions_popover();
narrow.by_time_travel(msgid, {trigger: 'popover'});
e.stopPropagation();
});
$('body').on('click', '.popover_toggle_collapse', function (e) {
var msgid = $(e.currentTarget).data('msgid');
var row = rows.get(msgid, current_msg_list.table_name);
var message = current_msg_list.get(rows.id(row));
popovers.hide_actions_popover();
if (message.collapsed) {
ui.uncollapse(row);
} else {
ui.collapse(row);
}
e.stopPropagation();
});
$('body').on('click', '.popover_edit_message', function (e) {
var msgid = $(e.currentTarget).data('msgid');
var row = rows.get(msgid, current_msg_list.table_name);
popovers.hide_actions_popover();
message_edit.start(row);
e.stopPropagation();
});
$('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', '.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.zephyr', 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 actions_popped() || user_sidebar_popped() || stream_sidebar_popped();
};
exports.hide_all = function () {
popovers.hide_actions_popover();
if (stream_sidebar_popup_shown_this_click === false ) {
popovers.hide_stream_sidebar_popover();
}
if (user_sidebar_popup_shown_this_click === false ) {
popovers.hide_user_sidebar_popover();
}
stream_sidebar_popup_shown_this_click = false;
user_sidebar_popup_shown_this_click = false;
};
return exports;
}());

293
zephyr/static/js/ui.js
View File

@ -478,43 +478,6 @@ function hack_for_floating_recipient_bar() {
floating_recipient.offset(offset);
}
var current_actions_popover_elem;
function show_actions_popover(element, id) {
var last_popover_elem = current_actions_popover_elem;
ui.hide_actions_popover();
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 can_edit = message.sent_by_me;
var args = {
message: message,
can_edit_message: can_edit,
narrowed: narrow.active()
};
var ypos = elt.offset().top - viewport.scrollTop();
elt.popover({
placement: (ypos > (viewport.height() - 300)) ? 'top' : 'bottom',
title: templates.render('actions_popover_title', args),
content: templates.render('actions_popover_content', args),
trigger: "manual"
});
elt.popover("show");
current_actions_popover_elem = elt;
}
}
function update_message_flag(message, flag_name, set_flag) {
$.ajax({
type: 'POST',
@ -565,17 +528,6 @@ function toggle_star(row_id) {
change_message_star(message, message.starred);
}
exports.hide_actions_popover = function () {
if (ui.actions_currently_popped()) {
current_actions_popover_elem.popover("destroy");
current_actions_popover_elem = undefined;
}
};
exports.actions_currently_popped = function () {
return current_actions_popover_elem !== undefined;
};
function update_gravatars() {
$.each($(".gravatar-profile"), function (index, profile) {
// Avatar URLs will have at least one param, so & is safe here.
@ -673,7 +625,7 @@ function uncondense(row) {
show_condense_link(row);
}
function uncollapse(row) {
exports.uncollapse = function (row) {
// Uncollapse a message, restoring the condensed message [More] or
// [Condense] link if necessary.
var message = current_msg_list.get(rows.id(row));
@ -697,9 +649,9 @@ function uncollapse(row) {
// This was a short message, no more need for a [More] link.
row.find(".message_expander").hide();
}
}
};
function collapse(row) {
exports.collapse = function (row) {
// Collapse a message, hiding the condensed message [More] or
// [Condense] link if necessary.
var message = current_msg_list.get(rows.id(row));
@ -707,33 +659,6 @@ function collapse(row) {
change_message_collapse(message, true);
row.find(".message_content").addClass("collapsed");
show_more_link(row);
}
var current_stream_sidebar_elem;
var current_user_sidebar_elem;
var stream_sidebar_popup_shown_this_click = false;
var user_sidebar_popup_shown_this_click = false;
exports.hide_stream_sidebar_popover = function () {
if (ui.stream_sidebar_currently_popped()) {
current_stream_sidebar_elem.popover("destroy");
current_stream_sidebar_elem = undefined;
}
};
exports.hide_user_sidebar_popover = function () {
if (ui.user_sidebar_currently_popped()) {
current_user_sidebar_elem.popover("destroy");
current_user_sidebar_elem = undefined;
}
};
exports.user_sidebar_currently_popped = function () {
return current_user_sidebar_elem !== undefined;
};
exports.stream_sidebar_currently_popped = function () {
return current_stream_sidebar_elem !== undefined;
};
$(function () {
@ -1093,12 +1018,6 @@ $(function () {
row.removeClass("actions_hovered");
});
$("#main_div").on("click", ".actions_hover", function (e) {
var row = $(this).closest(".message_row");
e.stopPropagation();
show_actions_popover(this, rows.id(row));
});
$("#main_div").on("click", ".star", function (e) {
e.stopPropagation();
toggle_star(rows.id($(this).closest(".message_row")));
@ -1112,7 +1031,7 @@ $(function () {
var content = row.find(".message_content");
if (message.collapsed) {
// Uncollapse.
uncollapse(row);
ui.uncollapse(row);
} else if (content.hasClass("could-be-condensed")) {
// Uncondense (show the full long message).
message.condensed = false;
@ -1259,106 +1178,7 @@ $(function () {
e.preventDefault();
});
$('body').on('click', '.user_sidebar_entry', function (e) {
var last_sidebar_elem = current_user_sidebar_elem;
ui.hide_user_sidebar_popover();
user_sidebar_popup_shown_this_click = true;
var email = $(e.target).find('a').attr('data-email');
var name = $(e.target).find('a').attr('data-name');
$(e.target).popover({
content: templates.render('user_sidebar_actions', {'email': email,
'name': name}),
placement: "left",
trigger: "manual",
fixed: true
});
$(e.target).popover("show");
current_user_sidebar_elem = $(e.target);
e.preventDefault();
});
$('body').on('click', '.user_popover .narrow_to_private_messages', function (e) {
var email = $(e.target).parents('ul').attr('data-email');
ui.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');
ui.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');
ui.hide_user_sidebar_popover();
compose.start('private', {"private_message_recipient": email, trigger: 'sidebar user actions'});
e.stopPropagation();
});
$('#stream_filters').on('click', 'span.arrow', function (e) {
var last_sidebar_elem = current_stream_sidebar_elem;
ui.hide_stream_sidebar_popover();
stream_sidebar_popup_shown_this_click = true;
var stream = $(e.target).parents('li').attr('data-name');
var ypos = $(e.target).offset().top - viewport.scrollTop();
$(e.target).popover({
content: templates.render('stream_sidebar_actions', {'stream': subs.get(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");
}
$(e.target).popover("show");
var popover = $('.streams_popover[data-id=' + subs.get(stream).id + ']');
update_spectrum(popover, function (colorpicker) {
colorpicker.spectrum(subs.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(subs.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) {
ui.hide_stream_sidebar_popover();
});
});
current_stream_sidebar_elem = $(e.target);
e.preventDefault();
});
popovers.register_click_handlers();
$('#stream_filters').on('click', '.expanded_subject a', function (e) {
if (exports.home_tab_obscured()) {
@ -1432,62 +1252,12 @@ $(function () {
ui.wait_for_gravatar();
});
$('body').on('click', '.respond_button', function (e) {
respond_to_message({trigger: 'popover respond'});
ui.hide_actions_popover();
e.stopPropagation();
});
$('body').on('click', '.respond_personal_button', function (e) {
respond_to_message({reply_type: 'personal', trigger: 'popover respond pm'});
ui.hide_actions_popover();
e.stopPropagation();
});
$('body').on('click', '.popover_narrow_by_subject_button', function (e) {
var msgid = $(e.currentTarget).data('msgid');
ui.hide_actions_popover();
narrow.by_subject(msgid, {trigger: 'popover'});
e.stopPropagation();
});
$('body').on('click', '.popover_narrow_by_recipient_button', function (e) {
var msgid = $(e.currentTarget).data('msgid');
ui.hide_actions_popover();
narrow.by_recipient(msgid, {trigger: 'popover'});
e.stopPropagation();
});
$('body').on('click', '.popover_narrow_by_time_travel_button', function (e) {
var msgid = $(e.currentTarget).data('msgid');
ui.hide_actions_popover();
narrow.by_time_travel(msgid, {trigger: 'popover'});
e.stopPropagation();
});
$('body').on('click', '.popover_toggle_collapse', function (e) {
var msgid = $(e.currentTarget).data('msgid');
var row = rows.get(msgid, current_msg_list.table_name);
var message = current_msg_list.get(rows.id(row));
ui.hide_actions_popover();
if (message.collapsed) {
uncollapse(row);
} else {
collapse(row);
}
e.stopPropagation();
});
$('body').on('click', '.edit_subject', function (e) {
var row = rows.get(rows.id($(this).closest(".recipient_row")),
current_msg_list.table_name);
message_edit.start(row);
e.stopPropagation();
});
$('body').on('click', '.popover_edit_message', function (e) {
var msgid = $(e.currentTarget).data('msgid');
var row = rows.get(msgid, current_msg_list.table_name);
ui.hide_actions_popover();
message_edit.start(row);
e.stopPropagation();
});
$("body").on("click", ".message_edit_save", function (e) {
var row = $(this).closest(".message_row");
message_edit.save(row);
@ -1499,56 +1269,11 @@ $(function () {
e.stopPropagation();
});
$('body').on('click', '.toggle_home', function (e) {
var stream = $(e.currentTarget).parents('ul').attr('data-name');
ui.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');
ui.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');
ui.hide_stream_sidebar_popover();
compose.start('stream', {"stream": stream, trigger: 'sidebar stream actions'});
e.stopPropagation();
});
$('body').on('click', '.open_stream_settings', function (e) {
var stream = $(e.currentTarget).parents('ul').attr('data-name');
ui.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.zephyr', 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);
}
});
$("body").on('click', function (e) {
// Dismiss the popover if the user has clicked outside it
if ($('.popover-inner').has(e.target).length === 0) {
ui.hide_actions_popover();
if (stream_sidebar_popup_shown_this_click === false ) {
ui.hide_stream_sidebar_popover();
}
if (user_sidebar_popup_shown_this_click === false ) {
ui.hide_user_sidebar_popover();
}
stream_sidebar_popup_shown_this_click = false;
user_sidebar_popup_shown_this_click = false;
// Dismiss popovers if the user has clicked outside them
if ($('.popover-inner').has(e.target).length === 0
&& $('#stream_filters span.arrow').has(e.target).length === 0) {
popovers.hide_all();
}
// Unfocus our compose area if we click out of it. Don't let exits out