mujma: Added support for IE6.

(merged from branches/gsoc)


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

css/ImageEditor/ImageEditor.css

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

javascript/ImageEditor/Crop.js

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

javascript/ImageEditor/Effects.js

@@ -13,16 +13,23 @@ var Effects = {
 	
 	rotate: function() {
 		if(this.isRotateEnabled) {
+			var windowWidth = Element.getDimensions($('mainContainer')).width;
+            var windowHeight = Element.getDimensions($('mainContainer')).height - 100;
+            var imageWidth =  Element.getDimensions($('image')).height;
+            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() {
-	   resize.imageContainerResize.enable();
+	   resize.imageContainerResize.placeClickBox();
-	   crop.enable();
 	   this.isRotateEnabled = true;
 	},
 	

javascript/ImageEditor/Image.js

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

javascript/ImageEditor/ImageBox.js

@@ -14,7 +14,7 @@ var ImageBox = {
 		Element.hide(this.imageContainer);
 		this.indicator = Positioning.addBehaviour($('loadingIndicatorContainer'));
         this.indicatorImage = Positioning.addBehaviour($('loadingIndicator'));
-        this.showIndicator(Positioning.addBehaviour($('mainContainer')));
+		Positioning.addBehaviour($('mainContainer'));
 	},
 		
 	showIndicator: function(container) {
@@ -47,7 +47,6 @@ var ImageBox = {
 	center: function() {
 		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';
-		Element.show(this.imageContainer);
 	},
 	
 	checkOutOfDrawingArea: function(width,height) {

javascript/ImageEditor/ImageEditor.js

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

javascript/ImageEditor/ImageHistory.js

@@ -13,24 +13,32 @@ ImageHistory = {
 		this.addLinsteners = ImageHistory.addLinsteners.bind(this);
 		this.addLinsteners();	
 		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.disable = ImageHistory.disable.bind(this);
 		this.clear = ImageHistory.clear.bind(this);
+		this.fakeImage = Positioning.addBehaviour($('fakeImg'));
+		this.image = Positioning.addBehaviour($('image'));
+		this.size = new Array();
 	},
 		
 	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;
+			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--;
 		} else {
 			alert("No more undo");
@@ -41,9 +49,15 @@ ImageHistory = {
 		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;
+			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++;
 		} else {
 			alert("No more redo");
@@ -51,9 +65,15 @@ ImageHistory = {
 	},
 	
 	add: function(operation,url) {
+		var imageWidth =  isNaN(parseInt($('image').style.width)) ? Element.getDimensions($('image')).width : parseInt($('image').style.width);//IE hack
+		var imageHeight = isNaN(parseInt($('image').style.height)) ? Element.getDimensions($('image')).height : parseInt($('image').style.height);//IE hack
+		//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() {
@@ -70,18 +90,6 @@ ImageHistory = {
 		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() {
 		this.addLinsteners();
 	},
@@ -94,5 +102,16 @@ ImageHistory = {
 	clear: function() {
 	   this.history = new Array();
        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;	
 	}
 };

javascript/ImageEditor/ImageTransformation.js

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

javascript/ImageEditor/Resize.js

@@ -23,19 +23,18 @@ var Resize = {
 		if(EventStack.getLastEventElement() != null) {
 			imageElement = $('image');
 			EventStack.clearStack();
+			if(this.imageContainerResize.isEnabled) {
 				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

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

templates/ImageEditor.ss

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