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.

(merged from branches/gsoc)


git-svn-id: svn://svn.silverstripe.com/silverstripe/open/modules/cms/trunk@41901 467b73ca-7a2a-4603-9d3b-597d59a354a9

javascript/ImageEditor/Crop.js

@@ -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;
+	}
+	
 }

javascript/ImageEditor/Effects.js

@@ -5,14 +5,37 @@ var Effects = {
 	initialize: function() {
 		this.setListeners = Effects.setListeners.bind(this);
 		this.rotate = Effects.rotate.bind(this);
-		this.setListeners();	
+		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;
+	}
+		
 }

javascript/ImageEditor/ImageTransformation.js

@@ -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 ,
@@ -51,7 +51,8 @@ var ImageTransformation = {
 				$('imageContainer').style.width = response.width + 'px';
 				$('imageContainer').style.height = response.height + 'px';
 				imageHistory.add('rotate',$('image').src);	
-				resize.imageContainerResize.placeClickBox();			
+				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();

javascript/ImageEditor/Resize.js

@@ -20,11 +20,22 @@ 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()

javascript/ImageEditor/Resizeable.js

@@ -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;
 	}
 }