@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
Select portions from mock
Summary: Applied fixes for issues mentioned in D4737#1&2
Test Plan: Verified that scripts seem to work as intended.
Reviewers: epriestley
CC: aran, Korvin
Maniphest Tasks: T2446
Differential Revision: https://secure.phabricator.com/D4782
authored by
Lauri-Henrik Jalonen
and committed by
epriestley
8ae7de51
e0dbc575
+150
-14
+26
-13
src/applications/pholio/view/PholioMockImagesView.php
+26
-13
src/applications/pholio/view/PholioMockImagesView.php
···
13
13
throw new Exception("Call setMock() before render()!");
14
14
}
15
15
16
-
$mockview = "";
16
+
$main_image_id = celerity_generate_unique_node_id();
17
+
require_celerity_resource('javelin-behavior-pholio-mock-view');
18
+
$config = array('mainID' => $main_image_id);
19
+
Javelin::initBehavior('pholio-mock-view', $config);
17
20
18
-
$file = head($this->mock->getImages())->getFile();
21
+
$mockview = "";
19
22
20
-
$main_image_id = celerity_generate_unique_node_id();
23
+
$main_image = head($this->mock->getImages());
21
24
22
-
$main_image_tag = phutil_render_tag(
25
+
$main_image_tag = javelin_render_tag(
23
26
'img',
24
27
array(
25
-
'src' => $file->getBestURI(),
28
+
'id' => $main_image_id,
29
+
'src' => $main_image->getFile()->getBestURI(),
30
+
'sigil' => 'mock-image',
26
31
'class' => 'pholio-mock-image',
27
-
'id' => $main_image_id,
28
-
));
32
+
'meta' => array(
33
+
'fullSizeURI' => $main_image->getFile()->getBestURI(),
34
+
'imageID' => $main_image->getID(),
35
+
),
36
+
));
37
+
38
+
$main_image_tag = javelin_render_tag(
39
+
'div',
40
+
array(
41
+
'id' => 'mock-wrapper',
42
+
'sigil' => 'mock-wrapper',
43
+
'class' => 'pholio-mock-wrapper'
44
+
),
45
+
$main_image_tag
46
+
);
29
47
30
48
$mockview .= phutil_render_tag(
31
49
'div',
···
35
53
$main_image_tag);
36
54
37
55
if (count($this->mock->getImages()) > 1) {
38
-
require_celerity_resource('javelin-behavior-pholio-mock-view');
39
-
$config = array('mainID' => $main_image_id);
40
-
Javelin::initBehavior('pholio-mock-view', $config);
41
-
42
56
$thumbnails = array();
43
57
foreach ($this->mock->getImages() as $image) {
44
58
$thumbfile = $image->getFile();
···
51
65
'class' => 'pholio-mock-carousel-thumbnail',
52
66
'meta' => array(
53
67
'fullSizeURI' => $thumbfile->getBestURI(),
54
-
'imageID' => $image->getID(),
68
+
'imageID' => $image->getID()
55
69
),
56
70
));
57
71
$thumbnails[] = $tag;
···
67
81
68
82
return $mockview;
69
83
}
70
-
71
84
}
+14
-1
webroot/rsrc/css/application/pholio/pholio.css
+14
-1
webroot/rsrc/css/application/pholio/pholio.css
···
18
18
}
19
19
20
20
.pholio-mock-image {
21
+
display: inline-block;
22
+
}
23
+
24
+
.pholio-mock-select {
25
+
border: 1px solid #FF0000;
26
+
position: absolute;
27
+
}
28
+
29
+
.pholio-mock-wrapper {
30
+
position: relative;
31
+
display: inline-block;
32
+
cursor: crosshair;
33
+
padding: 0px;
21
34
margin: 10px 0px;
22
-
display: inline-block;
23
35
}
36
+
+110
webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js
+110
webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js
···
2
2
* @provides javelin-behavior-pholio-mock-view
3
3
* @requires javelin-behavior
4
4
* javelin-stratcom
5
+
* javelin-dom
6
+
* javelin-vector
7
+
* javelin-event
5
8
*/
6
9
JX.behavior('pholio-mock-view', function(config) {
10
+
var is_dragging = false;
11
+
var wrapper = JX.$('mock-wrapper');
12
+
var image;
13
+
var imageData;
14
+
var startPos;
15
+
var endPos;
16
+
var selection;
17
+
7
18
JX.Stratcom.listen(
8
19
'click', // Listen for clicks...
9
20
'mock-thumbnail', // ...on nodes with sigil "mock-thumbnail".
···
11
22
var data = e.getNodeData('mock-thumbnail');
12
23
13
24
var main = JX.$(config.mainID);
25
+
JX.Stratcom.addData(
26
+
main,
27
+
{
28
+
fullSizeURI: data['fullSizeURI'],
29
+
imageID: data['imageID']
30
+
});
31
+
14
32
main.src = data.fullSizeURI;
33
+
34
+
JX.DOM.setContent(wrapper,main);
15
35
});
36
+
37
+
38
+
function draw_rectangle(node, current, init) {
39
+
JX.$V(
40
+
Math.abs(current.x-init.x),
41
+
Math.abs(current.y-init.y))
42
+
.setDim(node);
43
+
44
+
JX.$V(
45
+
(current.x-init.x < 0) ? current.x:init.x,
46
+
(current.y-init.y < 0) ? current.y:init.y)
47
+
.setPos(node);
48
+
}
49
+
50
+
function getRealXY(parent, point) {
51
+
var pos = {x: (point.x - parent.x), y: (point.y - parent.y)};
52
+
53
+
if (pos.x < 0) pos.x = 0;
54
+
else if (pos.x > image.clientWidth) pos.x = image.clientWidth - 1;
55
+
56
+
if (pos.y < 0) pos.y = 0;
57
+
else if (pos.y > image.clientHeight) pos.y = image.clientHeight - 2;
58
+
59
+
return pos;
60
+
}
61
+
62
+
JX.Stratcom.listen('mousedown', 'mock-wrapper', function(e) {
63
+
if (!e.isNormalMouseEvent()) {
64
+
return;
65
+
}
66
+
67
+
image = JX.$(config.mainID);
68
+
imageData = JX.Stratcom.getData(image);
69
+
70
+
e.getRawEvent().target.draggable = false;
71
+
is_dragging = true;
72
+
73
+
startPos = getRealXY(JX.$V(wrapper),JX.$V(e));
74
+
75
+
selection = JX.$N(
76
+
'div',
77
+
{className: 'pholio-mock-select'}
78
+
);
79
+
80
+
81
+
JX.$V(startPos.x,startPos.y).setPos(selection);
82
+
83
+
JX.DOM.appendContent(wrapper, selection);
84
+
85
+
86
+
});
87
+
88
+
JX.enableDispatch(document.body, 'mousemove');
89
+
JX.Stratcom.listen('mousemove',null, function(e) {
90
+
if (!is_dragging) {
91
+
return;
92
+
}
93
+
94
+
draw_rectangle(selection, getRealXY(JX.$V(wrapper), JX.$V(e)), startPos);
95
+
});
96
+
97
+
JX.Stratcom.listen(
98
+
'mouseup',
99
+
null,
100
+
function(e) {
101
+
if (!is_dragging) {
102
+
return;
103
+
}
104
+
is_dragging = false;
105
+
106
+
endPos = getRealXY(JX.$V(wrapper), JX.$V(e));
107
+
108
+
comment = window.prompt("Add your comment");
109
+
if (comment == null || comment == "") {
110
+
selection.remove();
111
+
return;
112
+
}
113
+
114
+
selection.title = comment;
115
+
116
+
console.log("ImageID: " + imageData['imageID'] +
117
+
", coords: (" + Math.min(startPos.x, endPos.x) + "," +
118
+
Math.min(startPos.y, endPos.y) + ") -> (" +
119
+
Math.max(startPos.x,endPos.x) + "," + Math.max(startPos.y,endPos.y) +
120
+
"), comment: " + comment);
121
+
122
+
});
123
+
16
124
});
17
125
126
+
127
+