git.roojs.org Git - roojs1/blob - docs/symbols/src/Roo_bootstrap_UploadCropbox.js.html

   1 <html><head><title>../roojs1/Roo/bootstrap/UploadCropbox.js</title><link rel="stylesheet" type="text/css" href="../../../css/highlight-js.css"/></head><body class="highlightpage"><code class="jsdoc-pretty">
   2 <span class="jsdoc-comment">/*
   3 * Licence: LGPL
   4 */
   5
   6 /**
   7  * @class Roo.bootstrap.UploadCropbox
   8  * @extends Roo.bootstrap.Component
   9  * Bootstrap UploadCropbox class
  10  * @cfg {String} emptyText
  11  *
  12  * @constructor
  13  * Create a new UploadCropbox
  14  * @param {Object} config The config object
  15  */
  16
  17 </span><span class="jsdoc-var">Roo.bootstrap.UploadCropbox </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">){
  18     </span><span class="jsdoc-var">Roo.bootstrap.UploadCropbox.superclass.constructor.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
  19
  20     </span><span class="jsdoc-var">this.addEvents</span><span class="jsdoc-syntax">({
  21         </span><span class="jsdoc-comment">/**
  22          * @event beforeSelectFile
  23          * Fire before select file
  24          * @param {Roo.EventObject} e
  25          */
  26         </span><span class="jsdoc-string">&quot;beforeSelectFile&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
  27
  28     </span><span class="jsdoc-syntax">});
  29 };
  30
  31 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.bootstrap.UploadCropbox</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.bootstrap.Component</span><span class="jsdoc-syntax">,  {
  32
  33     </span><span class="jsdoc-var">emptyText </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'Click to upload image'</span><span class="jsdoc-syntax">,
  34     </span><span class="jsdoc-var">ratio </span><span class="jsdoc-syntax">: 1,
  35     </span><span class="jsdoc-var">dragable </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  36     </span><span class="jsdoc-var">mouseX </span><span class="jsdoc-syntax">: 0,
  37     </span><span class="jsdoc-var">mouseY </span><span class="jsdoc-syntax">: 0,
  38
  39     </span><span class="jsdoc-var">getAutoCreate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
  40     {
  41         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cfg </span><span class="jsdoc-syntax">= {
  42             </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
  43             </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'roo-upload-cropbox'</span><span class="jsdoc-syntax">,
  44             </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: [
  45                 {
  46                     </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
  47                     </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'roo-upload-cropbox-image-section'</span><span class="jsdoc-syntax">,
  48                     </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: [
  49                         {
  50                             </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
  51                             </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'roo-upload-cropbox-canvas'
  52                         </span><span class="jsdoc-syntax">},
  53                         {
  54                             </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
  55                             </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'roo-upload-cropbox-thumb'
  56                         </span><span class="jsdoc-syntax">}
  57                     ]
  58                 },
  59                 {
  60                     </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
  61                     </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'roo-upload-cropbox-footer-section'</span><span class="jsdoc-syntax">,
  62                     </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: {
  63                         </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
  64                         </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'btn-group btn-group-justified roo-upload-cropbox-btn-group'</span><span class="jsdoc-syntax">,
  65                         </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: [
  66                             {
  67                                 </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
  68                                 </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'btn-group'</span><span class="jsdoc-syntax">,
  69                                 </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: [
  70                                     {
  71                                         </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'button'</span><span class="jsdoc-syntax">,
  72                                         </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'btn btn-default roo-upload-cropbox-rotate-left'</span><span class="jsdoc-syntax">,
  73                                         </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'&lt;i class=&quot;fa fa-undo&quot;&gt;&lt;/i&gt;'
  74                                     </span><span class="jsdoc-syntax">}
  75                                 ]
  76                             },
  77                             {
  78                                 </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
  79                                 </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'btn-group'</span><span class="jsdoc-syntax">,
  80                                 </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: [
  81                                     {
  82                                         </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'button'</span><span class="jsdoc-syntax">,
  83                                         </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'btn btn-default roo-upload-cropbox-picture'</span><span class="jsdoc-syntax">,
  84                                         </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'&lt;i class=&quot;fa fa-picture-o&quot;&gt;&lt;/i&gt;'
  85                                     </span><span class="jsdoc-syntax">}
  86                                 ]
  87                             },
  88                             {
  89                                 </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
  90                                 </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'btn-group'</span><span class="jsdoc-syntax">,
  91                                 </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: [
  92                                     {
  93                                         </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'button'</span><span class="jsdoc-syntax">,
  94                                         </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'btn btn-default roo-upload-cropbox-rotate-right'</span><span class="jsdoc-syntax">,
  95                                         </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'&lt;i class=&quot;fa fa-repeat&quot;&gt;&lt;/i&gt;'
  96                                     </span><span class="jsdoc-syntax">}
  97                                 ]
  98                             }
  99                         ]
 100                     }
 101                 }
 102             ]
 103         };
 104
 105         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">;
 106     },
 107
 108     </span><span class="jsdoc-var">initEvents </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 109     {
 110         </span><span class="jsdoc-var">this.image </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Image</span><span class="jsdoc-syntax">());
 111
 112         </span><span class="jsdoc-var">this.imageSection </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.roo-upload-cropbox-image-section'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">();
 113         </span><span class="jsdoc-var">this.imageSection.setVisibilityMode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.Element.DISPLAY</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.originalDisplay </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'block'</span><span class="jsdoc-syntax">;
 114
 115         </span><span class="jsdoc-var">this.thumb </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.roo-upload-cropbox-thumb'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">();
 116         </span><span class="jsdoc-var">this.thumb.setVisibilityMode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.Element.DISPLAY</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.originalDisplay </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'block'</span><span class="jsdoc-syntax">;
 117
 118         </span><span class="jsdoc-var">this.footerSection </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.roo-upload-cropbox-footer-section'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">();
 119         </span><span class="jsdoc-var">this.footerSection.setVisibilityMode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.Element.DISPLAY</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.originalDisplay </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'block'</span><span class="jsdoc-syntax">;
 120
 121         </span><span class="jsdoc-var">this.rotateLeft </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.roo-upload-cropbox-rotate-left'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">();
 122         </span><span class="jsdoc-var">this.rotateLeft.setVisibilityMode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.Element.DISPLAY</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.originalDisplay </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'block'</span><span class="jsdoc-syntax">;
 123
 124         </span><span class="jsdoc-var">this.pictureBtn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.roo-upload-cropbox-picture'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">();
 125         </span><span class="jsdoc-var">this.pictureBtn.setVisibilityMode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.Element.DISPLAY</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.originalDisplay </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'block'</span><span class="jsdoc-syntax">;
 126
 127         </span><span class="jsdoc-var">this.rotateRight </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.roo-upload-cropbox-rotate-right'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">();
 128         </span><span class="jsdoc-var">this.rotateRight.setVisibilityMode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.Element.DISPLAY</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.originalDisplay </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'block'</span><span class="jsdoc-syntax">;
 129
 130         </span><span class="jsdoc-var">this.bind</span><span class="jsdoc-syntax">();
 131     },
 132
 133     </span><span class="jsdoc-var">bind </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 134     {
 135         </span><span class="jsdoc-var">this.image.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'load'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.setBackground</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 136
 137         </span><span class="jsdoc-var">this.imageSection.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'click'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.beforeSelectFile</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 138
 139         </span><span class="jsdoc-var">this.imageSection.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'mousedown'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onMouseDown</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 140
 141         </span><span class="jsdoc-var">this.imageSection.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'mousemove'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onMouseMove</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 142
 143         </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">document</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'mouseup'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onMouseUp</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 144
 145         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">mousewheel </span><span class="jsdoc-syntax">= (/Firefox/i</span><span class="jsdoc-var">.test</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">navigator.userAgent</span><span class="jsdoc-syntax">))? </span><span class="jsdoc-string">'DOMMouseScroll' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'mousewheel'</span><span class="jsdoc-syntax">;
 146
 147         </span><span class="jsdoc-var">this.imageSection.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">mousewheel</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onMouseWheel</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 148
 149         </span><span class="jsdoc-var">this.pictureBtn.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'click'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.beforeSelectFile</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 150
 151         </span><span class="jsdoc-var">this.rotateLeft.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'click'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onRotateLeft</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 152
 153         </span><span class="jsdoc-var">this.rotateRight.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'click'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onRotateRight</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 154
 155     },
 156
 157     </span><span class="jsdoc-var">destory </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 158     {
 159
 160     },
 161
 162     </span><span class="jsdoc-var">reset </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 163     {
 164         </span><span class="jsdoc-var">this.ratio </span><span class="jsdoc-syntax">= 1;
 165         </span><span class="jsdoc-var">this.dragable </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 166         </span><span class="jsdoc-var">this.mouseX </span><span class="jsdoc-syntax">= 0;
 167         </span><span class="jsdoc-var">this.mouseY </span><span class="jsdoc-syntax">= 0;
 168     },
 169
 170     </span><span class="jsdoc-var">beforeSelectFile </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)
 171     {
 172         </span><span class="jsdoc-var">e.preventDefault</span><span class="jsdoc-syntax">();
 173
 174         </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'beforeSelectFile'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 175     },
 176
 177     </span><span class="jsdoc-var">loadImage </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">src</span><span class="jsdoc-syntax">)
 178     {
 179         </span><span class="jsdoc-var">this.imageSection.un</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'click'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.beforeSelectFile</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 180
 181         </span><span class="jsdoc-var">this.reset</span><span class="jsdoc-syntax">();
 182
 183         </span><span class="jsdoc-var">this.image.attr</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'src'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">src</span><span class="jsdoc-syntax">);
 184     },
 185
 186     </span><span class="jsdoc-var">setBackground </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 187     {
 188         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">=  </span><span class="jsdoc-var">parseInt</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.image.dom.width</span><span class="jsdoc-syntax">) * </span><span class="jsdoc-var">this.ratio</span><span class="jsdoc-syntax">;
 189         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">=  </span><span class="jsdoc-var">parseInt</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.image.dom.height</span><span class="jsdoc-syntax">) * </span><span class="jsdoc-var">this.ratio</span><span class="jsdoc-syntax">;
 190
 191         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">pw </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">this.imageSection.dom.clientWidth </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">) / 2;
 192         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ph </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">this.imageSection.dom.clientHeight </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">) / 2;
 193
 194         </span><span class="jsdoc-var">this.imageSection.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'background-image'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'url(' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.image.attr</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'src'</span><span class="jsdoc-syntax">) + </span><span class="jsdoc-string">')'</span><span class="jsdoc-syntax">);
 195         </span><span class="jsdoc-var">this.imageSection.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'background-size'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">+</span><span class="jsdoc-string">'px ' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">'px' </span><span class="jsdoc-syntax">);
 196         </span><span class="jsdoc-var">this.imageSection.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'background-position'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">pw </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">'px ' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">ph </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">'px'</span><span class="jsdoc-syntax">);
 197         </span><span class="jsdoc-var">this.imageSection.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'background-repeat'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'no-repeat'</span><span class="jsdoc-syntax">);
 198     },
 199
 200     </span><span class="jsdoc-var">onMouseDown </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)
 201     {
 202         </span><span class="jsdoc-var">e.stopEvent</span><span class="jsdoc-syntax">();
 203
 204         </span><span class="jsdoc-var">this.dragable </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
 205         </span><span class="jsdoc-var">this.mouseX </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">e.getPageX</span><span class="jsdoc-syntax">();
 206         </span><span class="jsdoc-var">this.mouseY </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">e.getPageY</span><span class="jsdoc-syntax">();
 207
 208     },
 209
 210     </span><span class="jsdoc-var">onMouseMove </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)
 211     {
 212         </span><span class="jsdoc-var">e.stopEvent</span><span class="jsdoc-syntax">();
 213
 214         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.dragable</span><span class="jsdoc-syntax">){
 215             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 216         }
 217
 218         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">e.getPageX</span><span class="jsdoc-syntax">() - </span><span class="jsdoc-var">this.mouseX</span><span class="jsdoc-syntax">;
 219         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">e.getPageY</span><span class="jsdoc-syntax">() - </span><span class="jsdoc-var">this.mouseY</span><span class="jsdoc-syntax">;
 220
 221
 222         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">bg </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.imageSection.getStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'background-position'</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.split</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">' '</span><span class="jsdoc-syntax">);
 223
 224         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">bgX </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">parseInt</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">bg</span><span class="jsdoc-syntax">[0]);
 225         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">bgY </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">parseInt</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">bg</span><span class="jsdoc-syntax">[1]);
 226
 227         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">transform </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new   </span><span class="jsdoc-var">WebKitCSSMatrix</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">window.getComputedStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.thumb.dom</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.webkitTransform</span><span class="jsdoc-syntax">);
 228
 229         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">thumbStartX </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.thumb.dom.offsetLeft </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">transform.m41</span><span class="jsdoc-syntax">;
 230         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">thumbStartY </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.thumb.dom.offsetTop </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">transform.m42</span><span class="jsdoc-syntax">;
 231
 232         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">thumbEndX </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">thumbStartX </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.thumb.getWidth</span><span class="jsdoc-syntax">();
 233         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">thumbEndY </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">thumbStartY </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.thumb.getHeight</span><span class="jsdoc-syntax">();
 234
 235         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">thumbStartX </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">bgX</span><span class="jsdoc-syntax">){
 236             </span><span class="jsdoc-var">bgX </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">thumbStartX</span><span class="jsdoc-syntax">;
 237         }
 238
 239         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">thumbEndX </span><span class="jsdoc-syntax">&gt; </span><span class="jsdoc-var">bgX </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">parseInt</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.image.dom.width</span><span class="jsdoc-syntax">) * </span><span class="jsdoc-var">this.ratio</span><span class="jsdoc-syntax">){
 240             </span><span class="jsdoc-var">bgX </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">thumbEndX </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">parseInt</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.image.dom.width</span><span class="jsdoc-syntax">) * </span><span class="jsdoc-var">this.ratio</span><span class="jsdoc-syntax">;
 241         }
 242
 243         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">thumbStartY </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">bgY</span><span class="jsdoc-syntax">){
 244             </span><span class="jsdoc-var">bgY </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">thumbStartY</span><span class="jsdoc-syntax">;
 245         }
 246
 247         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">thumbEndY </span><span class="jsdoc-syntax">&gt; </span><span class="jsdoc-var">bgY </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">parseInt</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.image.dom.height</span><span class="jsdoc-syntax">) * </span><span class="jsdoc-var">this.ratio</span><span class="jsdoc-syntax">){
 248             </span><span class="jsdoc-var">bgY </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">thumbEndY </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">parseInt</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.image.dom.height</span><span class="jsdoc-syntax">) * </span><span class="jsdoc-var">this.ratio</span><span class="jsdoc-syntax">;
 249         }
 250
 251         </span><span class="jsdoc-var">this.imageSection.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'background-position'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">bgX </span><span class="jsdoc-syntax">+</span><span class="jsdoc-string">'px ' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">bgY </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">'px'</span><span class="jsdoc-syntax">);
 252
 253         </span><span class="jsdoc-var">this.mouseX </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">e.getPageX</span><span class="jsdoc-syntax">();
 254         </span><span class="jsdoc-var">this.mouseY </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">e.getPageY</span><span class="jsdoc-syntax">();
 255     },
 256
 257     </span><span class="jsdoc-var">onMouseUp </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)
 258     {
 259         </span><span class="jsdoc-var">e.stopEvent</span><span class="jsdoc-syntax">();
 260
 261         </span><span class="jsdoc-var">this.dragable </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 262     },
 263
 264     </span><span class="jsdoc-var">onMouseWheel </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)
 265     {
 266         </span><span class="jsdoc-var">e.stopEvent</span><span class="jsdoc-syntax">();
 267
 268         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ratio </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">e.getWheelDelta</span><span class="jsdoc-syntax">() == 1) ? (</span><span class="jsdoc-var">this.ratio </span><span class="jsdoc-syntax">* 1.1) : (</span><span class="jsdoc-var">this.ratio </span><span class="jsdoc-syntax">* 0.9);
 269
 270         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(
 271                 </span><span class="jsdoc-var">parseInt</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.image.dom.width</span><span class="jsdoc-syntax">) * </span><span class="jsdoc-var">ratio </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">this.thumb.getWidth</span><span class="jsdoc-syntax">() ||
 272                 </span><span class="jsdoc-var">parseInt</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.image.dom.height</span><span class="jsdoc-syntax">) * </span><span class="jsdoc-var">ratio </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">this.thumb.getHeight</span><span class="jsdoc-syntax">()
 273         ){
 274             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 275         }
 276
 277         </span><span class="jsdoc-var">this.ratio </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">e.getWheelDelta</span><span class="jsdoc-syntax">() == 1) ? (</span><span class="jsdoc-var">this.ratio </span><span class="jsdoc-syntax">* 1.1) : (</span><span class="jsdoc-var">this.ratio </span><span class="jsdoc-syntax">* 0.9);
 278
 279         </span><span class="jsdoc-var">this.setBackground</span><span class="jsdoc-syntax">();
 280     },
 281
 282     </span><span class="jsdoc-var">onRotateLeft </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)
 283     {
 284         </span><span class="jsdoc-var">e.stopEvent</span><span class="jsdoc-syntax">();
 285
 286         </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'on rotate left'</span><span class="jsdoc-syntax">);
 287     },
 288
 289     </span><span class="jsdoc-var">onRotateRight </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)
 290     {
 291         </span><span class="jsdoc-var">e.stopEvent</span><span class="jsdoc-syntax">();
 292
 293         </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'on rotate right'</span><span class="jsdoc-syntax">);
 294
 295     }
 296
 297 });
 298 </span></code></body></html>