Make Pholio URIs aware of which image you are looking at

Summary: Fixes T2658. Map `/Mxx/yy/` to images in a mock. Use HTML5 history stuff to make it work nicely. This also makes right-click-open-in-new-tab work correctly.

Test Plan: Clicked thumbs in a mock. Right-clicked thumbs. Copy and pasted a URI. Used browser back button.

Reviewers: chad

Reviewed By: chad

CC: aran

Maniphest Tasks: T2658

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

src/__celerity_resource_map__.php

@@ -1891,7 +1891,7 @@ celerity_register_resource_map(array(
   ),
   'javelin-behavior-pholio-mock-view' =>
   array(
-    'uri' => '/res/d993bd2b/rsrc/js/application/pholio/behavior-pholio-mock-view.js',
+    'uri' => '/res/e9e31577/rsrc/js/application/pholio/behavior-pholio-mock-view.js',
     'type' => 'js',
     'requires' =>
     array(
@@ -1902,7 +1902,8 @@ celerity_register_resource_map(array(
       4 => 'javelin-vector',
       5 => 'javelin-magical-init',
       6 => 'javelin-request',
-      7 => 'phabricator-keyboard-shortcut',
+      7 => 'javelin-history',
+      8 => 'phabricator-keyboard-shortcut',
     ),
     'disk' => '/rsrc/js/application/pholio/behavior-pholio-mock-view.js',
   ),

src/applications/pholio/application/PhabricatorApplicationPholio.php

@@ -42,7 +42,7 @@ final class PhabricatorApplicationPholio extends PhabricatorApplication {
 
   public function getRoutes() {
     return array(
-      '/M(?P<id>[1-9]\d*)' => 'PholioMockViewController',
+      '/M(?P<id>[1-9]\d*)(?:/(?P<imageID>\d+)/)?' => 'PholioMockViewController',
       '/pholio/' => array(
         '' => 'PholioMockListController',
         'view/(?P<view>\w+)/'   => 'PholioMockListController',

src/applications/pholio/controller/PholioMockViewController.php

@@ -6,9 +6,11 @@
 final class PholioMockViewController extends PholioController {
 
   private $id;
+  private $imageID;
 
   public function willProcessRequest(array $data) {
     $this->id = $data['id'];
+    $this->imageID = idx($data, 'imageID');
   }
 
   public function processRequest() {
@@ -67,6 +69,7 @@ final class PholioMockViewController extends PholioController {
 
     $output = new PholioMockImagesView();
     $output->setMock($mock);
+    $output->setImageID($this->imageID);
 
     $xaction_view = id(new PhabricatorApplicationTransactionView())
       ->setUser($this->getRequest()->getUser())

src/applications/pholio/view/PholioMockImagesView.php

@@ -3,6 +3,16 @@
 final class PholioMockImagesView extends AphrontView {
 
   private $mock;
+  private $imageID;
+
+  public function setImageID($image_id) {
+    $this->imageID = $image_id;
+    return $this;
+  }
+
+  public function getImageID() {
+    return $this->imageID;
+  }
 
   public function setMock(PholioMock $mock) {
     $this->mock = $mock;
@@ -22,10 +32,18 @@ final class PholioMockImagesView extends AphrontView {
     $panel_id = celerity_generate_unique_node_id();
     $viewport_id = celerity_generate_unique_node_id();
 
+    $ids = mpull($mock->getImages(), 'getID');
+    if ($this->imageID && isset($ids[$this->imageID])) {
+      $selected_id = $this->imageID;
+    } else {
+      $selected_id = head_key($ids);
+    }
+
     foreach ($mock->getImages() as $image) {
       $images[] = array(
         'id'      => $image->getID(),
         'fullURI' => $image->getFile()->getBestURI(),
+        'pageURI' => '/M'.$mock->getID().'/'.$image->getID().'/',
       );
     }
 
@@ -34,7 +52,7 @@ final class PholioMockImagesView extends AphrontView {
       'panelID' => $panel_id,
       'viewportID' => $viewport_id,
       'images' => $images,
-
+      'selectedID' => $selected_id,
     );
     Javelin::initBehavior('pholio-mock-view', $config);
 
@@ -87,10 +105,11 @@ final class PholioMockImagesView extends AphrontView {
         ));
 
         $thumbnails[] = javelin_tag(
-          'div',
+          'a',
           array(
             'sigil' => 'mock-thumbnail',
             'class' => 'pholio-mock-carousel-thumb-item',
+            'href' => '/M'.$mock->getID().'/'.$image->getID().'/',
             'meta' => array(
               'imageID' => $image->getID(),
             ),

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

@@ -7,6 +7,7 @@
  *           javelin-vector
  *           javelin-magical-init
  *           javelin-request
+ *           javelin-history
  *           phabricator-keyboard-shortcut
  */
 JX.behavior('pholio-mock-view', function(config) {
@@ -175,6 +176,10 @@ JX.behavior('pholio-mock-view', function(config) {
     }
 
     load_inline_comments();
+
+    if (image_id != config.selectedID) {
+      JX.History.replace(active_image.pageURI);
+    }
   }
 
   JX.Stratcom.listen(
@@ -188,8 +193,7 @@ JX.behavior('pholio-mock-view', function(config) {
       select_image(e.getNodeData('mock-thumbnail').imageID);
     });
 
-  // Select and show the first image.
+  select_image(config.selectedID);
-  select_image(config.images[0].id);
 
   JX.Stratcom.listen('mousedown', 'mock-panel', function(e) {
     if (!e.isNormalMouseEvent()) {