Allow the Pholio stage to scroll vertically

Summary:
Currently, we limit the image size to make sure that the stage has a constant height and the entire image always fits on screen.

In practice, these don't actually seem like desirable qualities. Instead, focus on giving as many pixels as possible to the image.

Test Plan: See screenshots.

Reviewers: chad

Reviewed By: chad

Subscribers: epriestley

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

resources/celerity/map.php

@@ -389,7 +389,7 @@ return array(
     'rsrc/js/application/passphrase/phame-credential-control.js' => '1e1c8a59',
     'rsrc/js/application/phame/phame-post-preview.js' => '61d927ec',
     'rsrc/js/application/pholio/behavior-pholio-mock-edit.js' => '1e1e8bb0',
-    'rsrc/js/application/pholio/behavior-pholio-mock-view.js' => '0938137d',
+    'rsrc/js/application/pholio/behavior-pholio-mock-view.js' => 'efe81529',
     'rsrc/js/application/phortune/behavior-balanced-payment-form.js' => '3b3e1664',
     'rsrc/js/application/phortune/behavior-stripe-payment-form.js' => '1693a296',
     'rsrc/js/application/phortune/behavior-test-payment-form.js' => 'b3e5ee60',
@@ -613,7 +613,7 @@ return array(
     'javelin-behavior-phabricator-watch-anchor' => '06e05112',
     'javelin-behavior-phame-post-preview' => '61d927ec',
     'javelin-behavior-pholio-mock-edit' => '1e1e8bb0',
-    'javelin-behavior-pholio-mock-view' => '0938137d',
+    'javelin-behavior-pholio-mock-view' => 'efe81529',
     'javelin-behavior-phui-object-box-tabs' => 'a3e2244e',
     'javelin-behavior-phui-timeline-dropdown-menu' => '4d94d9c3',
     'javelin-behavior-policy-control' => 'f3fef818',
@@ -862,21 +862,6 @@ return array(
     array(
       0 => 'javelin-install',
     ),
-    '0938137d' =>
-    array(
-      0 => 'javelin-behavior',
-      1 => 'javelin-util',
-      2 => 'javelin-stratcom',
-      3 => 'javelin-dom',
-      4 => 'javelin-vector',
-      5 => 'javelin-magical-init',
-      6 => 'javelin-request',
-      7 => 'javelin-history',
-      8 => 'javelin-workflow',
-      9 => 'javelin-mask',
-      10 => 'javelin-behavior-device',
-      11 => 'phabricator-keyboard-shortcut',
-    ),
     '09b15cf1' =>
     array(
       0 => 'javelin-stratcom',
@@ -1269,6 +1254,11 @@ return array(
       2 => 'javelin-util',
       3 => 'phabricator-shaped-request',
     ),
+    '7319e029' =>
+    array(
+      0 => 'javelin-behavior',
+      1 => 'javelin-dom',
+    ),
     '62e18640' =>
     array(
       0 => 'javelin-install',
@@ -1341,11 +1331,6 @@ return array(
       1 => 'javelin-stratcom',
       2 => 'javelin-dom',
     ),
-    '7319e029' =>
-    array(
-      0 => 'javelin-behavior',
-      1 => 'javelin-dom',
-    ),
     '76f4ebed' =>
     array(
       0 => 'javelin-install',
@@ -1978,6 +1963,21 @@ return array(
       0 => 'javelin-install',
       1 => 'javelin-util',
     ),
+    'efe81529' =>
+    array(
+      0 => 'javelin-behavior',
+      1 => 'javelin-util',
+      2 => 'javelin-stratcom',
+      3 => 'javelin-dom',
+      4 => 'javelin-vector',
+      5 => 'javelin-magical-init',
+      6 => 'javelin-request',
+      7 => 'javelin-history',
+      8 => 'javelin-workflow',
+      9 => 'javelin-mask',
+      10 => 'javelin-behavior-device',
+      11 => 'phabricator-keyboard-shortcut',
+    ),
     'f2441746' =>
     array(
       0 => 'javelin-dom',

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

@@ -139,32 +139,31 @@ JX.behavior('pholio-mock-view', function(config) {
   }
 
   function redraw_image() {
+    var new_y;
 
-    // Force the stage to scale as a function of the viewport size. Broadly,
+    // If we don't have an image yet, just scale the stage relative to the
-    // we take the full viewport and subtract 12px top and bottom.
+    // entire viewport height so the jump isn't too jumpy when the image loads.
-    var new_y = (JX.Vector.getViewport().y - 24) ;
-    new_y = Math.max(320, new_y);
-    panel.style.height = new_y + 'px';
-
     if (!active_image || !active_image.tag) {
+      new_y = (JX.Vector.getViewport().y * 0.80);
+      new_y = Math.max(320, new_y);
+      panel.style.height = new_y + 'px';
+
       return;
     }
 
     var tag = active_image.tag;
 
-    // If the image is too wide or tall for the viewport, scale it down so it
+    // If the image is too wide for the viewport, scale it down so it fits.
-    // fits.
+    // If it is too tall, just let the viewport scroll.
     var w = JX.Vector.getDim(panel);
+
+    // Leave 24px margins on either side of the image.
     w.x -= 48;
-    w.y -= 48;
 
     var scale = 1;
     if (w.x < tag.naturalWidth) {
       scale = Math.min(scale, w.x / tag.naturalWidth);
     }
-    if (w.y < tag.naturalHeight) {
-      scale = Math.min(scale, w.y / tag.naturalHeight);
-    }
 
     if (scale < 1) {
       tag.width = Math.floor(scale * tag.naturalWidth);
@@ -174,6 +173,10 @@ JX.behavior('pholio-mock-view', function(config) {
       tag.height = tag.naturalHeight;
     }
 
+    // Scale the viewport's vertical size to the image's adjusted size.
+    new_y = Math.max(320, tag.height + 48);
+    panel.style.height = new_y + 'px';
+
     viewport.style.top = Math.floor((new_y - tag.height) / 2) + 'px';
 
     stage.endLoad();