revi-archive/phorge-phorge
1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-11-26 08:42:41 +01:00
Code Issues Releases Wiki Activity

Select portions from mock

Browse source 
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
This commit is contained in:
Lauri-Henrik Jalonen 2013-02-01 10:53:15 -08:00 committed by epriestley
parent e0dbc57521
commit 8ae7de51f9
3 changed files with 150 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
src/applications/pholio/view/PholioMockImagesView.php
View file

@ -13,20 +13,38 @@ final class PholioMockImagesView extends AphrontView {
throw new Exception("Call setMock() before render()!");
}
$main_image_id = celerity_generate_unique_node_id();
require_celerity_resource('javelin-behavior-pholio-mock-view');
$config = array('mainID' => $main_image_id);
Javelin::initBehavior('pholio-mock-view', $config);
$mockview = "";
$file = head($this->mock->getImages())->getFile();
$main_image = head($this->mock->getImages());
$main_image_id = celerity_generate_unique_node_id();
$main_image_tag = phutil_render_tag(
$main_image_tag = javelin_render_tag(
'img',
array(
'src' => $file->getBestURI(),
'class' => 'pholio-mock-image',
'id' => $main_image_id,
'src' => $main_image->getFile()->getBestURI(),
'sigil' => 'mock-image',
'class' => 'pholio-mock-image',
'meta' => array(
'fullSizeURI' => $main_image->getFile()->getBestURI(),
'imageID' => $main_image->getID(),
),
));
$main_image_tag = javelin_render_tag(
'div',
array(
'id' => 'mock-wrapper',
'sigil' => 'mock-wrapper',
'class' => 'pholio-mock-wrapper'
),
$main_image_tag
);
$mockview .= phutil_render_tag(
'div',
array(
@ -35,10 +53,6 @@ final class PholioMockImagesView extends AphrontView {
$main_image_tag);
if (count($this->mock->getImages()) > 1) {
require_celerity_resource('javelin-behavior-pholio-mock-view');
$config = array('mainID' => $main_image_id);
Javelin::initBehavior('pholio-mock-view', $config);
$thumbnails = array();
foreach ($this->mock->getImages() as $image) {
$thumbfile = $image->getFile();
@ -51,7 +65,7 @@ final class PholioMockImagesView extends AphrontView {
'class' => 'pholio-mock-carousel-thumbnail',
'meta' => array(
'fullSizeURI' => $thumbfile->getBestURI(),
'imageID' => $image->getID(),
'imageID' => $image->getID()
),
));
$thumbnails[] = $tag;
@ -67,5 +81,4 @@ final class PholioMockImagesView extends AphrontView {
return $mockview;
}
}

15
webroot/rsrc/css/application/pholio/pholio.css
View file

@ -18,6 +18,19 @@
}
.pholio-mock-image {
margin: 10px 0px;
display: inline-block;
}
.pholio-mock-select {
border: 1px solid #FF0000;
position: absolute;
}
.pholio-mock-wrapper {
position: relative;
display: inline-block;
cursor: crosshair;
padding: 0px;
margin: 10px 0px;
}

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

@ -2,8 +2,19 @@
* @provides javelin-behavior-pholio-mock-view
* @requires javelin-behavior
* javelin-stratcom
* javelin-dom
* javelin-vector
* javelin-event
*/
JX.behavior('pholio-mock-view', function(config) {
var is_dragging = false;
var wrapper = JX.$('mock-wrapper');
var image;
var imageData;
var startPos;
var endPos;
var selection;
JX.Stratcom.listen(
'click', // Listen for clicks...
'mock-thumbnail', // ...on nodes with sigil "mock-thumbnail".
@ -11,7 +22,106 @@ JX.behavior('pholio-mock-view', function(config) {
var data = e.getNodeData('mock-thumbnail');
var main = JX.$(config.mainID);
main.src = data.fullSizeURI;
});
JX.Stratcom.addData(
main,
{
fullSizeURI: data['fullSizeURI'],
imageID: data['imageID']
});
main.src = data.fullSizeURI;
JX.DOM.setContent(wrapper,main);
});
function draw_rectangle(node, current, init) {
JX.$V(
Math.abs(current.x-init.x),
Math.abs(current.y-init.y))
.setDim(node);
JX.$V(
(current.x-init.x < 0) ? current.x:init.x,
(current.y-init.y < 0) ? current.y:init.y)
.setPos(node);
}
function getRealXY(parent, point) {
var pos = {x: (point.x - parent.x), y: (point.y - parent.y)};
if (pos.x < 0) pos.x = 0;
else if (pos.x > image.clientWidth) pos.x = image.clientWidth - 1;
if (pos.y < 0) pos.y = 0;
else if (pos.y > image.clientHeight) pos.y = image.clientHeight - 2;
return pos;
}
JX.Stratcom.listen('mousedown', 'mock-wrapper', function(e) {
if (!e.isNormalMouseEvent()) {
return;
}
image = JX.$(config.mainID);
imageData = JX.Stratcom.getData(image);
e.getRawEvent().target.draggable = false;
is_dragging = true;
startPos = getRealXY(JX.$V(wrapper),JX.$V(e));
selection = JX.$N(
'div',
{className: 'pholio-mock-select'}
);
JX.$V(startPos.x,startPos.y).setPos(selection);
JX.DOM.appendContent(wrapper, selection);
});
JX.enableDispatch(document.body, 'mousemove');
JX.Stratcom.listen('mousemove',null, function(e) {
if (!is_dragging) {
return;
}
draw_rectangle(selection, getRealXY(JX.$V(wrapper), JX.$V(e)), startPos);
});
JX.Stratcom.listen(
'mouseup',
null,
function(e) {
if (!is_dragging) {
return;
}
is_dragging = false;
endPos = getRealXY(JX.$V(wrapper), JX.$V(e));
comment = window.prompt("Add your comment");
if (comment == null || comment == "") {
selection.remove();
return;
}
selection.title = comment;
console.log("ImageID: " + imageData['imageID'] +
", coords: (" + Math.min(startPos.x, endPos.x) + "," +
Math.min(startPos.y, endPos.y) + ") -> (" +
Math.max(startPos.x,endPos.x) + "," + Math.max(startPos.y,endPos.y) +
"), comment: " + comment);
});
});