mujma: All ImageEditor? files will be placed in cms part rather than in sapphire. (merged from branches/gsoc)

git-svn-id: svn://svn.silverstripe.com/silverstripe/open/modules/sapphire/trunk@41715 467b73ca-7a2a-4603-9d3b-597d59a354a9
This commit is contained in:
Ingo Schommer 2007-09-14 01:48:04 +00:00
parent c5ba47f783
commit fcf8302bba
11 changed files with 0 additions and 835 deletions

View File

@ -1,143 +0,0 @@
/**
* @author Mateusz
*/
var Crop = {
initialize: function() {
this.cropBox = $('cropBox');
new Positioning.addBehaviour(this.cropBox);
this.imageContainer = $('imageContainer');
this.leftGreyBox = $('leftGreyBox');
this.rightGreyBox = $('rightGreyBox');
this.upperGreyBox = $('upperGreyBox');
this.lowerGreyBox = $('lowerGreyBox');
options = {
resizeStop: Crop.resizeStop.bind(this),
onDrag: Crop.onDrag.bind(this),
onResize: Crop.onResize.bind(this),
getMousePos: Crop.getMousePos.bind(this)
};
this.centerCropBox = Crop.centerCropBox.bind(this);
this.placeGreyBox = Crop.placeGreyBox.bind(this);
this.setListeners = Crop.setListeners.bind(this);
this.onCropStop = Crop.onCropStop.bind(this);
this.onCropStart = Crop.onCropStart.bind(this);
this.onCropOk = Crop.onCropOk.bind(this);
this.onCropCancel = Crop.onCropCancel.bind(this);
this.doCrop = Crop.doCrop.bind(this);
this.setVisible = Crop.setVisible.bind(this);
Event.observe('image','load',this.centerCropBox);
this.resizeCropBox = new Resizeable.initialize(this.cropBox,options);
Event.observe(this.cropBox,'dblclick',this.onCropStop);
this.setListeners();
this.setVisible(false);
},
resizeStop: function(event) {
EventStack.clearStack();
this.resizeCropBox.originalHeight = this.cropBox.getHeight();
this.resizeCropBox.originalWidth = this.cropBox.getWidth();
},
onDrag: function() {
if(this.cropBox.getLeft() <= 0 ) this.cropBox.style.left = '0px';
if(this.cropBox.getTop() <= 0 ) this.cropBox.style.top = '0px';
if(this.cropBox.getLeft() + this.cropBox.getWidth() > this.cropBox.getParentWidth()) this.cropBox.style.left = this.cropBox.getParentWidth()- this.cropBox.getWidth() + 'px';
if(this.cropBox.getTop() + this.cropBox.getHeight() > this.cropBox.getParentHeight()) this.cropBox.style.top = this.cropBox.getParentHeight() - this.cropBox.getHeight() + 'px';
this.placeGreyBox();
},
centerCropBox: function() {
this.cropBox.style.width = this.cropBox.getParentWidth()/2 + 'px';
this.cropBox.style.height = this.cropBox.getParentHeight()/2 + 'px';
this.cropBox.style.left = (this.cropBox.getParentWidth() - this.cropBox.getWidth())/2 + "px";
this.cropBox.style.top = (this.cropBox.getParentHeight() - this.cropBox.getHeight())/2 + "px";
this.placeGreyBox();
this.leftBoxConstraint = this.cropBox.getParentLeft();
this.topBoxConstraint = this.cropBox.getParentTop();
this.rightBoxConstraint = this.cropBox.getParentLeft() + this.cropBox.getParentWidth();
this.bottomBoxConstraint = this.cropBox.getParentTop() + this.cropBox.getParentHeight()-1;//hack without 1 doesn't work;
},
placeGreyBox: function() {
this.leftGreyBox.style.width = this.cropBox.getLeft() + "px";
this.leftGreyBox.style.height = "100%";
this.rightGreyBox.style.width = this.cropBox.getParentWidth() - this.cropBox.getLeft() - this.cropBox.getWidth() + "px";
this.rightGreyBox.style.height = "100%";
this.rightGreyBox.style.left = this.cropBox.getLeft() + this.cropBox.getWidth() + "px";
this.upperGreyBox.style.width = this.cropBox.getWidth() + 'px';
this.upperGreyBox.style.left = this.cropBox.getLeft() + 'px';
this.upperGreyBox.style.height = this.cropBox.getTop() + 'px';
this.lowerGreyBox.style.width = "100%";
this.lowerGreyBox.style.height = this.cropBox.getParentHeight() - this.cropBox.getTop() - this.cropBox.getHeight() + "px";
this.lowerGreyBox.style.top = this.cropBox.getTop() + this.cropBox.getHeight() + "px";
this.lowerGreyBox.style.width = this.cropBox.getWidth() + 'px';
this.lowerGreyBox.style.left = this.cropBox.getLeft() + 'px';
},
onResize: function(event) {
x = Event.pointerX(event);
this.placeGreyBox();
},
getMousePos: function(event) {
x = Event.pointerX(event);
y = Event.pointerY(event);
if(x <= this.leftBoxConstraint) x = this.leftBoxConstraint;
if(y <= this.topBoxConstraint) y = this.topBoxConstraint;
if(x >= this.rightBoxConstraint) x = this.rightBoxConstraint;
if(y >= this.bottomBoxConstraint) y = this.bottomBoxConstraint;
return {x: x,y: y};
},
onCropStop: function(event) {
this.doCrop();
},
doCrop: function() {
newWidth = this.cropBox.getWidth()
newHeight = this.cropBox.getHeight() ;
startTop = this.cropBox.getTop() ;
startLeft = this.cropBox.getLeft() ;
if(newWidth > 30 && newHeight > 30) {
imageTransformation.crop(startTop,startLeft,newWidth,newHeight);
imageHistory.enable();
} else {
alert('Crop area too small');
}
},
setListeners: function() {
Event.observe('cropStart','click',this.onCropStart);
Event.observe('cropOk','click',this.onCropOk);
Event.observe('cropCancel','click',this.onCropCancel);
},
onCropStart: function() {
this.setVisible(true);
Element.show($('cropOk'),$('cropCancel'));
imageHistory.disable();
},
onCropOk: function() {
Element.hide($('cropOk'),$('cropCancel'));
this.doCrop();
},
onCropCancel: function() {
Element.hide($('cropOk'),$('cropCancel'));
this.setVisible(false);
imageHistory.enable();
},
setVisible: function(setVisible) {
if(setVisible) {
Element.show(this.cropBox,this.leftGreyBox,this.rightGreyBox,this.upperGreyBox,this.lowerGreyBox);
this.centerCropBox();
this.placeGreyBox();
} else {
Element.hide(this.cropBox,this.leftGreyBox,this.rightGreyBox,this.upperGreyBox,this.lowerGreyBox,$('cropOk'),$('cropCancel'));
}
resize.imageContainerResize.setVisible(!setVisible);
this.resizeCropBox.setVisible(setVisible);
}
}

