HomePhorge
Diffusion Phorge (master) Code

phorge/webroot/rsrc/js/core/behavior-crop.js
a265e10c42d8master

Last Change
Raw File

behavior-crop.js
View Options

/**
* @provides javelin-behavior-aphront-crop
* @requires javelin-behavior
* javelin-dom
* javelin-vector
* javelin-magical-init
*/
JX.behavior('aphront-crop', function(config) {
var dragging = false;
var startX, startY;
var finalX, finalY;
var dScale = config.scale;
var cropBox = JX.$(config.cropBoxID);
var basePos = JX.$V(cropBox);
cropBox.style.height = config.height + 'px';
cropBox.style.width = config.width + 'px';
var baseD = JX.$V(config.width, config.height);
var image = JX.DOM.find(cropBox, 'img', 'crop-image');
image.style.height = (config.imageH * config.scale) + 'px';
image.style.width = (config.imageW * config.scale) + 'px';
var imageD = JX.$V(
config.imageW * config.scale,
config.imageH * config.scale
);
var minLeft = baseD.x - imageD.x;
var minTop = baseD.y - imageD.y;
var minScale = Math.min(
config.width / config.imageW,
config.height / config.imageH,
1
);
var maxScale = Math.max(
config.imageW / config.width,
config.imageH / config.height,
2
);
var ondrag = function(e) {
e.kill();
dragging = true;
var p = JX.$V(e);
startX = p.x;
startY = p.y;
};
var onmove = function(e) {
if (!dragging) {
return;
}
e.kill();
var p = JX.$V(e);
var dx = startX - p.x;
var dy = startY - p.y;
var imagePos = JX.$V(image);
var moveLeft = imagePos.x - basePos.x - dx;
var moveTop = imagePos.y - basePos.y - dy;
image.style.left = Math.min(Math.max(minLeft, moveLeft), 0) + 'px';
image.style.top = Math.min(Math.max(minTop, moveTop), 0) + 'px';
// reset these; a new beginning!
startX = p.x;
startY = p.y;
// save off where we are right now
imagePos = JX.$V(image);
finalX = Math.abs(imagePos.x - basePos.x);
finalY = Math.abs(imagePos.y - basePos.y);
JX.DOM.find(cropBox, 'input', 'crop-x').value = finalX;
JX.DOM.find(cropBox, 'input', 'crop-y').value = finalY;
};
var ondrop = function(e) {
if (!dragging) {
return;
}
dragging = false;
};
// NOTE: Javelin does not dispatch mousemove by default.
JX.enableDispatch(cropBox, 'mousemove');
JX.DOM.listen(cropBox, 'mousedown', [], ondrag);
JX.DOM.listen(cropBox, 'mousemove', [], onmove);
JX.DOM.listen(cropBox, 'mouseup', [], ondrop);
JX.DOM.listen(cropBox, 'mouseout', [], ondrop);
});

Owner Packages

  • No Owners