git.roojs.org Git - roojs1/blob - Roo/bootstrap/UploadCropbox.js

   1
   2 /*
   3 * Licence: LGPL
   4 */
   5
   6 /**
   7  * @class Roo.bootstrap.UploadCropbox
   8  * @extends Roo.bootstrap.Component
   9  * Bootstrap UploadCropbox class
  10  * @cfg {String} emptyText show when image has been loaded
  11  *
  12  * @constructor
  13  * Create a new UploadCropbox
  14  * @param {Object} config The config object
  15  */
  16
  17 Roo.bootstrap.UploadCropbox = function(config){
  18     Roo.bootstrap.UploadCropbox.superclass.constructor.call(this, config);
  19
  20     this.addEvents({
  21         /**
  22          * @event beforeSelectFile
  23          * Fire before select file
  24          * @param {Roo.EventObject} e
  25          */
  26         "beforeSelectFile" : true
  27
  28     });
  29 };
  30
  31 Roo.extend(Roo.bootstrap.UploadCropbox, Roo.bootstrap.Component,  {
  32
  33     emptyText : 'Click to upload image',
  34     scale : 0,
  35     rotate : 0,
  36     dragable : false,
  37     mouseX : 0,
  38     mouseY : 0,
  39
  40     getAutoCreate : function()
  41     {
  42         var cfg = {
  43             tag : 'div',
  44             cls : 'roo-upload-cropbox',
  45             cn : [
  46                 {
  47                     tag : 'div',
  48                     cls : 'roo-upload-cropbox-image-section',
  49                     cn : [
  50                         {
  51                             tag : 'div',
  52                             cls : 'roo-upload-cropbox-canvas',
  53                             cn : [
  54                                 {
  55                                     tag : 'img',
  56                                     cls : 'roo-upload-cropbox-image'
  57                                 }
  58                             ]
  59                         },
  60                         {
  61                             tag : 'div',
  62                             cls : 'roo-upload-cropbox-thumb'
  63                         }
  64                     ]
  65                 },
  66                 {
  67                     tag : 'div',
  68                     cls : 'roo-upload-cropbox-footer-section',
  69                     cn : {
  70                         tag : 'div',
  71                         cls : 'btn-group btn-group-justified roo-upload-cropbox-btn-group',
  72                         cn : [
  73                             {
  74                                 tag : 'div',
  75                                 cls : 'btn-group',
  76                                 cn : [
  77                                     {
  78                                         tag : 'button',
  79                                         cls : 'btn btn-default roo-upload-cropbox-rotate-left',
  80                                         html : '<i class="fa fa-undo"></i>'
  81                                     }
  82                                 ]
  83                             },
  84                             {
  85                                 tag : 'div',
  86                                 cls : 'btn-group',
  87                                 cn : [
  88                                     {
  89                                         tag : 'button',
  90                                         cls : 'btn btn-default roo-upload-cropbox-picture',
  91                                         html : '<i class="fa fa-picture-o"></i>'
  92                                     }
  93                                 ]
  94                             },
  95                             {
  96                                 tag : 'div',
  97                                 cls : 'btn-group',
  98                                 cn : [
  99                                     {
 100                                         tag : 'button',
 101                                         cls : 'btn btn-default roo-upload-cropbox-rotate-right',
 102                                         html : '<i class="fa fa-repeat"></i>'
 103                                     }
 104                                 ]
 105                             }
 106                         ]
 107                     }
 108                 }
 109             ]
 110         };
 111
 112         return cfg;
 113     },
 114
 115     initEvents : function()
 116     {
 117         this.imageSection = this.el.select('.roo-upload-cropbox-image-section', true).first();
 118         this.imageSection.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
 119
 120         this.imageCanvas = this.el.select('.roo-upload-cropbox-canvas', true).first();
 121         this.imageCanvas.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
 122
 123         this.image = this.el.select('.roo-upload-cropbox-image', true).first();
 124         this.image.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
 125
 126         this.thumb = this.el.select('.roo-upload-cropbox-thumb', true).first();
 127         this.thumb.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
 128
 129         this.footerSection = this.el.select('.roo-upload-cropbox-footer-section', true).first();
 130         this.footerSection.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
 131
 132         this.rotateLeft = this.el.select('.roo-upload-cropbox-rotate-left', true).first();
 133         this.rotateLeft.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
 134
 135         this.pictureBtn = this.el.select('.roo-upload-cropbox-picture', true).first();
 136         this.pictureBtn.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
 137
 138         this.rotateRight = this.el.select('.roo-upload-cropbox-rotate-right', true).first();
 139         this.rotateRight.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
 140
 141         this.bind();
 142     },
 143
 144     bind : function()
 145     {
 146         this.image.on('load', this.onLoadCanvasImage, this);
 147
 148         this.imageSection.on('click', this.beforeSelectFile, this);
 149
 150         this.imageSection.on('mousedown', this.onMouseDown, this);
 151
 152         this.imageSection.on('mousemove', this.onMouseMove, this);
 153
 154         var mousewheel = (/Firefox/i.test(navigator.userAgent))? 'DOMMouseScroll' : 'mousewheel';
 155
 156         this.imageSection.on(mousewheel, this.onMouseWheel, this);
 157
 158         Roo.get(document).on('mouseup', this.onMouseUp, this);
 159
 160         this.pictureBtn.on('click', this.beforeSelectFile, this);
 161
 162         this.rotateLeft.on('click', this.onRotateLeft, this);
 163
 164         this.rotateRight.on('click', this.onRotateRight, this);
 165
 166     },
 167
 168     unbind : function()
 169     {
 170         this.image.un('load', this.onLoadCanvasImage, this);
 171
 172         this.imageSection.un('click', this.beforeSelectFile, this);
 173
 174         this.imageSection.un('mousedown', this.onMouseDown, this);
 175
 176         this.imageSection.un('mousemove', this.onMouseMove, this);
 177
 178         var mousewheel = (/Firefox/i.test(navigator.userAgent))? 'DOMMouseScroll' : 'mousewheel';
 179
 180         this.imageSection.un(mousewheel, this.onMouseWheel, this);
 181
 182         Roo.get(document).un('mouseup', this.onMouseUp, this);
 183
 184         this.pictureBtn.un('click', this.beforeSelectFile, this);
 185
 186         this.rotateLeft.un('click', this.onRotateLeft, this);
 187
 188         this.rotateRight.un('click', this.onRotateRight, this);
 189     },
 190
 191     reset : function()
 192     {
 193         this.scale = 0;
 194         this.rotate = 0;
 195         this.dragable = false;
 196         this.mouseX = 0;
 197         this.mouseY = 0;
 198     },
 199
 200     beforeSelectFile : function(e)
 201     {
 202         e.preventDefault();
 203         this.fireEvent('beforeSelectFile', this);
 204     },
 205
 206     loadCanvasImage : function(src)
 207     {
 208         this.imageSection.un('click', this.beforeSelectFile, this);
 209
 210 //        this.reset();
 211
 212         Roo.log(src);
 213
 214         this.image.attr('src', src);
 215
 216     },
 217
 218     onLoadCanvasImage : function(src)
 219     {
 220         Roo.log('on load');
 221
 222         this.image.OriginWidth = this.image.getWidth();
 223         this.image.OriginHeight = this.image.getHeight();
 224
 225         this.setCanvasPosition();
 226     },
 227
 228     setCanvasPosition : function()
 229     {
 230         var pw = (this.imageSection.getWidth(true) - this.image.getWidth()) / 2;
 231         var ph = (this.imageSection.getHeight(true) - this.image.getHeight()) / 2;
 232
 233         this.imageCanvas.setLeft(pw);
 234         this.imageCanvas.setTop(ph);
 235     },
 236
 237     onMouseDown : function(e)
 238     {
 239         e.stopEvent();
 240
 241         this.dragable = true;
 242         this.mouseX = e.getPageX();
 243         this.mouseY = e.getPageY();
 244
 245     },
 246
 247     onMouseMove : function(e)
 248     {
 249         e.stopEvent();
 250
 251         if (!this.dragable){
 252             return;
 253         }
 254
 255         var transform = new WebKitCSSMatrix(window.getComputedStyle(this.thumb.dom).webkitTransform);
 256
 257         var minX = this.thumb.getLeft(true) + transform.m41;
 258         var minY = this.thumb.getTop(true) + transform.m42;
 259
 260         var maxX = minX + this.thumb.getWidth() - this.image.getWidth();
 261         var maxY = minY + this.thumb.getHeight() - this.image.getHeight();
 262
 263         if(this.rotate == 90 || this.rotate == 270){
 264             minX = this.thumb.getLeft(true) + transform.m41 - (this.image.getWidth() - this.image.getHeight()) / 2;
 265             minY = this.thumb.getTop(true) + transform.m42 + (this.image.getWidth() - this.image.getHeight()) / 2;
 266
 267             maxX = minX + this.thumb.getWidth() - this.image.getHeight();
 268             maxY = minY + this.thumb.getHeight() - this.image.getWidth();
 269         }
 270
 271         var x = e.getPageX() - this.mouseX;
 272         var y = e.getPageY() - this.mouseY;
 273
 274         var bgX = x + this.imageCanvas.getLeft(true);
 275         var bgY = y + this.imageCanvas.getTop(true);
 276
 277         bgX = (minX < bgX) ? minX : ((maxX > bgX) ? maxX : bgX);
 278         bgY = (minY < bgY) ? minY : ((maxY > bgY) ? maxY : bgY);
 279
 280         this.imageCanvas.setLeft(bgX);
 281         this.imageCanvas.setTop(bgY);
 282
 283         this.mouseX = e.getPageX();
 284         this.mouseY = e.getPageY();
 285     },
 286
 287     onMouseUp : function(e)
 288     {
 289         e.stopEvent();
 290
 291         this.dragable = false;
 292     },
 293
 294     onMouseWheel : function(e)
 295     {
 296         e.stopEvent();
 297
 298         var scale = (e.getWheelDelta() == 1) ? (this.scale + 1) : (this.scale - 1);
 299
 300         var width = this.image.OriginWidth * Math.pow(1.1, scale);
 301         var height = this.image.OriginHeight * Math.pow(1.1, scale)
 302
 303         if(
 304                 e.getWheelDelta() == -1 &&
 305                 (
 306                     width < this.thumb.getWidth() ||
 307                     height < this.thumb.getHeight()
 308                 )
 309         ){
 310             return;
 311         }
 312
 313         this.scale = scale;
 314
 315         this.image.setWidth(width);
 316         this.image.setHeight(height);
 317
 318         this.setCanvasPosition();
 319
 320     },
 321
 322     onRotateLeft : function(e)
 323     {
 324         e.stopEvent();
 325
 326         this.rotate = (this.rotate < 90) ? 270 : this.rotate - 90;
 327
 328         this.imageCanvas.setStyle({
 329             '-ms-transform' : 'rotate(' + this.rotate + 'deg)',
 330             '-webkit-transform' : 'rotate(' + this.rotate + 'deg)',
 331             'transform' : 'rotate(' + this.rotate + 'deg)',
 332         });
 333
 334         this.setCanvasPosition();
 335     },
 336
 337     onRotateRight : function(e)
 338     {
 339         e.stopEvent();
 340
 341         this.rotate = (this.rotate > 180) ? 0 : this.rotate + 90;
 342
 343         this.imageCanvas.setStyle({
 344             '-ms-transform' : 'rotate(' + this.rotate + 'deg)',
 345             '-webkit-transform' : 'rotate(' + this.rotate + 'deg)',
 346             'transform' : 'rotate(' + this.rotate + 'deg)',
 347         });
 348
 349         this.setCanvasPosition();
 350     }
 351
 352 });