mujma: ENHANCEMENTS: Now image is placed in scrolled container so operation that results in image larger than screen are no longer problem.

(merged from branches/gsoc)


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

code/ImageEditor.php

@@ -29,6 +29,7 @@
             Requirements::javascript('cms/javascript/ImageEditor/Resize.js');
             Requirements::javascript('cms/javascript/ImageEditor/ImageBox.js');
             Requirements::javascript('cms/javascript/ImageEditor/ImageEditor.js');
+            Requirements::javascript('cms/javascript/ImageEditor/DocumentBody.js');
 
 			Requirements::javascript('jsparty/loader.js');
 			Requirements::javascript('jsparty/behaviour.js');

css/ImageEditor/ImageEditor.css

@@ -79,10 +79,17 @@
 }
 #loadingIndicatorContainer
 {
-    display: none;
+	position: absolute;
-    position: absolute;
+    top: -1000px;
-    z-index: 1000;
+    left: -1000px;
 }
+#loadingIndicatorContainer2
+{
+    position: absolute;
+    top: -1000px;
+    left: -1000px;
+}
+
 #fakeImg
 {
     display: none;
@@ -110,9 +117,14 @@ body
     position: absolute;
     border-color: black;
     border-style: solid;
-    height: 40%;
+    height: 97%;
     width: 98%;
     left: 1%;
     top: 1%;
     background-color: white;
+}
+#imageEditorContainer
+{
+    position: relative;
+    overflow: auto;
 }

javascript/ImageEditor/Activator.js

