revi-archive/phorge-phorge
1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-09-20 09:18:48 +02:00
Code Issues Releases Wiki Activity

Separate loading inline comments from drawing inline comments

Browse source 
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 2013-02-23 06:27:45 -08:00
parent a2abbd560a
commit 7c49f2bf4f
2 changed files with 218 additions and 194 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/__celerity_resource_map__.php
View file

@ -1873,7 +1873,7 @@ celerity_register_resource_map(array(
),
'javelin-behavior-pholio-mock-view' =>
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',
'requires' =>
array(

60
webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js
View file

@ -21,6 +21,8 @@ JX.behavior('pholio-mock-view', function(config) {
var selection_fill;
var active_image;
var inline_comments = {};
function get_image(id) {
for (var ii = 0; ii < config.images.length; ii++) {
if (config.images[ii].id == id) {
@ -171,50 +173,58 @@ JX.behavior('pholio-mock-view', function(config) {
});
function load_inline_comments() {
function redraw_inlines(id) {
if (!active_image) {
return;
}
if (active_image.id != id) {
return;
}
var comment_holder = JX.$('mock-inline-comments');
JX.DOM.setContent(comment_holder, '');
var id = active_image.id;
var inline_comments_uri = "/pholio/inline/" + id + "/";
var inline_comments = new JX.Request(inline_comments_uri, function(r) {
var inlines = inline_comments[active_image.id];
if (!inlines || !inlines.length) {
return;
}
for (var ii = 0; ii < inlines.length; ii++) {
var inline = inlines[ii];
if (r.length > 0) {
for(i=0; i < r.length; i++) {
var inlineSelection = JX.$N(
'div',
{
id: r[i].phid + "_selection",
id: inline.phid + "_selection",
className: 'pholio-mock-select-border'
});
JX.Stratcom.addData(
inlineSelection,
{phid: r[i].phid});
{phid: inline.phid});
JX.Stratcom.addSigil(inlineSelection, "image_selection");
JX.DOM.appendContent(comment_holder, JX.$H(r[i].contentHTML));
JX.DOM.appendContent(comment_holder, JX.$H(inline.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);
position_inline_rectangle(inline, inlineSelection);
if (r[i].transactionphid == null) {
if (inline.transactionphid == null) {
var inlineDraft = JX.$N(
'div',
{
className: 'pholio-mock-select-fill',
id: r[i].phid + "_fill"
id: inline.phid + "_fill"
});
JX.$V(r[i].x, r[i].y).setPos(inlineDraft);
JX.$V(r[i].width, r[i].height).setDim(inlineDraft);
position_inline_rectangle(inline, inlineDraft);
JX.Stratcom.addData(
inlineDraft,
{phid: r[i].phid});
{phid: inline.phid});
JX.Stratcom.addSigil(inlineDraft, "image_selection");
JX.DOM.appendContent(wrapper, inlineDraft);
@ -222,9 +232,23 @@ JX.behavior('pholio-mock-view', function(config) {
}
}
});
function position_inline_rectangle(inline, rect) {
JX.$V(inline.x, inline.y).setPos(rect);
JX.$V(inline.width, inline.height).setDim(rect);
}
inline_comments.send();
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(