View File

@ -1,18 +0,0 @@
/**
* @author Mateusz
*/
var Effects = {
initialize: function() {
this.setListeners = Effects.setListeners.bind(this);
this.rotate = Effects.rotate.bind(this);
this.setListeners();
},
rotate: function() {
imageTransformation.rotate(90);
},
setListeners: function() {
Event.observe('rotateButton','click',this.rotate);
}
}

View File

@ -1,9 +0,0 @@
/**
* @author Mateusz
*/
var Environment = {
initialize: function (imageFile) {
imageBox = new ImageBox.initialize();
image = new Image.initialize(imageFile);
},
}

View File

@ -1,30 +0,0 @@
/**
* @author Mateusz
*/
var Image = {
initialize: function(imageFile) {
this.image = $('image');
this.image.src = imageFile;
this.reportSize = Image.reportSize.bind(this);
this.onImageLoad = Image.onImageLoad.bind(this);
Event.observe('image','load',this.onImageLoad);
imageHistory.add('initialize',this.image.src);
},
reportSize: function() {
$('imageWidth').innerHTML = this.image.width + "px";
$('imageHeight').innerHTML = this.image.height + "px";
},
onImageLoad: function() {
this.reportSize();
if(resize.imageContainerResize.originalHeight == 0 && resize.imageContainerResize.originalWidth == 0) {
imageBox.center();
}
$('imageContainer').style.width = this.image.width + 'px';
$('imageContainer').style.height = this.image.height + 'px';
resize.imageContainerResize.originalWidth = this.image.width;
resize.imageContainerResize.originalHeight = this.image.height;
},
};

View File

