Always draw images with Javascript

Summary:
Currently, we use two different methods to draw Mock main images:

  - When the page first loads, we draw the image on the server with PHP.
  - When the user clicks a thumbnail, we draw the image on the client with JS.

Since we can't reasonably get rid of the client version of this, move it all to the client. This paves the way for some future features, like:

  - Doing some magic with stage sizing
  - URIs that jump to a specific comment
  - showing "loading" indicators while images are loading
  - Loading lowsrc images first?

Test Plan: Loaded page, clicked thumbs.

Reviewers: ljalonen, chad

Reviewed By: chad

CC: aran

Differential Revision: https://secure.phabricator.com/D5073

src/__celerity_resource_map__.php

@@ -1873,7 +1873,7 @@ celerity_register_resource_map(array(
   ),
   'javelin-behavior-pholio-mock-view' =>
   array(
-    'uri' => '/res/84215004/rsrc/js/application/pholio/behavior-pholio-mock-view.js',
+    'uri' => '/res/893b9f91/rsrc/js/application/pholio/behavior-pholio-mock-view.js',
     'type' => 'js',
     'requires' =>
     array(
@@ -3217,7 +3217,7 @@ celerity_register_resource_map(array(
   ),
   'pholio-css' =>
   array(
-    'uri' => '/res/3b87f5ae/rsrc/css/application/pholio/pholio.css',
+    'uri' => '/res/ecd07cd8/rsrc/css/application/pholio/pholio.css',
     'type' => 'css',
     'requires' =>
     array(

src/applications/pholio/view/PholioMockImagesView.php

@@ -14,28 +14,38 @@ final class PholioMockImagesView extends AphrontView {
       throw new Exception("Call setMock() before render()!");
     }
 
+    $mock = $this->mock;
+
     $main_image_id = celerity_generate_unique_node_id();
     require_celerity_resource('javelin-behavior-pholio-mock-view');
+
+    $images = array();
+    foreach ($mock->getImages() as $image) {
+      $images[] = array(
+        'id'      => $image->getID(),
+        'fullURI' => $image->getFile()->getBestURI(),
+      );
+    }
+
     $config = array(
       'mainID' => $main_image_id,
-      'mockID' => $this->mock->getID());
+      'mockID' => $mock->getID(),
+      'images' => $images,
+
+    );
     Javelin::initBehavior('pholio-mock-view', $config);
 
     $mockview = '';
 
-    $main_image = head($this->mock->getImages());
+    $main_image = head($mock->getImages());
 
     $main_image_tag = javelin_tag(
       'img',
       array(
         'id' => $main_image_id,
-        'src' => $main_image->getFile()->getBestURI(),
         'sigil' => 'mock-image',
         'class' => 'pholio-mock-image',
-        'meta' => array(
+        'style' => 'display: none;',
-          'fullSizeURI' => $main_image->getFile()->getBestURI(),
-          'imageID' => $main_image->getID(),
-        ),
     ));
 
     $main_image_tag = javelin_tag(
@@ -64,9 +74,9 @@ final class PholioMockImagesView extends AphrontView {
         ),
       array($main_image_tag, $inline_comments_holder));
 
-    if (count($this->mock->getImages()) > 1) {
+    if (count($mock->getImages()) > 1) {
       $thumbnails = array();
-      foreach ($this->mock->getImages() as $image) {
+      foreach ($mock->getImages() as $image) {
         $thumbfile = $image->getFile();
 
         $dimensions = PhabricatorImageTransformer::getPreviewDimensions(
@@ -89,8 +99,7 @@ final class PholioMockImagesView extends AphrontView {
             'sigil' => 'mock-thumbnail',
             'class' => 'pholio-mock-carousel-thumb-item',
             'meta' => array(
-              'fullSizeURI' => $thumbfile->getBestURI(),
+              'imageID' => $image->getID(),
-              'imageID' => $image->getID()
             ),
           ),
           $tag);

webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js

@@ -19,27 +19,42 @@ JX.behavior('pholio-mock-view', function(config) {
 
   var selection_border;
   var selection_fill;
+  var active_image;
 
-  JX.Stratcom.listen(
+  function get_image(id) {
-    'click', // Listen for clicks...
+    for (var ii = 0; ii < config.images.length; ii++) {
-    'mock-thumbnail', // ...on nodes with sigil "mock-thumbnail".
+      if (config.images[ii].id == id) {
-    function(e) {
+        return config.images[ii];
-      var data = e.getNodeData('mock-thumbnail');
+      }
+    }
+    return null;
+  }
+
+  function select_image(image_id) {
+    var image = get_image(image_id);
+    active_image = image;
 
     var main = JX.$(config.mainID);
-      JX.Stratcom.addData(
+    main.src = image.fullURI;
-        main,
+    JX.DOM.show(main);
-        {
-          fullSizeURI: data['fullSizeURI'],
-          imageID: data['imageID']
-        });
 
-      main.src = data.fullSizeURI;
+    // NOTE: This is to clear inline comment reticles.
+    JX.DOM.setContent(wrapper, main);
 
-      JX.DOM.setContent(wrapper,main);
     load_inline_comments();
+  }
+
+  JX.Stratcom.listen(
+    'click',
+    'mock-thumbnail',
+    function(e) {
+      e.kill();
+      select_image(e.getNodeData('mock-thumbnail').imageID);
     });
 
+  // Select and show the first image.
+  select_image(config.images[0].id);
+
   function draw_rectangle(nodes, current, init) {
     for (var ii = 0; ii < nodes.length; ii++) {
       var node = nodes[ii];
@@ -143,11 +158,11 @@ JX.behavior('pholio-mock-view', function(config) {
     });
 
     function load_inline_comments() {
-      var data = JX.Stratcom.getData(JX.$(config.mainID));
       var comment_holder = JX.$('mock-inline-comments');
       JX.DOM.setContent(comment_holder, '');
 
-      var inline_comments_uri = "/pholio/inline/" + data['imageID'] + "/";
+      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) {
@@ -339,7 +354,7 @@ JX.behavior('pholio-mock-view', function(config) {
         var commentToAdd = {
           mockID: config.mockID,
           op: 'save',
-          imageID: imageData['imageID'],
+          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),