library/cropper/tests/example-Dimensions.htm

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   3 <head>
   4         <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
   5         <meta http-equiv="Content-Language" content="en-us" />
   6         <title>Different dimensions test</title>
   7         <script src="../lib/prototype.js" type="text/javascript"></script>
   8         <script src="../lib/scriptaculous.js?load=builder,dragdrop" type="text/javascript"></script>
   9         <script src="../cropper.js" type="text/javascript"></script>
  10
  11
  12         <script type="text/javascript" charset="utf-8">
  13
  14                 function onEndCrop( coords, dimensions ) {
  15                         $( 'x1' ).value = coords.x1;
  16                         $( 'y1' ).value = coords.y1;
  17                         $( 'x2' ).value = coords.x2;
  18                         $( 'y2' ).value = coords.y2;
  19                         $( 'width' ).value = dimensions.width;
  20                         $( 'height' ).value = dimensions.height;
  21                 }
  22
  23                 /*
  24
  25                 // example with minimum dimensions
  26                 Event.observe(
  27                         window,
  28                         'load',
  29                         function() {
  30                                 new Cropper.Img(
  31                                         'testImage',
  32                                         {
  33                                                 minWidth: 200,
  34                                                 minHeight: 120,
  35                                                 maxWidth: 200,
  36                                                 //maxHeight: 120,
  37                                                 displayOnInit: true,
  38                                                 onEndCrop: onEndCrop
  39                                         }
  40                                 )
  41                         }
  42                 );
  43                 */
  44
  45                 Event.observe( window, 'load',
  46                         function() {
  47                                 Event.observe( 'dimensionsForm', 'submit', CropManager.attachCropper.bindAsEventListener( CropManager ) );
  48                                 CropManager.attachCropper();
  49                         }
  50                 );
  51
  52                 /**
  53                  * A little manager that allows us to reset the options dynamically
  54                  */
  55                 var CropManager = {
  56                         /**
  57                          * Holds the current Cropper.Img object
  58                          * @var obj
  59                          */
  60                         curCrop: null,
  61
  62                         /**
  63                          * Gets a min/max parameter from the form
  64                          *
  65                          * @access private
  66                          * @param string Form element ID
  67                          * @return int
  68                          */
  69                         getParam: function( name ) {
  70                                 var val = $F( name );
  71                                 console.log( name + ' :: ' + val );
  72                                 return parseInt( val );
  73                         },
  74
  75                         /**
  76                          * Attaches/resets the image cropper
  77                          *
  78                          * @access private
  79                          * @param obj Event object
  80                          * @return void
  81                          */
  82                         attachCropper: function( e ) {
  83                                 if( this.curCrop == null ) {
  84                                         this.curCrop = new Cropper.Img(
  85                                                 'testImage',
  86                                                 {
  87                                                         minWidth: this.getParam( 'minWidth' ),
  88                                                         minHeight: this.getParam( 'minHeight' ),
  89                                                         maxWidth: this.getParam( 'maxWidth' ),
  90                                                         maxHeight: this.getParam( 'maxHeight' ),
  91                                                         onEndCrop: onEndCrop
  92                                                 }
  93                                         );
  94                                 } else {
  95                                         this.removeCropper();
  96                                         this.curCrop.initialize(
  97                                                 'testImage',
  98                                                 {
  99                                                         minWidth: this.getParam( 'minWidth' ),
 100                                                         minHeight: this.getParam( 'minHeight' ),
 101                                                         maxWidth: this.getParam( 'maxWidth' ),
 102                                                         maxHeight: this.getParam( 'maxHeight' ),
 103                                                         onEndCrop: onEndCrop
 104                                                 }
 105                                         );
 106                                 }
 107                                 if( e != null ) Event.stop( e );
 108                         },
 109
 110                         /**
 111                          * Removes the cropper
 112                          *
 113                          * @access public
 114                          * @return void
 115                          */
 116                         removeCropper: function() {
 117                                 if( this.curCrop != null ) {
 118                                         this.curCrop.remove();
 119                                 }
 120                         },
 121
 122                         /**
 123                          * Resets the cropper, either re-setting or re-applying
 124                          *
 125                          * @access public
 126                          * @return void
 127                          */
 128                         resetCropper: function() {
 129                                 this.attachCropper();
 130                         }
 131                 };
 132
 133                 /*
 134                 if( typeof(dump) != 'function' ) {
 135                         Debug.init(true, '/');
 136
 137                         function dump( msg ) {
 138                                 // Debug.raise( msg );
 139                         };
 140                 } else dump( '---------------------------------------\n' );
 141                 */
 142
 143         </script>
 144         <link rel="stylesheet" type="text/css" href="debug.css" media="all" />
 145         <style type="text/css">
 146                 label {
 147                         clear: left;
 148                         margin-left: 50px;
 149                         float: left;
 150                         width: 5em;
 151                 }
 152
 153                 #testWrap {
 154                         margin: 20px 0 0 50px; /* Just while testing, to make sure we return the correct positions for the image & not the window */
 155                 }
 156
 157                 #dimensionsForm {
 158                         float: right;
 159                         width: 350px;
 160                 }
 161         </style>
 162 </head>
 163 <body>
 164         <h2>Multiple dimensions tests</h2>
 165         <p>
 166                 Test of applying different dimension restrictions to the cropper
 167         </p>
 168
 169         <form action="#" id="dimensionsForm">
 170                 <fieldset>
 171                         Set the cropper with the following dimension restrictions:
 172                         <p>
 173                                 <label for="minWidth">Min Width</label>
 174                                 <input type="text" size="10" maxlength="3" value="200" id="minWidth" name="minWidth" />
 175                         </p>
 176                         <p>
 177                                 <label for="maxWidth">Max Width</label>
 178                                 <input type="text" size="10" maxlength="3" value="200" id="maxWidth" name="maxWidth" />
 179                         </p>
 180                         <p>
 181                                 <label for="minHeight">Min Height</label>
 182                                 <input type="text" size="10" maxlength="3" value="120" id="minHeight" name="minHeight" />
 183                         </p>
 184                         <p>
 185                                 <label for="maxHeight">Max Height</label>
 186                                 <input type="text" size="10" maxlength="3" value="120" id="maxHeight" name="maxHeight" />
 187                         </p>
 188                         <input type="submit" value="Set Cropper" />
 189                 </fieldset>
 190         </form>
 191
 192         <div id="testWrap">
 193                 <img src="castle.jpg" alt="test image" id="testImage" width="500" height="333" />
 194         </div>
 195
 196
 197         <p>
 198                 <label for="x1">x1:</label>
 199                 <input type="text" name="x1" id="x1" />
 200         </p>
 201         <p>
 202                 <label for="y1">y1:</label>
 203                 <input type="text" name="y1" id="y1" />
 204         </p>
 205         <p>
 206                 <label for="x2">x2:</label>
 207                 <input type="text" name="x2" id="x2" />
 208         </p>
 209         <p>
 210                 <label for="y2">y2:</label>
 211                 <input type="text" name="y2" id="y2" />
 212         </p>
 213         <p>
 214                 <label for="width">width:</label>
 215                 <input type="text" name="width" id="width" />
 216         </p>
 217         <p>
 218                 <label for="height">height</label>
 219                 <input type="text" name="height" id="height" />
 220         </p>
 221
 222 </body>
 223 </html>
 224
 225