1 files changed, 117 insertions, 0 deletions
diff --git a/library/cropper/tests/example-Preview.htm b/library/cropper/tests/example-Preview.htm
new file mode 100644
index 000000000..701670c91
--- /dev/null
+++ b/library/cropper/tests/example-Preview.htm
@@ -0,0 +1,117 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+	<meta http-equiv="Content-Language" content="en-us" />
+	<title></title>
+	<script src="../lib/prototype.js" type="text/javascript"></script>	
+ 	<script src="../lib/scriptaculous.js?load=builder,dragdrop" type="text/javascript"></script>
+	<script src="../cropper.js" type="text/javascript"></script>
+	
+	
+	<script type="text/javascript" charset="utf-8">
+		
+		function onEndCrop( coords, dimensions ) {
+			$( 'x1' ).value = coords.x1;
+			$( 'y1' ).value = coords.y1;
+			$( 'x2' ).value = coords.x2;
+			$( 'y2' ).value = coords.y2;
+			$( 'width' ).value = dimensions.width;
+			$( 'height' ).value = dimensions.height;
+		}
+		
+		// example with a preview of crop results, must have minimumm dimensions
+		Event.observe( 
+			window, 
+			'load', 
+			function() { 
+				new Cropper.ImgWithPreview( 
+					'testImage',
+					{ 
+						minWidth: 200, 
+						minHeight: 120,
+						ratioDim: { x: 200, y: 120 },
+						displayOnInit: true, 
+						onEndCrop: onEndCrop,
+						previewWrap: 'previewArea'
+					} 
+				) 
+			} 
+		);
+		
+		/*
+		if( typeof(dump) != 'function' ) {
+			Debug.init(true, '/');
+			
+			function dump( msg ) {
+				// Debug.raise( msg );
+			};
+		} else dump( '---------------------------------------\n' );
+		*/
+		
+	</script>
+	<link rel="stylesheet" type="text/css" href="debug.css" media="all" />
+	<style type="text/css">
+		label { 
+			clear: left;
+			margin-left: 50px;
+			float: left;
+			width: 5em;
+		}
+		
+		#testWrap {
+			width: 500px;
+			float: left;
+			margin: 20px 0 0 50px; /* Just while testing, to make sure we return the correct positions for the image & not the window */
+		}
+		
+		#previewArea {
+			margin: 20px; 0 0 20px;
+			float: left;
+		}
+		
+		#results {
+			clear: both;
+		}
+	</style>
+</head>
+<body>	
+	<br /><br />
+	
+	<div id="testWrap">
+		<img src="castle.jpg" alt="test image" id="testImage" width="500" height="333" />
+	</div>
+	
+	<div id="previewArea"></div>
+	
+	<div id="results">
+		<p>
+			<label for="x1">x1:</label>
+			<input type="text" name="x1" id="x1" />
+		</p>
+		<p>
+			<label for="y1">y1:</label>
+			<input type="text" name="y1" id="y1" />
+		</p>
+		<p>
+			<label for="x2">x2:</label>
+			<input type="text" name="x2" id="x2" />
+		</p>
+		<p>
+			<label for="y2">y2:</label>
+			<input type="text" name="y2" id="y2" />
+		</p>
+		<p>
+			<label for="width">width:</label>
+			<input type="text" name="width" id="width" />
+		</p>
+		<p>
+			<label for="height">height</label>
+			<input type="text" name="height" id="height" />
+		</p>
+	</div> 
+	
+</body>
+</html>
+
+