@ -1,51 +0,0 @@
/**
* @author Mateusz
*/
var ImageBox = {
initialize: function() {
this.showIndicator = ImageBox.showIndicator.bind(this);
this.hideIndicator = ImageBox.hideIndicator.bind(this);
this.reCenterIndicator = ImageBox.reCenterIndicator.bind(this);
this.centerIndicator = ImageBox.centerIndicator.bind(this);
this.center = ImageBox.center.bind(this);
this.imageContainer = $('imageContainer');
Element.hide(this.imageContainer);
},
showIndicator: function() {
this.centerIndicator();
indicator.style.display = 'inline';
},
hideIndicator: function() {
indicator = $('loadingIndicatorContainer');
indicator.style.display = 'none';
},
centerIndicator: function() {
indicator = $('loadingIndicatorContainer');
indicatorImage = $('loadingIndicator');
top = this.imageContainer.getTop();
left = this.imageContainer.getLeft();
width = this.imageContainer.getWidth();
height = this.imageContainer.getHeight();
indicator.style.left = left + width/2 - indicatorImage.width/2 + "px";
indicator.style.top = top + height/2 - indicatorImage.height/2 + "px";
},
reCenterIndicator: function() {
if($('loadingIndicatorContainer').style.display == 'inline') {
this.centerIndicator();
}
},
center: function() {
document.title = this.imageContainer.getParentWidth();
$('imageContainer').style.left = this.imageContainer.getParentWidth()/2 - this.imageContainer.getWidth()/2 + 'px';
$('imageContainer').style.top = this.imageContainer.getParentHeight()/2 - this.imageContainer.getHeight()/2 + 'px';
Element.show(this.imageContainer);
}
};

View File

@ -1,88 +0,0 @@
/**
* @author Mateusz
*/
var ImageHistory = {
initialize: function() {
this.history = new Array();
this.historyPointer = -1;
this.modifiedOriginalImage = false;
this.undo = ImageHistory.undo.bind(this);
this.redo = ImageHistory.redo.bind(this);
this.add = ImageHistory.add.bind(this);
this.addLinsteners = ImageHistory.addLinsteners.bind(this);
this.addLinsteners();
this.operationMade = ImageHistory.operationMade.bind(this);
this.onFakeImageLoad = ImageHistory.onFakeImageLoad.bind(this);
this.enable = ImageHistory.enable.bind(this);
this.disable = ImageHistory.disable.bind(this);
},
undo: function() {
if(this.historyPointer >= 1) {
image = $('image');
fakeImage = $('fakeImg');
operation = this.history[this.historyPointer].operation;
if(operation == 'rotate' || operation == 'crop') {
if(this.operationMade(this.historyPointer-1,'rotate') || this.operationMade(this.historyPointer-1,'crop'))
this.modifiedOriginalImage = true; else this.modifiedOriginalImage = false;
}
image.src = this.history[this.historyPointer-1].fileUrl;
fakeImage.src = this.history[this.historyPointer-1].fileUrl;
Event.observe('fakeImg','load',this.onFakeImageLoad);
this.historyPointer--;
} else {
alert("No more undo");
}
},
redo: function() {
if(this.historyPointer < this.history.length-1) {
operation = this.history[this.historyPointer+1].operation;
if(operation == 'rotate' || operation == 'crop') this.modifiedOriginalImage = true;
$('image').src = this.history[this.historyPointer+1].fileUrl;
$('fakeImg').src = $('image').src;
Event.observe('fakeImg','load',this.onFakeImageLoad);
this.historyPointer++;
} else {
alert("No more redo");
}
},
add: function(operation,url) {
this.historyPointer++;
this.history[this.historyPointer] = {'operation': operation,'fileUrl' : url};
if(operation == 'rotate' || operation == 'crop') this.modifiedOriginalImage = true;
},
addLinsteners: function() {
this.undoListener = Event.observe('undoButton','click',this.undo);
this.redoListener = Event.observe('redoButton','click',this.redo);
},
operationMade: function(historyPointer,operation) {
for(i=historyPointer;i>=0;i--) {
if(this.history[i].operation == operation) {
return true;
}
}
return false;
},
onFakeImageLoad: function() {
$('imageContainer').style.width = fakeImage.width + 'px';
$('imageContainer').style.height = fakeImage.height + 'px';
resize.imageContainerResize.originalWidth = fakeImage.width;
resize.imageContainerResize.originalHeight = fakeImage.height;
resize.imageContainerResize.placeClickBox();
},
enable: function() {
this.addLinsteners();
},
disable: function() {
Event.stopObserving($('undoButton'),'click', this.undo);
Event.stopObserving($('redoButton'),'click', this.redo);
},
};

