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

mujma: Added exclusive lock on image operation. Starting each operation block others i.e you cannot rotate image when you are cropping area from it.

Browse Source 
(merged from branches/gsoc)


git-svn-id: svn://svn.silverstripe.com/silverstripe/open/modules/cms/trunk@41901 467b73ca-7a2a-4603-9d3b-597d59a354a9
This commit is contained in:
Ingo Schommer 2007-09-15 01:31:31 +00:00
parent 00f262e445
commit 71cb143070
5 changed files with 108 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
javascript/ImageEditor/Crop.js
View File

@ -20,6 +20,8 @@ var Crop = {
this.onCropCancel = Crop.onCropCancel.bind(this);
this.doCrop = Crop.doCrop.bind(this);
this.setVisible = Crop.setVisible.bind(this);
this.enable = Crop.enable.bind(this);
this.disable = Crop.disable.bind(this);
Event.observe('image','load',this.centerCropBox);
options = {
resizeStop: Crop.resizeStop.bind(this),
@ -31,6 +33,7 @@ var Crop = {
Event.observe(this.cropBox,'dblclick',this.onCropStop.bind(this));
this.setListeners();
this.setVisible(false);
this.isEnabled = true;
},
resizeStop: function(event) {
@ -88,22 +91,32 @@ var Crop = {
},
onCropStop: function(event) {
Element.hide($('cropOk'),$('cropCancel'));
this.doCrop();
},
doCrop: function() {
newWidth = this.cropBox.getWidth()
newHeight = this.cropBox.getHeight() ;
startTop = this.cropBox.getTop() ;
startLeft = this.cropBox.getLeft() ;
if(newWidth > 35 && newHeight > 35) {
imageTransformation.crop(startTop,startLeft,newWidth,newHeight);
imageHistory.enable();
} else {
alert('Crop area too small');
if(this.isEnabled) {
newWidth = this.cropBox.getWidth()
newHeight = this.cropBox.getHeight() ;
startTop = this.cropBox.getTop() ;
startLeft = this.cropBox.getLeft() ;
if(newWidth > 35 && newHeight > 35) {
imageTransformation.crop(startTop,startLeft,newWidth,newHeight,Crop.cropCallback.bind(this));
imageHistory.enable();
} else {
alert('Crop area too small');
}
this.disable();
}
},
cropCallback: function() {
effects.enableRotate();
this.enable();
},
setListeners: function() {
Event.observe('cropStart','click',this.onCropStart);
Event.observe('cropOk','click',this.onCropOk);
@ -111,20 +124,29 @@ var Crop = {
},
onCropStart: function() {
this.setVisible(true);
Element.show($('cropOk'),$('cropCancel'));
imageHistory.disable();
if(this.isEnabled) {
this.setVisible(true);
Element.show($('cropOk'),$('cropCancel'));
imageHistory.disable();
effects.disableRotate();
}
},
onCropOk: function() {
Element.hide($('cropOk'),$('cropCancel'));
this.doCrop();
if(this.isEnabled) {
Element.hide($('cropOk'),$('cropCancel'));
this.doCrop();
effects.disableRotate();
}
},
onCropCancel: function() {
Element.hide($('cropOk'),$('cropCancel'));
this.setVisible(false);
imageHistory.enable();
if(this.isEnabled) {
Element.hide($('cropOk'),$('cropCancel'));
this.setVisible(false);
imageHistory.enable();
effects.enableRotate();
}
},
setVisible: function(setVisible) {
@ -137,5 +159,14 @@ var Crop = {
}
resize.imageContainerResize.setVisible(!setVisible);
this.resizeCropBox.setVisible(setVisible);
},
enable: function() {
this.isEnabled = true;
},
disable: function() {
this.isEnabled = false;
}
}

25
javascript/ImageEditor/Effects.js
View File

@ -6,13 +6,36 @@ var Effects = {
this.setListeners = Effects.setListeners.bind(this);
this.rotate = Effects.rotate.bind(this);
this.setListeners();
this.isRotateEnabled = true;
this.enableRotate = Effects.enableRotate.bind(this);
this.disableRotate = Effects.disableRotate.bind(this);
},
rotate: function() {
imageTransformation.rotate(90);
if(this.isRotateEnabled) {
resize.imageContainerResize.disable();
crop.disable();
imageTransformation.rotate(90,Effects.rotateCallback.bind(this));
this.isRotateEnabled = false;
}
},
rotateCallback: function() {
resize.imageContainerResize.enable();
crop.enable();
this.isRotateEnabled = true;
},
setListeners: function() {
Event.observe('rotateButton','click',this.rotate);
},
disableRotate: function() {
this.isRotateEnabled = false;
},
enableRotate: function() {
this.isRotateEnabled = true;
}
}

6
javascript/ImageEditor/ImageTransformation.js
View File

@ -37,7 +37,7 @@ var ImageTransformation = {
new Ajax.Request('admin/ImageEditor/manipulate', options);
},
rotate: function(angle) {
rotate: function(angle,callback) {
var options = {
method: 'post',
postBody: 'command=rotate&file=' + $('image').src + '&angle=' + angle ,
@ -52,6 +52,7 @@ var ImageTransformation = {
$('imageContainer').style.height = response.height + 'px';
imageHistory.add('rotate',$('image').src);
resize.imageContainerResize.placeClickBox();
if(callback != null) callback();
}
};
imageBox.showIndicator();
@ -59,7 +60,7 @@ var ImageTransformation = {
new Ajax.Request('admin/ImageEditor/manipulate', options);
},
crop: function(top,left,width,height) {
crop: function(top,left,width,height,callback) {
var options = {
method: 'post',
postBody: 'command=crop&file=' + $('image').src + '&top=' + top + '&left=' + left + '&width=' + width + '&height=' + height,
@ -73,6 +74,7 @@ var ImageTransformation = {
$('imageContainer').style.height = response.height + 'px';
imageHistory.add('crop',$('image').src);
crop.setVisible(false);
if(callback != null) callback();
}
};
imageBox.showIndicator();

19
javascript/ImageEditor/Resize.js
View File

@ -20,13 +20,24 @@ var Resize = {
},
resizeStop: function(event) {
imageElement = $('image');
EventStack.clearStack();
if(this.imageContainerResize.originalWidth != imageElement.width || this.imageContainerResize.originalHeight != imageElement.height) {
imageTransformation.resize(imageElement.width,imageElement.height);
if(EventStack.getLastEventElement() != null) {
imageElement = $('image');
EventStack.clearStack();
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();
}
},
resizeCallback: function() {
effects.enableRotate();
crop.enable();
this.imageContainerResize.enable();
},
onDrag: function()
{
if(this.element.getTop() < this.topBoxConstraint) this.element.style.top = this.topBoxConstraint + "px";

13
javascript/ImageEditor/Resizeable.js
View File

@ -16,6 +16,7 @@ Resizeable = {
this.placeClickBoxOnImageLoad();
this.originalHeight = 0;
this.originalWidth = 0;
this.isEnabled = true;
},
resizeStart: function(event) {
@ -75,7 +76,7 @@ Resizeable = {
},
onResize: function(event) {
if(EventStack.getLastEventElement() != null && this.isVisible) {
if(EventStack.getLastEventElement() != null && this.isVisible && this.isEnabled) {
lastEventElement = EventStack.getLastEventElement();
var relativeMouseX = this.getMousePos(event).x - this.element.getParentLeft();
var relativeMouseY = this.getMousePos(event).y - this.element.getParentTop();
@ -217,6 +218,8 @@ Resizeable = {
this.addDraging = Resizeable.addDraging.bind(this);
this.setVisible = Resizeable.setVisible.bind(this);
this.removeDraging = Resizeable.removeDraging.bind(this);
this.disable = Resizeable.disable.bind(this);
this.enable = Resizeable.enable.bind(this);
this.leftUpperDrag = Resizeable.leftUpperDrag.bind(this);
this.leftMiddleDrag = Resizeable.leftMiddleDrag.bind(this);
@ -284,5 +287,13 @@ Resizeable = {
this.lowerMiddleClickBox);
this.removeDraging();
}
},
disable: function() {
this.isEnabled = false;
},
enable: function() {
this.isEnabled = true;
}
}