From d585c2d74507d5bc34d517c50b544894852cff86 Mon Sep 17 00:00:00 2001
From: epriestley <git@epriestley.com>
Date: Tue, 5 Mar 2013 12:31:30 -0800
Subject: [PATCH] Always scale images to fit in Pholio

Summary:
Ref T2641. Currently, we scale images to fit horizontally, but let them have arbitrary vertical size. This is nice in theory but kind of sucks in practice because it makes everything below the stage jump around when you switch images. It would also make swiping through images on mobile super weird.

Instead, scale to fit in both dimensions. This feels a lot better and more application-like to me. (I also think most mocks are not especially tall?)

Test Plan:
{F34648}

(Note that the image is enormous.)

Reviewers: chad

Reviewed By: chad

CC: aran

Maniphest Tasks: T2641

Differential Revision: https://secure.phabricator.com/D5233
---
 src/__celerity_resource_map__.php             |  2 +-
 .../pholio/behavior-pholio-mock-view.js       | 33 +++++++++++--------
 2 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/src/__celerity_resource_map__.php b/src/__celerity_resource_map__.php
index 4db8260ec6..a27a8a6497 100644
--- a/src/__celerity_resource_map__.php
+++ b/src/__celerity_resource_map__.php
@@ -1891,7 +1891,7 @@ celerity_register_resource_map(array(
   ),
   'javelin-behavior-pholio-mock-view' =>
   array(
-    'uri' => '/res/45324e3b/rsrc/js/application/pholio/behavior-pholio-mock-view.js',
+    'uri' => '/res/10573d54/rsrc/js/application/pholio/behavior-pholio-mock-view.js',
     'type' => 'js',
     'requires' =>
     array(
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 78da47283f..095722e014 100644
--- a/webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js
+++ b/webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js
@@ -166,18 +166,34 @@ JX.behavior('pholio-mock-view', function(config) {
   }
 
   function redraw_image() {
+
+    // Force the stage to scale as a function of the viewport size. Broadly,
+    // we make the stage 95% of the height of the viewport, then scale images
+    // to fit within it.
+    var new_y = (JX.Vector.getViewport().y * 0.90) - 150;
+    new_y = Math.max(320, new_y);
+    panel.style.height = new_y + 'px';
+
     if (!active_image || !active_image.tag) {
       return;
     }
 
     var tag = active_image.tag;
 
-    // If the image is too wide for the viewport, scale it down so it fits.
-    // (If it is too tall, we just let the user scroll.)
+    // If the image is too wide or tall for the viewport, scale it down so it
+    // fits.
     var w = JX.Vector.getDim(panel);
     w.x -= 40;
+    w.y -= 40;
+    var scale = 1;
     if (w.x < tag.naturalWidth) {
-      var scale = 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);
       tag.height = Math.floor(scale * tag.naturalHeight);
     } else {
@@ -185,16 +201,7 @@ JX.behavior('pholio-mock-view', function(config) {
       tag.height = tag.naturalHeight;
     }
 
-    var new_y = (JX.Vector.getViewport().y * 0.85) - 150;
-    new_y = Math.max(320, new_y);
-
-    if (tag.height + 40 < new_y) {
-      panel.style.height = new_y + 'px';
-      viewport.style.top = Math.floor(((new_y + 40) - tag.height) / 2) + 'px';
-    } else {
-      panel.style.height = '';
-      viewport.style.top = '';
-    }
+    viewport.style.top = Math.floor((new_y - tag.height) / 2) + 'px';
 
     stage.endLoad();