mirror of
https://we.phorge.it/source/phorge.git
synced 2024-12-26 23:40:57 +01:00
5520dbfac6
Summary: Fixes T8036. In addition to making the mock edit work, this tightens quicksand code such that the correct page id is returned even if start() has not been called yet. It also tightens mock view where some functions should respect statics.enabled a bit more. Test Plan: clicked edit mock, mock crumb, edit mock, mock crum, edit mock, made edits and they worked! clicked edit mock, mock crumb, edit mock, mock crumb, edit mock, profile icon, hit browser back to edit mock, made edits and they worked! also observed mock view page not occasionally wigging out from image_onload race not having statics.enabled respect during the above Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin, epriestley Maniphest Tasks: T8036 Differential Revision: https://secure.phabricator.com/D12739
844 lines
21 KiB
JavaScript
844 lines
21 KiB
JavaScript
/**
|
|
* @provides javelin-behavior-pholio-mock-view
|
|
* @requires javelin-behavior
|
|
* javelin-util
|
|
* javelin-stratcom
|
|
* javelin-dom
|
|
* javelin-vector
|
|
* javelin-magical-init
|
|
* javelin-request
|
|
* javelin-history
|
|
* javelin-workflow
|
|
* javelin-mask
|
|
* javelin-behavior-device
|
|
* phabricator-keyboard-shortcut
|
|
*/
|
|
JX.behavior('pholio-mock-view', function(config, statics) {
|
|
var is_dragging = false;
|
|
|
|
var drag_begin;
|
|
var drag_end;
|
|
|
|
var selection_reticle;
|
|
var active_image;
|
|
|
|
var inline_comments = {};
|
|
|
|
function get_image_index(id) {
|
|
for (var ii = 0; ii < statics.images.length; ii++) {
|
|
if (statics.images[ii].id == id) {
|
|
return ii;
|
|
}
|
|
}
|
|
return null;
|
|
}
|
|
|
|
function get_image_navindex(id) {
|
|
for (var ii = 0; ii < statics.navsequence.length; ii++) {
|
|
if (statics.navsequence[ii] == id) {
|
|
return ii;
|
|
}
|
|
}
|
|
return null;
|
|
}
|
|
|
|
function get_image(id) {
|
|
var idx = get_image_index(id);
|
|
if (idx === null) {
|
|
return idx;
|
|
}
|
|
return statics.images[idx];
|
|
}
|
|
|
|
function onload_image(id) {
|
|
if (active_image.id != id) {
|
|
// The user has clicked another image before this one loaded, so just
|
|
// bail.
|
|
return;
|
|
}
|
|
|
|
active_image.tag = this;
|
|
redraw_image();
|
|
}
|
|
|
|
function switch_image(delta) {
|
|
if (!active_image) {
|
|
return;
|
|
}
|
|
var idx = get_image_navindex(active_image.id);
|
|
if (idx === null) {
|
|
return;
|
|
}
|
|
idx = (idx + delta + statics.navsequence.length) %
|
|
statics.navsequence.length;
|
|
select_image(statics.navsequence[idx]);
|
|
}
|
|
|
|
function redraw_image() {
|
|
if (!statics.enabled) {
|
|
return;
|
|
}
|
|
var new_y;
|
|
|
|
// If we don't have an image yet, just scale the stage relative to the
|
|
// entire viewport height so the jump isn't too jumpy when the image loads.
|
|
if (!active_image || !active_image.tag) {
|
|
new_y = (JX.Vector.getViewport().y * 0.80);
|
|
new_y = Math.max(320, new_y);
|
|
statics.panel.style.height = new_y + 'px';
|
|
|
|
return;
|
|
}
|
|
|
|
var tag = active_image.tag;
|
|
|
|
// If the image is too wide for the viewport, scale it down so it fits.
|
|
// If it is too tall, just let the viewport scroll.
|
|
var w = JX.Vector.getDim(statics.panel);
|
|
|
|
// Leave 24px margins on either side of the image.
|
|
w.x -= 48;
|
|
|
|
var scale = 1;
|
|
if (w.x < tag.naturalWidth) {
|
|
scale = Math.min(scale, w.x / tag.naturalWidth);
|
|
}
|
|
|
|
if (scale < 1) {
|
|
tag.width = Math.floor(scale * tag.naturalWidth);
|
|
tag.height = Math.floor(scale * tag.naturalHeight);
|
|
} else {
|
|
tag.width = tag.naturalWidth;
|
|
tag.height = tag.naturalHeight;
|
|
}
|
|
|
|
// Scale the viewport's vertical size to the image's adjusted size.
|
|
new_y = Math.max(320, tag.height + 48);
|
|
statics.panel.style.height = new_y + 'px';
|
|
|
|
statics.viewport.style.top = Math.floor((new_y - tag.height) / 2) + 'px';
|
|
|
|
statics.stage.endLoad();
|
|
|
|
JX.DOM.setContent(statics.viewport, tag);
|
|
|
|
redraw_inlines(active_image.id);
|
|
}
|
|
|
|
function select_image(image_id) {
|
|
active_image = get_image(image_id);
|
|
active_image.tag = null;
|
|
|
|
statics.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.stageURI;
|
|
|
|
var thumbs = JX.DOM.scry(
|
|
JX.$('pholio-mock-thumb-grid'),
|
|
'a',
|
|
'mock-thumbnail');
|
|
|
|
for(var k in thumbs) {
|
|
var thumb_meta = JX.Stratcom.getData(thumbs[k]);
|
|
|
|
JX.DOM.alterClass(
|
|
thumbs[k],
|
|
'pholio-mock-thumb-grid-current',
|
|
(active_image.id == thumb_meta.imageID));
|
|
}
|
|
|
|
load_inline_comments();
|
|
if (image_id != statics.selectedID) {
|
|
JX.History.replace(active_image.pageURI);
|
|
}
|
|
}
|
|
|
|
function resize_selection(min_size) {
|
|
var start = {
|
|
x: Math.min(drag_begin.x, drag_end.x),
|
|
y: Math.min(drag_begin.y, drag_end.y)
|
|
};
|
|
var end = {
|
|
x: Math.max(drag_begin.x, drag_end.x),
|
|
y: Math.max(drag_begin.y, drag_end.y)
|
|
};
|
|
|
|
var width = end.x - start.x;
|
|
var height = end.y - start.y;
|
|
var addon;
|
|
|
|
if (width < min_size) {
|
|
addon = (min_size-width)/2;
|
|
|
|
start.x = Math.max(0, start.x - addon);
|
|
end.x = Math.min(active_image.tag.naturalWidth, end.x + addon);
|
|
|
|
if (start.x === 0) {
|
|
end.x = Math.min(min_size, active_image.tag.naturalWidth);
|
|
} else if (end.x == active_image.tag.naturalWidth) {
|
|
start.x = Math.max(0, active_image.tag.naturalWidth - min_size);
|
|
}
|
|
}
|
|
|
|
if (height < min_size) {
|
|
addon = (min_size-height)/2;
|
|
|
|
start.y = Math.max(0, start.y - addon);
|
|
end.y = Math.min(active_image.tag.naturalHeight, end.y + addon);
|
|
|
|
if (start.y === 0) {
|
|
end.y = Math.min(min_size, active_image.tag.naturalHeight);
|
|
} else if (end.y == active_image.tag.naturalHeight) {
|
|
start.y = Math.max(0, active_image.tag.naturalHeight - min_size);
|
|
}
|
|
}
|
|
|
|
drag_begin = start;
|
|
drag_end = end;
|
|
redraw_selection();
|
|
}
|
|
|
|
function render_image_header(image) {
|
|
// Render image dimensions and visible size. If we have this infomation
|
|
// from the server we can display some of it immediately; otherwise, we need
|
|
// to wait for the image to load so we can read dimension information from
|
|
// it.
|
|
|
|
var image_x = image.width;
|
|
var image_y = image.height;
|
|
var display_x = null;
|
|
if (image.tag) {
|
|
image_x = image.tag.naturalWidth;
|
|
image_y = image.tag.naturalHeight;
|
|
display_x = image.tag.width;
|
|
}
|
|
|
|
var visible = [];
|
|
if (image_x) {
|
|
if (display_x) {
|
|
var area = Math.round(100 * (display_x / image_x));
|
|
visible.push(
|
|
JX.$N(
|
|
'span',
|
|
{className: 'pholio-visible-size'},
|
|
[area, '%']));
|
|
visible.push(' ');
|
|
}
|
|
visible.push(['(', image_x, ' \u00d7 ', image_y, ')']);
|
|
}
|
|
|
|
return visible;
|
|
}
|
|
|
|
function redraw_inlines(id) {
|
|
if (!statics.enabled) {
|
|
return;
|
|
}
|
|
|
|
if (!active_image) {
|
|
return;
|
|
}
|
|
|
|
if (active_image.id != id) {
|
|
return;
|
|
}
|
|
|
|
statics.stage.clearStage();
|
|
var comment_holder = JX.$('mock-image-description');
|
|
JX.DOM.setContent(comment_holder, render_image_info(active_image));
|
|
|
|
var image_header = JX.$('mock-image-header');
|
|
JX.DOM.setContent(image_header, render_image_header(active_image));
|
|
|
|
var inlines = inline_comments[active_image.id];
|
|
if (!inlines || !inlines.length) {
|
|
return;
|
|
}
|
|
|
|
for (var ii = 0; ii < inlines.length; ii++) {
|
|
var inline = inlines[ii];
|
|
|
|
if (!active_image.tag) {
|
|
// The image itself hasn't loaded yet, so we can't draw the inline
|
|
// reticles.
|
|
continue;
|
|
}
|
|
|
|
var classes = [];
|
|
if (!inline.transactionPHID) {
|
|
classes.push('pholio-mock-reticle-draft');
|
|
} else {
|
|
classes.push('pholio-mock-reticle-final');
|
|
}
|
|
|
|
var inline_selection = render_reticle(classes,
|
|
'pholio-mock-comment-icon phui-font-fa fa-comment');
|
|
statics.stage.addReticle(inline_selection, inline.id);
|
|
position_inline_rectangle(inline, inline_selection);
|
|
}
|
|
}
|
|
|
|
function position_inline_rectangle(inline, rect) {
|
|
var scale = get_image_scale();
|
|
|
|
JX.$V(scale * inline.x, scale * inline.y).setPos(rect);
|
|
JX.$V(scale * inline.width, scale * inline.height).setDim(rect);
|
|
}
|
|
|
|
function get_image_xy(p) {
|
|
var img = active_image.tag;
|
|
var imgp = JX.$V(img);
|
|
|
|
var scale = 1 / get_image_scale();
|
|
|
|
var x = scale * Math.max(0, Math.min(p.x - imgp.x, img.width));
|
|
var y = scale * Math.max(0, Math.min(p.y - imgp.y, img.height));
|
|
|
|
return {
|
|
x: x,
|
|
y: y
|
|
};
|
|
}
|
|
|
|
function get_image_scale() {
|
|
var img = active_image.tag;
|
|
return Math.min(
|
|
img.width / img.naturalWidth,
|
|
img.height / img.naturalHeight);
|
|
}
|
|
|
|
function redraw_selection() {
|
|
if (!statics.enabled) {
|
|
return;
|
|
}
|
|
|
|
var classes = ['pholio-mock-reticle-selection'];
|
|
selection_reticle = selection_reticle || render_reticle(classes, '');
|
|
|
|
var p = JX.$V(
|
|
Math.min(drag_begin.x, drag_end.x),
|
|
Math.min(drag_begin.y, drag_end.y));
|
|
|
|
var d = JX.$V(
|
|
Math.max(drag_begin.x, drag_end.x) - p.x,
|
|
Math.max(drag_begin.y, drag_end.y) - p.y);
|
|
|
|
var scale = get_image_scale();
|
|
|
|
p.x *= scale;
|
|
p.y *= scale;
|
|
d.x *= scale;
|
|
d.y *= scale;
|
|
|
|
statics.viewport.appendChild(selection_reticle);
|
|
p.setPos(selection_reticle);
|
|
d.setDim(selection_reticle);
|
|
}
|
|
|
|
function clear_selection() {
|
|
selection_reticle && JX.DOM.remove(selection_reticle);
|
|
selection_reticle = null;
|
|
}
|
|
|
|
function load_inline_comments() {
|
|
var id = active_image.id;
|
|
var inline_comments_uri = '/pholio/inline/list/' + id + '/';
|
|
|
|
new JX.Request(inline_comments_uri, function(r) {
|
|
inline_comments[id] = r;
|
|
redraw_inlines(id);
|
|
}).send();
|
|
}
|
|
|
|
|
|
/* -( Render )------------------------------------------------------------- */
|
|
|
|
|
|
function render_image_info(image) {
|
|
var info = [];
|
|
|
|
var buttons = [];
|
|
|
|
var classes = ['pholio-image-button'];
|
|
|
|
if (image.isViewable) {
|
|
classes.push('pholio-image-button-active');
|
|
} else {
|
|
classes.push('pholio-image-button-disabled');
|
|
}
|
|
|
|
buttons.push(
|
|
JX.$N(
|
|
'div',
|
|
{
|
|
className: classes.join(' ')
|
|
},
|
|
JX.$N(
|
|
image.isViewable ? 'a' : 'span',
|
|
{
|
|
href: image.fullURI,
|
|
target: '_blank',
|
|
className: 'pholio-image-button-link'
|
|
},
|
|
JX.$H(statics.fullIcon))));
|
|
|
|
classes = ['pholio-image-button', 'pholio-image-button-active'];
|
|
|
|
buttons.push(
|
|
JX.$N(
|
|
'form',
|
|
{
|
|
className: classes.join(' '),
|
|
action: image.downloadURI,
|
|
method: 'POST',
|
|
sigil: 'download'
|
|
},
|
|
JX.$N(
|
|
'button',
|
|
{
|
|
href: image.downloadURI,
|
|
className: 'pholio-image-button-link'
|
|
},
|
|
JX.$H(statics.downloadIcon))));
|
|
|
|
if (image.title === '') {
|
|
image.title = 'Untitled Masterpiece';
|
|
}
|
|
var title = JX.$N(
|
|
'div',
|
|
{className: 'pholio-image-title'},
|
|
image.title);
|
|
info.push(title);
|
|
|
|
if (!image.isObsolete) {
|
|
var img_len = statics.currentSetSize;
|
|
var rev = JX.$N(
|
|
'div',
|
|
{className: 'pholio-image-revision'},
|
|
JX.$H('Current Revision (' + img_len + ' images)'));
|
|
info.push(rev);
|
|
} else {
|
|
var prev = JX.$N(
|
|
'div',
|
|
{className: 'pholio-image-revision'},
|
|
JX.$H('(Previous Revision)'));
|
|
info.push(prev);
|
|
}
|
|
|
|
for (var ii = 0; ii < info.length; ii++) {
|
|
info[ii] = JX.$N('div', {className: 'pholio-image-info-item'}, info[ii]);
|
|
}
|
|
info = JX.$N('div', {className: 'pholio-image-info'}, info);
|
|
|
|
if (image.descriptionMarkup === '') {
|
|
return [buttons, info];
|
|
} else {
|
|
var desc = JX.$N(
|
|
'div',
|
|
{className: 'pholio-image-description'},
|
|
JX.$H(image.descriptionMarkup));
|
|
return [buttons, info, desc];
|
|
}
|
|
}
|
|
|
|
function render_reticle(classes, inner_classes) {
|
|
var inner = JX.$N('div', {className: inner_classes});
|
|
var outer = JX.$N(
|
|
'div',
|
|
{className: ['pholio-mock-reticle'].concat(classes).join(' ')}, inner);
|
|
return outer;
|
|
}
|
|
|
|
|
|
/* -( Device Lightbox )---------------------------------------------------- */
|
|
|
|
// On devices, we show images full-size when the user taps them instead of
|
|
// attempting to implement inlines.
|
|
|
|
var lightbox = null;
|
|
|
|
function lightbox_attach() {
|
|
JX.DOM.alterClass(document.body, 'lightbox-attached', true);
|
|
JX.Mask.show('jx-dark-mask');
|
|
|
|
lightbox = lightbox_render();
|
|
var image = JX.$N('img');
|
|
image.onload = lightbox_loaded;
|
|
setTimeout(function() {
|
|
image.src = active_image.stageURI;
|
|
}, 1000);
|
|
JX.DOM.setContent(lightbox, image);
|
|
JX.DOM.alterClass(lightbox, 'pholio-device-lightbox-loading', true);
|
|
|
|
lightbox_resize();
|
|
|
|
document.body.appendChild(lightbox);
|
|
}
|
|
|
|
function lightbox_detach() {
|
|
JX.DOM.remove(lightbox);
|
|
JX.Mask.hide();
|
|
JX.DOM.alterClass(document.body, 'lightbox-attached', false);
|
|
lightbox = null;
|
|
}
|
|
|
|
function lightbox_resize() {
|
|
if (!statics.enabled) {
|
|
return;
|
|
}
|
|
if (!lightbox) {
|
|
return;
|
|
}
|
|
JX.Vector.getScroll().setPos(lightbox);
|
|
JX.Vector.getViewport().setDim(lightbox);
|
|
}
|
|
|
|
function lightbox_loaded() {
|
|
JX.DOM.alterClass(lightbox, 'pholio-device-lightbox-loading', false);
|
|
}
|
|
|
|
function lightbox_render() {
|
|
var el = JX.$N('div', {className: 'pholio-device-lightbox'});
|
|
JX.Stratcom.addSigil(el, 'pholio-device-lightbox');
|
|
return el;
|
|
}
|
|
|
|
|
|
/* -( Preload )------------------------------------------------------------ */
|
|
|
|
|
|
function preload_next() {
|
|
var next_src = statics.preload[0];
|
|
if (!next_src) {
|
|
return;
|
|
}
|
|
statics.preload.splice(0, 1);
|
|
|
|
var img = JX.$N('img');
|
|
img.onload = preload_next;
|
|
img.onerror = preload_next;
|
|
img.src = next_src;
|
|
}
|
|
|
|
|
|
/* -( Installaton )-------------------------------------------------------- */
|
|
|
|
|
|
function update_statics(data) {
|
|
statics.enabled = true;
|
|
|
|
statics.mockID = data.mockID;
|
|
statics.commentFormID = data.commentFormID;
|
|
statics.images = data.images;
|
|
statics.selectedID = data.selectedID;
|
|
statics.loggedIn = data.loggedIn;
|
|
statics.logInLink = data.logInLink;
|
|
statics.navsequence = data.navsequence;
|
|
statics.downloadIcon = data.downloadIcon;
|
|
statics.fullIcon = data.fullIcon;
|
|
statics.currentSetSize = data.currentSetSize;
|
|
|
|
statics.stage = (function() {
|
|
var loading = false;
|
|
var stageElement = JX.$(data.panelID);
|
|
var viewElement = JX.$(data.viewportID);
|
|
var reticles = [];
|
|
|
|
function begin_load() {
|
|
if (loading) {
|
|
return;
|
|
}
|
|
loading = true;
|
|
clear_stage();
|
|
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, id) {
|
|
mark_ref(reticle, id);
|
|
reticles.push(reticle);
|
|
viewElement.appendChild(reticle);
|
|
}
|
|
|
|
function clear_stage() {
|
|
var ii;
|
|
for (ii = 0; ii < reticles.length; ii++) {
|
|
JX.DOM.remove(reticles[ii]);
|
|
}
|
|
reticles = [];
|
|
}
|
|
|
|
function mark_ref(node, id) {
|
|
JX.Stratcom.addSigil(node, 'pholio-inline-ref');
|
|
JX.Stratcom.addData(node, {inlineID: id});
|
|
}
|
|
|
|
return {
|
|
beginLoad: begin_load,
|
|
endLoad: end_load,
|
|
addReticle: add_reticle,
|
|
clearStage: clear_stage
|
|
};
|
|
})();
|
|
|
|
statics.panel = JX.$(data.panelID);
|
|
statics.viewport = JX.$(data.viewportID);
|
|
|
|
select_image(data.selectedID);
|
|
|
|
load_inline_comments();
|
|
if (data.loggedIn && data.commentFormID) {
|
|
JX.DOM.invoke(JX.$(data.commentFormID), 'shouldRefresh');
|
|
}
|
|
redraw_image();
|
|
|
|
statics.preload = [];
|
|
for (var ii = 0; ii < data.images.length; ii++) {
|
|
statics.preload.push(data.images[ii].stageURI);
|
|
}
|
|
|
|
preload_next();
|
|
|
|
}
|
|
|
|
function install_extra_listeners() {
|
|
JX.DOM.listen(statics.panel, 'gesture.swipe.end', null, function(e) {
|
|
var data = e.getData();
|
|
|
|
if (data.length <= (JX.Vector.getDim(statics.panel) / 2)) {
|
|
// If the user didn't move their finger far enough, don't switch.
|
|
return;
|
|
}
|
|
switch_image(data.direction == 'right' ? -1 : 1);
|
|
});
|
|
}
|
|
|
|
function install_mock_view() {
|
|
JX.enableDispatch(document.body, 'mouseenter');
|
|
JX.enableDispatch(document.body, 'mouseleave');
|
|
|
|
JX.Stratcom.listen(
|
|
['mouseenter', 'mouseover'],
|
|
'mock-panel',
|
|
function(e) {
|
|
JX.DOM.alterClass(e.getNode('mock-panel'), 'mock-has-cursor', true);
|
|
});
|
|
|
|
JX.Stratcom.listen('mouseleave', 'mock-panel', function(e) {
|
|
var node = e.getNode('mock-panel');
|
|
if (e.getTarget() == node) {
|
|
JX.DOM.alterClass(node, 'mock-has-cursor', false);
|
|
}
|
|
});
|
|
|
|
JX.Stratcom.listen(
|
|
'click',
|
|
'mock-thumbnail',
|
|
function(e) {
|
|
if (!e.isNormalMouseEvent()) {
|
|
return;
|
|
}
|
|
e.kill();
|
|
select_image(e.getNodeData('mock-thumbnail').imageID);
|
|
});
|
|
|
|
JX.Stratcom.listen('mousedown', 'mock-viewport', function(e) {
|
|
if (!e.isNormalMouseEvent()) {
|
|
return;
|
|
}
|
|
|
|
if (JX.Device.getDevice() != 'desktop') {
|
|
return;
|
|
}
|
|
|
|
if (JX.Stratcom.pass()) {
|
|
return;
|
|
}
|
|
|
|
if (is_dragging) {
|
|
return;
|
|
}
|
|
|
|
e.kill();
|
|
|
|
if (!active_image.isImage) {
|
|
// If this is a PDF or something like that, we eat the event but we
|
|
// don't let users add inlines to the thumbnail.
|
|
return;
|
|
}
|
|
|
|
is_dragging = true;
|
|
drag_begin = get_image_xy(JX.$V(e));
|
|
drag_end = drag_begin;
|
|
|
|
redraw_selection();
|
|
});
|
|
|
|
JX.enableDispatch(document.body, 'mousemove');
|
|
JX.Stratcom.listen('mousemove', null, function(e) {
|
|
if (!statics.enabled) {
|
|
return;
|
|
}
|
|
if (!is_dragging) {
|
|
return;
|
|
}
|
|
drag_end = get_image_xy(JX.$V(e));
|
|
redraw_selection();
|
|
});
|
|
|
|
JX.Stratcom.listen(
|
|
'mousedown',
|
|
'pholio-inline-ref',
|
|
function(e) {
|
|
e.kill();
|
|
|
|
var id = e.getNodeData('pholio-inline-ref').inlineID;
|
|
|
|
var active_id = active_image.id;
|
|
var handler = function(r) {
|
|
var inlines = inline_comments[active_id];
|
|
|
|
for (var ii = 0; ii < inlines.length; ii++) {
|
|
if (inlines[ii].id == id) {
|
|
if (r.id) {
|
|
inlines[ii] = r;
|
|
} else {
|
|
inlines.splice(ii, 1);
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
|
|
redraw_inlines(active_id);
|
|
JX.DOM.invoke(JX.$(statics.commentFormID), 'shouldRefresh');
|
|
};
|
|
|
|
new JX.Workflow('/pholio/inline/' + id + '/')
|
|
.setHandler(handler)
|
|
.start();
|
|
});
|
|
|
|
JX.Stratcom.listen(
|
|
'mouseup',
|
|
null,
|
|
function(e) {
|
|
if (!statics.enabled) {
|
|
return;
|
|
}
|
|
if (!is_dragging) {
|
|
return;
|
|
}
|
|
|
|
is_dragging = false;
|
|
if (!statics.loggedIn) {
|
|
new JX.Workflow(statics.logInLink).start();
|
|
return;
|
|
}
|
|
|
|
drag_end = get_image_xy(JX.$V(e));
|
|
|
|
resize_selection(16);
|
|
|
|
var data = {
|
|
mockID: statics.mockID,
|
|
imageID: active_image.id,
|
|
startX: Math.min(drag_begin.x, drag_end.x),
|
|
startY: Math.min(drag_begin.y, drag_end.y),
|
|
endX: Math.max(drag_begin.x, drag_end.x),
|
|
endY: Math.max(drag_begin.y, drag_end.y)
|
|
};
|
|
|
|
var handler = function(r) {
|
|
if (!inline_comments[active_image.id]) {
|
|
inline_comments[active_image.id] = [];
|
|
}
|
|
inline_comments[active_image.id].push(r);
|
|
|
|
redraw_inlines(active_image.id);
|
|
JX.DOM.invoke(JX.$(statics.commentFormID), 'shouldRefresh');
|
|
};
|
|
|
|
clear_selection();
|
|
|
|
new JX.Workflow('/pholio/inline/', data)
|
|
.setHandler(handler)
|
|
.start();
|
|
});
|
|
|
|
JX.Stratcom.listen('resize', null, redraw_image);
|
|
|
|
|
|
/* Keyboard Shortcuts */
|
|
new JX.KeyboardShortcut(['j', 'right'], 'Show next image.')
|
|
.setHandler(function() {
|
|
switch_image(1);
|
|
})
|
|
.register();
|
|
|
|
new JX.KeyboardShortcut(['k', 'left'], 'Show previous image.')
|
|
.setHandler(function() {
|
|
switch_image(-1);
|
|
})
|
|
.register();
|
|
|
|
|
|
/* Lightbox listeners */
|
|
JX.Stratcom.listen('click', 'mock-viewport', function(e) {
|
|
if (!e.isNormalMouseEvent()) {
|
|
return;
|
|
}
|
|
if (JX.Device.getDevice() == 'desktop') {
|
|
return;
|
|
}
|
|
lightbox_attach();
|
|
e.kill();
|
|
});
|
|
JX.Stratcom.listen('click', 'pholio-device-lightbox', lightbox_detach);
|
|
JX.Stratcom.listen('resize', null, lightbox_resize);
|
|
|
|
JX.Stratcom.listen(
|
|
'quicksand-redraw',
|
|
null,
|
|
function (e) {
|
|
var data = e.getData();
|
|
var new_config;
|
|
if (!data.newResponse.mockViewConfig) {
|
|
statics.enabled = false;
|
|
return;
|
|
}
|
|
if (data.fromServer) {
|
|
new_config = data.newResponse.mockViewConfig;
|
|
} else {
|
|
new_config = statics.mockViewConfigCache[data.newResponseID];
|
|
}
|
|
update_statics(new_config);
|
|
if (data.fromServer) {
|
|
install_extra_listeners();
|
|
}
|
|
});
|
|
}
|
|
|
|
if (!statics.installed) {
|
|
var current_page_id = JX.Quicksand.getCurrentPageID();
|
|
statics.mockViewConfigCache = {};
|
|
statics.mockViewConfigCache[current_page_id] = config;
|
|
update_statics(config);
|
|
|
|
statics.installed = install_mock_view();
|
|
install_extra_listeners();
|
|
}
|
|
|
|
});
|