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:
parent
9aedb3c3c1
commit
5a7d9fb522
3 changed files with 70 additions and 7 deletions
|
@ -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(
|
||||
|
|
|
@ -84,3 +84,7 @@
|
|||
background-color: #222;
|
||||
border-color: #555;
|
||||
}
|
||||
|
||||
.pholio-image-loading img {
|
||||
opacity: 0.50;
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue