diff --git a/src/applications/pholio/view/PholioInlineCommentView.php b/src/applications/pholio/view/PholioInlineCommentView.php index 65f3626065..eb2707083f 100644 --- a/src/applications/pholio/view/PholioInlineCommentView.php +++ b/src/applications/pholio/view/PholioInlineCommentView.php @@ -85,7 +85,11 @@ final class PholioInlineCommentView extends AphrontView { 'div', array( 'id' => $this->inlineComment->getPHID()."_comment", - 'class' => 'pholio-inline-comment' + 'class' => 'pholio-inline-comment', + 'sigil' => 'inline_comment', + 'meta' => array( + 'phid' => $this->inlineComment->getPHID() + ) ), array($comment_header, $comment_body)); diff --git a/src/applications/pholio/view/PholioMockImagesView.php b/src/applications/pholio/view/PholioMockImagesView.php index 7fe3a2eb09..1764244dd5 100644 --- a/src/applications/pholio/view/PholioMockImagesView.php +++ b/src/applications/pholio/view/PholioMockImagesView.php @@ -108,6 +108,7 @@ final class PholioMockImagesView extends AphrontView { $mockview[] = phutil_tag( 'div', array( + 'id' => 'pholio-mock-carousel', 'class' => 'pholio-mock-carousel', ), $thumbnails); diff --git a/webroot/rsrc/css/application/pholio/pholio.css b/webroot/rsrc/css/application/pholio/pholio.css index bbda5bdc1a..a742015bd9 100644 --- a/webroot/rsrc/css/application/pholio/pholio.css +++ b/webroot/rsrc/css/application/pholio/pholio.css @@ -27,7 +27,8 @@ position: relative; } -.device-desktop .pholio-mock-carousel-thumb-item:hover { +.device-desktop .pholio-mock-carousel-thumb-item:hover, + .pholio-mock-carousel-thumb-current { background: #383838; border-color: #686868; } @@ -101,4 +102,3 @@ font-weight: normal; margin-left: 5px; } - 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 cc8c48ce42..6ee7ab7833 100644 --- a/webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js +++ b/webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js @@ -87,6 +87,20 @@ JX.behavior('pholio-mock-view', function(config) { img.onload = JX.bind(img, onload_image, active_image.id); img.src = active_image.fullURI; + var thumbs = JX.DOM.scry( + JX.$('pholio-mock-carousel'), + 'div', + 'mock-thumbnail'); + + for(var k in thumbs) { + var thumb_meta = JX.Stratcom.getData(thumbs[k]); + + JX.DOM.alterClass( + thumbs[k], + 'pholio-mock-carousel-thumb-current', + (active_image.id == thumb_meta.imageID)); + } + load_inline_comments(); } @@ -142,6 +156,20 @@ JX.behavior('pholio-mock-view', function(config) { highlight); }); + JX.Stratcom.listen( + ['mouseover', 'mouseout'], + 'inline_comment', + function(e) { + var data = e.getNodeData('inline_comment'); + var selection = JX.$(data.phid + "_selection"); + var highlight = (e.getType() == 'mouseover'); + + JX.DOM.alterClass( + selection, + 'pholio-mock-inline-comment-highlight', + highlight); + }); + JX.Stratcom.listen( 'mouseup', null,