View File

@ -1,67 +0,0 @@
/**
* @author Mateusz
*/
var ImageTransformation = {
initialize: function() {
this.resize = ImageTransformation.resize.bind(this);
this.rotate = ImageTransformation.rotate.bind(this);
this.crop = ImageTransformation.crop.bind(this);
},
resize: function(width,height) {
if(imageHistory.modifiedOriginalImage) {
fileToResize = $('image').src;
} else {
fileToResize = imageEditor.originalImageFile;
}
var options = {
method: 'post',
postBody: 'command=resize&file=' + fileToResize + '&newImageWidth=' + width + '&newImageHeight=' + height,
onSuccess: function(transport) {
imageBox.hideIndicator();
response = eval('(' + transport.responseText + ')');
$('image').src = response.fileName;
imageHistory.add('resize',$('image').src);
}
};
imageBox.showIndicator();
new Ajax.Request('/ajax.php', options);
},
rotate: function(angle) {
var options = {
method: 'post',
postBody: 'command=rotate&file=' + $('image').src + '&angle=' + angle ,
onSuccess: function(transport) {
imageBox.hideIndicator();
response = eval('(' + transport.responseText + ')');
$('image').src = response.fileName;
$('imageContainer').style.width = response.width + 'px';
$('imageContainer').style.height = response.height + 'px';
imageHistory.add('rotate',$('image').src);
resize.imageContainerResize.placeClickBox();
}
};
imageBox.showIndicator();
new Ajax.Request('/ajax.php', options);
},
crop: function(top,left,width,height) {
var options = {
method: 'post',
postBody: 'command=crop&file=' + $('image').src + '&top=' + top + '&left=' + left + '&width=' + width + '&height=' + height,
onSuccess: function(transport) {
imageBox.hideIndicator();
response = eval('(' + transport.responseText + ')');
$('image').src = response.fileName;
$('imageContainer').style.width = response.width + 'px';
$('imageContainer').style.height = response.height + 'px';
imageHistory.add('crop',$('image').src);
crop.setVisible(false);
}
};
imageBox.showIndicator();
new Ajax.Request('/ajax.php', options);
}
}

View File

@ -1,60 +0,0 @@
/**
* @author Mateusz
*/
var Resize = {
initialize: function(element) {
this.element = element;
this.leftBoxConstraint = 20;
this.topBoxConstraint = 100;
this.getRelativeMousePos = Resize.getRelativeMousePos.bind(this);
options = {
resizeStop: Resize.resizeStop.bind(this),
onDrag: Resize.onDrag.bind(this),
onResize: Resize.onResize,
getMousePos: Resize.getMousePos.bind(this)
};
new Positioning.addBehaviour(this.element);
this.imageContainerResize = new Resizeable.initialize(element,options);
this.imageContainerResize.setVisible(true);
},
resizeStop: function(event) {
if(EventStack.getLastEvent() != null) {
imageElement = $('image');
EventStack.clearStack();
if(this.imageContainerResize.originalWidth != imageElement.width || this.imageContainerResize.originalHeight != imageElement.height) {
imageTransformation.resize(imageElement.width,imageElement.height);
}
}
},
onDrag: function()
{
if(this.element.getTop() < this.topBoxConstraint) this.element.style.top = this.topBoxConstraint + "px";
if(this.element.getLeft() < this.leftBoxConstraint) this.element.style.left = this.leftBoxConstraint + "px";
if(this.element.getTop() + this.element.getHeight() >= this.element.getParentHeight()) this.element.style.top = this.element.getParentHeight() - this.element.getHeight() - 3 + 'px';
if(this.element.getLeft() + this.element.getWidth() > this.element.getParentWidth()) this.element.style.left = this.element.getParentWidth() - this.element.getWidth() - 3 + 'px';
imageBox.reCenterIndicator();
},
onResize: function() {
},
getMousePos: function(event) {
relativeMouseX = this.getRelativeMousePos(event).x;
relativeMouseY = this.getRelativeMousePos(event).y;
if(relativeMouseX <= this.leftBoxConstraint) x = this.leftBoxConstraint + this.element.getParentLeft(); else x = relativeMouseX + this.element.getParentLeft();
if(relativeMouseY <= this.topBoxConstraint) y = this.topBoxConstraint + this.element.getParentTop(); else y = relativeMouseY + this.element.getParentTop();
if(relativeMouseX >= this.element.getParentWidth()) {
x = this.element.getParentLeft() + this.element.getParentWidth();
}
if(relativeMouseY >= this.element.getParentHeight()) y = this.element.getParentTop() + this.element.getParentHeight();
return {x: x,y: y};
},
getRelativeMousePos: function(event) {
relativeMouseX = Event.pointerX(event) - this.element.getParentLeft();
relativeMouseY = Event.pointerY(event) - this.element.getParentTop();
return {x: relativeMouseX,y: relativeMouseY};
}
}

