library/cropper/tests/example-DynamicImage.htm

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
   2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
   3 <head>\r
   4         <meta http-equiv="Content-type" content="text/html; charset=utf-8" />\r
   5         <meta http-equiv="Content-Language" content="en-us" />\r
   6         <title>Dynamic image test</title>\r
   7         <script src="../lib/prototype.js" type="text/javascript"></script>      \r
   8         <script src="../lib/scriptaculous.js?load=builder,dragdrop" type="text/javascript"></script>\r
   9         <script src="../cropper.js" type="text/javascript"></script>\r
  10         \r
  11         \r
  12         <script type="text/javascript" charset="utf-8">\r
  13                 \r
  14                 /**\r
  15                  * A little manager that allows us to swap the image dynamically\r
  16                  *\r
  17                  */\r
  18                 var CropImageManager = {\r
  19                         /**\r
  20                          * Holds the current Cropper.Img object\r
  21                          * @var obj\r
  22                          */\r
  23                         curCrop: null,\r
  24                         \r
  25                         /**\r
  26                          * Initialises the cropImageManager\r
  27                          *\r
  28                          * @access public\r
  29                          * @return void\r
  30                          */\r
  31                         init: function() {\r
  32                                 this.attachCropper();\r
  33                         },\r
  34                         \r
  35                         /**\r
  36                          * Handles the changing of the select to change the image, the option value\r
  37                          * is a pipe seperated list of imgSrc|width|height\r
  38                          * \r
  39                          * @access public\r
  40                          * @param obj event\r
  41                          * @return void\r
  42                          */\r
  43                         onChange: function( e ) {\r
  44                                 var vals = $F( Event.element( e ) ).split('|');\r
  45                                 this.setImage( vals[0], vals[1], vals[2] ); \r
  46                         },\r
  47                         \r
  48                         /**\r
  49                          * Sets the image within the element & attaches/resets the image cropper\r
  50                          *\r
  51                          * @access private\r
  52                          * @param string Source path of new image\r
  53                          * @param int Width of new image in pixels\r
  54                          * @param int Height of new image in pixels\r
  55                          * @return void\r
  56                          */\r
  57                         setImage: function( imgSrc, w, h ) {\r
  58                                 $PR( 'testImage' ).src = imgSrc;\r
  59                                 $PR( 'testImage' ).width = w;\r
  60                                 $PR( 'testImage' ).height = h;\r
  61                                 this.attachCropper();\r
  62                         },\r
  63                         \r
  64                         /** \r
  65                          * Attaches/resets the image cropper\r
  66                          *\r
  67                          * @access private\r
  68                          * @return void\r
  69                          */\r
  70                         attachCropper: function() {\r
  71                                 if( this.curCrop == null ) this.curCrop = new Cropper.Img( 'testImage', { onEndCrop: onEndCrop } );\r
  72                                 else this.curCrop.reset();\r
  73                         },\r
  74                         \r
  75                         /**\r
  76                          * Removes the cropper\r
  77                          *\r
  78                          * @access public\r
  79                          * @return void\r
  80                          */\r
  81                         removeCropper: function() {\r
  82                                 if( this.curCrop != null ) {\r
  83                                         this.curCrop.remove();\r
  84                                 }\r
  85                         },\r
  86                         \r
  87                         /**\r
  88                          * Resets the cropper, either re-setting or re-applying\r
  89                          *\r
  90                          * @access public\r
  91                          * @return void\r
  92                          */\r
  93                         resetCropper: function() {\r
  94                                 this.attachCropper();\r
  95                         }\r
  96                 };\r
  97                 \r
  98                 \r
  99                 // setup the callback function\r
 100                 function onEndCrop( coords, dimensions ) {\r
 101                         $PR( 'x1' ).value = coords.x1;\r
 102                         $PR( 'y1' ).value = coords.y1;\r
 103                         $PR( 'x2' ).value = coords.x2;\r
 104                         $PR( 'y2' ).value = coords.y2;\r
 105                         $PR( 'width' ).value = dimensions.width;\r
 106                         $PR( 'height' ).value = dimensions.height;\r
 107                 }\r
 108                 \r
 109                 // basic example\r
 110                 Event.observe( \r
 111                         window, \r
 112                         'load', \r
 113                         function() { \r
 114                                 CropImageManager.init();\r
 115                                 Event.observe( $PR('removeCropper'), 'click', CropImageManager.removeCropper.bindAsEventListener( CropImageManager ), false );\r
 116                                 Event.observe( $PR('resetCropper'), 'click', CropImageManager.resetCropper.bindAsEventListener( CropImageManager ), false );\r
 117                                 Event.observe( $PR('imageChoice'), 'change', CropImageManager.onChange.bindAsEventListener( CropImageManager ), false );\r
 118                         }\r
 119                 );              \r
 120                 \r
 121                 \r
 122                 /*\r
 123                 if( typeof(dump) != 'function' ) {\r
 124                         Debug.init(true, '/');\r
 125                         \r
 126                         function dump( msg ) {\r
 127                                 Debug.raise( msg );\r
 128                         };\r
 129                 } else dump( '---------------------------------------\n' );\r
 130                 */\r
 131                 \r
 132         </script>\r
 133         <link rel="stylesheet" type="text/css" href="debug.css" media="all" />\r
 134         <style type="text/css">\r
 135                 label { \r
 136                         clear: left;\r
 137                         margin-left: 50px;\r
 138                         float: left;\r
 139                         width: 5em;\r
 140                 }\r
 141                 \r
 142                 html, body { \r
 143                         margin: 0;\r
 144                 }\r
 145                 \r
 146                 #testWrap {\r
 147                         margin: 20px 0 0 50px; /* Just while testing, to make sure we return the correct positions for the image & not the window */\r
 148                 }\r
 149         </style>\r
 150 </head>\r
 151 <body>\r
 152         <h2>Dynamic image test</h2>\r
 153         <p>\r
 154                 Test of dynamically changing images or removing & re-applying the cropper\r
 155         </p>\r
 156         \r
 157         <div id="testWrap">\r
 158                 <img src="castle.jpg" alt="test image" id="testImage" width="500" height="333" />\r
 159         </div>\r
 160         \r
 161         <p>\r
 162                 <label for="imageChoice">image:</label>\r
 163                 <select name="imageChoice" id="imageChoice">\r
 164                         <option value="castle.jpg|500|333">Castle</option>\r
 165                         <option value="poppy.jpg|311|466">Flower</option>\r
 166                 </select>\r
 167         </p>\r
 168         \r
 169         <p>\r
 170                 <input type="button" id="removeCropper" value="Remove Cropper" />\r
 171                 <input type="button" id="resetCropper" value="Reset Cropper" />\r
 172         </p>\r
 173         \r
 174         \r
 175         <p>\r
 176                 <label for="x1">x1:</label>\r
 177                 <input type="text" name="x1" id="x1" />\r
 178         </p>\r
 179         <p>\r
 180                 <label for="y1">y1:</label>\r
 181                 <input type="text" name="y1" id="y1" />\r
 182         </p>\r
 183         <p>\r
 184                 <label for="x2">x2:</label>\r
 185                 <input type="text" name="x2" id="x2" />\r
 186         </p>\r
 187         <p>\r
 188                 <label for="y2">y2:</label>\r
 189                 <input type="text" name="y2" id="y2" />\r
 190         </p>\r
 191         <p>\r
 192                 <label for="width">width:</label>\r
 193                 <input type="text" name="width" id="width" />\r
 194         </p>\r
 195         <p>\r
 196                 <label for="height">height</label>\r
 197                 <input type="text" name="height" id="height" />\r
 198         </p>  \r
 199         \r
 200 </body>\r
 201 </html>\r
 202 \r
 203 \r