tonyair/silverstripe-reports
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-reports synced 2024-10-22 11:05:53 +02:00
Code Issues Projects Releases Wiki Activity

mujma: Added support for IE6.

Browse Source 
(merged from branches/gsoc)


git-svn-id: svn://svn.silverstripe.com/silverstripe/open/modules/cms/trunk@41931 467b73ca-7a2a-4603-9d3b-597d59a354a9
This commit is contained in:
Ingo Schommer 2007-09-15 20:54:37 +00:00
parent c3988b53f2
commit cad57b11ec
11 changed files with 160 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
css/ImageEditor/ImageEditor.css
View File

@ -90,6 +90,8 @@
#cropBox #cropBox
{ {
position: absolute; position: absolute;
background-image: url("cms/images/ImageEditor/white.gif");
display: inline;
} }
.greyBox .greyBox
{ {
@ -97,6 +99,12 @@
position: absolute; position: absolute;
opacity: .5; opacity: .5;
filter: alpha(opacity=50); filter: alpha(opacity=50);
overflow:hidden;
}
body
{
height: 100%;
width: 100%;
} }
#mainContainer #mainContainer
{ {
@ -104,7 +112,7 @@
border-color: black; border-color: black;
border-style: solid; border-style: solid;
height: 40%; height: 40%;
width: 100%; width: 98%;
left: 1%; left: 1%;
top: 1%; top: 1%;
background-color: white; background-color: white;

47
javascript/ImageEditor/Crop.js
View File

@ -22,6 +22,7 @@ var Crop = {
this.setVisible = Crop.setVisible.bind(this); this.setVisible = Crop.setVisible.bind(this);
this.enable = Crop.enable.bind(this); this.enable = Crop.enable.bind(this);
this.disable = Crop.disable.bind(this); this.disable = Crop.disable.bind(this);
this.onImageLoadCallback = Crop.onImageLoadCallback.bind(this);
Event.observe('image','load',this.centerCropBox); Event.observe('image','load',this.centerCropBox);
options = { options = {
resizeStop: Crop.resizeStop.bind(this), resizeStop: Crop.resizeStop.bind(this),
@ -32,14 +33,17 @@ var Crop = {
this.resizeCropBox = new Resizeable.initialize(this.cropBox,options); this.resizeCropBox = new Resizeable.initialize(this.cropBox,options);
Event.observe(this.cropBox,'dblclick',this.onCropStop.bind(this)); Event.observe(this.cropBox,'dblclick',this.onCropStop.bind(this));
this.setListeners(); this.setListeners();
this.setVisible(false); this.isVisible = false;
this.setVisible(this.isVisible);
this.isEnabled = true; this.isEnabled = true;
}, },
resizeStop: function(event) { resizeStop: function(event) {
EventStack.clearStack(); if(this.isVisible) {
this.resizeCropBox.originalHeight = this.cropBox.getHeight(); EventStack.clearStack();
this.resizeCropBox.originalWidth = this.cropBox.getWidth(); this.resizeCropBox.originalHeight = this.cropBox.getHeight();
this.resizeCropBox.originalWidth = this.cropBox.getWidth();
}
}, },
onDrag: function(event) { onDrag: function(event) {
@ -63,18 +67,21 @@ var Crop = {
}, },
placeGreyBox: function(width,height) { placeGreyBox: function(width,height) {
this.lowerGreyBox.style.left = this.cropBox.getLeft() + 'px'; if(this.isVisible) {
this.lowerGreyBox.style.width = width + 'px'; this.lowerGreyBox.style.left = this.cropBox.getLeft() + 'px';
this.lowerGreyBox.style.height = this.cropBox.getParentHeight() - this.cropBox.getTop() - height + "px"; this.lowerGreyBox.style.width = width + 'px';
this.lowerGreyBox.style.top = this.cropBox.getTop() + height + "px"; this.lowerGreyBox.style.height = this.cropBox.getParentHeight() - this.cropBox.getTop() - height + "px";
this.leftGreyBox.style.width = this.cropBox.getLeft() + "px"; this.lowerGreyBox.style.top = this.cropBox.getTop() + height + "px";
this.leftGreyBox.style.height = $('imageContainer').getHeight() + 'px'; this.leftGreyBox.style.width = this.cropBox.getLeft() + "px";
this.rightGreyBox.style.width = this.cropBox.getParentWidth() - this.cropBox.getLeft() - width + "px"; this.leftGreyBox.style.height = $('imageContainer').getHeight() + 'px';
this.rightGreyBox.style.height = $('imageContainer').getHeight() + 'px'; this.rightGreyBox.style.width = this.cropBox.getParentWidth() - this.cropBox.getLeft() - width + "px";
this.rightGreyBox.style.left = this.cropBox.getLeft() + width + "px"; this.rightGreyBox.style.height = $('imageContainer').getHeight() + 'px';
this.upperGreyBox.style.width = width + 'px'; this.rightGreyBox.style.left = this.cropBox.getLeft() + width + "px";
this.upperGreyBox.style.left = this.cropBox.getLeft() + 'px'; this.upperGreyBox.style.width = width + 'px';
this.upperGreyBox.style.height = this.cropBox.getTop() + 'px'; this.upperGreyBox.style.left = this.cropBox.getLeft() + 'px';
this.upperGreyBox.style.height = this.cropBox.getTop() + 'px';
this.resizeCropBox.placeClickBox();
}
}, },
onResize: function(width,height) { onResize: function(width,height) {
@ -112,6 +119,7 @@ var Crop = {
}, },
cropCallback: function() { cropCallback: function() {
this.resizeCropBox.placeClickBox();
effects.enableRotate(); effects.enableRotate();
this.enable(); this.enable();
@ -129,6 +137,7 @@ var Crop = {
Element.show($('cropOk'),$('cropCancel')); Element.show($('cropOk'),$('cropCancel'));
imageHistory.disable(); imageHistory.disable();
effects.disableRotate(); effects.disableRotate();
this.enable();
} }
}, },
@ -146,10 +155,12 @@ var Crop = {
this.setVisible(false); this.setVisible(false);
imageHistory.enable(); imageHistory.enable();
effects.enableRotate(); effects.enableRotate();
this.enable();
} }
}, },
setVisible: function(setVisible) { setVisible: function(setVisible) {
this.isVisible = setVisible;
if(setVisible) { if(setVisible) {
Element.show(this.cropBox,this.leftGreyBox,this.rightGreyBox,this.upperGreyBox,this.lowerGreyBox); Element.show(this.cropBox,this.leftGreyBox,this.rightGreyBox,this.upperGreyBox,this.lowerGreyBox);
this.centerCropBox(); this.centerCropBox();
@ -167,6 +178,10 @@ var Crop = {
disable: function() { disable: function() {
this.isEnabled = false; this.isEnabled = false;
},
onImageLoadCallback: function() {
crop.setVisible(false);
} }
} }

19
javascript/ImageEditor/Effects.js
View File

@ -13,16 +13,23 @@ var Effects = {
rotate: function() { rotate: function() {
if(this.isRotateEnabled) { if(this.isRotateEnabled) {
resize.imageContainerResize.disable(); var windowWidth = Element.getDimensions($('mainContainer')).width;
crop.disable(); var windowHeight = Element.getDimensions($('mainContainer')).height - 100;
imageTransformation.rotate(90,Effects.rotateCallback.bind(this)); var imageWidth = Element.getDimensions($('image')).height;
this.isRotateEnabled = false; var imageHeight = Element.getDimensions($('image')).width;
if(imageWidth > windowWidth - 30 || imageHeight > windowHeight - 30) {
alert('Image to big to rotate');
} else {
resize.imageContainerResize.disable();
crop.disable();
imageTransformation.rotate(90,Effects.rotateCallback.bind(this));
this.isRotateEnabled = false;
}
} }
}, },
rotateCallback: function() { rotateCallback: function() {
resize.imageContainerResize.enable(); resize.imageContainerResize.placeClickBox();
crop.enable();
this.isRotateEnabled = true; this.isRotateEnabled = true;
}, },

63
javascript/ImageEditor/Image.js
View File

@ -4,14 +4,12 @@
var ImageToResize = { var ImageToResize = {
initialize: function(imageFile) { initialize: function(imageFile) {
Element.hide($('image')); Element.hide($('image'));
this.image = $('image'); this.imageToResize = $('image');
this.image.src = imageFile; this.imageToResize.src = imageFile;
this.reportSize = ImageToResize.reportSize.bind(this); this.reportSize = ImageToResize.reportSize.bind(this);
this.onImageLoad = ImageToResize.onImageLoad.bind(this); this.onImageLoad = ImageToResize.onImageLoad.bind(this);
this.resizeOnFirstLoad = ImageToResize.resizeOnFirstLoad.bind(this); this.resizeOnFirstLoad = ImageToResize.resizeOnFirstLoad.bind(this);
Event.observe(this.image,'load',this.onImageLoad); Event.observe(this.imageToResize,'load',this.onImageLoad);
imageHistory.add('initialize',this.image.src);
}, },
reportSize: function(width,height) { reportSize: function(width,height) {
@ -19,52 +17,57 @@ var ImageToResize = {
$('imageWidth').innerHTML = width + "px"; $('imageWidth').innerHTML = width + "px";
$('imageHeight').innerHTML = height + "px"; $('imageHeight').innerHTML = height + "px";
} else { } else {
$('imageWidth').innerHTML = this.image.width + "px"; $('imageWidth').innerHTML = this.imageToResize.width + "px";
$('imageHeight').innerHTML = this.image.height + "px"; $('imageHeight').innerHTML = this.imageToResize.height + "px";
} }
}, },
onImageLoad: function(event) { onImageLoad: function(event) {
if(this.image.width != 0 && this.image.height != 0) { if(this.imageToResize.width != 0 && this.imageToResize.height != 0) {
this.reportSize(); //$('imageContainer').style.width = this.imageToResize.width + 'px';
$('imageContainer').style.width = this.image.width + 'px'; //$('imageContainer').style.height = this.imageToResize.height + 'px';
$('imageContainer').style.height = this.image.height + 'px'; imageBox.hideIndicator();
imageBox.hideIndicator(); Element.show($('imageContainer'),$('image'));
if(resize.imageContainerResize.originalHeight == 0 && resize.imageContainerResize.originalWidth == 0) { if(resize.imageContainerResize.originalHeight == 0 && resize.imageContainerResize.originalWidth == 0) {
imageBox.center(); imageHistory.add('initialize',$('image').src);
this.resizeOnFirstLoad(); this.resizeOnFirstLoad();
} imageBox.center();
resize.imageContainerResize.originalWidth = this.image.width; }
resize.imageContainerResize.originalHeight = this.image.height; resize.imageContainerResize.originalWidth = this.imageToResize.width;
resize.imageContainerResize.originalHeight = this.imageToResize.height;
resize.imageContainerResize.placeClickBox();
imageBox.checkOutOfDrawingArea($('imageContainer').getWidth(),$('imageContainer').getHeight()); imageBox.checkOutOfDrawingArea($('imageContainer').getWidth(),$('imageContainer').getHeight());
crop.onImageLoadCallback();
crop.enable();
resize.imageContainerResize.enable();
effects.enableRotate();
} }
this.reportSize();
}, },
resizeOnFirstLoad: function() { resizeOnFirstLoad: function() {
windowWidth = Element.getDimensions($('mainContainer')).width; var windowWidth = Element.getDimensions($('mainContainer')).width;
windowHeight = Element.getDimensions($('mainContainer')).height - 100; var windowHeight = Element.getDimensions($('mainContainer')).height - 100;
imageWidth = Element.getDimensions(this.image).width; var imageWidth = Element.getDimensions($('image')).width;
imageHeight= Element.getDimensions(this.image).height; var imageHeight = Element.getDimensions($('image')).height;
if(imageWidth > windowWidth - 120 || imageHeight > windowHeight - 120) { if(imageWidth > windowWidth - 120 || imageHeight > windowHeight - 120) {
ratio = imageWidth / imageHeight; imageHistory.clear();
Element.hide($('imageContainer'),$('image'));
ratio = imageWidth / imageHeight;
while(imageWidth > windowWidth - 120 || imageHeight > windowHeight - 120) { while(imageWidth > windowWidth - 120 || imageHeight > windowHeight - 120) {
imageWidth--; imageWidth--;
imageHeight = imageWidth * (1/ratio); imageHeight = imageWidth * (1/ratio);
} }
this.reportSize(0,0); this.reportSize(0,0);
imageHistory.clear();
imageBox.showIndicator();
resize.imageContainerResize.setVisible(false); resize.imageContainerResize.setVisible(false);
imageTransformation.resize(imageWidth,imageHeight,ImageToResize.resizeOnFirstLoadCallBack.bind(this)); imageTransformation.resize(imageWidth,imageHeight,ImageToResize.resizeOnFirstLoadCallBack.bind(this),false);
} else {
if(imageWidth != 0 && imageHeight != 0) Element.show($('image'));
} }
}, },
resizeOnFirstLoadCallBack: function() { resizeOnFirstLoadCallBack: function() {
imageBox.center(); Element.hide($('imageContainer'),$('image'));
Element.show($('image'));
resize.imageContainerResize.setVisible(true); resize.imageContainerResize.setVisible(true);
imageBox.hideIndicator(); resize.imageContainerResize.placeClickBox();
imageBox.center();
} }
}; };

3
javascript/ImageEditor/ImageBox.js
View File

@ -14,7 +14,7 @@ var ImageBox = {
Element.hide(this.imageContainer); Element.hide(this.imageContainer);
this.indicator = Positioning.addBehaviour($('loadingIndicatorContainer')); this.indicator = Positioning.addBehaviour($('loadingIndicatorContainer'));
this.indicatorImage = Positioning.addBehaviour($('loadingIndicator')); this.indicatorImage = Positioning.addBehaviour($('loadingIndicator'));
this.showIndicator(Positioning.addBehaviour($('mainContainer'))); Positioning.addBehaviour($('mainContainer'));
}, },
showIndicator: function(container) { showIndicator: function(container) {
@ -47,7 +47,6 @@ var ImageBox = {
center: function() { center: function() {
this.imageContainer.style.left = this.imageContainer.getParentWidth()/2 - this.imageContainer.getWidth()/2 + 'px'; this.imageContainer.style.left = this.imageContainer.getParentWidth()/2 - this.imageContainer.getWidth()/2 + 'px';
this.imageContainer.style.top = this.imageContainer.getParentHeight()/2 - this.imageContainer.getHeight()/2 + 'px'; this.imageContainer.style.top = this.imageContainer.getParentHeight()/2 - this.imageContainer.getHeight()/2 + 'px';
Element.show(this.imageContainer);
}, },
checkOutOfDrawingArea: function(width,height) { checkOutOfDrawingArea: function(width,height) {

3
javascript/ImageEditor/ImageEditor.js
View File

@ -18,8 +18,6 @@ var ImageEditor = {
this.onCloseClick = ImageEditor.onCloseClick.bind(this); this.onCloseClick = ImageEditor.onCloseClick.bind(this);
Event.observe($('saveButton'),'click',this.onSaveClick); Event.observe($('saveButton'),'click',this.onSaveClick);
Event.observe($('closeButton'),'click',this.onCloseClick); Event.observe($('closeButton'),'click',this.onCloseClick);
imageToResize.onImageLoad();
resize.imageContainerResize.placeClickBox();
}, },
onSaveClick: function() { onSaveClick: function() {
if(this.tottalyOriginalImageFile != $('image').src) { if(this.tottalyOriginalImageFile != $('image').src) {
@ -30,6 +28,7 @@ var ImageEditor = {
}, },
onCloseClick: function() { onCloseClick: function() {
window.parent.frames[0].location.reload(1);
window.parent.frames[1].location.reload(1); window.parent.frames[1].location.reload(1);
imageTransformation.close(ImageEditor.onCloseCallback.bind(this)); imageTransformation.close(ImageEditor.onCloseCallback.bind(this));
}, },

67
javascript/ImageEditor/ImageHistory.js
View File

@ -13,24 +13,32 @@ ImageHistory = {
this.addLinsteners = ImageHistory.addLinsteners.bind(this); this.addLinsteners = ImageHistory.addLinsteners.bind(this);
this.addLinsteners(); this.addLinsteners();
this.operationMade = ImageHistory.operationMade.bind(this); this.operationMade = ImageHistory.operationMade.bind(this);
this.onFakeImageLoad = ImageHistory.onFakeImageLoad.bind(this); this.isInHistory = ImageHistory.isInHistory.bind(this);
this.enable = ImageHistory.enable.bind(this); this.enable = ImageHistory.enable.bind(this);
this.disable = ImageHistory.disable.bind(this); this.disable = ImageHistory.disable.bind(this);
this.clear = ImageHistory.clear.bind(this); this.clear = ImageHistory.clear.bind(this);
this.fakeImage = Positioning.addBehaviour($('fakeImg'));
this.image = Positioning.addBehaviour($('image'));
this.size = new Array();
}, },
undo: function() { undo: function() {
if(this.historyPointer >= 1) { if(this.historyPointer >= 1) {
image = $('image');
fakeImage = $('fakeImg');
operation = this.history[this.historyPointer].operation; operation = this.history[this.historyPointer].operation;
if(operation == 'rotate' || operation == 'crop') { if(operation == 'rotate' || operation == 'crop') {
if(this.operationMade(this.historyPointer-1,'rotate') || this.operationMade(this.historyPointer-1,'crop')) if(this.operationMade(this.historyPointer-1,'rotate') || this.operationMade(this.historyPointer-1,'crop'))
this.modifiedOriginalImage = true; else this.modifiedOriginalImage = false; this.modifiedOriginalImage = true; else this.modifiedOriginalImage = false;
} }
image.src = this.history[this.historyPointer-1].fileUrl; this.image.src = this.history[this.historyPointer-1].fileUrl;
fakeImage.src = this.history[this.historyPointer-1].fileUrl; imageBox.checkOutOfDrawingArea(this.size[this.historyPointer-1].width,this.size[this.historyPointer-1].height);
Event.observe('fakeImg','load',this.onFakeImageLoad); this.image.style.width = this.size[this.historyPointer-1].width + 'px';
this.image.style.height = this.size[this.historyPointer-1].height + 'px';
$('imageContainer').style.width = this.size[this.historyPointer-1].width + 'px';
$('imageContainer').style.height = this.size[this.historyPointer-1].height + 'px';
resize.imageContainerResize.originalWidth = this.size[this.historyPointer-1].width;
resize.imageContainerResize.originalHeight = this.size[this.historyPointer-1].height;
imageToResize.onImageLoad();
this.historyPointer--; this.historyPointer--;
} else { } else {
alert("No more undo"); alert("No more undo");
@ -41,9 +49,15 @@ ImageHistory = {
if(this.historyPointer < this.history.length-1) { if(this.historyPointer < this.history.length-1) {
operation = this.history[this.historyPointer+1].operation; operation = this.history[this.historyPointer+1].operation;
if(operation == 'rotate' || operation == 'crop') this.modifiedOriginalImage = true; if(operation == 'rotate' || operation == 'crop') this.modifiedOriginalImage = true;
$('image').src = this.history[this.historyPointer+1].fileUrl; this.image.src = this.history[this.historyPointer+1].fileUrl;
$('fakeImg').src = $('image').src; imageBox.checkOutOfDrawingArea(this.size[this.historyPointer+1].width,this.size[this.historyPointer+1].height);
Event.observe('fakeImg','load',this.onFakeImageLoad); this.image.style.width = this.size[this.historyPointer+1].width + 'px';
this.image.style.height = this.size[this.historyPointer+1].height + 'px';
$('imageContainer').style.width = this.size[this.historyPointer+1].width + 'px';
$('imageContainer').style.height = this.size[this.historyPointer+1].height + 'px';
resize.imageContainerResize.originalWidth = this.size[this.historyPointer+1].width;
resize.imageContainerResize.originalHeight = this.size[this.historyPointer+1].height;
imageToResize.onImageLoad();
this.historyPointer++; this.historyPointer++;
} else { } else {
alert("No more redo"); alert("No more redo");
@ -51,9 +65,15 @@ ImageHistory = {
}, },
add: function(operation,url) { add: function(operation,url) {
this.historyPointer++; var imageWidth = isNaN(parseInt($('image').style.width)) ? Element.getDimensions($('image')).width : parseInt($('image').style.width);//IE hack
this.history[this.historyPointer] = {'operation': operation,'fileUrl' : url}; var imageHeight = isNaN(parseInt($('image').style.height)) ? Element.getDimensions($('image')).height : parseInt($('image').style.height);//IE hack
if(operation == 'rotate' || operation == 'crop') this.modifiedOriginalImage = true; //code above should be moved to Positioning.addBehaviour
if(!this.isInHistory(operation,url)) {
this.historyPointer++;
this.size[this.historyPointer] = {'width': imageWidth,'height': imageHeight};
this.history[this.historyPointer] = {'operation': operation,'fileUrl' : url};
if(operation == 'rotate' || operation == 'crop') this.modifiedOriginalImage = true;
}
}, },
addLinsteners: function() { addLinsteners: function() {
@ -70,18 +90,6 @@ ImageHistory = {
return false; return false;
}, },
onFakeImageLoad: function() {
imageBox.checkOutOfDrawingArea(fakeImage.width,fakeImage.height);
$('image').style.width = fakeImage.width + 'px';
$('image').style.height = fakeImage.height + 'px';
$('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();
imageToResize.onImageLoad();
},
enable: function() { enable: function() {
this.addLinsteners(); this.addLinsteners();
}, },
@ -94,5 +102,16 @@ ImageHistory = {
clear: function() { clear: function() {
this.history = new Array(); this.history = new Array();
this.historyPointer = -1; this.historyPointer = -1;
this.size = new Array();
},
isInHistory: function(operation,url) {
if(operation == 'initialize' && this.historyPointer != -1) return true;
for(var k=0;k<this.history.length;k++) {
if(this.history[k].operation == operation && this.history[k].fileUrl == url) {
return true;
}
}
return false;
} }
}; };

10
javascript/ImageEditor/ImageTransformation.js
View File

@ -10,7 +10,7 @@ var ImageTransformation = {
this.close = ImageTransformation.close.bind(this); this.close = ImageTransformation.close.bind(this);
}, },
resize: function(width,height,callback) { resize: function(width,height,callback,imageAlreadyChangedSize) {
if(imageHistory.modifiedOriginalImage) { if(imageHistory.modifiedOriginalImage) {
fileToResize = $('image').src; fileToResize = $('image').src;
} else { } else {
@ -31,7 +31,11 @@ var ImageTransformation = {
if(callback != null) callback(); if(callback != null) callback();
} }
}; };
imageBox.showIndicator(); if(imageAlreadyChangedSize == false) {
imageBox.showIndicator($('mainContainer'));
} else {
imageBox.showIndicator();
}
new Ajax.Request('admin/ImageEditor/manipulate', options); new Ajax.Request('admin/ImageEditor/manipulate', options);
}, },
@ -49,7 +53,6 @@ var ImageTransformation = {
$('imageContainer').style.width = response.width + 'px'; $('imageContainer').style.width = response.width + 'px';
$('imageContainer').style.height = response.height + 'px'; $('imageContainer').style.height = response.height + 'px';
imageHistory.add('rotate',$('image').src); imageHistory.add('rotate',$('image').src);
resize.imageContainerResize.placeClickBox();
if(callback != null) callback(); if(callback != null) callback();
} }
}; };
@ -71,7 +74,6 @@ var ImageTransformation = {
$('imageContainer').style.width = response.width + 'px'; $('imageContainer').style.width = response.width + 'px';
$('imageContainer').style.height = response.height + 'px'; $('imageContainer').style.height = response.height + 'px';
imageHistory.add('crop',$('image').src); imageHistory.add('crop',$('image').src);
crop.setVisible(false);
if(callback != null) callback(); if(callback != null) callback();
} }
}; };

15
javascript/ImageEditor/Resize.js
View File

@ -23,19 +23,18 @@ var Resize = {
if(EventStack.getLastEventElement() != null) { if(EventStack.getLastEventElement() != null) {
imageElement = $('image'); imageElement = $('image');
EventStack.clearStack(); EventStack.clearStack();
if(this.imageContainerResize.originalWidth != imageElement.width || this.imageContainerResize.originalHeight != imageElement.height) { if(this.imageContainerResize.isEnabled) {
imageTransformation.resize(imageElement.width,imageElement.height,Resize.resizeCallback.bind(this)); if(this.imageContainerResize.originalWidth != imageElement.width || this.imageContainerResize.originalHeight != imageElement.height) {
imageTransformation.resize(imageElement.width,imageElement.height,Resize.resizeCallback.bind(this));
effects.disableRotate();
crop.disable();
this.imageContainerResize.disable();
}
} }
effects.disableRotate();
crop.disable();
this.imageContainerResize.disable();
} }
}, },
resizeCallback: function() { resizeCallback: function() {
effects.enableRotate();
crop.enable();
this.imageContainerResize.enable();
}, },
onDrag: function() onDrag: function()

16
javascript/ImageEditor/Resizeable.js
View File

@ -13,7 +13,6 @@ Resizeable = {
this.element = element; this.element = element;
this.createClickBoxes(); this.createClickBoxes();
this.setListeners(); this.setListeners();
this.placeClickBoxOnImageLoad();
this.originalHeight = 0; this.originalHeight = 0;
this.originalWidth = 0; this.originalWidth = 0;
this.isEnabled = true; this.isEnabled = true;
@ -126,16 +125,15 @@ Resizeable = {
if(height == -1000) { if(height == -1000) {
height = this.originalHeight; height = this.originalHeight;
} }
if(!crop.isVisible) {
$('image').style.width = width + 'px';
$('image').style.height = height + 'px';
}
this.element.style.width = width + "px"; this.element.style.width = width + "px";
this.element.style.height = height + "px"; this.element.style.height = height + "px";
return true; return true;
}, },
placeClickBoxOnImageLoad: function() {
Event.observe('image','load',this.placeClickBox);
},
placeClickBox: function(event) { placeClickBox: function(event) {
if(event != null) { if(event != null) {
this.originalHeight = Element.getDimensions(this.element).height; this.originalHeight = Element.getDimensions(this.element).height;
@ -174,9 +172,7 @@ Resizeable = {
this.upperMiddleClickBox.style.top = upperMiddle.y + 'px'; this.upperMiddleClickBox.style.top = upperMiddle.y + 'px';
this.lowerMiddleClickBox.style.left = lowerMiddle.x + 'px'; this.lowerMiddleClickBox.style.left = lowerMiddle.x + 'px';
this.lowerMiddleClickBox.style.top = lowerMiddle.y + 'px'; this.lowerMiddleClickBox.style.top = lowerMiddle.y + 'px';
if(crop != null) {
crop.placeGreyBox();
}
}, },
createClickBoxes: function() { createClickBoxes: function() {
@ -211,7 +207,6 @@ Resizeable = {
this.resizeStart = Resizeable.resizeStart.bind(this); this.resizeStart = Resizeable.resizeStart.bind(this);
this.onResize = Resizeable.onResize.bind(this); this.onResize = Resizeable.onResize.bind(this);
this.resize = Resizeable.resize.bind(this); this.resize = Resizeable.resize.bind(this);
this.placeClickBoxOnImageLoad = Resizeable.placeClickBoxOnImageLoad.bind(this);
this.createClickBoxes = Resizeable.createClickBoxes.bind(this); this.createClickBoxes = Resizeable.createClickBoxes.bind(this);
this.createElement = Resizeable.createElement.bind(this); this.createElement = Resizeable.createElement.bind(this);
this.addListener = Resizeable.addListener.bind(this); this.addListener = Resizeable.addListener.bind(this);
@ -273,7 +268,6 @@ Resizeable = {
this.upperMiddleClickBox, this.upperMiddleClickBox,
this.lowerMiddleClickBox); this.lowerMiddleClickBox);
this.addDraging(); this.addDraging();
this.placeClickBox();
} else { } else {
Element.hide( Element.hide(
this.leftUpperClickBox, this.leftUpperClickBox,

1
templates/ImageEditor.ss
View File

@ -37,6 +37,7 @@
<div id="upperGreyBox" class="greyBox"></div> <div id="upperGreyBox" class="greyBox"></div>
<div id="lowerGreyBox" class="greyBox"></div> <div id="lowerGreyBox" class="greyBox"></div>
<img id="image" src="#" alt=""/> <img id="image" src="#" alt=""/>
<img id="fakeImg" src="#" alt=""/>
<div id="cropBox"></div> <div id="cropBox"></div>
</div> </div>
</div> </div>