View File

@ -1,278 +0,0 @@
/**
* @author Mateusz
*/
Resizeable = {
initialize: function(element,options) {
this.resizeStop = options.resizeStop.bind(this);
this.onDrag = options.onDrag.bind(this);
this.customOnResize = options.onResize.bind(this);
this.getMousePos = options.getMousePos.bind(this);
this.bindAll = Resizeable.bindAll.bind(this);
this.bindAll();
this.element = element;
this.createClickBoxes();
this.setListeners();
this.placeClickBoxOnImageLoad();
this.originalHeight = 0;
this.originalWidth = 0;
},
resizeStart: function(event) {
EventStack.addEvent(event);
Event.stop(event);
},
leftUpperDrag: function(event,top,left,height,width,parentTop,parentLeft,relativeMouseX,relativeMouseY) {
newWidth = left - relativeMouseX + width;
newHeight = top - relativeMouseY + height;
if(this.resize(newWidth,newHeight)) {
this.element.style.top = top - (newHeight - height) + "px";
this.element.style.left = left - (newWidth - width) + "px";
}
},
leftMiddleDrag: function(event,top,left,height,width,parentTop,parentLeft,relativeMouseX,relativeMouseY) {
newWidth = left - relativeMouseX + width;
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;
newHeight = relativeMouseY - (top + height) + height;
if(this.resize(newWidth,newHeight)) this.element.style.left = left - (left - relativeMouseX) + "px";
},
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';
},
rightMiddleDrag: function(event,top,left,height,width,parentTop,parentLeft,relativeMouseX,relativeMouseY) {
newWidth = relativeMouseX - left;
this.resize(newWidth,-1000);
},
rightLowerDrag: function(event,top,left,height,width,parentTop,parentLeft,relativeMouseX,relativeMouseY) {
newWidth = relativeMouseX - left;
newHeight = relativeMouseY - top;
this.resize(newWidth,newHeight);
},
upperMiddleDrag: function(event,top,left,height,width,parentTop,parentLeft,relativeMouseX,relativeMouseY) {
newHeight = top - relativeMouseY + height;
if(this.resize(-1000,newHeight)) {
this.element.style.top = (top - (newHeight - height)) + 'px';
}
},
lowerMiddleDrag: function(event,top,left,height,width,parentTop,parentLeft,relativeMouseX,relativeMouseY) {
newHeight = relativeMouseY - (top + height) + height;
this.resize(-1000,newHeight);
},
onResize: function(event) {
if(EventStack.getLastEvent() != null && this.isVisible) {
lastEventElement = Event.element(EventStack.getLastEvent());
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);
}
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);
}
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);
}
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);
}
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);
}
if(Element.hasClassName(lastEventElement,'lowerMiddleClickBox')) {
this.lowerMiddleDrag(event,this.element.getTop(),this.element.getLeft(),this.element.getHeight(),this.element.getWidth(),this.element.getParentTop(),this.element.getParentLeft(),relativeMouseX,relativeMouseY);
}
this.placeClickBox();
imageBox.reCenterIndicator();
this.customOnResize();
}
},
resize: function(width,height) {
if(width < 30 && height == -1000) {
return false;
}
if(height < 30 && width == -1000) {
return false;
}
if((width < 30 || height < 30) && (width != -1000 && height != -1000)) {
return false;
}
if(width != -1000) {
this.element.style.width = width + "px";
} else {
this.element.style.width = this.originalWidth + "px";
}
if(height != -1000) {
this.element.style.height = height + "px";
} else {
this.element.style.height = this.originalHeight + "px";
}
return true;
},
placeClickBoxOnImageLoad: function() {
Event.observe('image','load',this.placeClickBox);
},
placeClickBox: function(event) {
if(event != null) {
this.originalHeight = Element.getDimensions(this.element).height;
this.originalWidth = Element.getDimensions(this.element).width;
}
width = Element.getDimensions(this.element).width;
height = Element.getDimensions(this.element).height;
clickBoxHalfWidth = Math.floor(Element.getDimensions(this.leftUpperClickBox).width/2);
leftUpper = new Point.initialize(-clickBoxHalfWidth,-clickBoxHalfWidth);
leftMiddle = new Point.initialize(-clickBoxHalfWidth,height/2-clickBoxHalfWidth);
leftLower = new Point.initialize(-clickBoxHalfWidth,height-clickBoxHalfWidth);
rightUpper = new Point.initialize(width-clickBoxHalfWidth,-clickBoxHalfWidth);
rightMiddle = new Point.initialize(width-clickBoxHalfWidth,height/2-clickBoxHalfWidth);
rightLower = new Point.initialize(width-clickBoxHalfWidth,height-clickBoxHalfWidth);
upperMiddle = new Point.initialize(width/2-clickBoxHalfWidth,-clickBoxHalfWidth);
lowerMiddle = new Point.initialize(width/2-clickBoxHalfWidth,height-clickBoxHalfWidth);
this.leftUpperClickBox.style.left = leftUpper.x + 'px';
this.leftUpperClickBox.style.top = leftUpper.y + 'px';
this.leftMiddleClickBox.style.left = leftMiddle.x + 'px';
this.leftMiddleClickBox.style.top = leftMiddle.y + 'px';
this.leftLowerClickBox.style.left = leftLower.x + 'px';
this.leftLowerClickBox.style.top = leftLower.y + 'px';
this.rightUpperClickBox.style.left = rightUpper.x + 'px';
this.rightUpperClickBox.style.top = rightUpper.y + 'px';
this.rightMiddleClickBox.style.left = rightMiddle.x + 'px';
this.rightMiddleClickBox.style.top = rightMiddle.y + 'px';
this.rightLowerClickBox.style.left = rightLower.x + 'px';
this.rightLowerClickBox.style.top = rightLower.y + 'px';
this.upperMiddleClickBox.style.left = upperMiddle.x + 'px';
this.upperMiddleClickBox.style.top = upperMiddle.y + 'px';
this.lowerMiddleClickBox.style.left = lowerMiddle.x + 'px';
this.lowerMiddleClickBox.style.top = lowerMiddle.y + 'px';
},
createClickBoxes: function() {
this.leftUpperClickBox = this.createElement('div',Math.random(),["leftUpperClickBox","clickBox"]);
this.leftMiddleClickBox = this.createElement('div',Math.random(),["leftMiddleClickBox","clickBox"]);
this.leftLowerClickBox = this.createElement('div',Math.random(),["leftLowerClickBox","clickBox"]);
this.rightUpperClickBox = this.createElement('div',Math.random(),["rightUpperClickBox","clickBox"]);
this.rightMiddleClickBox = this.createElement('div',Math.random(),["rightMiddleClickBox","clickBox"]);
this.rightLowerClickBox = this.createElement('div',Math.random(),["rightLowerClickBox","clickBox"]);
this.upperMiddleClickBox = this.createElement('div',Math.random(),["upperMiddleClickBox","clickBox"]);
this.lowerMiddleClickBox = this.createElement('div',Math.random(),["lowerMiddleClickBox","clickBox"]);
},
createElement: function(tag,id,classes) {
newElement = document.createElement(tag);
newElement.id = id;
classes.each(function(item) {
Element.addClassName(newElement,item);
}
);
this.addListener(newElement);
this.element.appendChild(newElement);
return newElement;
},
bindAll: function() {
this.setListeners = Resizeable.setListeners.bind(this);
this.placeClickBox = Resizeable.placeClickBox.bind(this);
this.resizeStart = Resizeable.resizeStart.bind(this);
this.onResize = Resizeable.onResize.bind(this);
this.resize = Resizeable.resize.bind(this);
this.placeClickBoxOnImageLoad = Resizeable.placeClickBoxOnImageLoad.bind(this);
this.createClickBoxes = Resizeable.createClickBoxes.bind(this);
this.createElement = Resizeable.createElement.bind(this);
this.addListener = Resizeable.addListener.bind(this);
this.addDraging = Resizeable.addDraging.bind(this);
this.setVisible = Resizeable.setVisible.bind(this);
this.removeDraging = Resizeable.removeDraging.bind(this);
this.leftUpperDrag = Resizeable.leftUpperDrag.bind(this);
this.leftMiddleDrag = Resizeable.leftMiddleDrag.bind(this);
this.leftLowerDrag = Resizeable.leftLowerDrag.bind(this);
this.rightUpperDrag = Resizeable.rightUpperDrag.bind(this);
this.rightMiddleDrag = Resizeable.rightMiddleDrag.bind(this);
this.rightLowerDrag = Resizeable.rightLowerDrag.bind(this);
this.upperMiddleDrag = Resizeable.upperMiddleDrag.bind(this);
this.lowerMiddleDrag = Resizeable.lowerMiddleDrag.bind(this);
},
setListeners: function() {
Event.observe('mainContainer','mousemove',this.onResize);
Event.observe('mainContainer','mouseup',this.resizeStop);
},
addListener: function(element) {
Event.observe(element,'mousedown',this.resizeStart);
Event.observe(element,'mousemove',this.onResize);
},
addDraging: function() {
if(this.draggableImage) this.removeDraging();
var options = {
starteffect: function() {},
endeffect: function() {},
change: this.onDrag,
};
this.draggableImage = new Draggable(this.element,options);
},
removeDraging: function() {
if(this.draggableImage) {
this.draggableImage.destroy();
this.draggableImage = null;
}
},
setVisible: function(setVisible) {
this.isVisible = setVisible;
if(setVisible) {
Element.show(
this.leftUpperClickBox,
this.leftMiddleClickBox,
this.leftLowerClickBox,
this.rightUpperClickBox,
this.rightMiddleClickBox,
this.rightLowerClickBox,
this.upperMiddleClickBox,
this.lowerMiddleClickBox);
this.addDraging();
this.placeClickBox();
} else {
Element.hide(
this.leftUpperClickBox,
this.leftMiddleClickBox,
this.leftLowerClickBox,
this.rightUpperClickBox,
this.rightMiddleClickBox,
this.rightLowerClickBox,
this.upperMiddleClickBox,
this.lowerMiddleClickBox);
this.removeDraging();
}
}
}

