mujma: ENHANCEMENT: Added preserving ratio during resize.

(merged from branches/gsoc)


git-svn-id: svn://svn.silverstripe.com/silverstripe/open/modules/cms/trunk@42048 467b73ca-7a2a-4603-9d3b-597d59a354a9
This commit is contained in:
Ingo Schommer 2007-09-16 02:24:11 +00:00
parent 296344fd15
commit 2d04f8e14b
3 changed files with 32 additions and 18 deletions

View File

@ -84,6 +84,16 @@ var Crop = {
},
onResize: function(width,height) {
if(width + parseInt(this.cropBox.style.left) > Element.getDimensions(this.imageContainer).width) {
this.cropBox.style.left = parseInt(this.cropBox.style.left) - Math.abs(Element.getDimensions(this.imageContainer).width - (width + parseInt(this.cropBox.style.left))) + "px";
}
if(parseInt(this.cropBox.style.left) < 0) {
this.cropBox.style.left = "0px";
}
if(width > Element.getDimensions(this.imageContainer).width) {
this.cropBox.style.width = Element.getDimensions(this.imageContainer).width + "px";
width = Element.getDimensions(this.imageContainer).width;
}
this.placeGreyBox(width,height);
},
getMousePos: function(event) {

View File

@ -5,7 +5,7 @@ var Resize = {
initialize: function(element) {
this.element = element;
this.leftBoxConstraint = 2;
this.leftBoxConstraint = 1;
this.topBoxConstraint = 0;
this.getRelativeMousePos = Resize.getRelativeMousePos.bind(this);
options = {

View File

@ -25,12 +25,13 @@ Resizeable = {
}
},
leftUpperDrag: function(event,top,left,height,width,parentTop,parentLeft,relativeMouseX,relativeMouseY) {
newWidth = left - relativeMouseX + width;
leftUpperDrag: function(event,top,left,height,width,parentTop,parentLeft,relativeMouseX,relativeMouseY,ratio) {
newHeight = top - relativeMouseY + height;
newWidth = Math.round(newHeight / ratio);
if(this.resize(newWidth,newHeight)) {
this.element.style.top = top - (newHeight - height) + "px";
this.element.style.left = left - (newWidth - width) + "px";
this.element.style.left = left - (newWidth - width) + "px";
if(parseInt(this.element.style.left) < 0) this.element.style.left = "1px";
}
},
@ -39,16 +40,19 @@ Resizeable = {
if(this.resize(newWidth,-1000)) this.element.style.left = left - (left - relativeMouseX) + "px";
},
leftLowerDrag: function(event,top,left,height,width,parentTop,parentLeft,relativeMouseX,relativeMouseY) {
newWidth = left - relativeMouseX + width;
leftLowerDrag: function(event,top,left,height,width,parentTop,parentLeft,relativeMouseX,relativeMouseY,ratio) {
newHeight = relativeMouseY - (top + height) + height;
if(this.resize(newWidth,newHeight)) this.element.style.left = left - (left - relativeMouseX) + "px";
newWidth = Math.round(newHeight / ratio);
if(this.resize(newWidth,newHeight)) {
this.element.style.left = left - (newWidth - width) + "px";
if(parseInt(this.element.style.left) < 0) this.element.style.left = "1px";
}
},
rightUpperDrag: function(event,top,left,height,width,parentTop,parentLeft,relativeMouseX,relativeMouseY) {
newWidth = relativeMouseX - left - width + width;
newHeight = top - relativeMouseY + height;
if(this.resize(newWidth,newHeight)) this.element.style.top = (top - (newHeight - height) ) + 'px';
rightUpperDrag: function(event,top,left,height,width,parentTop,parentLeft,relativeMouseX,relativeMouseY,ratio) {
newHeight = top - relativeMouseY + height;
newWidth = Math.round(newHeight / ratio);
if(this.resize(newWidth,newHeight)) this.element.style.top = (top - (newHeight - height) ) + 'px';
},
rightMiddleDrag: function(event,top,left,height,width,parentTop,parentLeft,relativeMouseX,relativeMouseY) {
@ -56,9 +60,9 @@ Resizeable = {
this.resize(newWidth,-1000);
},
rightLowerDrag: function(event,top,left,height,width,parentTop,parentLeft,relativeMouseX,relativeMouseY) {
newWidth = relativeMouseX - left;
rightLowerDrag: function(event,top,left,height,width,parentTop,parentLeft,relativeMouseX,relativeMouseY,ratio) {
newHeight = relativeMouseY - top;
newWidth = Math.round(newHeight / ratio);
this.resize(newWidth,newHeight);
},
@ -76,26 +80,26 @@ Resizeable = {
onResize: function(event) {
if(EventStack.getLastEventElement() != null && this.isVisible && this.isEnabled) {
lastEventElement = EventStack.getLastEventElement();
lastEventElement = EventStack.getLastEventElement();
var relativeMouseX = this.getMousePos(event).x - this.element.getParentLeft();
var relativeMouseY = this.getMousePos(event).y - this.element.getParentTop();
if(Element.hasClassName(lastEventElement,'leftUpperClickBox')) {
this.leftUpperDrag(event,this.element.getTop(),this.element.getLeft(),this.element.getHeight(),this.element.getWidth(),this.element.getParentTop(),this.element.getParentLeft(),relativeMouseX,relativeMouseY);
this.leftUpperDrag(event,this.element.getTop(),this.element.getLeft(),this.element.getHeight(),this.element.getWidth(),this.element.getParentTop(),this.element.getParentLeft(),relativeMouseX,relativeMouseY,this.originalHeight/this.originalWidth);
}
if(Element.hasClassName(lastEventElement,'leftMiddleClickBox')) {
this.leftMiddleDrag(event,this.element.getTop(),this.element.getLeft(),this.element.getHeight(),this.element.getWidth(),this.element.getParentTop(),this.element.getParentLeft(),relativeMouseX,relativeMouseY);
}
if(Element.hasClassName(lastEventElement,'leftLowerClickBox')) {
this.leftLowerDrag(event,this.element.getTop(),this.element.getLeft(),this.element.getHeight(),this.element.getWidth(),this.element.getParentTop(),this.element.getParentLeft(),relativeMouseX,relativeMouseY);
this.leftLowerDrag(event,this.element.getTop(),this.element.getLeft(),this.element.getHeight(),this.element.getWidth(),this.element.getParentTop(),this.element.getParentLeft(),relativeMouseX,relativeMouseY,this.originalHeight/this.originalWidth);
}
if(Element.hasClassName(lastEventElement,'rightUpperClickBox')) {
this.rightUpperDrag(event,this.element.getTop(),this.element.getLeft(),this.element.getHeight(),this.element.getWidth(),this.element.getParentTop(),this.element.getParentLeft(),relativeMouseX,relativeMouseY);
this.rightUpperDrag(event,this.element.getTop(),this.element.getLeft(),this.element.getHeight(),this.element.getWidth(),this.element.getParentTop(),this.element.getParentLeft(),relativeMouseX,relativeMouseY,this.originalHeight/this.originalWidth);
}
if(Element.hasClassName(lastEventElement,'rightMiddleClickBox')) {
this.rightMiddleDrag(event,this.element.getTop(),this.element.getLeft(),this.element.getHeight(),this.element.getWidth(),this.element.getParentTop(),this.element.getParentLeft(),relativeMouseX,relativeMouseY);
}
if(Element.hasClassName(lastEventElement,'rightLowerClickBox')) {
this.rightLowerDrag(event,this.element.getTop(),this.element.getLeft(),this.element.getHeight(),this.element.getWidth(),this.element.getParentTop(),this.element.getParentLeft(),relativeMouseX,relativeMouseY);
this.rightLowerDrag(event,this.element.getTop(),this.element.getLeft(),this.element.getHeight(),this.element.getWidth(),this.element.getParentTop(),this.element.getParentLeft(),relativeMouseX,relativeMouseY,this.originalHeight/this.originalWidth);
}
if(Element.hasClassName(lastEventElement,'upperMiddleClickBox')) {
this.upperMiddleDrag(event,this.element.getTop(),this.element.getLeft(),this.element.getHeight(),this.element.getWidth(),this.element.getParentTop(),this.element.getParentLeft(),relativeMouseX,relativeMouseY);