From 7c49f2bf4ffb62efd8c10ca251f5665428b56c85 Mon Sep 17 00:00:00 2001 From: epriestley Date: Sat, 23 Feb 2013 06:27:45 -0800 Subject: [PATCH] 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 --- src/__celerity_resource_map__.php | 2 +- .../pholio/behavior-pholio-mock-view.js | 410 +++++++++--------- 2 files changed, 218 insertions(+), 194 deletions(-) diff --git a/src/__celerity_resource_map__.php b/src/__celerity_resource_map__.php index 72872640de..eca391d9a2 100644 --- a/src/__celerity_resource_map__.php +++ b/src/__celerity_resource_map__.php @@ -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( diff --git a/webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js b/webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js index 5d5007b37f..38b536a338 100644 --- a/webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js +++ b/webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js @@ -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,212 +173,234 @@ JX.behavior('pholio-mock-view', function(config) { }); - 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 + "/"; - 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(); + function redraw_inlines(id) { + if (!active_image) { + return; } - JX.Stratcom.listen( - 'click', - 'inline-delete', - function(e) { - var data = e.getNodeData('inline-delete'); - e.kill(); - interrupt_typing(); + if (active_image.id != id) { + return; + } - JX.DOM.hide( - JX.$(data.phid + "_comment"), - JX.$(data.phid + "_fill"), - JX.$(data.phid + "_selection")); + var comment_holder = JX.$('mock-inline-comments'); + JX.DOM.setContent(comment_holder, ''); - var deleteURI = '/pholio/inline/delete/' + data.id + '/'; - var del = new JX.Request(deleteURI, function(r) { + var inlines = inline_comments[active_image.id]; + if (!inlines || !inlines.length) { + return; + } - }); - del.send(); + for (var ii = 0; ii < inlines.length; ii++) { + var inline = inlines[ii]; - }); - - 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); + var inlineSelection = JX.$N( + 'div', + { + id: inline.phid + "_selection", + className: 'pholio-mock-select-border' }); - 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( - 'click', - 'inline-edit-cancel', - function(e) { - var data = e.getNodeData('inline-edit-cancel'); - e.kill(); + edit_dialog.send(); + }); + + JX.Stratcom.listen( + 'click', + '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); - }); - - 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() { - 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; + 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; } - } - 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(); });