View File

@ -1,72 +0,0 @@
/**
* @author Mateusz
*/
Point = {
initialize: function(x,y) {
this.x = x;
this.y = y;
}
}
EventStack = {
lastEvent: null,
getLastEvent: function(){
return EventStack.lastEvent
},
addEvent: function(event) {
EventStack.lastEvent = event;
},
clearStack: function() {
this.lastEvent = null;
}
}
Positioning = {
addBehaviour: function(element) {
this.element = element;
this.element.getTop = Positioning.getTop.bind(this);
this.element.getLeft = Positioning.getLeft.bind(this);
this.element.getWidth = Positioning.getWidth.bind(this);
this.element.getHeight = Positioning.getHeight.bind(this);
this.element.getParentLeft = Positioning.getParentLeft.bind(this);
this.element.getParentTop = Positioning.getParentTop.bind(this);
this.element.getParentHeight = Positioning.getParentHeight.bind(this);
this.element.getParentWidth = Positioning.getParentWidth.bind(this);
},
getTop: function() {
return Position.positionedOffset(this.element)[1];
},
getLeft: function() {
return Position.positionedOffset(this.element)[0];
},
getWidth: function() {
return Element.getDimensions(this.element).width;
},
getHeight: function() {
return Element.getDimensions(this.element).height;
},
getParentLeft: function() {
parentLeft = Position.cumulativeOffset(Position.offsetParent(this.element))[0];
return parentLeft;
},
getParentTop: function() {
parentTop = Position.cumulativeOffset(Position.offsetParent(this.element))[1];
return parentTop;
},
getParentHeight: function() {
return Element.getDimensions(Position.offsetParent(this.element)).height;
},
getParentWidth: function() {
return Element.getDimensions(Position.offsetParent(this.element)).width
}
}

View File

@ -1,19 +0,0 @@
/**
* @author Mateusz
*/
var ImageEditor = {
initialize: function(imageFile) {
imageHistory = new ImageHistory.initialize();
environment = new Environment.initialize(imageFile);
imageTransformation = new ImageTransformation.initialize();
resize = new Resize.initialize($('imageContainer'));
effects = new Effects.initialize();
crop = new Crop.initialize();
this.originalImageFile = imageFile;
}
}
imageEditor = new ImageEditor.initialize('/img/test.jpg');