@recaptime-dev's working patches + fork for Phorge, a community fork of Phabricator. (Upstream dev and stable branches are at upstream/main and upstream/stable respectively.)
hq.recaptime.dev/wiki/Phorge
phorge
phabricator
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
+70
-7
+3
-3
src/__celerity_resource_map__.php
+3
-3
src/__celerity_resource_map__.php
···
1891
1891
),
1892
1892
'javelin-behavior-pholio-mock-view' =>
1893
1893
array(
1894
-
'uri' => '/res/06c92cdf/rsrc/js/application/pholio/behavior-pholio-mock-view.js',
1894
+
'uri' => '/res/c2586731/rsrc/js/application/pholio/behavior-pholio-mock-view.js',
1895
1895
'type' => 'js',
1896
1896
'requires' =>
1897
1897
array(
···
3236
3236
),
3237
3237
'pholio-css' =>
3238
3238
array(
3239
-
'uri' => '/res/b74040b8/rsrc/css/application/pholio/pholio.css',
3239
+
'uri' => '/res/99777600/rsrc/css/application/pholio/pholio.css',
3240
3240
'type' => 'css',
3241
3241
'requires' =>
3242
3242
array(
···
3245
3245
),
3246
3246
'pholio-inline-comments-css' =>
3247
3247
array(
3248
-
'uri' => '/res/241b121c/rsrc/css/application/pholio/pholio-inline-comments.css',
3248
+
'uri' => '/res/af95f0a6/rsrc/css/application/pholio/pholio-inline-comments.css',
3249
3249
'type' => 'css',
3250
3250
'requires' =>
3251
3251
array(
+4
webroot/rsrc/css/application/pholio/pholio.css
+4
webroot/rsrc/css/application/pholio/pholio.css
+63
-4
webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js
+63
-4
webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js
···
22
22
23
23
var inline_comments = {};
24
24
25
+
26
+
/* -( Stage )-------------------------------------------------------------- */
27
+
28
+
29
+
var stage = (function() {
30
+
var loading = false;
31
+
var stageElement = JX.$(config.panelID);
32
+
var viewElement = JX.$(config.viewportID);
33
+
var reticles = [];
34
+
35
+
function begin_load() {
36
+
if (loading) {
37
+
return;
38
+
}
39
+
loading = true;
40
+
clear_reticles();
41
+
draw_loading();
42
+
}
43
+
44
+
function end_load() {
45
+
if (!loading) {
46
+
return;
47
+
}
48
+
loading = false;
49
+
draw_loading();
50
+
}
51
+
52
+
function draw_loading() {
53
+
JX.DOM.alterClass(stageElement, 'pholio-image-loading', loading);
54
+
}
55
+
56
+
function add_reticle(reticle) {
57
+
reticles.push(reticle);
58
+
viewElement.appendChild(reticle);
59
+
}
60
+
61
+
function clear_reticles() {
62
+
for (var ii = 0; ii < reticles.length; ii++) {
63
+
JX.DOM.remove(reticles[ii]);
64
+
}
65
+
reticles = [];
66
+
}
67
+
68
+
return {
69
+
beginLoad: begin_load,
70
+
endLoad: end_load,
71
+
addReticle: add_reticle,
72
+
clearReticles: clear_reticles
73
+
};
74
+
})();
75
+
25
76
function get_image(id) {
26
77
for (var ii = 0; ii < config.images.length; ii++) {
27
78
if (config.images[ii].id == id) {
···
73
124
viewport.style.top = '';
74
125
}
75
126
76
-
// NOTE: This also clears inline comment reticles.
127
+
stage.endLoad();
128
+
77
129
JX.DOM.setContent(viewport, tag);
78
130
79
131
redraw_inlines(active_image.id);
···
82
134
function select_image(image_id) {
83
135
active_image = get_image(image_id);
84
136
active_image.tag = null;
137
+
138
+
stage.beginLoad();
85
139
86
140
var img = JX.$N('img', {className: 'pholio-mock-image'});
87
141
img.onload = JX.bind(img, onload_image, active_image.id);
···
105
159
}
106
160
107
161
JX.Stratcom.listen(
108
-
'click',
162
+
['mousedown', 'click'],
109
163
'mock-thumbnail',
110
164
function(e) {
165
+
if (!e.isNormalMouseEvent()) {
166
+
return;
167
+
}
111
168
e.kill();
112
169
select_image(e.getNodeData('mock-thumbnail').imageID);
113
170
});
···
212
269
213
270
var comment_holder = JX.$('mock-inline-comments');
214
271
JX.DOM.setContent(comment_holder, '');
272
+
stage.clearReticles();
215
273
216
274
var inlines = inline_comments[active_image.id];
217
275
if (!inlines || !inlines.length) {
···
241
299
242
300
JX.Stratcom.addSigil(inlineSelection, "image_selection");
243
301
244
-
JX.DOM.appendContent(viewport, inlineSelection);
302
+
stage.addReticle(inlineSelection);
245
303
246
304
position_inline_rectangle(inline, inlineSelection);
247
305
···
261
319
{phid: inline.phid});
262
320
263
321
JX.Stratcom.addSigil(inlineDraft, "image_selection");
264
-
JX.DOM.appendContent(viewport, inlineDraft);
322
+
323
+
stage.addReticle(inlineDraft);
265
324
}
266
325
}
267
326
}