Show all photos in a Pholio mock and allow switching between them

Summary: Mock page now shows all images. Switching between images is done by clicking thumbnails.

Test Plan: Verified that all images are shown. Verified that by clicking thumbnail the image clicked will show.

Reviewers: epriestley

Reviewed By: epriestley

CC: aran, Korvin, AnhNhan

Maniphest Tasks: T2427

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

src/__celerity_resource_map__.php

@@ -1834,6 +1834,17 @@ celerity_register_resource_map(array(
     ),
     'disk' => '/rsrc/js/application/phame/phame-post-preview.js',
   ),
+  'javelin-behavior-pholio-mock-view' =>
+  array(
+    'uri' => '/res/10fbdca1/rsrc/js/application/pholio/behavior-pholio-mock-view.js',
+    'type' => 'js',
+    'requires' =>
+    array(
+      0 => 'javelin-behavior',
+      1 => 'javelin-stratcom',
+    ),
+    'disk' => '/rsrc/js/application/pholio/behavior-pholio-mock-view.js',
+  ),
   'javelin-behavior-phriction-document-preview' =>
   array(
     'uri' => '/res/f1665ecd/rsrc/js/application/phriction/phriction-document-preview.js',
@@ -3165,7 +3176,7 @@ celerity_register_resource_map(array(
   ),
   'pholio-css' =>
   array(
-    'uri' => '/res/e454c33f/rsrc/css/application/pholio/pholio.css',
+    'uri' => '/res/8d8d99c1/rsrc/css/application/pholio/pholio.css',
     'type' => 'css',
     'requires' =>
     array(

src/applications/pholio/controller/PholioMockViewController.php

@@ -67,8 +67,6 @@ final class PholioMockViewController extends PholioController {
     $output = new PholioMockImagesView();
     $output->setMock($mock);
 
-    $carousel = $output->render();
-
     $xaction_view = id(new PhabricatorApplicationTransactionView())
       ->setUser($this->getRequest()->getUser())
       ->setTransactions($xactions)
@@ -80,11 +78,12 @@ final class PholioMockViewController extends PholioController {
       $header,
       $actions,
       $properties,
-      $carousel,
+      $output->render(),
       $xaction_view,
       $add_comment,
     );
 
+
     return $this->buildApplicationPage(
       $content,
       array(

src/applications/pholio/view/PholioMockImagesView.php

@@ -13,22 +13,59 @@ final class PholioMockImagesView extends AphrontView {
       throw new Exception("Call setMock() before render()!");
     }
 
+    $mockview = "";
+
     $file = head($this->mock->getImages())->getFile();
 
-    $image_tag = phutil_render_tag(
+    $main_image_id = celerity_generate_unique_node_id();
-      'img',
-        array(
-          'src' => $file->getBestURI(),
-          'class' => 'pholio-mock-image',
-        ),
-      '');
 
-    return phutil_render_tag(
+    $main_image_tag = phutil_render_tag(
+      'img',
+      array(
+        'src' => $file->getBestURI(),
+        'class' => 'pholio-mock-image',
+        'id' => $main_image_id,
+      ));
+
+    $mockview .= phutil_render_tag(
       'div',
         array(
           'class' => 'pholio-mock-image-container',
         ),
-      $image_tag);
+      $main_image_tag);
+
+    if (count($this->mock->getImages()) > 1) {
+      require_celerity_resource('javelin-behavior-pholio-mock-view');
+      $config = array('mainID' => $main_image_id);
+      Javelin::initBehavior('pholio-mock-view', $config);
+
+      $thumbnails = array();
+      foreach ($this->mock->getImages() as $image) {
+        $thumbfile = $image->getFile();
+
+        $tag = javelin_render_tag(
+          'img',
+          array(
+            'src' => $thumbfile->getThumb160x120URI(),
+            'sigil' => 'mock-thumbnail',
+            'class' => 'pholio-mock-carousel-thumbnail',
+            'meta' => array(
+              'fullSizeURI' => $thumbfile->getBestURI(),
+              'imageID' => $image->getID(),
+            ),
+        ));
+        $thumbnails[] = $tag;
+      }
+
+      $mockview .= phutil_render_tag(
+        'div',
+          array(
+            'class' => 'pholio-mock-carousel',
+          ),
+        implode($thumbnails));
+    }
+
+    return $mockview;
   }
 
 }

webroot/rsrc/css/application/pholio/pholio.css

@@ -6,7 +6,17 @@
   text-align: center;
 }
 
-.pholio-mock-image {
+.pholio-mock-carousel {
-    margin: 10px 0px;
+  background-color: #282828;
-    display: inline-block;
+  text-align: center;
+}
+
+.pholio-mock-carousel-thumbnail {
+  margin-right: 5px;
+  display: inline-block;
+}
+
+.pholio-mock-image {
+  margin: 10px 0px;
+  display: inline-block;
 }

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

@@ -0,0 +1,17 @@
+/**
+ * @provides javelin-behavior-pholio-mock-view
+ * @requires javelin-behavior
+ *           javelin-stratcom
+ */
+JX.behavior('pholio-mock-view', function(config) {
+  JX.Stratcom.listen(
+    'click', // Listen for clicks...
+    'mock-thumbnail', // ...on nodes with sigil "mock-thumbnail".
+    function(e) {
+      var data = e.getNodeData('mock-thumbnail');
+
+      var main = JX.$(config.mainID);
+      main.src = data.fullSizeURI;
+    });
+});
+