mujma: Added support for large images (larger than browser window).

(merged from branches/gsoc)


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

code/ImageEditor.php

@@ -38,7 +38,6 @@
 			if(!isset($this->requestParams['fileToEdit'])) $this->raiseError();
 			$fileWithPath = $this->requestParams['fileToEdit'];
 			$this->fileToEdit = $this->file2Origin($fileWithPath);
-			
 			return $this->renderWith(__CLASS__);
 		}
 		
@@ -78,7 +77,7 @@
 			}
 			$rand = md5(rand(1,100000));
 			$gd->writeTo('../assets/tmp/' . $rand . '.jpg');
-			return $this->getImageInfoInJSON($gd,'../assets/tmp/' . $rand . '.jpg');	
+			return $this->getImageInfoInJSON($gd,'assets/tmp/' . $rand . '.jpg');	
 		}
 		
 		/**
@@ -181,7 +180,7 @@
 			if(strpos($url,'?') !== false) $url = substr($url,0,strpos($url,'?'));
 			$pathInfo = pathinfo($url);
 			if(count($pathInfo) < 3) $this->raiseError();
-			if(!in_array($pathInfo['extension'],array('jpeg','jpg','jpe','png','gif'))) $this->raiseError();
+			if(!in_array($pathInfo['extension'],array('jpeg','jpg','jpe','png','gif','JPEG','JPG','JPE','PNG','GIF'))) $this->raiseError();
 			$path = explode('/',$pathInfo['dirname']);
 			if(count($path) > 1) {
 				$assetId = array_search('assets',$path);
@@ -195,7 +194,8 @@
 				} else {
 					$this->raiseError();
 				}
-				if(file_exists($realPath)) {
					return true;
+				if(file_exists($realPath)) {
+					return true;
 				} else {
 					$this->raiseError();
 				}

javascript/ImageEditor/.project

@@ -1,11 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<projectDescription>
-	<name>ImageEditor-SS</name>
-	<comment></comment>
-	<projects>
-	</projects>
-	<buildSpec>
-	</buildSpec>
-	<natures>
-	</natures>
-</projectDescription>

javascript/ImageEditor/Environment.js

@@ -4,6 +4,6 @@
 var Environment = {
 	initialize: function (imageFile) {
 		imageBox = new ImageBox.initialize();
-		imageToResize = new Image.initialize(imageFile);		
+		imageToResize = new ImageToResize.initialize(imageFile);		
 	}		
 }

javascript/ImageEditor/Image.js

@@ -1,19 +1,27 @@
 /**
  * @author Mateusz
  */
