revi-archive/phorge-phorge
1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-09-20 01:08:50 +02:00
Code Issues Releases Wiki Activity

Allow the Pholio stage to scroll vertically

Browse source 
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
This commit is contained in:
epriestley 2014-06-14 19:23:21 -07:00
parent 0cc0782eaf
commit 8b1b52ea70
2 changed files with 37 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
resources/celerity/map.php
View file

@ -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',

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

@ -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,
// we take the full viewport and subtract 12px top and bottom.
var new_y = (JX.Vector.getViewport().y - 24) ;
// If we don't have an image yet, just scale the stage relative to the
// entire viewport height so the jump isn't too jumpy when the image loads.
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';
if (!active_image || !active_image.tag) {
return;
}
var tag = active_image.tag;
// If the image is too wide or tall for the viewport, scale it down so it
// fits.
// If the image is too wide for the viewport, scale it down so it 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();