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

New Emoji Popover Dragging Mechanism. 

This is a new mechanism to replicate the behavior of Emoji Box
drag-to-resize without the adverse effects of the last iteration — such
as not being able to drag to select text in the compose box.
This commit is contained in:
Brock Whittaker 2016-10-14 16:13:40 -07:00 committed by Tim Abbott
parent 8821b269bf
commit 33c6960980
2 changed files with 34 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
static/js/click_handlers.js
View File

@ -423,7 +423,7 @@ $(function () {
// Unfocus our compose area if we click out of it. Don't let exits out
// of modals or selecting text (for copy+paste) trigger cancelling.
if (compose.composing() && !$(e.target).is("a") &&
if (compose.composing() && !$(e.target).is("a, .drag") &&
($(e.target).closest(".modal").length === 0) &&
window.getSelection().toString() === "" &&
($(e.target).closest('#emoji_map').length === 0)) {

77
static/js/popovers.js
View File

@ -274,54 +274,43 @@ exports.register_click_handlers = function () {
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();
}
});
(function () {
// create locally scoped variables for drag tracking.
var meta = {
drag: false,
c: {
y: null
},
$popover: $(".emoji_popover"),
MIN_HEIGHT: 25,
MAX_HEIGHT: 300
};
$("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;
});
// drag must start within the .drag zone.
$(".drag").on("mousedown", function (e) {
meta.drag = true;
meta.c.y = e.screenY;
});
$("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);
// mouse move that originated in .drag zone can go anywhere.
$("body").on("mousemove", function (e) {
if (meta.drag) {
var diff = e.screenY - meta.c.y;
var resolved_height = meta.$popover.height() - diff;
if (resolved_height > meta.MIN_HEIGHT && resolved_height < meta.MAX_HEIGHT) {
meta.$popover.height(resolved_height);
}
meta.c.y = e.screenY;
}
}
});
$("body").on("mouseup", function (e) {
isDragging = false;
emoji_popover_height = null;
});
});
// drag ends on mouseup. This cancels all drag events without interfering
// with any other events.
$("body").on("mouseup", function () {
meta.drag = false;
});
}());
$("body").on("click", ".emoji_popover", function (e) {
e.stopPropagation();