-var Image = {	
+var ImageToResize = {	
 	initialize: function(imageFile) {
+		Element.hide($('image'));
 		this.image = $('image');
 		this.image.src = imageFile;
-		this.reportSize = Image.reportSize.bind(this);
+		this.reportSize = ImageToResize.reportSize.bind(this);
-		this.onImageLoad = Image.onImageLoad.bind(this);
+		this.onImageLoad = ImageToResize.onImageLoad.bind(this);
+		this.resizeOnFirstLoad = ImageToResize.resizeOnFirstLoad.bind(this);
 		Event.observe(this.image,'load',this.onImageLoad);
 		imageHistory.add('initialize',this.image.src);
+		
 	},
 	
-	reportSize: function() {
+	reportSize: function(width,height) {
+		if(width != null && height != null) {
+			$('imageWidth').innerHTML = width + "px";
+            $('imageHeight').innerHTML = height + "px";	
+		} else {
             $('imageWidth').innerHTML = this.image.width + "px";
             $('imageHeight').innerHTML = this.image.height + "px";  
+		}
 	},
 	
 	onImageLoad: function(event) {
@@ -22,9 +30,38 @@ var Image = {
 		$('imageContainer').style.height = this.image.height + 'px';
 		if(resize.imageContainerResize.originalHeight == 0 && resize.imageContainerResize.originalWidth == 0) {
 			imageBox.center();
+			this.resizeOnFirstLoad();
 		}
 		resize.imageContainerResize.originalWidth = this.image.width;
 		resize.imageContainerResize.originalHeight = this.image.height;
 		imageBox.checkOutOfDrawingArea($('imageContainer').getWidth(),$('imageContainer').getHeight());
+	},
+	
+	resizeOnFirstLoad: function() {
+	   windowWidth = Element.getDimensions($('mainContainer')).width;
+	   windowHeight = Element.getDimensions($('mainContainer')).height;
+	   imageWidth =  Element.getDimensions(this.image).width;
+	   imageHeight= Element.getDimensions(this.image).height;
+	   if(imageWidth > windowWidth || imageHeight > windowHeight) {
+	       ratio = imageWidth / imageHeight;
+	       if(imageWidth > imageHeight) {
+                newWidth = windowWidth - windowWidth/1.75;
+                newHeight = newWidth * (1/ratio);
+	       } else {
+                newHeight = windowHeight - windowHeight/1.75;
+                newWidth = newHeight * ratio;	       
+	       }
+	       this.reportSize(0,0);
+           imageHistory.clear();
+	       imageTransformation.resize(newWidth,newHeight,ImageToResize.resizeOnFirstLoadCallBack.bind(this));
+	   } else {
+	       if(imageWidth != 0 && imageHeight != 0) Element.show($('image'));
+	   }	
+    },
+    
+    resizeOnFirstLoadCallBack: function() {
+        imageBox.center();
+        Element.show($('image'));
+        resize.imageContainerResize.setVisible(true);
     }
 };

javascript/ImageEditor/ImageHistory.js

@@ -16,6 +16,7 @@ ImageHistory = {
 		this.onFakeImageLoad = ImageHistory.onFakeImageLoad.bind(this);
 		this.enable = ImageHistory.enable.bind(this);
 		this.disable = ImageHistory.disable.bind(this);
+		this.clear = ImageHistory.clear.bind(this);
 	},
 		
 	undo: function() {
@@ -88,5 +89,10 @@ ImageHistory = {
 	disable: function() {
 		Event.stopObserving($('undoButton'),'click', this.undo);			
 		Event.stopObserving($('redoButton'),'click', this.redo);
+	},
+	
+	clear: function() {
+	   this.history = new Array();
+       this.historyPointer = -1;
 	}
 };

javascript/ImageEditor/ImageTransformation.js

@@ -10,7 +10,7 @@ var ImageTransformation = {
 		this.close = ImageTransformation.close.bind(this);
 	},
 		
-	resize: function(width,height) {
+	resize: function(width,height,callback) {
 		if(imageHistory.modifiedOriginalImage) {
 			fileToResize = $('image').src;
 		} else {
@@ -23,7 +23,14 @@ var ImageTransformation = {
 				imageBox.hideIndicator();
 				response = eval('(' + transport.responseText + ')');
 				$('image').src = response.fileName;
+				$('image').style.width = response.width + 'px';
+                $('image').style.height = response.height + 'px';
+                $('imageContainer').style.width = response.width + 'px';
+                $('imageContainer').style.height = response.height + 'px';
 				imageHistory.add('resize',$('image').src);
+				if(callback != null) {
+				    callback();
+				}
 			}
 		 };
 		 imageBox.showIndicator();
@@ -69,7 +76,7 @@ var ImageTransformation = {
 			}
 		 };
 		 imageBox.showIndicator();
-		 new Ajax.Request('/admin/ImageEditor/manipulate', options);			
+		 new Ajax.Request('admin/ImageEditor/manipulate', options);			
 	},
 	
 	save: function(originalFile,editedFile) {

javascript/ImageEditor/Resize.js

@@ -16,7 +16,7 @@ var Resize = {
 			};		
 		new Positioning.addBehaviour(this.element);
 		this.imageContainerResize = new Resizeable.initialize(element,options);
-		this.imageContainerResize.setVisible(true);
+		this.imageContainerResize.setVisible(false);
 	},
 	
 	resizeStop: function(event) {