@@ -4,6 +4,8 @@ var ImageEditorActivator = {
 	},
 	
 	onOpen: function() {
+		var windowWidth = Element.getDimensions(window.top.document.body).width;
+        var windowHeight = Element.getDimensions(window.top.document.body).height;
 		iframe = window.top.document.getElementById('imageEditorIframe');
 		if(iframe != null) {
 			iframe.parentNode.removeChild(iframe);
@@ -12,8 +14,8 @@ var ImageEditorActivator = {
 		fileToEdit = $('ImageEditorActivator').firstChild.src;
 		iframe.setAttribute("src","admin/ImageEditor?fileToEdit=" + fileToEdit);
 		iframe.id = 'imageEditorIframe';
-		iframe.style.width = "97%";
+		iframe.style.width = windowWidth - 30 + 'px';
-		iframe.style.height = "300%";
+		iframe.style.height = windowHeight + 10 + 'px';
 		iframe.style.zIndex = "1000";
 		iframe.style.position = "absolute";
 		iframe.style.top = "-2%";

javascript/ImageEditor/Crop.js

@@ -87,8 +87,8 @@ var Crop = {
 		this.placeGreyBox(width,height);
 	},
 	getMousePos: function(event) {
-		x = Event.pointerX(event);
+		x = Event.pointerX(event) + $('imageEditorContainer').scrollLeft;
-		y = Event.pointerY(event);
+		y = Event.pointerY(event) + $('imageEditorContainer').scrollTop;
 		if(x <= this.leftBoxConstraint) x = this.leftBoxConstraint;
 		if(y <= this.topBoxConstraint) y = this.topBoxConstraint;
 		if(x >= this.rightBoxConstraint) x = this.rightBoxConstraint;

javascript/ImageEditor/DocumentBody.js

@@ -0,0 +1,24 @@
+/**
+ * @author Mateusz
+ */
+var DocumentBody = {
+	initialize: function() {
+		var windowHeight = Element.getDimensions(window.top.document.body).height;
+		Event.observe(window.top,'resize',DocumentBody.onWindowResize.bind(this));
+		Event.observe($('imageEditorContainer'),'scroll',DocumentBody.onImageEditorScroll.bind(this));
+		$('imageEditorContainer').style.height = windowHeight - 109 + 'px';
+	},
+	
+	onWindowResize: function() {
+        var windowWidth = Element.getDimensions(window.top.document.body).width;
+        var windowHeight = Element.getDimensions(window.top.document.body).height;
+        iframe = window.top.document.getElementById('imageEditorIframe');
+        iframe.style.width = windowWidth - 30 + 'px';
+        iframe.style.height = windowHeight + 10 + 'px';
+        $('imageEditorContainer').style.height = windowHeight - 105 + 'px';		
+	},
+	
+	onImageEditorScroll: function() {
+	   imageBox.reCenterIndicator();
+	}
+}

javascript/ImageEditor/Effects.js

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

javascript/ImageEditor/Image.js

@@ -35,7 +35,6 @@ var ImageToResize = {
 			resize.imageContainerResize.originalWidth = this.imageToResize.width;
 			resize.imageContainerResize.originalHeight = this.imageToResize.height;
 			resize.imageContainerResize.placeClickBox();
-			imageBox.checkOutOfDrawingArea($('imageContainer').getWidth(),$('imageContainer').getHeight());
 			crop.enable();
 			resize.imageContainerResize.enable();
 			effects.enableRotate();
@@ -50,11 +49,13 @@ var ImageToResize = {
 	   var windowHeight = Element.getDimensions($('mainContainer')).height - 100;
 	   var imageWidth =  Element.getDimensions($('image')).width;
 	   var imageHeight = Element.getDimensions($('image')).height;
-	   if(imageWidth > windowWidth - 120 || imageHeight >  windowHeight - 120) {
+	   if(imageWidth > windowWidth - 40 || imageHeight >  windowHeight - 40) {
 		   imageHistory.clear();
 		   Element.hide($('imageContainer'),$('image'));
 		   ratio = imageWidth / imageHeight;
-	       while(imageWidth > windowWidth - 120 || imageHeight >  windowHeight - 120) {
+	       $('loadingIndicatorContainer2').style.left = windowWidth/2 + 'px';
+	       $('loadingIndicatorContainer2').style.top = windowHeight/2 + 100 + 'px';
+		   while(imageWidth > windowWidth - 40 || imageHeight >  windowHeight - 40) {
 	           imageWidth--;
 	           imageHeight = imageWidth * (1/ratio);
 	       }
@@ -65,7 +66,8 @@ var ImageToResize = {
     },
     
     resizeOnFirstLoadCallBack: function() {
-        resize.imageContainerResize.setVisible(true);
+        Element.hide($('loadingIndicatorContainer2'));
+		resize.imageContainerResize.setVisible(true);
 		resize.imageContainerResize.placeClickBox();
         imageBox.center();
     }

javascript/ImageEditor/ImageBox.js

@@ -10,7 +10,6 @@ var ImageBox = {
 		this.hideIndicator = ImageBox.hideIndicator.bind(this);
 		this.reCenterIndicator = ImageBox.reCenterIndicator.bind(this);
 		this.centerIndicator = ImageBox.centerIndicator.bind(this);					
-		this.checkOutOfDrawingArea = ImageBox.checkOutOfDrawingArea.bind(this);
 		this.center = ImageBox.center.bind(this);
 		this.imageContainer = Positioning.addBehaviour($('imageContainer'));
 		Element.hide(this.imageContainer);
@@ -23,7 +22,6 @@ var ImageBox = {
 		Element.show(this.indicator,this.indicatorImage);
 		if(container == null) container = this.imageContainer;
 		this.centerIndicator(container);
-		this.indicator.style.display = 'inline';	
 	},
 	
 	hideIndicator: function() {
@@ -37,12 +35,12 @@ var ImageBox = {
 		var height = container.getHeight();
 		var parentTop =  container.getParentTop();
 		var parentLeft = container.getParentLeft();
-		this.indicator.style.left = parentLeft + left + width/2 - this.indicatorWidth/2 + "px"; 
+		this.indicator.style.left = width/2 - this.indicatorWidth/2 + "px"; 
-		this.indicator.style.top = parentTop + top + height/2 - this.indicatorHeight/2 + "px";		
+		this.indicator.style.top = height/2 - this.indicatorHeight/2 + "px";
 	},
 	
 	reCenterIndicator: function() {
-		if(this.indicator.style.display == 'inline') {
+		if(Element.visible(this.indicator)) {
 			this.centerIndicator(this.imageContainer);
 		}		
 	},
@@ -50,20 +48,5 @@ 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';
-	},
-	
-	checkOutOfDrawingArea: function(width,height) {
-		var left =  this.imageContainer.getLeft();
-		var top  =  this.imageContainer.getTop();
-		var parentLeft = this.imageContainer.getParentLeft();
-		var parentTop = this.imageContainer.getParentTop();
-		var parentWidth = this.imageContainer.getParentWidth(); 
-		var parentHeight = this.imageContainer.getParentHeight(); 
-		if(left + width > parentWidth) {
-			this.imageContainer.style.left = left - (left + width - parentWidth) - 3+ 'px';
-		}
-		if(top + height > parentHeight) {
-			this.imageContainer.style.top = top - (top + height - parentHeight) - 3 + 'px';
-		}	 
 	}
 };

javascript/ImageEditor/ImageEditor.js

@@ -12,12 +12,13 @@ var ImageEditor = {
 		resize = new Resize.initialize($('imageContainer'));
 		effects = new Effects.initialize();	
 		crop = new Crop.initialize();
+		documentBody = new DocumentBody.initialize();
 		this.originalImageFile = imageFile;
 		this.tottalyOriginalImageFile = imageFile;
 		this.onSaveClick = ImageEditor.onSaveClick.bind(this);
 		this.onCloseClick = ImageEditor.onCloseClick.bind(this);
 		Event.observe($('saveButton'),'click',this.onSaveClick);
-		Event.observe($('closeButton'),'click',this.onCloseClick);				
+		Event.observe($('closeButton'),'click',this.onCloseClick);
 	}, 
 	onSaveClick: function() {
 		if(this.tottalyOriginalImageFile != $('image').src) {

javascript/ImageEditor/ImageHistory.js

@@ -121,7 +121,6 @@ ImageHistory = {
 	
 	onImageLoad: function(event) {
 		Event.stopObserving($('image'),'load',this.onImageLoad);
-		imageBox.checkOutOfDrawingArea(this.size[this.historyPointer].width,this.size[this.historyPointer].height);
 		this.image.style.width = this.size[this.historyPointer].width + 'px';
 		this.image.style.height = this.size[this.historyPointer].height + 'px';
 		$('imageContainer').style.width = this.size[this.historyPointer].width + 'px';

javascript/ImageEditor/Resize.js

@@ -1,12 +1,12 @@
 /**
  * @author Mateusz
- */
+ */
 var Resize = {
 	
 	initialize: function(element) {		
 		this.element = element;
-		this.leftBoxConstraint =  20;
+		this.leftBoxConstraint = 4;
-		this.topBoxConstraint =  100;
+		this.topBoxConstraint = 4;
 		this.getRelativeMousePos = Resize.getRelativeMousePos.bind(this);
 		options = {
 				resizeStop: Resize.resizeStop.bind(this),
@@ -44,8 +44,6 @@ var Resize = {
 	{
 		if(this.element.getTop() < this.topBoxConstraint) this.element.style.top = this.topBoxConstraint + "px";
 		if(this.element.getLeft() < this.leftBoxConstraint) this.element.style.left = this.leftBoxConstraint + "px";
-		if(this.element.getLeft() + this.element.getWidth() > this.element.getParentWidth()) this.element.style.left = this.element.getParentWidth() - this.element.getWidth() - 3 + 'px';
-		if(this.element.getTop() + this.element.getHeight() >= this.element.getParentHeight()) this.element.style.top = this.element.getParentHeight() - this.element.getHeight() - 3 + 'px';
 		imageBox.reCenterIndicator();		
 	},
 	
@@ -58,16 +56,12 @@ var Resize = {
 		relativeMouseY = this.getRelativeMousePos(event).y;
 		if(relativeMouseX <= this.leftBoxConstraint) x = this.leftBoxConstraint + this.element.getParentLeft(); else x = relativeMouseX + this.element.getParentLeft();
 		if(relativeMouseY <= this.topBoxConstraint) y = this.topBoxConstraint + this.element.getParentTop(); else y = relativeMouseY + this.element.getParentTop();
-		if(relativeMouseX >= this.element.getParentWidth()) {
-			x = this.element.getParentLeft() + this.element.getParentWidth();
-		}
-		if(relativeMouseY >= this.element.getParentHeight()) y = this.element.getParentTop() + this.element.getParentHeight();
 		return {x: x,y: y};				
 	},
 	
 	getRelativeMousePos: function(event) {
-		relativeMouseX = Event.pointerX(event) - this.element.getParentLeft();
+		relativeMouseX = Event.pointerX(event) + $('imageEditorContainer').scrollLeft - this.element.getParentLeft();
-		relativeMouseY = Event.pointerY(event) - this.element.getParentTop();
+		relativeMouseY = Event.pointerY(event) + $('imageEditorContainer').scrollTop - this.element.getParentTop();
-		return {x: relativeMouseX,y: relativeMouseY};				
+		return {x: relativeMouseX,y: relativeMouseY};				
 	}
 }

javascript/ImageEditor/Utils.js

@@ -42,7 +42,7 @@ Positioning = {
 	},
 	
 	getLeft: function() {
-		return Position.positionedOffset(this.element)[0];
+		return parseInt(this.element.style.left);
 	},
 	
 	getWidth: function() {

templates/ImageEditor.ss

@@ -6,7 +6,7 @@
         <title>Untitled Document</title>
         <meta http-equiv="imagetoolbar" content="no"> 
     </head>
-    <body id="body" onload="setTimeout(function() { imageEditor = new ImageEditor.initialize('$fileToEdit'); }, 0);">
+    <body id="body" onload="imageEditor = new ImageEditor.initialize('$fileToEdit');">
         <div id="mainContainer">
             <div id="menuBarContainer">
                 <div id="photoInfoContainer" class="floatRight">
@@ -39,14 +39,17 @@
                     <div id="lowerGreyBox" class="greyBox"></div>   
                     <img id="image" src="#" alt=""/>
                     <div id="cropBox"></div>
-                </div>  
+                    <div id="loadingIndicatorContainer">
-            </div>          
+                        <img id="loadingIndicator" alt="" src="cms/images/ImageEditor/indicator.gif">
+                    </div>  
+                </div>
+            </div>
         </div>
         <div id="fakeImgContainer">
             <img id="fakeImg" src="#" alt=""/>
         </div>
-        <div id="loadingIndicatorContainer">
+        <div id="loadingIndicatorContainer2">
-            <img id="loadingIndicator" alt="" src="cms/images/ImageEditor/indicator.gif">
+            <img id="loadingIndicator2" alt="" src="cms/images/ImageEditor/indicator.gif">
-        </div>  
+        </div>
     </body> 
 </html>