revi-archive/phorge-phorge
1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-12-28 16:30:59 +01:00
Code Issues Releases Wiki Activity

Always scale images to fit in Pholio

Browse source 
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
This commit is contained in:
epriestley 2013-03-05 12:31:30 -08:00
parent 1f51d023af
commit d585c2d745
2 changed files with 21 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/__celerity_resource_map__.php
View file

@ -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(

33
webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js
View file

@ -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();