mirror of
https://we.phorge.it/source/phorge.git
synced 2024-11-10 08:52:39 +01:00
Separate loading inline comments from drawing inline comments
Summary: Currently, we issue one Ajax request to get inline comments, and then draw them when they come back. This has some limitations: - A user could quickly click image 1, and then click image 2. The request for image 1 may take longer to come back than image 2. In this case, we'd draw the image 2 inlines and then draw the image 1 inlines when that request arrived, resulting in image 2 shown with both image 1 and image 2 comments. This is hard to make happen in a sandbox because the requests are so fast, but prevent it by drawing only the currently visible image's inlines. - Every time we want to draw inlines, we need to request them -- even if we've already loaded them! This allows us to draw them without reloading them (although we don't actually do this, yet). When we do, it will make it faster to switch between images you've aleady looked at (and we can do other optimizations). Test Plan: Clicked between images, saw inlines draw correctly. Added a new inline. Moused over inlines. Reviewers: chad, ljalonen Reviewed By: chad CC: aran Differential Revision: https://secure.phabricator.com/D5083
This commit is contained in:
epriestley
parent
a2abbd560a
commit
7c49f2bf4f
2 changed files with 218 additions and 194 deletions
|
|
@ -1873,7 +1873,7 @@ celerity_register_resource_map(array(
|
||||||
),
|
),
|
||||||
'javelin-behavior-pholio-mock-view' =>
|
'javelin-behavior-pholio-mock-view' =>
|
||||||
array(
|
array(
|
||||||
'uri' => '/res/e30e42ce/rsrc/js/application/pholio/behavior-pholio-mock-view.js',
|
'uri' => '/res/23bf68aa/rsrc/js/application/pholio/behavior-pholio-mock-view.js',
|
||||||
'type' => 'js',
|
'type' => 'js',
|
||||||
'requires' =>
|
'requires' =>
|
||||||
array(
|
array(
|
||||||
|
|
|
||||||
|
|
@ -21,6 +21,8 @@ JX.behavior('pholio-mock-view', function(config) {
|
||||||
var selection_fill;
|
var selection_fill;
|
||||||
var active_image;
|
var active_image;
|
||||||
|
|
||||||
|
var inline_comments = {};
|
||||||
|
|
||||||
function get_image(id) {
|
function get_image(id) {
|
||||||
for (var ii = 0; ii < config.images.length; ii++) {
|
for (var ii = 0; ii < config.images.length; ii++) {
|
||||||
if (config.images[ii].id == id) {
|
if (config.images[ii].id == id) {
|
||||||
|
|
@ -171,212 +173,234 @@ JX.behavior('pholio-mock-view', function(config) {
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
function load_inline_comments() {
|
function redraw_inlines(id) {
|
||||||
var comment_holder = JX.$('mock-inline-comments');
|
if (!active_image) {
|
||||||
JX.DOM.setContent(comment_holder, '');
|
return;
|
||||||
|
|
||||||
var id = active_image.id;
|
|
||||||
var inline_comments_uri = "/pholio/inline/" + id + "/";
|
|
||||||
var inline_comments = new JX.Request(inline_comments_uri, function(r) {
|
|
||||||
|
|
||||||
if (r.length > 0) {
|
|
||||||
for(i=0; i < r.length; i++) {
|
|
||||||
var inlineSelection = JX.$N(
|
|
||||||
'div',
|
|
||||||
{
|
|
||||||
id: r[i].phid + "_selection",
|
|
||||||
className: 'pholio-mock-select-border'
|
|
||||||
});
|
|
||||||
|
|
||||||
JX.Stratcom.addData(
|
|
||||||
inlineSelection,
|
|
||||||
{phid: r[i].phid});
|
|
||||||
|
|
||||||
JX.Stratcom.addSigil(inlineSelection, "image_selection");
|
|
||||||
JX.DOM.appendContent(comment_holder, JX.$H(r[i].contentHTML));
|
|
||||||
|
|
||||||
JX.DOM.appendContent(wrapper, inlineSelection);
|
|
||||||
|
|
||||||
JX.$V(r[i].x, r[i].y).setPos(inlineSelection);
|
|
||||||
JX.$V(r[i].width, r[i].height).setDim(inlineSelection);
|
|
||||||
|
|
||||||
if (r[i].transactionphid == null) {
|
|
||||||
|
|
||||||
var inlineDraft = JX.$N(
|
|
||||||
'div',
|
|
||||||
{
|
|
||||||
className: 'pholio-mock-select-fill',
|
|
||||||
id: r[i].phid + "_fill"
|
|
||||||
});
|
|
||||||
|
|
||||||
JX.$V(r[i].x, r[i].y).setPos(inlineDraft);
|
|
||||||
JX.$V(r[i].width, r[i].height).setDim(inlineDraft);
|
|
||||||
|
|
||||||
JX.Stratcom.addData(
|
|
||||||
inlineDraft,
|
|
||||||
{phid: r[i].phid});
|
|
||||||
|
|
||||||
JX.Stratcom.addSigil(inlineDraft, "image_selection");
|
|
||||||
JX.DOM.appendContent(wrapper, inlineDraft);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
inline_comments.send();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
JX.Stratcom.listen(
|
if (active_image.id != id) {
|
||||||
'click',
|
return;
|
||||||
'inline-delete',
|
}
|
||||||
function(e) {
|
|
||||||
var data = e.getNodeData('inline-delete');
|
|
||||||
e.kill();
|
|
||||||
interrupt_typing();
|
|
||||||
|
|
||||||
JX.DOM.hide(
|
var comment_holder = JX.$('mock-inline-comments');
|
||||||
JX.$(data.phid + "_comment"),
|
JX.DOM.setContent(comment_holder, '');
|
||||||
JX.$(data.phid + "_fill"),
|
|
||||||
JX.$(data.phid + "_selection"));
|
|
||||||
|
|
||||||
var deleteURI = '/pholio/inline/delete/' + data.id + '/';
|
var inlines = inline_comments[active_image.id];
|
||||||
var del = new JX.Request(deleteURI, function(r) {
|
if (!inlines || !inlines.length) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
});
|
for (var ii = 0; ii < inlines.length; ii++) {
|
||||||
del.send();
|
var inline = inlines[ii];
|
||||||
|
|
||||||
});
|
var inlineSelection = JX.$N(
|
||||||
|
'div',
|
||||||
JX.Stratcom.listen(
|
{
|
||||||
'click',
|
id: inline.phid + "_selection",
|
||||||
'inline-edit',
|
className: 'pholio-mock-select-border'
|
||||||
function(e) {
|
|
||||||
var data = e.getNodeData('inline-edit');
|
|
||||||
e.kill();
|
|
||||||
|
|
||||||
interrupt_typing();
|
|
||||||
|
|
||||||
var editURI = "/pholio/inline/edit/" + data.id + '/';
|
|
||||||
|
|
||||||
var edit_dialog = new JX.Request(editURI, function(r) {
|
|
||||||
var dialog = JX.$N(
|
|
||||||
'div',
|
|
||||||
{
|
|
||||||
className: 'pholio-edit-inline-popup'
|
|
||||||
},
|
|
||||||
JX.$H(r));
|
|
||||||
|
|
||||||
JX.DOM.setContent(JX.$(data.phid + '_comment'), dialog);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
edit_dialog.send();
|
JX.Stratcom.addData(
|
||||||
|
inlineSelection,
|
||||||
|
{phid: inline.phid});
|
||||||
|
|
||||||
|
JX.Stratcom.addSigil(inlineSelection, "image_selection");
|
||||||
|
JX.DOM.appendContent(comment_holder, JX.$H(inline.contentHTML));
|
||||||
|
|
||||||
|
JX.DOM.appendContent(wrapper, inlineSelection);
|
||||||
|
|
||||||
|
position_inline_rectangle(inline, inlineSelection);
|
||||||
|
|
||||||
|
if (inline.transactionphid == null) {
|
||||||
|
|
||||||
|
var inlineDraft = JX.$N(
|
||||||
|
'div',
|
||||||
|
{
|
||||||
|
className: 'pholio-mock-select-fill',
|
||||||
|
id: inline.phid + "_fill"
|
||||||
|
});
|
||||||
|
|
||||||
|
position_inline_rectangle(inline, inlineDraft);
|
||||||
|
|
||||||
|
JX.Stratcom.addData(
|
||||||
|
inlineDraft,
|
||||||
|
{phid: inline.phid});
|
||||||
|
|
||||||
|
JX.Stratcom.addSigil(inlineDraft, "image_selection");
|
||||||
|
JX.DOM.appendContent(wrapper, inlineDraft);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function position_inline_rectangle(inline, rect) {
|
||||||
|
JX.$V(inline.x, inline.y).setPos(rect);
|
||||||
|
JX.$V(inline.width, inline.height).setDim(rect);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function load_inline_comments() {
|
||||||
|
var comment_holder = JX.$('mock-inline-comments');
|
||||||
|
JX.DOM.setContent(comment_holder, '');
|
||||||
|
|
||||||
|
var id = active_image.id;
|
||||||
|
var inline_comments_uri = "/pholio/inline/" + id + "/";
|
||||||
|
|
||||||
|
new JX.Request(inline_comments_uri, function(r) {
|
||||||
|
inline_comments[id] = r;
|
||||||
|
redraw_inlines(id);
|
||||||
|
}).send();
|
||||||
|
}
|
||||||
|
|
||||||
|
JX.Stratcom.listen(
|
||||||
|
'click',
|
||||||
|
'inline-delete',
|
||||||
|
function(e) {
|
||||||
|
var data = e.getNodeData('inline-delete');
|
||||||
|
e.kill();
|
||||||
|
interrupt_typing();
|
||||||
|
|
||||||
|
JX.DOM.hide(
|
||||||
|
JX.$(data.phid + "_comment"),
|
||||||
|
JX.$(data.phid + "_fill"),
|
||||||
|
JX.$(data.phid + "_selection"));
|
||||||
|
|
||||||
|
var deleteURI = '/pholio/inline/delete/' + data.id + '/';
|
||||||
|
var del = new JX.Request(deleteURI, function(r) {
|
||||||
|
|
||||||
|
});
|
||||||
|
del.send();
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
JX.Stratcom.listen(
|
||||||
|
'click',
|
||||||
|
'inline-edit',
|
||||||
|
function(e) {
|
||||||
|
var data = e.getNodeData('inline-edit');
|
||||||
|
e.kill();
|
||||||
|
|
||||||
|
interrupt_typing();
|
||||||
|
|
||||||
|
var editURI = "/pholio/inline/edit/" + data.id + '/';
|
||||||
|
|
||||||
|
var edit_dialog = new JX.Request(editURI, function(r) {
|
||||||
|
var dialog = JX.$N(
|
||||||
|
'div',
|
||||||
|
{
|
||||||
|
className: 'pholio-edit-inline-popup'
|
||||||
|
},
|
||||||
|
JX.$H(r));
|
||||||
|
|
||||||
|
JX.DOM.setContent(JX.$(data.phid + '_comment'), dialog);
|
||||||
});
|
});
|
||||||
|
|
||||||
JX.Stratcom.listen(
|
edit_dialog.send();
|
||||||
'click',
|
});
|
||||||
'inline-edit-cancel',
|
|
||||||
function(e) {
|
JX.Stratcom.listen(
|
||||||
var data = e.getNodeData('inline-edit-cancel');
|
'click',
|
||||||
e.kill();
|
'inline-edit-cancel',
|
||||||
|
function(e) {
|
||||||
|
var data = e.getNodeData('inline-edit-cancel');
|
||||||
|
e.kill();
|
||||||
|
load_inline_comment(data.id);
|
||||||
|
});
|
||||||
|
|
||||||
|
JX.Stratcom.listen(
|
||||||
|
'click',
|
||||||
|
'inline-edit-submit',
|
||||||
|
function(e) {
|
||||||
|
var data = e.getNodeData('inline-edit-submit');
|
||||||
|
var editURI = "/pholio/inline/edit/" + data.id + '/';
|
||||||
|
e.kill();
|
||||||
|
|
||||||
|
var edit = new JX.Request(editURI, function(r) {
|
||||||
load_inline_comment(data.id);
|
load_inline_comment(data.id);
|
||||||
});
|
|
||||||
|
|
||||||
JX.Stratcom.listen(
|
|
||||||
'click',
|
|
||||||
'inline-edit-submit',
|
|
||||||
function(e) {
|
|
||||||
var data = e.getNodeData('inline-edit-submit');
|
|
||||||
var editURI = "/pholio/inline/edit/" + data.id + '/';
|
|
||||||
e.kill();
|
|
||||||
|
|
||||||
var edit = new JX.Request(editURI, function(r) {
|
|
||||||
load_inline_comment(data.id);
|
|
||||||
});
|
|
||||||
edit.addData({
|
|
||||||
op: 'update',
|
|
||||||
content: JX.DOM.find(JX.$(data.phid + '_comment'), 'textarea').value
|
|
||||||
});
|
|
||||||
edit.send();
|
|
||||||
});
|
|
||||||
|
|
||||||
JX.Stratcom.listen(
|
|
||||||
'click',
|
|
||||||
'inline-save-cancel',
|
|
||||||
function(e) {
|
|
||||||
e.kill();
|
|
||||||
|
|
||||||
interrupt_typing();
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
JX.Stratcom.listen(
|
|
||||||
'click',
|
|
||||||
'inline-save-submit',
|
|
||||||
function(e) {
|
|
||||||
e.kill();
|
|
||||||
|
|
||||||
var new_content = JX.DOM.find(
|
|
||||||
JX.$('pholio-new-inline-comment-dialog'),
|
|
||||||
'textarea').value;
|
|
||||||
|
|
||||||
if (new_content == null || new_content.length == 0) {
|
|
||||||
alert("Empty comment")
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
var saveURI = "/pholio/inline/save/";
|
|
||||||
|
|
||||||
var inlineComment = new JX.Request(saveURI, function(r) {
|
|
||||||
if (!r.success) return;
|
|
||||||
|
|
||||||
JX.DOM.appendContent(
|
|
||||||
JX.$('mock-inline-comments'),
|
|
||||||
JX.$H(r.contentHTML));
|
|
||||||
|
|
||||||
JX.Stratcom.addSigil(selection_fill, 'image_selection');
|
|
||||||
selection_fill.id = r.phid + '_fill';
|
|
||||||
JX.Stratcom.addData(selection_fill, {phid: r.phid});
|
|
||||||
selection_border.id = r.phid + '_selection';
|
|
||||||
|
|
||||||
JX.DOM.remove(JX.$('pholio-new-inline-comment-dialog'));
|
|
||||||
is_typing = false;
|
|
||||||
});
|
|
||||||
|
|
||||||
var commentToAdd = {
|
|
||||||
mockID: config.mockID,
|
|
||||||
op: 'save',
|
|
||||||
imageID: active_image.id,
|
|
||||||
startX: Math.min(startPos.x, endPos.x),
|
|
||||||
startY: Math.min(startPos.y, endPos.y),
|
|
||||||
endX: Math.max(startPos.x,endPos.x),
|
|
||||||
endY: Math.max(startPos.y,endPos.y),
|
|
||||||
comment: new_content
|
|
||||||
};
|
|
||||||
|
|
||||||
inlineComment.addData(commentToAdd);
|
|
||||||
inlineComment.send();
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
function load_inline_comment(id) {
|
|
||||||
var viewInlineURI = '/pholio/inline/view/' + id + '/';
|
|
||||||
var inline_comment = new JX.Request(viewInlineURI, function(r) {
|
|
||||||
JX.DOM.replace(JX.$(r.phid + '_comment'), JX.$H(r.contentHTML));
|
|
||||||
});
|
});
|
||||||
inline_comment.send();
|
edit.addData({
|
||||||
}
|
op: 'update',
|
||||||
|
content: JX.DOM.find(JX.$(data.phid + '_comment'), 'textarea').value
|
||||||
|
});
|
||||||
|
edit.send();
|
||||||
|
});
|
||||||
|
|
||||||
function interrupt_typing() {
|
JX.Stratcom.listen(
|
||||||
if (is_typing == true) {
|
'click',
|
||||||
JX.DOM.remove(selection_fill);
|
'inline-save-cancel',
|
||||||
JX.DOM.remove(selection_border);
|
function(e) {
|
||||||
JX.DOM.remove(JX.$('pholio-new-inline-comment-dialog'));
|
e.kill();
|
||||||
is_typing = false;
|
|
||||||
|
interrupt_typing();
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
JX.Stratcom.listen(
|
||||||
|
'click',
|
||||||
|
'inline-save-submit',
|
||||||
|
function(e) {
|
||||||
|
e.kill();
|
||||||
|
|
||||||
|
var new_content = JX.DOM.find(
|
||||||
|
JX.$('pholio-new-inline-comment-dialog'),
|
||||||
|
'textarea').value;
|
||||||
|
|
||||||
|
if (new_content == null || new_content.length == 0) {
|
||||||
|
alert("Empty comment")
|
||||||
|
return;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
load_inline_comments();
|
var saveURI = "/pholio/inline/save/";
|
||||||
|
|
||||||
|
var inlineComment = new JX.Request(saveURI, function(r) {
|
||||||
|
if (!r.success) return;
|
||||||
|
|
||||||
|
JX.DOM.appendContent(
|
||||||
|
JX.$('mock-inline-comments'),
|
||||||
|
JX.$H(r.contentHTML));
|
||||||
|
|
||||||
|
JX.Stratcom.addSigil(selection_fill, 'image_selection');
|
||||||
|
selection_fill.id = r.phid + '_fill';
|
||||||
|
JX.Stratcom.addData(selection_fill, {phid: r.phid});
|
||||||
|
selection_border.id = r.phid + '_selection';
|
||||||
|
|
||||||
|
JX.DOM.remove(JX.$('pholio-new-inline-comment-dialog'));
|
||||||
|
is_typing = false;
|
||||||
|
});
|
||||||
|
|
||||||
|
var commentToAdd = {
|
||||||
|
mockID: config.mockID,
|
||||||
|
op: 'save',
|
||||||
|
imageID: active_image.id,
|
||||||
|
startX: Math.min(startPos.x, endPos.x),
|
||||||
|
startY: Math.min(startPos.y, endPos.y),
|
||||||
|
endX: Math.max(startPos.x,endPos.x),
|
||||||
|
endY: Math.max(startPos.y,endPos.y),
|
||||||
|
comment: new_content
|
||||||
|
};
|
||||||
|
|
||||||
|
inlineComment.addData(commentToAdd);
|
||||||
|
inlineComment.send();
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
function load_inline_comment(id) {
|
||||||
|
var viewInlineURI = '/pholio/inline/view/' + id + '/';
|
||||||
|
var inline_comment = new JX.Request(viewInlineURI, function(r) {
|
||||||
|
JX.DOM.replace(JX.$(r.phid + '_comment'), JX.$H(r.contentHTML));
|
||||||
|
});
|
||||||
|
inline_comment.send();
|
||||||
|
}
|
||||||
|
|
||||||
|
function interrupt_typing() {
|
||||||
|
if (is_typing == true) {
|
||||||
|
JX.DOM.remove(selection_fill);
|
||||||
|
JX.DOM.remove(selection_border);
|
||||||
|
JX.DOM.remove(JX.$('pholio-new-inline-comment-dialog'));
|
||||||
|
is_typing = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
load_inline_comments();
|
||||||
});
|
});
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue