1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-11-10 00:42:41 +01:00

Show loading state and fix reticles in Pholio

Summary:
Fixes T2643. Show a loading state (currently just making the image transparent, but we could do something fancier) when an image is loading.

Fixes T2648. Cleans up the double draws we were previously doing.

Makes thumbnails react to mousedown in addition to click so they feel a little snappier. Make them stop reacting to control click, command click, etc.

Test Plan: Used `setTimeout()` to simulate a 1s image load delay, switched between images.

Reviewers: chad

Reviewed By: chad

CC: aran

Maniphest Tasks: T2643, T2648

Differential Revision: https://secure.phabricator.com/D5219
This commit is contained in:
epriestley 2013-03-04 16:59:16 -08:00
parent 9aedb3c3c1
commit 5a7d9fb522
3 changed files with 70 additions and 7 deletions

View file

@ -1891,7 +1891,7 @@ celerity_register_resource_map(array(
),
'javelin-behavior-pholio-mock-view' =>
array(
'uri' => '/res/06c92cdf/rsrc/js/application/pholio/behavior-pholio-mock-view.js',
'uri' => '/res/c2586731/rsrc/js/application/pholio/behavior-pholio-mock-view.js',
'type' => 'js',
'requires' =>
array(
@ -3236,7 +3236,7 @@ celerity_register_resource_map(array(
),
'pholio-css' =>
array(
'uri' => '/res/b74040b8/rsrc/css/application/pholio/pholio.css',
'uri' => '/res/99777600/rsrc/css/application/pholio/pholio.css',
'type' => 'css',
'requires' =>
array(
@ -3245,7 +3245,7 @@ celerity_register_resource_map(array(
),
'pholio-inline-comments-css' =>
array(
'uri' => '/res/241b121c/rsrc/css/application/pholio/pholio-inline-comments.css',
'uri' => '/res/af95f0a6/rsrc/css/application/pholio/pholio-inline-comments.css',
'type' => 'css',
'requires' =>
array(

View file

@ -84,3 +84,7 @@
background-color: #222;
border-color: #555;
}
.pholio-image-loading img {
opacity: 0.50;
}

View file

@ -22,6 +22,57 @@ JX.behavior('pholio-mock-view', function(config) {
var inline_comments = {};
/* -( Stage )-------------------------------------------------------------- */
var stage = (function() {
var loading = false;
var stageElement = JX.$(config.panelID);
var viewElement = JX.$(config.viewportID);
var reticles = [];
function begin_load() {
if (loading) {
return;
}
loading = true;
clear_reticles();
draw_loading();
}
function end_load() {
if (!loading) {
return;
}
loading = false;
draw_loading();
}
function draw_loading() {
JX.DOM.alterClass(stageElement, 'pholio-image-loading', loading);
}
function add_reticle(reticle) {
reticles.push(reticle);
viewElement.appendChild(reticle);
}
function clear_reticles() {
for (var ii = 0; ii < reticles.length; ii++) {
JX.DOM.remove(reticles[ii]);
}
reticles = [];
}
return {
beginLoad: begin_load,
endLoad: end_load,
addReticle: add_reticle,
clearReticles: clear_reticles
};
})();
function get_image(id) {
for (var ii = 0; ii < config.images.length; ii++) {
if (config.images[ii].id == id) {
@ -73,7 +124,8 @@ JX.behavior('pholio-mock-view', function(config) {
viewport.style.top = '';
}
// NOTE: This also clears inline comment reticles.
stage.endLoad();
JX.DOM.setContent(viewport, tag);
redraw_inlines(active_image.id);
@ -83,6 +135,8 @@ JX.behavior('pholio-mock-view', function(config) {
active_image = get_image(image_id);
active_image.tag = null;
stage.beginLoad();
var img = JX.$N('img', {className: 'pholio-mock-image'});
img.onload = JX.bind(img, onload_image, active_image.id);
img.src = active_image.fullURI;
@ -105,9 +159,12 @@ JX.behavior('pholio-mock-view', function(config) {
}
JX.Stratcom.listen(
'click',
['mousedown', 'click'],
'mock-thumbnail',
function(e) {
if (!e.isNormalMouseEvent()) {
return;
}
e.kill();
select_image(e.getNodeData('mock-thumbnail').imageID);
});
@ -212,6 +269,7 @@ JX.behavior('pholio-mock-view', function(config) {
var comment_holder = JX.$('mock-inline-comments');
JX.DOM.setContent(comment_holder, '');
stage.clearReticles();
var inlines = inline_comments[active_image.id];
if (!inlines || !inlines.length) {
@ -241,7 +299,7 @@ JX.behavior('pholio-mock-view', function(config) {
JX.Stratcom.addSigil(inlineSelection, "image_selection");
JX.DOM.appendContent(viewport, inlineSelection);
stage.addReticle(inlineSelection);
position_inline_rectangle(inline, inlineSelection);
@ -261,7 +319,8 @@ JX.behavior('pholio-mock-view', function(config) {
{phid: inline.phid});
JX.Stratcom.addSigil(inlineDraft, "image_selection");
JX.DOM.appendContent(viewport, inlineDraft);
stage.addReticle(inlineDraft);
}
}
}