diff options
Diffstat (limited to 'library/cropper/tests/example-Dimensions.htm')
| -rw-r--r-- | library/cropper/tests/example-Dimensions.htm | 225 |
1 files changed, 0 insertions, 225 deletions
diff --git a/library/cropper/tests/example-Dimensions.htm b/library/cropper/tests/example-Dimensions.htm deleted file mode 100644 index f54f99683..000000000 --- a/library/cropper/tests/example-Dimensions.htm +++ /dev/null @@ -1,225 +0,0 @@ -<!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> - - |