diff options
| author | Mike Macgirvin <mike@macgirvin.com> | 2010-07-01 16:48:07 -0700 |
|---|---|---|
| committer | Mike Macgirvin <mike@macgirvin.com> | 2010-07-01 16:48:07 -0700 |
| commit | 6348e70daa113e8b3203de8fbc919d08c90d972e (patch) | |
| tree | 1bc3dd3bc85fe6136411086785cf6753960e22f9 /cropper/tests | |
| download | volse-hubzilla-6348e70daa113e8b3203de8fbc919d08c90d972e.tar.gz volse-hubzilla-6348e70daa113e8b3203de8fbc919d08c90d972e.tar.bz2 volse-hubzilla-6348e70daa113e8b3203de8fbc919d08c90d972e.zip | |
Initial checkin
Diffstat (limited to 'cropper/tests')
| -rw-r--r-- | cropper/tests/castle.jpg | bin | 0 -> 34429 bytes | |||
| -rw-r--r-- | cropper/tests/castleMed.jpg | bin | 0 -> 50584 bytes | |||
| -rw-r--r-- | cropper/tests/example-Basic.htm | 106 | ||||
| -rw-r--r-- | cropper/tests/example-CSS-Absolute.htm | 162 | ||||
| -rw-r--r-- | cropper/tests/example-CSS-Float.htm | 124 | ||||
| -rw-r--r-- | cropper/tests/example-CSS-Relative.htm | 116 | ||||
| -rw-r--r-- | cropper/tests/example-CoordsOnLoad.htm | 108 | ||||
| -rw-r--r-- | cropper/tests/example-CoordsOnLoadWithRatio.htm | 109 | ||||
| -rw-r--r-- | cropper/tests/example-Dimensions.htm | 225 | ||||
| -rw-r--r-- | cropper/tests/example-DynamicImage.htm | 203 | ||||
| -rw-r--r-- | cropper/tests/example-FixedRatio.htm | 104 | ||||
| -rw-r--r-- | cropper/tests/example-MinimumDimensions.htm | 105 | ||||
| -rw-r--r-- | cropper/tests/example-MinimumWidth.htm | 105 | ||||
| -rw-r--r-- | cropper/tests/example-Preview.htm | 117 | ||||
| -rw-r--r-- | cropper/tests/poppy.jpg | bin | 0 -> 18338 bytes | |||
| -rw-r--r-- | cropper/tests/staticHTMLStructure.htm | 236 |
16 files changed, 1820 insertions, 0 deletions
diff --git a/cropper/tests/castle.jpg b/cropper/tests/castle.jpg Binary files differnew file mode 100644 index 000000000..e40b7e4cb --- /dev/null +++ b/cropper/tests/castle.jpg diff --git a/cropper/tests/castleMed.jpg b/cropper/tests/castleMed.jpg Binary files differnew file mode 100644 index 000000000..c35a6f554 --- /dev/null +++ b/cropper/tests/castleMed.jpg diff --git a/cropper/tests/example-Basic.htm b/cropper/tests/example-Basic.htm new file mode 100644 index 000000000..391c2ecdb --- /dev/null +++ b/cropper/tests/example-Basic.htm @@ -0,0 +1,106 @@ +<!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>Basic cropper test</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">
+
+ // setup the callback function
+ 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;
+ }
+
+ // basic example
+ Event.observe(
+ window,
+ 'load',
+ function() {
+ new Cropper.Img(
+ 'testImage',
+ {
+ onEndCrop: onEndCrop
+ }
+ )
+ }
+ );
+
+
+ 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;
+ }
+
+ html, body {
+ margin: 0;
+ }
+
+ #testWrap {
+ margin: 20px 0 0 50px; /* Just while testing, to make sure we return the correct positions for the image & not the window */
+ }
+ </style>
+</head>
+<body>
+ <h2>Basic cropper test</h2>
+ <p>
+ Some test content before the image
+ </p>
+
+ <div id="testWrap">
+ <img src="castle.jpg" alt="test image" id="testImage" width="500" height="333" />
+ </div>
+
+
+ <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>
+
+</body>
+</html>
+
+
diff --git a/cropper/tests/example-CSS-Absolute.htm b/cropper/tests/example-CSS-Absolute.htm new file mode 100644 index 000000000..17e4c489d --- /dev/null +++ b/cropper/tests/example-CSS-Absolute.htm @@ -0,0 +1,162 @@ +<!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>CSS - Absolute positioned (and draggable) test</title>
+ <script src="../lib/prototype.js" type="text/javascript"></script>
+ <script src="../lib/scriptaculous.js?load=builder,dragdrop,effects" type="text/javascript"></script>
+ <script src="../cropper.js" type="text/javascript"></script>
+
+
+ <script type="text/javascript" charset="utf-8">
+
+ // setup the callback function
+ 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;
+ }
+
+ // Absolute positioned example
+ Event.observe(
+ window,
+ 'load',
+ function() {
+ new Cropper.Img( 'testAbsImage', { onEndCrop: onEndCrop } );
+ new Draggable( 'test-abs' );
+ }
+ );
+
+ 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;
+ }
+
+ html, body {
+ margin: 0;
+ }
+
+ #testWrap {
+ margin: 20px 0 0 50px; /* Just while testing, to make sure we return the correct positions for the image & not the window */
+ }
+
+ #test-abs {
+ width: 510px;
+ position: absolute;
+ top: 50px;
+ left: 25%;
+ background-color: #dee;
+ border: 3px solid #ccc;
+ z-index: 10;
+ }
+ </style>
+</head>
+<body>
+ <h2>CSS - Absolute positioned (and draggable) test</h2>
+ <p>
+ Some test content before the image
+ </p>
+ <p>
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque consequat risus cursus ipsum. Etiam libero. Integer vel mauris. Donec vulputate. In ut augue vitae nibh lobortis tempor. Aliquam hendrerit quam. Phasellus sed orci. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut sed urna. Donec nunc urna, porttitor a, feugiat pellentesque, varius id, justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Sed sollicitudin. Integer enim. Aenean sollicitudin.
+ </p>
+ <p>
+ Integer lorem turpis, dapibus sed, vulputate nec, volutpat a, sem. Sed malesuada laoreet lorem. Duis mauris ipsum, fringilla nec, tristique vel, imperdiet vel, neque. Nulla vel purus. Fusce non lectus. Mauris pulvinar. Curabitur eget eros. Nunc ultrices, risus vitae adipiscing scelerisque, quam mi auctor lacus, non pellentesque augue sapien a magna. Etiam rutrum posuere tortor. Mauris rhoncus sagittis dolor. Donec sed quam. Vivamus vel diam id massa adipiscing bibendum. Suspendisse potenti. Integer arcu est, adipiscing sit amet, convallis eu, sollicitudin tincidunt, quam.
+ </p>
+ <p>
+ Etiam ligula lorem, imperdiet ac, luctus eget, ultrices at, odio. Vivamus malesuada, justo eu adipiscing semper, nisi dui tempus magna, quis ultrices nunc tellus id massa. Nullam lobortis auctor sapien. Quisque non nulla. Donec lobortis pellentesque nisl. Sed lacus sapien, viverra vitae, blandit ut, fermentum quis, leo. Morbi augue turpis, hendrerit non, feugiat vel, laoreet sed, est. Nunc velit. Praesent lobortis. Integer enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur faucibus lacus ac ante. Donec odio odio, tincidunt a, egestas nec, scelerisque nec, dui. Cras sollicitudin. Donec lacus enim, mollis sit amet, interdum quis, euismod et, nulla. Nunc sit amet dui eu magna dapibus mollis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi.
+ </p>
+ <p>
+ In hac habitasse platea dictumst. Nunc neque urna, dapibus ut, tristique ut, bibendum ac, felis. Donec dictum est ut dolor. Etiam accumsan, velit sit amet blandit vestibulum, turpis quam hendrerit risus, vel interdum eros orci in nunc. Curabitur tellus sapien, rutrum ac, euismod ac, malesuada nec, pede. Proin sit amet ipsum. Praesent quam nisl, adipiscing nec, tristique eget, fermentum sed, est. Praesent ac est sit amet orci facilisis placerat. Sed consequat, est sit amet consectetuer viverra, risus urna porttitor tellus, ut convallis nibh libero in lectus. Pellentesque molestie, erat non vehicula pretium, turpis nisi eleifend eros, sed scelerisque tortor odio non tellus. Nunc leo tellus, faucibus vitae, placerat a, accumsan vel, arcu. In et orci. Ut tristique euismod nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed nulla nunc, placerat vitae, pellentesque non, interdum non, sapien. Quisque faucibus, eros sed venenatis sagittis, leo risus rhoncus risus, in pretium sem purus a lacus. Aliquam aliquam leo et diam.
+
+ </p>
+ <p>
+ Nulla sagittis diam. Phasellus vitae enim tristique libero molestie tristique. Nam mauris sem, elementum nec, cursus in, fringilla ac, neque. Nunc metus nisi, dictum vel, vulputate quis, porttitor bibendum, tortor. Vestibulum vehicula. Nulla facilisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla ac magna sed purus ultricies euismod. Aliquam dictum. Sed mauris. Suspendisse justo. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi purus lorem, auctor non, porta ac, vehicula vel, orci. Morbi pharetra massa nec leo. Maecenas et mauris. Aliquam porttitor tincidunt nulla. Vestibulum pede.
+ </p>
+ <p>
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque consequat risus cursus ipsum. Etiam libero. Integer vel mauris. Donec vulputate. In ut augue vitae nibh lobortis tempor. Aliquam hendrerit quam. Phasellus sed orci. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut sed urna. Donec nunc urna, porttitor a, feugiat pellentesque, varius id, justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Sed sollicitudin. Integer enim. Aenean sollicitudin.
+ </p>
+ <p>
+ Integer lorem turpis, dapibus sed, vulputate nec, volutpat a, sem. Sed malesuada laoreet lorem. Duis mauris ipsum, fringilla nec, tristique vel, imperdiet vel, neque. Nulla vel purus. Fusce non lectus. Mauris pulvinar. Curabitur eget eros. Nunc ultrices, risus vitae adipiscing scelerisque, quam mi auctor lacus, non pellentesque augue sapien a magna. Etiam rutrum posuere tortor. Mauris rhoncus sagittis dolor. Donec sed quam. Vivamus vel diam id massa adipiscing bibendum. Suspendisse potenti. Integer arcu est, adipiscing sit amet, convallis eu, sollicitudin tincidunt, quam.
+ </p>
+ <p>
+ Etiam ligula lorem, imperdiet ac, luctus eget, ultrices at, odio. Vivamus malesuada, justo eu adipiscing semper, nisi dui tempus magna, quis ultrices nunc tellus id massa. Nullam lobortis auctor sapien. Quisque non nulla. Donec lobortis pellentesque nisl. Sed lacus sapien, viverra vitae, blandit ut, fermentum quis, leo. Morbi augue turpis, hendrerit non, feugiat vel, laoreet sed, est. Nunc velit. Praesent lobortis. Integer enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur faucibus lacus ac ante. Donec odio odio, tincidunt a, egestas nec, scelerisque nec, dui. Cras sollicitudin. Donec lacus enim, mollis sit amet, interdum quis, euismod et, nulla. Nunc sit amet dui eu magna dapibus mollis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi.
+ </p>
+ <p>
+ In hac habitasse platea dictumst. Nunc neque urna, dapibus ut, tristique ut, bibendum ac, felis. Donec dictum est ut dolor. Etiam accumsan, velit sit amet blandit vestibulum, turpis quam hendrerit risus, vel interdum eros orci in nunc. Curabitur tellus sapien, rutrum ac, euismod ac, malesuada nec, pede. Proin sit amet ipsum. Praesent quam nisl, adipiscing nec, tristique eget, fermentum sed, est. Praesent ac est sit amet orci facilisis placerat. Sed consequat, est sit amet consectetuer viverra, risus urna porttitor tellus, ut convallis nibh libero in lectus. Pellentesque molestie, erat non vehicula pretium, turpis nisi eleifend eros, sed scelerisque tortor odio non tellus. Nunc leo tellus, faucibus vitae, placerat a, accumsan vel, arcu. In et orci. Ut tristique euismod nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed nulla nunc, placerat vitae, pellentesque non, interdum non, sapien. Quisque faucibus, eros sed venenatis sagittis, leo risus rhoncus risus, in pretium sem purus a lacus. Aliquam aliquam leo et diam.
+
+ </p>
+ <p>
+ Nulla sagittis diam. Phasellus vitae enim tristique libero molestie tristique. Nam mauris sem, elementum nec, cursus in, fringilla ac, neque. Nunc metus nisi, dictum vel, vulputate quis, porttitor bibendum, tortor. Vestibulum vehicula. Nulla facilisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla ac magna sed purus ultricies euismod. Aliquam dictum. Sed mauris. Suspendisse justo. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi purus lorem, auctor non, porta ac, vehicula vel, orci. Morbi pharetra massa nec leo. Maecenas et mauris. Aliquam porttitor tincidunt nulla. Vestibulum pede.
+ </p>
+ <p>
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque consequat risus cursus ipsum. Etiam libero. Integer vel mauris. Donec vulputate. In ut augue vitae nibh lobortis tempor. Aliquam hendrerit quam. Phasellus sed orci. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut sed urna. Donec nunc urna, porttitor a, feugiat pellentesque, varius id, justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Sed sollicitudin. Integer enim. Aenean sollicitudin.
+ </p>
+ <p>
+ Integer lorem turpis, dapibus sed, vulputate nec, volutpat a, sem. Sed malesuada laoreet lorem. Duis mauris ipsum, fringilla nec, tristique vel, imperdiet vel, neque. Nulla vel purus. Fusce non lectus. Mauris pulvinar. Curabitur eget eros. Nunc ultrices, risus vitae adipiscing scelerisque, quam mi auctor lacus, non pellentesque augue sapien a magna. Etiam rutrum posuere tortor. Mauris rhoncus sagittis dolor. Donec sed quam. Vivamus vel diam id massa adipiscing bibendum. Suspendisse potenti. Integer arcu est, adipiscing sit amet, convallis eu, sollicitudin tincidunt, quam.
+ </p>
+ <p>
+ Etiam ligula lorem, imperdiet ac, luctus eget, ultrices at, odio. Vivamus malesuada, justo eu adipiscing semper, nisi dui tempus magna, quis ultrices nunc tellus id massa. Nullam lobortis auctor sapien. Quisque non nulla. Donec lobortis pellentesque nisl. Sed lacus sapien, viverra vitae, blandit ut, fermentum quis, leo. Morbi augue turpis, hendrerit non, feugiat vel, laoreet sed, est. Nunc velit. Praesent lobortis. Integer enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur faucibus lacus ac ante. Donec odio odio, tincidunt a, egestas nec, scelerisque nec, dui. Cras sollicitudin. Donec lacus enim, mollis sit amet, interdum quis, euismod et, nulla. Nunc sit amet dui eu magna dapibus mollis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi.
+ </p>
+ <p>
+ In hac habitasse platea dictumst. Nunc neque urna, dapibus ut, tristique ut, bibendum ac, felis. Donec dictum est ut dolor. Etiam accumsan, velit sit amet blandit vestibulum, turpis quam hendrerit risus, vel interdum eros orci in nunc. Curabitur tellus sapien, rutrum ac, euismod ac, malesuada nec, pede. Proin sit amet ipsum. Praesent quam nisl, adipiscing nec, tristique eget, fermentum sed, est. Praesent ac est sit amet orci facilisis placerat. Sed consequat, est sit amet consectetuer viverra, risus urna porttitor tellus, ut convallis nibh libero in lectus. Pellentesque molestie, erat non vehicula pretium, turpis nisi eleifend eros, sed scelerisque tortor odio non tellus. Nunc leo tellus, faucibus vitae, placerat a, accumsan vel, arcu. In et orci. Ut tristique euismod nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed nulla nunc, placerat vitae, pellentesque non, interdum non, sapien. Quisque faucibus, eros sed venenatis sagittis, leo risus rhoncus risus, in pretium sem purus a lacus. Aliquam aliquam leo et diam.
+
+ </p>
+ <p>
+ Nulla sagittis diam. Phasellus vitae enim tristique libero molestie tristique. Nam mauris sem, elementum nec, cursus in, fringilla ac, neque. Nunc metus nisi, dictum vel, vulputate quis, porttitor bibendum, tortor. Vestibulum vehicula. Nulla facilisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla ac magna sed purus ultricies euismod. Aliquam dictum. Sed mauris. Suspendisse justo. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi purus lorem, auctor non, porta ac, vehicula vel, orci. Morbi pharetra massa nec leo. Maecenas et mauris. Aliquam porttitor tincidunt nulla. Vestibulum pede.
+ </p>
+
+
+<div id="test-abs">
+ <h2>Absolute test</h2>
+ <div id="testAbsWrap">
+ <img src="castle.jpg" alt="test image" id="testAbsImage" width="500" height="333" />
+ </div>
+
+ <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>
+
+
diff --git a/cropper/tests/example-CSS-Float.htm b/cropper/tests/example-CSS-Float.htm new file mode 100644 index 000000000..5066553fe --- /dev/null +++ b/cropper/tests/example-CSS-Float.htm @@ -0,0 +1,124 @@ +<!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>CSS - Float test</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">
+
+ // setup the callback function
+ 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;
+ }
+
+ // float example
+ Event.observe(
+ window,
+ 'load',
+ function() {
+ new Cropper.Img(
+ 'testFloatImage',
+ {
+ onEndCrop: function( coords, dimensions ) {
+ $( 'floatX1' ).value = coords.x1;
+ $( 'floatY1' ).value = coords.y1;
+ $( 'floatX2' ).value = coords.x2;
+ $( 'floatY2' ).value = coords.y2;
+ $( 'floatWidth' ).value = dimensions.width;
+ $( 'floatHeight' ).value = dimensions.height;
+ }
+ }
+ );
+ }
+ );
+
+ 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;
+ }
+
+ html, body {
+ margin: 0;
+ }
+
+ #testWrap {
+ margin: 20px 0 0 50px; /* Just while testing, to make sure we return the correct positions for the image & not the window */
+ }
+
+ #test-float {
+ width: 600px;
+ float: right;
+ background-color: #eee;
+ border: 3px solid #000;
+ margin: 10px;
+ padding: 5px;
+ }
+
+ </style>
+</head>
+<body>
+ <h2>Test page with floating wrapper</h2>
+ <p>
+ Some test content before the image
+ </p>
+
+<div id="test-float">
+ <h2>Float test</h2>
+ <div id="testFloatWrap">
+ <img src="castle.jpg" alt="test image" id="testFloatImage" width="500" height="333" />
+ </div>
+
+ <p>
+ <label for="floatX1">x1:</label>
+ <input type="text" name="floatX1" id="floatX1" />
+ </p>
+ <p>
+ <label for="floatY1">y1:</label>
+ <input type="text" name="floatY1" id="floatY1" />
+ </p>
+ <p>
+ <label for="floatX2">x2:</label>
+ <input type="text" name="floatX2" id="floatX2" />
+ </p>
+ <p>
+ <label for="floatY2">y2:</label>
+ <input type="text" name="floatY2" id="floatY2" />
+ </p>
+ <p>
+ <label for="floatWidth">width:</label>
+ <input type="text" name="floatWidth" id="floatWidth" />
+ </p>
+ <p>
+ <label for="floatHeight">height</label>
+ <input type="text" name="floatHeight" id="floatHeight" />
+ </p>
+</div>
+
+</body>
+</html>
+
+
diff --git a/cropper/tests/example-CSS-Relative.htm b/cropper/tests/example-CSS-Relative.htm new file mode 100644 index 000000000..5894fe1f9 --- /dev/null +++ b/cropper/tests/example-CSS-Relative.htm @@ -0,0 +1,116 @@ +<!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>CSS - Relative test</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">
+
+ // setup the callback function
+ 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;
+ }
+
+ // relative example
+ Event.observe(
+ window,
+ 'load',
+ function() {
+ new Cropper.Img(
+ 'testImage',
+ {
+ onEndCrop: onEndCrop
+ }
+ )
+ }
+ );
+
+ 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;
+ }
+
+ html, body {
+ margin: 0;
+ }
+
+ #testWrap {
+ margin: 20px 0 0 50px; /* Just while testing, to make sure we return the correct positions for the image & not the window */
+ }
+
+ #test-relative {
+ background-color: #ccc;
+ border: 3px solid #ddd;
+ position: relative;
+ top: 25px;
+ left: 25px;
+ }
+ </style>
+</head>
+<body>
+ <h2>Test page with relatively positioned wrapper</h2>
+ <p>
+ Some test content before the image
+ </p>
+
+<div id="test-relative">
+ <h2>Relative test</h2>
+ <div id="testWrap">
+ <img src="castle.jpg" alt="test image" id="testImage" width="500" height="333" />
+ </div>
+
+
+ <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>
+
+
diff --git a/cropper/tests/example-CoordsOnLoad.htm b/cropper/tests/example-CoordsOnLoad.htm new file mode 100644 index 000000000..254a23472 --- /dev/null +++ b/cropper/tests/example-CoordsOnLoad.htm @@ -0,0 +1,108 @@ +<!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>Loading & displaying co-ordinates of crop area on attachment test</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">
+
+ // setup the callback function
+ 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;
+ }
+
+ // basic example
+ Event.observe(
+ window,
+ 'load',
+ function() {
+ new Cropper.Img(
+ 'testImage',
+ {
+ onEndCrop: onEndCrop,
+ displayOnInit: true,
+ onloadCoords: { x1: 10, y1: 10, x2: 250, y2: 100 }
+ }
+ )
+ }
+ );
+
+
+ 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;
+ }
+
+ html, body {
+ margin: 0;
+ }
+
+ #testWrap {
+ margin: 20px 0 0 50px; /* Just while testing, to make sure we return the correct positions for the image & not the window */
+ }
+ </style>
+</head>
+<body>
+ <h2>Loading & displaying co-ordinates of crop area on attachment test</h2>
+ <p>
+ Some test content before the image
+ </p>
+
+ <div id="testWrap">
+ <img src="castle.jpg" alt="test image" id="testImage" width="500" height="333" />
+ </div>
+
+
+ <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>
+
+</body>
+</html>
+
+
diff --git a/cropper/tests/example-CoordsOnLoadWithRatio.htm b/cropper/tests/example-CoordsOnLoadWithRatio.htm new file mode 100644 index 000000000..3a696360a --- /dev/null +++ b/cropper/tests/example-CoordsOnLoadWithRatio.htm @@ -0,0 +1,109 @@ +<!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>Loading & displaying co-ordinates (with ratio) of crop area on attachment test<</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">
+
+ // setup the callback function
+ 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;
+ }
+
+ // basic example
+ Event.observe(
+ window,
+ 'load',
+ function() {
+ new Cropper.Img(
+ 'testImage',
+ {
+ onEndCrop: onEndCrop,
+ displayOnInit: true,
+ onloadCoords: { x1: 10, y1: 10, x2: 210, y2: 110 },
+ ratioDim: { x: 200, y: 100 }
+ }
+ )
+ }
+ );
+
+
+ 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;
+ }
+
+ html, body {
+ margin: 0;
+ }
+
+ #testWrap {
+ margin: 20px 0 0 50px; /* Just while testing, to make sure we return the correct positions for the image & not the window */
+ }
+ </style>
+</head>
+<body>
+ <h2>Loading & displaying co-ordinates (with ratio) of crop area on attachment test</h2>
+ <p>
+ Some test content before the image
+ </p>
+
+ <div id="testWrap">
+ <img src="castle.jpg" alt="test image" id="testImage" width="500" height="333" />
+ </div>
+
+
+ <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>
+
+</body>
+</html>
+
+
diff --git a/cropper/tests/example-Dimensions.htm b/cropper/tests/example-Dimensions.htm new file mode 100644 index 000000000..f54f99683 --- /dev/null +++ b/cropper/tests/example-Dimensions.htm @@ -0,0 +1,225 @@ +<!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>Different dimensions test</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 minimum dimensions + Event.observe( + window, + 'load', + function() { + new Cropper.Img( + 'testImage', + { + minWidth: 200, + minHeight: 120, + maxWidth: 200, + //maxHeight: 120, + displayOnInit: true, + onEndCrop: onEndCrop + } + ) + } + ); + */ + + Event.observe( window, 'load', + function() { + Event.observe( 'dimensionsForm', 'submit', CropManager.attachCropper.bindAsEventListener( CropManager ) ); + CropManager.attachCropper(); + } + ); + + /** + * A little manager that allows us to reset the options dynamically + */ + var CropManager = { + /** + * Holds the current Cropper.Img object + * @var obj + */ + curCrop: null, + + /** + * Gets a min/max parameter from the form + * + * @access private + * @param string Form element ID + * @return int + */ + getParam: function( name ) { + var val = $F( name ); + console.log( name + ' :: ' + val ); + return parseInt( val ); + }, + + /** + * Attaches/resets the image cropper + * + * @access private + * @param obj Event object + * @return void + */ + attachCropper: function( e ) { + if( this.curCrop == null ) { + this.curCrop = new Cropper.Img( + 'testImage', + { + minWidth: this.getParam( 'minWidth' ), + minHeight: this.getParam( 'minHeight' ), + maxWidth: this.getParam( 'maxWidth' ), + maxHeight: this.getParam( 'maxHeight' ), + onEndCrop: onEndCrop + } + ); + } else { + this.removeCropper(); + this.curCrop.initialize( + 'testImage', + { + minWidth: this.getParam( 'minWidth' ), + minHeight: this.getParam( 'minHeight' ), + maxWidth: this.getParam( 'maxWidth' ), + maxHeight: this.getParam( 'maxHeight' ), + onEndCrop: onEndCrop + } + ); + } + if( e != null ) Event.stop( e ); + }, + + /** + * Removes the cropper + * + * @access public + * @return void + */ + removeCropper: function() { + if( this.curCrop != null ) { + this.curCrop.remove(); + } + }, + + /** + * Resets the cropper, either re-setting or re-applying + * + * @access public + * @return void + */ + resetCropper: function() { + this.attachCropper(); + } + }; + + /* + 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 { + margin: 20px 0 0 50px; /* Just while testing, to make sure we return the correct positions for the image & not the window */ + } + + #dimensionsForm { + float: right; + width: 350px; + } + </style> +</head> +<body> + <h2>Multiple dimensions tests</h2> + <p> + Test of applying different dimension restrictions to the cropper + </p> + + <form action="#" id="dimensionsForm"> + <fieldset> + Set the cropper with the following dimension restrictions: + <p> + <label for="minWidth">Min Width</label> + <input type="text" size="10" maxlength="3" value="200" id="minWidth" name="minWidth" /> + </p> + <p> + <label for="maxWidth">Max Width</label> + <input type="text" size="10" maxlength="3" value="200" id="maxWidth" name="maxWidth" /> + </p> + <p> + <label for="minHeight">Min Height</label> + <input type="text" size="10" maxlength="3" value="120" id="minHeight" name="minHeight" /> + </p> + <p> + <label for="maxHeight">Max Height</label> + <input type="text" size="10" maxlength="3" value="120" id="maxHeight" name="maxHeight" /> + </p> + <input type="submit" value="Set Cropper" /> + </fieldset> + </form> + + <div id="testWrap"> + <img src="castle.jpg" alt="test image" id="testImage" width="500" height="333" /> + </div> + + + <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> + +</body> +</html> + + diff --git a/cropper/tests/example-DynamicImage.htm b/cropper/tests/example-DynamicImage.htm new file mode 100644 index 000000000..898363489 --- /dev/null +++ b/cropper/tests/example-DynamicImage.htm @@ -0,0 +1,203 @@ +<!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>Dynamic image test</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">
+
+ /**
+ * A little manager that allows us to swap the image dynamically
+ *
+ */
+ var CropImageManager = {
+ /**
+ * Holds the current Cropper.Img object
+ * @var obj
+ */
+ curCrop: null,
+
+ /**
+ * Initialises the cropImageManager
+ *
+ * @access public
+ * @return void
+ */
+ init: function() {
+ this.attachCropper();
+ },
+
+ /**
+ * Handles the changing of the select to change the image, the option value
+ * is a pipe seperated list of imgSrc|width|height
+ *
+ * @access public
+ * @param obj event
+ * @return void
+ */
+ onChange: function( e ) {
+ var vals = $F( Event.element( e ) ).split('|');
+ this.setImage( vals[0], vals[1], vals[2] );
+ },
+
+ /**
+ * Sets the image within the element & attaches/resets the image cropper
+ *
+ * @access private
+ * @param string Source path of new image
+ * @param int Width of new image in pixels
+ * @param int Height of new image in pixels
+ * @return void
+ */
+ setImage: function( imgSrc, w, h ) {
+ $( 'testImage' ).src = imgSrc;
+ $( 'testImage' ).width = w;
+ $( 'testImage' ).height = h;
+ this.attachCropper();
+ },
+
+ /**
+ * Attaches/resets the image cropper
+ *
+ * @access private
+ * @return void
+ */
+ attachCropper: function() {
+ if( this.curCrop == null ) this.curCrop = new Cropper.Img( 'testImage', { onEndCrop: onEndCrop } );
+ else this.curCrop.reset();
+ },
+
+ /**
+ * Removes the cropper
+ *
+ * @access public
+ * @return void
+ */
+ removeCropper: function() {
+ if( this.curCrop != null ) {
+ this.curCrop.remove();
+ }
+ },
+
+ /**
+ * Resets the cropper, either re-setting or re-applying
+ *
+ * @access public
+ * @return void
+ */
+ resetCropper: function() {
+ this.attachCropper();
+ }
+ };
+
+
+ // setup the callback function
+ 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;
+ }
+
+ // basic example
+ Event.observe(
+ window,
+ 'load',
+ function() {
+ CropImageManager.init();
+ Event.observe( $('removeCropper'), 'click', CropImageManager.removeCropper.bindAsEventListener( CropImageManager ), false );
+ Event.observe( $('resetCropper'), 'click', CropImageManager.resetCropper.bindAsEventListener( CropImageManager ), false );
+ Event.observe( $('imageChoice'), 'change', CropImageManager.onChange.bindAsEventListener( CropImageManager ), false );
+ }
+ );
+
+
+ /*
+ 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;
+ }
+
+ html, body {
+ margin: 0;
+ }
+
+ #testWrap {
+ margin: 20px 0 0 50px; /* Just while testing, to make sure we return the correct positions for the image & not the window */
+ }
+ </style>
+</head>
+<body>
+ <h2>Dynamic image test</h2>
+ <p>
+ Test of dynamically changing images or removing & re-applying the cropper
+ </p>
+
+ <div id="testWrap">
+ <img src="castle.jpg" alt="test image" id="testImage" width="500" height="333" />
+ </div>
+
+ <p>
+ <label for="imageChoice">image:</label>
+ <select name="imageChoice" id="imageChoice">
+ <option value="castle.jpg|500|333">Castle</option>
+ <option value="poppy.jpg|311|466">Flower</option>
+ </select>
+ </p>
+
+ <p>
+ <input type="button" id="removeCropper" value="Remove Cropper" />
+ <input type="button" id="resetCropper" value="Reset Cropper" /> + </p>
+
+
+ <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>
+
+</body>
+</html>
+
+
diff --git a/cropper/tests/example-FixedRatio.htm b/cropper/tests/example-FixedRatio.htm new file mode 100644 index 000000000..973bedda9 --- /dev/null +++ b/cropper/tests/example-FixedRatio.htm @@ -0,0 +1,104 @@ +<!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>Fixed ratio test</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;
+ }
+
+ // with a supplied ratio
+ Event.observe(
+ window,
+ 'load',
+ function() {
+ new Cropper.Img(
+ 'testImage',
+ {
+ ratioDim: { x: 220, y: 124 },
+ displayOnInit: true,
+ onEndCrop: onEndCrop
+ }
+ )
+ }
+ );
+
+ /*
+ 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 {
+ margin: 20px 0 0 50px; /* Just while testing, to make sure we return the correct positions for the image & not the window */
+ }
+ </style>
+</head>
+<body>
+ <h2>Fixed ratio test</h2>
+ <p>
+ Test of applying a fixed ratio to the cropper
+ </p>
+ <br />
+
+ <div id="testWrap">
+ <img src="castle.jpg" alt="test image" id="testImage" width="500" height="333" />
+ </div>
+
+
+ <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>
+
+</body>
+</html>
+
+
diff --git a/cropper/tests/example-MinimumDimensions.htm b/cropper/tests/example-MinimumDimensions.htm new file mode 100644 index 000000000..3ae93c8e1 --- /dev/null +++ b/cropper/tests/example-MinimumDimensions.htm @@ -0,0 +1,105 @@ +<!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>Min dimensions test</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 minimum dimensions
+ Event.observe(
+ window,
+ 'load',
+ function() {
+ new Cropper.Img(
+ 'testImage',
+ {
+ minWidth: 200,
+ minHeight: 120,
+ displayOnInit: true,
+ onEndCrop: onEndCrop
+ }
+ )
+ }
+ );
+
+ /*
+ 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 {
+ margin: 20px 0 0 50px; /* Just while testing, to make sure we return the correct positions for the image & not the window */
+ }
+ </style>
+</head>
+<body>
+ <h2>Minimum (both axes ) dimension test</h2>
+ <p>
+ Test of applying a minimum dimension to both axes to the cropper
+ </p>
+ <br />
+
+ <div id="testWrap">
+ <img src="castle.jpg" alt="test image" id="testImage" width="500" height="333" />
+ </div>
+
+
+ <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>
+
+</body>
+</html>
+
+
diff --git a/cropper/tests/example-MinimumWidth.htm b/cropper/tests/example-MinimumWidth.htm new file mode 100644 index 000000000..b0576b87f --- /dev/null +++ b/cropper/tests/example-MinimumWidth.htm @@ -0,0 +1,105 @@ +<!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>Min (single axis) dimensions test</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 minimum dimensions
+ Event.observe(
+ window,
+ 'load',
+ function() {
+ new Cropper.Img(
+ 'testImage',
+ {
+ minWidth: 200,
+ displayOnInit: true,
+ onEndCrop: onEndCrop
+ }
+ )
+ }
+ );
+
+ /*
+ 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 {
+ margin: 20px 0 0 50px; /* Just while testing, to make sure we return the correct positions for the image & not the window */
+ }
+ </style>
+</head>
+<body>
+ <h2>Minimum (single axis) dimension test</h2>
+ <p>
+ Test of applying a minimum dimension to only one axis (width in this case) to the cropper
+ </p>
+ <br />
+ <br /><br />
+
+ <div id="testWrap">
+ <img src="castle.jpg" alt="test image" id="testImage" width="500" height="333" />
+ </div>
+
+
+ <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>
+
+</body>
+</html>
+
+
diff --git a/cropper/tests/example-Preview.htm b/cropper/tests/example-Preview.htm new file mode 100644 index 000000000..701670c91 --- /dev/null +++ b/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>
+
+
diff --git a/cropper/tests/poppy.jpg b/cropper/tests/poppy.jpg Binary files differnew file mode 100644 index 000000000..1f6498584 --- /dev/null +++ b/cropper/tests/poppy.jpg diff --git a/cropper/tests/staticHTMLStructure.htm b/cropper/tests/staticHTMLStructure.htm new file mode 100644 index 000000000..ddb99278e --- /dev/null +++ b/cropper/tests/staticHTMLStructure.htm @@ -0,0 +1,236 @@ +<!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>
+</head>
+<body>
+ <!--
+
+ This is a static test file for the HTML & CSS structure employed, tested in
+ the following browsers:
+
+ PC:
+ IE 6: working
+ IE 5.5: working
+ IE 5.0: opacity issues
+ FF 1.5: working
+ Opera 9: working
+ MAC:
+ Camino 1.0: working
+ FF 1.5: working
+ Safari 2.0: working
+
+ -->
+ <style type="text/css">
+ .imgCrop_wrap {
+ width: 500px; /* @TODO IN JS */
+ height: 333px; /* @TODO IN JS */
+ position: relative;
+ cursor: crosshair;
+ }
+
+ /* fix for IE displaying all boxes at line-height by default */
+ .imgCrop_wrap,
+ .imgCrop_wrap * {
+ font-size: 0;
+ }
+
+ .imgCrop_overlay {
+ background-color: #000;
+ opacity: 0.5;
+ filter:alpha(opacity=50);
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ }
+
+ .imgCrop_selArea {
+ position: absolute;
+ cursor: move;
+ /* @TODO: rest to be done via JS when selecting areas */
+ top: 110px;
+ left: 210px;
+ width: 200px;
+ height: 200px;
+ z-index: 2;
+ background: transparent url(castle.jpg) no-repeat -210px -110px;
+ }
+
+ /* imgCrop_clickArea is all a fix for IE 5.5 & 6 to allow the user to click on the given area */
+ .imgCrop_clickArea {
+ width: 100%;
+ height: 100%;
+ background-color: #FFF;
+ opacity: 0.01;
+ filter:alpha(opacity=01);
+ }
+
+ .imgCrop_marqueeHoriz {
+ position: absolute;
+ width: 100%;
+ height: 1px;
+ background: transparent url(marqueeHoriz.gif) repeat-x 0 0;
+ }
+
+ .imgCrop_marqueeVert {
+ position: absolute;
+ height: 100%;
+ width: 1px;
+ background: transparent url(marqueeVert.gif) repeat-y 0 0;
+ }
+
+ .imgCrop_marqueeNorth { top: 0; left: 0; }
+ .imgCrop_marqueeEast { top: 0; right: 0; }
+ .imgCrop_marqueeSouth { bottom: 0px; left: 0; }
+ .imgCrop_marqueeWest { top: 0; left: 0; }
+
+
+ .imgCrop_handle {
+ position: absolute;
+ border: 1px solid #333;
+ width: 6px;
+ height: 6px;
+ background: #FFF;
+ opacity: 0.5;
+ filter:alpha(opacity=50);
+ z-index: 3;
+ }
+
+ .imgCrop_handleN {
+ top: -3px;
+ left: 0;
+ margin-left: 49%; /* @TODO : in JS */
+ cursor: n-resize;
+ }
+
+ .imgCrop_handleNE {
+ top: -3px;
+ right: -3px;
+ cursor: ne-resize;
+ }
+
+ .imgCrop_handleE {
+ top: 0;
+ right: -3px;
+ margin-top: 49%; /* @TODO : in JS */
+ cursor: e-resize;
+ }
+
+ .imgCrop_handleSE {
+ right: -3px;
+ bottom: -3px;
+ cursor: se-resize;
+ }
+
+ .imgCrop_handleS {
+ right: 0;
+ bottom: -3px;
+ margin-right: 49%; /* @TODO : in JS */
+ cursor: s-resize;
+ }
+
+ .imgCrop_handleSW {
+ left: -3px;
+ bottom: -3px;
+ cursor: sw-resize;
+ }
+
+ .imgCrop_handleW {
+ top: 0;
+ left: -3px;
+ margin-top: 49%; /* @TODO : in JS */
+ cursor: e-resize;
+ }
+
+ .imgCrop_handleNW {
+ top: -3px;
+ left: -3px;
+ cursor: nw-resize;
+ }
+
+ /**
+ * Create an area to click & drag around on as the default browser behaviour is to let you drag the image
+ */
+ .imgCrop_dragArea {
+ width: 100%;
+ height: 100%;
+ z-index: 200;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+
+
+ .imgCrop_previewWrap {
+ width: 200px; /* @TODO : in JS */
+ height: 200px; /* @TODO : in JS */
+ overflow: hidden;
+ position: relative;
+ }
+
+ /* @TODO : all in JS */
+ .imgCrop_previewWrap img {
+ position: absolute;
+ width: 500px;
+ height: 333px;
+ left: -210px;
+ top: -110px;
+ }
+
+ /**
+ * These are just for the static test
+ */
+ .imgCrop_wrap {
+ margin: 20px 0 0 50px;
+ float: left;
+ }
+
+ #previewWrapper {
+ float: left;
+ margin-left: 20px;
+ }
+
+
+ </style>
+
+ <br /><br />
+
+ <!-- This is all attached to the image dynamically -->
+ <div class="imgCrop_wrap">
+ <img src="castle.jpg" alt="test image" id="testImage" width="500" height="333" />
+ <div class="imgCrop_dragArea">
+ <div class="imgCrop_overlay"></div>
+ <div class="imgCrop_selArea">
+ <!-- marquees -->
+ <!-- the inner spans are only required for IE to stop it making the divs 1px high/wide -->
+ <div class="imgCrop_marqueeHoriz imgCrop_marqueeNorth"><span></span></div>
+ <div class="imgCrop_marqueeVert imgCrop_marqueeEast"><span></span></div>
+ <div class="imgCrop_marqueeHoriz imgCrop_marqueeSouth"><span></span></div>
+ <div class="imgCrop_marqueeVert imgCrop_marqueeWest"><span></span></div>
+ <!-- handles -->
+ <div class="imgCrop_handle imgCrop_handleN"></div>
+ <div class="imgCrop_handle imgCrop_handleNE"></div>
+ <div class="imgCrop_handle imgCrop_handleE"></div>
+ <div class="imgCrop_handle imgCrop_handleSE"></div>
+ <div class="imgCrop_handle imgCrop_handleS"></div>
+ <div class="imgCrop_handle imgCrop_handleSW"></div>
+ <div class="imgCrop_handle imgCrop_handleW"></div>
+ <div class="imgCrop_handle imgCrop_handleNW"></div>
+ <div class="imgCrop_clickArea"></div>
+ </div>
+ <div class="imgCrop_clickArea"></div>
+ </div>
+ </div>
+
+ <div id="previewWrapper">
+ <h3>Preview:</h3>
+ <div class="imgCrop_previewWrap">
+ <img src="castle.jpg" alt="test image" id="previewImage" />
+ </div>
+ </div>
+</body>
+</html>
+
+
|
