1 \e[1mdiff --git a/Roo/ContentPanel.js b/Roo/ContentPanel.js
\e[m
2 \e[1mindex 0984532b54..cc1b9d0ce5 100644
\e[m
3 \e[1m--- a/Roo/ContentPanel.js
\e[m
4 \e[1m+++ b/Roo/ContentPanel.js
\e[m
5 \e[36m@@ -41,7 +41,6 @@
\e[m
7 Roo.ContentPanel = function(el, config, content){
\e[m
11 if(el.autoCreate || el.xtype){ // xtype is available if this is called from factory
\e[m
13 \e[36m@@ -425,6 +424,14 @@
\e[m
\e[mlayout.addxtype({
\e[m
16 addxtype : function(cfg) {
\e[m
17 \e[32m+
\e[m
\e[32m if(cfg.xtype.match(/^UploadCropbox$/)) {
\e[m
19 \e[32m+
\e[m
\e[32m this.cropbox = new Roo.factory(cfg);
\e[m
21 \e[32m+
\e[m
\e[32m this.cropbox.render(this.el);
\e[m
23 \e[32m+
\e[m
\e[32m return this.cropbox;
\e[m
24 \e[32m+
\e[m
\e[32m }
\e[m
26 if (cfg.xtype.match(/^Form$/)) {
\e[m
28 \e[1mdiff --git a/Roo/dialog/UploadCropbox.js b/Roo/dialog/UploadCropbox.js
\e[m
29 \e[1mnew file mode 100644
\e[m
30 \e[1mindex 0000000000..8cf986b2e5
\e[m
31 \e[1m--- /dev/null
\e[m
32 \e[1m+++ b/Roo/dialog/UploadCropbox.js
\e[m
33 \e[36m@@ -0,0 +1,1791 @@
\e[m
35 \e[32m+
\e[m
\e[32m/*
\e[m
36 \e[32m+
\e[m
\e[32m* Licence: LGPL
\e[m
37 \e[32m+
\e[m
\e[32m*/
\e[m
39 \e[32m+
\e[m
\e[32m/**
\e[m
40 \e[32m+
\e[m
\e[32m * @class Roo.dialog.UploadCropbox
\e[m
41 \e[32m+
\e[m
\e[32m * @extends Roo.BoxComponent
\e[m
42 \e[32m+
\e[m
\e[32m * Dialog UploadCropbox class
\e[m
43 \e[32m+
\e[m
\e[32m * @cfg {String} emptyText show when image has been loaded
\e[m
44 \e[32m+
\e[m
\e[32m * @cfg {String} rotateNotify show when image too small to rotate
\e[m
45 \e[32m+
\e[m
\e[32m * @cfg {Number} errorTimeout default 3000
\e[m
46 \e[32m+
\e[m
\e[32m * @cfg {Number} minWidth default 300
\e[m
47 \e[32m+
\e[m
\e[32m * @cfg {Number} minHeight default 300
\e[m
48 \e[32m+
\e[m
\e[32m * @cfg {Array} buttons default ['rotateLeft', 'pictureBtn', 'rotateRight']
\e[m
49 \e[32m+
\e[m
\e[32m * @cfg {Boolean} isDocument (true|false) default false
\e[m
50 \e[32m+
\e[m
\e[32m * @cfg {String} url action url
\e[m
51 \e[32m+
\e[m
\e[32m * @cfg {String} paramName default 'imageUpload'
\e[m
52 \e[32m+
\e[m
\e[32m * @cfg {String} method default POST
\e[m
53 \e[32m+
\e[m
\e[32m * @cfg {Boolean} loadMask (true|false) default true
\e[m
54 \e[32m+
\e[m
\e[32m * @cfg {Boolean} loadingText default 'Loading...'
\e[m
55 \e[32m+
\e[m
\e[32m *
\e[m
\e[41m
\e[m
56 \e[32m+
\e[m
\e[32m * @constructor
\e[m
57 \e[32m+
\e[m
\e[32m * Create a new UploadCropbox
\e[m
58 \e[32m+
\e[m
\e[32m * @param {Object} config The config object
\e[m
59 \e[32m+
\e[m
\e[32m */
\e[m
61 \e[32m+
\e[m
\e[32m Roo.dialog.UploadCropbox = function(config){
\e[m
62 \e[32m+
\e[m
\e[32m Roo.dialog.UploadCropbox.superclass.constructor.call(this, config);
\e[m
63 \e[32m+
\e[m
\e[41m
\e[m
64 \e[32m+
\e[m
\e[32m this.addEvents({
\e[m
65 \e[32m+
\e[m
\e[32m /**
\e[m
66 \e[32m+
\e[m
\e[32m * @event beforeselectfile
\e[m
67 \e[32m+
\e[m
\e[32m * Fire before select file
\e[m
68 \e[32m+
\e[m
\e[32m * @param {Roo.dialog.UploadCropbox} this
\e[m
69 \e[32m+
\e[m
\e[32m */
\e[m
70 \e[32m+
\e[m
\e[32m "beforeselectfile" : true,
\e[m
71 \e[32m+
\e[m
\e[32m /**
\e[m
72 \e[32m+
\e[m
\e[32m * @event initial
\e[m
73 \e[32m+
\e[m
\e[32m * Fire after initEvent
\e[m
74 \e[32m+
\e[m
\e[32m * @param {Roo.dialog.UploadCropbox} this
\e[m
75 \e[32m+
\e[m
\e[32m */
\e[m
76 \e[32m+
\e[m
\e[32m "initial" : true,
\e[m
77 \e[32m+
\e[m
\e[32m /**
\e[m
78 \e[32m+
\e[m
\e[32m * @event crop
\e[m
79 \e[32m+
\e[m
\e[32m * Fire after initEvent
\e[m
80 \e[32m+
\e[m
\e[32m * @param {Roo.dialog.UploadCropbox} this
\e[m
81 \e[32m+
\e[m
\e[32m * @param {String} data
\e[m
82 \e[32m+
\e[m
\e[32m */
\e[m
83 \e[32m+
\e[m
\e[32m "crop" : true,
\e[m
84 \e[32m+
\e[m
\e[32m /**
\e[m
85 \e[32m+
\e[m
\e[32m * @event prepare
\e[m
86 \e[32m+
\e[m
\e[32m * Fire when preparing the file data
\e[m
87 \e[32m+
\e[m
\e[32m * @param {Roo.dialog.UploadCropbox} this
\e[m
88 \e[32m+
\e[m
\e[32m * @param {Object} file
\e[m
89 \e[32m+
\e[m
\e[32m */
\e[m
90 \e[32m+
\e[m
\e[32m "prepare" : true,
\e[m
91 \e[32m+
\e[m
\e[32m /**
\e[m
92 \e[32m+
\e[m
\e[32m * @event exception
\e[m
93 \e[32m+
\e[m
\e[32m * Fire when get exception
\e[m
94 \e[32m+
\e[m
\e[32m * @param {Roo.dialog.UploadCropbox} this
\e[m
95 \e[32m+
\e[m
\e[32m * @param {XMLHttpRequest} xhr
\e[m
96 \e[32m+
\e[m
\e[32m */
\e[m
97 \e[32m+
\e[m
\e[32m "exception" : true,
\e[m
98 \e[32m+
\e[m
\e[32m /**
\e[m
99 \e[32m+
\e[m
\e[32m * @event beforeloadcanvas
\e[m
100 \e[32m+
\e[m
\e[32m * Fire before load the canvas
\e[m
101 \e[32m+
\e[m
\e[32m * @param {Roo.dialog.UploadCropbox} this
\e[m
102 \e[32m+
\e[m
\e[32m * @param {String} src
\e[m
103 \e[32m+
\e[m
\e[32m */
\e[m
104 \e[32m+
\e[m
\e[32m "beforeloadcanvas" : true,
\e[m
105 \e[32m+
\e[m
\e[32m /**
\e[m
106 \e[32m+
\e[m
\e[32m * @event trash
\e[m
107 \e[32m+
\e[m
\e[32m * Fire when trash image
\e[m
108 \e[32m+
\e[m
\e[32m * @param {Roo.dialog.UploadCropbox} this
\e[m
109 \e[32m+
\e[m
\e[32m */
\e[m
110 \e[32m+
\e[m
\e[32m "trash" : true,
\e[m
111 \e[32m+
\e[m
\e[32m /**
\e[m
112 \e[32m+
\e[m
\e[32m * @event download
\e[m
113 \e[32m+
\e[m
\e[32m * Fire when download the image
\e[m
114 \e[32m+
\e[m
\e[32m * @param {Roo.dialog.UploadCropbox} this
\e[m
115 \e[32m+
\e[m
\e[32m */
\e[m
116 \e[32m+
\e[m
\e[32m "download" : true,
\e[m
117 \e[32m+
\e[m
\e[32m /**
\e[m
118 \e[32m+
\e[m
\e[32m * @event footerbuttonclick
\e[m
119 \e[32m+
\e[m
\e[32m * Fire when footerbuttonclick
\e[m
120 \e[32m+
\e[m
\e[32m * @param {Roo.dialog.UploadCropbox} this
\e[m
121 \e[32m+
\e[m
\e[32m * @param {String} type
\e[m
122 \e[32m+
\e[m
\e[32m */
\e[m
123 \e[32m+
\e[m
\e[32m "footerbuttonclick" : true,
\e[m
124 \e[32m+
\e[m
\e[32m /**
\e[m
125 \e[32m+
\e[m
\e[32m * @event resize
\e[m
126 \e[32m+
\e[m
\e[32m * Fire when resize
\e[m
127 \e[32m+
\e[m
\e[32m * @param {Roo.dialog.UploadCropbox} this
\e[m
128 \e[32m+
\e[m
\e[32m */
\e[m
129 \e[32m+
\e[m
\e[32m "resize" : true,
\e[m
130 \e[32m+
\e[m
\e[32m /**
\e[m
131 \e[32m+
\e[m
\e[32m * @event rotate
\e[m
132 \e[32m+
\e[m
\e[32m * Fire when rotate the image
\e[m
133 \e[32m+
\e[m
\e[32m * @param {Roo.dialog.UploadCropbox} this
\e[m
134 \e[32m+
\e[m
\e[32m * @param {String} pos
\e[m
135 \e[32m+
\e[m
\e[32m */
\e[m
136 \e[32m+
\e[m
\e[32m "rotate" : true,
\e[m
137 \e[32m+
\e[m
\e[32m /**
\e[m
138 \e[32m+
\e[m
\e[32m * @event inspect
\e[m
139 \e[32m+
\e[m
\e[32m * Fire when inspect the file
\e[m
140 \e[32m+
\e[m
\e[32m * @param {Roo.dialog.UploadCropbox} this
\e[m
141 \e[32m+
\e[m
\e[32m * @param {Object} file
\e[m
142 \e[32m+
\e[m
\e[32m */
\e[m
143 \e[32m+
\e[m
\e[32m "inspect" : true,
\e[m
144 \e[32m+
\e[m
\e[32m /**
\e[m
145 \e[32m+
\e[m
\e[32m * @event upload
\e[m
146 \e[32m+
\e[m
\e[32m * Fire when xhr upload the file
\e[m
147 \e[32m+
\e[m
\e[32m * @param {Roo.dialog.UploadCropbox} this
\e[m
148 \e[32m+
\e[m
\e[32m * @param {Object} data
\e[m
149 \e[32m+
\e[m
\e[32m */
\e[m
150 \e[32m+
\e[m
\e[32m "upload" : true,
\e[m
151 \e[32m+
\e[m
\e[32m /**
\e[m
152 \e[32m+
\e[m
\e[32m * @event arrange
\e[m
153 \e[32m+
\e[m
\e[32m * Fire when arrange the file data
\e[m
154 \e[32m+
\e[m
\e[32m * @param {Roo.dialog.UploadCropbox} this
\e[m
155 \e[32m+
\e[m
\e[32m * @param {Object} formData
\e[m
156 \e[32m+
\e[m
\e[32m */
\e[m
157 \e[32m+
\e[m
\e[32m "arrange" : true,
\e[m
158 \e[32m+
\e[m
\e[32m /**
\e[m
159 \e[32m+
\e[m
\e[32m * @event loadcanvas
\e[m
160 \e[32m+
\e[m
\e[32m * Fire after load the canvas
\e[m
161 \e[32m+
\e[m
\e[32m * @param {Roo.dialog.UploadCropbox}
\e[m
162 \e[32m+
\e[m
\e[32m * @param {Object} imgEl
\e[m
163 \e[32m+
\e[m
\e[32m */
\e[m
164 \e[32m+
\e[m
\e[32m "loadcanvas" : true
\e[m
165 \e[32m+
\e[m
\e[32m });
\e[m
166 \e[32m+
\e[m
\e[41m
\e[m
167 \e[32m+
\e[m
\e[32m this.buttons = this.buttons || Roo.dialog.UploadCropbox.footer.STANDARD;
\e[m
168 \e[32m+
\e[m
\e[32m};
\e[m
170 \e[32m+
\e[m
\e[32mRoo.extend(Roo.dialog.UploadCropbox, Roo.Component, {
\e[m
171 \e[32m+
\e[m
\e[41m
\e[m
172 \e[32m+
\e[m
\e[32m emptyText : 'Click to upload image',
\e[m
173 \e[32m+
\e[m
\e[32m rotateNotify : 'Image is too small to rotate',
\e[m
174 \e[32m+
\e[m
\e[32m errorTimeout : 3000,
\e[m
175 \e[32m+
\e[m
\e[32m scale : 0,
\e[m
176 \e[32m+
\e[m
\e[32m baseScale : 1,
\e[m
177 \e[32m+
\e[m
\e[32m rotate : 0,
\e[m
178 \e[32m+
\e[m
\e[32m dragable : false,
\e[m
179 \e[32m+
\e[m
\e[32m pinching : false,
\e[m
180 \e[32m+
\e[m
\e[32m mouseX : 0,
\e[m
181 \e[32m+
\e[m
\e[32m mouseY : 0,
\e[m
182 \e[32m+
\e[m
\e[32m cropData : false,
\e[m
183 \e[32m+
\e[m
\e[32m minWidth : 300,
\e[m
184 \e[32m+
\e[m
\e[32m minHeight : 300,
\e[m
185 \e[32m+
\e[m
\e[32m file : false,
\e[m
186 \e[32m+
\e[m
\e[32m exif : {},
\e[m
187 \e[32m+
\e[m
\e[32m baseRotate : 1,
\e[m
188 \e[32m+
\e[m
\e[32m cropType : 'image/jpeg',
\e[m
189 \e[32m+
\e[m
\e[32m buttons : false,
\e[m
190 \e[32m+
\e[m
\e[32m canvasLoaded : false,
\e[m
191 \e[32m+
\e[m
\e[32m isDocument : false,
\e[m
192 \e[32m+
\e[m
\e[32m method : 'POST',
\e[m
193 \e[32m+
\e[m
\e[32m paramName : 'imageUpload',
\e[m
194 \e[32m+
\e[m
\e[32m loadMask : true,
\e[m
195 \e[32m+
\e[m
\e[32m loadingText : 'Loading...',
\e[m
196 \e[32m+
\e[m
\e[32m maskEl : false,
\e[m
197 \e[32m+
\e[m
\e[41m
\e[m
198 \e[32m+
\e[m
\e[32m getAutoCreate : function()
\e[m
199 \e[32m+
\e[m
\e[32m {
\e[m
200 \e[32m+
\e[m
\e[32m var cfg = {
\e[m
201 \e[32m+
\e[m
\e[32m tag : 'div',
\e[m
202 \e[32m+
\e[m
\e[32m cls : 'roo-upload-cropbox',
\e[m
203 \e[32m+
\e[m
\e[32m cn : [
\e[m
204 \e[32m+
\e[m
\e[32m {
\e[m
205 \e[32m+
\e[m
\e[32m tag : 'input',
\e[m
206 \e[32m+
\e[m
\e[32m cls : 'roo-upload-cropbox-selector',
\e[m
207 \e[32m+
\e[m
\e[32m type : 'file'
\e[m
208 \e[32m+
\e[m
\e[32m },
\e[m
209 \e[32m+
\e[m
\e[32m {
\e[m
210 \e[32m+
\e[m
\e[32m tag : 'div',
\e[m
211 \e[32m+
\e[m
\e[32m cls : 'roo-upload-cropbox-body',
\e[m
212 \e[32m+
\e[m
\e[32m style : 'cursor:pointer',
\e[m
213 \e[32m+
\e[m
\e[32m cn : [
\e[m
214 \e[32m+
\e[m
\e[32m {
\e[m
215 \e[32m+
\e[m
\e[32m tag : 'div',
\e[m
216 \e[32m+
\e[m
\e[32m cls : 'roo-upload-cropbox-preview'
\e[m
217 \e[32m+
\e[m
\e[32m },
\e[m
218 \e[32m+
\e[m
\e[32m {
\e[m
219 \e[32m+
\e[m
\e[32m tag : 'div',
\e[m
220 \e[32m+
\e[m
\e[32m cls : 'roo-upload-cropbox-thumb'
\e[m
221 \e[32m+
\e[m
\e[32m },
\e[m
222 \e[32m+
\e[m
\e[32m {
\e[m
223 \e[32m+
\e[m
\e[32m tag : 'div',
\e[m
224 \e[32m+
\e[m
\e[32m cls : 'roo-upload-cropbox-empty-notify',
\e[m
225 \e[32m+
\e[m
\e[32m html : this.emptyText
\e[m
226 \e[32m+
\e[m
\e[32m },
\e[m
227 \e[32m+
\e[m
\e[32m {
\e[m
228 \e[32m+
\e[m
\e[32m tag : 'div',
\e[m
229 \e[32m+
\e[m
\e[32m cls : 'roo-upload-cropbox-error-notify alert alert-danger',
\e[m
230 \e[32m+
\e[m
\e[32m html : this.rotateNotify
\e[m
231 \e[32m+
\e[m
\e[32m }
\e[m
232 \e[32m+
\e[m
\e[32m ]
\e[m
233 \e[32m+
\e[m
\e[32m },
\e[m
234 \e[32m+
\e[m
\e[32m {
\e[m
235 \e[32m+
\e[m
\e[32m tag : 'div',
\e[m
236 \e[32m+
\e[m
\e[32m cls : 'roo-upload-cropbox-footer',
\e[m
237 \e[32m+
\e[m
\e[32m cn : {
\e[m
238 \e[32m+
\e[m
\e[32m tag : 'div',
\e[m
239 \e[32m+
\e[m
\e[32m cls : 'btn-group btn-group-justified roo-upload-cropbox-btn-group',
\e[m
240 \e[32m+
\e[m
\e[32m cn : []
\e[m
241 \e[32m+
\e[m
\e[32m }
\e[m
242 \e[32m+
\e[m
\e[32m }
\e[m
243 \e[32m+
\e[m
\e[32m ]
\e[m
244 \e[32m+
\e[m
\e[32m };
\e[m
245 \e[32m+
\e[m
\e[41m
\e[m
246 \e[32m+
\e[m
\e[32m return cfg;
\e[m
247 \e[32m+
\e[m
\e[32m },
\e[m
248 \e[32m+
\e[m
\e[41m
\e[m
249 \e[32m+
\e[m
\e[32m onRender : function(ct, position)
\e[m
250 \e[32m+
\e[m
\e[32m {
\e[m
251 \e[32m+
\e[m
\e[32m console.log("On Render");
\e[m
252 \e[32m+
\e[m
\e[32m console.log(this);
\e[m
253 \e[32m+
\e[m
\e[32m Roo.dialog.UploadCropbox.superclass.onRender.call(this, ct, position);
\e[m
255 \e[32m+
\e[m
\e[32m if(this.el){
\e[m
256 \e[32m+
\e[m
\e[32m if (this.el.attr('xtype')) {
\e[m
257 \e[32m+
\e[m
\e[32m this.el.attr('xtypex', this.el.attr('xtype'));
\e[m
258 \e[32m+
\e[m
\e[32m this.el.dom.removeAttribute('xtype');
\e[m
259 \e[32m+
\e[m
\e[41m
\e[m
260 \e[32m+
\e[m
\e[32m this.initEvents();
\e[m
261 \e[32m+
\e[m
\e[32m }
\e[m
262 \e[32m+
\e[m
\e[32m }
\e[m
263 \e[32m+
\e[m
\e[32m else {
\e[m
264 \e[32m+
\e[m
\e[32m var cfg = Roo.apply({}, this.getAutoCreate());
\e[m
265 \e[32m+
\e[m
\e[41m
\e[m
266 \e[32m+
\e[m
\e[32m cfg.id = this.id || Roo.id();
\e[m
267 \e[32m+
\e[m
\e[41m
\e[m
268 \e[32m+
\e[m
\e[32m if (this.cls) {
\e[m
269 \e[32m+
\e[m
\e[32m cfg.cls = (typeof(cfg.cls) == 'undefined' ? this.cls : cfg.cls) + ' ' + this.cls;
\e[m
270 \e[32m+
\e[m
\e[32m }
\e[m
271 \e[32m+
\e[m
\e[41m
\e[m
272 \e[32m+
\e[m
\e[32m if (this.style) { // fixme needs to support more complex style data.
\e[m
273 \e[32m+
\e[m
\e[32m cfg.style = (typeof(cfg.style) == 'undefined' ? this.style : cfg.style) + '; ' + this.style;
\e[m
274 \e[32m+
\e[m
\e[32m }
\e[m
275 \e[32m+
\e[m
\e[41m
\e[m
276 \e[32m+
\e[m
\e[32m this.el = ct.createChild(cfg, position);
\e[m
277 \e[32m+
\e[m
\e[41m
\e[m
278 \e[32m+
\e[m
\e[32m this.initEvents();
\e[m
279 \e[32m+
\e[m
\e[32m }
\e[m
280 \e[32m+
\e[m
\e[41m
\e[m
281 \e[32m+
\e[m
\e[32m if (this.buttons.length) {
\e[m
282 \e[32m+
\e[m
\e[41m
\e[m
283 \e[32m+
\e[m
\e[32m Roo.each(this.buttons, function(bb) {
\e[m
284 \e[32m+
\e[m
\e[41m
\e[m
285 \e[32m+
\e[m
\e[32m var btn = this.el.select('.roo-upload-cropbox-footer div.roo-upload-cropbox-btn-group').first().createChild(bb);
\e[m
286 \e[32m+
\e[m
\e[41m
\e[m
287 \e[32m+
\e[m
\e[32m btn.on('click', this.onFooterButtonClick.createDelegate(this, [bb.action], true));
\e[m
288 \e[32m+
\e[m
\e[41m
\e[m
289 \e[32m+
\e[m
\e[32m }, this);
\e[m
290 \e[32m+
\e[m
\e[32m }
\e[m
291 \e[32m+
\e[m
\e[41m
\e[m
292 \e[32m+
\e[m
\e[32m if(this.loadMask){
\e[m
293 \e[32m+
\e[m
\e[32m this.maskEl = this.el;
\e[m
294 \e[32m+
\e[m
\e[32m }
\e[m
295 \e[32m+
\e[m
\e[32m },
\e[m
296 \e[32m+
\e[m
\e[41m
\e[m
297 \e[32m+
\e[m
\e[32m initEvents : function()
\e[m
298 \e[32m+
\e[m
\e[32m {
\e[m
299 \e[32m+
\e[m
\e[32m this.urlAPI = (window.createObjectURL && window) ||
\e[m
\e[41m
\e[m
300 \e[32m+
\e[m
\e[32m (window.URL && URL.revokeObjectURL && URL) ||
\e[m
\e[41m
\e[m
301 \e[32m+
\e[m
\e[32m (window.webkitURL && webkitURL);
\e[m
302 \e[32m+
\e[m
\e[41m
\e[m
303 \e[32m+
\e[m
\e[32m this.bodyEl = this.el.select('.roo-upload-cropbox-body', true).first();
\e[m
304 \e[32m+
\e[m
\e[32m this.bodyEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
\e[m
305 \e[32m+
\e[m
\e[41m
\e[m
306 \e[32m+
\e[m
\e[32m this.selectorEl = this.el.select('.roo-upload-cropbox-selector', true).first();
\e[m
307 \e[32m+
\e[m
\e[32m this.selectorEl.hide();
\e[m
308 \e[32m+
\e[m
\e[41m
\e[m
309 \e[32m+
\e[m
\e[32m this.previewEl = this.el.select('.roo-upload-cropbox-preview', true).first();
\e[m
310 \e[32m+
\e[m
\e[32m this.previewEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
\e[m
311 \e[32m+
\e[m
\e[41m
\e[m
312 \e[32m+
\e[m
\e[32m this.thumbEl = this.el.select('.roo-upload-cropbox-thumb', true).first();
\e[m
313 \e[32m+
\e[m
\e[32m this.thumbEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
\e[m
314 \e[32m+
\e[m
\e[32m this.thumbEl.hide();
\e[m
315 \e[32m+
\e[m
\e[41m
\e[m
316 \e[32m+
\e[m
\e[32m this.notifyEl = this.el.select('.roo-upload-cropbox-empty-notify', true).first();
\e[m
317 \e[32m+
\e[m
\e[32m this.notifyEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
\e[m
318 \e[32m+
\e[m
\e[41m
\e[m
319 \e[32m+
\e[m
\e[32m this.errorEl = this.el.select('.roo-upload-cropbox-error-notify', true).first();
\e[m
320 \e[32m+
\e[m
\e[32m this.errorEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
\e[m
321 \e[32m+
\e[m
\e[32m this.errorEl.hide();
\e[m
322 \e[32m+
\e[m
\e[41m
\e[m
323 \e[32m+
\e[m
\e[32m this.footerEl = this.el.select('.roo-upload-cropbox-footer', true).first();
\e[m
324 \e[32m+
\e[m
\e[32m this.footerEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
\e[m
325 \e[32m+
\e[m
\e[32m this.footerEl.hide();
\e[m
326 \e[32m+
\e[m
\e[41m
\e[m
327 \e[32m+
\e[m
\e[32m this.setThumbBoxSize();
\e[m
328 \e[32m+
\e[m
\e[41m
\e[m
329 \e[32m+
\e[m
\e[32m this.bind();
\e[m
330 \e[32m+
\e[m
\e[41m
\e[m
331 \e[32m+
\e[m
\e[32m this.resize();
\e[m
332 \e[32m+
\e[m
\e[41m
\e[m
333 \e[32m+
\e[m
\e[32m this.fireEvent('initial', this);
\e[m
334 \e[32m+
\e[m
\e[32m },
\e[m
336 \e[32m+
\e[m
\e[32m bind : function()
\e[m
337 \e[32m+
\e[m
\e[32m {
\e[m
338 \e[32m+
\e[m
\e[32m var _this = this;
\e[m
339 \e[32m+
\e[m
\e[41m
\e[m
340 \e[32m+
\e[m
\e[32m window.addEventListener("resize", function() { _this.resize(); } );
\e[m
341 \e[32m+
\e[m
\e[41m
\e[m
342 \e[32m+
\e[m
\e[32m this.bodyEl.on('click', this.beforeSelectFile, this);
\e[m
343 \e[32m+
\e[m
\e[41m
\e[m
344 \e[32m+
\e[m
\e[32m if(Roo.isTouch){
\e[m
345 \e[32m+
\e[m
\e[32m this.bodyEl.on('touchstart', this.onTouchStart, this);
\e[m
346 \e[32m+
\e[m
\e[32m this.bodyEl.on('touchmove', this.onTouchMove, this);
\e[m
347 \e[32m+
\e[m
\e[32m this.bodyEl.on('touchend', this.onTouchEnd, this);
\e[m
348 \e[32m+
\e[m
\e[32m }
\e[m
349 \e[32m+
\e[m
\e[41m
\e[m
350 \e[32m+
\e[m
\e[32m if(!Roo.isTouch){
\e[m
351 \e[32m+
\e[m
\e[32m this.bodyEl.on('mousedown', this.onMouseDown, this);
\e[m
352 \e[32m+
\e[m
\e[32m this.bodyEl.on('mousemove', this.onMouseMove, this);
\e[m
353 \e[32m+
\e[m
\e[32m var mousewheel = (/Firefox/i.test(navigator.userAgent))? 'DOMMouseScroll' : 'mousewheel';
\e[m
354 \e[32m+
\e[m
\e[32m this.bodyEl.on(mousewheel, this.onMouseWheel, this);
\e[m
355 \e[32m+
\e[m
\e[32m Roo.get(document).on('mouseup', this.onMouseUp, this);
\e[m
356 \e[32m+
\e[m
\e[32m }
\e[m
357 \e[32m+
\e[m
\e[41m
\e[m
358 \e[32m+
\e[m
\e[32m this.selectorEl.on('change', this.onFileSelected, this);
\e[m
359 \e[32m+
\e[m
\e[32m },
\e[m
360 \e[32m+
\e[m
\e[41m
\e[m
361 \e[32m+
\e[m
\e[32m reset : function()
\e[m
362 \e[32m+
\e[m
\e[32m {
\e[m
\e[41m
\e[m
363 \e[32m+
\e[m
\e[32m this.scale = 0;
\e[m
364 \e[32m+
\e[m
\e[32m this.baseScale = 1;
\e[m
365 \e[32m+
\e[m
\e[32m this.rotate = 0;
\e[m
366 \e[32m+
\e[m
\e[32m this.baseRotate = 1;
\e[m
367 \e[32m+
\e[m
\e[32m this.dragable = false;
\e[m
368 \e[32m+
\e[m
\e[32m this.pinching = false;
\e[m
369 \e[32m+
\e[m
\e[32m this.mouseX = 0;
\e[m
370 \e[32m+
\e[m
\e[32m this.mouseY = 0;
\e[m
371 \e[32m+
\e[m
\e[32m this.cropData = false;
\e[m
372 \e[32m+
\e[m
\e[32m this.notifyEl.dom.innerHTML = this.emptyText;
\e[m
373 \e[32m+
\e[m
\e[41m
\e[m
374 \e[32m+
\e[m
\e[32m // this.selectorEl.dom.value = '';
\e[m
375 \e[32m+
\e[m
\e[41m
\e[m
376 \e[32m+
\e[m
\e[32m },
\e[m
377 \e[32m+
\e[m
\e[41m
\e[m
378 \e[32m+
\e[m
\e[32m resize : function()
\e[m
379 \e[32m+
\e[m
\e[32m {
\e[m
380 \e[32m+
\e[m
\e[32m if(this.fireEvent('resize', this) != false){
\e[m
381 \e[32m+
\e[m
\e[32m this.setThumbBoxPosition();
\e[m
382 \e[32m+
\e[m
\e[32m this.setCanvasPosition();
\e[m
383 \e[32m+
\e[m
\e[32m }
\e[m
384 \e[32m+
\e[m
\e[32m },
\e[m
385 \e[32m+
\e[m
\e[41m
\e[m
386 \e[32m+
\e[m
\e[32m onFooterButtonClick : function(e, el, o, type)
\e[m
387 \e[32m+
\e[m
\e[32m {
\e[m
388 \e[32m+
\e[m
\e[32m switch (type) {
\e[m
389 \e[32m+
\e[m
\e[32m case 'rotate-left' :
\e[m
390 \e[32m+
\e[m
\e[32m this.onRotateLeft(e);
\e[m
391 \e[32m+
\e[m
\e[32m break;
\e[m
392 \e[32m+
\e[m
\e[32m case 'rotate-right' :
\e[m
393 \e[32m+
\e[m
\e[32m this.onRotateRight(e);
\e[m
394 \e[32m+
\e[m
\e[32m break;
\e[m
395 \e[32m+
\e[m
\e[32m case 'picture' :
\e[m
396 \e[32m+
\e[m
\e[32m this.beforeSelectFile(e);
\e[m
397 \e[32m+
\e[m
\e[32m break;
\e[m
398 \e[32m+
\e[m
\e[32m case 'trash' :
\e[m
399 \e[32m+
\e[m
\e[32m this.trash(e);
\e[m
400 \e[32m+
\e[m
\e[32m break;
\e[m
401 \e[32m+
\e[m
\e[32m case 'crop' :
\e[m
402 \e[32m+
\e[m
\e[32m this.crop(e);
\e[m
403 \e[32m+
\e[m
\e[32m break;
\e[m
404 \e[32m+
\e[m
\e[32m case 'download' :
\e[m
405 \e[32m+
\e[m
\e[32m this.download(e);
\e[m
406 \e[32m+
\e[m
\e[32m break;
\e[m
407 \e[32m+
\e[m
\e[32m default :
\e[m
408 \e[32m+
\e[m
\e[32m break;
\e[m
409 \e[32m+
\e[m
\e[32m }
\e[m
410 \e[32m+
\e[m
\e[41m
\e[m
411 \e[32m+
\e[m
\e[32m this.fireEvent('footerbuttonclick', this, type);
\e[m
412 \e[32m+
\e[m
\e[32m },
\e[m
413 \e[32m+
\e[m
\e[41m
\e[m
414 \e[32m+
\e[m
\e[32m beforeSelectFile : function(e)
\e[m
415 \e[32m+
\e[m
\e[32m {
\e[m
416 \e[32m+
\e[m
\e[32m e.preventDefault();
\e[m
417 \e[32m+
\e[m
\e[41m
\e[m
418 \e[32m+
\e[m
\e[32m if(this.fireEvent('beforeselectfile', this) != false){
\e[m
419 \e[32m+
\e[m
\e[32m this.selectorEl.dom.click();
\e[m
420 \e[32m+
\e[m
\e[32m }
\e[m
421 \e[32m+
\e[m
\e[32m },
\e[m
422 \e[32m+
\e[m
\e[41m
\e[m
423 \e[32m+
\e[m
\e[32m onFileSelected : function(e)
\e[m
424 \e[32m+
\e[m
\e[32m {
\e[m
425 \e[32m+
\e[m
\e[32m e.preventDefault();
\e[m
426 \e[32m+
\e[m
\e[41m
\e[m
427 \e[32m+
\e[m
\e[32m if(typeof(this.selectorEl.dom.files) == 'undefined' || !this.selectorEl.dom.files.length){
\e[m
428 \e[32m+
\e[m
\e[32m return;
\e[m
429 \e[32m+
\e[m
\e[32m }
\e[m
430 \e[32m+
\e[m
\e[41m
\e[m
431 \e[32m+
\e[m
\e[32m var file = this.selectorEl.dom.files[0];
\e[m
432 \e[32m+
\e[m
\e[41m
\e[m
433 \e[32m+
\e[m
\e[32m if(this.fireEvent('inspect', this, file) != false){
\e[m
434 \e[32m+
\e[m
\e[32m this.prepare(file);
\e[m
435 \e[32m+
\e[m
\e[32m }
\e[m
436 \e[32m+
\e[m
\e[41m
\e[m
437 \e[32m+
\e[m
\e[32m },
\e[m
438 \e[32m+
\e[m
\e[41m
\e[m
439 \e[32m+
\e[m
\e[32m trash : function(e)
\e[m
440 \e[32m+
\e[m
\e[32m {
\e[m
441 \e[32m+
\e[m
\e[32m this.fireEvent('trash', this);
\e[m
442 \e[32m+
\e[m
\e[32m },
\e[m
443 \e[32m+
\e[m
\e[41m
\e[m
444 \e[32m+
\e[m
\e[32m download : function(e)
\e[m
445 \e[32m+
\e[m
\e[32m {
\e[m
446 \e[32m+
\e[m
\e[32m this.fireEvent('download', this);
\e[m
447 \e[32m+
\e[m
\e[32m },
\e[m
448 \e[32m+
\e[m
\e[41m
\e[m
449 \e[32m+
\e[m
\e[32m loadCanvas : function(src)
\e[m
450 \e[32m+
\e[m
\e[32m {
\e[m
\e[41m
\e[m
451 \e[32m+
\e[m
\e[32m if(this.fireEvent('beforeloadcanvas', this, src) != false){
\e[m
452 \e[32m+
\e[m
\e[41m
\e[m
453 \e[32m+
\e[m
\e[32m this.reset();
\e[m
454 \e[32m+
\e[m
\e[41m
\e[m
455 \e[32m+
\e[m
\e[32m this.imageEl = document.createElement('img');
\e[m
456 \e[32m+
\e[m
\e[41m
\e[m
457 \e[32m+
\e[m
\e[32m var _this = this;
\e[m
458 \e[32m+
\e[m
\e[41m
\e[m
459 \e[32m+
\e[m
\e[32m this.imageEl.addEventListener("load", function(){ _this.onLoadCanvas(); });
\e[m
460 \e[32m+
\e[m
\e[41m
\e[m
461 \e[32m+
\e[m
\e[32m this.imageEl.src = src;
\e[m
462 \e[32m+
\e[m
\e[32m }
\e[m
463 \e[32m+
\e[m
\e[32m },
\e[m
464 \e[32m+
\e[m
\e[41m
\e[m
465 \e[32m+
\e[m
\e[32m onLoadCanvas : function()
\e[m
466 \e[32m+
\e[m
\e[32m {
\e[m
\e[41m
\e[m
467 \e[32m+
\e[m
\e[32m this.imageEl.OriginWidth = this.imageEl.naturalWidth || this.imageEl.width;
\e[m
468 \e[32m+
\e[m
\e[32m this.imageEl.OriginHeight = this.imageEl.naturalHeight || this.imageEl.height;
\e[m
470 \e[32m+
\e[m
\e[32m if(this.fireEvent('loadcanvas', this, this.imageEl) != false){
\e[m
471 \e[32m+
\e[m
\e[41m
\e[m
472 \e[32m+
\e[m
\e[32m this.bodyEl.un('click', this.beforeSelectFile, this);
\e[m
473 \e[32m+
\e[m
\e[41m
\e[m
474 \e[32m+
\e[m
\e[32m this.notifyEl.hide();
\e[m
475 \e[32m+
\e[m
\e[32m this.thumbEl.show();
\e[m
476 \e[32m+
\e[m
\e[32m this.footerEl.show();
\e[m
477 \e[32m+
\e[m
\e[41m
\e[m
478 \e[32m+
\e[m
\e[32m this.baseRotateLevel();
\e[m
479 \e[32m+
\e[m
\e[41m
\e[m
480 \e[32m+
\e[m
\e[32m if(this.isDocument){
\e[m
481 \e[32m+
\e[m
\e[32m this.setThumbBoxSize();
\e[m
482 \e[32m+
\e[m
\e[32m }
\e[m
483 \e[32m+
\e[m
\e[41m
\e[m
484 \e[32m+
\e[m
\e[32m this.setThumbBoxPosition();
\e[m
485 \e[32m+
\e[m
\e[41m
\e[m
486 \e[32m+
\e[m
\e[32m this.baseScaleLevel();
\e[m
487 \e[32m+
\e[m
\e[41m
\e[m
488 \e[32m+
\e[m
\e[32m this.draw();
\e[m
489 \e[32m+
\e[m
\e[41m
\e[m
490 \e[32m+
\e[m
\e[32m this.resize();
\e[m
491 \e[32m+
\e[m
\e[41m
\e[m
492 \e[32m+
\e[m
\e[32m this.canvasLoaded = true;
\e[m
493 \e[32m+
\e[m
\e[41m
\e[m
494 \e[32m+
\e[m
\e[32m }
\e[m
495 \e[32m+
\e[m
\e[41m
\e[m
496 \e[32m+
\e[m
\e[32m if(this.loadMask){
\e[m
497 \e[32m+
\e[m
\e[32m this.maskEl.unmask();
\e[m
498 \e[32m+
\e[m
\e[32m }
\e[m
499 \e[32m+
\e[m
\e[41m
\e[m
500 \e[32m+
\e[m
\e[32m },
\e[m
501 \e[32m+
\e[m
\e[41m
\e[m
502 \e[32m+
\e[m
\e[32m setCanvasPosition : function()
\e[m
503 \e[32m+
\e[m
\e[32m {
\e[m
\e[41m
\e[m
504 \e[32m+
\e[m
\e[32m if(!this.canvasEl){
\e[m
505 \e[32m+
\e[m
\e[32m return;
\e[m
506 \e[32m+
\e[m
\e[32m }
\e[m
507 \e[32m+
\e[m
\e[41m
\e[m
508 \e[32m+
\e[m
\e[32m var pw = Math.ceil((this.bodyEl.getWidth() - this.canvasEl.width) / 2);
\e[m
509 \e[32m+
\e[m
\e[32m var ph = Math.ceil((this.bodyEl.getHeight() - this.canvasEl.height) / 2);
\e[m
510 \e[32m+
\e[m
\e[41m
\e[m
511 \e[32m+
\e[m
\e[32m this.previewEl.setLeft(pw);
\e[m
512 \e[32m+
\e[m
\e[32m this.previewEl.setTop(ph);
\e[m
513 \e[32m+
\e[m
\e[41m
\e[m
514 \e[32m+
\e[m
\e[32m },
\e[m
515 \e[32m+
\e[m
\e[41m
\e[m
516 \e[32m+
\e[m
\e[32m onMouseDown : function(e)
\e[m
517 \e[32m+
\e[m
\e[32m {
\e[m
\e[41m
\e[m
518 \e[32m+
\e[m
\e[32m e.stopEvent();
\e[m
519 \e[32m+
\e[m
\e[41m
\e[m
520 \e[32m+
\e[m
\e[32m this.dragable = true;
\e[m
521 \e[32m+
\e[m
\e[32m this.pinching = false;
\e[m
522 \e[32m+
\e[m
\e[41m
\e[m
523 \e[32m+
\e[m
\e[32m if(this.isDocument && (this.canvasEl.width < this.thumbEl.getWidth() || this.canvasEl.height < this.thumbEl.getHeight())){
\e[m
524 \e[32m+
\e[m
\e[32m this.dragable = false;
\e[m
525 \e[32m+
\e[m
\e[32m return;
\e[m
526 \e[32m+
\e[m
\e[32m }
\e[m
527 \e[32m+
\e[m
\e[41m
\e[m
528 \e[32m+
\e[m
\e[32m this.mouseX = Roo.isTouch ? e.browserEvent.touches[0].pageX : e.getPageX();
\e[m
529 \e[32m+
\e[m
\e[32m this.mouseY = Roo.isTouch ? e.browserEvent.touches[0].pageY : e.getPageY();
\e[m
530 \e[32m+
\e[m
\e[41m
\e[m
531 \e[32m+
\e[m
\e[32m },
\e[m
532 \e[32m+
\e[m
\e[41m
\e[m
533 \e[32m+
\e[m
\e[32m onMouseMove : function(e)
\e[m
534 \e[32m+
\e[m
\e[32m {
\e[m
\e[41m
\e[m
535 \e[32m+
\e[m
\e[32m e.stopEvent();
\e[m
536 \e[32m+
\e[m
\e[41m
\e[m
537 \e[32m+
\e[m
\e[32m if(!this.canvasLoaded){
\e[m
538 \e[32m+
\e[m
\e[32m return;
\e[m
539 \e[32m+
\e[m
\e[32m }
\e[m
540 \e[32m+
\e[m
\e[41m
\e[m
541 \e[32m+
\e[m
\e[32m if (!this.dragable){
\e[m
542 \e[32m+
\e[m
\e[32m return;
\e[m
543 \e[32m+
\e[m
\e[32m }
\e[m
544 \e[32m+
\e[m
\e[41m
\e[m
545 \e[32m+
\e[m
\e[32m var minX = Math.ceil(this.thumbEl.getLeft(true));
\e[m
546 \e[32m+
\e[m
\e[32m var minY = Math.ceil(this.thumbEl.getTop(true));
\e[m
547 \e[32m+
\e[m
\e[41m
\e[m
548 \e[32m+
\e[m
\e[32m var maxX = Math.ceil(minX + this.thumbEl.getWidth() - this.canvasEl.width);
\e[m
549 \e[32m+
\e[m
\e[32m var maxY = Math.ceil(minY + this.thumbEl.getHeight() - this.canvasEl.height);
\e[m
550 \e[32m+
\e[m
\e[41m
\e[m
551 \e[32m+
\e[m
\e[32m var x = Roo.isTouch ? e.browserEvent.touches[0].pageX : e.getPageX();
\e[m
552 \e[32m+
\e[m
\e[32m var y = Roo.isTouch ? e.browserEvent.touches[0].pageY : e.getPageY();
\e[m
553 \e[32m+
\e[m
\e[41m
\e[m
554 \e[32m+
\e[m
\e[32m x = x - this.mouseX;
\e[m
555 \e[32m+
\e[m
\e[32m y = y - this.mouseY;
\e[m
556 \e[32m+
\e[m
\e[41m
\e[m
557 \e[32m+
\e[m
\e[32m var bgX = Math.ceil(x + this.previewEl.getLeft(true));
\e[m
558 \e[32m+
\e[m
\e[32m var bgY = Math.ceil(y + this.previewEl.getTop(true));
\e[m
559 \e[32m+
\e[m
\e[41m
\e[m
560 \e[32m+
\e[m
\e[32m bgX = (minX < bgX) ? minX : ((maxX > bgX) ? maxX : bgX);
\e[m
561 \e[32m+
\e[m
\e[32m bgY = (minY < bgY) ? minY : ((maxY > bgY) ? maxY : bgY);
\e[m
562 \e[32m+
\e[m
\e[41m
\e[m
563 \e[32m+
\e[m
\e[32m this.previewEl.setLeft(bgX);
\e[m
564 \e[32m+
\e[m
\e[32m this.previewEl.setTop(bgY);
\e[m
565 \e[32m+
\e[m
\e[41m
\e[m
566 \e[32m+
\e[m
\e[32m this.mouseX = Roo.isTouch ? e.browserEvent.touches[0].pageX : e.getPageX();
\e[m
567 \e[32m+
\e[m
\e[32m this.mouseY = Roo.isTouch ? e.browserEvent.touches[0].pageY : e.getPageY();
\e[m
568 \e[32m+
\e[m
\e[32m },
\e[m
569 \e[32m+
\e[m
\e[41m
\e[m
570 \e[32m+
\e[m
\e[32m onMouseUp : function(e)
\e[m
571 \e[32m+
\e[m
\e[32m {
\e[m
\e[41m
\e[m
572 \e[32m+
\e[m
\e[32m e.stopEvent();
\e[m
573 \e[32m+
\e[m
\e[41m
\e[m
574 \e[32m+
\e[m
\e[32m this.dragable = false;
\e[m
575 \e[32m+
\e[m
\e[32m },
\e[m
576 \e[32m+
\e[m
\e[41m
\e[m
577 \e[32m+
\e[m
\e[32m onMouseWheel : function(e)
\e[m
578 \e[32m+
\e[m
\e[32m {
\e[m
\e[41m
\e[m
579 \e[32m+
\e[m
\e[32m e.stopEvent();
\e[m
580 \e[32m+
\e[m
\e[41m
\e[m
581 \e[32m+
\e[m
\e[32m this.startScale = this.scale;
\e[m
582 \e[32m+
\e[m
\e[41m
\e[m
583 \e[32m+
\e[m
\e[32m this.scale = (e.getWheelDelta() == 1) ? (this.scale + 1) : (this.scale - 1);
\e[m
584 \e[32m+
\e[m
\e[41m
\e[m
585 \e[32m+
\e[m
\e[32m if(!this.zoomable()){
\e[m
586 \e[32m+
\e[m
\e[32m this.scale = this.startScale;
\e[m
587 \e[32m+
\e[m
\e[32m return;
\e[m
588 \e[32m+
\e[m
\e[32m }
\e[m
589 \e[32m+
\e[m
\e[41m
\e[m
590 \e[32m+
\e[m
\e[32m this.draw();
\e[m
591 \e[32m+
\e[m
\e[41m
\e[m
592 \e[32m+
\e[m
\e[32m return;
\e[m
593 \e[32m+
\e[m
\e[32m },
\e[m
594 \e[32m+
\e[m
\e[41m
\e[m
595 \e[32m+
\e[m
\e[32m zoomable : function()
\e[m
596 \e[32m+
\e[m
\e[32m {
\e[m
597 \e[32m+
\e[m
\e[32m var minScale = this.thumbEl.getWidth() / this.minWidth;
\e[m
598 \e[32m+
\e[m
\e[41m
\e[m
599 \e[32m+
\e[m
\e[32m if(this.minWidth < this.minHeight){
\e[m
600 \e[32m+
\e[m
\e[32m minScale = this.thumbEl.getHeight() / this.minHeight;
\e[m
601 \e[32m+
\e[m
\e[32m }
\e[m
602 \e[32m+
\e[m
\e[41m
\e[m
603 \e[32m+
\e[m
\e[32m var width = Math.ceil(this.imageEl.OriginWidth * this.getScaleLevel() / minScale);
\e[m
604 \e[32m+
\e[m
\e[32m var height = Math.ceil(this.imageEl.OriginHeight * this.getScaleLevel() / minScale);
\e[m
605 \e[32m+
\e[m
\e[41m
\e[m
606 \e[32m+
\e[m
\e[32m if(
\e[m
607 \e[32m+
\e[m
\e[32m this.isDocument &&
\e[m
608 \e[32m+
\e[m
\e[32m (this.rotate == 0 || this.rotate == 180) &&
\e[m
\e[41m
\e[m
609 \e[32m+
\e[m
\e[32m (
\e[m
610 \e[32m+
\e[m
\e[32m width > this.imageEl.OriginWidth ||
\e[m
\e[41m
\e[m
611 \e[32m+
\e[m
\e[32m height > this.imageEl.OriginHeight ||
\e[m
612 \e[32m+
\e[m
\e[32m (width < this.minWidth && height < this.minHeight)
\e[m
613 \e[32m+
\e[m
\e[32m )
\e[m
614 \e[32m+
\e[m
\e[32m ){
\e[m
615 \e[32m+
\e[m
\e[32m return false;
\e[m
616 \e[32m+
\e[m
\e[32m }
\e[m
617 \e[32m+
\e[m
\e[41m
\e[m
618 \e[32m+
\e[m
\e[32m if(
\e[m
619 \e[32m+
\e[m
\e[32m this.isDocument &&
\e[m
620 \e[32m+
\e[m
\e[32m (this.rotate == 90 || this.rotate == 270) &&
\e[m
\e[41m
\e[m
621 \e[32m+
\e[m
\e[32m (
\e[m
622 \e[32m+
\e[m
\e[32m width > this.imageEl.OriginWidth ||
\e[m
\e[41m
\e[m
623 \e[32m+
\e[m
\e[32m height > this.imageEl.OriginHeight ||
\e[m
624 \e[32m+
\e[m
\e[32m (width < this.minHeight && height < this.minWidth)
\e[m
625 \e[32m+
\e[m
\e[32m )
\e[m
626 \e[32m+
\e[m
\e[32m ){
\e[m
627 \e[32m+
\e[m
\e[32m return false;
\e[m
628 \e[32m+
\e[m
\e[32m }
\e[m
629 \e[32m+
\e[m
\e[41m
\e[m
630 \e[32m+
\e[m
\e[32m if(
\e[m
631 \e[32m+
\e[m
\e[32m !this.isDocument &&
\e[m
632 \e[32m+
\e[m
\e[32m (this.rotate == 0 || this.rotate == 180) &&
\e[m
\e[41m
\e[m
633 \e[32m+
\e[m
\e[32m (
\e[m
634 \e[32m+
\e[m
\e[32m width < this.minWidth ||
\e[m
\e[41m
\e[m
635 \e[32m+
\e[m
\e[32m width > this.imageEl.OriginWidth ||
\e[m
\e[41m
\e[m
636 \e[32m+
\e[m
\e[32m height < this.minHeight ||
\e[m
\e[41m
\e[m
637 \e[32m+
\e[m
\e[32m height > this.imageEl.OriginHeight
\e[m
638 \e[32m+
\e[m
\e[32m )
\e[m
639 \e[32m+
\e[m
\e[32m ){
\e[m
640 \e[32m+
\e[m
\e[32m return false;
\e[m
641 \e[32m+
\e[m
\e[32m }
\e[m
642 \e[32m+
\e[m
\e[41m
\e[m
643 \e[32m+
\e[m
\e[32m if(
\e[m
644 \e[32m+
\e[m
\e[32m !this.isDocument &&
\e[m
645 \e[32m+
\e[m
\e[32m (this.rotate == 90 || this.rotate == 270) &&
\e[m
\e[41m
\e[m
646 \e[32m+
\e[m
\e[32m (
\e[m
647 \e[32m+
\e[m
\e[32m width < this.minHeight ||
\e[m
\e[41m
\e[m
648 \e[32m+
\e[m
\e[32m width > this.imageEl.OriginWidth ||
\e[m
\e[41m
\e[m
649 \e[32m+
\e[m
\e[32m height < this.minWidth ||
\e[m
\e[41m
\e[m
650 \e[32m+
\e[m
\e[32m height > this.imageEl.OriginHeight
\e[m
651 \e[32m+
\e[m
\e[32m )
\e[m
652 \e[32m+
\e[m
\e[32m ){
\e[m
653 \e[32m+
\e[m
\e[32m return false;
\e[m
654 \e[32m+
\e[m
\e[32m }
\e[m
655 \e[32m+
\e[m
\e[41m
\e[m
656 \e[32m+
\e[m
\e[32m return true;
\e[m
657 \e[32m+
\e[m
\e[41m
\e[m
658 \e[32m+
\e[m
\e[32m },
\e[m
659 \e[32m+
\e[m
\e[41m
\e[m
660 \e[32m+
\e[m
\e[32m onRotateLeft : function(e)
\e[m
661 \e[32m+
\e[m
\e[32m {
\e[m
\e[41m
\e[m
662 \e[32m+
\e[m
\e[32m if(!this.isDocument && (this.canvasEl.height < this.thumbEl.getWidth() || this.canvasEl.width < this.thumbEl.getHeight())){
\e[m
663 \e[32m+
\e[m
\e[41m
\e[m
664 \e[32m+
\e[m
\e[32m var minScale = this.thumbEl.getWidth() / this.minWidth;
\e[m
665 \e[32m+
\e[m
\e[41m
\e[m
666 \e[32m+
\e[m
\e[32m var bw = Math.ceil(this.canvasEl.width / this.getScaleLevel());
\e[m
667 \e[32m+
\e[m
\e[32m var bh = Math.ceil(this.canvasEl.height / this.getScaleLevel());
\e[m
668 \e[32m+
\e[m
\e[41m
\e[m
669 \e[32m+
\e[m
\e[32m this.startScale = this.scale;
\e[m
670 \e[32m+
\e[m
\e[41m
\e[m
671 \e[32m+
\e[m
\e[32m while (this.getScaleLevel() < minScale){
\e[m
672 \e[32m+
\e[m
\e[41m
\e[m
673 \e[32m+
\e[m
\e[32m this.scale = this.scale + 1;
\e[m
674 \e[32m+
\e[m
\e[41m
\e[m
675 \e[32m+
\e[m
\e[32m if(!this.zoomable()){
\e[m
676 \e[32m+
\e[m
\e[32m break;
\e[m
677 \e[32m+
\e[m
\e[32m }
\e[m
678 \e[32m+
\e[m
\e[41m
\e[m
679 \e[32m+
\e[m
\e[32m if(
\e[m
680 \e[32m+
\e[m
\e[32m Math.ceil(bw * this.getScaleLevel()) < this.thumbEl.getHeight() ||
\e[m
681 \e[32m+
\e[m
\e[32m Math.ceil(bh * this.getScaleLevel()) < this.thumbEl.getWidth()
\e[m
682 \e[32m+
\e[m
\e[32m ){
\e[m
683 \e[32m+
\e[m
\e[32m continue;
\e[m
684 \e[32m+
\e[m
\e[32m }
\e[m
685 \e[32m+
\e[m
\e[41m
\e[m
686 \e[32m+
\e[m
\e[32m this.rotate = (this.rotate < 90) ? 270 : this.rotate - 90;
\e[m
688 \e[32m+
\e[m
\e[32m this.draw();
\e[m
689 \e[32m+
\e[m
\e[41m
\e[m
690 \e[32m+
\e[m
\e[32m return;
\e[m
691 \e[32m+
\e[m
\e[32m }
\e[m
692 \e[32m+
\e[m
\e[41m
\e[m
693 \e[32m+
\e[m
\e[32m this.scale = this.startScale;
\e[m
694 \e[32m+
\e[m
\e[41m
\e[m
695 \e[32m+
\e[m
\e[32m this.onRotateFail();
\e[m
696 \e[32m+
\e[m
\e[41m
\e[m
697 \e[32m+
\e[m
\e[32m return false;
\e[m
698 \e[32m+
\e[m
\e[32m }
\e[m
699 \e[32m+
\e[m
\e[41m
\e[m
700 \e[32m+
\e[m
\e[32m this.rotate = (this.rotate < 90) ? 270 : this.rotate - 90;
\e[m
702 \e[32m+
\e[m
\e[32m if(this.isDocument){
\e[m
703 \e[32m+
\e[m
\e[32m this.setThumbBoxSize();
\e[m
704 \e[32m+
\e[m
\e[32m this.setThumbBoxPosition();
\e[m
705 \e[32m+
\e[m
\e[32m this.setCanvasPosition();
\e[m
706 \e[32m+
\e[m
\e[32m }
\e[m
707 \e[32m+
\e[m
\e[41m
\e[m
708 \e[32m+
\e[m
\e[32m this.draw();
\e[m
709 \e[32m+
\e[m
\e[41m
\e[m
710 \e[32m+
\e[m
\e[32m this.fireEvent('rotate', this, 'left');
\e[m
711 \e[32m+
\e[m
\e[41m
\e[m
712 \e[32m+
\e[m
\e[32m },
\e[m
713 \e[32m+
\e[m
\e[41m
\e[m
714 \e[32m+
\e[m
\e[32m onRotateRight : function(e)
\e[m
715 \e[32m+
\e[m
\e[32m {
\e[m
716 \e[32m+
\e[m
\e[32m if(!this.isDocument && (this.canvasEl.height < this.thumbEl.getWidth() || this.canvasEl.width < this.thumbEl.getHeight())){
\e[m
717 \e[32m+
\e[m
\e[41m
\e[m
718 \e[32m+
\e[m
\e[32m var minScale = this.thumbEl.getWidth() / this.minWidth;
\e[m
719 \e[32m+
\e[m
\e[41m
\e[m
720 \e[32m+
\e[m
\e[32m var bw = Math.ceil(this.canvasEl.width / this.getScaleLevel());
\e[m
721 \e[32m+
\e[m
\e[32m var bh = Math.ceil(this.canvasEl.height / this.getScaleLevel());
\e[m
722 \e[32m+
\e[m
\e[41m
\e[m
723 \e[32m+
\e[m
\e[32m this.startScale = this.scale;
\e[m
724 \e[32m+
\e[m
\e[41m
\e[m
725 \e[32m+
\e[m
\e[32m while (this.getScaleLevel() < minScale){
\e[m
726 \e[32m+
\e[m
\e[41m
\e[m
727 \e[32m+
\e[m
\e[32m this.scale = this.scale + 1;
\e[m
728 \e[32m+
\e[m
\e[41m
\e[m
729 \e[32m+
\e[m
\e[32m if(!this.zoomable()){
\e[m
730 \e[32m+
\e[m
\e[32m break;
\e[m
731 \e[32m+
\e[m
\e[32m }
\e[m
732 \e[32m+
\e[m
\e[41m
\e[m
733 \e[32m+
\e[m
\e[32m if(
\e[m
734 \e[32m+
\e[m
\e[32m Math.ceil(bw * this.getScaleLevel()) < this.thumbEl.getHeight() ||
\e[m
735 \e[32m+
\e[m
\e[32m Math.ceil(bh * this.getScaleLevel()) < this.thumbEl.getWidth()
\e[m
736 \e[32m+
\e[m
\e[32m ){
\e[m
737 \e[32m+
\e[m
\e[32m continue;
\e[m
738 \e[32m+
\e[m
\e[32m }
\e[m
739 \e[32m+
\e[m
\e[41m
\e[m
740 \e[32m+
\e[m
\e[32m this.rotate = (this.rotate > 180) ? 0 : this.rotate + 90;
\e[m
742 \e[32m+
\e[m
\e[32m this.draw();
\e[m
743 \e[32m+
\e[m
\e[41m
\e[m
744 \e[32m+
\e[m
\e[32m return;
\e[m
745 \e[32m+
\e[m
\e[32m }
\e[m
746 \e[32m+
\e[m
\e[41m
\e[m
747 \e[32m+
\e[m
\e[32m this.scale = this.startScale;
\e[m
748 \e[32m+
\e[m
\e[41m
\e[m
749 \e[32m+
\e[m
\e[32m this.onRotateFail();
\e[m
750 \e[32m+
\e[m
\e[41m
\e[m
751 \e[32m+
\e[m
\e[32m return false;
\e[m
752 \e[32m+
\e[m
\e[32m }
\e[m
753 \e[32m+
\e[m
\e[41m
\e[m
754 \e[32m+
\e[m
\e[32m this.rotate = (this.rotate > 180) ? 0 : this.rotate + 90;
\e[m
756 \e[32m+
\e[m
\e[32m if(this.isDocument){
\e[m
757 \e[32m+
\e[m
\e[32m this.setThumbBoxSize();
\e[m
758 \e[32m+
\e[m
\e[32m this.setThumbBoxPosition();
\e[m
759 \e[32m+
\e[m
\e[32m this.setCanvasPosition();
\e[m
760 \e[32m+
\e[m
\e[32m }
\e[m
761 \e[32m+
\e[m
\e[41m
\e[m
762 \e[32m+
\e[m
\e[32m this.draw();
\e[m
763 \e[32m+
\e[m
\e[41m
\e[m
764 \e[32m+
\e[m
\e[32m this.fireEvent('rotate', this, 'right');
\e[m
765 \e[32m+
\e[m
\e[32m },
\e[m
766 \e[32m+
\e[m
\e[41m
\e[m
767 \e[32m+
\e[m
\e[32m onRotateFail : function()
\e[m
768 \e[32m+
\e[m
\e[32m {
\e[m
769 \e[32m+
\e[m
\e[32m this.errorEl.show(true);
\e[m
770 \e[32m+
\e[m
\e[41m
\e[m
771 \e[32m+
\e[m
\e[32m var _this = this;
\e[m
772 \e[32m+
\e[m
\e[41m
\e[m
773 \e[32m+
\e[m
\e[32m (function() { _this.errorEl.hide(true); }).defer(this.errorTimeout);
\e[m
774 \e[32m+
\e[m
\e[32m },
\e[m
775 \e[32m+
\e[m
\e[41m
\e[m
776 \e[32m+
\e[m
\e[32m draw : function()
\e[m
777 \e[32m+
\e[m
\e[32m {
\e[m
778 \e[32m+
\e[m
\e[32m this.previewEl.dom.innerHTML = '';
\e[m
779 \e[32m+
\e[m
\e[41m
\e[m
780 \e[32m+
\e[m
\e[32m var canvasEl = document.createElement("canvas");
\e[m
781 \e[32m+
\e[m
\e[41m
\e[m
782 \e[32m+
\e[m
\e[32m var contextEl = canvasEl.getContext("2d");
\e[m
783 \e[32m+
\e[m
\e[41m
\e[m
784 \e[32m+
\e[m
\e[32m canvasEl.width = this.imageEl.OriginWidth * this.getScaleLevel();
\e[m
785 \e[32m+
\e[m
\e[32m canvasEl.height = this.imageEl.OriginWidth * this.getScaleLevel();
\e[m
786 \e[32m+
\e[m
\e[32m var center = this.imageEl.OriginWidth / 2;
\e[m
787 \e[32m+
\e[m
\e[41m
\e[m
788 \e[32m+
\e[m
\e[32m if(this.imageEl.OriginWidth < this.imageEl.OriginHeight){
\e[m
789 \e[32m+
\e[m
\e[32m canvasEl.width = this.imageEl.OriginHeight * this.getScaleLevel();
\e[m
790 \e[32m+
\e[m
\e[32m canvasEl.height = this.imageEl.OriginHeight * this.getScaleLevel();
\e[m
791 \e[32m+
\e[m
\e[32m center = this.imageEl.OriginHeight / 2;
\e[m
792 \e[32m+
\e[m
\e[32m }
\e[m
793 \e[32m+
\e[m
\e[41m
\e[m
794 \e[32m+
\e[m
\e[32m contextEl.scale(this.getScaleLevel(), this.getScaleLevel());
\e[m
795 \e[32m+
\e[m
\e[41m
\e[m
796 \e[32m+
\e[m
\e[32m contextEl.translate(center, center);
\e[m
797 \e[32m+
\e[m
\e[32m contextEl.rotate(this.rotate * Math.PI / 180);
\e[m
799 \e[32m+
\e[m
\e[32m contextEl.drawImage(this.imageEl, 0, 0, this.imageEl.OriginWidth, this.imageEl.OriginHeight, center * -1, center * -1, this.imageEl.OriginWidth, this.imageEl.OriginHeight);
\e[m
800 \e[32m+
\e[m
\e[41m
\e[m
801 \e[32m+
\e[m
\e[32m this.canvasEl = document.createElement("canvas");
\e[m
802 \e[32m+
\e[m
\e[41m
\e[m
803 \e[32m+
\e[m
\e[32m this.contextEl = this.canvasEl.getContext("2d");
\e[m
804 \e[32m+
\e[m
\e[41m
\e[m
805 \e[32m+
\e[m
\e[32m switch (this.rotate) {
\e[m
806 \e[32m+
\e[m
\e[32m case 0 :
\e[m
807 \e[32m+
\e[m
\e[41m
\e[m
808 \e[32m+
\e[m
\e[32m this.canvasEl.width = this.imageEl.OriginWidth * this.getScaleLevel();
\e[m
809 \e[32m+
\e[m
\e[32m this.canvasEl.height = this.imageEl.OriginHeight * this.getScaleLevel();
\e[m
810 \e[32m+
\e[m
\e[41m
\e[m
811 \e[32m+
\e[m
\e[32m this.contextEl.drawImage(canvasEl, 0, 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
\e[m
812 \e[32m+
\e[m
\e[41m
\e[m
813 \e[32m+
\e[m
\e[32m break;
\e[m
814 \e[32m+
\e[m
\e[32m case 90 :
\e[m
\e[41m
\e[m
815 \e[32m+
\e[m
\e[41m
\e[m
816 \e[32m+
\e[m
\e[32m this.canvasEl.width = this.imageEl.OriginHeight * this.getScaleLevel();
\e[m
817 \e[32m+
\e[m
\e[32m this.canvasEl.height = this.imageEl.OriginWidth * this.getScaleLevel();
\e[m
818 \e[32m+
\e[m
\e[41m
\e[m
819 \e[32m+
\e[m
\e[32m if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
\e[m
820 \e[32m+
\e[m
\e[32m this.contextEl.drawImage(canvasEl, Math.abs(this.canvasEl.width - this.canvasEl.height), 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
\e[m
821 \e[32m+
\e[m
\e[32m break;
\e[m
822 \e[32m+
\e[m
\e[32m }
\e[m
823 \e[32m+
\e[m
\e[41m
\e[m
824 \e[32m+
\e[m
\e[32m this.contextEl.drawImage(canvasEl, 0, 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
\e[m
825 \e[32m+
\e[m
\e[41m
\e[m
826 \e[32m+
\e[m
\e[32m break;
\e[m
827 \e[32m+
\e[m
\e[32m case 180 :
\e[m
828 \e[32m+
\e[m
\e[41m
\e[m
829 \e[32m+
\e[m
\e[32m this.canvasEl.width = this.imageEl.OriginWidth * this.getScaleLevel();
\e[m
830 \e[32m+
\e[m
\e[32m this.canvasEl.height = this.imageEl.OriginHeight * this.getScaleLevel();
\e[m
831 \e[32m+
\e[m
\e[41m
\e[m
832 \e[32m+
\e[m
\e[32m if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
\e[m
833 \e[32m+
\e[m
\e[32m this.contextEl.drawImage(canvasEl, 0, Math.abs(this.canvasEl.width - this.canvasEl.height), this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
\e[m
834 \e[32m+
\e[m
\e[32m break;
\e[m
835 \e[32m+
\e[m
\e[32m }
\e[m
836 \e[32m+
\e[m
\e[41m
\e[m
837 \e[32m+
\e[m
\e[32m this.contextEl.drawImage(canvasEl, Math.abs(this.canvasEl.width - this.canvasEl.height), 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
\e[m
838 \e[32m+
\e[m
\e[41m
\e[m
839 \e[32m+
\e[m
\e[32m break;
\e[m
840 \e[32m+
\e[m
\e[32m case 270 :
\e[m
841 \e[32m+
\e[m
\e[41m
\e[m
842 \e[32m+
\e[m
\e[32m this.canvasEl.width = this.imageEl.OriginHeight * this.getScaleLevel();
\e[m
843 \e[32m+
\e[m
\e[32m this.canvasEl.height = this.imageEl.OriginWidth * this.getScaleLevel();
\e[m
844 \e[32m+
\e[m
\e[41m
\e[m
845 \e[32m+
\e[m
\e[32m if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
\e[m
846 \e[32m+
\e[m
\e[32m this.contextEl.drawImage(canvasEl, 0, 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
\e[m
847 \e[32m+
\e[m
\e[32m break;
\e[m
848 \e[32m+
\e[m
\e[32m }
\e[m
849 \e[32m+
\e[m
\e[41m
\e[m
850 \e[32m+
\e[m
\e[32m this.contextEl.drawImage(canvasEl, 0, Math.abs(this.canvasEl.width - this.canvasEl.height), this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
\e[m
851 \e[32m+
\e[m
\e[41m
\e[m
852 \e[32m+
\e[m
\e[32m break;
\e[m
853 \e[32m+
\e[m
\e[32m default :
\e[m
\e[41m
\e[m
854 \e[32m+
\e[m
\e[32m break;
\e[m
855 \e[32m+
\e[m
\e[32m }
\e[m
856 \e[32m+
\e[m
\e[41m
\e[m
857 \e[32m+
\e[m
\e[32m this.previewEl.appendChild(this.canvasEl);
\e[m
858 \e[32m+
\e[m
\e[41m
\e[m
859 \e[32m+
\e[m
\e[32m this.setCanvasPosition();
\e[m
860 \e[32m+
\e[m
\e[32m },
\e[m
861 \e[32m+
\e[m
\e[41m
\e[m
862 \e[32m+
\e[m
\e[32m crop : function()
\e[m
863 \e[32m+
\e[m
\e[32m {
\e[m
864 \e[32m+
\e[m
\e[32m if(!this.canvasLoaded){
\e[m
865 \e[32m+
\e[m
\e[32m return;
\e[m
866 \e[32m+
\e[m
\e[32m }
\e[m
867 \e[32m+
\e[m
\e[41m
\e[m
868 \e[32m+
\e[m
\e[32m var imageCanvas = document.createElement("canvas");
\e[m
869 \e[32m+
\e[m
\e[41m
\e[m
870 \e[32m+
\e[m
\e[32m var imageContext = imageCanvas.getContext("2d");
\e[m
871 \e[32m+
\e[m
\e[41m
\e[m
872 \e[32m+
\e[m
\e[32m imageCanvas.width = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? this.imageEl.OriginWidth : this.imageEl.OriginHeight;
\e[m
873 \e[32m+
\e[m
\e[32m imageCanvas.height = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? this.imageEl.OriginWidth : this.imageEl.OriginHeight;
\e[m
874 \e[32m+
\e[m
\e[41m
\e[m
875 \e[32m+
\e[m
\e[32m var center = imageCanvas.width / 2;
\e[m
876 \e[32m+
\e[m
\e[41m
\e[m
877 \e[32m+
\e[m
\e[32m imageContext.translate(center, center);
\e[m
878 \e[32m+
\e[m
\e[41m
\e[m
879 \e[32m+
\e[m
\e[32m imageContext.rotate(this.rotate * Math.PI / 180);
\e[m
880 \e[32m+
\e[m
\e[41m
\e[m
881 \e[32m+
\e[m
\e[32m imageContext.drawImage(this.imageEl, 0, 0, this.imageEl.OriginWidth, this.imageEl.OriginHeight, center * -1, center * -1, this.imageEl.OriginWidth, this.imageEl.OriginHeight);
\e[m
882 \e[32m+
\e[m
\e[41m
\e[m
883 \e[32m+
\e[m
\e[32m var canvas = document.createElement("canvas");
\e[m
884 \e[32m+
\e[m
\e[41m
\e[m
885 \e[32m+
\e[m
\e[32m var context = canvas.getContext("2d");
\e[m
886 \e[32m+
\e[m
\e[41m
\e[m
887 \e[32m+
\e[m
\e[32m canvas.width = this.minWidth;
\e[m
888 \e[32m+
\e[m
\e[32m canvas.height = this.minHeight;
\e[m
890 \e[32m+
\e[m
\e[32m switch (this.rotate) {
\e[m
891 \e[32m+
\e[m
\e[32m case 0 :
\e[m
892 \e[32m+
\e[m
\e[41m
\e[m
893 \e[32m+
\e[m
\e[32m var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getWidth() / this.getScaleLevel());
\e[m
894 \e[32m+
\e[m
\e[32m var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getHeight() / this.getScaleLevel());
\e[m
895 \e[32m+
\e[m
\e[41m
\e[m
896 \e[32m+
\e[m
\e[32m var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());
\e[m
897 \e[32m+
\e[m
\e[32m var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
\e[m
898 \e[32m+
\e[m
\e[41m
\e[m
899 \e[32m+
\e[m
\e[32m var targetWidth = this.minWidth - 2 * x;
\e[m
900 \e[32m+
\e[m
\e[32m var targetHeight = this.minHeight - 2 * y;
\e[m
901 \e[32m+
\e[m
\e[41m
\e[m
902 \e[32m+
\e[m
\e[32m var scale = 1;
\e[m
903 \e[32m+
\e[m
\e[41m
\e[m
904 \e[32m+
\e[m
\e[32m if((x == 0 && y == 0) || (x == 0 && y > 0)){
\e[m
905 \e[32m+
\e[m
\e[32m scale = targetWidth / width;
\e[m
906 \e[32m+
\e[m
\e[32m }
\e[m
907 \e[32m+
\e[m
\e[41m
\e[m
908 \e[32m+
\e[m
\e[32m if(x > 0 && y == 0){
\e[m
909 \e[32m+
\e[m
\e[32m scale = targetHeight / height;
\e[m
910 \e[32m+
\e[m
\e[32m }
\e[m
911 \e[32m+
\e[m
\e[41m
\e[m
912 \e[32m+
\e[m
\e[32m if(x > 0 && y > 0){
\e[m
913 \e[32m+
\e[m
\e[32m scale = targetWidth / width;
\e[m
914 \e[32m+
\e[m
\e[41m
\e[m
915 \e[32m+
\e[m
\e[32m if(width < height){
\e[m
916 \e[32m+
\e[m
\e[32m scale = targetHeight / height;
\e[m
917 \e[32m+
\e[m
\e[32m }
\e[m
918 \e[32m+
\e[m
\e[32m }
\e[m
919 \e[32m+
\e[m
\e[41m
\e[m
920 \e[32m+
\e[m
\e[32m context.scale(scale, scale);
\e[m
921 \e[32m+
\e[m
\e[41m
\e[m
922 \e[32m+
\e[m
\e[32m var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));
\e[m
923 \e[32m+
\e[m
\e[32m var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));
\e[m
925 \e[32m+
\e[m
\e[32m sx = sx < 0 ? 0 : (sx / this.getScaleLevel());
\e[m
926 \e[32m+
\e[m
\e[32m sy = sy < 0 ? 0 : (sy / this.getScaleLevel());
\e[m
928 \e[32m+
\e[m
\e[32m context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
\e[m
929 \e[32m+
\e[m
\e[41m
\e[m
930 \e[32m+
\e[m
\e[32m break;
\e[m
931 \e[32m+
\e[m
\e[32m case 90 :
\e[m
\e[41m
\e[m
932 \e[32m+
\e[m
\e[41m
\e[m
933 \e[32m+
\e[m
\e[32m var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getWidth() / this.getScaleLevel());
\e[m
934 \e[32m+
\e[m
\e[32m var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getHeight() / this.getScaleLevel());
\e[m
935 \e[32m+
\e[m
\e[41m
\e[m
936 \e[32m+
\e[m
\e[32m var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());
\e[m
937 \e[32m+
\e[m
\e[32m var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
\e[m
938 \e[32m+
\e[m
\e[41m
\e[m
939 \e[32m+
\e[m
\e[32m var targetWidth = this.minWidth - 2 * x;
\e[m
940 \e[32m+
\e[m
\e[32m var targetHeight = this.minHeight - 2 * y;
\e[m
941 \e[32m+
\e[m
\e[41m
\e[m
942 \e[32m+
\e[m
\e[32m var scale = 1;
\e[m
943 \e[32m+
\e[m
\e[41m
\e[m
944 \e[32m+
\e[m
\e[32m if((x == 0 && y == 0) || (x == 0 && y > 0)){
\e[m
945 \e[32m+
\e[m
\e[32m scale = targetWidth / width;
\e[m
946 \e[32m+
\e[m
\e[32m }
\e[m
947 \e[32m+
\e[m
\e[41m
\e[m
948 \e[32m+
\e[m
\e[32m if(x > 0 && y == 0){
\e[m
949 \e[32m+
\e[m
\e[32m scale = targetHeight / height;
\e[m
950 \e[32m+
\e[m
\e[32m }
\e[m
951 \e[32m+
\e[m
\e[41m
\e[m
952 \e[32m+
\e[m
\e[32m if(x > 0 && y > 0){
\e[m
953 \e[32m+
\e[m
\e[32m scale = targetWidth / width;
\e[m
954 \e[32m+
\e[m
\e[41m
\e[m
955 \e[32m+
\e[m
\e[32m if(width < height){
\e[m
956 \e[32m+
\e[m
\e[32m scale = targetHeight / height;
\e[m
957 \e[32m+
\e[m
\e[32m }
\e[m
958 \e[32m+
\e[m
\e[32m }
\e[m
959 \e[32m+
\e[m
\e[41m
\e[m
960 \e[32m+
\e[m
\e[32m context.scale(scale, scale);
\e[m
961 \e[32m+
\e[m
\e[41m
\e[m
962 \e[32m+
\e[m
\e[32m var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));
\e[m
963 \e[32m+
\e[m
\e[32m var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));
\e[m
965 \e[32m+
\e[m
\e[32m sx = sx < 0 ? 0 : (sx / this.getScaleLevel());
\e[m
966 \e[32m+
\e[m
\e[32m sy = sy < 0 ? 0 : (sy / this.getScaleLevel());
\e[m
967 \e[32m+
\e[m
\e[41m
\e[m
968 \e[32m+
\e[m
\e[32m sx += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight) : 0;
\e[m
969 \e[32m+
\e[m
\e[41m
\e[m
970 \e[32m+
\e[m
\e[32m context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
\e[m
971 \e[32m+
\e[m
\e[41m
\e[m
972 \e[32m+
\e[m
\e[32m break;
\e[m
973 \e[32m+
\e[m
\e[32m case 180 :
\e[m
974 \e[32m+
\e[m
\e[41m
\e[m
975 \e[32m+
\e[m
\e[32m var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getWidth() / this.getScaleLevel());
\e[m
976 \e[32m+
\e[m
\e[32m var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getHeight() / this.getScaleLevel());
\e[m
977 \e[32m+
\e[m
\e[41m
\e[m
978 \e[32m+
\e[m
\e[32m var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());
\e[m
979 \e[32m+
\e[m
\e[32m var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
\e[m
980 \e[32m+
\e[m
\e[41m
\e[m
981 \e[32m+
\e[m
\e[32m var targetWidth = this.minWidth - 2 * x;
\e[m
982 \e[32m+
\e[m
\e[32m var targetHeight = this.minHeight - 2 * y;
\e[m
983 \e[32m+
\e[m
\e[41m
\e[m
984 \e[32m+
\e[m
\e[32m var scale = 1;
\e[m
985 \e[32m+
\e[m
\e[41m
\e[m
986 \e[32m+
\e[m
\e[32m if((x == 0 && y == 0) || (x == 0 && y > 0)){
\e[m
987 \e[32m+
\e[m
\e[32m scale = targetWidth / width;
\e[m
988 \e[32m+
\e[m
\e[32m }
\e[m
989 \e[32m+
\e[m
\e[41m
\e[m
990 \e[32m+
\e[m
\e[32m if(x > 0 && y == 0){
\e[m
991 \e[32m+
\e[m
\e[32m scale = targetHeight / height;
\e[m
992 \e[32m+
\e[m
\e[32m }
\e[m
993 \e[32m+
\e[m
\e[41m
\e[m
994 \e[32m+
\e[m
\e[32m if(x > 0 && y > 0){
\e[m
995 \e[32m+
\e[m
\e[32m scale = targetWidth / width;
\e[m
996 \e[32m+
\e[m
\e[41m
\e[m
997 \e[32m+
\e[m
\e[32m if(width < height){
\e[m
998 \e[32m+
\e[m
\e[32m scale = targetHeight / height;
\e[m
999 \e[32m+
\e[m
\e[32m }
\e[m
1000 \e[32m+
\e[m
\e[32m }
\e[m
1001 \e[32m+
\e[m
\e[41m
\e[m
1002 \e[32m+
\e[m
\e[32m context.scale(scale, scale);
\e[m
1003 \e[32m+
\e[m
\e[41m
\e[m
1004 \e[32m+
\e[m
\e[32m var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));
\e[m
1005 \e[32m+
\e[m
\e[32m var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));
\e[m
1007 \e[32m+
\e[m
\e[32m sx = sx < 0 ? 0 : (sx / this.getScaleLevel());
\e[m
1008 \e[32m+
\e[m
\e[32m sy = sy < 0 ? 0 : (sy / this.getScaleLevel());
\e[m
1010 \e[32m+
\e[m
\e[32m sx += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? 0 : Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight);
\e[m
1011 \e[32m+
\e[m
\e[32m sy += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight) : 0;
\e[m
1012 \e[32m+
\e[m
\e[41m
\e[m
1013 \e[32m+
\e[m
\e[32m context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
\e[m
1014 \e[32m+
\e[m
\e[41m
\e[m
1015 \e[32m+
\e[m
\e[32m break;
\e[m
1016 \e[32m+
\e[m
\e[32m case 270 :
\e[m
1017 \e[32m+
\e[m
\e[41m
\e[m
1018 \e[32m+
\e[m
\e[32m var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getWidth() / this.getScaleLevel());
\e[m
1019 \e[32m+
\e[m
\e[32m var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getHeight() / this.getScaleLevel());
\e[m
1020 \e[32m+
\e[m
\e[41m
\e[m
1021 \e[32m+
\e[m
\e[32m var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());
\e[m
1022 \e[32m+
\e[m
\e[32m var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
\e[m
1023 \e[32m+
\e[m
\e[41m
\e[m
1024 \e[32m+
\e[m
\e[32m var targetWidth = this.minWidth - 2 * x;
\e[m
1025 \e[32m+
\e[m
\e[32m var targetHeight = this.minHeight - 2 * y;
\e[m
1026 \e[32m+
\e[m
\e[41m
\e[m
1027 \e[32m+
\e[m
\e[32m var scale = 1;
\e[m
1028 \e[32m+
\e[m
\e[41m
\e[m
1029 \e[32m+
\e[m
\e[32m if((x == 0 && y == 0) || (x == 0 && y > 0)){
\e[m
1030 \e[32m+
\e[m
\e[32m scale = targetWidth / width;
\e[m
1031 \e[32m+
\e[m
\e[32m }
\e[m
1032 \e[32m+
\e[m
\e[41m
\e[m
1033 \e[32m+
\e[m
\e[32m if(x > 0 && y == 0){
\e[m
1034 \e[32m+
\e[m
\e[32m scale = targetHeight / height;
\e[m
1035 \e[32m+
\e[m
\e[32m }
\e[m
1036 \e[32m+
\e[m
\e[41m
\e[m
1037 \e[32m+
\e[m
\e[32m if(x > 0 && y > 0){
\e[m
1038 \e[32m+
\e[m
\e[32m scale = targetWidth / width;
\e[m
1039 \e[32m+
\e[m
\e[41m
\e[m
1040 \e[32m+
\e[m
\e[32m if(width < height){
\e[m
1041 \e[32m+
\e[m
\e[32m scale = targetHeight / height;
\e[m
1042 \e[32m+
\e[m
\e[32m }
\e[m
1043 \e[32m+
\e[m
\e[32m }
\e[m
1044 \e[32m+
\e[m
\e[41m
\e[m
1045 \e[32m+
\e[m
\e[32m context.scale(scale, scale);
\e[m
1046 \e[32m+
\e[m
\e[41m
\e[m
1047 \e[32m+
\e[m
\e[32m var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));
\e[m
1048 \e[32m+
\e[m
\e[32m var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));
\e[m
1050 \e[32m+
\e[m
\e[32m sx = sx < 0 ? 0 : (sx / this.getScaleLevel());
\e[m
1051 \e[32m+
\e[m
\e[32m sy = sy < 0 ? 0 : (sy / this.getScaleLevel());
\e[m
1052 \e[32m+
\e[m
\e[41m
\e[m
1053 \e[32m+
\e[m
\e[32m sy += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? 0 : Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight);
\e[m
1054 \e[32m+
\e[m
\e[41m
\e[m
1055 \e[32m+
\e[m
\e[32m context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
\e[m
1056 \e[32m+
\e[m
\e[41m
\e[m
1057 \e[32m+
\e[m
\e[32m break;
\e[m
1058 \e[32m+
\e[m
\e[32m default :
\e[m
\e[41m
\e[m
1059 \e[32m+
\e[m
\e[32m break;
\e[m
1060 \e[32m+
\e[m
\e[32m }
\e[m
1061 \e[32m+
\e[m
\e[41m
\e[m
1062 \e[32m+
\e[m
\e[32m this.cropData = canvas.toDataURL(this.cropType);
\e[m
1063 \e[32m+
\e[m
\e[41m
\e[m
1064 \e[32m+
\e[m
\e[32m if(this.fireEvent('crop', this, this.cropData) !== false){
\e[m
1065 \e[32m+
\e[m
\e[32m this.process(this.file, this.cropData);
\e[m
1066 \e[32m+
\e[m
\e[32m }
\e[m
1067 \e[32m+
\e[m
\e[41m
\e[m
1068 \e[32m+
\e[m
\e[32m return;
\e[m
1069 \e[32m+
\e[m
\e[41m
\e[m
1070 \e[32m+
\e[m
\e[32m },
\e[m
1071 \e[32m+
\e[m
\e[41m
\e[m
1072 \e[32m+
\e[m
\e[32m setThumbBoxSize : function()
\e[m
1073 \e[32m+
\e[m
\e[32m {
\e[m
1074 \e[32m+
\e[m
\e[32m var width, height;
\e[m
1075 \e[32m+
\e[m
\e[41m
\e[m
1076 \e[32m+
\e[m
\e[32m if(this.isDocument && typeof(this.imageEl) != 'undefined'){
\e[m
1077 \e[32m+
\e[m
\e[32m width = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.max(this.minWidth, this.minHeight) : Math.min(this.minWidth, this.minHeight);
\e[m
1078 \e[32m+
\e[m
\e[32m height = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.min(this.minWidth, this.minHeight) : Math.max(this.minWidth, this.minHeight);
\e[m
1079 \e[32m+
\e[m
\e[41m
\e[m
1080 \e[32m+
\e[m
\e[32m this.minWidth = width;
\e[m
1081 \e[32m+
\e[m
\e[32m this.minHeight = height;
\e[m
1082 \e[32m+
\e[m
\e[41m
\e[m
1083 \e[32m+
\e[m
\e[32m if(this.rotate == 90 || this.rotate == 270){
\e[m
1084 \e[32m+
\e[m
\e[32m this.minWidth = height;
\e[m
1085 \e[32m+
\e[m
\e[32m this.minHeight = width;
\e[m
1086 \e[32m+
\e[m
\e[32m }
\e[m
1087 \e[32m+
\e[m
\e[32m }
\e[m
1088 \e[32m+
\e[m
\e[41m
\e[m
1089 \e[32m+
\e[m
\e[32m height = 300;
\e[m
1090 \e[32m+
\e[m
\e[32m width = Math.ceil(this.minWidth * height / this.minHeight);
\e[m
1091 \e[32m+
\e[m
\e[41m
\e[m
1092 \e[32m+
\e[m
\e[32m if(this.minWidth > this.minHeight){
\e[m
1093 \e[32m+
\e[m
\e[32m width = 300;
\e[m
1094 \e[32m+
\e[m
\e[32m height = Math.ceil(this.minHeight * width / this.minWidth);
\e[m
1095 \e[32m+
\e[m
\e[32m }
\e[m
1096 \e[32m+
\e[m
\e[41m
\e[m
1097 \e[32m+
\e[m
\e[32m this.thumbEl.setStyle({
\e[m
1098 \e[32m+
\e[m
\e[32m width : width + 'px',
\e[m
1099 \e[32m+
\e[m
\e[32m height : height + 'px'
\e[m
1100 \e[32m+
\e[m
\e[32m });
\e[m
1102 \e[32m+
\e[m
\e[32m return;
\e[m
1103 \e[32m+
\e[m
\e[41m
\e[m
1104 \e[32m+
\e[m
\e[32m },
\e[m
1105 \e[32m+
\e[m
\e[41m
\e[m
1106 \e[32m+
\e[m
\e[32m setThumbBoxPosition : function()
\e[m
1107 \e[32m+
\e[m
\e[32m {
\e[m
1108 \e[32m+
\e[m
\e[32m var x = Math.ceil((this.bodyEl.getWidth() - this.thumbEl.getWidth()) / 2 );
\e[m
1109 \e[32m+
\e[m
\e[32m var y = Math.ceil((this.bodyEl.getHeight() - this.thumbEl.getHeight()) / 2);
\e[m
1110 \e[32m+
\e[m
\e[41m
\e[m
1111 \e[32m+
\e[m
\e[32m this.thumbEl.setLeft(x);
\e[m
1112 \e[32m+
\e[m
\e[32m this.thumbEl.setTop(y);
\e[m
1113 \e[32m+
\e[m
\e[41m
\e[m
1114 \e[32m+
\e[m
\e[32m },
\e[m
1115 \e[32m+
\e[m
\e[41m
\e[m
1116 \e[32m+
\e[m
\e[32m baseRotateLevel : function()
\e[m
1117 \e[32m+
\e[m
\e[32m {
\e[m
1118 \e[32m+
\e[m
\e[32m this.baseRotate = 1;
\e[m
1119 \e[32m+
\e[m
\e[41m
\e[m
1120 \e[32m+
\e[m
\e[32m if(
\e[m
1121 \e[32m+
\e[m
\e[32m typeof(this.exif) != 'undefined' &&
\e[m
1122 \e[32m+
\e[m
\e[32m typeof(this.exif[Roo.dialog.UploadCropbox['tags']['Orientation']]) != 'undefined' &&
\e[m
1123 \e[32m+
\e[m
\e[32m [1, 3, 6, 8].indexOf(this.exif[Roo.dialog.UploadCropbox['tags']['Orientation']]) != -1
\e[m
1124 \e[32m+
\e[m
\e[32m ){
\e[m
1125 \e[32m+
\e[m
\e[32m this.baseRotate = this.exif[Roo.dialog.UploadCropbox['tags']['Orientation']];
\e[m
1126 \e[32m+
\e[m
\e[32m }
\e[m
1127 \e[32m+
\e[m
\e[41m
\e[m
1128 \e[32m+
\e[m
\e[32m this.rotate = Roo.dialog.UploadCropbox['Orientation'][this.baseRotate];
\e[m
1129 \e[32m+
\e[m
\e[41m
\e[m
1130 \e[32m+
\e[m
\e[32m },
\e[m
1131 \e[32m+
\e[m
\e[41m
\e[m
1132 \e[32m+
\e[m
\e[32m baseScaleLevel : function()
\e[m
1133 \e[32m+
\e[m
\e[32m {
\e[m
1134 \e[32m+
\e[m
\e[32m var width, height;
\e[m
1135 \e[32m+
\e[m
\e[41m
\e[m
1136 \e[32m+
\e[m
\e[32m if(this.isDocument){
\e[m
1137 \e[32m+
\e[m
\e[41m
\e[m
1138 \e[32m+
\e[m
\e[32m if(this.baseRotate == 6 || this.baseRotate == 8){
\e[m
1139 \e[32m+
\e[m
\e[41m
\e[m
1140 \e[32m+
\e[m
\e[32m height = this.thumbEl.getHeight();
\e[m
1141 \e[32m+
\e[m
\e[32m this.baseScale = height / this.imageEl.OriginWidth;
\e[m
1143 \e[32m+
\e[m
\e[32m if(this.imageEl.OriginHeight * this.baseScale > this.thumbEl.getWidth()){
\e[m
1144 \e[32m+
\e[m
\e[32m width = this.thumbEl.getWidth();
\e[m
1145 \e[32m+
\e[m
\e[32m this.baseScale = width / this.imageEl.OriginHeight;
\e[m
1146 \e[32m+
\e[m
\e[32m }
\e[m
1148 \e[32m+
\e[m
\e[32m return;
\e[m
1149 \e[32m+
\e[m
\e[32m }
\e[m
1151 \e[32m+
\e[m
\e[32m height = this.thumbEl.getHeight();
\e[m
1152 \e[32m+
\e[m
\e[32m this.baseScale = height / this.imageEl.OriginHeight;
\e[m
1154 \e[32m+
\e[m
\e[32m if(this.imageEl.OriginWidth * this.baseScale > this.thumbEl.getWidth()){
\e[m
1155 \e[32m+
\e[m
\e[32m width = this.thumbEl.getWidth();
\e[m
1156 \e[32m+
\e[m
\e[32m this.baseScale = width / this.imageEl.OriginWidth;
\e[m
1157 \e[32m+
\e[m
\e[32m }
\e[m
1159 \e[32m+
\e[m
\e[32m return;
\e[m
1160 \e[32m+
\e[m
\e[32m }
\e[m
1161 \e[32m+
\e[m
\e[41m
\e[m
1162 \e[32m+
\e[m
\e[32m if(this.baseRotate == 6 || this.baseRotate == 8){
\e[m
1163 \e[32m+
\e[m
\e[41m
\e[m
1164 \e[32m+
\e[m
\e[32m width = this.thumbEl.getHeight();
\e[m
1165 \e[32m+
\e[m
\e[32m this.baseScale = width / this.imageEl.OriginHeight;
\e[m
1166 \e[32m+
\e[m
\e[41m
\e[m
1167 \e[32m+
\e[m
\e[32m if(this.imageEl.OriginHeight * this.baseScale < this.thumbEl.getWidth()){
\e[m
1168 \e[32m+
\e[m
\e[32m height = this.thumbEl.getWidth();
\e[m
1169 \e[32m+
\e[m
\e[32m this.baseScale = height / this.imageEl.OriginHeight;
\e[m
1170 \e[32m+
\e[m
\e[32m }
\e[m
1171 \e[32m+
\e[m
\e[41m
\e[m
1172 \e[32m+
\e[m
\e[32m if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
\e[m
1173 \e[32m+
\e[m
\e[32m height = this.thumbEl.getWidth();
\e[m
1174 \e[32m+
\e[m
\e[32m this.baseScale = height / this.imageEl.OriginHeight;
\e[m
1175 \e[32m+
\e[m
\e[41m
\e[m
1176 \e[32m+
\e[m
\e[32m if(this.imageEl.OriginWidth * this.baseScale < this.thumbEl.getHeight()){
\e[m
1177 \e[32m+
\e[m
\e[32m width = this.thumbEl.getHeight();
\e[m
1178 \e[32m+
\e[m
\e[32m this.baseScale = width / this.imageEl.OriginWidth;
\e[m
1179 \e[32m+
\e[m
\e[32m }
\e[m
1180 \e[32m+
\e[m
\e[32m }
\e[m
1181 \e[32m+
\e[m
\e[41m
\e[m
1182 \e[32m+
\e[m
\e[32m return;
\e[m
1183 \e[32m+
\e[m
\e[32m }
\e[m
1184 \e[32m+
\e[m
\e[41m
\e[m
1185 \e[32m+
\e[m
\e[32m width = this.thumbEl.getWidth();
\e[m
1186 \e[32m+
\e[m
\e[32m this.baseScale = width / this.imageEl.OriginWidth;
\e[m
1187 \e[32m+
\e[m
\e[41m
\e[m
1188 \e[32m+
\e[m
\e[32m if(this.imageEl.OriginHeight * this.baseScale < this.thumbEl.getHeight()){
\e[m
1189 \e[32m+
\e[m
\e[32m height = this.thumbEl.getHeight();
\e[m
1190 \e[32m+
\e[m
\e[32m this.baseScale = height / this.imageEl.OriginHeight;
\e[m
1191 \e[32m+
\e[m
\e[32m }
\e[m
1192 \e[32m+
\e[m
\e[41m
\e[m
1193 \e[32m+
\e[m
\e[32m if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
\e[m
1194 \e[32m+
\e[m
\e[41m
\e[m
1195 \e[32m+
\e[m
\e[32m height = this.thumbEl.getHeight();
\e[m
1196 \e[32m+
\e[m
\e[32m this.baseScale = height / this.imageEl.OriginHeight;
\e[m
1197 \e[32m+
\e[m
\e[41m
\e[m
1198 \e[32m+
\e[m
\e[32m if(this.imageEl.OriginWidth * this.baseScale < this.thumbEl.getWidth()){
\e[m
1199 \e[32m+
\e[m
\e[32m width = this.thumbEl.getWidth();
\e[m
1200 \e[32m+
\e[m
\e[32m this.baseScale = width / this.imageEl.OriginWidth;
\e[m
1201 \e[32m+
\e[m
\e[32m }
\e[m
1202 \e[32m+
\e[m
\e[41m
\e[m
1203 \e[32m+
\e[m
\e[32m }
\e[m
1204 \e[32m+
\e[m
\e[41m
\e[m
1205 \e[32m+
\e[m
\e[32m return;
\e[m
1206 \e[32m+
\e[m
\e[32m },
\e[m
1207 \e[32m+
\e[m
\e[41m
\e[m
1208 \e[32m+
\e[m
\e[32m getScaleLevel : function()
\e[m
1209 \e[32m+
\e[m
\e[32m {
\e[m
1210 \e[32m+
\e[m
\e[32m return this.baseScale * Math.pow(1.1, this.scale);
\e[m
1211 \e[32m+
\e[m
\e[32m },
\e[m
1212 \e[32m+
\e[m
\e[41m
\e[m
1213 \e[32m+
\e[m
\e[32m onTouchStart : function(e)
\e[m
1214 \e[32m+
\e[m
\e[32m {
\e[m
1215 \e[32m+
\e[m
\e[32m if(!this.canvasLoaded){
\e[m
1216 \e[32m+
\e[m
\e[32m this.beforeSelectFile(e);
\e[m
1217 \e[32m+
\e[m
\e[32m return;
\e[m
1218 \e[32m+
\e[m
\e[32m }
\e[m
1219 \e[32m+
\e[m
\e[41m
\e[m
1220 \e[32m+
\e[m
\e[32m var touches = e.browserEvent.touches;
\e[m
1221 \e[32m+
\e[m
\e[41m
\e[m
1222 \e[32m+
\e[m
\e[32m if(!touches){
\e[m
1223 \e[32m+
\e[m
\e[32m return;
\e[m
1224 \e[32m+
\e[m
\e[32m }
\e[m
1225 \e[32m+
\e[m
\e[41m
\e[m
1226 \e[32m+
\e[m
\e[32m if(touches.length == 1){
\e[m
1227 \e[32m+
\e[m
\e[32m this.onMouseDown(e);
\e[m
1228 \e[32m+
\e[m
\e[32m return;
\e[m
1229 \e[32m+
\e[m
\e[32m }
\e[m
1230 \e[32m+
\e[m
\e[41m
\e[m
1231 \e[32m+
\e[m
\e[32m if(touches.length != 2){
\e[m
1232 \e[32m+
\e[m
\e[32m return;
\e[m
1233 \e[32m+
\e[m
\e[32m }
\e[m
1234 \e[32m+
\e[m
\e[41m
\e[m
1235 \e[32m+
\e[m
\e[32m var coords = [];
\e[m
1236 \e[32m+
\e[m
\e[41m
\e[m
1237 \e[32m+
\e[m
\e[32m for(var i = 0, finger; finger = touches[i]; i++){
\e[m
1238 \e[32m+
\e[m
\e[32m coords.push(finger.pageX, finger.pageY);
\e[m
1239 \e[32m+
\e[m
\e[32m }
\e[m
1240 \e[32m+
\e[m
\e[41m
\e[m
1241 \e[32m+
\e[m
\e[32m var x = Math.pow(coords[0] - coords[2], 2);
\e[m
1242 \e[32m+
\e[m
\e[32m var y = Math.pow(coords[1] - coords[3], 2);
\e[m
1243 \e[32m+
\e[m
\e[41m
\e[m
1244 \e[32m+
\e[m
\e[32m this.startDistance = Math.sqrt(x + y);
\e[m
1245 \e[32m+
\e[m
\e[41m
\e[m
1246 \e[32m+
\e[m
\e[32m this.startScale = this.scale;
\e[m
1247 \e[32m+
\e[m
\e[41m
\e[m
1248 \e[32m+
\e[m
\e[32m this.pinching = true;
\e[m
1249 \e[32m+
\e[m
\e[32m this.dragable = false;
\e[m
1250 \e[32m+
\e[m
\e[41m
\e[m
1251 \e[32m+
\e[m
\e[32m },
\e[m
1252 \e[32m+
\e[m
\e[41m
\e[m
1253 \e[32m+
\e[m
\e[32m onTouchMove : function(e)
\e[m
1254 \e[32m+
\e[m
\e[32m {
\e[m
1255 \e[32m+
\e[m
\e[32m if(!this.pinching && !this.dragable){
\e[m
1256 \e[32m+
\e[m
\e[32m return;
\e[m
1257 \e[32m+
\e[m
\e[32m }
\e[m
1258 \e[32m+
\e[m
\e[41m
\e[m
1259 \e[32m+
\e[m
\e[32m var touches = e.browserEvent.touches;
\e[m
1260 \e[32m+
\e[m
\e[41m
\e[m
1261 \e[32m+
\e[m
\e[32m if(!touches){
\e[m
1262 \e[32m+
\e[m
\e[32m return;
\e[m
1263 \e[32m+
\e[m
\e[32m }
\e[m
1264 \e[32m+
\e[m
\e[41m
\e[m
1265 \e[32m+
\e[m
\e[32m if(this.dragable){
\e[m
1266 \e[32m+
\e[m
\e[32m this.onMouseMove(e);
\e[m
1267 \e[32m+
\e[m
\e[32m return;
\e[m
1268 \e[32m+
\e[m
\e[32m }
\e[m
1269 \e[32m+
\e[m
\e[41m
\e[m
1270 \e[32m+
\e[m
\e[32m var coords = [];
\e[m
1271 \e[32m+
\e[m
\e[41m
\e[m
1272 \e[32m+
\e[m
\e[32m for(var i = 0, finger; finger = touches[i]; i++){
\e[m
1273 \e[32m+
\e[m
\e[32m coords.push(finger.pageX, finger.pageY);
\e[m
1274 \e[32m+
\e[m
\e[32m }
\e[m
1275 \e[32m+
\e[m
\e[41m
\e[m
1276 \e[32m+
\e[m
\e[32m var x = Math.pow(coords[0] - coords[2], 2);
\e[m
1277 \e[32m+
\e[m
\e[32m var y = Math.pow(coords[1] - coords[3], 2);
\e[m
1278 \e[32m+
\e[m
\e[41m
\e[m
1279 \e[32m+
\e[m
\e[32m this.endDistance = Math.sqrt(x + y);
\e[m
1280 \e[32m+
\e[m
\e[41m
\e[m
1281 \e[32m+
\e[m
\e[32m this.scale = this.startScale + Math.floor(Math.log(this.endDistance / this.startDistance) / Math.log(1.1));
\e[m
1282 \e[32m+
\e[m
\e[41m
\e[m
1283 \e[32m+
\e[m
\e[32m if(!this.zoomable()){
\e[m
1284 \e[32m+
\e[m
\e[32m this.scale = this.startScale;
\e[m
1285 \e[32m+
\e[m
\e[32m return;
\e[m
1286 \e[32m+
\e[m
\e[32m }
\e[m
1287 \e[32m+
\e[m
\e[41m
\e[m
1288 \e[32m+
\e[m
\e[32m this.draw();
\e[m
1289 \e[32m+
\e[m
\e[41m
\e[m
1290 \e[32m+
\e[m
\e[32m },
\e[m
1291 \e[32m+
\e[m
\e[41m
\e[m
1292 \e[32m+
\e[m
\e[32m onTouchEnd : function(e)
\e[m
1293 \e[32m+
\e[m
\e[32m {
\e[m
1294 \e[32m+
\e[m
\e[32m this.pinching = false;
\e[m
1295 \e[32m+
\e[m
\e[32m this.dragable = false;
\e[m
1296 \e[32m+
\e[m
\e[41m
\e[m
1297 \e[32m+
\e[m
\e[32m },
\e[m
1298 \e[32m+
\e[m
\e[41m
\e[m
1299 \e[32m+
\e[m
\e[32m process : function(file, crop)
\e[m
1300 \e[32m+
\e[m
\e[32m {
\e[m
1301 \e[32m+
\e[m
\e[32m if(this.loadMask){
\e[m
1302 \e[32m+
\e[m
\e[32m this.maskEl.mask(this.loadingText);
\e[m
1303 \e[32m+
\e[m
\e[32m }
\e[m
1304 \e[32m+
\e[m
\e[41m
\e[m
1305 \e[32m+
\e[m
\e[32m this.xhr = new XMLHttpRequest();
\e[m
1306 \e[32m+
\e[m
\e[41m
\e[m
1307 \e[32m+
\e[m
\e[32m file.xhr = this.xhr;
\e[m
1309 \e[32m+
\e[m
\e[32m this.xhr.open(this.method, this.url, true);
\e[m
1310 \e[32m+
\e[m
\e[41m
\e[m
1311 \e[32m+
\e[m
\e[32m var headers = {
\e[m
1312 \e[32m+
\e[m
\e[32m "Accept": "application/json",
\e[m
1313 \e[32m+
\e[m
\e[32m "Cache-Control": "no-cache",
\e[m
1314 \e[32m+
\e[m
\e[32m "X-Requested-With": "XMLHttpRequest"
\e[m
1315 \e[32m+
\e[m
\e[32m };
\e[m
1316 \e[32m+
\e[m
\e[41m
\e[m
1317 \e[32m+
\e[m
\e[32m for (var headerName in headers) {
\e[m
1318 \e[32m+
\e[m
\e[32m var headerValue = headers[headerName];
\e[m
1319 \e[32m+
\e[m
\e[32m if (headerValue) {
\e[m
1320 \e[32m+
\e[m
\e[32m this.xhr.setRequestHeader(headerName, headerValue);
\e[m
1321 \e[32m+
\e[m
\e[32m }
\e[m
1322 \e[32m+
\e[m
\e[32m }
\e[m
1323 \e[32m+
\e[m
\e[41m
\e[m
1324 \e[32m+
\e[m
\e[32m var _this = this;
\e[m
1325 \e[32m+
\e[m
\e[41m
\e[m
1326 \e[32m+
\e[m
\e[32m this.xhr.onload = function()
\e[m
1327 \e[32m+
\e[m
\e[32m {
\e[m
1328 \e[32m+
\e[m
\e[32m _this.xhrOnLoad(_this.xhr);
\e[m
1329 \e[32m+
\e[m
\e[32m }
\e[m
1330 \e[32m+
\e[m
\e[41m
\e[m
1331 \e[32m+
\e[m
\e[32m this.xhr.onerror = function()
\e[m
1332 \e[32m+
\e[m
\e[32m {
\e[m
1333 \e[32m+
\e[m
\e[32m _this.xhrOnError(_this.xhr);
\e[m
1334 \e[32m+
\e[m
\e[32m }
\e[m
1335 \e[32m+
\e[m
\e[41m
\e[m
1336 \e[32m+
\e[m
\e[32m var formData = new FormData();
\e[m
1338 \e[32m+
\e[m
\e[32m formData.append('returnHTML', 'NO');
\e[m
1339 \e[32m+
\e[m
\e[41m
\e[m
1340 \e[32m+
\e[m
\e[32m if(crop){
\e[m
1341 \e[32m+
\e[m
\e[32m formData.append('crop', crop);
\e[m
1342 \e[32m+
\e[m
\e[32m }
\e[m
1343 \e[32m+
\e[m
\e[41m
\e[m
1344 \e[32m+
\e[m
\e[32m if(typeof(file) != 'undefined' && (typeof(file.id) == 'undefined' || file.id * 1 < 1)){
\e[m
1345 \e[32m+
\e[m
\e[32m formData.append(this.paramName, file, file.name);
\e[m
1346 \e[32m+
\e[m
\e[32m }
\e[m
1347 \e[32m+
\e[m
\e[41m
\e[m
1348 \e[32m+
\e[m
\e[32m if(typeof(file.filename) != 'undefined'){
\e[m
1349 \e[32m+
\e[m
\e[32m formData.append('filename', file.filename);
\e[m
1350 \e[32m+
\e[m
\e[32m }
\e[m
1351 \e[32m+
\e[m
\e[41m
\e[m
1352 \e[32m+
\e[m
\e[32m if(typeof(file.mimetype) != 'undefined'){
\e[m
1353 \e[32m+
\e[m
\e[32m formData.append('mimetype', file.mimetype);
\e[m
1354 \e[32m+
\e[m
\e[32m }
\e[m
1355 \e[32m+
\e[m
\e[41m
\e[m
1356 \e[32m+
\e[m
\e[32m if(this.fireEvent('arrange', this, formData) != false){
\e[m
1357 \e[32m+
\e[m
\e[32m this.xhr.send(formData);
\e[m
1358 \e[32m+
\e[m
\e[32m };
\e[m
1359 \e[32m+
\e[m
\e[32m },
\e[m
1360 \e[32m+
\e[m
\e[41m
\e[m
1361 \e[32m+
\e[m
\e[32m xhrOnLoad : function(xhr)
\e[m
1362 \e[32m+
\e[m
\e[32m {
\e[m
1363 \e[32m+
\e[m
\e[32m if(this.loadMask){
\e[m
1364 \e[32m+
\e[m
\e[32m this.maskEl.unmask();
\e[m
1365 \e[32m+
\e[m
\e[32m }
\e[m
1366 \e[32m+
\e[m
\e[41m
\e[m
1367 \e[32m+
\e[m
\e[32m if (xhr.readyState !== 4) {
\e[m
1368 \e[32m+
\e[m
\e[32m this.fireEvent('exception', this, xhr);
\e[m
1369 \e[32m+
\e[m
\e[32m return;
\e[m
1370 \e[32m+
\e[m
\e[32m }
\e[m
1372 \e[32m+
\e[m
\e[32m var response = Roo.decode(xhr.responseText);
\e[m
1373 \e[32m+
\e[m
\e[41m
\e[m
1374 \e[32m+
\e[m
\e[32m if(!response.success){
\e[m
1375 \e[32m+
\e[m
\e[32m this.fireEvent('exception', this, xhr);
\e[m
1376 \e[32m+
\e[m
\e[32m return;
\e[m
1377 \e[32m+
\e[m
\e[32m }
\e[m
1378 \e[32m+
\e[m
\e[41m
\e[m
1379 \e[32m+
\e[m
\e[32m var response = Roo.decode(xhr.responseText);
\e[m
1380 \e[32m+
\e[m
\e[41m
\e[m
1381 \e[32m+
\e[m
\e[32m this.fireEvent('upload', this, response);
\e[m
1382 \e[32m+
\e[m
\e[41m
\e[m
1383 \e[32m+
\e[m
\e[32m },
\e[m
1384 \e[32m+
\e[m
\e[41m
\e[m
1385 \e[32m+
\e[m
\e[32m xhrOnError : function()
\e[m
1386 \e[32m+
\e[m
\e[32m {
\e[m
1387 \e[32m+
\e[m
\e[32m if(this.loadMask){
\e[m
1388 \e[32m+
\e[m
\e[32m this.maskEl.unmask();
\e[m
1389 \e[32m+
\e[m
\e[32m }
\e[m
1390 \e[32m+
\e[m
\e[41m
\e[m
1391 \e[32m+
\e[m
\e[32m Roo.log('xhr on error');
\e[m
1392 \e[32m+
\e[m
\e[41m
\e[m
1393 \e[32m+
\e[m
\e[32m var response = Roo.decode(xhr.responseText);
\e[m
1394 \e[32m+
\e[m
\e[41m
\e[m
1395 \e[32m+
\e[m
\e[32m Roo.log(response);
\e[m
1396 \e[32m+
\e[m
\e[41m
\e[m
1397 \e[32m+
\e[m
\e[32m },
\e[m
1398 \e[32m+
\e[m
\e[41m
\e[m
1399 \e[32m+
\e[m
\e[32m prepare : function(file)
\e[m
1400 \e[32m+
\e[m
\e[32m {
\e[m
\e[41m
\e[m
1401 \e[32m+
\e[m
\e[32m if(this.loadMask){
\e[m
1402 \e[32m+
\e[m
\e[32m this.maskEl.mask(this.loadingText);
\e[m
1403 \e[32m+
\e[m
\e[32m }
\e[m
1404 \e[32m+
\e[m
\e[41m
\e[m
1405 \e[32m+
\e[m
\e[32m this.file = false;
\e[m
1406 \e[32m+
\e[m
\e[32m this.exif = {};
\e[m
1407 \e[32m+
\e[m
\e[41m
\e[m
1408 \e[32m+
\e[m
\e[32m if(typeof(file) === 'string'){
\e[m
1409 \e[32m+
\e[m
\e[32m this.loadCanvas(file);
\e[m
1410 \e[32m+
\e[m
\e[32m return;
\e[m
1411 \e[32m+
\e[m
\e[32m }
\e[m
1412 \e[32m+
\e[m
\e[41m
\e[m
1413 \e[32m+
\e[m
\e[32m if(!file || !this.urlAPI){
\e[m
1414 \e[32m+
\e[m
\e[32m return;
\e[m
1415 \e[32m+
\e[m
\e[32m }
\e[m
1416 \e[32m+
\e[m
\e[41m
\e[m
1417 \e[32m+
\e[m
\e[32m this.file = file;
\e[m
1418 \e[32m+
\e[m
\e[32m this.cropType = file.type;
\e[m
1419 \e[32m+
\e[m
\e[41m
\e[m
1420 \e[32m+
\e[m
\e[32m var _this = this;
\e[m
1421 \e[32m+
\e[m
\e[41m
\e[m
1422 \e[32m+
\e[m
\e[32m if(this.fireEvent('prepare', this, this.file) != false){
\e[m
1423 \e[32m+
\e[m
\e[41m
\e[m
1424 \e[32m+
\e[m
\e[32m var reader = new FileReader();
\e[m
1425 \e[32m+
\e[m
\e[41m
\e[m
1426 \e[32m+
\e[m
\e[32m reader.onload = function (e) {
\e[m
1427 \e[32m+
\e[m
\e[32m if (e.target.error) {
\e[m
1428 \e[32m+
\e[m
\e[32m Roo.log(e.target.error);
\e[m
1429 \e[32m+
\e[m
\e[32m return;
\e[m
1430 \e[32m+
\e[m
\e[32m }
\e[m
1431 \e[32m+
\e[m
\e[41m
\e[m
1432 \e[32m+
\e[m
\e[32m var buffer = e.target.result,
\e[m
1433 \e[32m+
\e[m
\e[32m dataView = new DataView(buffer),
\e[m
1434 \e[32m+
\e[m
\e[32m offset = 2,
\e[m
1435 \e[32m+
\e[m
\e[32m maxOffset = dataView.byteLength - 4,
\e[m
1436 \e[32m+
\e[m
\e[32m markerBytes,
\e[m
1437 \e[32m+
\e[m
\e[32m markerLength;
\e[m
1438 \e[32m+
\e[m
\e[41m
\e[m
1439 \e[32m+
\e[m
\e[32m if (dataView.getUint16(0) === 0xffd8) {
\e[m
1440 \e[32m+
\e[m
\e[32m while (offset < maxOffset) {
\e[m
1441 \e[32m+
\e[m
\e[32m markerBytes = dataView.getUint16(offset);
\e[m
1442 \e[32m+
\e[m
\e[41m
\e[m
1443 \e[32m+
\e[m
\e[32m if ((markerBytes >= 0xffe0 && markerBytes <= 0xffef) || markerBytes === 0xfffe) {
\e[m
1444 \e[32m+
\e[m
\e[32m markerLength = dataView.getUint16(offset + 2) + 2;
\e[m
1445 \e[32m+
\e[m
\e[32m if (offset + markerLength > dataView.byteLength) {
\e[m
1446 \e[32m+
\e[m
\e[32m Roo.log('Invalid meta data: Invalid segment size.');
\e[m
1447 \e[32m+
\e[m
\e[32m break;
\e[m
1448 \e[32m+
\e[m
\e[32m }
\e[m
1449 \e[32m+
\e[m
\e[41m
\e[m
1450 \e[32m+
\e[m
\e[32m if(markerBytes == 0xffe1){
\e[m
1451 \e[32m+
\e[m
\e[32m _this.parseExifData(
\e[m
1452 \e[32m+
\e[m
\e[32m dataView,
\e[m
1453 \e[32m+
\e[m
\e[32m offset,
\e[m
1454 \e[32m+
\e[m
\e[32m markerLength
\e[m
1455 \e[32m+
\e[m
\e[32m );
\e[m
1456 \e[32m+
\e[m
\e[32m }
\e[m
1457 \e[32m+
\e[m
\e[41m
\e[m
1458 \e[32m+
\e[m
\e[32m offset += markerLength;
\e[m
1459 \e[32m+
\e[m
\e[41m
\e[m
1460 \e[32m+
\e[m
\e[32m continue;
\e[m
1461 \e[32m+
\e[m
\e[32m }
\e[m
1462 \e[32m+
\e[m
\e[41m
\e[m
1463 \e[32m+
\e[m
\e[32m break;
\e[m
1464 \e[32m+
\e[m
\e[32m }
\e[m
1465 \e[32m+
\e[m
\e[41m
\e[m
1466 \e[32m+
\e[m
\e[32m }
\e[m
1467 \e[32m+
\e[m
\e[41m
\e[m
1468 \e[32m+
\e[m
\e[32m var url = _this.urlAPI.createObjectURL(_this.file);
\e[m
1469 \e[32m+
\e[m
\e[41m
\e[m
1470 \e[32m+
\e[m
\e[32m _this.loadCanvas(url);
\e[m
1471 \e[32m+
\e[m
\e[41m
\e[m
1472 \e[32m+
\e[m
\e[32m return;
\e[m
1473 \e[32m+
\e[m
\e[32m }
\e[m
1474 \e[32m+
\e[m
\e[41m
\e[m
1475 \e[32m+
\e[m
\e[32m reader.readAsArrayBuffer(this.file);
\e[m
1476 \e[32m+
\e[m
\e[41m
\e[m
1477 \e[32m+
\e[m
\e[32m }
\e[m
1478 \e[32m+
\e[m
\e[41m
\e[m
1479 \e[32m+
\e[m
\e[32m },
\e[m
1480 \e[32m+
\e[m
\e[41m
\e[m
1481 \e[32m+
\e[m
\e[32m parseExifData : function(dataView, offset, length)
\e[m
1482 \e[32m+
\e[m
\e[32m {
\e[m
1483 \e[32m+
\e[m
\e[32m var tiffOffset = offset + 10,
\e[m
1484 \e[32m+
\e[m
\e[32m littleEndian,
\e[m
1485 \e[32m+
\e[m
\e[32m dirOffset;
\e[m
1486 \e[32m+
\e[m
\e[41m
\e[m
1487 \e[32m+
\e[m
\e[32m if (dataView.getUint32(offset + 4) !== 0x45786966) {
\e[m
1488 \e[32m+
\e[m
\e[32m // No Exif data, might be XMP data instead
\e[m
1489 \e[32m+
\e[m
\e[32m return;
\e[m
1490 \e[32m+
\e[m
\e[32m }
\e[m
1491 \e[32m+
\e[m
\e[41m
\e[m
1492 \e[32m+
\e[m
\e[32m // Check for the ASCII code for "Exif" (0x45786966):
\e[m
1493 \e[32m+
\e[m
\e[32m if (dataView.getUint32(offset + 4) !== 0x45786966) {
\e[m
1494 \e[32m+
\e[m
\e[32m // No Exif data, might be XMP data instead
\e[m
1495 \e[32m+
\e[m
\e[32m return;
\e[m
1496 \e[32m+
\e[m
\e[32m }
\e[m
1497 \e[32m+
\e[m
\e[32m if (tiffOffset + 8 > dataView.byteLength) {
\e[m
1498 \e[32m+
\e[m
\e[32m Roo.log('Invalid Exif data: Invalid segment size.');
\e[m
1499 \e[32m+
\e[m
\e[32m return;
\e[m
1500 \e[32m+
\e[m
\e[32m }
\e[m
1501 \e[32m+
\e[m
\e[32m // Check for the two null bytes:
\e[m
1502 \e[32m+
\e[m
\e[32m if (dataView.getUint16(offset + 8) !== 0x0000) {
\e[m
1503 \e[32m+
\e[m
\e[32m Roo.log('Invalid Exif data: Missing byte alignment offset.');
\e[m
1504 \e[32m+
\e[m
\e[32m return;
\e[m
1505 \e[32m+
\e[m
\e[32m }
\e[m
1506 \e[32m+
\e[m
\e[32m // Check the byte alignment:
\e[m
1507 \e[32m+
\e[m
\e[32m switch (dataView.getUint16(tiffOffset)) {
\e[m
1508 \e[32m+
\e[m
\e[32m case 0x4949:
\e[m
1509 \e[32m+
\e[m
\e[32m littleEndian = true;
\e[m
1510 \e[32m+
\e[m
\e[32m break;
\e[m
1511 \e[32m+
\e[m
\e[32m case 0x4D4D:
\e[m
1512 \e[32m+
\e[m
\e[32m littleEndian = false;
\e[m
1513 \e[32m+
\e[m
\e[32m break;
\e[m
1514 \e[32m+
\e[m
\e[32m default:
\e[m
1515 \e[32m+
\e[m
\e[32m Roo.log('Invalid Exif data: Invalid byte alignment marker.');
\e[m
1516 \e[32m+
\e[m
\e[32m return;
\e[m
1517 \e[32m+
\e[m
\e[32m }
\e[m
1518 \e[32m+
\e[m
\e[32m // Check for the TIFF tag marker (0x002A):
\e[m
1519 \e[32m+
\e[m
\e[32m if (dataView.getUint16(tiffOffset + 2, littleEndian) !== 0x002A) {
\e[m
1520 \e[32m+
\e[m
\e[32m Roo.log('Invalid Exif data: Missing TIFF marker.');
\e[m
1521 \e[32m+
\e[m
\e[32m return;
\e[m
1522 \e[32m+
\e[m
\e[32m }
\e[m
1523 \e[32m+
\e[m
\e[32m // Retrieve the directory offset bytes, usually 0x00000008 or 8 decimal:
\e[m
1524 \e[32m+
\e[m
\e[32m dirOffset = dataView.getUint32(tiffOffset + 4, littleEndian);
\e[m
1525 \e[32m+
\e[m
\e[41m
\e[m
1526 \e[32m+
\e[m
\e[32m this.parseExifTags(
\e[m
1527 \e[32m+
\e[m
\e[32m dataView,
\e[m
1528 \e[32m+
\e[m
\e[32m tiffOffset,
\e[m
1529 \e[32m+
\e[m
\e[32m tiffOffset + dirOffset,
\e[m
1530 \e[32m+
\e[m
\e[32m littleEndian
\e[m
1531 \e[32m+
\e[m
\e[32m );
\e[m
1532 \e[32m+
\e[m
\e[32m },
\e[m
1533 \e[32m+
\e[m
\e[41m
\e[m
1534 \e[32m+
\e[m
\e[32m parseExifTags : function(dataView, tiffOffset, dirOffset, littleEndian)
\e[m
1535 \e[32m+
\e[m
\e[32m {
\e[m
1536 \e[32m+
\e[m
\e[32m var tagsNumber,
\e[m
1537 \e[32m+
\e[m
\e[32m dirEndOffset,
\e[m
1538 \e[32m+
\e[m
\e[32m i;
\e[m
1539 \e[32m+
\e[m
\e[32m if (dirOffset + 6 > dataView.byteLength) {
\e[m
1540 \e[32m+
\e[m
\e[32m Roo.log('Invalid Exif data: Invalid directory offset.');
\e[m
1541 \e[32m+
\e[m
\e[32m return;
\e[m
1542 \e[32m+
\e[m
\e[32m }
\e[m
1543 \e[32m+
\e[m
\e[32m tagsNumber = dataView.getUint16(dirOffset, littleEndian);
\e[m
1544 \e[32m+
\e[m
\e[32m dirEndOffset = dirOffset + 2 + 12 * tagsNumber;
\e[m
1545 \e[32m+
\e[m
\e[32m if (dirEndOffset + 4 > dataView.byteLength) {
\e[m
1546 \e[32m+
\e[m
\e[32m Roo.log('Invalid Exif data: Invalid directory size.');
\e[m
1547 \e[32m+
\e[m
\e[32m return;
\e[m
1548 \e[32m+
\e[m
\e[32m }
\e[m
1549 \e[32m+
\e[m
\e[32m for (i = 0; i < tagsNumber; i += 1) {
\e[m
1550 \e[32m+
\e[m
\e[32m this.parseExifTag(
\e[m
1551 \e[32m+
\e[m
\e[32m dataView,
\e[m
1552 \e[32m+
\e[m
\e[32m tiffOffset,
\e[m
1553 \e[32m+
\e[m
\e[32m dirOffset + 2 + 12 * i, // tag offset
\e[m
1554 \e[32m+
\e[m
\e[32m littleEndian
\e[m
1555 \e[32m+
\e[m
\e[32m );
\e[m
1556 \e[32m+
\e[m
\e[32m }
\e[m
1557 \e[32m+
\e[m
\e[32m // Return the offset to the next directory:
\e[m
1558 \e[32m+
\e[m
\e[32m return dataView.getUint32(dirEndOffset, littleEndian);
\e[m
1559 \e[32m+
\e[m
\e[32m },
\e[m
1560 \e[32m+
\e[m
\e[41m
\e[m
1561 \e[32m+
\e[m
\e[32m parseExifTag : function (dataView, tiffOffset, offset, littleEndian)
\e[m
\e[41m
\e[m
1562 \e[32m+
\e[m
\e[32m {
\e[m
1563 \e[32m+
\e[m
\e[32m var tag = dataView.getUint16(offset, littleEndian);
\e[m
1564 \e[32m+
\e[m
\e[41m
\e[m
1565 \e[32m+
\e[m
\e[32m this.exif[tag] = this.getExifValue(
\e[m
1566 \e[32m+
\e[m
\e[32m dataView,
\e[m
1567 \e[32m+
\e[m
\e[32m tiffOffset,
\e[m
1568 \e[32m+
\e[m
\e[32m offset,
\e[m
1569 \e[32m+
\e[m
\e[32m dataView.getUint16(offset + 2, littleEndian), // tag type
\e[m
1570 \e[32m+
\e[m
\e[32m dataView.getUint32(offset + 4, littleEndian), // tag length
\e[m
1571 \e[32m+
\e[m
\e[32m littleEndian
\e[m
1572 \e[32m+
\e[m
\e[32m );
\e[m
1573 \e[32m+
\e[m
\e[32m },
\e[m
1574 \e[32m+
\e[m
\e[41m
\e[m
1575 \e[32m+
\e[m
\e[32m getExifValue : function (dataView, tiffOffset, offset, type, length, littleEndian)
\e[m
1576 \e[32m+
\e[m
\e[32m {
\e[m
1577 \e[32m+
\e[m
\e[32m var tagType = Roo.dialog.UploadCropbox.exifTagTypes[type],
\e[m
1578 \e[32m+
\e[m
\e[32m tagSize,
\e[m
1579 \e[32m+
\e[m
\e[32m dataOffset,
\e[m
1580 \e[32m+
\e[m
\e[32m values,
\e[m
1581 \e[32m+
\e[m
\e[32m i,
\e[m
1582 \e[32m+
\e[m
\e[32m str,
\e[m
1583 \e[32m+
\e[m
\e[32m c;
\e[m
1584 \e[32m+
\e[m
\e[41m
\e[m
1585 \e[32m+
\e[m
\e[32m if (!tagType) {
\e[m
1586 \e[32m+
\e[m
\e[32m Roo.log('Invalid Exif data: Invalid tag type.');
\e[m
1587 \e[32m+
\e[m
\e[32m return;
\e[m
1588 \e[32m+
\e[m
\e[32m }
\e[m
1589 \e[32m+
\e[m
\e[41m
\e[m
1590 \e[32m+
\e[m
\e[32m tagSize = tagType.size * length;
\e[m
1591 \e[32m+
\e[m
\e[32m // Determine if the value is contained in the dataOffset bytes,
\e[m
1592 \e[32m+
\e[m
\e[32m // or if the value at the dataOffset is a pointer to the actual data:
\e[m
1593 \e[32m+
\e[m
\e[32m dataOffset = tagSize > 4 ?
\e[m
1594 \e[32m+
\e[m
\e[32m tiffOffset + dataView.getUint32(offset + 8, littleEndian) : (offset + 8);
\e[m
1595 \e[32m+
\e[m
\e[32m if (dataOffset + tagSize > dataView.byteLength) {
\e[m
1596 \e[32m+
\e[m
\e[32m Roo.log('Invalid Exif data: Invalid data offset.');
\e[m
1597 \e[32m+
\e[m
\e[32m return;
\e[m
1598 \e[32m+
\e[m
\e[32m }
\e[m
1599 \e[32m+
\e[m
\e[32m if (length === 1) {
\e[m
1600 \e[32m+
\e[m
\e[32m return tagType.getValue(dataView, dataOffset, littleEndian);
\e[m
1601 \e[32m+
\e[m
\e[32m }
\e[m
1602 \e[32m+
\e[m
\e[32m values = [];
\e[m
1603 \e[32m+
\e[m
\e[32m for (i = 0; i < length; i += 1) {
\e[m
1604 \e[32m+
\e[m
\e[32m values[i] = tagType.getValue(dataView, dataOffset + i * tagType.size, littleEndian);
\e[m
1605 \e[32m+
\e[m
\e[32m }
\e[m
1606 \e[32m+
\e[m
\e[41m
\e[m
1607 \e[32m+
\e[m
\e[32m if (tagType.ascii) {
\e[m
1608 \e[32m+
\e[m
\e[32m str = '';
\e[m
1609 \e[32m+
\e[m
\e[32m // Concatenate the chars:
\e[m
1610 \e[32m+
\e[m
\e[32m for (i = 0; i < values.length; i += 1) {
\e[m
1611 \e[32m+
\e[m
\e[32m c = values[i];
\e[m
1612 \e[32m+
\e[m
\e[32m // Ignore the terminating NULL byte(s):
\e[m
1613 \e[32m+
\e[m
\e[32m if (c === '\u0000') {
\e[m
1614 \e[32m+
\e[m
\e[32m break;
\e[m
1615 \e[32m+
\e[m
\e[32m }
\e[m
1616 \e[32m+
\e[m
\e[32m str += c;
\e[m
1617 \e[32m+
\e[m
\e[32m }
\e[m
1618 \e[32m+
\e[m
\e[32m return str;
\e[m
1619 \e[32m+
\e[m
\e[32m }
\e[m
1620 \e[32m+
\e[m
\e[32m return values;
\e[m
1621 \e[32m+
\e[m
\e[32m }
\e[m
1622 \e[32m+
\e[m
\e[41m
\e[m
1623 \e[32m+
\e[m
\e[32m});
\e[m
1625 \e[32m+
\e[m
\e[32mRoo.apply(Roo.dialog.UploadCropbox, {
\e[m
1626 \e[32m+
\e[m
\e[32m tags : {
\e[m
1627 \e[32m+
\e[m
\e[32m 'Orientation': 0x0112
\e[m
1628 \e[32m+
\e[m
\e[32m },
\e[m
1629 \e[32m+
\e[m
\e[41m
\e[m
1630 \e[32m+
\e[m
\e[32m Orientation: {
\e[m
1631 \e[32m+
\e[m
\e[32m 1: 0, //'top-left',
\e[m
1632 \e[32m+
\e[m
\e[32m// 2: 'top-right',
\e[m
1633 \e[32m+
\e[m
\e[32m 3: 180, //'bottom-right',
\e[m
1634 \e[32m+
\e[m
\e[32m// 4: 'bottom-left',
\e[m
1635 \e[32m+
\e[m
\e[32m// 5: 'left-top',
\e[m
1636 \e[32m+
\e[m
\e[32m 6: 90, //'right-top',
\e[m
1637 \e[32m+
\e[m
\e[32m// 7: 'right-bottom',
\e[m
1638 \e[32m+
\e[m
\e[32m 8: 270 //'left-bottom'
\e[m
1639 \e[32m+
\e[m
\e[32m },
\e[m
1640 \e[32m+
\e[m
\e[41m
\e[m
1641 \e[32m+
\e[m
\e[32m exifTagTypes : {
\e[m
1642 \e[32m+
\e[m
\e[32m // byte, 8-bit unsigned int:
\e[m
1643 \e[32m+
\e[m
\e[32m 1: {
\e[m
1644 \e[32m+
\e[m
\e[32m getValue: function (dataView, dataOffset) {
\e[m
1645 \e[32m+
\e[m
\e[32m return dataView.getUint8(dataOffset);
\e[m
1646 \e[32m+
\e[m
\e[32m },
\e[m
1647 \e[32m+
\e[m
\e[32m size: 1
\e[m
1648 \e[32m+
\e[m
\e[32m },
\e[m
1649 \e[32m+
\e[m
\e[32m // ascii, 8-bit byte:
\e[m
1650 \e[32m+
\e[m
\e[32m 2: {
\e[m
1651 \e[32m+
\e[m
\e[32m getValue: function (dataView, dataOffset) {
\e[m
1652 \e[32m+
\e[m
\e[32m return String.fromCharCode(dataView.getUint8(dataOffset));
\e[m
1653 \e[32m+
\e[m
\e[32m },
\e[m
1654 \e[32m+
\e[m
\e[32m size: 1,
\e[m
1655 \e[32m+
\e[m
\e[32m ascii: true
\e[m
1656 \e[32m+
\e[m
\e[32m },
\e[m
1657 \e[32m+
\e[m
\e[32m // short, 16 bit int:
\e[m
1658 \e[32m+
\e[m
\e[32m 3: {
\e[m
1659 \e[32m+
\e[m
\e[32m getValue: function (dataView, dataOffset, littleEndian) {
\e[m
1660 \e[32m+
\e[m
\e[32m return dataView.getUint16(dataOffset, littleEndian);
\e[m
1661 \e[32m+
\e[m
\e[32m },
\e[m
1662 \e[32m+
\e[m
\e[32m size: 2
\e[m
1663 \e[32m+
\e[m
\e[32m },
\e[m
1664 \e[32m+
\e[m
\e[32m // long, 32 bit int:
\e[m
1665 \e[32m+
\e[m
\e[32m 4: {
\e[m
1666 \e[32m+
\e[m
\e[32m getValue: function (dataView, dataOffset, littleEndian) {
\e[m
1667 \e[32m+
\e[m
\e[32m return dataView.getUint32(dataOffset, littleEndian);
\e[m
1668 \e[32m+
\e[m
\e[32m },
\e[m
1669 \e[32m+
\e[m
\e[32m size: 4
\e[m
1670 \e[32m+
\e[m
\e[32m },
\e[m
1671 \e[32m+
\e[m
\e[32m // rational = two long values, first is numerator, second is denominator:
\e[m
1672 \e[32m+
\e[m
\e[32m 5: {
\e[m
1673 \e[32m+
\e[m
\e[32m getValue: function (dataView, dataOffset, littleEndian) {
\e[m
1674 \e[32m+
\e[m
\e[32m return dataView.getUint32(dataOffset, littleEndian) /
\e[m
1675 \e[32m+
\e[m
\e[32m dataView.getUint32(dataOffset + 4, littleEndian);
\e[m
1676 \e[32m+
\e[m
\e[32m },
\e[m
1677 \e[32m+
\e[m
\e[32m size: 8
\e[m
1678 \e[32m+
\e[m
\e[32m },
\e[m
1679 \e[32m+
\e[m
\e[32m // slong, 32 bit signed int:
\e[m
1680 \e[32m+
\e[m
\e[32m 9: {
\e[m
1681 \e[32m+
\e[m
\e[32m getValue: function (dataView, dataOffset, littleEndian) {
\e[m
1682 \e[32m+
\e[m
\e[32m return dataView.getInt32(dataOffset, littleEndian);
\e[m
1683 \e[32m+
\e[m
\e[32m },
\e[m
1684 \e[32m+
\e[m
\e[32m size: 4
\e[m
1685 \e[32m+
\e[m
\e[32m },
\e[m
1686 \e[32m+
\e[m
\e[32m // srational, two slongs, first is numerator, second is denominator:
\e[m
1687 \e[32m+
\e[m
\e[32m 10: {
\e[m
1688 \e[32m+
\e[m
\e[32m getValue: function (dataView, dataOffset, littleEndian) {
\e[m
1689 \e[32m+
\e[m
\e[32m return dataView.getInt32(dataOffset, littleEndian) /
\e[m
1690 \e[32m+
\e[m
\e[32m dataView.getInt32(dataOffset + 4, littleEndian);
\e[m
1691 \e[32m+
\e[m
\e[32m },
\e[m
1692 \e[32m+
\e[m
\e[32m size: 8
\e[m
1693 \e[32m+
\e[m
\e[32m }
\e[m
1694 \e[32m+
\e[m
\e[32m },
\e[m
1695 \e[32m+
\e[m
\e[41m
\e[m
1696 \e[32m+
\e[m
\e[32m footer : {
\e[m
1697 \e[32m+
\e[m
\e[32m STANDARD : [
\e[m
1698 \e[32m+
\e[m
\e[32m {
\e[m
1699 \e[32m+
\e[m
\e[32m tag : 'div',
\e[m
1700 \e[32m+
\e[m
\e[32m cls : 'btn-group roo-upload-cropbox-rotate-left',
\e[m
1701 \e[32m+
\e[m
\e[32m action : 'rotate-left',
\e[m
1702 \e[32m+
\e[m
\e[32m cn : [
\e[m
1703 \e[32m+
\e[m
\e[32m {
\e[m
1704 \e[32m+
\e[m
\e[32m tag : 'button',
\e[m
1705 \e[32m+
\e[m
\e[32m cls : 'btn btn-default',
\e[m
1706 \e[32m+
\e[m
\e[32m html : '<i class="fa fa-undo"></i>'
\e[m
1707 \e[32m+
\e[m
\e[32m }
\e[m
1708 \e[32m+
\e[m
\e[32m ]
\e[m
1709 \e[32m+
\e[m
\e[32m },
\e[m
1710 \e[32m+
\e[m
\e[32m {
\e[m
1711 \e[32m+
\e[m
\e[32m tag : 'div',
\e[m
1712 \e[32m+
\e[m
\e[32m cls : 'btn-group roo-upload-cropbox-picture',
\e[m
1713 \e[32m+
\e[m
\e[32m action : 'picture',
\e[m
1714 \e[32m+
\e[m
\e[32m cn : [
\e[m
1715 \e[32m+
\e[m
\e[32m {
\e[m
1716 \e[32m+
\e[m
\e[32m tag : 'button',
\e[m
1717 \e[32m+
\e[m
\e[32m cls : 'btn btn-default',
\e[m
1718 \e[32m+
\e[m
\e[32m html : '<i class="fa fa-picture-o"></i>'
\e[m
1719 \e[32m+
\e[m
\e[32m }
\e[m
1720 \e[32m+
\e[m
\e[32m ]
\e[m
1721 \e[32m+
\e[m
\e[32m },
\e[m
1722 \e[32m+
\e[m
\e[32m {
\e[m
1723 \e[32m+
\e[m
\e[32m tag : 'div',
\e[m
1724 \e[32m+
\e[m
\e[32m cls : 'btn-group roo-upload-cropbox-rotate-right',
\e[m
1725 \e[32m+
\e[m
\e[32m action : 'rotate-right',
\e[m
1726 \e[32m+
\e[m
\e[32m cn : [
\e[m
1727 \e[32m+
\e[m
\e[32m {
\e[m
1728 \e[32m+
\e[m
\e[32m tag : 'button',
\e[m
1729 \e[32m+
\e[m
\e[32m cls : 'btn btn-default',
\e[m
1730 \e[32m+
\e[m
\e[32m html : '<i class="fa fa-repeat"></i>'
\e[m
1731 \e[32m+
\e[m
\e[32m }
\e[m
1732 \e[32m+
\e[m
\e[32m ]
\e[m
1733 \e[32m+
\e[m
\e[32m }
\e[m
1734 \e[32m+
\e[m
\e[32m ],
\e[m
1735 \e[32m+
\e[m
\e[32m DOCUMENT : [
\e[m
1736 \e[32m+
\e[m
\e[32m {
\e[m
1737 \e[32m+
\e[m
\e[32m tag : 'div',
\e[m
1738 \e[32m+
\e[m
\e[32m cls : 'btn-group roo-upload-cropbox-rotate-left',
\e[m
1739 \e[32m+
\e[m
\e[32m action : 'rotate-left',
\e[m
1740 \e[32m+
\e[m
\e[32m cn : [
\e[m
1741 \e[32m+
\e[m
\e[32m {
\e[m
1742 \e[32m+
\e[m
\e[32m tag : 'button',
\e[m
1743 \e[32m+
\e[m
\e[32m cls : 'btn btn-default',
\e[m
1744 \e[32m+
\e[m
\e[32m html : '<i class="fa fa-undo"></i>'
\e[m
1745 \e[32m+
\e[m
\e[32m }
\e[m
1746 \e[32m+
\e[m
\e[32m ]
\e[m
1747 \e[32m+
\e[m
\e[32m },
\e[m
1748 \e[32m+
\e[m
\e[32m {
\e[m
1749 \e[32m+
\e[m
\e[32m tag : 'div',
\e[m
1750 \e[32m+
\e[m
\e[32m cls : 'btn-group roo-upload-cropbox-download',
\e[m
1751 \e[32m+
\e[m
\e[32m action : 'download',
\e[m
1752 \e[32m+
\e[m
\e[32m cn : [
\e[m
1753 \e[32m+
\e[m
\e[32m {
\e[m
1754 \e[32m+
\e[m
\e[32m tag : 'button',
\e[m
1755 \e[32m+
\e[m
\e[32m cls : 'btn btn-default',
\e[m
1756 \e[32m+
\e[m
\e[32m html : '<i class="fa fa-download"></i>'
\e[m
1757 \e[32m+
\e[m
\e[32m }
\e[m
1758 \e[32m+
\e[m
\e[32m ]
\e[m
1759 \e[32m+
\e[m
\e[32m },
\e[m
1760 \e[32m+
\e[m
\e[32m {
\e[m
1761 \e[32m+
\e[m
\e[32m tag : 'div',
\e[m
1762 \e[32m+
\e[m
\e[32m cls : 'btn-group roo-upload-cropbox-crop',
\e[m
1763 \e[32m+
\e[m
\e[32m action : 'crop',
\e[m
1764 \e[32m+
\e[m
\e[32m cn : [
\e[m
1765 \e[32m+
\e[m
\e[32m {
\e[m
1766 \e[32m+
\e[m
\e[32m tag : 'button',
\e[m
1767 \e[32m+
\e[m
\e[32m cls : 'btn btn-default',
\e[m
1768 \e[32m+
\e[m
\e[32m html : '<i class="fa fa-crop"></i>'
\e[m
1769 \e[32m+
\e[m
\e[32m }
\e[m
1770 \e[32m+
\e[m
\e[32m ]
\e[m
1771 \e[32m+
\e[m
\e[32m },
\e[m
1772 \e[32m+
\e[m
\e[32m {
\e[m
1773 \e[32m+
\e[m
\e[32m tag : 'div',
\e[m
1774 \e[32m+
\e[m
\e[32m cls : 'btn-group roo-upload-cropbox-trash',
\e[m
1775 \e[32m+
\e[m
\e[32m action : 'trash',
\e[m
1776 \e[32m+
\e[m
\e[32m cn : [
\e[m
1777 \e[32m+
\e[m
\e[32m {
\e[m
1778 \e[32m+
\e[m
\e[32m tag : 'button',
\e[m
1779 \e[32m+
\e[m
\e[32m cls : 'btn btn-default',
\e[m
1780 \e[32m+
\e[m
\e[32m html : '<i class="fa fa-trash"></i>'
\e[m
1781 \e[32m+
\e[m
\e[32m }
\e[m
1782 \e[32m+
\e[m
\e[32m ]
\e[m
1783 \e[32m+
\e[m
\e[32m },
\e[m
1784 \e[32m+
\e[m
\e[32m {
\e[m
1785 \e[32m+
\e[m
\e[32m tag : 'div',
\e[m
1786 \e[32m+
\e[m
\e[32m cls : 'btn-group roo-upload-cropbox-rotate-right',
\e[m
1787 \e[32m+
\e[m
\e[32m action : 'rotate-right',
\e[m
1788 \e[32m+
\e[m
\e[32m cn : [
\e[m
1789 \e[32m+
\e[m
\e[32m {
\e[m
1790 \e[32m+
\e[m
\e[32m tag : 'button',
\e[m
1791 \e[32m+
\e[m
\e[32m cls : 'btn btn-default',
\e[m
1792 \e[32m+
\e[m
\e[32m html : '<i class="fa fa-repeat"></i>'
\e[m
1793 \e[32m+
\e[m
\e[32m }
\e[m
1794 \e[32m+
\e[m
\e[32m ]
\e[m
1795 \e[32m+
\e[m
\e[32m }
\e[m
1796 \e[32m+
\e[m
\e[32m ],
\e[m
1797 \e[32m+
\e[m
\e[32m ROTATOR : [
\e[m
1798 \e[32m+
\e[m
\e[32m {
\e[m
1799 \e[32m+
\e[m
\e[32m tag : 'div',
\e[m
1800 \e[32m+
\e[m
\e[32m cls : 'btn-group roo-upload-cropbox-rotate-left',
\e[m
1801 \e[32m+
\e[m
\e[32m action : 'rotate-left',
\e[m
1802 \e[32m+
\e[m
\e[32m cn : [
\e[m
1803 \e[32m+
\e[m
\e[32m {
\e[m
1804 \e[32m+
\e[m
\e[32m tag : 'button',
\e[m
1805 \e[32m+
\e[m
\e[32m cls : 'btn btn-default',
\e[m
1806 \e[32m+
\e[m
\e[32m html : '<i class="fa fa-undo"></i>'
\e[m
1807 \e[32m+
\e[m
\e[32m }
\e[m
1808 \e[32m+
\e[m
\e[32m ]
\e[m
1809 \e[32m+
\e[m
\e[32m },
\e[m
1810 \e[32m+
\e[m
\e[32m {
\e[m
1811 \e[32m+
\e[m
\e[32m tag : 'div',
\e[m
1812 \e[32m+
\e[m
\e[32m cls : 'btn-group roo-upload-cropbox-rotate-right',
\e[m
1813 \e[32m+
\e[m
\e[32m action : 'rotate-right',
\e[m
1814 \e[32m+
\e[m
\e[32m cn : [
\e[m
1815 \e[32m+
\e[m
\e[32m {
\e[m
1816 \e[32m+
\e[m
\e[32m tag : 'button',
\e[m
1817 \e[32m+
\e[m
\e[32m cls : 'btn btn-default',
\e[m
1818 \e[32m+
\e[m
\e[32m html : '<i class="fa fa-repeat"></i>'
\e[m
1819 \e[32m+
\e[m
\e[32m }
\e[m
1820 \e[32m+
\e[m
\e[32m ]
\e[m
1821 \e[32m+
\e[m
\e[32m }
\e[m
1822 \e[32m+
\e[m
\e[32m ]
\e[m
1823 \e[32m+
\e[m
\e[32m }
\e[m
1824 \e[32m+
\e[m
\e[32m});
\e[m
1825 \e[1mdiff --git a/buildSDK/dependancy_ui.txt b/buildSDK/dependancy_ui.txt
\e[m
1826 \e[1mindex 5a8e5a9ac5..f89656e412 100644
\e[m
1827 \e[1m--- a/buildSDK/dependancy_ui.txt
\e[m
1828 \e[1m+++ b/buildSDK/dependancy_ui.txt
\e[m
1829 \e[36m@@ -197,3 +197,6 @@
\e[m
\e[mRoo.XTemplate
\e[m
1831 // is this ready yet? - is it used?
\e[m
1834 \e[32m+
\e[m
\e[32mRoo.dialog.namespace
\e[m
1835 \e[32m+
\e[m
\e[32mRoo.dialog.UploadCropbox
\e[m
1836 \e[1mdiff --git a/css/alert.css b/css/alert.css
\e[m
1837 \e[1mnew file mode 100644
\e[m
1838 \e[1mindex 0000000000..0cc7751f02
\e[m
1839 \e[1m--- /dev/null
\e[m
1840 \e[1m+++ b/css/alert.css
\e[m
1841 \e[36m@@ -0,0 +1,75 @@
\e[m
1842 \e[32m+
\e[m
\e[32m.alert {
\e[m
1843 \e[32m+
\e[m
\e[32m padding: 15px;
\e[m
1844 \e[32m+
\e[m
\e[32m margin-bottom: 20px;
\e[m
1845 \e[32m+
\e[m
\e[32m border: 1px solid transparent;
\e[m
1846 \e[32m+
\e[m
\e[32m border-radius: 4px;
\e[m
1847 \e[32m+
\e[m
\e[32m}
\e[m
1848 \e[32m+
\e[m
\e[32m.alert h4 {
\e[m
1849 \e[32m+
\e[m
\e[32m margin-top: 0;
\e[m
1850 \e[32m+
\e[m
\e[32m color: inherit;
\e[m
1851 \e[32m+
\e[m
\e[32m}
\e[m
1852 \e[32m+
\e[m
\e[32m.alert .alert-link {
\e[m
1853 \e[32m+
\e[m
\e[32m font-weight: bold;
\e[m
1854 \e[32m+
\e[m
\e[32m}
\e[m
1855 \e[32m+
\e[m
\e[32m.alert > p,
\e[m
1856 \e[32m+
\e[m
\e[32m.alert > ul {
\e[m
1857 \e[32m+
\e[m
\e[32m margin-bottom: 0;
\e[m
1858 \e[32m+
\e[m
\e[32m}
\e[m
1859 \e[32m+
\e[m
\e[32m.alert > p + p {
\e[m
1860 \e[32m+
\e[m
\e[32m margin-top: 5px;
\e[m
1861 \e[32m+
\e[m
\e[32m}
\e[m
1862 \e[32m+
\e[m
\e[32m.alert-dismissable,
\e[m
1863 \e[32m+
\e[m
\e[32m.alert-dismissible {
\e[m
1864 \e[32m+
\e[m
\e[32m padding-right: 35px;
\e[m
1865 \e[32m+
\e[m
\e[32m}
\e[m
1866 \e[32m+
\e[m
\e[32m.alert-dismissable .close,
\e[m
1867 \e[32m+
\e[m
\e[32m.alert-dismissible .close {
\e[m
1868 \e[32m+
\e[m
\e[32m position: relative;
\e[m
1869 \e[32m+
\e[m
\e[32m top: -2px;
\e[m
1870 \e[32m+
\e[m
\e[32m right: -21px;
\e[m
1871 \e[32m+
\e[m
\e[32m color: inherit;
\e[m
1872 \e[32m+
\e[m
\e[32m}
\e[m
1873 \e[32m+
\e[m
\e[32m.alert-success {
\e[m
1874 \e[32m+
\e[m
\e[32m background-color: #dff0d8;
\e[m
1875 \e[32m+
\e[m
\e[32m border-color: #d6e9c6;
\e[m
1876 \e[32m+
\e[m
\e[32m color: #3c763d;
\e[m
1877 \e[32m+
\e[m
\e[32m}
\e[m
1878 \e[32m+
\e[m
\e[32m.alert-success hr {
\e[m
1879 \e[32m+
\e[m
\e[32m border-top-color: #c9e2b3;
\e[m
1880 \e[32m+
\e[m
\e[32m}
\e[m
1881 \e[32m+
\e[m
\e[32m.alert-success .alert-link {
\e[m
1882 \e[32m+
\e[m
\e[32m color: #2b542c;
\e[m
1883 \e[32m+
\e[m
\e[32m}
\e[m
1884 \e[32m+
\e[m
\e[32m.alert-info {
\e[m
1885 \e[32m+
\e[m
\e[32m background-color: #d9edf7;
\e[m
1886 \e[32m+
\e[m
\e[32m border-color: #bce8f1;
\e[m
1887 \e[32m+
\e[m
\e[32m color: #31708f;
\e[m
1888 \e[32m+
\e[m
\e[32m}
\e[m
1889 \e[32m+
\e[m
\e[32m.alert-info hr {
\e[m
1890 \e[32m+
\e[m
\e[32m border-top-color: #a6e1ec;
\e[m
1891 \e[32m+
\e[m
\e[32m}
\e[m
1892 \e[32m+
\e[m
\e[32m.alert-info .alert-link {
\e[m
1893 \e[32m+
\e[m
\e[32m color: #245269;
\e[m
1894 \e[32m+
\e[m
\e[32m}
\e[m
1895 \e[32m+
\e[m
\e[32m.alert-warning {
\e[m
1896 \e[32m+
\e[m
\e[32m background-color: #fcf8e3;
\e[m
1897 \e[32m+
\e[m
\e[32m border-color: #faebcc;
\e[m
1898 \e[32m+
\e[m
\e[32m color: #8a6d3b;
\e[m
1899 \e[32m+
\e[m
\e[32m}
\e[m
1900 \e[32m+
\e[m
\e[32m.alert-warning hr {
\e[m
1901 \e[32m+
\e[m
\e[32m border-top-color: #f7e1b5;
\e[m
1902 \e[32m+
\e[m
\e[32m}
\e[m
1903 \e[32m+
\e[m
\e[32m.alert-warning .alert-link {
\e[m
1904 \e[32m+
\e[m
\e[32m color: #66512c;
\e[m
1905 \e[32m+
\e[m
\e[32m}
\e[m
1906 \e[32m+
\e[m
\e[32m.alert-danger {
\e[m
1907 \e[32m+
\e[m
\e[32m background-color: #f2dede;
\e[m
1908 \e[32m+
\e[m
\e[32m border-color: #ebccd1;
\e[m
1909 \e[32m+
\e[m
\e[32m color: #a94442;
\e[m
1910 \e[32m+
\e[m
\e[32m}
\e[m
1911 \e[32m+
\e[m
\e[32m.alert-danger hr {
\e[m
1912 \e[32m+
\e[m
\e[32m border-top-color: #e4b9c0;
\e[m
1913 \e[32m+
\e[m
\e[32m}
\e[m
1914 \e[32m+
\e[m
\e[32m.alert-danger .alert-link {
\e[m
1915 \e[32m+
\e[m
\e[32m color: #843534;
\e[m
1916 \e[32m+
\e[m
\e[32m}
\e[m
1917 \ No newline at end of file
\e[m
1918 \e[1mdiff --git a/css/button-groups.css b/css/button-groups.css
\e[m
1919 \e[1mnew file mode 100644
\e[m
1920 \e[1mindex 0000000000..b725faf99b
\e[m
1921 \e[1m--- /dev/null
\e[m
1922 \e[1m+++ b/css/button-groups.css
\e[m
1923 \e[36m@@ -0,0 +1,171 @@
\e[m
1924 \e[32m+
\e[m
\e[32m.btn-group,
\e[m
1925 \e[32m+
\e[m
\e[32m.btn-group-vertical {
\e[m
1926 \e[32m+
\e[m
\e[32m position: relative;
\e[m
1927 \e[32m+
\e[m
\e[32m display: inline-block;
\e[m
1928 \e[32m+
\e[m
\e[32m vertical-align: middle;
\e[m
1929 \e[32m+
\e[m
\e[32m}
\e[m
1930 \e[32m+
\e[m
\e[32m.btn-group > .btn,
\e[m
1931 \e[32m+
\e[m
\e[32m.btn-group-vertical > .btn {
\e[m
1932 \e[32m+
\e[m
\e[32m position: relative;
\e[m
1933 \e[32m+
\e[m
\e[32m float: left;
\e[m
1934 \e[32m+
\e[m
\e[32m}
\e[m
1935 \e[32m+
\e[m
\e[32m.btn-group > .btn:hover,
\e[m
1936 \e[32m+
\e[m
\e[32m.btn-group-vertical > .btn:hover,
\e[m
1937 \e[32m+
\e[m
\e[32m.btn-group > .btn:focus,
\e[m
1938 \e[32m+
\e[m
\e[32m.btn-group-vertical > .btn:focus,
\e[m
1939 \e[32m+
\e[m
\e[32m.btn-group > .btn:active,
\e[m
1940 \e[32m+
\e[m
\e[32m.btn-group-vertical > .btn:active,
\e[m
1941 \e[32m+
\e[m
\e[32m.btn-group > .btn.active,
\e[m
1942 \e[32m+
\e[m
\e[32m.btn-group-vertical > .btn.active {
\e[m
1943 \e[32m+
\e[m
\e[32m z-index: 2;
\e[m
1944 \e[32m+
\e[m
\e[32m}
\e[m
1945 \e[32m+
\e[m
\e[32m.btn-group .btn + .btn,
\e[m
1946 \e[32m+
\e[m
\e[32m.btn-group .btn + .btn-group,
\e[m
1947 \e[32m+
\e[m
\e[32m.btn-group .btn-group + .btn,
\e[m
1948 \e[32m+
\e[m
\e[32m.btn-group .btn-group + .btn-group {
\e[m
1949 \e[32m+
\e[m
\e[32m margin-left: -1px;
\e[m
1950 \e[32m+
\e[m
\e[32m}
\e[m
1951 \e[32m+
\e[m
\e[32m.btn-toolbar {
\e[m
1952 \e[32m+
\e[m
\e[32m margin-left: -5px;
\e[m
1953 \e[32m+
\e[m
\e[32m}
\e[m
1954 \e[32m+
\e[m
\e[32m.btn-toolbar .btn,
\e[m
1955 \e[32m+
\e[m
\e[32m.btn-toolbar .btn-group,
\e[m
1956 \e[32m+
\e[m
\e[32m.btn-toolbar .input-group {
\e[m
1957 \e[32m+
\e[m
\e[32m float: left;
\e[m
1958 \e[32m+
\e[m
\e[32m}
\e[m
1959 \e[32m+
\e[m
\e[32m.btn-toolbar > .btn,
\e[m
1960 \e[32m+
\e[m
\e[32m.btn-toolbar > .btn-group,
\e[m
1961 \e[32m+
\e[m
\e[32m.btn-toolbar > .input-group {
\e[m
1962 \e[32m+
\e[m
\e[32m margin-left: 5px;
\e[m
1963 \e[32m+
\e[m
\e[32m}
\e[m
1964 \e[32m+
\e[m
\e[32m.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
\e[m
1965 \e[32m+
\e[m
\e[32m border-radius: 0;
\e[m
1966 \e[32m+
\e[m
\e[32m}
\e[m
1967 \e[32m+
\e[m
\e[32m.btn-group > .btn:first-child {
\e[m
1968 \e[32m+
\e[m
\e[32m margin-left: 0;
\e[m
1969 \e[32m+
\e[m
\e[32m}
\e[m
1970 \e[32m+
\e[m
\e[32m.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
\e[m
1971 \e[32m+
\e[m
\e[32m border-bottom-right-radius: 0;
\e[m
1972 \e[32m+
\e[m
\e[32m border-top-right-radius: 0;
\e[m
1973 \e[32m+
\e[m
\e[32m}
\e[m
1974 \e[32m+
\e[m
\e[32m.btn-group > .btn:last-child:not(:first-child),
\e[m
1975 \e[32m+
\e[m
\e[32m.btn-group > .dropdown-toggle:not(:first-child) {
\e[m
1976 \e[32m+
\e[m
\e[32m border-bottom-left-radius: 0;
\e[m
1977 \e[32m+
\e[m
\e[32m border-top-left-radius: 0;
\e[m
1978 \e[32m+
\e[m
\e[32m}
\e[m
1979 \e[32m+
\e[m
\e[32m.btn-group > .btn-group {
\e[m
1980 \e[32m+
\e[m
\e[32m float: left;
\e[m
1981 \e[32m+
\e[m
\e[32m}
\e[m
1982 \e[32m+
\e[m
\e[32m.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
\e[m
1983 \e[32m+
\e[m
\e[32m border-radius: 0;
\e[m
1984 \e[32m+
\e[m
\e[32m}
\e[m
1985 \e[32m+
\e[m
\e[32m.btn-group > .btn-group:first-child:not(:last-child) > .btn:last-child,
\e[m
1986 \e[32m+
\e[m
\e[32m.btn-group > .btn-group:first-child:not(:last-child) > .dropdown-toggle {
\e[m
1987 \e[32m+
\e[m
\e[32m border-bottom-right-radius: 0;
\e[m
1988 \e[32m+
\e[m
\e[32m border-top-right-radius: 0;
\e[m
1989 \e[32m+
\e[m
\e[32m}
\e[m
1990 \e[32m+
\e[m
\e[32m.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child {
\e[m
1991 \e[32m+
\e[m
\e[32m border-bottom-left-radius: 0;
\e[m
1992 \e[32m+
\e[m
\e[32m border-top-left-radius: 0;
\e[m
1993 \e[32m+
\e[m
\e[32m}
\e[m
1994 \e[32m+
\e[m
\e[32m.btn-group .dropdown-toggle:active,
\e[m
1995 \e[32m+
\e[m
\e[32m.btn-group.open .dropdown-toggle {
\e[m
1996 \e[32m+
\e[m
\e[32m outline: 0;
\e[m
1997 \e[32m+
\e[m
\e[32m}
\e[m
1998 \e[32m+
\e[m
\e[32m.btn-group > .btn + .dropdown-toggle {
\e[m
1999 \e[32m+
\e[m
\e[32m padding-left: 8px;
\e[m
2000 \e[32m+
\e[m
\e[32m padding-right: 8px;
\e[m
2001 \e[32m+
\e[m
\e[32m}
\e[m
2002 \e[32m+
\e[m
\e[32m.btn-group > .btn-lg + .dropdown-toggle {
\e[m
2003 \e[32m+
\e[m
\e[32m padding-left: 12px;
\e[m
2004 \e[32m+
\e[m
\e[32m padding-right: 12px;
\e[m
2005 \e[32m+
\e[m
\e[32m}
\e[m
2006 \e[32m+
\e[m
\e[32m.btn-group.open .dropdown-toggle {
\e[m
2007 \e[32m+
\e[m
\e[32m -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
\e[m
2008 \e[32m+
\e[m
\e[32m box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
\e[m
2009 \e[32m+
\e[m
\e[32m}
\e[m
2010 \e[32m+
\e[m
\e[32m.btn-group.open .dropdown-toggle.btn-link {
\e[m
2011 \e[32m+
\e[m
\e[32m -webkit-box-shadow: none;
\e[m
2012 \e[32m+
\e[m
\e[32m box-shadow: none;
\e[m
2013 \e[32m+
\e[m
\e[32m}
\e[m
2014 \e[32m+
\e[m
\e[32m.btn .caret {
\e[m
2015 \e[32m+
\e[m
\e[32m margin-left: 0;
\e[m
2016 \e[32m+
\e[m
\e[32m}
\e[m
2017 \e[32m+
\e[m
\e[32m.btn-lg .caret {
\e[m
2018 \e[32m+
\e[m
\e[32m border-width: 5px 5px 0;
\e[m
2019 \e[32m+
\e[m
\e[32m border-bottom-width: 0;
\e[m
2020 \e[32m+
\e[m
\e[32m}
\e[m
2021 \e[32m+
\e[m
\e[32m.dropup .btn-lg .caret {
\e[m
2022 \e[32m+
\e[m
\e[32m border-width: 0 5px 5px;
\e[m
2023 \e[32m+
\e[m
\e[32m}
\e[m
2024 \e[32m+
\e[m
\e[32m.btn-group-vertical > .btn,
\e[m
2025 \e[32m+
\e[m
\e[32m.btn-group-vertical > .btn-group,
\e[m
2026 \e[32m+
\e[m
\e[32m.btn-group-vertical > .btn-group > .btn {
\e[m
2027 \e[32m+
\e[m
\e[32m display: block;
\e[m
2028 \e[32m+
\e[m
\e[32m float: none;
\e[m
2029 \e[32m+
\e[m
\e[32m width: 100%;
\e[m
2030 \e[32m+
\e[m
\e[32m max-width: 100%;
\e[m
2031 \e[32m+
\e[m
\e[32m}
\e[m
2032 \e[32m+
\e[m
\e[32m.btn-group-vertical > .btn-group > .btn {
\e[m
2033 \e[32m+
\e[m
\e[32m float: none;
\e[m
2034 \e[32m+
\e[m
\e[32m}
\e[m
2035 \e[32m+
\e[m
\e[32m.btn-group-vertical > .btn + .btn,
\e[m
2036 \e[32m+
\e[m
\e[32m.btn-group-vertical > .btn + .btn-group,
\e[m
2037 \e[32m+
\e[m
\e[32m.btn-group-vertical > .btn-group + .btn,
\e[m
2038 \e[32m+
\e[m
\e[32m.btn-group-vertical > .btn-group + .btn-group {
\e[m
2039 \e[32m+
\e[m
\e[32m margin-top: -1px;
\e[m
2040 \e[32m+
\e[m
\e[32m margin-left: 0;
\e[m
2041 \e[32m+
\e[m
\e[32m}
\e[m
2042 \e[32m+
\e[m
\e[32m.btn-group-vertical > .btn:not(:first-child):not(:last-child) {
\e[m
2043 \e[32m+
\e[m
\e[32m border-radius: 0;
\e[m
2044 \e[32m+
\e[m
\e[32m}
\e[m
2045 \e[32m+
\e[m
\e[32m.btn-group-vertical > .btn:first-child:not(:last-child) {
\e[m
2046 \e[32m+
\e[m
\e[32m border-top-right-radius: 4px;
\e[m
2047 \e[32m+
\e[m
\e[32m border-top-left-radius: 4px;
\e[m
2048 \e[32m+
\e[m
\e[32m border-bottom-right-radius: 0;
\e[m
2049 \e[32m+
\e[m
\e[32m border-bottom-left-radius: 0;
\e[m
2050 \e[32m+
\e[m
\e[32m}
\e[m
2051 \e[32m+
\e[m
\e[32m.btn-group-vertical > .btn:last-child:not(:first-child) {
\e[m
2052 \e[32m+
\e[m
\e[32m border-top-right-radius: 0;
\e[m
2053 \e[32m+
\e[m
\e[32m border-top-left-radius: 0;
\e[m
2054 \e[32m+
\e[m
\e[32m border-bottom-right-radius: 4px;
\e[m
2055 \e[32m+
\e[m
\e[32m border-bottom-left-radius: 4px;
\e[m
2056 \e[32m+
\e[m
\e[32m}
\e[m
2057 \e[32m+
\e[m
\e[32m.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
\e[m
2058 \e[32m+
\e[m
\e[32m border-radius: 0;
\e[m
2059 \e[32m+
\e[m
\e[32m}
\e[m
2060 \e[32m+
\e[m
\e[32m.btn-group-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child,
\e[m
2061 \e[32m+
\e[m
\e[32m.btn-group-vertical > .btn-group:first-child:not(:last-child) > .dropdown-toggle {
\e[m
2062 \e[32m+
\e[m
\e[32m border-bottom-right-radius: 0;
\e[m
2063 \e[32m+
\e[m
\e[32m border-bottom-left-radius: 0;
\e[m
2064 \e[32m+
\e[m
\e[32m}
\e[m
2065 \e[32m+
\e[m
\e[32m.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
\e[m
2066 \e[32m+
\e[m
\e[32m border-top-right-radius: 0;
\e[m
2067 \e[32m+
\e[m
\e[32m border-top-left-radius: 0;
\e[m
2068 \e[32m+
\e[m
\e[32m}
\e[m
2069 \e[32m+
\e[m
\e[32m.btn-group-justified {
\e[m
2070 \e[32m+
\e[m
\e[32m display: table;
\e[m
2071 \e[32m+
\e[m
\e[32m width: 100%;
\e[m
2072 \e[32m+
\e[m
\e[32m table-layout: fixed;
\e[m
2073 \e[32m+
\e[m
\e[32m border-collapse: separate;
\e[m
2074 \e[32m+
\e[m
\e[32m}
\e[m
2075 \e[32m+
\e[m
\e[32m.btn-group-justified > .btn,
\e[m
2076 \e[32m+
\e[m
\e[32m.btn-group-justified > .btn-group {
\e[m
2077 \e[32m+
\e[m
\e[32m float: none;
\e[m
2078 \e[32m+
\e[m
\e[32m display: table-cell;
\e[m
2079 \e[32m+
\e[m
\e[32m width: 1%;
\e[m
2080 \e[32m+
\e[m
\e[32m}
\e[m
2081 \e[32m+
\e[m
\e[32m.btn-group-justified > .btn-group .btn {
\e[m
2082 \e[32m+
\e[m
\e[32m width: 100%;
\e[m
2083 \e[32m+
\e[m
\e[32m}
\e[m
2084 \e[32m+
\e[m
\e[32m.btn-group-justified > .btn-group .dropdown-menu {
\e[m
2085 \e[32m+
\e[m
\e[32m left: auto;
\e[m
2086 \e[32m+
\e[m
\e[32m}
\e[m
2087 \e[32m+
\e[m
\e[32m[data-toggle="buttons"] > .btn input[type="radio"],
\e[m
2088 \e[32m+
\e[m
\e[32m[data-toggle="buttons"] > .btn-group > .btn input[type="radio"],
\e[m
2089 \e[32m+
\e[m
\e[32m[data-toggle="buttons"] > .btn input[type="checkbox"],
\e[m
2090 \e[32m+
\e[m
\e[32m[data-toggle="buttons"] > .btn-group > .btn input[type="checkbox"] {
\e[m
2091 \e[32m+
\e[m
\e[32m position: absolute;
\e[m
2092 \e[32m+
\e[m
\e[32m clip: rect(0, 0, 0, 0);
\e[m
2093 \e[32m+
\e[m
\e[32m pointer-events: none;
\e[m
2094 \e[32m+
\e[m
\e[32m}
\e[m
2095 \ No newline at end of file
\e[m
2096 \e[1mdiff --git a/css/buttons.css b/css/buttons.css
\e[m
2097 \e[1mnew file mode 100644
\e[m
2098 \e[1mindex 0000000000..42ec098feb
\e[m
2099 \e[1m--- /dev/null
\e[m
2100 \e[1m+++ b/css/buttons.css
\e[m
2101 \e[36m@@ -0,0 +1,463 @@
\e[m
2102 \e[32m+
\e[m
\e[32m.btn {
\e[m
2103 \e[32m+
\e[m
\e[32m display: inline-block;
\e[m
2104 \e[32m+
\e[m
\e[32m margin-bottom: 0;
\e[m
2105 \e[32m+
\e[m
\e[32m font-weight: normal;
\e[m
2106 \e[32m+
\e[m
\e[32m text-align: center;
\e[m
2107 \e[32m+
\e[m
\e[32m vertical-align: middle;
\e[m
2108 \e[32m+
\e[m
\e[32m touch-action: manipulation;
\e[m
2109 \e[32m+
\e[m
\e[32m cursor: pointer;
\e[m
2110 \e[32m+
\e[m
\e[32m background-image: none;
\e[m
2111 \e[32m+
\e[m
\e[32m border: 1px solid transparent;
\e[m
2112 \e[32m+
\e[m
\e[32m white-space: nowrap;
\e[m
2113 \e[32m+
\e[m
\e[32m padding: 6px 12px;
\e[m
2114 \e[32m+
\e[m
\e[32m font-size: 14px;
\e[m
2115 \e[32m+
\e[m
\e[32m line-height: 1.42857143;
\e[m
2116 \e[32m+
\e[m
\e[32m border-radius: 4px;
\e[m
2117 \e[32m+
\e[m
\e[32m -webkit-user-select: none;
\e[m
2118 \e[32m+
\e[m
\e[32m -moz-user-select: none;
\e[m
2119 \e[32m+
\e[m
\e[32m -ms-user-select: none;
\e[m
2120 \e[32m+
\e[m
\e[32m user-select: none;
\e[m
2121 \e[32m+
\e[m
\e[32m}
\e[m
2122 \e[32m+
\e[m
\e[32m.btn:focus,
\e[m
2123 \e[32m+
\e[m
\e[32m.btn:active:focus,
\e[m
2124 \e[32m+
\e[m
\e[32m.btn.active:focus,
\e[m
2125 \e[32m+
\e[m
\e[32m.btn.focus,
\e[m
2126 \e[32m+
\e[m
\e[32m.btn:active.focus,
\e[m
2127 \e[32m+
\e[m
\e[32m.btn.active.focus {
\e[m
2128 \e[32m+
\e[m
\e[32m outline: 5px auto -webkit-focus-ring-color;
\e[m
2129 \e[32m+
\e[m
\e[32m outline-offset: -2px;
\e[m
2130 \e[32m+
\e[m
\e[32m}
\e[m
2131 \e[32m+
\e[m
\e[32m.btn:hover,
\e[m
2132 \e[32m+
\e[m
\e[32m.btn:focus,
\e[m
2133 \e[32m+
\e[m
\e[32m.btn.focus {
\e[m
2134 \e[32m+
\e[m
\e[32m color: #333333;
\e[m
2135 \e[32m+
\e[m
\e[32m text-decoration: none;
\e[m
2136 \e[32m+
\e[m
\e[32m}
\e[m
2137 \e[32m+
\e[m
\e[32m.btn:active,
\e[m
2138 \e[32m+
\e[m
\e[32m.btn.active {
\e[m
2139 \e[32m+
\e[m
\e[32m outline: 0;
\e[m
2140 \e[32m+
\e[m
\e[32m background-image: none;
\e[m
2141 \e[32m+
\e[m
\e[32m -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
\e[m
2142 \e[32m+
\e[m
\e[32m box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
\e[m
2143 \e[32m+
\e[m
\e[32m}
\e[m
2144 \e[32m+
\e[m
\e[32m.btn.disabled,
\e[m
2145 \e[32m+
\e[m
\e[32m.btn[disabled],
\e[m
2146 \e[32m+
\e[m
\e[32mfieldset[disabled] .btn {
\e[m
2147 \e[32m+
\e[m
\e[32m cursor: not-allowed;
\e[m
2148 \e[32m+
\e[m
\e[32m opacity: 0.65;
\e[m
2149 \e[32m+
\e[m
\e[32m filter: alpha(opacity=65);
\e[m
2150 \e[32m+
\e[m
\e[32m -webkit-box-shadow: none;
\e[m
2151 \e[32m+
\e[m
\e[32m box-shadow: none;
\e[m
2152 \e[32m+
\e[m
\e[32m}
\e[m
2153 \e[32m+
\e[m
\e[32ma.btn.disabled,
\e[m
2154 \e[32m+
\e[m
\e[32mfieldset[disabled] a.btn {
\e[m
2155 \e[32m+
\e[m
\e[32m pointer-events: none;
\e[m
2156 \e[32m+
\e[m
\e[32m}
\e[m
2157 \e[32m+
\e[m
\e[32m.btn-default {
\e[m
2158 \e[32m+
\e[m
\e[32m color: #333333;
\e[m
2159 \e[32m+
\e[m
\e[32m background-color: #ffffff;
\e[m
2160 \e[32m+
\e[m
\e[32m border-color: #cccccc;
\e[m
2161 \e[32m+
\e[m
\e[32m}
\e[m
2162 \e[32m+
\e[m
\e[32m.btn-default:focus,
\e[m
2163 \e[32m+
\e[m
\e[32m.btn-default.focus {
\e[m
2164 \e[32m+
\e[m
\e[32m color: #333333;
\e[m
2165 \e[32m+
\e[m
\e[32m background-color: #e6e6e6;
\e[m
2166 \e[32m+
\e[m
\e[32m border-color: #8c8c8c;
\e[m
2167 \e[32m+
\e[m
\e[32m}
\e[m
2168 \e[32m+
\e[m
\e[32m.btn-default:hover {
\e[m
2169 \e[32m+
\e[m
\e[32m color: #333333;
\e[m
2170 \e[32m+
\e[m
\e[32m background-color: #e6e6e6;
\e[m
2171 \e[32m+
\e[m
\e[32m border-color: #adadad;
\e[m
2172 \e[32m+
\e[m
\e[32m}
\e[m
2173 \e[32m+
\e[m
\e[32m.btn-default:active,
\e[m
2174 \e[32m+
\e[m
\e[32m.btn-default.active,
\e[m
2175 \e[32m+
\e[m
\e[32m.open > .dropdown-toggle.btn-default {
\e[m
2176 \e[32m+
\e[m
\e[32m color: #333333;
\e[m
2177 \e[32m+
\e[m
\e[32m background-color: #e6e6e6;
\e[m
2178 \e[32m+
\e[m
\e[32m border-color: #adadad;
\e[m
2179 \e[32m+
\e[m
\e[32m}
\e[m
2180 \e[32m+
\e[m
\e[32m.btn-default:active:hover,
\e[m
2181 \e[32m+
\e[m
\e[32m.btn-default.active:hover,
\e[m
2182 \e[32m+
\e[m
\e[32m.open > .dropdown-toggle.btn-default:hover,
\e[m
2183 \e[32m+
\e[m
\e[32m.btn-default:active:focus,
\e[m
2184 \e[32m+
\e[m
\e[32m.btn-default.active:focus,
\e[m
2185 \e[32m+
\e[m
\e[32m.open > .dropdown-toggle.btn-default:focus,
\e[m
2186 \e[32m+
\e[m
\e[32m.btn-default:active.focus,
\e[m
2187 \e[32m+
\e[m
\e[32m.btn-default.active.focus,
\e[m
2188 \e[32m+
\e[m
\e[32m.open > .dropdown-toggle.btn-default.focus {
\e[m
2189 \e[32m+
\e[m
\e[32m color: #333333;
\e[m
2190 \e[32m+
\e[m
\e[32m background-color: #d4d4d4;
\e[m
2191 \e[32m+
\e[m
\e[32m border-color: #8c8c8c;
\e[m
2192 \e[32m+
\e[m
\e[32m}
\e[m
2193 \e[32m+
\e[m
\e[32m.btn-default:active,
\e[m
2194 \e[32m+
\e[m
\e[32m.btn-default.active,
\e[m
2195 \e[32m+
\e[m
\e[32m.open > .dropdown-toggle.btn-default {
\e[m
2196 \e[32m+
\e[m
\e[32m background-image: none;
\e[m
2197 \e[32m+
\e[m
\e[32m}
\e[m
2198 \e[32m+
\e[m
\e[32m.btn-default.disabled:hover,
\e[m
2199 \e[32m+
\e[m
\e[32m.btn-default[disabled]:hover,
\e[m
2200 \e[32m+
\e[m
\e[32mfieldset[disabled] .btn-default:hover,
\e[m
2201 \e[32m+
\e[m
\e[32m.btn-default.disabled:focus,
\e[m
2202 \e[32m+
\e[m
\e[32m.btn-default[disabled]:focus,
\e[m
2203 \e[32m+
\e[m
\e[32mfieldset[disabled] .btn-default:focus,
\e[m
2204 \e[32m+
\e[m
\e[32m.btn-default.disabled.focus,
\e[m
2205 \e[32m+
\e[m
\e[32m.btn-default[disabled].focus,
\e[m
2206 \e[32m+
\e[m
\e[32mfieldset[disabled] .btn-default.focus {
\e[m
2207 \e[32m+
\e[m
\e[32m background-color: #ffffff;
\e[m
2208 \e[32m+
\e[m
\e[32m border-color: #cccccc;
\e[m
2209 \e[32m+
\e[m
\e[32m}
\e[m
2210 \e[32m+
\e[m
\e[32m.btn-default .badge {
\e[m
2211 \e[32m+
\e[m
\e[32m color: #ffffff;
\e[m
2212 \e[32m+
\e[m
\e[32m background-color: #333333;
\e[m
2213 \e[32m+
\e[m
\e[32m}
\e[m
2214 \e[32m+
\e[m
\e[32m.btn-primary {
\e[m
2215 \e[32m+
\e[m
\e[32m color: #ffffff;
\e[m
2216 \e[32m+
\e[m
\e[32m background-color: #337ab7;
\e[m
2217 \e[32m+
\e[m
\e[32m border-color: #2e6da4;
\e[m
2218 \e[32m+
\e[m
\e[32m}
\e[m
2219 \e[32m+
\e[m
\e[32m.btn-primary:focus,
\e[m
2220 \e[32m+
\e[m
\e[32m.btn-primary.focus {
\e[m
2221 \e[32m+
\e[m
\e[32m color: #ffffff;
\e[m
2222 \e[32m+
\e[m
\e[32m background-color: #286090;
\e[m
2223 \e[32m+
\e[m
\e[32m border-color: #122b40;
\e[m
2224 \e[32m+
\e[m
\e[32m}
\e[m
2225 \e[32m+
\e[m
\e[32m.btn-primary:hover {
\e[m
2226 \e[32m+
\e[m
\e[32m color: #ffffff;
\e[m
2227 \e[32m+
\e[m
\e[32m background-color: #286090;
\e[m
2228 \e[32m+
\e[m
\e[32m border-color: #204d74;
\e[m
2229 \e[32m+
\e[m
\e[32m}
\e[m
2230 \e[32m+
\e[m
\e[32m.btn-primary:active,
\e[m
2231 \e[32m+
\e[m
\e[32m.btn-primary.active,
\e[m
2232 \e[32m+
\e[m
\e[32m.open > .dropdown-toggle.btn-primary {
\e[m
2233 \e[32m+
\e[m
\e[32m color: #ffffff;
\e[m
2234 \e[32m+
\e[m
\e[32m background-color: #286090;
\e[m
2235 \e[32m+
\e[m
\e[32m border-color: #204d74;
\e[m
2236 \e[32m+
\e[m
\e[32m}
\e[m
2237 \e[32m+
\e[m
\e[32m.btn-primary:active:hover,
\e[m
2238 \e[32m+
\e[m
\e[32m.btn-primary.active:hover,
\e[m
2239 \e[32m+
\e[m
\e[32m.open > .dropdown-toggle.btn-primary:hover,
\e[m
2240 \e[32m+
\e[m
\e[32m.btn-primary:active:focus,
\e[m
2241 \e[32m+
\e[m
\e[32m.btn-primary.active:focus,
\e[m
2242 \e[32m+
\e[m
\e[32m.open > .dropdown-toggle.btn-primary:focus,
\e[m
2243 \e[32m+
\e[m
\e[32m.btn-primary:active.focus,
\e[m
2244 \e[32m+
\e[m
\e[32m.btn-primary.active.focus,
\e[m
2245 \e[32m+
\e[m
\e[32m.open > .dropdown-toggle.btn-primary.focus {
\e[m
2246 \e[32m+
\e[m
\e[32m color: #ffffff;
\e[m
2247 \e[32m+
\e[m
\e[32m background-color: #204d74;
\e[m
2248 \e[32m+
\e[m
\e[32m border-color: #122b40;
\e[m
2249 \e[32m+
\e[m
\e[32m}
\e[m
2250 \e[32m+
\e[m
\e[32m.btn-primary:active,
\e[m
2251 \e[32m+
\e[m
\e[32m.btn-primary.active,
\e[m
2252 \e[32m+
\e[m
\e[32m.open > .dropdown-toggle.btn-primary {
\e[m
2253 \e[32m+
\e[m
\e[32m background-image: none;
\e[m
2254 \e[32m+
\e[m
\e[32m}
\e[m
2255 \e[32m+
\e[m
\e[32m.btn-primary.disabled:hover,
\e[m
2256 \e[32m+
\e[m
\e[32m.btn-primary[disabled]:hover,
\e[m
2257 \e[32m+
\e[m
\e[32mfieldset[disabled] .btn-primary:hover,
\e[m
2258 \e[32m+
\e[m
\e[32m.btn-primary.disabled:focus,
\e[m
2259 \e[32m+
\e[m
\e[32m.btn-primary[disabled]:focus,
\e[m
2260 \e[32m+
\e[m
\e[32mfieldset[disabled] .btn-primary:focus,
\e[m
2261 \e[32m+
\e[m
\e[32m.btn-primary.disabled.focus,
\e[m
2262 \e[32m+
\e[m
\e[32m.btn-primary[disabled].focus,
\e[m
2263 \e[32m+
\e[m
\e[32mfieldset[disabled] .btn-primary.focus {
\e[m
2264 \e[32m+
\e[m
\e[32m background-color: #337ab7;
\e[m
2265 \e[32m+
\e[m
\e[32m border-color: #2e6da4;
\e[m
2266 \e[32m+
\e[m
\e[32m}
\e[m
2267 \e[32m+
\e[m
\e[32m.btn-primary .badge {
\e[m
2268 \e[32m+
\e[m
\e[32m color: #337ab7;
\e[m
2269 \e[32m+
\e[m
\e[32m background-color: #ffffff;
\e[m
2270 \e[32m+
\e[m
\e[32m}
\e[m
2271 \e[32m+
\e[m
\e[32m.btn-success {
\e[m
2272 \e[32m+
\e[m
\e[32m color: #ffffff;
\e[m
2273 \e[32m+
\e[m
\e[32m background-color: #5cb85c;
\e[m
2274 \e[32m+
\e[m
\e[32m border-color: #4cae4c;
\e[m
2275 \e[32m+
\e[m
\e[32m}
\e[m
2276 \e[32m+
\e[m
\e[32m.btn-success:focus,
\e[m
2277 \e[32m+
\e[m
\e[32m.btn-success.focus {
\e[m
2278 \e[32m+
\e[m
\e[32m color: #ffffff;
\e[m
2279 \e[32m+
\e[m
\e[32m background-color: #449d44;
\e[m
2280 \e[32m+
\e[m
\e[32m border-color: #255625;
\e[m
2281 \e[32m+
\e[m
\e[32m}
\e[m
2282 \e[32m+
\e[m
\e[32m.btn-success:hover {
\e[m
2283 \e[32m+
\e[m
\e[32m color: #ffffff;
\e[m
2284 \e[32m+
\e[m
\e[32m background-color: #449d44;
\e[m
2285 \e[32m+
\e[m
\e[32m border-color: #398439;
\e[m
2286 \e[32m+
\e[m
\e[32m}
\e[m
2287 \e[32m+
\e[m
\e[32m.btn-success:active,
\e[m
2288 \e[32m+
\e[m
\e[32m.btn-success.active,
\e[m
2289 \e[32m+
\e[m
\e[32m.open > .dropdown-toggle.btn-success {
\e[m
2290 \e[32m+
\e[m
\e[32m color: #ffffff;
\e[m
2291 \e[32m+
\e[m
\e[32m background-color: #449d44;
\e[m
2292 \e[32m+
\e[m
\e[32m border-color: #398439;
\e[m
2293 \e[32m+
\e[m
\e[32m}
\e[m
2294 \e[32m+
\e[m
\e[32m.btn-success:active:hover,
\e[m
2295 \e[32m+
\e[m
\e[32m.btn-success.active:hover,
\e[m
2296 \e[32m+
\e[m
\e[32m.open > .dropdown-toggle.btn-success:hover,
\e[m
2297 \e[32m+
\e[m
\e[32m.btn-success:active:focus,
\e[m
2298 \e[32m+
\e[m
\e[32m.btn-success.active:focus,
\e[m
2299 \e[32m+
\e[m
\e[32m.open > .dropdown-toggle.btn-success:focus,
\e[m
2300 \e[32m+
\e[m
\e[32m.btn-success:active.focus,
\e[m
2301 \e[32m+
\e[m
\e[32m.btn-success.active.focus,
\e[m
2302 \e[32m+
\e[m
\e[32m.open > .dropdown-toggle.btn-success.focus {
\e[m
2303 \e[32m+
\e[m
\e[32m color: #ffffff;
\e[m
2304 \e[32m+
\e[m
\e[32m background-color: #398439;
\e[m
2305 \e[32m+
\e[m
\e[32m border-color: #255625;
\e[m
2306 \e[32m+
\e[m
\e[32m}
\e[m
2307 \e[32m+
\e[m
\e[32m.btn-success:active,
\e[m
2308 \e[32m+
\e[m
\e[32m.btn-success.active,
\e[m
2309 \e[32m+
\e[m
\e[32m.open > .dropdown-toggle.btn-success {
\e[m
2310 \e[32m+
\e[m
\e[32m background-image: none;
\e[m
2311 \e[32m+
\e[m
\e[32m}
\e[m
2312 \e[32m+
\e[m
\e[32m.btn-success.disabled:hover,
\e[m
2313 \e[32m+
\e[m
\e[32m.btn-success[disabled]:hover,
\e[m
2314 \e[32m+
\e[m
\e[32mfieldset[disabled] .btn-success:hover,
\e[m
2315 \e[32m+
\e[m
\e[32m.btn-success.disabled:focus,
\e[m
2316 \e[32m+
\e[m
\e[32m.btn-success[disabled]:focus,
\e[m
2317 \e[32m+
\e[m
\e[32mfieldset[disabled] .btn-success:focus,
\e[m
2318 \e[32m+
\e[m
\e[32m.btn-success.disabled.focus,
\e[m
2319 \e[32m+
\e[m
\e[32m.btn-success[disabled].focus,
\e[m
2320 \e[32m+
\e[m
\e[32mfieldset[disabled] .btn-success.focus {
\e[m
2321 \e[32m+
\e[m
\e[32m background-color: #5cb85c;
\e[m
2322 \e[32m+
\e[m
\e[32m border-color: #4cae4c;
\e[m
2323 \e[32m+
\e[m
\e[32m}
\e[m
2324 \e[32m+
\e[m
\e[32m.btn-success .badge {
\e[m
2325 \e[32m+
\e[m
\e[32m color: #5cb85c;
\e[m
2326 \e[32m+
\e[m
\e[32m background-color: #ffffff;
\e[m
2327 \e[32m+
\e[m
\e[32m}
\e[m
2328 \e[32m+
\e[m
\e[32m.btn-info {
\e[m
2329 \e[32m+
\e[m
\e[32m color: #ffffff;
\e[m
2330 \e[32m+
\e[m
\e[32m background-color: #5bc0de;
\e[m
2331 \e[32m+
\e[m
\e[32m border-color: #46b8da;
\e[m
2332 \e[32m+
\e[m
\e[32m}
\e[m
2333 \e[32m+
\e[m
\e[32m.btn-info:focus,
\e[m
2334 \e[32m+
\e[m
\e[32m.btn-info.focus {
\e[m
2335 \e[32m+
\e[m
\e[32m color: #ffffff;
\e[m
2336 \e[32m+
\e[m
\e[32m background-color: #31b0d5;
\e[m
2337 \e[32m+
\e[m
\e[32m border-color: #1b6d85;
\e[m
2338 \e[32m+
\e[m
\e[32m}
\e[m
2339 \e[32m+
\e[m
\e[32m.btn-info:hover {
\e[m
2340 \e[32m+
\e[m
\e[32m color: #ffffff;
\e[m
2341 \e[32m+
\e[m
\e[32m background-color: #31b0d5;
\e[m
2342 \e[32m+
\e[m
\e[32m border-color: #269abc;
\e[m
2343 \e[32m+
\e[m
\e[32m}
\e[m
2344 \e[32m+
\e[m
\e[32m.btn-info:active,
\e[m
2345 \e[32m+
\e[m
\e[32m.btn-info.active,
\e[m
2346 \e[32m+
\e[m
\e[32m.open > .dropdown-toggle.btn-info {
\e[m
2347 \e[32m+
\e[m
\e[32m color: #ffffff;
\e[m
2348 \e[32m+
\e[m
\e[32m background-color: #31b0d5;
\e[m
2349 \e[32m+
\e[m
\e[32m border-color: #269abc;
\e[m
2350 \e[32m+
\e[m
\e[32m}
\e[m
2351 \e[32m+
\e[m
\e[32m.btn-info:active:hover,
\e[m
2352 \e[32m+
\e[m
\e[32m.btn-info.active:hover,
\e[m
2353 \e[32m+
\e[m
\e[32m.open > .dropdown-toggle.btn-info:hover,
\e[m
2354 \e[32m+
\e[m
\e[32m.btn-info:active:focus,
\e[m
2355 \e[32m+
\e[m
\e[32m.btn-info.active:focus,
\e[m
2356 \e[32m+
\e[m
\e[32m.open > .dropdown-toggle.btn-info:focus,
\e[m
2357 \e[32m+
\e[m
\e[32m.btn-info:active.focus,
\e[m
2358 \e[32m+
\e[m
\e[32m.btn-info.active.focus,
\e[m
2359 \e[32m+
\e[m
\e[32m.open > .dropdown-toggle.btn-info.focus {
\e[m
2360 \e[32m+
\e[m
\e[32m color: #ffffff;
\e[m
2361 \e[32m+
\e[m
\e[32m background-color: #269abc;
\e[m
2362 \e[32m+
\e[m
\e[32m border-color: #1b6d85;
\e[m
2363 \e[32m+
\e[m
\e[32m}
\e[m
2364 \e[32m+
\e[m
\e[32m.btn-info:active,
\e[m
2365 \e[32m+
\e[m
\e[32m.btn-info.active,
\e[m
2366 \e[32m+
\e[m
\e[32m.open > .dropdown-toggle.btn-info {
\e[m
2367 \e[32m+
\e[m
\e[32m background-image: none;
\e[m
2368 \e[32m+
\e[m
\e[32m}
\e[m
2369 \e[32m+
\e[m
\e[32m.btn-info.disabled:hover,
\e[m
2370 \e[32m+
\e[m
\e[32m.btn-info[disabled]:hover,
\e[m
2371 \e[32m+
\e[m
\e[32mfieldset[disabled] .btn-info:hover,
\e[m
2372 \e[32m+
\e[m
\e[32m.btn-info.disabled:focus,
\e[m
2373 \e[32m+
\e[m
\e[32m.btn-info[disabled]:focus,
\e[m
2374 \e[32m+
\e[m
\e[32mfieldset[disabled] .btn-info:focus,
\e[m
2375 \e[32m+
\e[m
\e[32m.btn-info.disabled.focus,
\e[m
2376 \e[32m+
\e[m
\e[32m.btn-info[disabled].focus,
\e[m
2377 \e[32m+
\e[m
\e[32mfieldset[disabled] .btn-info.focus {
\e[m
2378 \e[32m+
\e[m
\e[32m background-color: #5bc0de;
\e[m
2379 \e[32m+
\e[m
\e[32m border-color: #46b8da;
\e[m
2380 \e[32m+
\e[m
\e[32m}
\e[m
2381 \e[32m+
\e[m
\e[32m.btn-info .badge {
\e[m
2382 \e[32m+
\e[m
\e[32m color: #5bc0de;
\e[m
2383 \e[32m+
\e[m
\e[32m background-color: #ffffff;
\e[m
2384 \e[32m+
\e[m
\e[32m}
\e[m
2385 \e[32m+
\e[m
\e[32m.btn-warning {
\e[m
2386 \e[32m+
\e[m
\e[32m color: #ffffff;
\e[m
2387 \e[32m+
\e[m
\e[32m background-color: #f0ad4e;
\e[m
2388 \e[32m+
\e[m
\e[32m border-color: #eea236;
\e[m
2389 \e[32m+
\e[m
\e[32m}
\e[m
2390 \e[32m+
\e[m
\e[32m.btn-warning:focus,
\e[m
2391 \e[32m+
\e[m
\e[32m.btn-warning.focus {
\e[m
2392 \e[32m+
\e[m
\e[32m color: #ffffff;
\e[m
2393 \e[32m+
\e[m
\e[32m background-color: #ec971f;
\e[m
2394 \e[32m+
\e[m
\e[32m border-color: #985f0d;
\e[m
2395 \e[32m+
\e[m
\e[32m}
\e[m
2396 \e[32m+
\e[m
\e[32m.btn-warning:hover {
\e[m
2397 \e[32m+
\e[m
\e[32m color: #ffffff;
\e[m
2398 \e[32m+
\e[m
\e[32m background-color: #ec971f;
\e[m
2399 \e[32m+
\e[m
\e[32m border-color: #d58512;
\e[m
2400 \e[32m+
\e[m
\e[32m}
\e[m
2401 \e[32m+
\e[m
\e[32m.btn-warning:active,
\e[m
2402 \e[32m+
\e[m
\e[32m.btn-warning.active,
\e[m
2403 \e[32m+
\e[m
\e[32m.open > .dropdown-toggle.btn-warning {
\e[m
2404 \e[32m+
\e[m
\e[32m color: #ffffff;
\e[m
2405 \e[32m+
\e[m
\e[32m background-color: #ec971f;
\e[m
2406 \e[32m+
\e[m
\e[32m border-color: #d58512;
\e[m
2407 \e[32m+
\e[m
\e[32m}
\e[m
2408 \e[32m+
\e[m
\e[32m.btn-warning:active:hover,
\e[m
2409 \e[32m+
\e[m
\e[32m.btn-warning.active:hover,
\e[m
2410 \e[32m+
\e[m
\e[32m.open > .dropdown-toggle.btn-warning:hover,
\e[m
2411 \e[32m+
\e[m
\e[32m.btn-warning:active:focus,
\e[m
2412 \e[32m+
\e[m
\e[32m.btn-warning.active:focus,
\e[m
2413 \e[32m+
\e[m
\e[32m.open > .dropdown-toggle.btn-warning:focus,
\e[m
2414 \e[32m+
\e[m
\e[32m.btn-warning:active.focus,
\e[m
2415 \e[32m+
\e[m
\e[32m.btn-warning.active.focus,
\e[m
2416 \e[32m+
\e[m
\e[32m.open > .dropdown-toggle.btn-warning.focus {
\e[m
2417 \e[32m+
\e[m
\e[32m color: #ffffff;
\e[m
2418 \e[32m+
\e[m
\e[32m background-color: #d58512;
\e[m
2419 \e[32m+
\e[m
\e[32m border-color: #985f0d;
\e[m
2420 \e[32m+
\e[m
\e[32m}
\e[m
2421 \e[32m+
\e[m
\e[32m.btn-warning:active,
\e[m
2422 \e[32m+
\e[m
\e[32m.btn-warning.active,
\e[m
2423 \e[32m+
\e[m
\e[32m.open > .dropdown-toggle.btn-warning {
\e[m
2424 \e[32m+
\e[m
\e[32m background-image: none;
\e[m
2425 \e[32m+
\e[m
\e[32m}
\e[m
2426 \e[32m+
\e[m
\e[32m.btn-warning.disabled:hover,
\e[m
2427 \e[32m+
\e[m
\e[32m.btn-warning[disabled]:hover,
\e[m
2428 \e[32m+
\e[m
\e[32mfieldset[disabled] .btn-warning:hover,
\e[m
2429 \e[32m+
\e[m
\e[32m.btn-warning.disabled:focus,
\e[m
2430 \e[32m+
\e[m
\e[32m.btn-warning[disabled]:focus,
\e[m
2431 \e[32m+
\e[m
\e[32mfieldset[disabled] .btn-warning:focus,
\e[m
2432 \e[32m+
\e[m
\e[32m.btn-warning.disabled.focus,
\e[m
2433 \e[32m+
\e[m
\e[32m.btn-warning[disabled].focus,
\e[m
2434 \e[32m+
\e[m
\e[32mfieldset[disabled] .btn-warning.focus {
\e[m
2435 \e[32m+
\e[m
\e[32m background-color: #f0ad4e;
\e[m
2436 \e[32m+
\e[m
\e[32m border-color: #eea236;
\e[m
2437 \e[32m+
\e[m
\e[32m}
\e[m
2438 \e[32m+
\e[m
\e[32m.btn-warning .badge {
\e[m
2439 \e[32m+
\e[m
\e[32m color: #f0ad4e;
\e[m
2440 \e[32m+
\e[m
\e[32m background-color: #ffffff;
\e[m
2441 \e[32m+
\e[m
\e[32m}
\e[m
2442 \e[32m+
\e[m
\e[32m.btn-danger {
\e[m
2443 \e[32m+
\e[m
\e[32m color: #ffffff;
\e[m
2444 \e[32m+
\e[m
\e[32m background-color: #d9534f;
\e[m
2445 \e[32m+
\e[m
\e[32m border-color: #d43f3a;
\e[m
2446 \e[32m+
\e[m
\e[32m}
\e[m
2447 \e[32m+
\e[m
\e[32m.btn-danger:focus,
\e[m
2448 \e[32m+
\e[m
\e[32m.btn-danger.focus {
\e[m
2449 \e[32m+
\e[m
\e[32m color: #ffffff;
\e[m
2450 \e[32m+
\e[m
\e[32m background-color: #c9302c;
\e[m
2451 \e[32m+
\e[m
\e[32m border-color: #761c19;
\e[m
2452 \e[32m+
\e[m
\e[32m}
\e[m
2453 \e[32m+
\e[m
\e[32m.btn-danger:hover {
\e[m
2454 \e[32m+
\e[m
\e[32m color: #ffffff;
\e[m
2455 \e[32m+
\e[m
\e[32m background-color: #c9302c;
\e[m
2456 \e[32m+
\e[m
\e[32m border-color: #ac2925;
\e[m
2457 \e[32m+
\e[m
\e[32m}
\e[m
2458 \e[32m+
\e[m
\e[32m.btn-danger:active,
\e[m
2459 \e[32m+
\e[m
\e[32m.btn-danger.active,
\e[m
2460 \e[32m+
\e[m
\e[32m.open > .dropdown-toggle.btn-danger {
\e[m
2461 \e[32m+
\e[m
\e[32m color: #ffffff;
\e[m
2462 \e[32m+
\e[m
\e[32m background-color: #c9302c;
\e[m
2463 \e[32m+
\e[m
\e[32m border-color: #ac2925;
\e[m
2464 \e[32m+
\e[m
\e[32m}
\e[m
2465 \e[32m+
\e[m
\e[32m.btn-danger:active:hover,
\e[m
2466 \e[32m+
\e[m
\e[32m.btn-danger.active:hover,
\e[m
2467 \e[32m+
\e[m
\e[32m.open > .dropdown-toggle.btn-danger:hover,
\e[m
2468 \e[32m+
\e[m
\e[32m.btn-danger:active:focus,
\e[m
2469 \e[32m+
\e[m
\e[32m.btn-danger.active:focus,
\e[m
2470 \e[32m+
\e[m
\e[32m.open > .dropdown-toggle.btn-danger:focus,
\e[m
2471 \e[32m+
\e[m
\e[32m.btn-danger:active.focus,
\e[m
2472 \e[32m+
\e[m
\e[32m.btn-danger.active.focus,
\e[m
2473 \e[32m+
\e[m
\e[32m.open > .dropdown-toggle.btn-danger.focus {
\e[m
2474 \e[32m+
\e[m
\e[32m color: #ffffff;
\e[m
2475 \e[32m+
\e[m
\e[32m background-color: #ac2925;
\e[m
2476 \e[32m+
\e[m
\e[32m border-color: #761c19;
\e[m
2477 \e[32m+
\e[m
\e[32m}
\e[m
2478 \e[32m+
\e[m
\e[32m.btn-danger:active,
\e[m
2479 \e[32m+
\e[m
\e[32m.btn-danger.active,
\e[m
2480 \e[32m+
\e[m
\e[32m.open > .dropdown-toggle.btn-danger {
\e[m
2481 \e[32m+
\e[m
\e[32m background-image: none;
\e[m
2482 \e[32m+
\e[m
\e[32m}
\e[m
2483 \e[32m+
\e[m
\e[32m.btn-danger.disabled:hover,
\e[m
2484 \e[32m+
\e[m
\e[32m.btn-danger[disabled]:hover,
\e[m
2485 \e[32m+
\e[m
\e[32mfieldset[disabled] .btn-danger:hover,
\e[m
2486 \e[32m+
\e[m
\e[32m.btn-danger.disabled:focus,
\e[m
2487 \e[32m+
\e[m
\e[32m.btn-danger[disabled]:focus,
\e[m
2488 \e[32m+
\e[m
\e[32mfieldset[disabled] .btn-danger:focus,
\e[m
2489 \e[32m+
\e[m
\e[32m.btn-danger.disabled.focus,
\e[m
2490 \e[32m+
\e[m
\e[32m.btn-danger[disabled].focus,
\e[m
2491 \e[32m+
\e[m
\e[32mfieldset[disabled] .btn-danger.focus {
\e[m
2492 \e[32m+
\e[m
\e[32m background-color: #d9534f;
\e[m
2493 \e[32m+
\e[m
\e[32m border-color: #d43f3a;
\e[m
2494 \e[32m+
\e[m
\e[32m}
\e[m
2495 \e[32m+
\e[m
\e[32m.btn-danger .badge {
\e[m
2496 \e[32m+
\e[m
\e[32m color: #d9534f;
\e[m
2497 \e[32m+
\e[m
\e[32m background-color: #ffffff;
\e[m
2498 \e[32m+
\e[m
\e[32m}
\e[m
2499 \e[32m+
\e[m
\e[32m.btn-link {
\e[m
2500 \e[32m+
\e[m
\e[32m color: #337ab7;
\e[m
2501 \e[32m+
\e[m
\e[32m font-weight: normal;
\e[m
2502 \e[32m+
\e[m
\e[32m border-radius: 0;
\e[m
2503 \e[32m+
\e[m
\e[32m}
\e[m
2504 \e[32m+
\e[m
\e[32m.btn-link,
\e[m
2505 \e[32m+
\e[m
\e[32m.btn-link:active,
\e[m
2506 \e[32m+
\e[m
\e[32m.btn-link.active,
\e[m
2507 \e[32m+
\e[m
\e[32m.btn-link[disabled],
\e[m
2508 \e[32m+
\e[m
\e[32mfieldset[disabled] .btn-link {
\e[m
2509 \e[32m+
\e[m
\e[32m background-color: transparent;
\e[m
2510 \e[32m+
\e[m
\e[32m -webkit-box-shadow: none;
\e[m
2511 \e[32m+
\e[m
\e[32m box-shadow: none;
\e[m
2512 \e[32m+
\e[m
\e[32m}
\e[m
2513 \e[32m+
\e[m
\e[32m.btn-link,
\e[m
2514 \e[32m+
\e[m
\e[32m.btn-link:hover,
\e[m
2515 \e[32m+
\e[m
\e[32m.btn-link:focus,
\e[m
2516 \e[32m+
\e[m
\e[32m.btn-link:active {
\e[m
2517 \e[32m+
\e[m
\e[32m border-color: transparent;
\e[m
2518 \e[32m+
\e[m
\e[32m}
\e[m
2519 \e[32m+
\e[m
\e[32m.btn-link:hover,
\e[m
2520 \e[32m+
\e[m
\e[32m.btn-link:focus {
\e[m
2521 \e[32m+
\e[m
\e[32m color: #23527c;
\e[m
2522 \e[32m+
\e[m
\e[32m text-decoration: underline;
\e[m
2523 \e[32m+
\e[m
\e[32m background-color: transparent;
\e[m
2524 \e[32m+
\e[m
\e[32m}
\e[m
2525 \e[32m+
\e[m
\e[32m.btn-link[disabled]:hover,
\e[m
2526 \e[32m+
\e[m
\e[32mfieldset[disabled] .btn-link:hover,
\e[m
2527 \e[32m+
\e[m
\e[32m.btn-link[disabled]:focus,
\e[m
2528 \e[32m+
\e[m
\e[32mfieldset[disabled] .btn-link:focus {
\e[m
2529 \e[32m+
\e[m
\e[32m color: #777777;
\e[m
2530 \e[32m+
\e[m
\e[32m text-decoration: none;
\e[m
2531 \e[32m+
\e[m
\e[32m}
\e[m
2532 \e[32m+
\e[m
\e[32m.btn-lg,
\e[m
2533 \e[32m+
\e[m
\e[32m.btn-group-lg > .btn {
\e[m
2534 \e[32m+
\e[m
\e[32m padding: 10px 16px;
\e[m
2535 \e[32m+
\e[m
\e[32m font-size: 18px;
\e[m
2536 \e[32m+
\e[m
\e[32m line-height: 1.3333333;
\e[m
2537 \e[32m+
\e[m
\e[32m border-radius: 6px;
\e[m
2538 \e[32m+
\e[m
\e[32m}
\e[m
2539 \e[32m+
\e[m
\e[32m.btn-sm,
\e[m
2540 \e[32m+
\e[m
\e[32m.btn-group-sm > .btn {
\e[m
2541 \e[32m+
\e[m
\e[32m padding: 5px 10px;
\e[m
2542 \e[32m+
\e[m
\e[32m font-size: 12px;
\e[m
2543 \e[32m+
\e[m
\e[32m line-height: 1.5;
\e[m
2544 \e[32m+
\e[m
\e[32m border-radius: 3px;
\e[m
2545 \e[32m+
\e[m
\e[32m}
\e[m
2546 \e[32m+
\e[m
\e[32m.btn-xs,
\e[m
2547 \e[32m+
\e[m
\e[32m.btn-group-xs > .btn {
\e[m
2548 \e[32m+
\e[m
\e[32m padding: 1px 5px;
\e[m
2549 \e[32m+
\e[m
\e[32m font-size: 12px;
\e[m
2550 \e[32m+
\e[m
\e[32m line-height: 1.5;
\e[m
2551 \e[32m+
\e[m
\e[32m border-radius: 3px;
\e[m
2552 \e[32m+
\e[m
\e[32m}
\e[m
2553 \e[32m+
\e[m
\e[32m.btn-block {
\e[m
2554 \e[32m+
\e[m
\e[32m display: block;
\e[m
2555 \e[32m+
\e[m
\e[32m width: 100%;
\e[m
2556 \e[32m+
\e[m
\e[32m}
\e[m
2557 \e[32m+
\e[m
\e[32m.btn-block + .btn-block {
\e[m
2558 \e[32m+
\e[m
\e[32m margin-top: 5px;
\e[m
2559 \e[32m+
\e[m
\e[32m}
\e[m
2560 \e[32m+
\e[m
\e[32minput[type="submit"].btn-block,
\e[m
2561 \e[32m+
\e[m
\e[32minput[type="reset"].btn-block,
\e[m
2562 \e[32m+
\e[m
\e[32minput[type="button"].btn-block {
\e[m
2563 \e[32m+
\e[m
\e[32m width: 100%;
\e[m
2564 \e[32m+
\e[m
\e[32m}
\e[m
2565 \ No newline at end of file
\e[m
2566 \e[1mdiff --git a/css/upload-cropbox.css b/css/upload-cropbox.css
\e[m
2567 \e[1mnew file mode 100644
\e[m
2568 \e[1mindex 0000000000..f8500935aa
\e[m
2569 \e[1m--- /dev/null
\e[m
2570 \e[1m+++ b/css/upload-cropbox.css
\e[m
2571 \e[36m@@ -0,0 +1,62 @@
\e[m
2572 \e[32m+
\e[m
\e[32m.roo-upload-cropbox-selector {
\e[m
2573 \e[32m+
\e[m
\e[32m visibility: hidden;
\e[m
2574 \e[32m+
\e[m
\e[32m height: 0px;
\e[m
2575 \e[32m+
\e[m
\e[32m}
\e[m
2576 \e[32m+
\e[m
\e[32m.roo-upload-cropbox-dialog .modal-header,
\e[m
2577 \e[32m+
\e[m
\e[32m.roo-upload-cropbox-dialog .modal-footer {
\e[m
2578 \e[32m+
\e[m
\e[32m padding-top: 5px;
\e[m
2579 \e[32m+
\e[m
\e[32m padding-bottom: 5px;
\e[m
2580 \e[32m+
\e[m
\e[32m}
\e[m
2581 \e[32m+
\e[m
\e[32m.roo-upload-cropbox-body {
\e[m
2582 \e[32m+
\e[m
\e[32m background-color: #ffffff;
\e[m
2583 \e[32m+
\e[m
\e[32m border: 1px solid #777777;
\e[m
2584 \e[32m+
\e[m
\e[32m width: 100%;
\e[m
2585 \e[32m+
\e[m
\e[32m height: 450px;
\e[m
2586 \e[32m+
\e[m
\e[32m max-height: 450px;
\e[m
2587 \e[32m+
\e[m
\e[32m position: relative;
\e[m
2588 \e[32m+
\e[m
\e[32m overflow: hidden;
\e[m
2589 \e[32m+
\e[m
\e[32m cursor: move;
\e[m
2590 \e[32m+
\e[m
\e[32m}
\e[m
2591 \e[32m+
\e[m
\e[32m.roo-upload-cropbox-preview {
\e[m
2592 \e[32m+
\e[m
\e[32m position: absolute;
\e[m
2593 \e[32m+
\e[m
\e[32m top: 0px;
\e[m
2594 \e[32m+
\e[m
\e[32m left: 0px;
\e[m
2595 \e[32m+
\e[m
\e[32m text-align: center;
\e[m
2596 \e[32m+
\e[m
\e[32m margin: 0px;
\e[m
2597 \e[32m+
\e[m
\e[32m padding: 0px;
\e[m
2598 \e[32m+
\e[m
\e[32m border: none;
\e[m
2599 \e[32m+
\e[m
\e[32m}
\e[m
2600 \e[32m+
\e[m
\e[32m.roo-upload-cropbox-body .roo-upload-cropbox-thumb {
\e[m
2601 \e[32m+
\e[m
\e[32m position: absolute;
\e[m
2602 \e[32m+
\e[m
\e[32m /* top: 50%;
\e[m
2603 \e[32m+
\e[m
\e[32m left: 50%;
\e[m
2604 \e[32m+
\e[m
\e[32m transform: translate(-50%, -50%);*/
\e[m
2605 \e[32m+
\e[m
\e[32m box-sizing: border-box;
\e[m
2606 \e[32m+
\e[m
\e[32m border: 1px solid #777777;
\e[m
2607 \e[32m+
\e[m
\e[32m box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.5);
\e[m
2608 \e[32m+
\e[m
\e[32m background: none repeat scroll 0% 0% transparent;
\e[m
2609 \e[32m+
\e[m
\e[32m}
\e[m
2610 \e[32m+
\e[m
\e[32m.roo-upload-cropbox-body .roo-upload-cropbox-empty-notify {
\e[m
2611 \e[32m+
\e[m
\e[32m height: 100%;
\e[m
2612 \e[32m+
\e[m
\e[32m background-color: rgba(0, 0, 0, 0.5);
\e[m
2613 \e[32m+
\e[m
\e[32m color: #ffffff;
\e[m
2614 \e[32m+
\e[m
\e[32m font-weight: bold;
\e[m
2615 \e[32m+
\e[m
\e[32m font-size: 24px;
\e[m
2616 \e[32m+
\e[m
\e[32m text-align: center;
\e[m
2617 \e[32m+
\e[m
\e[32m padding-top: 50px;
\e[m
2618 \e[32m+
\e[m
\e[32m font-style: italic;
\e[m
2619 \e[32m+
\e[m
\e[32m}
\e[m
2620 \e[32m+
\e[m
\e[32m.roo-upload-cropbox-btn-group button {
\e[m
2621 \e[32m+
\e[m
\e[32m background-color: #000000;
\e[m
2622 \e[32m+
\e[m
\e[32m color: #ffffff;
\e[m
2623 \e[32m+
\e[m
\e[32m border-color: #333333;
\e[m
2624 \e[32m+
\e[m
\e[32m}
\e[m
2625 \e[32m+
\e[m
\e[32m.roo-upload-cropbox-error-notify {
\e[m
2626 \e[32m+
\e[m
\e[32m border-radius: 0px;
\e[m
2627 \e[32m+
\e[m
\e[32m text-align: center;
\e[m
2628 \e[32m+
\e[m
\e[32m padding: 0px !important;
\e[m
2629 \e[32m+
\e[m
\e[32m margin: 0px !important;
\e[m
2630 \e[32m+
\e[m
\e[32m position: absolute;
\e[m
2631 \e[32m+
\e[m
\e[32m top: 0;
\e[m
2632 \e[32m+
\e[m
\e[32m left: 0;
\e[m
2633 \e[32m+
\e[m
\e[32m}
\e[m
2634 \ No newline at end of file
\e[m
2635 \e[1mdiff --git a/examples/dialog/hello.html b/examples/dialog/hello.html
\e[m
2636 \e[1mindex ab43ed9999..ec001bf313 100644
\e[m
2637 \e[1m--- a/examples/dialog/hello.html
\e[m
2638 \e[1m+++ b/examples/dialog/hello.html
\e[m
2639 \e[36m@@ -1,27 +1,27 @@
\e[m
2640 \e[31m-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
\e[m
\r
2643 \e[31m-<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
\e[m
\r
2644 \e[31m-<title>Hello World Dialog Example</title>
\e[m
\r
2645 \e[32m+
\e[m
\e[32m<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
\e[m
2646 \e[32m+
\e[m
\e[32m<html>
\e[m
2647 \e[32m+
\e[m
\e[32m<head>
\e[m
2648 \e[32m+
\e[m
\e[32m<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
\e[m
2649 \e[32m+
\e[m
\e[32m<title>Hello World Dialog Example</title>
\e[m
2650 <link rel="stylesheet" type="text/css" href="../../css/roojs-debug.css"/>
\e[m
2651 <link rel="stylesheet" type="text/css" href="../../css/xtheme-slate.css"/>
\e[m
2653 <script type="text/javascript" src="../../roojs-debug.js"></script>
\e[m
2655 \e[31m- <script language="javascript" src="hello.js"></script>
\e[m
\r
2657 \e[31m-<!-- Common Styles for the examples -->
\e[m
\r
2658 \e[31m-<link rel="stylesheet" type="text/css" href="../examples.css" />
\e[m
\r
2659 \e[31m-</head>
\e[m
\r
2661 \e[31m-<script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
\e[m
\r
2663 \e[31m-<h1>Hello World Dialog</h1>
\e[m
\r
2664 \e[31m-<p>This example shows how to create a very simple modal BasicDialog with "autoTabs".</p>
\e[m
\r
2665 \e[31m-<input type="button" id="show-dialog-btn" value="Hello World" /><br /><br />
\e[m
\r
2666 \e[32m+
\e[m
\e[41m
\e[m
2667 \e[32m+
\e[m
\e[32m <script language="javascript" src="hello.js"></script>
\e[m
2668 \e[32m+
\e[m
\e[41m
\e[m
2669 \e[32m+
\e[m
\e[32m<!-- Common Styles for the examples -->
\e[m
2670 \e[32m+
\e[m
\e[32m<link rel="stylesheet" type="text/css" href="../examples.css" />
\e[m
2671 \e[32m+
\e[m
\e[32m</head>
\e[m
2672 \e[32m+
\e[m
\e[32m<body>
\e[m
2673 \e[32m+
\e[m
\e[32m<script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
\e[m
2675 \e[32m+
\e[m
\e[32m<h1>Hello World Dialog</h1>
\e[m
2676 \e[32m+
\e[m
\e[32m<p>This example shows how to create a very simple modal BasicDialog with "autoTabs".</p>
\e[m
2677 \e[32m+
\e[m
\e[32m<input type="button" id="show-dialog-btn" value="Hello World" /><br /><br />
\e[m
2678 <p>Note that the js is not minified so it is readable. See
\e[m
2679 \e[31m-<button type="button" onclick="RooDocs.viewSource.show('/hello.js')">hello.js</button>for the full source code.</p>
\e[m
\r
2680 \e[31m-Here's snapshot of the code that creates the dialog:
\e[m
\r
2681 \e[32m+
\e[m
\e[32m<button type="button" onclick="RooDocs.viewSource.show('/hello.js')">hello.js</button>for the full source code.</p>
\e[m
2682 \e[32m+
\e[m
\e[32mHere's snapshot of the code that creates the dialog:
\e[m
2683 <pre class="code"><code>Roo.BLANK_IMAGE_URL = "../../images/default/s.gif";
\e[m
2686 \e[36m@@ -121,29 +121,29 @@
\e[m
\e[mRoo.onReady(function() {
\e[m
2687 Roo.get('show-dialog-btn').on('click',function () {
\e[m
2688 HelloWorld.show({ _el : this});
\e[m
2691 \e[31m-</code></pre>
\e[m
\r
2693 \e[31m- <!-- The dialog is created from existing markup.
\e[m
\r
2694 \e[31m- The inline styles just hide it until it created and should be in a stylesheet -->
\e[m
\r
2695 \e[31m- <div id="hello-dlg" style="visibility:hidden;position:absolute;top:0px;">
\e[m
\r
2696 \e[31m- <div class="x-dlg-hd">Hello Dialog</div>
\e[m
\r
2697 \e[31m- <div class="x-dlg-bd">
\e[m
\r
2698 \e[31m- <!-- Auto create tab 1 -->
\e[m
\r
2699 \e[31m- <div class="x-dlg-tab" title="Hello World 1">
\e[m
\r
2700 \e[31m- <!-- Nested "inner-tab" to safely add padding -->
\e[m
\r
2701 \e[31m- <div class="inner-tab">
\e[m
\r
2702 \e[31m- Hello...<br><br><br>
\e[m
\r
2703 \e[31m- </div>
\e[m
\r
2704 \e[31m- </div>
\e[m
\r
2705 \e[31m- <!-- Auto create tab 2 -->
\e[m
\r
2706 \e[31m- <div class="x-dlg-tab" title="Hello World 2">
\e[m
\r
2707 \e[31m- <div class="inner-tab">
\e[m
\r
2708 \e[31m- ... World!
\e[m
\r
2709 \e[31m- </div>
\e[m
\r
2710 \e[31m- </div>
\e[m
\r
2711 \e[31m- </div>
\e[m
\r
2712 \e[31m- </div>
\e[m
\r
2714 \e[31m-</body>
\e[m
\r
2715 \e[31m-</html>
\e[m
\r
2716 \e[32m+
\e[m
\e[32m});
\e[m
2717 \e[32m+
\e[m
\e[32m</code></pre>
\e[m
2719 \e[32m+
\e[m
\e[32m <!-- The dialog is created from existing markup.
\e[m
2720 \e[32m+
\e[m
\e[32m The inline styles just hide it until it created and should be in a stylesheet -->
\e[m
2721 \e[32m+
\e[m
\e[32m <div id="hello-dlg" style="visibility:hidden;position:absolute;top:0px;">
\e[m
2722 \e[32m+
\e[m
\e[32m <div class="x-dlg-hd">Hello Dialog</div>
\e[m
2723 \e[32m+
\e[m
\e[32m <div class="x-dlg-bd">
\e[m
2724 \e[32m+
\e[m
\e[32m <!-- Auto create tab 1 -->
\e[m
2725 \e[32m+
\e[m
\e[32m <div class="x-dlg-tab" title="Hello World 1">
\e[m
2726 \e[32m+
\e[m
\e[32m <!-- Nested "inner-tab" to safely add padding -->
\e[m
2727 \e[32m+
\e[m
\e[32m <div class="inner-tab">
\e[m
2728 \e[32m+
\e[m
\e[32m Hello...<br><br><br>
\e[m
2729 \e[32m+
\e[m
\e[32m </div>
\e[m
2730 \e[32m+
\e[m
\e[32m </div>
\e[m
2731 \e[32m+
\e[m
\e[32m <!-- Auto create tab 2 -->
\e[m
2732 \e[32m+
\e[m
\e[32m <div class="x-dlg-tab" title="Hello World 2">
\e[m
2733 \e[32m+
\e[m
\e[32m <div class="inner-tab">
\e[m
2734 \e[32m+
\e[m
\e[32m ... World!
\e[m
2735 \e[32m+
\e[m
\e[32m </div>
\e[m
2736 \e[32m+
\e[m
\e[32m </div>
\e[m
2737 \e[32m+
\e[m
\e[32m </div>
\e[m
2738 \e[32m+
\e[m
\e[32m </div>
\e[m
2739 \e[32m+
\e[m
\e[32m</div>
\e[m
2740 \e[32m+
\e[m
\e[32m</body>
\e[m
2741 \e[32m+
\e[m
\e[32m</html>
\e[m
2742 \e[1mdiff --git a/examples/dialog/test-2.html b/examples/dialog/test-2.html
\e[m
2743 \e[1mnew file mode 100644
\e[m
2744 \e[1mindex 0000000000..e26d6ee586
\e[m
2745 \e[1m--- /dev/null
\e[m
2746 \e[1m+++ b/examples/dialog/test-2.html
\e[m
2747 \e[36m@@ -0,0 +1,30 @@
\e[m
2748 \e[32m+
\e[m
\e[32m<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
\e[m
2749 \e[32m+
\e[m
\e[32m<html>
\e[m
2750 \e[32m+
\e[m
\e[32m<head>
\e[m
2751 \e[32m+
\e[m
\e[32m <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
\e[m
2752 \e[32m+
\e[m
\e[32m <title>Upload Cropbox Dialog Example</title>
\e[m
2754 \e[32m+
\e[m
\e[32m <link rel="stylesheet" type="text/css" href="../../css/roojs-debug.css"/>
\e[m
2755 \e[32m+
\e[m
\e[32m <link rel="stylesheet" type="text/css" href="../../css-bootstrap/font-awesome.css"/>
\e[m
2756 \e[32m+
\e[m
\e[32m <link rel="stylesheet" type="text/css" href="../../css/upload-cropbox.css"/>
\e[m
2757 \e[32m+
\e[m
\e[32m <link rel="stylesheet" type="text/css" href="../../css/alert.css"/>
\e[m
2758 \e[32m+
\e[m
\e[32m <link rel="stylesheet" type="text/css" href="../../css/buttons.css"/>
\e[m
2759 \e[32m+
\e[m
\e[32m <link rel="stylesheet" type="text/css" href="../../css/button-groups.css"/>
\e[m
2760 \e[32m+
\e[m
\e[32m <link rel="stylesheet" type="text/css" href="../examples.css" />
\e[m
2762 \e[32m+
\e[m
\e[32m <script type="text/javascript" src="../../roojs-debug.js"></script>
\e[m
\e[41m
\e[m
2763 \e[32m+
\e[m
\e[32m <script language="javascript" src="test-2.js"></script>
\e[m
2764 \e[32m+
\e[m
\e[32m <script type="text/javascript" src="../examples.js"></script>
\e[m
2766 \e[32m+
\e[m
\e[32m</head>
\e[m
2767 \e[32m+
\e[m
\e[32m<body>
\e[m
2769 \e[32m+
\e[m
\e[32m<h1>Upload Cropbox Dialog</h1>
\e[m
2770 \e[32m+
\e[m
\e[32m<p>This example shows how to create a very simple BasicDialog with "UploadCropbox".</p>
\e[m
2771 \e[32m+
\e[m
\e[32m<input type="button" id="show-dialog-btn" value="test" /><br /><br />
\e[m
2772 \e[32m+
\e[m
\e[32m<p>Note that the js is not minified so it is readable. See
\e[m
\e[41m
\e[m
2773 \e[32m+
\e[m
\e[32m<button type="button" onclick="RooDocs.viewSource.show('../../../Roo/dialog/UploadCropbox.js')">UploadCropbox.js</button>for the full source code.</p>
\e[m
2775 \e[32m+
\e[m
\e[32m</div>
\e[m
2776 \e[32m+
\e[m
\e[32m</body>
\e[m
2777 \e[32m+
\e[m
\e[32m</html>
\e[m
2778 \e[1mdiff --git a/examples/dialog/test-2.js b/examples/dialog/test-2.js
\e[m
2779 \e[1mnew file mode 100644
\e[m
2780 \e[1mindex 0000000000..c4dcdedd7e
\e[m
2781 \e[1m--- /dev/null
\e[m
2782 \e[1m+++ b/examples/dialog/test-2.js
\e[m
2783 \e[36m@@ -0,0 +1,171 @@
\e[m
2784 \e[32m+
\e[m
\e[32mvar uploadCropbox = {
\e[m
2785 \e[32m+
\e[m
\e[32m dialog : false,
\e[m
2786 \e[32m+
\e[m
\e[32m callback : false,
\e[m
2788 \e[32m+
\e[m
\e[32m show : function(data, cb)
\e[m
2789 \e[32m+
\e[m
\e[32m {
\e[m
2790 \e[32m+
\e[m
\e[32m if (!this.dialog) {
\e[m
2791 \e[32m+
\e[m
\e[32m this.create();
\e[m
2792 \e[32m+
\e[m
\e[32m }
\e[m
2794 \e[32m+
\e[m
\e[32m this.callback = cb;
\e[m
2795 \e[32m+
\e[m
\e[32m this.data = data;
\e[m
2796 \e[32m+
\e[m
\e[32m this.dialog.show();
\e[m
2797 \e[32m+
\e[m
\e[32m },
\e[m
2799 \e[32m+
\e[m
\e[32m create : function()
\e[m
2800 \e[32m+
\e[m
\e[32m {
\e[m
2801 \e[32m+
\e[m
\e[32m var _this = this;
\e[m
2802 \e[32m+
\e[m
\e[32m this.dialog = Roo.factory({
\e[m
2803 \e[32m+
\e[m
\e[32m xns : Roo,
\e[m
2804 \e[32m+
\e[m
\e[32m xtype : 'LayoutDialog',
\e[m
2805 \e[32m+
\e[m
\e[32m width : 800,
\e[m
2806 \e[32m+
\e[m
\e[32m height : 600,
\e[m
2807 \e[32m+
\e[m
\e[32m center : {
\e[m
2808 \e[32m+
\e[m
\e[32m xns : Roo,
\e[m
2809 \e[32m+
\e[m
\e[32m xtype : 'LayoutRegion'
\e[m
2810 \e[32m+
\e[m
\e[32m },
\e[m
2811 \e[32m+
\e[m
\e[32m items : [
\e[m
2812 \e[32m+
\e[m
\e[32m {
\e[m
2813 \e[32m+
\e[m
\e[32m xtype: 'ContentPanel',
\e[m
2814 \e[32m+
\e[m
\e[32m xns: Roo,
\e[m
2815 \e[32m+
\e[m
\e[32m region : "center",
\e[m
2816 \e[32m+
\e[m
\e[32m items : [
\e[m
2817 \e[32m+
\e[m
\e[32m {
\e[m
2818 \e[32m+
\e[m
\e[32m xtype : 'UploadCropbox',
\e[m
2819 \e[32m+
\e[m
\e[32m xns : Roo.dialog,
\e[m
2820 \e[32m+
\e[m
\e[32m minWidth : 720,
\e[m
2821 \e[32m+
\e[m
\e[32m minHeight: 480,
\e[m
2822 \e[32m+
\e[m
\e[32m buttons: [],
\e[m
2823 \e[32m+
\e[m
\e[32m listeners : {
\e[m
2824 \e[32m+
\e[m
\e[32m render : function (_self)
\e[m
2825 \e[32m+
\e[m
\e[32m {
\e[m
2826 \e[32m+
\e[m
\e[32m _this.cropbox = _self;
\e[m
2827 \e[32m+
\e[m
\e[32m },
\e[m
2828 \e[32m+
\e[m
\e[32m loadcanvas : function (_self, imageEl)
\e[m
2829 \e[32m+
\e[m
\e[32m {
\e[m
2830 \e[32m+
\e[m
\e[32m if(imageEl.OriginWidth < 720) {
\e[m
2831 \e[32m+
\e[m
\e[32m Roo.Msg.show({
\e[m
2832 \e[32m+
\e[m
\e[32m title: 'Error',
\e[m
2833 \e[32m+
\e[m
\e[32m msg: "Image width should be at least 720",
\e[m
2834 \e[32m+
\e[m
\e[32m buttons: {ok : true},
\e[m
2835 \e[32m+
\e[m
\e[32m fn: function(res) {
\e[m
2836 \e[32m+
\e[m
\e[32m _this.cropbox.selectorEl.dom.click();
\e[m
2837 \e[32m+
\e[m
\e[32m }
\e[m
2838 \e[32m+
\e[m
\e[32m });
\e[m
2839 \e[32m+
\e[m
\e[32m return false;
\e[m
2840 \e[32m+
\e[m
\e[32m }
\e[m
2841 \e[32m+
\e[m
\e[32m }
\e[m
2842 \e[32m+
\e[m
\e[32m }
\e[m
2843 \e[32m+
\e[m
\e[32m }
\e[m
2844 \e[32m+
\e[m
\e[32m ]
\e[m
2845 \e[32m+
\e[m
\e[32m }
\e[m
2846 \e[32m+
\e[m
\e[32m ],
\e[m
2847 \e[32m+
\e[m
\e[32m buttons : [
\e[m
2848 \e[32m+
\e[m
\e[32m {
\e[m
2849 \e[32m+
\e[m
\e[32m xtype : 'Button',
\e[m
2850 \e[32m+
\e[m
\e[32m xns : Roo,
\e[m
2851 \e[32m+
\e[m
\e[32m text : 'Save',
\e[m
2852 \e[32m+
\e[m
\e[32m listeners : {
\e[m
2853 \e[32m+
\e[m
\e[32m click : function () {
\e[m
2854 \e[32m+
\e[m
\e[32m }
\e[m
\e[41m
\e[m
2855 \e[32m+
\e[m
\e[32m }
\e[m
2856 \e[32m+
\e[m
\e[32m },
\e[m
2857 \e[32m+
\e[m
\e[32m {
\e[m
2858 \e[32m+
\e[m
\e[32m xtype : 'Button',
\e[m
2859 \e[32m+
\e[m
\e[32m xns : Roo,
\e[m
2860 \e[32m+
\e[m
\e[32m text : 'Cancel',
\e[m
2861 \e[32m+
\e[m
\e[32m listeners : {
\e[m
2862 \e[32m+
\e[m
\e[32m click : function () {
\e[m
2863 \e[32m+
\e[m
\e[32m _this.dialog.hide()
\e[m
2864 \e[32m+
\e[m
\e[32m }
\e[m
\e[41m
\e[m
2865 \e[32m+
\e[m
\e[32m }
\e[m
2866 \e[32m+
\e[m
\e[32m }
\e[m
2867 \e[32m+
\e[m
\e[32m ]
\e[m
2868 \e[32m+
\e[m
\e[32m });
\e[m
2869 \e[32m+
\e[m
\e[32m }
\e[m
2870 \e[32m+
\e[m
\e[32m}
\e[m
2872 \e[32m+
\e[m
\e[32mvar test = {
\e[m
2874 \e[32m+
\e[m
\e[32m dialog : false,
\e[m
2875 \e[32m+
\e[m
\e[32m callback : false,
\e[m
2877 \e[32m+
\e[m
\e[32m show : function(data, cb)
\e[m
2878 \e[32m+
\e[m
\e[32m {
\e[m
2879 \e[32m+
\e[m
\e[32m if (!this.dialog) {
\e[m
2880 \e[32m+
\e[m
\e[32m this.create();
\e[m
2881 \e[32m+
\e[m
\e[32m }
\e[m
2883 \e[32m+
\e[m
\e[32m this.callback = cb;
\e[m
2884 \e[32m+
\e[m
\e[32m this.data = data;
\e[m
2885 \e[32m+
\e[m
\e[32m this.dialog.show();
\e[m
2886 \e[32m+
\e[m
\e[32m },
\e[m
2888 \e[32m+
\e[m
\e[32m create : function()
\e[m
2889 \e[32m+
\e[m
\e[32m {
\e[m
2890 \e[32m+
\e[m
\e[32m var _this = this;
\e[m
2891 \e[32m+
\e[m
\e[32m this.dialog = Roo.factory({
\e[m
2892 \e[32m+
\e[m
\e[32m xns : Roo,
\e[m
2893 \e[32m+
\e[m
\e[32m xtype : 'LayoutDialog',
\e[m
2894 \e[32m+
\e[m
\e[32m width : 600,
\e[m
2895 \e[32m+
\e[m
\e[32m height : 450,
\e[m
2896 \e[32m+
\e[m
\e[32m center : {
\e[m
2897 \e[32m+
\e[m
\e[32m xns : Roo,
\e[m
2898 \e[32m+
\e[m
\e[32m xtype : 'LayoutRegion'
\e[m
2899 \e[32m+
\e[m
\e[32m },
\e[m
2900 \e[32m+
\e[m
\e[32m items : [
\e[m
2901 \e[32m+
\e[m
\e[32m {
\e[m
2902 \e[32m+
\e[m
\e[32m xns : Roo,
\e[m
2903 \e[32m+
\e[m
\e[32m xtype: 'GridPanel',
\e[m
2904 \e[32m+
\e[m
\e[32m region : "center",
\e[m
2905 \e[32m+
\e[m
\e[32m grid : {
\e[m
2906 \e[32m+
\e[m
\e[32m xns : Roo.grid,
\e[m
2907 \e[32m+
\e[m
\e[32m xtype : 'Grid',
\e[m
2908 \e[32m+
\e[m
\e[32m cm : [
\e[m
2909 \e[32m+
\e[m
\e[32m {
\e[m
2910 \e[32m+
\e[m
\e[32m xns : Roo.grid,
\e[m
2911 \e[32m+
\e[m
\e[32m xtype : 'ColumnModel',
\e[m
2912 \e[32m+
\e[m
\e[32m header : 'test'
\e[m
2913 \e[32m+
\e[m
\e[32m }
\e[m
2914 \e[32m+
\e[m
\e[32m ],
\e[m
2915 \e[32m+
\e[m
\e[32m ds : {
\e[m
2916 \e[32m+
\e[m
\e[32m xns: Roo.data,
\e[m
2917 \e[32m+
\e[m
\e[32m xtype: 'Store'
\e[m
2918 \e[32m+
\e[m
\e[32m },
\e[m
2919 \e[32m+
\e[m
\e[32m toolbar : {
\e[m
2920 \e[32m+
\e[m
\e[32m xns: Roo,
\e[m
2921 \e[32m+
\e[m
\e[32m xtype: 'Toolbar',
\e[m
2922 \e[32m+
\e[m
\e[32m items : [
\e[m
2923 \e[32m+
\e[m
\e[32m {
\e[m
\e[41m
\e[m
2924 \e[32m+
\e[m
\e[32m xtype : 'Button',
\e[m
2925 \e[32m+
\e[m
\e[32m text : 'Add',
\e[m
2926 \e[32m+
\e[m
\e[32m listeners : {
\e[m
2927 \e[32m+
\e[m
\e[32m click : function () {
\e[m
2928 \e[32m+
\e[m
\e[32m uploadCropbox.show();
\e[m
2929 \e[32m+
\e[m
\e[32m document.body.onfocus = function(e) {
\e[m
2930 \e[32m+
\e[m
\e[32m document.body.onfocus = null;
\e[m
2931 \e[32m+
\e[m
\e[32m if(!uploadCropbox.cropbox.selectorEl.dom.files.length) {
\e[m
2932 \e[32m+
\e[m
\e[32m uploadCropbox.dialog.hide();
\e[m
2933 \e[32m+
\e[m
\e[32m }
\e[m
2934 \e[32m+
\e[m
\e[32m }
\e[m
2935 \e[32m+
\e[m
\e[32m uploadCropbox.cropbox.selectorEl.dom.click();
\e[m
2936 \e[32m+
\e[m
\e[32m }
\e[m
2937 \e[32m+
\e[m
\e[32m }
\e[m
2938 \e[32m+
\e[m
\e[32m }
\e[m
2939 \e[32m+
\e[m
\e[32m ]
\e[m
2940 \e[32m+
\e[m
\e[32m }
\e[m
2941 \e[32m+
\e[m
\e[32m }
\e[m
2942 \e[32m+
\e[m
\e[32m }
\e[m
2943 \e[32m+
\e[m
\e[32m ],
\e[m
2944 \e[32m+
\e[m
\e[32m });
\e[m
2945 \e[32m+
\e[m
\e[32m }
\e[m
2946 \e[32m+
\e[m
\e[32m}
\e[m
2948 \e[32m+
\e[m
\e[32mRoo.onReady(function() {
\e[m
2949 \e[32m+
\e[m
\e[41m
\e[m
2950 \e[32m+
\e[m
\e[32m Roo.get('show-dialog-btn').on('click',function () {
\e[m
2951 \e[32m+
\e[m
\e[32m test.show({});
\e[m
2952 \e[32m+
\e[m
\e[32m console.log(test);
\e[m
2953 \e[32m+
\e[m
\e[32m });
\e[m
2954 \e[32m+
\e[m
\e[32m});
\e[m
2955 \ No newline at end of file
\e[m
2956 \e[1mdiff --git a/examples/dialog/test.html b/examples/dialog/test.html
\e[m
2957 \e[1mnew file mode 100644
\e[m
2958 \e[1mindex 0000000000..ecb2a0afa3
\e[m
2959 \e[1m--- /dev/null
\e[m
2960 \e[1m+++ b/examples/dialog/test.html
\e[m
2961 \e[36m@@ -0,0 +1,29 @@
\e[m
2962 \e[32m+
\e[m
\e[32m<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
\e[m
2963 \e[32m+
\e[m
\e[32m<html>
\e[m
2964 \e[32m+
\e[m
\e[32m<head>
\e[m
2965 \e[32m+
\e[m
\e[32m <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
\e[m
2966 \e[32m+
\e[m
\e[32m <title>Upload Cropbox Dialog Example</title>
\e[m
2968 \e[32m+
\e[m
\e[32m <link rel="stylesheet" type="text/css" href="../../css/roojs-debug.css"/>
\e[m
2969 \e[32m+
\e[m
\e[32m <link rel="stylesheet" type="text/css" href="../../css-bootstrap/bootstrap.css"/>
\e[m
2970 \e[32m+
\e[m
\e[32m <link rel="stylesheet" type="text/css" href="../../css-bootstrap/font-awesome.css"/>
\e[m
2971 \e[32m+
\e[m
\e[32m <link rel="stylesheet" type="text/css" href="../../css-bootstrap/roojs-bootstrap-debug.css"/>
\e[m
2972 \e[32m+
\e[m
\e[32m <link rel="stylesheet" type="text/css" href="../examples.css" />
\e[m
2974 \e[32m+
\e[m
\e[32m <script type="text/javascript" src="../../roojs-debug.js"></script>
\e[m
\e[41m
\e[m
2975 \e[32m+
\e[m
\e[32m <script type="text/javascript" src="../../roojs-bootstrap-debug.js"></script>
\e[m
\e[41m
\e[m
2976 \e[32m+
\e[m
\e[32m <script language="javascript" src="test.js"></script>
\e[m
2977 \e[32m+
\e[m
\e[32m <script type="text/javascript" src="../examples.js"></script>
\e[m
2979 \e[32m+
\e[m
\e[32m</head>
\e[m
2980 \e[32m+
\e[m
\e[32m<body>
\e[m
2982 \e[32m+
\e[m
\e[32m<h1>Upload Cropbox Bootstrap</h1>
\e[m
2983 \e[32m+
\e[m
\e[32m<p>This example shows how to create a very simple modal BasicDialog with "autoTabs".</p>
\e[m
2984 \e[32m+
\e[m
\e[32m<input type="button" id="show-dialog-btn" value="test" /><br /><br />
\e[m
2985 \e[32m+
\e[m
\e[32m<p>Note that the js is not minified so it is readable. See
\e[m
\e[41m
\e[m
2986 \e[32m+
\e[m
\e[32m<button type="button" onclick="RooDocs.viewSource.show('../../../Roo/bootstrap/UploadCropbox.js')">test.js</button>for the full source code.</p>
\e[m
2988 \e[32m+
\e[m
\e[32m</div>
\e[m
2989 \e[32m+
\e[m
\e[32m</body>
\e[m
2990 \e[32m+
\e[m
\e[32m</html>
\e[m
2991 \e[1mdiff --git a/examples/dialog/test.js b/examples/dialog/test.js
\e[m
2992 \e[1mnew file mode 100644
\e[m
2993 \e[1mindex 0000000000..f08db909f3
\e[m
2994 \e[1m--- /dev/null
\e[m
2995 \e[1m+++ b/examples/dialog/test.js
\e[m
2996 \e[36m@@ -0,0 +1,94 @@
\e[m
2997 \e[32m+
\e[m
\e[32mvar test = {
\e[m
2999 \e[32m+
\e[m
\e[32m dialog : false,
\e[m
3000 \e[32m+
\e[m
\e[32m callback : false,
\e[m
3002 \e[32m+
\e[m
\e[32m show : function(data, cb)
\e[m
3003 \e[32m+
\e[m
\e[32m {
\e[m
3004 \e[32m+
\e[m
\e[32m if (!this.dialog) {
\e[m
3005 \e[32m+
\e[m
\e[32m this.create();
\e[m
3006 \e[32m+
\e[m
\e[32m }
\e[m
3008 \e[32m+
\e[m
\e[32m this.callback = cb;
\e[m
3009 \e[32m+
\e[m
\e[32m this.data = data;
\e[m
3010 \e[32m+
\e[m
\e[32m this.dialog.show();
\e[m
3011 \e[32m+
\e[m
\e[32m },
\e[m
3013 \e[32m+
\e[m
\e[32m create : function()
\e[m
3014 \e[32m+
\e[m
\e[32m {
\e[m
3015 \e[32m+
\e[m
\e[32m var _this = this;
\e[m
3016 \e[32m+
\e[m
\e[32m this.dialog = Roo.factory({
\e[m
3017 \e[32m+
\e[m
\e[32m xtype : 'Modal',
\e[m
3018 \e[32m+
\e[m
\e[32m xns : Roo.bootstrap,
\e[m
3019 \e[32m+
\e[m
\e[32m title : 'Upload an Image',
\e[m
3020 \e[32m+
\e[m
\e[32m buttons : Roo.bootstrap.Modal.OKCANCEL,
\e[m
3021 \e[32m+
\e[m
\e[32m items: [
\e[m
3022 \e[32m+
\e[m
\e[32m {
\e[m
3023 \e[32m+
\e[m
\e[32m xtype : 'Row',
\e[m
3024 \e[32m+
\e[m
\e[32m xns : Roo.bootstrap,
\e[m
3025 \e[32m+
\e[m
\e[32m items: [
\e[m
3026 \e[32m+
\e[m
\e[32m {
\e[m
3027 \e[32m+
\e[m
\e[32m xtype : 'Column',
\e[m
3028 \e[32m+
\e[m
\e[32m xns : Roo.bootstrap,
\e[m
3029 \e[32m+
\e[m
\e[32m items: [
\e[m
3030 \e[32m+
\e[m
\e[32m {
\e[m
3031 \e[32m+
\e[m
\e[32m xtype : 'UploadCropbox',
\e[m
3032 \e[32m+
\e[m
\e[32m xns : Roo.bootstrap,
\e[m
3033 \e[32m+
\e[m
\e[32m minWidth : 720,
\e[m
3034 \e[32m+
\e[m
\e[32m minHeight: 480,
\e[m
3035 \e[32m+
\e[m
\e[32m listeners : {
\e[m
3036 \e[32m+
\e[m
\e[32m arrange : function (_self, formData)
\e[m
3037 \e[32m+
\e[m
\e[32m {
\e[m
3038 \e[32m+
\e[m
\e[32m console.log("ARRANGE");
\e[m
3039 \e[32m+
\e[m
\e[32m console.log(formData);
\e[m
3040 \e[32m+
\e[m
\e[32m },
\e[m
3041 \e[32m+
\e[m
\e[32m crop : function (_self, data)
\e[m
3042 \e[32m+
\e[m
\e[32m {
\e[m
3043 \e[32m+
\e[m
\e[32m console.log("CROP");
\e[m
3044 \e[32m+
\e[m
\e[32m console.log(data);
\e[m
3045 \e[32m+
\e[m
\e[32m },
\e[m
3046 \e[32m+
\e[m
\e[32m resize : function (_self)
\e[m
3047 \e[32m+
\e[m
\e[32m {
\e[m
3048 \e[32m+
\e[m
\e[32m console.log("RESIZE");
\e[m
3049 \e[32m+
\e[m
\e[32m },
\e[m
3050 \e[32m+
\e[m
\e[32m rotate : function (_self)
\e[m
3051 \e[32m+
\e[m
\e[32m {
\e[m
3052 \e[32m+
\e[m
\e[32m console.log("ROTATE");
\e[m
3053 \e[32m+
\e[m
\e[32m },
\e[m
3054 \e[32m+
\e[m
\e[32m render : function (_self)
\e[m
3055 \e[32m+
\e[m
\e[32m {
\e[m
3056 \e[32m+
\e[m
\e[32m console.log("RENDER");
\e[m
3057 \e[32m+
\e[m
\e[32m console.log(_self);
\e[m
3058 \e[32m+
\e[m
\e[32m _this.cropbox = _self;
\e[m
3059 \e[32m+
\e[m
\e[32m }
\e[m
3060 \e[32m+
\e[m
\e[41m
\e[m
3061 \e[32m+
\e[m
\e[32m }
\e[m
3062 \e[32m+
\e[m
\e[32m }
\e[m
3063 \e[32m+
\e[m
\e[32m ]
\e[m
3064 \e[32m+
\e[m
\e[32m }
\e[m
3065 \e[32m+
\e[m
\e[32m ]
\e[m
3066 \e[32m+
\e[m
\e[32m }
\e[m
3067 \e[32m+
\e[m
\e[32m ],
\e[m
3068 \e[32m+
\e[m
\e[32m listeners : {
\e[m
3069 \e[32m+
\e[m
\e[32m btnclick : function (e)
\e[m
3070 \e[32m+
\e[m
\e[32m {
\e[m
3071 \e[32m+
\e[m
\e[32m console.log(e);
\e[m
3072 \e[32m+
\e[m
\e[32m if(e == 'cancel') {
\e[m
3073 \e[32m+
\e[m
\e[32m _this.dialog.hide();
\e[m
3074 \e[32m+
\e[m
\e[32m return;
\e[m
3075 \e[32m+
\e[m
\e[32m }
\e[m
3077 \e[32m+
\e[m
\e[32m _this.cropbox.crop();
\e[m
3078 \e[32m+
\e[m
\e[32m }
\e[m
3079 \e[32m+
\e[m
\e[32m }
\e[m
3080 \e[32m+
\e[m
\e[32m });
\e[m
3081 \e[32m+
\e[m
\e[32m }
\e[m
3082 \e[32m+
\e[m
\e[32m}
\e[m
3084 \e[32m+
\e[m
\e[32mRoo.onReady(function() {
\e[m
3085 \e[32m+
\e[m
\e[41m
\e[m
3086 \e[32m+
\e[m
\e[32m Roo.get('show-dialog-btn').on('click',function () {
\e[m
3087 \e[32m+
\e[m
\e[32m test.show({});
\e[m
3088 \e[32m+
\e[m
\e[32m console.log(test);
\e[m
3089 \e[32m+
\e[m
\e[32m });
\e[m
3090 \e[32m+
\e[m
\e[32m});
\e[m
3091 \ No newline at end of file
\e[m
3092 \e[1mdiff --git a/roojs-all.js b/roojs-all.js
\e[m
3093 \e[1mindex 9d9fc1f28f..f98434e789 100644
\e[m
3094 \e[1m--- a/roojs-all.js
\e[m
3095 \e[1m+++ b/roojs-all.js
\e[m
3096 \e[36m@@ -2544,9 +2544,9 @@
\e[m
\e[mreturn this.el.getUpdateManager();},_handleRefresh:function(A,B,C){if(!C||!this.
\e[m
3097 te.setWidth(A);}if(this.adjustments){A+=this.adjustments[0];B+=this.adjustments[1];}return {"width":A,"height":B};},setSize:function(A,B){if(this.fitToFrame&&!this.ignoreResize(A,B)){if(this.fitContainer&&this.resizeEl!=this.el){this.el.setSize(A,B);}var C=this.adjustForComponents(A,B);
\e[m
3098 this.resizeEl.setSize(this.autoWidth?"auto":C.width,this.autoHeight?"auto":C.height);this.fireEvent('resize',this,C.width,C.height);}},getTitle:function(){return this.title;},setTitle:function(A){this.title=A;if(this.region){this.region.updatePanelTitle(this,A);
\e[m
3099 }},isClosable:function(){return this.closable;},beforeSlide:function(){this.el.clip();this.resizeEl.clip();},afterSlide:function(){this.el.unclip();this.resizeEl.unclip();},refresh:function(){if(this.refreshDelegate){this.loaded=false;this.refreshDelegate();
\e[m
3100 \e[31m-}},destroy:function(){this.el.removeAllListeners();var A=document.createElement("span");A.appendChild(this.el.dom);A.innerHTML="";this.el.remove();this.el=null;},form:false,view:false,addxtype:function(A){if(A.xtype.match(/^Form$/)){var el;el=this.el.createChild();
\e[m
3101 \e[31m-this.form=new Roo.form.Form(A);if(this.form.allItems.length){this.form.render(el.dom);}return this.form;}if(['View','JsonView','DatePicker'].indexOf(A.xtype)>-1){A.el=this.el.appendChild(document.createElement("div"));var B=new Roo.factory(A);B.render&&B.render(false,'');
\e[m
3102 \e[31m-this.view=B;return B;}return false;}});
\e[m
3103 \e[32m+
\e[m
\e[32m}},destroy:function(){this.el.removeAllListeners();var A=document.createElement("span");A.appendChild(this.el.dom);A.innerHTML="";this.el.remove();this.el=null;},form:false,view:false,addxtype:function(A){if(A.xtype.match(/^UploadCropbox$/)){this.cropbox=new Roo.factory(A);
\e[m
3104 \e[32m+
\e[m
\e[32mthis.cropbox.render(this.el);return this.cropbox;}if(A.xtype.match(/^Form$/)){var el;el=this.el.createChild();this.form=new Roo.form.Form(A);if(this.form.allItems.length){this.form.render(el.dom);}return this.form;}if(['View','JsonView','DatePicker'].indexOf(A.xtype)>-1){A.el=this.el.appendChild(document.createElement("div"));
\e[m
3105 \e[32m+
\e[m
\e[32mvar B=new Roo.factory(A);B.render&&B.render(false,'');this.view=B;return B;}return false;}});
\e[m
3106 // Roo/GridPanel.js
\e[m
3107 Roo.GridPanel=function(A,B){if(typeof(A.grid)!='undefined'){B=A;A=B.grid;}this.wrapper=Roo.DomHelper.append(document.body,{tag:"div",cls:"x-layout-grid-wrapper x-layout-inactive-content"},true);this.wrapper.dom.appendChild(A.getGridEl().dom);Roo.GridPanel.superclass.constructor.call(this,this.wrapper,B);
\e[m
3108 if(this.toolbar){this.toolbar.el.insertBefore(this.wrapper.dom.firstChild);}if(this.footer&&!this.footer.el&&this.footer.xtype){this.footer.container=this.grid.getView().getFooterPanel(true);this.footer.dataSource=this.grid.dataSource;this.footer=Roo.factory(this.footer,Roo);
\e[m
3109 \e[36m@@ -2875,3 +2875,103 @@
\e[m
\e[mF.push("(typeof("+G+") == 'undefined')");});var H='(('+F.join(" || ")+") ? undef
\e[m
3110 }return "'"+A+H+C+")"+A+"'";};var B;if(Roo.isGecko){B="tpl.compiled = function(values, parent){ with(values) { return '"+tpl.body.replace(/(\r\n|\n)/g,'\\n').replace(/'/g,"\\'").replace(this.re,fn)+"';};};";}else{B=["tpl.compiled = function(values, parent){ with (values) { return ['"];
\e[m
3111 B.push(tpl.body.replace(/(\r\n|\n)/g,'\\n').replace(/'/g,"\\'").replace(this.re,fn));B.push("'].join('');};};");B=B.join('');}Roo.debug&&Roo.log(B.replace(/\\n/,'\n'));eval(B);return this;},applyTemplate:function(A){return this.master.compiled.call(this,A,{}
\e[m
3112 );},apply:function(){return this.applyTemplate.apply(this,arguments);}});Roo.XTemplate.from=function(el){el=Roo.getDom(el);return new Roo.XTemplate(el.value||el.innerHTML);};
\e[m
3113 \e[32m+
\e[m
\e[32m// Roo/dialog/namespace.js
\e[m
3114 \e[32m+
\e[m
\e[32mRoo.dialog={};
\e[m
3115 \e[32m+
\e[m
\e[32m// Roo/dialog/UploadCropbox.js
\e[m
3116 \e[32m+
\e[m
\e[32mRoo.dialog.UploadCropbox=function(A){console.log("Dialog UploadCropbox Constructor");Roo.dialog.UploadCropbox.superclass.constructor.call(this,A);this.addEvents({"beforeselectfile":true,"initial":true,"crop":true,"prepare":true,"exception":true,"beforeloadcanvas":true,"trash":true,"download":true,"footerbuttonclick":true,"resize":true,"rotate":true,"inspect":true,"upload":true,"arrange":true,"loadcanvas":true}
\e[m
3117 \e[32m+
\e[m
\e[32m);this.buttons=this.buttons||Roo.dialog.UploadCropbox.footer.STANDARD;};Roo.extend(Roo.dialog.UploadCropbox,Roo.Component,{emptyText:'Click to upload image',rotateNotify:'Image is too small to rotate',errorTimeout:3000,scale:0,baseScale:1,rotate:0,dragable:false,pinching:false,mouseX:0,mouseY:0,cropData:false,minWidth:300,minHeight:300,file:false,exif:{}
\e[m
3118 \e[32m+
\e[m
\e[32m,baseRotate:1,cropType:'image/jpeg',buttons:false,canvasLoaded:false,isDocument:false,method:'POST',paramName:'imageUpload',loadMask:true,loadingText:'Loading...',maskEl:false,getAutoCreate:function(){var A={tag:'div',cls:'roo-upload-cropbox',cn:[{tag:'input',cls:'roo-upload-cropbox-selector',type:'file'}
\e[m
3119 \e[32m+
\e[m
\e[32m,{tag:'div',cls:'roo-upload-cropbox-body',style:'cursor:pointer',cn:[{tag:'div',cls:'roo-upload-cropbox-preview'},{tag:'div',cls:'roo-upload-cropbox-thumb'},{tag:'div',cls:'roo-upload-cropbox-empty-notify',html:this.emptyText},{tag:'div',cls:'roo-upload-cropbox-error-notify alert alert-danger',html:this.rotateNotify}
\e[m
3120 \e[32m+
\e[m
\e[32m]},{tag:'div',cls:'roo-upload-cropbox-footer',cn:{tag:'div',cls:'btn-group btn-group-justified roo-upload-cropbox-btn-group',cn:[]}}]};return A;},onRender:function(ct,A){console.log("On Render");console.log(this);Roo.dialog.UploadCropbox.superclass.onRender.call(this,ct,A);
\e[m
3121 \e[32m+
\e[m
\e[32mif(this.el){if(this.el.attr('xtype')){this.el.attr('xtypex',this.el.attr('xtype'));this.el.dom.removeAttribute('xtype');this.initEvents();}}else{var B=Roo.apply({},this.getAutoCreate());B.id=this.id||Roo.id();if(this.cls){B.cls=(typeof(B.cls)=='undefined'?this.cls:B.cls)+' '+this.cls;
\e[m
3122 \e[32m+
\e[m
\e[32m}if(this.style){B.style=(typeof(B.style)=='undefined'?this.style:B.style)+'; '+this.style;}this.el=ct.createChild(B,A);this.initEvents();}if(this.buttons.length){Roo.each(this.buttons,function(bb){var C=this.el.select('.roo-upload-cropbox-footer div.roo-upload-cropbox-btn-group').first().createChild(bb);
\e[m
3123 \e[32m+
\e[m
\e[32mC.on('click',this.onFooterButtonClick.createDelegate(this,[bb.action],true));},this);}if(this.loadMask){this.maskEl=this.el;}},initEvents:function(){this.urlAPI=(window.createObjectURL&&window)||(window.URL&&URL.revokeObjectURL&&URL)||(window.webkitURL&&webkitURL);
\e[m
3124 \e[32m+
\e[m
\e[32mthis.bodyEl=this.el.select('.roo-upload-cropbox-body',true).first();this.bodyEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';this.selectorEl=this.el.select('.roo-upload-cropbox-selector',true).first();this.selectorEl.hide();this.previewEl=this.el.select('.roo-upload-cropbox-preview',true).first();
\e[m
3125 \e[32m+
\e[m
\e[32mthis.previewEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';this.thumbEl=this.el.select('.roo-upload-cropbox-thumb',true).first();this.thumbEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';this.thumbEl.hide();this.notifyEl=this.el.select('.roo-upload-cropbox-empty-notify',true).first();
\e[m
3126 \e[32m+
\e[m
\e[32mthis.notifyEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';this.errorEl=this.el.select('.roo-upload-cropbox-error-notify',true).first();this.errorEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';this.errorEl.hide();this.footerEl=this.el.select('.roo-upload-cropbox-footer',true).first();
\e[m
3127 \e[32m+
\e[m
\e[32mthis.footerEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';this.footerEl.hide();this.setThumbBoxSize();this.bind();this.resize();this.fireEvent('initial',this);},bind:function(){var A=this;window.addEventListener("resize",function(){A.resize();
\e[m
3128 \e[32m+
\e[m
\e[32m});this.bodyEl.on('click',this.beforeSelectFile,this);if(Roo.isTouch){this.bodyEl.on('touchstart',this.onTouchStart,this);this.bodyEl.on('touchmove',this.onTouchMove,this);this.bodyEl.on('touchend',this.onTouchEnd,this);}if(!Roo.isTouch){this.bodyEl.on('mousedown',this.onMouseDown,this);
\e[m
3129 \e[32m+
\e[m
\e[32mthis.bodyEl.on('mousemove',this.onMouseMove,this);var B=(/Firefox/i.test(navigator.userAgent))?'DOMMouseScroll':'mousewheel';this.bodyEl.on(B,this.onMouseWheel,this);Roo.get(document).on('mouseup',this.onMouseUp,this);}this.selectorEl.on('change',this.onFileSelected,this);
\e[m
3130 \e[32m+
\e[m
\e[32m},reset:function(){this.scale=0;this.baseScale=1;this.rotate=0;this.baseRotate=1;this.dragable=false;this.pinching=false;this.mouseX=0;this.mouseY=0;this.cropData=false;this.notifyEl.dom.innerHTML=this.emptyText;},resize:function(){if(this.fireEvent('resize',this)!=false){this.setThumbBoxPosition();
\e[m
3131 \e[32m+
\e[m
\e[32mthis.setCanvasPosition();}},onFooterButtonClick:function(e,el,o,A){switch(A){case 'rotate-left':this.onRotateLeft(e);break;case 'rotate-right':this.onRotateRight(e);break;case 'picture':this.beforeSelectFile(e);break;case 'trash':this.trash(e);break;case 'crop':this.crop(e);
\e[m
3132 \e[32m+
\e[m
\e[32mbreak;case 'download':this.download(e);break;default:break;}this.fireEvent('footerbuttonclick',this,A);},beforeSelectFile:function(e){e.preventDefault();if(this.fireEvent('beforeselectfile',this)!=false){this.selectorEl.dom.click();}},onFileSelected:function(e){e.preventDefault();
\e[m
3133 \e[32m+
\e[m
\e[32mif(typeof(this.selectorEl.dom.files)=='undefined'||!this.selectorEl.dom.files.length){return;}var A=this.selectorEl.dom.files[0];if(this.fireEvent('inspect',this,A)!=false){this.prepare(A);}},trash:function(e){this.fireEvent('trash',this);},download:function(e){this.fireEvent('download',this);
\e[m
3134 \e[32m+
\e[m
\e[32m},loadCanvas:function(A){if(this.fireEvent('beforeloadcanvas',this,A)!=false){this.reset();this.imageEl=document.createElement('img');var B=this;this.imageEl.addEventListener("load",function(){B.onLoadCanvas();});this.imageEl.src=A;}},onLoadCanvas:function(){this.imageEl.OriginWidth=this.imageEl.naturalWidth||this.imageEl.width;
\e[m
3135 \e[32m+
\e[m
\e[32mthis.imageEl.OriginHeight=this.imageEl.naturalHeight||this.imageEl.height;if(this.fireEvent('loadcanvas',this,this.imageEl)!=false){this.bodyEl.un('click',this.beforeSelectFile,this);this.notifyEl.hide();this.thumbEl.show();this.footerEl.show();this.baseRotateLevel();
\e[m
3136 \e[32m+
\e[m
\e[32mif(this.isDocument){this.setThumbBoxSize();}this.setThumbBoxPosition();this.baseScaleLevel();this.draw();this.resize();this.canvasLoaded=true;}if(this.loadMask){this.maskEl.unmask();}},setCanvasPosition:function(){if(!this.canvasEl){return;}var pw=Math.ceil((this.bodyEl.getWidth()-this.canvasEl.width)/2);
\e[m
3137 \e[32m+
\e[m
\e[32mvar ph=Math.ceil((this.bodyEl.getHeight()-this.canvasEl.height)/2);this.previewEl.setLeft(pw);this.previewEl.setTop(ph);},onMouseDown:function(e){e.stopEvent();this.dragable=true;this.pinching=false;if(this.isDocument&&(this.canvasEl.width<this.thumbEl.getWidth()||this.canvasEl.height<this.thumbEl.getHeight())){this.dragable=false;
\e[m
3138 \e[32m+
\e[m
\e[32mreturn;}this.mouseX=Roo.isTouch?e.browserEvent.touches[0].pageX:e.getPageX();this.mouseY=Roo.isTouch?e.browserEvent.touches[0].pageY:e.getPageY();},onMouseMove:function(e){e.stopEvent();if(!this.canvasLoaded){return;}if(!this.dragable){return;}var A=Math.ceil(this.thumbEl.getLeft(true));
\e[m
3139 \e[32m+
\e[m
\e[32mvar B=Math.ceil(this.thumbEl.getTop(true));var C=Math.ceil(A+this.thumbEl.getWidth()-this.canvasEl.width);var D=Math.ceil(B+this.thumbEl.getHeight()-this.canvasEl.height);var x=Roo.isTouch?e.browserEvent.touches[0].pageX:e.getPageX();var y=Roo.isTouch?e.browserEvent.touches[0].pageY:e.getPageY();
\e[m
3140 \e[32m+
\e[m
\e[32mx=x-this.mouseX;y=y-this.mouseY;var E=Math.ceil(x+this.previewEl.getLeft(true));var F=Math.ceil(y+this.previewEl.getTop(true));E=(A<E)?A:((C>E)?C:E);F=(B<F)?B:((D>F)?D:F);this.previewEl.setLeft(E);this.previewEl.setTop(F);this.mouseX=Roo.isTouch?e.browserEvent.touches[0].pageX:e.getPageX();
\e[m
3141 \e[32m+
\e[m
\e[32mthis.mouseY=Roo.isTouch?e.browserEvent.touches[0].pageY:e.getPageY();},onMouseUp:function(e){e.stopEvent();this.dragable=false;},onMouseWheel:function(e){e.stopEvent();this.startScale=this.scale;this.scale=(e.getWheelDelta()==1)?(this.scale+1):(this.scale-1);
\e[m
3142 \e[32m+
\e[m
\e[32mif(!this.zoomable()){this.scale=this.startScale;return;}this.draw();return;},zoomable:function(){var A=this.thumbEl.getWidth()/this.minWidth;if(this.minWidth<this.minHeight){A=this.thumbEl.getHeight()/this.minHeight;}var B=Math.ceil(this.imageEl.OriginWidth*this.getScaleLevel()/A);
\e[m
3143 \e[32m+
\e[m
\e[32mvar C=Math.ceil(this.imageEl.OriginHeight*this.getScaleLevel()/A);if(this.isDocument&&(this.rotate==0||this.rotate==180)&&(B>this.imageEl.OriginWidth||C>this.imageEl.OriginHeight||(B<this.minWidth&&C<this.minHeight))){return false;}if(this.isDocument&&(this.rotate==90||this.rotate==270)&&(B>this.imageEl.OriginWidth||C>this.imageEl.OriginHeight||(B<this.minHeight&&C<this.minWidth))){return false;
\e[m
3144 \e[32m+
\e[m
\e[32m}if(!this.isDocument&&(this.rotate==0||this.rotate==180)&&(B<this.minWidth||B>this.imageEl.OriginWidth||C<this.minHeight||C>this.imageEl.OriginHeight)){return false;}if(!this.isDocument&&(this.rotate==90||this.rotate==270)&&(B<this.minHeight||B>this.imageEl.OriginWidth||C<this.minWidth||C>this.imageEl.OriginHeight)){return false;
\e[m
3145 \e[32m+
\e[m
\e[32m}return true;},onRotateLeft:function(e){if(!this.isDocument&&(this.canvasEl.height<this.thumbEl.getWidth()||this.canvasEl.width<this.thumbEl.getHeight())){var A=this.thumbEl.getWidth()/this.minWidth;var bw=Math.ceil(this.canvasEl.width/this.getScaleLevel());
\e[m
3146 \e[32m+
\e[m
\e[32mvar bh=Math.ceil(this.canvasEl.height/this.getScaleLevel());this.startScale=this.scale;while(this.getScaleLevel()<A){this.scale=this.scale+1;if(!this.zoomable()){break;}if(Math.ceil(bw*this.getScaleLevel())<this.thumbEl.getHeight()||Math.ceil(bh*this.getScaleLevel())<this.thumbEl.getWidth()){continue;
\e[m
3147 \e[32m+
\e[m
\e[32m}this.rotate=(this.rotate<90)?270:this.rotate-90;this.draw();return;}this.scale=this.startScale;this.onRotateFail();return false;}this.rotate=(this.rotate<90)?270:this.rotate-90;if(this.isDocument){this.setThumbBoxSize();this.setThumbBoxPosition();this.setCanvasPosition();
\e[m
3148 \e[32m+
\e[m
\e[32m}this.draw();this.fireEvent('rotate',this,'left');},onRotateRight:function(e){if(!this.isDocument&&(this.canvasEl.height<this.thumbEl.getWidth()||this.canvasEl.width<this.thumbEl.getHeight())){var A=this.thumbEl.getWidth()/this.minWidth;var bw=Math.ceil(this.canvasEl.width/this.getScaleLevel());
\e[m
3149 \e[32m+
\e[m
\e[32mvar bh=Math.ceil(this.canvasEl.height/this.getScaleLevel());this.startScale=this.scale;while(this.getScaleLevel()<A){this.scale=this.scale+1;if(!this.zoomable()){break;}if(Math.ceil(bw*this.getScaleLevel())<this.thumbEl.getHeight()||Math.ceil(bh*this.getScaleLevel())<this.thumbEl.getWidth()){continue;
\e[m
3150 \e[32m+
\e[m
\e[32m}this.rotate=(this.rotate>180)?0:this.rotate+90;this.draw();return;}this.scale=this.startScale;this.onRotateFail();return false;}this.rotate=(this.rotate>180)?0:this.rotate+90;if(this.isDocument){this.setThumbBoxSize();this.setThumbBoxPosition();this.setCanvasPosition();
\e[m
3151 \e[32m+
\e[m
\e[32m}this.draw();this.fireEvent('rotate',this,'right');},onRotateFail:function(){this.errorEl.show(true);var A=this;(function(){A.errorEl.hide(true);}).defer(this.errorTimeout);},draw:function(){this.previewEl.dom.innerHTML='';var A=document.createElement("canvas");
\e[m
3152 \e[32m+
\e[m
\e[32mvar B=A.getContext("2d");A.width=this.imageEl.OriginWidth*this.getScaleLevel();A.height=this.imageEl.OriginWidth*this.getScaleLevel();var C=this.imageEl.OriginWidth/2;if(this.imageEl.OriginWidth<this.imageEl.OriginHeight){A.width=this.imageEl.OriginHeight*this.getScaleLevel();
\e[m
3153 \e[32m+
\e[m
\e[32mA.height=this.imageEl.OriginHeight*this.getScaleLevel();C=this.imageEl.OriginHeight/2;}B.scale(this.getScaleLevel(),this.getScaleLevel());B.translate(C,C);B.rotate(this.rotate*Math.PI/180);B.drawImage(this.imageEl,0,0,this.imageEl.OriginWidth,this.imageEl.OriginHeight,C*-1,C*-1,this.imageEl.OriginWidth,this.imageEl.OriginHeight);
\e[m
3154 \e[32m+
\e[m
\e[32mthis.canvasEl=document.createElement("canvas");this.contextEl=this.canvasEl.getContext("2d");switch(this.rotate){case 0:this.canvasEl.width=this.imageEl.OriginWidth*this.getScaleLevel();this.canvasEl.height=this.imageEl.OriginHeight*this.getScaleLevel();this.contextEl.drawImage(A,0,0,this.canvasEl.width,this.canvasEl.height,0,0,this.canvasEl.width,this.canvasEl.height);
\e[m
3155 \e[32m+
\e[m
\e[32mbreak;case 90:this.canvasEl.width=this.imageEl.OriginHeight*this.getScaleLevel();this.canvasEl.height=this.imageEl.OriginWidth*this.getScaleLevel();if(this.imageEl.OriginWidth>this.imageEl.OriginHeight){this.contextEl.drawImage(A,Math.abs(this.canvasEl.width-this.canvasEl.height),0,this.canvasEl.width,this.canvasEl.height,0,0,this.canvasEl.width,this.canvasEl.height);
\e[m
3156 \e[32m+
\e[m
\e[32mbreak;}this.contextEl.drawImage(A,0,0,this.canvasEl.width,this.canvasEl.height,0,0,this.canvasEl.width,this.canvasEl.height);break;case 180:this.canvasEl.width=this.imageEl.OriginWidth*this.getScaleLevel();this.canvasEl.height=this.imageEl.OriginHeight*this.getScaleLevel();
\e[m
3157 \e[32m+
\e[m
\e[32mif(this.imageEl.OriginWidth>this.imageEl.OriginHeight){this.contextEl.drawImage(A,0,Math.abs(this.canvasEl.width-this.canvasEl.height),this.canvasEl.width,this.canvasEl.height,0,0,this.canvasEl.width,this.canvasEl.height);break;}this.contextEl.drawImage(A,Math.abs(this.canvasEl.width-this.canvasEl.height),0,this.canvasEl.width,this.canvasEl.height,0,0,this.canvasEl.width,this.canvasEl.height);
\e[m
3158 \e[32m+
\e[m
\e[32mbreak;case 270:this.canvasEl.width=this.imageEl.OriginHeight*this.getScaleLevel();this.canvasEl.height=this.imageEl.OriginWidth*this.getScaleLevel();if(this.imageEl.OriginWidth>this.imageEl.OriginHeight){this.contextEl.drawImage(A,0,0,this.canvasEl.width,this.canvasEl.height,0,0,this.canvasEl.width,this.canvasEl.height);
\e[m
3159 \e[32m+
\e[m
\e[32mbreak;}this.contextEl.drawImage(A,0,Math.abs(this.canvasEl.width-this.canvasEl.height),this.canvasEl.width,this.canvasEl.height,0,0,this.canvasEl.width,this.canvasEl.height);break;default:break;}this.previewEl.appendChild(this.canvasEl);this.setCanvasPosition();
\e[m
3160 \e[32m+
\e[m
\e[32m},crop:function(){if(!this.canvasLoaded){return;}var A=document.createElement("canvas");var B=A.getContext("2d");A.width=(this.imageEl.OriginWidth>this.imageEl.OriginHeight)?this.imageEl.OriginWidth:this.imageEl.OriginHeight;A.height=(this.imageEl.OriginWidth>this.imageEl.OriginHeight)?this.imageEl.OriginWidth:this.imageEl.OriginHeight;
\e[m
3161 \e[32m+
\e[m
\e[32mvar C=A.width/2;B.translate(C,C);B.rotate(this.rotate*Math.PI/180);B.drawImage(this.imageEl,0,0,this.imageEl.OriginWidth,this.imageEl.OriginHeight,C*-1,C*-1,this.imageEl.OriginWidth,this.imageEl.OriginHeight);var D=document.createElement("canvas");var E=D.getContext("2d");
\e[m
3162 \e[32m+
\e[m
\e[32mD.width=this.minWidth;D.height=this.minHeight;switch(this.rotate){case 0:var F=(this.thumbEl.getWidth()/this.getScaleLevel()>this.imageEl.OriginWidth)?this.imageEl.OriginWidth:(this.thumbEl.getWidth()/this.getScaleLevel());var G=(this.thumbEl.getHeight()/this.getScaleLevel()>this.imageEl.OriginHeight)?this.imageEl.OriginHeight:(this.thumbEl.getHeight()/this.getScaleLevel());
\e[m
3163 \e[32m+
\e[m
\e[32mvar x=(this.thumbEl.getLeft(true)>this.previewEl.getLeft(true))?0:((this.previewEl.getLeft(true)-this.thumbEl.getLeft(true))/this.getScaleLevel());var y=(this.thumbEl.getTop(true)>this.previewEl.getTop(true))?0:((this.previewEl.getTop(true)-this.thumbEl.getTop(true))/this.getScaleLevel());
\e[m
3164 \e[32m+
\e[m
\e[32mvar H=this.minWidth-2*x;var I=this.minHeight-2*y;var J=1;if((x==0&&y==0)||(x==0&&y>0)){J=H/F;}if(x>0&&y==0){J=I/G;}if(x>0&&y>0){J=H/F;if(F<G){J=I/G;}}E.scale(J,J);var sx=Math.min(this.canvasEl.width-this.thumbEl.getWidth(),this.thumbEl.getLeft(true)-this.previewEl.getLeft(true));
\e[m
3165 \e[32m+
\e[m
\e[32mvar sy=Math.min(this.canvasEl.height-this.thumbEl.getHeight(),this.thumbEl.getTop(true)-this.previewEl.getTop(true));sx=sx<0?0:(sx/this.getScaleLevel());sy=sy<0?0:(sy/this.getScaleLevel());E.drawImage(A,sx,sy,F,G,x,y,F,G);break;case 90:var F=(this.thumbEl.getWidth()/this.getScaleLevel()>this.imageEl.OriginHeight)?this.imageEl.OriginHeight:(this.thumbEl.getWidth()/this.getScaleLevel());
\e[m
3166 \e[32m+
\e[m
\e[32mvar G=(this.thumbEl.getHeight()/this.getScaleLevel()>this.imageEl.OriginWidth)?this.imageEl.OriginWidth:(this.thumbEl.getHeight()/this.getScaleLevel());var x=(this.thumbEl.getLeft(true)>this.previewEl.getLeft(true))?0:((this.previewEl.getLeft(true)-this.thumbEl.getLeft(true))/this.getScaleLevel());
\e[m
3167 \e[32m+
\e[m
\e[32mvar y=(this.thumbEl.getTop(true)>this.previewEl.getTop(true))?0:((this.previewEl.getTop(true)-this.thumbEl.getTop(true))/this.getScaleLevel());var H=this.minWidth-2*x;var I=this.minHeight-2*y;var J=1;if((x==0&&y==0)||(x==0&&y>0)){J=H/F;}if(x>0&&y==0){J=I/G;
\e[m
3168 \e[32m+
\e[m
\e[32m}if(x>0&&y>0){J=H/F;if(F<G){J=I/G;}}E.scale(J,J);var sx=Math.min(this.canvasEl.width-this.thumbEl.getWidth(),this.thumbEl.getLeft(true)-this.previewEl.getLeft(true));var sy=Math.min(this.canvasEl.height-this.thumbEl.getHeight(),this.thumbEl.getTop(true)-this.previewEl.getTop(true));
\e[m
3169 \e[32m+
\e[m
\e[32msx=sx<0?0:(sx/this.getScaleLevel());sy=sy<0?0:(sy/this.getScaleLevel());sx+=(this.imageEl.OriginWidth>this.imageEl.OriginHeight)?Math.abs(this.imageEl.OriginWidth-this.imageEl.OriginHeight):0;E.drawImage(A,sx,sy,F,G,x,y,F,G);break;case 180:var F=(this.thumbEl.getWidth()/this.getScaleLevel()>this.imageEl.OriginWidth)?this.imageEl.OriginWidth:(this.thumbEl.getWidth()/this.getScaleLevel());
\e[m
3170 \e[32m+
\e[m
\e[32mvar G=(this.thumbEl.getHeight()/this.getScaleLevel()>this.imageEl.OriginHeight)?this.imageEl.OriginHeight:(this.thumbEl.getHeight()/this.getScaleLevel());var x=(this.thumbEl.getLeft(true)>this.previewEl.getLeft(true))?0:((this.previewEl.getLeft(true)-this.thumbEl.getLeft(true))/this.getScaleLevel());
\e[m
3171 \e[32m+
\e[m
\e[32mvar y=(this.thumbEl.getTop(true)>this.previewEl.getTop(true))?0:((this.previewEl.getTop(true)-this.thumbEl.getTop(true))/this.getScaleLevel());var H=this.minWidth-2*x;var I=this.minHeight-2*y;var J=1;if((x==0&&y==0)||(x==0&&y>0)){J=H/F;}if(x>0&&y==0){J=I/G;
\e[m
3172 \e[32m+
\e[m
\e[32m}if(x>0&&y>0){J=H/F;if(F<G){J=I/G;}}E.scale(J,J);var sx=Math.min(this.canvasEl.width-this.thumbEl.getWidth(),this.thumbEl.getLeft(true)-this.previewEl.getLeft(true));var sy=Math.min(this.canvasEl.height-this.thumbEl.getHeight(),this.thumbEl.getTop(true)-this.previewEl.getTop(true));
\e[m
3173 \e[32m+
\e[m
\e[32msx=sx<0?0:(sx/this.getScaleLevel());sy=sy<0?0:(sy/this.getScaleLevel());sx+=(this.imageEl.OriginWidth>this.imageEl.OriginHeight)?0:Math.abs(this.imageEl.OriginWidth-this.imageEl.OriginHeight);sy+=(this.imageEl.OriginWidth>this.imageEl.OriginHeight)?Math.abs(this.imageEl.OriginWidth-this.imageEl.OriginHeight):0;
\e[m
3174 \e[32m+
\e[m
\e[32mE.drawImage(A,sx,sy,F,G,x,y,F,G);break;case 270:var F=(this.thumbEl.getWidth()/this.getScaleLevel()>this.imageEl.OriginHeight)?this.imageEl.OriginHeight:(this.thumbEl.getWidth()/this.getScaleLevel());var G=(this.thumbEl.getHeight()/this.getScaleLevel()>this.imageEl.OriginWidth)?this.imageEl.OriginWidth:(this.thumbEl.getHeight()/this.getScaleLevel());
\e[m
3175 \e[32m+
\e[m
\e[32mvar x=(this.thumbEl.getLeft(true)>this.previewEl.getLeft(true))?0:((this.previewEl.getLeft(true)-this.thumbEl.getLeft(true))/this.getScaleLevel());var y=(this.thumbEl.getTop(true)>this.previewEl.getTop(true))?0:((this.previewEl.getTop(true)-this.thumbEl.getTop(true))/this.getScaleLevel());
\e[m
3176 \e[32m+
\e[m
\e[32mvar H=this.minWidth-2*x;var I=this.minHeight-2*y;var J=1;if((x==0&&y==0)||(x==0&&y>0)){J=H/F;}if(x>0&&y==0){J=I/G;}if(x>0&&y>0){J=H/F;if(F<G){J=I/G;}}E.scale(J,J);var sx=Math.min(this.canvasEl.width-this.thumbEl.getWidth(),this.thumbEl.getLeft(true)-this.previewEl.getLeft(true));
\e[m
3177 \e[32m+
\e[m
\e[32mvar sy=Math.min(this.canvasEl.height-this.thumbEl.getHeight(),this.thumbEl.getTop(true)-this.previewEl.getTop(true));sx=sx<0?0:(sx/this.getScaleLevel());sy=sy<0?0:(sy/this.getScaleLevel());sy+=(this.imageEl.OriginWidth>this.imageEl.OriginHeight)?0:Math.abs(this.imageEl.OriginWidth-this.imageEl.OriginHeight);
\e[m
3178 \e[32m+
\e[m
\e[32mE.drawImage(A,sx,sy,F,G,x,y,F,G);break;default:break;}this.cropData=D.toDataURL(this.cropType);if(this.fireEvent('crop',this,this.cropData)!==false){this.process(this.file,this.cropData);}return;},setThumbBoxSize:function(){var A,B;if(this.isDocument&&typeof(this.imageEl)!='undefined'){A=(this.imageEl.OriginWidth>this.imageEl.OriginHeight)?Math.max(this.minWidth,this.minHeight):Math.min(this.minWidth,this.minHeight);
\e[m
3179 \e[32m+
\e[m
\e[32mB=(this.imageEl.OriginWidth>this.imageEl.OriginHeight)?Math.min(this.minWidth,this.minHeight):Math.max(this.minWidth,this.minHeight);this.minWidth=A;this.minHeight=B;if(this.rotate==90||this.rotate==270){this.minWidth=B;this.minHeight=A;}}B=300;A=Math.ceil(this.minWidth*B/this.minHeight);
\e[m
3180 \e[32m+
\e[m
\e[32mif(this.minWidth>this.minHeight){A=300;B=Math.ceil(this.minHeight*A/this.minWidth);}this.thumbEl.setStyle({width:A+'px',height:B+'px'});return;},setThumbBoxPosition:function(){var x=Math.ceil((this.bodyEl.getWidth()-this.thumbEl.getWidth())/2);var y=Math.ceil((this.bodyEl.getHeight()-this.thumbEl.getHeight())/2);
\e[m
3181 \e[32m+
\e[m
\e[32mthis.thumbEl.setLeft(x);this.thumbEl.setTop(y);},baseRotateLevel:function(){this.baseRotate=1;if(typeof(this.exif)!='undefined'&&typeof(this.exif[Roo.dialog.UploadCropbox['tags']['Orientation']])!='undefined'&&[1,3,6,8].indexOf(this.exif[Roo.dialog.UploadCropbox['tags']['Orientation']])!=-1){this.baseRotate=this.exif[Roo.dialog.UploadCropbox['tags']['Orientation']];
\e[m
3182 \e[32m+
\e[m
\e[32m}this.rotate=Roo.dialog.UploadCropbox['Orientation'][this.baseRotate];},baseScaleLevel:function(){var A,B;if(this.isDocument){if(this.baseRotate==6||this.baseRotate==8){B=this.thumbEl.getHeight();this.baseScale=B/this.imageEl.OriginWidth;if(this.imageEl.OriginHeight*this.baseScale>this.thumbEl.getWidth()){A=this.thumbEl.getWidth();
\e[m
3183 \e[32m+
\e[m
\e[32mthis.baseScale=A/this.imageEl.OriginHeight;}return;}B=this.thumbEl.getHeight();this.baseScale=B/this.imageEl.OriginHeight;if(this.imageEl.OriginWidth*this.baseScale>this.thumbEl.getWidth()){A=this.thumbEl.getWidth();this.baseScale=A/this.imageEl.OriginWidth;
\e[m
3184 \e[32m+
\e[m
\e[32m}return;}if(this.baseRotate==6||this.baseRotate==8){A=this.thumbEl.getHeight();this.baseScale=A/this.imageEl.OriginHeight;if(this.imageEl.OriginHeight*this.baseScale<this.thumbEl.getWidth()){B=this.thumbEl.getWidth();this.baseScale=B/this.imageEl.OriginHeight;
\e[m
3185 \e[32m+
\e[m
\e[32m}if(this.imageEl.OriginWidth>this.imageEl.OriginHeight){B=this.thumbEl.getWidth();this.baseScale=B/this.imageEl.OriginHeight;if(this.imageEl.OriginWidth*this.baseScale<this.thumbEl.getHeight()){A=this.thumbEl.getHeight();this.baseScale=A/this.imageEl.OriginWidth;
\e[m
3186 \e[32m+
\e[m
\e[32m}}return;}A=this.thumbEl.getWidth();this.baseScale=A/this.imageEl.OriginWidth;if(this.imageEl.OriginHeight*this.baseScale<this.thumbEl.getHeight()){B=this.thumbEl.getHeight();this.baseScale=B/this.imageEl.OriginHeight;}if(this.imageEl.OriginWidth>this.imageEl.OriginHeight){B=this.thumbEl.getHeight();
\e[m
3187 \e[32m+
\e[m
\e[32mthis.baseScale=B/this.imageEl.OriginHeight;if(this.imageEl.OriginWidth*this.baseScale<this.thumbEl.getWidth()){A=this.thumbEl.getWidth();this.baseScale=A/this.imageEl.OriginWidth;}}return;},getScaleLevel:function(){return this.baseScale*Math.pow(1.1,this.scale);
\e[m
3188 \e[32m+
\e[m
\e[32m},onTouchStart:function(e){if(!this.canvasLoaded){this.beforeSelectFile(e);return;}var A=e.browserEvent.touches;if(!A){return;}if(A.length==1){this.onMouseDown(e);return;}if(A.length!=2){return;}var B=[];for(var i=0,C;C=A[i];i++){B.push(C.pageX,C.pageY);}
\e[m
3189 \e[32m+
\e[m
\e[32mvar x=Math.pow(B[0]-B[2],2);var y=Math.pow(B[1]-B[3],2);this.startDistance=Math.sqrt(x+y);this.startScale=this.scale;this.pinching=true;this.dragable=false;},onTouchMove:function(e){if(!this.pinching&&!this.dragable){return;}var A=e.browserEvent.touches;if(!A){return;
\e[m
3190 \e[32m+
\e[m
\e[32m}if(this.dragable){this.onMouseMove(e);return;}var B=[];for(var i=0,C;C=A[i];i++){B.push(C.pageX,C.pageY);}var x=Math.pow(B[0]-B[2],2);var y=Math.pow(B[1]-B[3],2);this.endDistance=Math.sqrt(x+y);this.scale=this.startScale+Math.floor(Math.log(this.endDistance/this.startDistance)/Math.log(1.1));
\e[m
3191 \e[32m+
\e[m
\e[32mif(!this.zoomable()){this.scale=this.startScale;return;}this.draw();},onTouchEnd:function(e){this.pinching=false;this.dragable=false;},process:function(A,B){if(this.loadMask){this.maskEl.mask(this.loadingText);}this.xhr=new XMLHttpRequest();A.xhr=this.xhr;
\e[m
3192 \e[32m+
\e[m
\e[32mthis.xhr.open(this.method,this.url,true);var C={"Accept":"application/json","Cache-Control":"no-cache","X-Requested-With":"XMLHttpRequest"};for(var D in C){var E=C[D];if(E){this.xhr.setRequestHeader(D,E);}}var F=this;this.xhr.onload=function(){F.xhrOnLoad(F.xhr);
\e[m
3193 \e[32m+
\e[m
\e[32m};this.xhr.onerror=function(){F.xhrOnError(F.xhr);};var G=new FormData();G.append('returnHTML','NO');if(B){G.append('crop',B);}if(typeof(A)!='undefined'&&(typeof(A.id)=='undefined'||A.id*1<1)){G.append(this.paramName,A,A.name);}if(typeof(A.filename)!='undefined'){G.append('filename',A.filename);
\e[m
3194 \e[32m+
\e[m
\e[32m}if(typeof(A.mimetype)!='undefined'){G.append('mimetype',A.mimetype);}if(this.fireEvent('arrange',this,G)!=false){this.xhr.send(G);};},xhrOnLoad:function(A){if(this.loadMask){this.maskEl.unmask();}if(A.readyState!==4){this.fireEvent('exception',this,A);return;
\e[m
3195 \e[32m+
\e[m
\e[32m}var B=Roo.decode(A.responseText);if(!B.success){this.fireEvent('exception',this,A);return;}var B=Roo.decode(A.responseText);this.fireEvent('upload',this,B);},xhrOnError:function(){if(this.loadMask){this.maskEl.unmask();}Roo.log('xhr on error');var A=Roo.decode(xhr.responseText);
\e[m
3196 \e[32m+
\e[m
\e[32mRoo.log(A);},prepare:function(A){if(this.loadMask){this.maskEl.mask(this.loadingText);}this.file=false;this.exif={};if(typeof(A)==='string'){this.loadCanvas(A);return;}if(!A||!this.urlAPI){return;}this.file=A;this.cropType=A.type;var B=this;if(this.fireEvent('prepare',this,this.file)!=false){var C=new FileReader();
\e[m
3197 \e[32m+
\e[m
\e[32mC.onload=function(e){if(e.target.error){Roo.log(e.target.error);return;}var D=e.target.result,E=new DataView(D),F=2,G=E.byteLength-4,H,I;if(E.getUint16(0)===0xffd8){while(F<G){H=E.getUint16(F);if((H>=0xffe0&&H<=0xffef)||H===0xfffe){I=E.getUint16(F+2)+2;if(F+I>E.byteLength){Roo.log('Invalid meta data: Invalid segment size.');
\e[m
3198 \e[32m+
\e[m
\e[32mbreak;}if(H==0xffe1){B.parseExifData(E,F,I);}F+=I;continue;}break;}}var J=B.urlAPI.createObjectURL(B.file);B.loadCanvas(J);return;};C.readAsArrayBuffer(this.file);}},parseExifData:function(A,B,C){var D=B+10,E,F;if(A.getUint32(B+4)!==0x45786966){return;}if(A.getUint32(B+4)!==0x45786966){return;
\e[m
3199 \e[32m+
\e[m
\e[32m}if(D+8>A.byteLength){Roo.log('Invalid Exif data: Invalid segment size.');return;}if(A.getUint16(B+8)!==0x0000){Roo.log('Invalid Exif data: Missing byte alignment offset.');return;}switch(A.getUint16(D)){case 0x4949:E=true;break;case 0x4D4D:E=false;break;
\e[m
3200 \e[32m+
\e[m
\e[32mdefault:Roo.log('Invalid Exif data: Invalid byte alignment marker.');return;}if(A.getUint16(D+2,E)!==0x002A){Roo.log('Invalid Exif data: Missing TIFF marker.');return;}F=A.getUint32(D+4,E);this.parseExifTags(A,D,D+F,E);},parseExifTags:function(A,B,C,D){var E,F,i;
\e[m
3201 \e[32m+
\e[m
\e[32mif(C+6>A.byteLength){Roo.log('Invalid Exif data: Invalid directory offset.');return;}E=A.getUint16(C,D);F=C+2+12*E;if(F+4>A.byteLength){Roo.log('Invalid Exif data: Invalid directory size.');return;}for(i=0;i<E;i+=1){this.parseExifTag(A,B,C+2+12*i,D);}return A.getUint32(F,D);
\e[m
3202 \e[32m+
\e[m
\e[32m},parseExifTag:function(A,B,C,D){var E=A.getUint16(C,D);this.exif[E]=this.getExifValue(A,B,C,A.getUint16(C+2,D),A.getUint32(C+4,D),D);},getExifValue:function(A,B,C,D,E,F){var G=Roo.dialog.UploadCropbox.exifTagTypes[D],H,I,J,i,K,c;if(!G){Roo.log('Invalid Exif data: Invalid tag type.');
\e[m
3203 \e[32m+
\e[m
\e[32mreturn;}H=G.size*E;I=H>4?B+A.getUint32(C+8,F):(C+8);if(I+H>A.byteLength){Roo.log('Invalid Exif data: Invalid data offset.');return;}if(E===1){return G.getValue(A,I,F);}J=[];for(i=0;i<E;i+=1){J[i]=G.getValue(A,I+i*G.size,F);}if(G.ascii){K='';for(i=0;i<J.length;
\e[m
3204 \e[32m+
\e[m
\e[32mi+=1){c=J[i];if(c==='\u0000'){break;}K+=c;}return K;}return J;}});Roo.apply(Roo.dialog.UploadCropbox,{tags:{'Orientation':0x0112
\e[m
3205 \e[32m+
\e[m
\e[32m},Orientation:{1:0,3:180,6:90,8:270},exifTagTypes:{1:{getValue:function(A,B){return A.getUint8(B);},size:1},2:{getValue:function(A,B){return String.fromCharCode(A.getUint8(B));
\e[m
3206 \e[32m+
\e[m
\e[32m},size:1,ascii:true},3:{getValue:function(A,B,C){return A.getUint16(B,C);},size:2},4:{getValue:function(A,B,C){return A.getUint32(B,C);},size:4},5:{getValue:function(A,B,C){return A.getUint32(B,C)/A.getUint32(B+4,C);},size:8},9:{getValue:function(A,B,C){return A.getInt32(B,C);
\e[m
3207 \e[32m+
\e[m
\e[32m},size:4},10:{getValue:function(A,B,C){return A.getInt32(B,C)/A.getInt32(B+4,C);},size:8}},footer:{STANDARD:[{tag:'div',cls:'btn-group roo-upload-cropbox-rotate-left',action:'rotate-left',cn:[{tag:'button',cls:'btn btn-default',html:'<i class="fa fa-undo"></i>'}
\e[m
3208 \e[32m+
\e[m
\e[32m]},{tag:'div',cls:'btn-group roo-upload-cropbox-picture',action:'picture',cn:[{tag:'button',cls:'btn btn-default',html:'<i class="fa fa-picture-o"></i>'}]},{tag:'div',cls:'btn-group roo-upload-cropbox-rotate-right',action:'rotate-right',cn:[{tag:'button',cls:'btn btn-default',html:'<i class="fa fa-repeat"></i>'}
\e[m
3209 \e[32m+
\e[m
\e[32m]}],DOCUMENT:[{tag:'div',cls:'btn-group roo-upload-cropbox-rotate-left',action:'rotate-left',cn:[{tag:'button',cls:'btn btn-default',html:'<i class="fa fa-undo"></i>'}]},{tag:'div',cls:'btn-group roo-upload-cropbox-download',action:'download',cn:[{tag:'button',cls:'btn btn-default',html:'<i class="fa fa-download"></i>'}
\e[m
3210 \e[32m+
\e[m
\e[32m]},{tag:'div',cls:'btn-group roo-upload-cropbox-crop',action:'crop',cn:[{tag:'button',cls:'btn btn-default',html:'<i class="fa fa-crop"></i>'}]},{tag:'div',cls:'btn-group roo-upload-cropbox-trash',action:'trash',cn:[{tag:'button',cls:'btn btn-default',html:'<i class="fa fa-trash"></i>'}
\e[m
3211 \e[32m+
\e[m
\e[32m]},{tag:'div',cls:'btn-group roo-upload-cropbox-rotate-right',action:'rotate-right',cn:[{tag:'button',cls:'btn btn-default',html:'<i class="fa fa-repeat"></i>'}]}],ROTATOR:[{tag:'div',cls:'btn-group roo-upload-cropbox-rotate-left',action:'rotate-left',cn:[{tag:'button',cls:'btn btn-default',html:'<i class="fa fa-undo"></i>'}
\e[m
3212 \e[32m+
\e[m
\e[32m]},{tag:'div',cls:'btn-group roo-upload-cropbox-rotate-right',action:'rotate-right',cn:[{tag:'button',cls:'btn btn-default',html:'<i class="fa fa-repeat"></i>'}]}]}});
\e[m
3213 \e[1mdiff --git a/roojs-debug.js b/roojs-debug.js
\e[m
3214 \e[1mindex 5e539c7e68..d341c59730 100644
\e[m
3215 \e[1m--- a/roojs-debug.js
\e[m
3216 \e[1m+++ b/roojs-debug.js
\e[m
3217 \e[36m@@ -60414,7 +60414,6 @@
\e[m
\e[mRoo.LayoutStateManager.prototype = {
\e[m
3219 Roo.ContentPanel = function(el, config, content){
\e[m
3223 if(el.autoCreate || el.xtype){ // xtype is available if this is called from factory
\e[m
3225 \e[36m@@ -60798,6 +60797,14 @@
\e[m
\e[mlayout.addxtype({
\e[m
3228 addxtype : function(cfg) {
\e[m
3229 \e[32m+
\e[m
\e[32m if(cfg.xtype.match(/^UploadCropbox$/)) {
\e[m
3231 \e[32m+
\e[m
\e[32m this.cropbox = new Roo.factory(cfg);
\e[m
3233 \e[32m+
\e[m
\e[32m this.cropbox.render(this.el);
\e[m
3235 \e[32m+
\e[m
\e[32m return this.cropbox;
\e[m
3236 \e[32m+
\e[m
\e[32m }
\e[m
3238 if (cfg.xtype.match(/^Form$/)) {
\e[m
3240 \e[36m@@ -68050,4 +68057,1795 @@
\e[m
\e[mRoo.extend(Roo.XTemplate, Roo.Template, {
\e[m
3241 Roo.XTemplate.from = function(el){
\e[m
3242 el = Roo.getDom(el);
\e[m
3243 return new Roo.XTemplate(el.value || el.innerHTML);
\e[m
3245 \ No newline at end of file
\e[m
3246 \e[32m+
\e[m
\e[32m};Roo.dialog = {};
\e[m
3247 \e[32m+
\e[m
\e[32m/*
\e[m
3248 \e[32m+
\e[m
\e[32m* Licence: LGPL
\e[m
3249 \e[32m+
\e[m
\e[32m*/
\e[m
3251 \e[32m+
\e[m
\e[32m/**
\e[m
3252 \e[32m+
\e[m
\e[32m * @class Roo.dialog.UploadCropbox
\e[m
3253 \e[32m+
\e[m
\e[32m * @extends Roo.BoxComponent
\e[m
3254 \e[32m+
\e[m
\e[32m * Dialog UploadCropbox class
\e[m
3255 \e[32m+
\e[m
\e[32m * @cfg {String} emptyText show when image has been loaded
\e[m
3256 \e[32m+
\e[m
\e[32m * @cfg {String} rotateNotify show when image too small to rotate
\e[m
3257 \e[32m+
\e[m
\e[32m * @cfg {Number} errorTimeout default 3000
\e[m
3258 \e[32m+
\e[m
\e[32m * @cfg {Number} minWidth default 300
\e[m
3259 \e[32m+
\e[m
\e[32m * @cfg {Number} minHeight default 300
\e[m
3260 \e[32m+
\e[m
\e[32m * @cfg {Array} buttons default ['rotateLeft', 'pictureBtn', 'rotateRight']
\e[m
3261 \e[32m+
\e[m
\e[32m * @cfg {Boolean} isDocument (true|false) default false
\e[m
3262 \e[32m+
\e[m
\e[32m * @cfg {String} url action url
\e[m
3263 \e[32m+
\e[m
\e[32m * @cfg {String} paramName default 'imageUpload'
\e[m
3264 \e[32m+
\e[m
\e[32m * @cfg {String} method default POST
\e[m
3265 \e[32m+
\e[m
\e[32m * @cfg {Boolean} loadMask (true|false) default true
\e[m
3266 \e[32m+
\e[m
\e[32m * @cfg {Boolean} loadingText default 'Loading...'
\e[m
3267 \e[32m+
\e[m
\e[32m *
\e[m
\e[41m
\e[m
3268 \e[32m+
\e[m
\e[32m * @constructor
\e[m
3269 \e[32m+
\e[m
\e[32m * Create a new UploadCropbox
\e[m
3270 \e[32m+
\e[m
\e[32m * @param {Object} config The config object
\e[m
3271 \e[32m+
\e[m
\e[32m */
\e[m
3273 \e[32m+
\e[m
\e[32m Roo.dialog.UploadCropbox = function(config){
\e[m
3274 \e[32m+
\e[m
\e[32m console.log("Dialog UploadCropbox Constructor");
\e[m
3275 \e[32m+
\e[m
\e[32m Roo.dialog.UploadCropbox.superclass.constructor.call(this, config);
\e[m
3276 \e[32m+
\e[m
\e[41m
\e[m
3277 \e[32m+
\e[m
\e[32m this.addEvents({
\e[m
3278 \e[32m+
\e[m
\e[32m /**
\e[m
3279 \e[32m+
\e[m
\e[32m * @event beforeselectfile
\e[m
3280 \e[32m+
\e[m
\e[32m * Fire before select file
\e[m
3281 \e[32m+
\e[m
\e[32m * @param {Roo.dialog.UploadCropbox} this
\e[m
3282 \e[32m+
\e[m
\e[32m */
\e[m
3283 \e[32m+
\e[m
\e[32m "beforeselectfile" : true,
\e[m
3284 \e[32m+
\e[m
\e[32m /**
\e[m
3285 \e[32m+
\e[m
\e[32m * @event initial
\e[m
3286 \e[32m+
\e[m
\e[32m * Fire after initEvent
\e[m
3287 \e[32m+
\e[m
\e[32m * @param {Roo.dialog.UploadCropbox} this
\e[m
3288 \e[32m+
\e[m
\e[32m */
\e[m
3289 \e[32m+
\e[m
\e[32m "initial" : true,
\e[m
3290 \e[32m+
\e[m
\e[32m /**
\e[m
3291 \e[32m+
\e[m
\e[32m * @event crop
\e[m
3292 \e[32m+
\e[m
\e[32m * Fire after initEvent
\e[m
3293 \e[32m+
\e[m
\e[32m * @param {Roo.dialog.UploadCropbox} this
\e[m
3294 \e[32m+
\e[m
\e[32m * @param {String} data
\e[m
3295 \e[32m+
\e[m
\e[32m */
\e[m
3296 \e[32m+
\e[m
\e[32m "crop" : true,
\e[m
3297 \e[32m+
\e[m
\e[32m /**
\e[m
3298 \e[32m+
\e[m
\e[32m * @event prepare
\e[m
3299 \e[32m+
\e[m
\e[32m * Fire when preparing the file data
\e[m
3300 \e[32m+
\e[m
\e[32m * @param {Roo.dialog.UploadCropbox} this
\e[m
3301 \e[32m+
\e[m
\e[32m * @param {Object} file
\e[m
3302 \e[32m+
\e[m
\e[32m */
\e[m
3303 \e[32m+
\e[m
\e[32m "prepare" : true,
\e[m
3304 \e[32m+
\e[m
\e[32m /**
\e[m
3305 \e[32m+
\e[m
\e[32m * @event exception
\e[m
3306 \e[32m+
\e[m
\e[32m * Fire when get exception
\e[m
3307 \e[32m+
\e[m
\e[32m * @param {Roo.dialog.UploadCropbox} this
\e[m
3308 \e[32m+
\e[m
\e[32m * @param {XMLHttpRequest} xhr
\e[m
3309 \e[32m+
\e[m
\e[32m */
\e[m
3310 \e[32m+
\e[m
\e[32m "exception" : true,
\e[m
3311 \e[32m+
\e[m
\e[32m /**
\e[m
3312 \e[32m+
\e[m
\e[32m * @event beforeloadcanvas
\e[m
3313 \e[32m+
\e[m
\e[32m * Fire before load the canvas
\e[m
3314 \e[32m+
\e[m
\e[32m * @param {Roo.dialog.UploadCropbox} this
\e[m
3315 \e[32m+
\e[m
\e[32m * @param {String} src
\e[m
3316 \e[32m+
\e[m
\e[32m */
\e[m
3317 \e[32m+
\e[m
\e[32m "beforeloadcanvas" : true,
\e[m
3318 \e[32m+
\e[m
\e[32m /**
\e[m
3319 \e[32m+
\e[m
\e[32m * @event trash
\e[m
3320 \e[32m+
\e[m
\e[32m * Fire when trash image
\e[m
3321 \e[32m+
\e[m
\e[32m * @param {Roo.dialog.UploadCropbox} this
\e[m
3322 \e[32m+
\e[m
\e[32m */
\e[m
3323 \e[32m+
\e[m
\e[32m "trash" : true,
\e[m
3324 \e[32m+
\e[m
\e[32m /**
\e[m
3325 \e[32m+
\e[m
\e[32m * @event download
\e[m
3326 \e[32m+
\e[m
\e[32m * Fire when download the image
\e[m
3327 \e[32m+
\e[m
\e[32m * @param {Roo.dialog.UploadCropbox} this
\e[m
3328 \e[32m+
\e[m
\e[32m */
\e[m
3329 \e[32m+
\e[m
\e[32m "download" : true,
\e[m
3330 \e[32m+
\e[m
\e[32m /**
\e[m
3331 \e[32m+
\e[m
\e[32m * @event footerbuttonclick
\e[m
3332 \e[32m+
\e[m
\e[32m * Fire when footerbuttonclick
\e[m
3333 \e[32m+
\e[m
\e[32m * @param {Roo.dialog.UploadCropbox} this
\e[m
3334 \e[32m+
\e[m
\e[32m * @param {String} type
\e[m
3335 \e[32m+
\e[m
\e[32m */
\e[m
3336 \e[32m+
\e[m
\e[32m "footerbuttonclick" : true,
\e[m
3337 \e[32m+
\e[m
\e[32m /**
\e[m
3338 \e[32m+
\e[m
\e[32m * @event resize
\e[m
3339 \e[32m+
\e[m
\e[32m * Fire when resize
\e[m
3340 \e[32m+
\e[m
\e[32m * @param {Roo.dialog.UploadCropbox} this
\e[m
3341 \e[32m+
\e[m
\e[32m */
\e[m
3342 \e[32m+
\e[m
\e[32m "resize" : true,
\e[m
3343 \e[32m+
\e[m
\e[32m /**
\e[m
3344 \e[32m+
\e[m
\e[32m * @event rotate
\e[m
3345 \e[32m+
\e[m
\e[32m * Fire when rotate the image
\e[m
3346 \e[32m+
\e[m
\e[32m * @param {Roo.dialog.UploadCropbox} this
\e[m
3347 \e[32m+
\e[m
\e[32m * @param {String} pos
\e[m
3348 \e[32m+
\e[m
\e[32m */
\e[m
3349 \e[32m+
\e[m
\e[32m "rotate" : true,
\e[m
3350 \e[32m+
\e[m
\e[32m /**
\e[m
3351 \e[32m+
\e[m
\e[32m * @event inspect
\e[m
3352 \e[32m+
\e[m
\e[32m * Fire when inspect the file
\e[m
3353 \e[32m+
\e[m
\e[32m * @param {Roo.dialog.UploadCropbox} this
\e[m
3354 \e[32m+
\e[m
\e[32m * @param {Object} file
\e[m
3355 \e[32m+
\e[m
\e[32m */
\e[m
3356 \e[32m+
\e[m
\e[32m "inspect" : true,
\e[m
3357 \e[32m+
\e[m
\e[32m /**
\e[m
3358 \e[32m+
\e[m
\e[32m * @event upload
\e[m
3359 \e[32m+
\e[m
\e[32m * Fire when xhr upload the file
\e[m
3360 \e[32m+
\e[m
\e[32m * @param {Roo.dialog.UploadCropbox} this
\e[m
3361 \e[32m+
\e[m
\e[32m * @param {Object} data
\e[m
3362 \e[32m+
\e[m
\e[32m */
\e[m
3363 \e[32m+
\e[m
\e[32m "upload" : true,
\e[m
3364 \e[32m+
\e[m
\e[32m /**
\e[m
3365 \e[32m+
\e[m
\e[32m * @event arrange
\e[m
3366 \e[32m+
\e[m
\e[32m * Fire when arrange the file data
\e[m
3367 \e[32m+
\e[m
\e[32m * @param {Roo.dialog.UploadCropbox} this
\e[m
3368 \e[32m+
\e[m
\e[32m * @param {Object} formData
\e[m
3369 \e[32m+
\e[m
\e[32m */
\e[m
3370 \e[32m+
\e[m
\e[32m "arrange" : true,
\e[m
3371 \e[32m+
\e[m
\e[32m /**
\e[m
3372 \e[32m+
\e[m
\e[32m * @event loadcanvas
\e[m
3373 \e[32m+
\e[m
\e[32m * Fire after load the canvas
\e[m
3374 \e[32m+
\e[m
\e[32m * @param {Roo.dialog.UploadCropbox}
\e[m
3375 \e[32m+
\e[m
\e[32m * @param {Object} imgEl
\e[m
3376 \e[32m+
\e[m
\e[32m */
\e[m
3377 \e[32m+
\e[m
\e[32m "loadcanvas" : true
\e[m
3378 \e[32m+
\e[m
\e[32m });
\e[m
3379 \e[32m+
\e[m
\e[41m
\e[m
3380 \e[32m+
\e[m
\e[32m this.buttons = this.buttons || Roo.dialog.UploadCropbox.footer.STANDARD;
\e[m
3381 \e[32m+
\e[m
\e[32m};
\e[m
3383 \e[32m+
\e[m
\e[32mRoo.extend(Roo.dialog.UploadCropbox, Roo.Component, {
\e[m
3384 \e[32m+
\e[m
\e[41m
\e[m
3385 \e[32m+
\e[m
\e[32m emptyText : 'Click to upload image',
\e[m
3386 \e[32m+
\e[m
\e[32m rotateNotify : 'Image is too small to rotate',
\e[m
3387 \e[32m+
\e[m
\e[32m errorTimeout : 3000,
\e[m
3388 \e[32m+
\e[m
\e[32m scale : 0,
\e[m
3389 \e[32m+
\e[m
\e[32m baseScale : 1,
\e[m
3390 \e[32m+
\e[m
\e[32m rotate : 0,
\e[m
3391 \e[32m+
\e[m
\e[32m dragable : false,
\e[m
3392 \e[32m+
\e[m
\e[32m pinching : false,
\e[m
3393 \e[32m+
\e[m
\e[32m mouseX : 0,
\e[m
3394 \e[32m+
\e[m
\e[32m mouseY : 0,
\e[m
3395 \e[32m+
\e[m
\e[32m cropData : false,
\e[m
3396 \e[32m+
\e[m
\e[32m minWidth : 300,
\e[m
3397 \e[32m+
\e[m
\e[32m minHeight : 300,
\e[m
3398 \e[32m+
\e[m
\e[32m file : false,
\e[m
3399 \e[32m+
\e[m
\e[32m exif : {},
\e[m
3400 \e[32m+
\e[m
\e[32m baseRotate : 1,
\e[m
3401 \e[32m+
\e[m
\e[32m cropType : 'image/jpeg',
\e[m
3402 \e[32m+
\e[m
\e[32m buttons : false,
\e[m
3403 \e[32m+
\e[m
\e[32m canvasLoaded : false,
\e[m
3404 \e[32m+
\e[m
\e[32m isDocument : false,
\e[m
3405 \e[32m+
\e[m
\e[32m method : 'POST',
\e[m
3406 \e[32m+
\e[m
\e[32m paramName : 'imageUpload',
\e[m
3407 \e[32m+
\e[m
\e[32m loadMask : true,
\e[m
3408 \e[32m+
\e[m
\e[32m loadingText : 'Loading...',
\e[m
3409 \e[32m+
\e[m
\e[32m maskEl : false,
\e[m
3410 \e[32m+
\e[m
\e[41m
\e[m
3411 \e[32m+
\e[m
\e[32m getAutoCreate : function()
\e[m
3412 \e[32m+
\e[m
\e[32m {
\e[m
3413 \e[32m+
\e[m
\e[32m var cfg = {
\e[m
3414 \e[32m+
\e[m
\e[32m tag : 'div',
\e[m
3415 \e[32m+
\e[m
\e[32m cls : 'roo-upload-cropbox',
\e[m
3416 \e[32m+
\e[m
\e[32m cn : [
\e[m
3417 \e[32m+
\e[m
\e[32m {
\e[m
3418 \e[32m+
\e[m
\e[32m tag : 'input',
\e[m
3419 \e[32m+
\e[m
\e[32m cls : 'roo-upload-cropbox-selector',
\e[m
3420 \e[32m+
\e[m
\e[32m type : 'file'
\e[m
3421 \e[32m+
\e[m
\e[32m },
\e[m
3422 \e[32m+
\e[m
\e[32m {
\e[m
3423 \e[32m+
\e[m
\e[32m tag : 'div',
\e[m
3424 \e[32m+
\e[m
\e[32m cls : 'roo-upload-cropbox-body',
\e[m
3425 \e[32m+
\e[m
\e[32m style : 'cursor:pointer',
\e[m
3426 \e[32m+
\e[m
\e[32m cn : [
\e[m
3427 \e[32m+
\e[m
\e[32m {
\e[m
3428 \e[32m+
\e[m
\e[32m tag : 'div',
\e[m
3429 \e[32m+
\e[m
\e[32m cls : 'roo-upload-cropbox-preview'
\e[m
3430 \e[32m+
\e[m
\e[32m },
\e[m
3431 \e[32m+
\e[m
\e[32m {
\e[m
3432 \e[32m+
\e[m
\e[32m tag : 'div',
\e[m
3433 \e[32m+
\e[m
\e[32m cls : 'roo-upload-cropbox-thumb'
\e[m
3434 \e[32m+
\e[m
\e[32m },
\e[m
3435 \e[32m+
\e[m
\e[32m {
\e[m
3436 \e[32m+
\e[m
\e[32m tag : 'div',
\e[m
3437 \e[32m+
\e[m
\e[32m cls : 'roo-upload-cropbox-empty-notify',
\e[m
3438 \e[32m+
\e[m
\e[32m html : this.emptyText
\e[m
3439 \e[32m+
\e[m
\e[32m },
\e[m
3440 \e[32m+
\e[m
\e[32m {
\e[m
3441 \e[32m+
\e[m
\e[32m tag : 'div',
\e[m
3442 \e[32m+
\e[m
\e[32m cls : 'roo-upload-cropbox-error-notify alert alert-danger',
\e[m
3443 \e[32m+
\e[m
\e[32m html : this.rotateNotify
\e[m
3444 \e[32m+
\e[m
\e[32m }
\e[m
3445 \e[32m+
\e[m
\e[32m ]
\e[m
3446 \e[32m+
\e[m
\e[32m },
\e[m
3447 \e[32m+
\e[m
\e[32m {
\e[m
3448 \e[32m+
\e[m
\e[32m tag : 'div',
\e[m
3449 \e[32m+
\e[m
\e[32m cls : 'roo-upload-cropbox-footer',
\e[m
3450 \e[32m+
\e[m
\e[32m cn : {
\e[m
3451 \e[32m+
\e[m
\e[32m tag : 'div',
\e[m
3452 \e[32m+
\e[m
\e[32m cls : 'btn-group btn-group-justified roo-upload-cropbox-btn-group',
\e[m
3453 \e[32m+
\e[m
\e[32m cn : []
\e[m
3454 \e[32m+
\e[m
\e[32m }
\e[m
3455 \e[32m+
\e[m
\e[32m }
\e[m
3456 \e[32m+
\e[m
\e[32m ]
\e[m
3457 \e[32m+
\e[m
\e[32m };
\e[m
3458 \e[32m+
\e[m
\e[41m
\e[m
3459 \e[32m+
\e[m
\e[32m return cfg;
\e[m
3460 \e[32m+
\e[m
\e[32m },
\e[m
3461 \e[32m+
\e[m
\e[41m
\e[m
3462 \e[32m+
\e[m
\e[32m onRender : function(ct, position)
\e[m
3463 \e[32m+
\e[m
\e[32m {
\e[m
3464 \e[32m+
\e[m
\e[32m console.log("On Render");
\e[m
3465 \e[32m+
\e[m
\e[32m console.log(this);
\e[m
3466 \e[32m+
\e[m
\e[32m Roo.dialog.UploadCropbox.superclass.onRender.call(this, ct, position);
\e[m
3468 \e[32m+
\e[m
\e[32m if(this.el){
\e[m
3469 \e[32m+
\e[m
\e[32m if (this.el.attr('xtype')) {
\e[m
3470 \e[32m+
\e[m
\e[32m this.el.attr('xtypex', this.el.attr('xtype'));
\e[m
3471 \e[32m+
\e[m
\e[32m this.el.dom.removeAttribute('xtype');
\e[m
3472 \e[32m+
\e[m
\e[41m
\e[m
3473 \e[32m+
\e[m
\e[32m this.initEvents();
\e[m
3474 \e[32m+
\e[m
\e[32m }
\e[m
3475 \e[32m+
\e[m
\e[32m }
\e[m
3476 \e[32m+
\e[m
\e[32m else {
\e[m
3477 \e[32m+
\e[m
\e[32m var cfg = Roo.apply({}, this.getAutoCreate());
\e[m
3478 \e[32m+
\e[m
\e[41m
\e[m
3479 \e[32m+
\e[m
\e[32m cfg.id = this.id || Roo.id();
\e[m
3480 \e[32m+
\e[m
\e[41m
\e[m
3481 \e[32m+
\e[m
\e[32m if (this.cls) {
\e[m
3482 \e[32m+
\e[m
\e[32m cfg.cls = (typeof(cfg.cls) == 'undefined' ? this.cls : cfg.cls) + ' ' + this.cls;
\e[m
3483 \e[32m+
\e[m
\e[32m }
\e[m
3484 \e[32m+
\e[m
\e[41m
\e[m
3485 \e[32m+
\e[m
\e[32m if (this.style) { // fixme needs to support more complex style data.
\e[m
3486 \e[32m+
\e[m
\e[32m cfg.style = (typeof(cfg.style) == 'undefined' ? this.style : cfg.style) + '; ' + this.style;
\e[m
3487 \e[32m+
\e[m
\e[32m }
\e[m
3488 \e[32m+
\e[m
\e[41m
\e[m
3489 \e[32m+
\e[m
\e[32m this.el = ct.createChild(cfg, position);
\e[m
3490 \e[32m+
\e[m
\e[41m
\e[m
3491 \e[32m+
\e[m
\e[32m this.initEvents();
\e[m
3492 \e[32m+
\e[m
\e[32m }
\e[m
3493 \e[32m+
\e[m
\e[41m
\e[m
3494 \e[32m+
\e[m
\e[32m if (this.buttons.length) {
\e[m
3495 \e[32m+
\e[m
\e[41m
\e[m
3496 \e[32m+
\e[m
\e[32m Roo.each(this.buttons, function(bb) {
\e[m
3497 \e[32m+
\e[m
\e[41m
\e[m
3498 \e[32m+
\e[m
\e[32m var btn = this.el.select('.roo-upload-cropbox-footer div.roo-upload-cropbox-btn-group').first().createChild(bb);
\e[m
3499 \e[32m+
\e[m
\e[41m
\e[m
3500 \e[32m+
\e[m
\e[32m btn.on('click', this.onFooterButtonClick.createDelegate(this, [bb.action], true));
\e[m
3501 \e[32m+
\e[m
\e[41m
\e[m
3502 \e[32m+
\e[m
\e[32m }, this);
\e[m
3503 \e[32m+
\e[m
\e[32m }
\e[m
3504 \e[32m+
\e[m
\e[41m
\e[m
3505 \e[32m+
\e[m
\e[32m if(this.loadMask){
\e[m
3506 \e[32m+
\e[m
\e[32m this.maskEl = this.el;
\e[m
3507 \e[32m+
\e[m
\e[32m }
\e[m
3508 \e[32m+
\e[m
\e[32m },
\e[m
3509 \e[32m+
\e[m
\e[41m
\e[m
3510 \e[32m+
\e[m
\e[32m initEvents : function()
\e[m
3511 \e[32m+
\e[m
\e[32m {
\e[m
3512 \e[32m+
\e[m
\e[32m this.urlAPI = (window.createObjectURL && window) ||
\e[m
\e[41m
\e[m
3513 \e[32m+
\e[m
\e[32m (window.URL && URL.revokeObjectURL && URL) ||
\e[m
\e[41m
\e[m
3514 \e[32m+
\e[m
\e[32m (window.webkitURL && webkitURL);
\e[m
3515 \e[32m+
\e[m
\e[41m
\e[m
3516 \e[32m+
\e[m
\e[32m this.bodyEl = this.el.select('.roo-upload-cropbox-body', true).first();
\e[m
3517 \e[32m+
\e[m
\e[32m this.bodyEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
\e[m
3518 \e[32m+
\e[m
\e[41m
\e[m
3519 \e[32m+
\e[m
\e[32m this.selectorEl = this.el.select('.roo-upload-cropbox-selector', true).first();
\e[m
3520 \e[32m+
\e[m
\e[32m this.selectorEl.hide();
\e[m
3521 \e[32m+
\e[m
\e[41m
\e[m
3522 \e[32m+
\e[m
\e[32m this.previewEl = this.el.select('.roo-upload-cropbox-preview', true).first();
\e[m
3523 \e[32m+
\e[m
\e[32m this.previewEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
\e[m
3524 \e[32m+
\e[m
\e[41m
\e[m
3525 \e[32m+
\e[m
\e[32m this.thumbEl = this.el.select('.roo-upload-cropbox-thumb', true).first();
\e[m
3526 \e[32m+
\e[m
\e[32m this.thumbEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
\e[m
3527 \e[32m+
\e[m
\e[32m this.thumbEl.hide();
\e[m
3528 \e[32m+
\e[m
\e[41m
\e[m
3529 \e[32m+
\e[m
\e[32m this.notifyEl = this.el.select('.roo-upload-cropbox-empty-notify', true).first();
\e[m
3530 \e[32m+
\e[m
\e[32m this.notifyEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
\e[m
3531 \e[32m+
\e[m
\e[41m
\e[m
3532 \e[32m+
\e[m
\e[32m this.errorEl = this.el.select('.roo-upload-cropbox-error-notify', true).first();
\e[m
3533 \e[32m+
\e[m
\e[32m this.errorEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
\e[m
3534 \e[32m+
\e[m
\e[32m this.errorEl.hide();
\e[m
3535 \e[32m+
\e[m
\e[41m
\e[m
3536 \e[32m+
\e[m
\e[32m this.footerEl = this.el.select('.roo-upload-cropbox-footer', true).first();
\e[m
3537 \e[32m+
\e[m
\e[32m this.footerEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
\e[m
3538 \e[32m+
\e[m
\e[32m this.footerEl.hide();
\e[m
3539 \e[32m+
\e[m
\e[41m
\e[m
3540 \e[32m+
\e[m
\e[32m this.setThumbBoxSize();
\e[m
3541 \e[32m+
\e[m
\e[41m
\e[m
3542 \e[32m+
\e[m
\e[32m this.bind();
\e[m
3543 \e[32m+
\e[m
\e[41m
\e[m
3544 \e[32m+
\e[m
\e[32m this.resize();
\e[m
3545 \e[32m+
\e[m
\e[41m
\e[m
3546 \e[32m+
\e[m
\e[32m this.fireEvent('initial', this);
\e[m
3547 \e[32m+
\e[m
\e[32m },
\e[m
3549 \e[32m+
\e[m
\e[32m bind : function()
\e[m
3550 \e[32m+
\e[m
\e[32m {
\e[m
3551 \e[32m+
\e[m
\e[32m var _this = this;
\e[m
3552 \e[32m+
\e[m
\e[41m
\e[m
3553 \e[32m+
\e[m
\e[32m window.addEventListener("resize", function() { _this.resize(); } );
\e[m
3554 \e[32m+
\e[m
\e[41m
\e[m
3555 \e[32m+
\e[m
\e[32m this.bodyEl.on('click', this.beforeSelectFile, this);
\e[m
3556 \e[32m+
\e[m
\e[41m
\e[m
3557 \e[32m+
\e[m
\e[32m if(Roo.isTouch){
\e[m
3558 \e[32m+
\e[m
\e[32m this.bodyEl.on('touchstart', this.onTouchStart, this);
\e[m
3559 \e[32m+
\e[m
\e[32m this.bodyEl.on('touchmove', this.onTouchMove, this);
\e[m
3560 \e[32m+
\e[m
\e[32m this.bodyEl.on('touchend', this.onTouchEnd, this);
\e[m
3561 \e[32m+
\e[m
\e[32m }
\e[m
3562 \e[32m+
\e[m
\e[41m
\e[m
3563 \e[32m+
\e[m
\e[32m if(!Roo.isTouch){
\e[m
3564 \e[32m+
\e[m
\e[32m this.bodyEl.on('mousedown', this.onMouseDown, this);
\e[m
3565 \e[32m+
\e[m
\e[32m this.bodyEl.on('mousemove', this.onMouseMove, this);
\e[m
3566 \e[32m+
\e[m
\e[32m var mousewheel = (/Firefox/i.test(navigator.userAgent))? 'DOMMouseScroll' : 'mousewheel';
\e[m
3567 \e[32m+
\e[m
\e[32m this.bodyEl.on(mousewheel, this.onMouseWheel, this);
\e[m
3568 \e[32m+
\e[m
\e[32m Roo.get(document).on('mouseup', this.onMouseUp, this);
\e[m
3569 \e[32m+
\e[m
\e[32m }
\e[m
3570 \e[32m+
\e[m
\e[41m
\e[m
3571 \e[32m+
\e[m
\e[32m this.selectorEl.on('change', this.onFileSelected, this);
\e[m
3572 \e[32m+
\e[m
\e[32m },
\e[m
3573 \e[32m+
\e[m
\e[41m
\e[m
3574 \e[32m+
\e[m
\e[32m reset : function()
\e[m
3575 \e[32m+
\e[m
\e[32m {
\e[m
\e[41m
\e[m
3576 \e[32m+
\e[m
\e[32m this.scale = 0;
\e[m
3577 \e[32m+
\e[m
\e[32m this.baseScale = 1;
\e[m
3578 \e[32m+
\e[m
\e[32m this.rotate = 0;
\e[m
3579 \e[32m+
\e[m
\e[32m this.baseRotate = 1;
\e[m
3580 \e[32m+
\e[m
\e[32m this.dragable = false;
\e[m
3581 \e[32m+
\e[m
\e[32m this.pinching = false;
\e[m
3582 \e[32m+
\e[m
\e[32m this.mouseX = 0;
\e[m
3583 \e[32m+
\e[m
\e[32m this.mouseY = 0;
\e[m
3584 \e[32m+
\e[m
\e[32m this.cropData = false;
\e[m
3585 \e[32m+
\e[m
\e[32m this.notifyEl.dom.innerHTML = this.emptyText;
\e[m
3586 \e[32m+
\e[m
\e[41m
\e[m
3587 \e[32m+
\e[m
\e[32m // this.selectorEl.dom.value = '';
\e[m
3588 \e[32m+
\e[m
\e[41m
\e[m
3589 \e[32m+
\e[m
\e[32m },
\e[m
3590 \e[32m+
\e[m
\e[41m
\e[m
3591 \e[32m+
\e[m
\e[32m resize : function()
\e[m
3592 \e[32m+
\e[m
\e[32m {
\e[m
3593 \e[32m+
\e[m
\e[32m if(this.fireEvent('resize', this) != false){
\e[m
3594 \e[32m+
\e[m
\e[32m this.setThumbBoxPosition();
\e[m
3595 \e[32m+
\e[m
\e[32m this.setCanvasPosition();
\e[m
3596 \e[32m+
\e[m
\e[32m }
\e[m
3597 \e[32m+
\e[m
\e[32m },
\e[m
3598 \e[32m+
\e[m
\e[41m
\e[m
3599 \e[32m+
\e[m
\e[32m onFooterButtonClick : function(e, el, o, type)
\e[m
3600 \e[32m+
\e[m
\e[32m {
\e[m
3601 \e[32m+
\e[m
\e[32m switch (type) {
\e[m
3602 \e[32m+
\e[m
\e[32m case 'rotate-left' :
\e[m
3603 \e[32m+
\e[m
\e[32m this.onRotateLeft(e);
\e[m
3604 \e[32m+
\e[m
\e[32m break;
\e[m
3605 \e[32m+
\e[m
\e[32m case 'rotate-right' :
\e[m
3606 \e[32m+
\e[m
\e[32m this.onRotateRight(e);
\e[m
3607 \e[32m+
\e[m
\e[32m break;
\e[m
3608 \e[32m+
\e[m
\e[32m case 'picture' :
\e[m
3609 \e[32m+
\e[m
\e[32m this.beforeSelectFile(e);
\e[m
3610 \e[32m+
\e[m
\e[32m break;
\e[m
3611 \e[32m+
\e[m
\e[32m case 'trash' :
\e[m
3612 \e[32m+
\e[m
\e[32m this.trash(e);
\e[m
3613 \e[32m+
\e[m
\e[32m break;
\e[m
3614 \e[32m+
\e[m
\e[32m case 'crop' :
\e[m
3615 \e[32m+
\e[m
\e[32m this.crop(e);
\e[m
3616 \e[32m+
\e[m
\e[32m break;
\e[m
3617 \e[32m+
\e[m
\e[32m case 'download' :
\e[m
3618 \e[32m+
\e[m
\e[32m this.download(e);
\e[m
3619 \e[32m+
\e[m
\e[32m break;
\e[m
3620 \e[32m+
\e[m
\e[32m default :
\e[m
3621 \e[32m+
\e[m
\e[32m break;
\e[m
3622 \e[32m+
\e[m
\e[32m }
\e[m
3623 \e[32m+
\e[m
\e[41m
\e[m
3624 \e[32m+
\e[m
\e[32m this.fireEvent('footerbuttonclick', this, type);
\e[m
3625 \e[32m+
\e[m
\e[32m },
\e[m
3626 \e[32m+
\e[m
\e[41m
\e[m
3627 \e[32m+
\e[m
\e[32m beforeSelectFile : function(e)
\e[m
3628 \e[32m+
\e[m
\e[32m {
\e[m
3629 \e[32m+
\e[m
\e[32m e.preventDefault();
\e[m
3630 \e[32m+
\e[m
\e[41m
\e[m
3631 \e[32m+
\e[m
\e[32m if(this.fireEvent('beforeselectfile', this) != false){
\e[m
3632 \e[32m+
\e[m
\e[32m this.selectorEl.dom.click();
\e[m
3633 \e[32m+
\e[m
\e[32m }
\e[m
3634 \e[32m+
\e[m
\e[32m },
\e[m
3635 \e[32m+
\e[m
\e[41m
\e[m
3636 \e[32m+
\e[m
\e[32m onFileSelected : function(e)
\e[m
3637 \e[32m+
\e[m
\e[32m {
\e[m
3638 \e[32m+
\e[m
\e[32m e.preventDefault();
\e[m
3639 \e[32m+
\e[m
\e[41m
\e[m
3640 \e[32m+
\e[m
\e[32m if(typeof(this.selectorEl.dom.files) == 'undefined' || !this.selectorEl.dom.files.length){
\e[m
3641 \e[32m+
\e[m
\e[32m return;
\e[m
3642 \e[32m+
\e[m
\e[32m }
\e[m
3643 \e[32m+
\e[m
\e[41m
\e[m
3644 \e[32m+
\e[m
\e[32m var file = this.selectorEl.dom.files[0];
\e[m
3645 \e[32m+
\e[m
\e[41m
\e[m
3646 \e[32m+
\e[m
\e[32m if(this.fireEvent('inspect', this, file) != false){
\e[m
3647 \e[32m+
\e[m
\e[32m this.prepare(file);
\e[m
3648 \e[32m+
\e[m
\e[32m }
\e[m
3649 \e[32m+
\e[m
\e[41m
\e[m
3650 \e[32m+
\e[m
\e[32m },
\e[m
3651 \e[32m+
\e[m
\e[41m
\e[m
3652 \e[32m+
\e[m
\e[32m trash : function(e)
\e[m
3653 \e[32m+
\e[m
\e[32m {
\e[m
3654 \e[32m+
\e[m
\e[32m this.fireEvent('trash', this);
\e[m
3655 \e[32m+
\e[m
\e[32m },
\e[m
3656 \e[32m+
\e[m
\e[41m
\e[m
3657 \e[32m+
\e[m
\e[32m download : function(e)
\e[m
3658 \e[32m+
\e[m
\e[32m {
\e[m
3659 \e[32m+
\e[m
\e[32m this.fireEvent('download', this);
\e[m
3660 \e[32m+
\e[m
\e[32m },
\e[m
3661 \e[32m+
\e[m
\e[41m
\e[m
3662 \e[32m+
\e[m
\e[32m loadCanvas : function(src)
\e[m
3663 \e[32m+
\e[m
\e[32m {
\e[m
\e[41m
\e[m
3664 \e[32m+
\e[m
\e[32m if(this.fireEvent('beforeloadcanvas', this, src) != false){
\e[m
3665 \e[32m+
\e[m
\e[41m
\e[m
3666 \e[32m+
\e[m
\e[32m this.reset();
\e[m
3667 \e[32m+
\e[m
\e[41m
\e[m
3668 \e[32m+
\e[m
\e[32m this.imageEl = document.createElement('img');
\e[m
3669 \e[32m+
\e[m
\e[41m
\e[m
3670 \e[32m+
\e[m
\e[32m var _this = this;
\e[m
3671 \e[32m+
\e[m
\e[41m
\e[m
3672 \e[32m+
\e[m
\e[32m this.imageEl.addEventListener("load", function(){ _this.onLoadCanvas(); });
\e[m
3673 \e[32m+
\e[m
\e[41m
\e[m
3674 \e[32m+
\e[m
\e[32m this.imageEl.src = src;
\e[m
3675 \e[32m+
\e[m
\e[32m }
\e[m
3676 \e[32m+
\e[m
\e[32m },
\e[m
3677 \e[32m+
\e[m
\e[41m
\e[m
3678 \e[32m+
\e[m
\e[32m onLoadCanvas : function()
\e[m
3679 \e[32m+
\e[m
\e[32m {
\e[m
\e[41m
\e[m
3680 \e[32m+
\e[m
\e[32m this.imageEl.OriginWidth = this.imageEl.naturalWidth || this.imageEl.width;
\e[m
3681 \e[32m+
\e[m
\e[32m this.imageEl.OriginHeight = this.imageEl.naturalHeight || this.imageEl.height;
\e[m
3683 \e[32m+
\e[m
\e[32m if(this.fireEvent('loadcanvas', this, this.imageEl) != false){
\e[m
3684 \e[32m+
\e[m
\e[41m
\e[m
3685 \e[32m+
\e[m
\e[32m this.bodyEl.un('click', this.beforeSelectFile, this);
\e[m
3686 \e[32m+
\e[m
\e[41m
\e[m
3687 \e[32m+
\e[m
\e[32m this.notifyEl.hide();
\e[m
3688 \e[32m+
\e[m
\e[32m this.thumbEl.show();
\e[m
3689 \e[32m+
\e[m
\e[32m this.footerEl.show();
\e[m
3690 \e[32m+
\e[m
\e[41m
\e[m
3691 \e[32m+
\e[m
\e[32m this.baseRotateLevel();
\e[m
3692 \e[32m+
\e[m
\e[41m
\e[m
3693 \e[32m+
\e[m
\e[32m if(this.isDocument){
\e[m
3694 \e[32m+
\e[m
\e[32m this.setThumbBoxSize();
\e[m
3695 \e[32m+
\e[m
\e[32m }
\e[m
3696 \e[32m+
\e[m
\e[41m
\e[m
3697 \e[32m+
\e[m
\e[32m this.setThumbBoxPosition();
\e[m
3698 \e[32m+
\e[m
\e[41m
\e[m
3699 \e[32m+
\e[m
\e[32m this.baseScaleLevel();
\e[m
3700 \e[32m+
\e[m
\e[41m
\e[m
3701 \e[32m+
\e[m
\e[32m this.draw();
\e[m
3702 \e[32m+
\e[m
\e[41m
\e[m
3703 \e[32m+
\e[m
\e[32m this.resize();
\e[m
3704 \e[32m+
\e[m
\e[41m
\e[m
3705 \e[32m+
\e[m
\e[32m this.canvasLoaded = true;
\e[m
3706 \e[32m+
\e[m
\e[41m
\e[m
3707 \e[32m+
\e[m
\e[32m }
\e[m
3708 \e[32m+
\e[m
\e[41m
\e[m
3709 \e[32m+
\e[m
\e[32m if(this.loadMask){
\e[m
3710 \e[32m+
\e[m
\e[32m this.maskEl.unmask();
\e[m
3711 \e[32m+
\e[m
\e[32m }
\e[m
3712 \e[32m+
\e[m
\e[41m
\e[m
3713 \e[32m+
\e[m
\e[32m },
\e[m
3714 \e[32m+
\e[m
\e[41m
\e[m
3715 \e[32m+
\e[m
\e[32m setCanvasPosition : function()
\e[m
3716 \e[32m+
\e[m
\e[32m {
\e[m
\e[41m
\e[m
3717 \e[32m+
\e[m
\e[32m if(!this.canvasEl){
\e[m
3718 \e[32m+
\e[m
\e[32m return;
\e[m
3719 \e[32m+
\e[m
\e[32m }
\e[m
3720 \e[32m+
\e[m
\e[41m
\e[m
3721 \e[32m+
\e[m
\e[32m var pw = Math.ceil((this.bodyEl.getWidth() - this.canvasEl.width) / 2);
\e[m
3722 \e[32m+
\e[m
\e[32m var ph = Math.ceil((this.bodyEl.getHeight() - this.canvasEl.height) / 2);
\e[m
3723 \e[32m+
\e[m
\e[41m
\e[m
3724 \e[32m+
\e[m
\e[32m this.previewEl.setLeft(pw);
\e[m
3725 \e[32m+
\e[m
\e[32m this.previewEl.setTop(ph);
\e[m
3726 \e[32m+
\e[m
\e[41m
\e[m
3727 \e[32m+
\e[m
\e[32m },
\e[m
3728 \e[32m+
\e[m
\e[41m
\e[m
3729 \e[32m+
\e[m
\e[32m onMouseDown : function(e)
\e[m
3730 \e[32m+
\e[m
\e[32m {
\e[m
\e[41m
\e[m
3731 \e[32m+
\e[m
\e[32m e.stopEvent();
\e[m
3732 \e[32m+
\e[m
\e[41m
\e[m
3733 \e[32m+
\e[m
\e[32m this.dragable = true;
\e[m
3734 \e[32m+
\e[m
\e[32m this.pinching = false;
\e[m
3735 \e[32m+
\e[m
\e[41m
\e[m
3736 \e[32m+
\e[m
\e[32m if(this.isDocument && (this.canvasEl.width < this.thumbEl.getWidth() || this.canvasEl.height < this.thumbEl.getHeight())){
\e[m
3737 \e[32m+
\e[m
\e[32m this.dragable = false;
\e[m
3738 \e[32m+
\e[m
\e[32m return;
\e[m
3739 \e[32m+
\e[m
\e[32m }
\e[m
3740 \e[32m+
\e[m
\e[41m
\e[m
3741 \e[32m+
\e[m
\e[32m this.mouseX = Roo.isTouch ? e.browserEvent.touches[0].pageX : e.getPageX();
\e[m
3742 \e[32m+
\e[m
\e[32m this.mouseY = Roo.isTouch ? e.browserEvent.touches[0].pageY : e.getPageY();
\e[m
3743 \e[32m+
\e[m
\e[41m
\e[m
3744 \e[32m+
\e[m
\e[32m },
\e[m
3745 \e[32m+
\e[m
\e[41m
\e[m
3746 \e[32m+
\e[m
\e[32m onMouseMove : function(e)
\e[m
3747 \e[32m+
\e[m
\e[32m {
\e[m
\e[41m
\e[m
3748 \e[32m+
\e[m
\e[32m e.stopEvent();
\e[m
3749 \e[32m+
\e[m
\e[41m
\e[m
3750 \e[32m+
\e[m
\e[32m if(!this.canvasLoaded){
\e[m
3751 \e[32m+
\e[m
\e[32m return;
\e[m
3752 \e[32m+
\e[m
\e[32m }
\e[m
3753 \e[32m+
\e[m
\e[41m
\e[m
3754 \e[32m+
\e[m
\e[32m if (!this.dragable){
\e[m
3755 \e[32m+
\e[m
\e[32m return;
\e[m
3756 \e[32m+
\e[m
\e[32m }
\e[m
3757 \e[32m+
\e[m
\e[41m
\e[m
3758 \e[32m+
\e[m
\e[32m var minX = Math.ceil(this.thumbEl.getLeft(true));
\e[m
3759 \e[32m+
\e[m
\e[32m var minY = Math.ceil(this.thumbEl.getTop(true));
\e[m
3760 \e[32m+
\e[m
\e[41m
\e[m
3761 \e[32m+
\e[m
\e[32m var maxX = Math.ceil(minX + this.thumbEl.getWidth() - this.canvasEl.width);
\e[m
3762 \e[32m+
\e[m
\e[32m var maxY = Math.ceil(minY + this.thumbEl.getHeight() - this.canvasEl.height);
\e[m
3763 \e[32m+
\e[m
\e[41m
\e[m
3764 \e[32m+
\e[m
\e[32m var x = Roo.isTouch ? e.browserEvent.touches[0].pageX : e.getPageX();
\e[m
3765 \e[32m+
\e[m
\e[32m var y = Roo.isTouch ? e.browserEvent.touches[0].pageY : e.getPageY();
\e[m
3766 \e[32m+
\e[m
\e[41m
\e[m
3767 \e[32m+
\e[m
\e[32m x = x - this.mouseX;
\e[m
3768 \e[32m+
\e[m
\e[32m y = y - this.mouseY;
\e[m
3769 \e[32m+
\e[m
\e[41m
\e[m
3770 \e[32m+
\e[m
\e[32m var bgX = Math.ceil(x + this.previewEl.getLeft(true));
\e[m
3771 \e[32m+
\e[m
\e[32m var bgY = Math.ceil(y + this.previewEl.getTop(true));
\e[m
3772 \e[32m+
\e[m
\e[41m
\e[m
3773 \e[32m+
\e[m
\e[32m bgX = (minX < bgX) ? minX : ((maxX > bgX) ? maxX : bgX);
\e[m
3774 \e[32m+
\e[m
\e[32m bgY = (minY < bgY) ? minY : ((maxY > bgY) ? maxY : bgY);
\e[m
3775 \e[32m+
\e[m
\e[41m
\e[m
3776 \e[32m+
\e[m
\e[32m this.previewEl.setLeft(bgX);
\e[m
3777 \e[32m+
\e[m
\e[32m this.previewEl.setTop(bgY);
\e[m
3778 \e[32m+
\e[m
\e[41m
\e[m
3779 \e[32m+
\e[m
\e[32m this.mouseX = Roo.isTouch ? e.browserEvent.touches[0].pageX : e.getPageX();
\e[m
3780 \e[32m+
\e[m
\e[32m this.mouseY = Roo.isTouch ? e.browserEvent.touches[0].pageY : e.getPageY();
\e[m
3781 \e[32m+
\e[m
\e[32m },
\e[m
3782 \e[32m+
\e[m
\e[41m
\e[m
3783 \e[32m+
\e[m
\e[32m onMouseUp : function(e)
\e[m
3784 \e[32m+
\e[m
\e[32m {
\e[m
\e[41m
\e[m
3785 \e[32m+
\e[m
\e[32m e.stopEvent();
\e[m
3786 \e[32m+
\e[m
\e[41m
\e[m
3787 \e[32m+
\e[m
\e[32m this.dragable = false;
\e[m
3788 \e[32m+
\e[m
\e[32m },
\e[m
3789 \e[32m+
\e[m
\e[41m
\e[m
3790 \e[32m+
\e[m
\e[32m onMouseWheel : function(e)
\e[m
3791 \e[32m+
\e[m
\e[32m {
\e[m
\e[41m
\e[m
3792 \e[32m+
\e[m
\e[32m e.stopEvent();
\e[m
3793 \e[32m+
\e[m
\e[41m
\e[m
3794 \e[32m+
\e[m
\e[32m this.startScale = this.scale;
\e[m
3795 \e[32m+
\e[m
\e[41m
\e[m
3796 \e[32m+
\e[m
\e[32m this.scale = (e.getWheelDelta() == 1) ? (this.scale + 1) : (this.scale - 1);
\e[m
3797 \e[32m+
\e[m
\e[41m
\e[m
3798 \e[32m+
\e[m
\e[32m if(!this.zoomable()){
\e[m
3799 \e[32m+
\e[m
\e[32m this.scale = this.startScale;
\e[m
3800 \e[32m+
\e[m
\e[32m return;
\e[m
3801 \e[32m+
\e[m
\e[32m }
\e[m
3802 \e[32m+
\e[m
\e[41m
\e[m
3803 \e[32m+
\e[m
\e[32m this.draw();
\e[m
3804 \e[32m+
\e[m
\e[41m
\e[m
3805 \e[32m+
\e[m
\e[32m return;
\e[m
3806 \e[32m+
\e[m
\e[32m },
\e[m
3807 \e[32m+
\e[m
\e[41m
\e[m
3808 \e[32m+
\e[m
\e[32m zoomable : function()
\e[m
3809 \e[32m+
\e[m
\e[32m {
\e[m
3810 \e[32m+
\e[m
\e[32m var minScale = this.thumbEl.getWidth() / this.minWidth;
\e[m
3811 \e[32m+
\e[m
\e[41m
\e[m
3812 \e[32m+
\e[m
\e[32m if(this.minWidth < this.minHeight){
\e[m
3813 \e[32m+
\e[m
\e[32m minScale = this.thumbEl.getHeight() / this.minHeight;
\e[m
3814 \e[32m+
\e[m
\e[32m }
\e[m
3815 \e[32m+
\e[m
\e[41m
\e[m
3816 \e[32m+
\e[m
\e[32m var width = Math.ceil(this.imageEl.OriginWidth * this.getScaleLevel() / minScale);
\e[m
3817 \e[32m+
\e[m
\e[32m var height = Math.ceil(this.imageEl.OriginHeight * this.getScaleLevel() / minScale);
\e[m
3818 \e[32m+
\e[m
\e[41m
\e[m
3819 \e[32m+
\e[m
\e[32m if(
\e[m
3820 \e[32m+
\e[m
\e[32m this.isDocument &&
\e[m
3821 \e[32m+
\e[m
\e[32m (this.rotate == 0 || this.rotate == 180) &&
\e[m
\e[41m
\e[m
3822 \e[32m+
\e[m
\e[32m (
\e[m
3823 \e[32m+
\e[m
\e[32m width > this.imageEl.OriginWidth ||
\e[m
\e[41m
\e[m
3824 \e[32m+
\e[m
\e[32m height > this.imageEl.OriginHeight ||
\e[m
3825 \e[32m+
\e[m
\e[32m (width < this.minWidth && height < this.minHeight)
\e[m
3826 \e[32m+
\e[m
\e[32m )
\e[m
3827 \e[32m+
\e[m
\e[32m ){
\e[m
3828 \e[32m+
\e[m
\e[32m return false;
\e[m
3829 \e[32m+
\e[m
\e[32m }
\e[m
3830 \e[32m+
\e[m
\e[41m
\e[m
3831 \e[32m+
\e[m
\e[32m if(
\e[m
3832 \e[32m+
\e[m
\e[32m this.isDocument &&
\e[m
3833 \e[32m+
\e[m
\e[32m (this.rotate == 90 || this.rotate == 270) &&
\e[m
\e[41m
\e[m
3834 \e[32m+
\e[m
\e[32m (
\e[m
3835 \e[32m+
\e[m
\e[32m width > this.imageEl.OriginWidth ||
\e[m
\e[41m
\e[m
3836 \e[32m+
\e[m
\e[32m height > this.imageEl.OriginHeight ||
\e[m
3837 \e[32m+
\e[m
\e[32m (width < this.minHeight && height < this.minWidth)
\e[m
3838 \e[32m+
\e[m
\e[32m )
\e[m
3839 \e[32m+
\e[m
\e[32m ){
\e[m
3840 \e[32m+
\e[m
\e[32m return false;
\e[m
3841 \e[32m+
\e[m
\e[32m }
\e[m
3842 \e[32m+
\e[m
\e[41m
\e[m
3843 \e[32m+
\e[m
\e[32m if(
\e[m
3844 \e[32m+
\e[m
\e[32m !this.isDocument &&
\e[m
3845 \e[32m+
\e[m
\e[32m (this.rotate == 0 || this.rotate == 180) &&
\e[m
\e[41m
\e[m
3846 \e[32m+
\e[m
\e[32m (
\e[m
3847 \e[32m+
\e[m
\e[32m width < this.minWidth ||
\e[m
\e[41m
\e[m
3848 \e[32m+
\e[m
\e[32m width > this.imageEl.OriginWidth ||
\e[m
\e[41m
\e[m
3849 \e[32m+
\e[m
\e[32m height < this.minHeight ||
\e[m
\e[41m
\e[m
3850 \e[32m+
\e[m
\e[32m height > this.imageEl.OriginHeight
\e[m
3851 \e[32m+
\e[m
\e[32m )
\e[m
3852 \e[32m+
\e[m
\e[32m ){
\e[m
3853 \e[32m+
\e[m
\e[32m return false;
\e[m
3854 \e[32m+
\e[m
\e[32m }
\e[m
3855 \e[32m+
\e[m
\e[41m
\e[m
3856 \e[32m+
\e[m
\e[32m if(
\e[m
3857 \e[32m+
\e[m
\e[32m !this.isDocument &&
\e[m
3858 \e[32m+
\e[m
\e[32m (this.rotate == 90 || this.rotate == 270) &&
\e[m
\e[41m
\e[m
3859 \e[32m+
\e[m
\e[32m (
\e[m
3860 \e[32m+
\e[m
\e[32m width < this.minHeight ||
\e[m
\e[41m
\e[m
3861 \e[32m+
\e[m
\e[32m width > this.imageEl.OriginWidth ||
\e[m
\e[41m
\e[m
3862 \e[32m+
\e[m
\e[32m height < this.minWidth ||
\e[m
\e[41m
\e[m
3863 \e[32m+
\e[m
\e[32m height > this.imageEl.OriginHeight
\e[m
3864 \e[32m+
\e[m
\e[32m )
\e[m
3865 \e[32m+
\e[m
\e[32m ){
\e[m
3866 \e[32m+
\e[m
\e[32m return false;
\e[m
3867 \e[32m+
\e[m
\e[32m }
\e[m
3868 \e[32m+
\e[m
\e[41m
\e[m
3869 \e[32m+
\e[m
\e[32m return true;
\e[m
3870 \e[32m+
\e[m
\e[41m
\e[m
3871 \e[32m+
\e[m
\e[32m },
\e[m
3872 \e[32m+
\e[m
\e[41m
\e[m
3873 \e[32m+
\e[m
\e[32m onRotateLeft : function(e)
\e[m
3874 \e[32m+
\e[m
\e[32m {
\e[m
\e[41m
\e[m
3875 \e[32m+
\e[m
\e[32m if(!this.isDocument && (this.canvasEl.height < this.thumbEl.getWidth() || this.canvasEl.width < this.thumbEl.getHeight())){
\e[m
3876 \e[32m+
\e[m
\e[41m
\e[m
3877 \e[32m+
\e[m
\e[32m var minScale = this.thumbEl.getWidth() / this.minWidth;
\e[m
3878 \e[32m+
\e[m
\e[41m
\e[m
3879 \e[32m+
\e[m
\e[32m var bw = Math.ceil(this.canvasEl.width / this.getScaleLevel());
\e[m
3880 \e[32m+
\e[m
\e[32m var bh = Math.ceil(this.canvasEl.height / this.getScaleLevel());
\e[m
3881 \e[32m+
\e[m
\e[41m
\e[m
3882 \e[32m+
\e[m
\e[32m this.startScale = this.scale;
\e[m
3883 \e[32m+
\e[m
\e[41m
\e[m
3884 \e[32m+
\e[m
\e[32m while (this.getScaleLevel() < minScale){
\e[m
3885 \e[32m+
\e[m
\e[41m
\e[m
3886 \e[32m+
\e[m
\e[32m this.scale = this.scale + 1;
\e[m
3887 \e[32m+
\e[m
\e[41m
\e[m
3888 \e[32m+
\e[m
\e[32m if(!this.zoomable()){
\e[m
3889 \e[32m+
\e[m
\e[32m break;
\e[m
3890 \e[32m+
\e[m
\e[32m }
\e[m
3891 \e[32m+
\e[m
\e[41m
\e[m
3892 \e[32m+
\e[m
\e[32m if(
\e[m
3893 \e[32m+
\e[m
\e[32m Math.ceil(bw * this.getScaleLevel()) < this.thumbEl.getHeight() ||
\e[m
3894 \e[32m+
\e[m
\e[32m Math.ceil(bh * this.getScaleLevel()) < this.thumbEl.getWidth()
\e[m
3895 \e[32m+
\e[m
\e[32m ){
\e[m
3896 \e[32m+
\e[m
\e[32m continue;
\e[m
3897 \e[32m+
\e[m
\e[32m }
\e[m
3898 \e[32m+
\e[m
\e[41m
\e[m
3899 \e[32m+
\e[m
\e[32m this.rotate = (this.rotate < 90) ? 270 : this.rotate - 90;
\e[m
3901 \e[32m+
\e[m
\e[32m this.draw();
\e[m
3902 \e[32m+
\e[m
\e[41m
\e[m
3903 \e[32m+
\e[m
\e[32m return;
\e[m
3904 \e[32m+
\e[m
\e[32m }
\e[m
3905 \e[32m+
\e[m
\e[41m
\e[m
3906 \e[32m+
\e[m
\e[32m this.scale = this.startScale;
\e[m
3907 \e[32m+
\e[m
\e[41m
\e[m
3908 \e[32m+
\e[m
\e[32m this.onRotateFail();
\e[m
3909 \e[32m+
\e[m
\e[41m
\e[m
3910 \e[32m+
\e[m
\e[32m return false;
\e[m
3911 \e[32m+
\e[m
\e[32m }
\e[m
3912 \e[32m+
\e[m
\e[41m
\e[m
3913 \e[32m+
\e[m
\e[32m this.rotate = (this.rotate < 90) ? 270 : this.rotate - 90;
\e[m
3915 \e[32m+
\e[m
\e[32m if(this.isDocument){
\e[m
3916 \e[32m+
\e[m
\e[32m this.setThumbBoxSize();
\e[m
3917 \e[32m+
\e[m
\e[32m this.setThumbBoxPosition();
\e[m
3918 \e[32m+
\e[m
\e[32m this.setCanvasPosition();
\e[m
3919 \e[32m+
\e[m
\e[32m }
\e[m
3920 \e[32m+
\e[m
\e[41m
\e[m
3921 \e[32m+
\e[m
\e[32m this.draw();
\e[m
3922 \e[32m+
\e[m
\e[41m
\e[m
3923 \e[32m+
\e[m
\e[32m this.fireEvent('rotate', this, 'left');
\e[m
3924 \e[32m+
\e[m
\e[41m
\e[m
3925 \e[32m+
\e[m
\e[32m },
\e[m
3926 \e[32m+
\e[m
\e[41m
\e[m
3927 \e[32m+
\e[m
\e[32m onRotateRight : function(e)
\e[m
3928 \e[32m+
\e[m
\e[32m {
\e[m
3929 \e[32m+
\e[m
\e[32m if(!this.isDocument && (this.canvasEl.height < this.thumbEl.getWidth() || this.canvasEl.width < this.thumbEl.getHeight())){
\e[m
3930 \e[32m+
\e[m
\e[41m
\e[m
3931 \e[32m+
\e[m
\e[32m var minScale = this.thumbEl.getWidth() / this.minWidth;
\e[m
3932 \e[32m+
\e[m
\e[41m
\e[m
3933 \e[32m+
\e[m
\e[32m var bw = Math.ceil(this.canvasEl.width / this.getScaleLevel());
\e[m
3934 \e[32m+
\e[m
\e[32m var bh = Math.ceil(this.canvasEl.height / this.getScaleLevel());
\e[m
3935 \e[32m+
\e[m
\e[41m
\e[m
3936 \e[32m+
\e[m
\e[32m this.startScale = this.scale;
\e[m
3937 \e[32m+
\e[m
\e[41m
\e[m
3938 \e[32m+
\e[m
\e[32m while (this.getScaleLevel() < minScale){
\e[m
3939 \e[32m+
\e[m
\e[41m
\e[m
3940 \e[32m+
\e[m
\e[32m this.scale = this.scale + 1;
\e[m
3941 \e[32m+
\e[m
\e[41m
\e[m
3942 \e[32m+
\e[m
\e[32m if(!this.zoomable()){
\e[m
3943 \e[32m+
\e[m
\e[32m break;
\e[m
3944 \e[32m+
\e[m
\e[32m }
\e[m
3945 \e[32m+
\e[m
\e[41m
\e[m
3946 \e[32m+
\e[m
\e[32m if(
\e[m
3947 \e[32m+
\e[m
\e[32m Math.ceil(bw * this.getScaleLevel()) < this.thumbEl.getHeight() ||
\e[m
3948 \e[32m+
\e[m
\e[32m Math.ceil(bh * this.getScaleLevel()) < this.thumbEl.getWidth()
\e[m
3949 \e[32m+
\e[m
\e[32m ){
\e[m
3950 \e[32m+
\e[m
\e[32m continue;
\e[m
3951 \e[32m+
\e[m
\e[32m }
\e[m
3952 \e[32m+
\e[m
\e[41m
\e[m
3953 \e[32m+
\e[m
\e[32m this.rotate = (this.rotate > 180) ? 0 : this.rotate + 90;
\e[m
3955 \e[32m+
\e[m
\e[32m this.draw();
\e[m
3956 \e[32m+
\e[m
\e[41m
\e[m
3957 \e[32m+
\e[m
\e[32m return;
\e[m
3958 \e[32m+
\e[m
\e[32m }
\e[m
3959 \e[32m+
\e[m
\e[41m
\e[m
3960 \e[32m+
\e[m
\e[32m this.scale = this.startScale;
\e[m
3961 \e[32m+
\e[m
\e[41m
\e[m
3962 \e[32m+
\e[m
\e[32m this.onRotateFail();
\e[m
3963 \e[32m+
\e[m
\e[41m
\e[m
3964 \e[32m+
\e[m
\e[32m return false;
\e[m
3965 \e[32m+
\e[m
\e[32m }
\e[m
3966 \e[32m+
\e[m
\e[41m
\e[m
3967 \e[32m+
\e[m
\e[32m this.rotate = (this.rotate > 180) ? 0 : this.rotate + 90;
\e[m
3969 \e[32m+
\e[m
\e[32m if(this.isDocument){
\e[m
3970 \e[32m+
\e[m
\e[32m this.setThumbBoxSize();
\e[m
3971 \e[32m+
\e[m
\e[32m this.setThumbBoxPosition();
\e[m
3972 \e[32m+
\e[m
\e[32m this.setCanvasPosition();
\e[m
3973 \e[32m+
\e[m
\e[32m }
\e[m
3974 \e[32m+
\e[m
\e[41m
\e[m
3975 \e[32m+
\e[m
\e[32m this.draw();
\e[m
3976 \e[32m+
\e[m
\e[41m
\e[m
3977 \e[32m+
\e[m
\e[32m this.fireEvent('rotate', this, 'right');
\e[m
3978 \e[32m+
\e[m
\e[32m },
\e[m
3979 \e[32m+
\e[m
\e[41m
\e[m
3980 \e[32m+
\e[m
\e[32m onRotateFail : function()
\e[m
3981 \e[32m+
\e[m
\e[32m {
\e[m
3982 \e[32m+
\e[m
\e[32m this.errorEl.show(true);
\e[m
3983 \e[32m+
\e[m
\e[41m
\e[m
3984 \e[32m+
\e[m
\e[32m var _this = this;
\e[m
3985 \e[32m+
\e[m
\e[41m
\e[m
3986 \e[32m+
\e[m
\e[32m (function() { _this.errorEl.hide(true); }).defer(this.errorTimeout);
\e[m
3987 \e[32m+
\e[m
\e[32m },
\e[m
3988 \e[32m+
\e[m
\e[41m
\e[m
3989 \e[32m+
\e[m
\e[32m draw : function()
\e[m
3990 \e[32m+
\e[m
\e[32m {
\e[m
3991 \e[32m+
\e[m
\e[32m this.previewEl.dom.innerHTML = '';
\e[m
3992 \e[32m+
\e[m
\e[41m
\e[m
3993 \e[32m+
\e[m
\e[32m var canvasEl = document.createElement("canvas");
\e[m
3994 \e[32m+
\e[m
\e[41m
\e[m
3995 \e[32m+
\e[m
\e[32m var contextEl = canvasEl.getContext("2d");
\e[m
3996 \e[32m+
\e[m
\e[41m
\e[m
3997 \e[32m+
\e[m
\e[32m canvasEl.width = this.imageEl.OriginWidth * this.getScaleLevel();
\e[m
3998 \e[32m+
\e[m
\e[32m canvasEl.height = this.imageEl.OriginWidth * this.getScaleLevel();
\e[m
3999 \e[32m+
\e[m
\e[32m var center = this.imageEl.OriginWidth / 2;
\e[m
4000 \e[32m+
\e[m
\e[41m
\e[m
4001 \e[32m+
\e[m
\e[32m if(this.imageEl.OriginWidth < this.imageEl.OriginHeight){
\e[m
4002 \e[32m+
\e[m
\e[32m canvasEl.width = this.imageEl.OriginHeight * this.getScaleLevel();
\e[m
4003 \e[32m+
\e[m
\e[32m canvasEl.height = this.imageEl.OriginHeight * this.getScaleLevel();
\e[m
4004 \e[32m+
\e[m
\e[32m center = this.imageEl.OriginHeight / 2;
\e[m
4005 \e[32m+
\e[m
\e[32m }
\e[m
4006 \e[32m+
\e[m
\e[41m
\e[m
4007 \e[32m+
\e[m
\e[32m contextEl.scale(this.getScaleLevel(), this.getScaleLevel());
\e[m
4008 \e[32m+
\e[m
\e[41m
\e[m
4009 \e[32m+
\e[m
\e[32m contextEl.translate(center, center);
\e[m
4010 \e[32m+
\e[m
\e[32m contextEl.rotate(this.rotate * Math.PI / 180);
\e[m
4012 \e[32m+
\e[m
\e[32m contextEl.drawImage(this.imageEl, 0, 0, this.imageEl.OriginWidth, this.imageEl.OriginHeight, center * -1, center * -1, this.imageEl.OriginWidth, this.imageEl.OriginHeight);
\e[m
4013 \e[32m+
\e[m
\e[41m
\e[m
4014 \e[32m+
\e[m
\e[32m this.canvasEl = document.createElement("canvas");
\e[m
4015 \e[32m+
\e[m
\e[41m
\e[m
4016 \e[32m+
\e[m
\e[32m this.contextEl = this.canvasEl.getContext("2d");
\e[m
4017 \e[32m+
\e[m
\e[41m
\e[m
4018 \e[32m+
\e[m
\e[32m switch (this.rotate) {
\e[m
4019 \e[32m+
\e[m
\e[32m case 0 :
\e[m
4020 \e[32m+
\e[m
\e[41m
\e[m
4021 \e[32m+
\e[m
\e[32m this.canvasEl.width = this.imageEl.OriginWidth * this.getScaleLevel();
\e[m
4022 \e[32m+
\e[m
\e[32m this.canvasEl.height = this.imageEl.OriginHeight * this.getScaleLevel();
\e[m
4023 \e[32m+
\e[m
\e[41m
\e[m
4024 \e[32m+
\e[m
\e[32m this.contextEl.drawImage(canvasEl, 0, 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
\e[m
4025 \e[32m+
\e[m
\e[41m
\e[m
4026 \e[32m+
\e[m
\e[32m break;
\e[m
4027 \e[32m+
\e[m
\e[32m case 90 :
\e[m
\e[41m
\e[m
4028 \e[32m+
\e[m
\e[41m
\e[m
4029 \e[32m+
\e[m
\e[32m this.canvasEl.width = this.imageEl.OriginHeight * this.getScaleLevel();
\e[m
4030 \e[32m+
\e[m
\e[32m this.canvasEl.height = this.imageEl.OriginWidth * this.getScaleLevel();
\e[m
4031 \e[32m+
\e[m
\e[41m
\e[m
4032 \e[32m+
\e[m
\e[32m if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
\e[m
4033 \e[32m+
\e[m
\e[32m this.contextEl.drawImage(canvasEl, Math.abs(this.canvasEl.width - this.canvasEl.height), 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
\e[m
4034 \e[32m+
\e[m
\e[32m break;
\e[m
4035 \e[32m+
\e[m
\e[32m }
\e[m
4036 \e[32m+
\e[m
\e[41m
\e[m
4037 \e[32m+
\e[m
\e[32m this.contextEl.drawImage(canvasEl, 0, 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
\e[m
4038 \e[32m+
\e[m
\e[41m
\e[m
4039 \e[32m+
\e[m
\e[32m break;
\e[m
4040 \e[32m+
\e[m
\e[32m case 180 :
\e[m
4041 \e[32m+
\e[m
\e[41m
\e[m
4042 \e[32m+
\e[m
\e[32m this.canvasEl.width = this.imageEl.OriginWidth * this.getScaleLevel();
\e[m
4043 \e[32m+
\e[m
\e[32m this.canvasEl.height = this.imageEl.OriginHeight * this.getScaleLevel();
\e[m
4044 \e[32m+
\e[m
\e[41m
\e[m
4045 \e[32m+
\e[m
\e[32m if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
\e[m
4046 \e[32m+
\e[m
\e[32m this.contextEl.drawImage(canvasEl, 0, Math.abs(this.canvasEl.width - this.canvasEl.height), this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
\e[m
4047 \e[32m+
\e[m
\e[32m break;
\e[m
4048 \e[32m+
\e[m
\e[32m }
\e[m
4049 \e[32m+
\e[m
\e[41m
\e[m
4050 \e[32m+
\e[m
\e[32m this.contextEl.drawImage(canvasEl, Math.abs(this.canvasEl.width - this.canvasEl.height), 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
\e[m
4051 \e[32m+
\e[m
\e[41m
\e[m
4052 \e[32m+
\e[m
\e[32m break;
\e[m
4053 \e[32m+
\e[m
\e[32m case 270 :
\e[m
4054 \e[32m+
\e[m
\e[41m
\e[m
4055 \e[32m+
\e[m
\e[32m this.canvasEl.width = this.imageEl.OriginHeight * this.getScaleLevel();
\e[m
4056 \e[32m+
\e[m
\e[32m this.canvasEl.height = this.imageEl.OriginWidth * this.getScaleLevel();
\e[m
4057 \e[32m+
\e[m
\e[41m
\e[m
4058 \e[32m+
\e[m
\e[32m if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
\e[m
4059 \e[32m+
\e[m
\e[32m this.contextEl.drawImage(canvasEl, 0, 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
\e[m
4060 \e[32m+
\e[m
\e[32m break;
\e[m
4061 \e[32m+
\e[m
\e[32m }
\e[m
4062 \e[32m+
\e[m
\e[41m
\e[m
4063 \e[32m+
\e[m
\e[32m this.contextEl.drawImage(canvasEl, 0, Math.abs(this.canvasEl.width - this.canvasEl.height), this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
\e[m
4064 \e[32m+
\e[m
\e[41m
\e[m
4065 \e[32m+
\e[m
\e[32m break;
\e[m
4066 \e[32m+
\e[m
\e[32m default :
\e[m
\e[41m
\e[m
4067 \e[32m+
\e[m
\e[32m break;
\e[m
4068 \e[32m+
\e[m
\e[32m }
\e[m
4069 \e[32m+
\e[m
\e[41m
\e[m
4070 \e[32m+
\e[m
\e[32m this.previewEl.appendChild(this.canvasEl);
\e[m
4071 \e[32m+
\e[m
\e[41m
\e[m
4072 \e[32m+
\e[m
\e[32m this.setCanvasPosition();
\e[m
4073 \e[32m+
\e[m
\e[32m },
\e[m
4074 \e[32m+
\e[m
\e[41m
\e[m
4075 \e[32m+
\e[m
\e[32m crop : function()
\e[m
4076 \e[32m+
\e[m
\e[32m {
\e[m
4077 \e[32m+
\e[m
\e[32m if(!this.canvasLoaded){
\e[m
4078 \e[32m+
\e[m
\e[32m return;
\e[m
4079 \e[32m+
\e[m
\e[32m }
\e[m
4080 \e[32m+
\e[m
\e[41m
\e[m
4081 \e[32m+
\e[m
\e[32m var imageCanvas = document.createElement("canvas");
\e[m
4082 \e[32m+
\e[m
\e[41m
\e[m
4083 \e[32m+
\e[m
\e[32m var imageContext = imageCanvas.getContext("2d");
\e[m
4084 \e[32m+
\e[m
\e[41m
\e[m
4085 \e[32m+
\e[m
\e[32m imageCanvas.width = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? this.imageEl.OriginWidth : this.imageEl.OriginHeight;
\e[m
4086 \e[32m+
\e[m
\e[32m imageCanvas.height = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? this.imageEl.OriginWidth : this.imageEl.OriginHeight;
\e[m
4087 \e[32m+
\e[m
\e[41m
\e[m
4088 \e[32m+
\e[m
\e[32m var center = imageCanvas.width / 2;
\e[m
4089 \e[32m+
\e[m
\e[41m
\e[m
4090 \e[32m+
\e[m
\e[32m imageContext.translate(center, center);
\e[m
4091 \e[32m+
\e[m
\e[41m
\e[m
4092 \e[32m+
\e[m
\e[32m imageContext.rotate(this.rotate * Math.PI / 180);
\e[m
4093 \e[32m+
\e[m
\e[41m
\e[m
4094 \e[32m+
\e[m
\e[32m imageContext.drawImage(this.imageEl, 0, 0, this.imageEl.OriginWidth, this.imageEl.OriginHeight, center * -1, center * -1, this.imageEl.OriginWidth, this.imageEl.OriginHeight);
\e[m
4095 \e[32m+
\e[m
\e[41m
\e[m
4096 \e[32m+
\e[m
\e[32m var canvas = document.createElement("canvas");
\e[m
4097 \e[32m+
\e[m
\e[41m
\e[m
4098 \e[32m+
\e[m
\e[32m var context = canvas.getContext("2d");
\e[m
4099 \e[32m+
\e[m
\e[41m
\e[m
4100 \e[32m+
\e[m
\e[32m canvas.width = this.minWidth;
\e[m
4101 \e[32m+
\e[m
\e[32m canvas.height = this.minHeight;
\e[m
4103 \e[32m+
\e[m
\e[32m switch (this.rotate) {
\e[m
4104 \e[32m+
\e[m
\e[32m case 0 :
\e[m
4105 \e[32m+
\e[m
\e[41m
\e[m
4106 \e[32m+
\e[m
\e[32m var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getWidth() / this.getScaleLevel());
\e[m
4107 \e[32m+
\e[m
\e[32m var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getHeight() / this.getScaleLevel());
\e[m
4108 \e[32m+
\e[m
\e[41m
\e[m
4109 \e[32m+
\e[m
\e[32m var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());
\e[m
4110 \e[32m+
\e[m
\e[32m var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
\e[m
4111 \e[32m+
\e[m
\e[41m
\e[m
4112 \e[32m+
\e[m
\e[32m var targetWidth = this.minWidth - 2 * x;
\e[m
4113 \e[32m+
\e[m
\e[32m var targetHeight = this.minHeight - 2 * y;
\e[m
4114 \e[32m+
\e[m
\e[41m
\e[m
4115 \e[32m+
\e[m
\e[32m var scale = 1;
\e[m
4116 \e[32m+
\e[m
\e[41m
\e[m
4117 \e[32m+
\e[m
\e[32m if((x == 0 && y == 0) || (x == 0 && y > 0)){
\e[m
4118 \e[32m+
\e[m
\e[32m scale = targetWidth / width;
\e[m
4119 \e[32m+
\e[m
\e[32m }
\e[m
4120 \e[32m+
\e[m
\e[41m
\e[m
4121 \e[32m+
\e[m
\e[32m if(x > 0 && y == 0){
\e[m
4122 \e[32m+
\e[m
\e[32m scale = targetHeight / height;
\e[m
4123 \e[32m+
\e[m
\e[32m }
\e[m
4124 \e[32m+
\e[m
\e[41m
\e[m
4125 \e[32m+
\e[m
\e[32m if(x > 0 && y > 0){
\e[m
4126 \e[32m+
\e[m
\e[32m scale = targetWidth / width;
\e[m
4127 \e[32m+
\e[m
\e[41m
\e[m
4128 \e[32m+
\e[m
\e[32m if(width < height){
\e[m
4129 \e[32m+
\e[m
\e[32m scale = targetHeight / height;
\e[m
4130 \e[32m+
\e[m
\e[32m }
\e[m
4131 \e[32m+
\e[m
\e[32m }
\e[m
4132 \e[32m+
\e[m
\e[41m
\e[m
4133 \e[32m+
\e[m
\e[32m context.scale(scale, scale);
\e[m
4134 \e[32m+
\e[m
\e[41m
\e[m
4135 \e[32m+
\e[m
\e[32m var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));
\e[m
4136 \e[32m+
\e[m
\e[32m var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));
\e[m
4138 \e[32m+
\e[m
\e[32m sx = sx < 0 ? 0 : (sx / this.getScaleLevel());
\e[m
4139 \e[32m+
\e[m
\e[32m sy = sy < 0 ? 0 : (sy / this.getScaleLevel());
\e[m
4141 \e[32m+
\e[m
\e[32m context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
\e[m
4142 \e[32m+
\e[m
\e[41m
\e[m
4143 \e[32m+
\e[m
\e[32m break;
\e[m
4144 \e[32m+
\e[m
\e[32m case 90 :
\e[m
\e[41m
\e[m
4145 \e[32m+
\e[m
\e[41m
\e[m
4146 \e[32m+
\e[m
\e[32m var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getWidth() / this.getScaleLevel());
\e[m
4147 \e[32m+
\e[m
\e[32m var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getHeight() / this.getScaleLevel());
\e[m
4148 \e[32m+
\e[m
\e[41m
\e[m
4149 \e[32m+
\e[m
\e[32m var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());
\e[m
4150 \e[32m+
\e[m
\e[32m var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
\e[m
4151 \e[32m+
\e[m
\e[41m
\e[m
4152 \e[32m+
\e[m
\e[32m var targetWidth = this.minWidth - 2 * x;
\e[m
4153 \e[32m+
\e[m
\e[32m var targetHeight = this.minHeight - 2 * y;
\e[m
4154 \e[32m+
\e[m
\e[41m
\e[m
4155 \e[32m+
\e[m
\e[32m var scale = 1;
\e[m
4156 \e[32m+
\e[m
\e[41m
\e[m
4157 \e[32m+
\e[m
\e[32m if((x == 0 && y == 0) || (x == 0 && y > 0)){
\e[m
4158 \e[32m+
\e[m
\e[32m scale = targetWidth / width;
\e[m
4159 \e[32m+
\e[m
\e[32m }
\e[m
4160 \e[32m+
\e[m
\e[41m
\e[m
4161 \e[32m+
\e[m
\e[32m if(x > 0 && y == 0){
\e[m
4162 \e[32m+
\e[m
\e[32m scale = targetHeight / height;
\e[m
4163 \e[32m+
\e[m
\e[32m }
\e[m
4164 \e[32m+
\e[m
\e[41m
\e[m
4165 \e[32m+
\e[m
\e[32m if(x > 0 && y > 0){
\e[m
4166 \e[32m+
\e[m
\e[32m scale = targetWidth / width;
\e[m
4167 \e[32m+
\e[m
\e[41m
\e[m
4168 \e[32m+
\e[m
\e[32m if(width < height){
\e[m
4169 \e[32m+
\e[m
\e[32m scale = targetHeight / height;
\e[m
4170 \e[32m+
\e[m
\e[32m }
\e[m
4171 \e[32m+
\e[m
\e[32m }
\e[m
4172 \e[32m+
\e[m
\e[41m
\e[m
4173 \e[32m+
\e[m
\e[32m context.scale(scale, scale);
\e[m
4174 \e[32m+
\e[m
\e[41m
\e[m
4175 \e[32m+
\e[m
\e[32m var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));
\e[m
4176 \e[32m+
\e[m
\e[32m var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));
\e[m
4178 \e[32m+
\e[m
\e[32m sx = sx < 0 ? 0 : (sx / this.getScaleLevel());
\e[m
4179 \e[32m+
\e[m
\e[32m sy = sy < 0 ? 0 : (sy / this.getScaleLevel());
\e[m
4180 \e[32m+
\e[m
\e[41m
\e[m
4181 \e[32m+
\e[m
\e[32m sx += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight) : 0;
\e[m
4182 \e[32m+
\e[m
\e[41m
\e[m
4183 \e[32m+
\e[m
\e[32m context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
\e[m
4184 \e[32m+
\e[m
\e[41m
\e[m
4185 \e[32m+
\e[m
\e[32m break;
\e[m
4186 \e[32m+
\e[m
\e[32m case 180 :
\e[m
4187 \e[32m+
\e[m
\e[41m
\e[m
4188 \e[32m+
\e[m
\e[32m var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getWidth() / this.getScaleLevel());
\e[m
4189 \e[32m+
\e[m
\e[32m var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getHeight() / this.getScaleLevel());
\e[m
4190 \e[32m+
\e[m
\e[41m
\e[m
4191 \e[32m+
\e[m
\e[32m var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());
\e[m
4192 \e[32m+
\e[m
\e[32m var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
\e[m
4193 \e[32m+
\e[m
\e[41m
\e[m
4194 \e[32m+
\e[m
\e[32m var targetWidth = this.minWidth - 2 * x;
\e[m
4195 \e[32m+
\e[m
\e[32m var targetHeight = this.minHeight - 2 * y;
\e[m
4196 \e[32m+
\e[m
\e[41m
\e[m
4197 \e[32m+
\e[m
\e[32m var scale = 1;
\e[m
4198 \e[32m+
\e[m
\e[41m
\e[m
4199 \e[32m+
\e[m
\e[32m if((x == 0 && y == 0) || (x == 0 && y > 0)){
\e[m
4200 \e[32m+
\e[m
\e[32m scale = targetWidth / width;
\e[m
4201 \e[32m+
\e[m
\e[32m }
\e[m
4202 \e[32m+
\e[m
\e[41m
\e[m
4203 \e[32m+
\e[m
\e[32m if(x > 0 && y == 0){
\e[m
4204 \e[32m+
\e[m
\e[32m scale = targetHeight / height;
\e[m
4205 \e[32m+
\e[m
\e[32m }
\e[m
4206 \e[32m+
\e[m
\e[41m
\e[m
4207 \e[32m+
\e[m
\e[32m if(x > 0 && y > 0){
\e[m
4208 \e[32m+
\e[m
\e[32m scale = targetWidth / width;
\e[m
4209 \e[32m+
\e[m
\e[41m
\e[m
4210 \e[32m+
\e[m
\e[32m if(width < height){
\e[m
4211 \e[32m+
\e[m
\e[32m scale = targetHeight / height;
\e[m
4212 \e[32m+
\e[m
\e[32m }
\e[m
4213 \e[32m+
\e[m
\e[32m }
\e[m
4214 \e[32m+
\e[m
\e[41m
\e[m
4215 \e[32m+
\e[m
\e[32m context.scale(scale, scale);
\e[m
4216 \e[32m+
\e[m
\e[41m
\e[m
4217 \e[32m+
\e[m
\e[32m var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));
\e[m
4218 \e[32m+
\e[m
\e[32m var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));
\e[m
4220 \e[32m+
\e[m
\e[32m sx = sx < 0 ? 0 : (sx / this.getScaleLevel());
\e[m
4221 \e[32m+
\e[m
\e[32m sy = sy < 0 ? 0 : (sy / this.getScaleLevel());
\e[m
4223 \e[32m+
\e[m
\e[32m sx += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? 0 : Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight);
\e[m
4224 \e[32m+
\e[m
\e[32m sy += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight) : 0;
\e[m
4225 \e[32m+
\e[m
\e[41m
\e[m
4226 \e[32m+
\e[m
\e[32m context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
\e[m
4227 \e[32m+
\e[m
\e[41m
\e[m
4228 \e[32m+
\e[m
\e[32m break;
\e[m
4229 \e[32m+
\e[m
\e[32m case 270 :
\e[m
4230 \e[32m+
\e[m
\e[41m
\e[m
4231 \e[32m+
\e[m
\e[32m var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getWidth() / this.getScaleLevel());
\e[m
4232 \e[32m+
\e[m
\e[32m var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getHeight() / this.getScaleLevel());
\e[m
4233 \e[32m+
\e[m
\e[41m
\e[m
4234 \e[32m+
\e[m
\e[32m var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());
\e[m
4235 \e[32m+
\e[m
\e[32m var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
\e[m
4236 \e[32m+
\e[m
\e[41m
\e[m
4237 \e[32m+
\e[m
\e[32m var targetWidth = this.minWidth - 2 * x;
\e[m
4238 \e[32m+
\e[m
\e[32m var targetHeight = this.minHeight - 2 * y;
\e[m
4239 \e[32m+
\e[m
\e[41m
\e[m
4240 \e[32m+
\e[m
\e[32m var scale = 1;
\e[m
4241 \e[32m+
\e[m
\e[41m
\e[m
4242 \e[32m+
\e[m
\e[32m if((x == 0 && y == 0) || (x == 0 && y > 0)){
\e[m
4243 \e[32m+
\e[m
\e[32m scale = targetWidth / width;
\e[m
4244 \e[32m+
\e[m
\e[32m }
\e[m
4245 \e[32m+
\e[m
\e[41m
\e[m
4246 \e[32m+
\e[m
\e[32m if(x > 0 && y == 0){
\e[m
4247 \e[32m+
\e[m
\e[32m scale = targetHeight / height;
\e[m
4248 \e[32m+
\e[m
\e[32m }
\e[m
4249 \e[32m+
\e[m
\e[41m
\e[m
4250 \e[32m+
\e[m
\e[32m if(x > 0 && y > 0){
\e[m
4251 \e[32m+
\e[m
\e[32m scale = targetWidth / width;
\e[m
4252 \e[32m+
\e[m
\e[41m
\e[m
4253 \e[32m+
\e[m
\e[32m if(width < height){
\e[m
4254 \e[32m+
\e[m
\e[32m scale = targetHeight / height;
\e[m
4255 \e[32m+
\e[m
\e[32m }
\e[m
4256 \e[32m+
\e[m
\e[32m }
\e[m
4257 \e[32m+
\e[m
\e[41m
\e[m
4258 \e[32m+
\e[m
\e[32m context.scale(scale, scale);
\e[m
4259 \e[32m+
\e[m
\e[41m
\e[m
4260 \e[32m+
\e[m
\e[32m var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));
\e[m
4261 \e[32m+
\e[m
\e[32m var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));
\e[m
4263 \e[32m+
\e[m
\e[32m sx = sx < 0 ? 0 : (sx / this.getScaleLevel());
\e[m
4264 \e[32m+
\e[m
\e[32m sy = sy < 0 ? 0 : (sy / this.getScaleLevel());
\e[m
4265 \e[32m+
\e[m
\e[41m
\e[m
4266 \e[32m+
\e[m
\e[32m sy += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? 0 : Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight);
\e[m
4267 \e[32m+
\e[m
\e[41m
\e[m
4268 \e[32m+
\e[m
\e[32m context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
\e[m
4269 \e[32m+
\e[m
\e[41m
\e[m
4270 \e[32m+
\e[m
\e[32m break;
\e[m
4271 \e[32m+
\e[m
\e[32m default :
\e[m
\e[41m
\e[m
4272 \e[32m+
\e[m
\e[32m break;
\e[m
4273 \e[32m+
\e[m
\e[32m }
\e[m
4274 \e[32m+
\e[m
\e[41m
\e[m
4275 \e[32m+
\e[m
\e[32m this.cropData = canvas.toDataURL(this.cropType);
\e[m
4276 \e[32m+
\e[m
\e[41m
\e[m
4277 \e[32m+
\e[m
\e[32m if(this.fireEvent('crop', this, this.cropData) !== false){
\e[m
4278 \e[32m+
\e[m
\e[32m this.process(this.file, this.cropData);
\e[m
4279 \e[32m+
\e[m
\e[32m }
\e[m
4280 \e[32m+
\e[m
\e[41m
\e[m
4281 \e[32m+
\e[m
\e[32m return;
\e[m
4282 \e[32m+
\e[m
\e[41m
\e[m
4283 \e[32m+
\e[m
\e[32m },
\e[m
4284 \e[32m+
\e[m
\e[41m
\e[m
4285 \e[32m+
\e[m
\e[32m setThumbBoxSize : function()
\e[m
4286 \e[32m+
\e[m
\e[32m {
\e[m
4287 \e[32m+
\e[m
\e[32m var width, height;
\e[m
4288 \e[32m+
\e[m
\e[41m
\e[m
4289 \e[32m+
\e[m
\e[32m if(this.isDocument && typeof(this.imageEl) != 'undefined'){
\e[m
4290 \e[32m+
\e[m
\e[32m width = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.max(this.minWidth, this.minHeight) : Math.min(this.minWidth, this.minHeight);
\e[m
4291 \e[32m+
\e[m
\e[32m height = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.min(this.minWidth, this.minHeight) : Math.max(this.minWidth, this.minHeight);
\e[m
4292 \e[32m+
\e[m
\e[41m
\e[m
4293 \e[32m+
\e[m
\e[32m this.minWidth = width;
\e[m
4294 \e[32m+
\e[m
\e[32m this.minHeight = height;
\e[m
4295 \e[32m+
\e[m
\e[41m
\e[m
4296 \e[32m+
\e[m
\e[32m if(this.rotate == 90 || this.rotate == 270){
\e[m
4297 \e[32m+
\e[m
\e[32m this.minWidth = height;
\e[m
4298 \e[32m+
\e[m
\e[32m this.minHeight = width;
\e[m
4299 \e[32m+
\e[m
\e[32m }
\e[m
4300 \e[32m+
\e[m
\e[32m }
\e[m
4301 \e[32m+
\e[m
\e[41m
\e[m
4302 \e[32m+
\e[m
\e[32m height = 300;
\e[m
4303 \e[32m+
\e[m
\e[32m width = Math.ceil(this.minWidth * height / this.minHeight);
\e[m
4304 \e[32m+
\e[m
\e[41m
\e[m
4305 \e[32m+
\e[m
\e[32m if(this.minWidth > this.minHeight){
\e[m
4306 \e[32m+
\e[m
\e[32m width = 300;
\e[m
4307 \e[32m+
\e[m
\e[32m height = Math.ceil(this.minHeight * width / this.minWidth);
\e[m
4308 \e[32m+
\e[m
\e[32m }
\e[m
4309 \e[32m+
\e[m
\e[41m
\e[m
4310 \e[32m+
\e[m
\e[32m this.thumbEl.setStyle({
\e[m
4311 \e[32m+
\e[m
\e[32m width : width + 'px',
\e[m
4312 \e[32m+
\e[m
\e[32m height : height + 'px'
\e[m
4313 \e[32m+
\e[m
\e[32m });
\e[m
4315 \e[32m+
\e[m
\e[32m return;
\e[m
4316 \e[32m+
\e[m
\e[41m
\e[m
4317 \e[32m+
\e[m
\e[32m },
\e[m
4318 \e[32m+
\e[m
\e[41m
\e[m
4319 \e[32m+
\e[m
\e[32m setThumbBoxPosition : function()
\e[m
4320 \e[32m+
\e[m
\e[32m {
\e[m
4321 \e[32m+
\e[m
\e[32m var x = Math.ceil((this.bodyEl.getWidth() - this.thumbEl.getWidth()) / 2 );
\e[m
4322 \e[32m+
\e[m
\e[32m var y = Math.ceil((this.bodyEl.getHeight() - this.thumbEl.getHeight()) / 2);
\e[m
4323 \e[32m+
\e[m
\e[41m
\e[m
4324 \e[32m+
\e[m
\e[32m this.thumbEl.setLeft(x);
\e[m
4325 \e[32m+
\e[m
\e[32m this.thumbEl.setTop(y);
\e[m
4326 \e[32m+
\e[m
\e[41m
\e[m
4327 \e[32m+
\e[m
\e[32m },
\e[m
4328 \e[32m+
\e[m
\e[41m
\e[m
4329 \e[32m+
\e[m
\e[32m baseRotateLevel : function()
\e[m
4330 \e[32m+
\e[m
\e[32m {
\e[m
4331 \e[32m+
\e[m
\e[32m this.baseRotate = 1;
\e[m
4332 \e[32m+
\e[m
\e[41m
\e[m
4333 \e[32m+
\e[m
\e[32m if(
\e[m
4334 \e[32m+
\e[m
\e[32m typeof(this.exif) != 'undefined' &&
\e[m
4335 \e[32m+
\e[m
\e[32m typeof(this.exif[Roo.dialog.UploadCropbox['tags']['Orientation']]) != 'undefined' &&
\e[m
4336 \e[32m+
\e[m
\e[32m [1, 3, 6, 8].indexOf(this.exif[Roo.dialog.UploadCropbox['tags']['Orientation']]) != -1
\e[m
4337 \e[32m+
\e[m
\e[32m ){
\e[m
4338 \e[32m+
\e[m
\e[32m this.baseRotate = this.exif[Roo.dialog.UploadCropbox['tags']['Orientation']];
\e[m
4339 \e[32m+
\e[m
\e[32m }
\e[m
4340 \e[32m+
\e[m
\e[41m
\e[m
4341 \e[32m+
\e[m
\e[32m this.rotate = Roo.dialog.UploadCropbox['Orientation'][this.baseRotate];
\e[m
4342 \e[32m+
\e[m
\e[41m
\e[m
4343 \e[32m+
\e[m
\e[32m },
\e[m
4344 \e[32m+
\e[m
\e[41m
\e[m
4345 \e[32m+
\e[m
\e[32m baseScaleLevel : function()
\e[m
4346 \e[32m+
\e[m
\e[32m {
\e[m
4347 \e[32m+
\e[m
\e[32m var width, height;
\e[m
4348 \e[32m+
\e[m
\e[41m
\e[m
4349 \e[32m+
\e[m
\e[32m if(this.isDocument){
\e[m
4350 \e[32m+
\e[m
\e[41m
\e[m
4351 \e[32m+
\e[m
\e[32m if(this.baseRotate == 6 || this.baseRotate == 8){
\e[m
4352 \e[32m+
\e[m
\e[41m
\e[m
4353 \e[32m+
\e[m
\e[32m height = this.thumbEl.getHeight();
\e[m
4354 \e[32m+
\e[m
\e[32m this.baseScale = height / this.imageEl.OriginWidth;
\e[m
4356 \e[32m+
\e[m
\e[32m if(this.imageEl.OriginHeight * this.baseScale > this.thumbEl.getWidth()){
\e[m
4357 \e[32m+
\e[m
\e[32m width = this.thumbEl.getWidth();
\e[m
4358 \e[32m+
\e[m
\e[32m this.baseScale = width / this.imageEl.OriginHeight;
\e[m
4359 \e[32m+
\e[m
\e[32m }
\e[m
4361 \e[32m+
\e[m
\e[32m return;
\e[m
4362 \e[32m+
\e[m
\e[32m }
\e[m
4364 \e[32m+
\e[m
\e[32m height = this.thumbEl.getHeight();
\e[m
4365 \e[32m+
\e[m
\e[32m this.baseScale = height / this.imageEl.OriginHeight;
\e[m
4367 \e[32m+
\e[m
\e[32m if(this.imageEl.OriginWidth * this.baseScale > this.thumbEl.getWidth()){
\e[m
4368 \e[32m+
\e[m
\e[32m width = this.thumbEl.getWidth();
\e[m
4369 \e[32m+
\e[m
\e[32m this.baseScale = width / this.imageEl.OriginWidth;
\e[m
4370 \e[32m+
\e[m
\e[32m }
\e[m
4372 \e[32m+
\e[m
\e[32m return;
\e[m
4373 \e[32m+
\e[m
\e[32m }
\e[m
4374 \e[32m+
\e[m
\e[41m
\e[m
4375 \e[32m+
\e[m
\e[32m if(this.baseRotate == 6 || this.baseRotate == 8){
\e[m
4376 \e[32m+
\e[m
\e[41m
\e[m
4377 \e[32m+
\e[m
\e[32m width = this.thumbEl.getHeight();
\e[m
4378 \e[32m+
\e[m
\e[32m this.baseScale = width / this.imageEl.OriginHeight;
\e[m
4379 \e[32m+
\e[m
\e[41m
\e[m
4380 \e[32m+
\e[m
\e[32m if(this.imageEl.OriginHeight * this.baseScale < this.thumbEl.getWidth()){
\e[m
4381 \e[32m+
\e[m
\e[32m height = this.thumbEl.getWidth();
\e[m
4382 \e[32m+
\e[m
\e[32m this.baseScale = height / this.imageEl.OriginHeight;
\e[m
4383 \e[32m+
\e[m
\e[32m }
\e[m
4384 \e[32m+
\e[m
\e[41m
\e[m
4385 \e[32m+
\e[m
\e[32m if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
\e[m
4386 \e[32m+
\e[m
\e[32m height = this.thumbEl.getWidth();
\e[m
4387 \e[32m+
\e[m
\e[32m this.baseScale = height / this.imageEl.OriginHeight;
\e[m
4388 \e[32m+
\e[m
\e[41m
\e[m
4389 \e[32m+
\e[m
\e[32m if(this.imageEl.OriginWidth * this.baseScale < this.thumbEl.getHeight()){
\e[m
4390 \e[32m+
\e[m
\e[32m width = this.thumbEl.getHeight();
\e[m
4391 \e[32m+
\e[m
\e[32m this.baseScale = width / this.imageEl.OriginWidth;
\e[m
4392 \e[32m+
\e[m
\e[32m }
\e[m
4393 \e[32m+
\e[m
\e[32m }
\e[m
4394 \e[32m+
\e[m
\e[41m
\e[m
4395 \e[32m+
\e[m
\e[32m return;
\e[m
4396 \e[32m+
\e[m
\e[32m }
\e[m
4397 \e[32m+
\e[m
\e[41m
\e[m
4398 \e[32m+
\e[m
\e[32m width = this.thumbEl.getWidth();
\e[m
4399 \e[32m+
\e[m
\e[32m this.baseScale = width / this.imageEl.OriginWidth;
\e[m
4400 \e[32m+
\e[m
\e[41m
\e[m
4401 \e[32m+
\e[m
\e[32m if(this.imageEl.OriginHeight * this.baseScale < this.thumbEl.getHeight()){
\e[m
4402 \e[32m+
\e[m
\e[32m height = this.thumbEl.getHeight();
\e[m
4403 \e[32m+
\e[m
\e[32m this.baseScale = height / this.imageEl.OriginHeight;
\e[m
4404 \e[32m+
\e[m
\e[32m }
\e[m
4405 \e[32m+
\e[m
\e[41m
\e[m
4406 \e[32m+
\e[m
\e[32m if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
\e[m
4407 \e[32m+
\e[m
\e[41m
\e[m
4408 \e[32m+
\e[m
\e[32m height = this.thumbEl.getHeight();
\e[m
4409 \e[32m+
\e[m
\e[32m this.baseScale = height / this.imageEl.OriginHeight;
\e[m
4410 \e[32m+
\e[m
\e[41m
\e[m
4411 \e[32m+
\e[m
\e[32m if(this.imageEl.OriginWidth * this.baseScale < this.thumbEl.getWidth()){
\e[m
4412 \e[32m+
\e[m
\e[32m width = this.thumbEl.getWidth();
\e[m
4413 \e[32m+
\e[m
\e[32m this.baseScale = width / this.imageEl.OriginWidth;
\e[m
4414 \e[32m+
\e[m
\e[32m }
\e[m
4415 \e[32m+
\e[m
\e[41m
\e[m
4416 \e[32m+
\e[m
\e[32m }
\e[m
4417 \e[32m+
\e[m
\e[41m
\e[m
4418 \e[32m+
\e[m
\e[32m return;
\e[m
4419 \e[32m+
\e[m
\e[32m },
\e[m
4420 \e[32m+
\e[m
\e[41m
\e[m
4421 \e[32m+
\e[m
\e[32m getScaleLevel : function()
\e[m
4422 \e[32m+
\e[m
\e[32m {
\e[m
4423 \e[32m+
\e[m
\e[32m return this.baseScale * Math.pow(1.1, this.scale);
\e[m
4424 \e[32m+
\e[m
\e[32m },
\e[m
4425 \e[32m+
\e[m
\e[41m
\e[m
4426 \e[32m+
\e[m
\e[32m onTouchStart : function(e)
\e[m
4427 \e[32m+
\e[m
\e[32m {
\e[m
4428 \e[32m+
\e[m
\e[32m if(!this.canvasLoaded){
\e[m
4429 \e[32m+
\e[m
\e[32m this.beforeSelectFile(e);
\e[m
4430 \e[32m+
\e[m
\e[32m return;
\e[m
4431 \e[32m+
\e[m
\e[32m }
\e[m
4432 \e[32m+
\e[m
\e[41m
\e[m
4433 \e[32m+
\e[m
\e[32m var touches = e.browserEvent.touches;
\e[m
4434 \e[32m+
\e[m
\e[41m
\e[m
4435 \e[32m+
\e[m
\e[32m if(!touches){
\e[m
4436 \e[32m+
\e[m
\e[32m return;
\e[m
4437 \e[32m+
\e[m
\e[32m }
\e[m
4438 \e[32m+
\e[m
\e[41m
\e[m
4439 \e[32m+
\e[m
\e[32m if(touches.length == 1){
\e[m
4440 \e[32m+
\e[m
\e[32m this.onMouseDown(e);
\e[m
4441 \e[32m+
\e[m
\e[32m return;
\e[m
4442 \e[32m+
\e[m
\e[32m }
\e[m
4443 \e[32m+
\e[m
\e[41m
\e[m
4444 \e[32m+
\e[m
\e[32m if(touches.length != 2){
\e[m
4445 \e[32m+
\e[m
\e[32m return;
\e[m
4446 \e[32m+
\e[m
\e[32m }
\e[m
4447 \e[32m+
\e[m
\e[41m
\e[m
4448 \e[32m+
\e[m
\e[32m var coords = [];
\e[m
4449 \e[32m+
\e[m
\e[41m
\e[m
4450 \e[32m+
\e[m
\e[32m for(var i = 0, finger; finger = touches[i]; i++){
\e[m
4451 \e[32m+
\e[m
\e[32m coords.push(finger.pageX, finger.pageY);
\e[m
4452 \e[32m+
\e[m
\e[32m }
\e[m
4453 \e[32m+
\e[m
\e[41m
\e[m
4454 \e[32m+
\e[m
\e[32m var x = Math.pow(coords[0] - coords[2], 2);
\e[m
4455 \e[32m+
\e[m
\e[32m var y = Math.pow(coords[1] - coords[3], 2);
\e[m
4456 \e[32m+
\e[m
\e[41m
\e[m
4457 \e[32m+
\e[m
\e[32m this.startDistance = Math.sqrt(x + y);
\e[m
4458 \e[32m+
\e[m
\e[41m
\e[m
4459 \e[32m+
\e[m
\e[32m this.startScale = this.scale;
\e[m
4460 \e[32m+
\e[m
\e[41m
\e[m
4461 \e[32m+
\e[m
\e[32m this.pinching = true;
\e[m
4462 \e[32m+
\e[m
\e[32m this.dragable = false;
\e[m
4463 \e[32m+
\e[m
\e[41m
\e[m
4464 \e[32m+
\e[m
\e[32m },
\e[m
4465 \e[32m+
\e[m
\e[41m
\e[m
4466 \e[32m+
\e[m
\e[32m onTouchMove : function(e)
\e[m
4467 \e[32m+
\e[m
\e[32m {
\e[m
4468 \e[32m+
\e[m
\e[32m if(!this.pinching && !this.dragable){
\e[m
4469 \e[32m+
\e[m
\e[32m return;
\e[m
4470 \e[32m+
\e[m
\e[32m }
\e[m
4471 \e[32m+
\e[m
\e[41m
\e[m
4472 \e[32m+
\e[m
\e[32m var touches = e.browserEvent.touches;
\e[m
4473 \e[32m+
\e[m
\e[41m
\e[m
4474 \e[32m+
\e[m
\e[32m if(!touches){
\e[m
4475 \e[32m+
\e[m
\e[32m return;
\e[m
4476 \e[32m+
\e[m
\e[32m }
\e[m
4477 \e[32m+
\e[m
\e[41m
\e[m
4478 \e[32m+
\e[m
\e[32m if(this.dragable){
\e[m
4479 \e[32m+
\e[m
\e[32m this.onMouseMove(e);
\e[m
4480 \e[32m+
\e[m
\e[32m return;
\e[m
4481 \e[32m+
\e[m
\e[32m }
\e[m
4482 \e[32m+
\e[m
\e[41m
\e[m
4483 \e[32m+
\e[m
\e[32m var coords = [];
\e[m
4484 \e[32m+
\e[m
\e[41m
\e[m
4485 \e[32m+
\e[m
\e[32m for(var i = 0, finger; finger = touches[i]; i++){
\e[m
4486 \e[32m+
\e[m
\e[32m coords.push(finger.pageX, finger.pageY);
\e[m
4487 \e[32m+
\e[m
\e[32m }
\e[m
4488 \e[32m+
\e[m
\e[41m
\e[m
4489 \e[32m+
\e[m
\e[32m var x = Math.pow(coords[0] - coords[2], 2);
\e[m
4490 \e[32m+
\e[m
\e[32m var y = Math.pow(coords[1] - coords[3], 2);
\e[m
4491 \e[32m+
\e[m
\e[41m
\e[m
4492 \e[32m+
\e[m
\e[32m this.endDistance = Math.sqrt(x + y);
\e[m
4493 \e[32m+
\e[m
\e[41m
\e[m
4494 \e[32m+
\e[m
\e[32m this.scale = this.startScale + Math.floor(Math.log(this.endDistance / this.startDistance) / Math.log(1.1));
\e[m
4495 \e[32m+
\e[m
\e[41m
\e[m
4496 \e[32m+
\e[m
\e[32m if(!this.zoomable()){
\e[m
4497 \e[32m+
\e[m
\e[32m this.scale = this.startScale;
\e[m
4498 \e[32m+
\e[m
\e[32m return;
\e[m
4499 \e[32m+
\e[m
\e[32m }
\e[m
4500 \e[32m+
\e[m
\e[41m
\e[m
4501 \e[32m+
\e[m
\e[32m this.draw();
\e[m
4502 \e[32m+
\e[m
\e[41m
\e[m
4503 \e[32m+
\e[m
\e[32m },
\e[m
4504 \e[32m+
\e[m
\e[41m
\e[m
4505 \e[32m+
\e[m
\e[32m onTouchEnd : function(e)
\e[m
4506 \e[32m+
\e[m
\e[32m {
\e[m
4507 \e[32m+
\e[m
\e[32m this.pinching = false;
\e[m
4508 \e[32m+
\e[m
\e[32m this.dragable = false;
\e[m
4509 \e[32m+
\e[m
\e[41m
\e[m
4510 \e[32m+
\e[m
\e[32m },
\e[m
4511 \e[32m+
\e[m
\e[41m
\e[m
4512 \e[32m+
\e[m
\e[32m process : function(file, crop)
\e[m
4513 \e[32m+
\e[m
\e[32m {
\e[m
4514 \e[32m+
\e[m
\e[32m if(this.loadMask){
\e[m
4515 \e[32m+
\e[m
\e[32m this.maskEl.mask(this.loadingText);
\e[m
4516 \e[32m+
\e[m
\e[32m }
\e[m
4517 \e[32m+
\e[m
\e[41m
\e[m
4518 \e[32m+
\e[m
\e[32m this.xhr = new XMLHttpRequest();
\e[m
4519 \e[32m+
\e[m
\e[41m
\e[m
4520 \e[32m+
\e[m
\e[32m file.xhr = this.xhr;
\e[m
4522 \e[32m+
\e[m
\e[32m this.xhr.open(this.method, this.url, true);
\e[m
4523 \e[32m+
\e[m
\e[41m
\e[m
4524 \e[32m+
\e[m
\e[32m var headers = {
\e[m
4525 \e[32m+
\e[m
\e[32m "Accept": "application/json",
\e[m
4526 \e[32m+
\e[m
\e[32m "Cache-Control": "no-cache",
\e[m
4527 \e[32m+
\e[m
\e[32m "X-Requested-With": "XMLHttpRequest"
\e[m
4528 \e[32m+
\e[m
\e[32m };
\e[m
4529 \e[32m+
\e[m
\e[41m
\e[m
4530 \e[32m+
\e[m
\e[32m for (var headerName in headers) {
\e[m
4531 \e[32m+
\e[m
\e[32m var headerValue = headers[headerName];
\e[m
4532 \e[32m+
\e[m
\e[32m if (headerValue) {
\e[m
4533 \e[32m+
\e[m
\e[32m this.xhr.setRequestHeader(headerName, headerValue);
\e[m
4534 \e[32m+
\e[m
\e[32m }
\e[m
4535 \e[32m+
\e[m
\e[32m }
\e[m
4536 \e[32m+
\e[m
\e[41m
\e[m
4537 \e[32m+
\e[m
\e[32m var _this = this;
\e[m
4538 \e[32m+
\e[m
\e[41m
\e[m
4539 \e[32m+
\e[m
\e[32m this.xhr.onload = function()
\e[m
4540 \e[32m+
\e[m
\e[32m {
\e[m
4541 \e[32m+
\e[m
\e[32m _this.xhrOnLoad(_this.xhr);
\e[m
4542 \e[32m+
\e[m
\e[32m }
\e[m
4543 \e[32m+
\e[m
\e[41m
\e[m
4544 \e[32m+
\e[m
\e[32m this.xhr.onerror = function()
\e[m
4545 \e[32m+
\e[m
\e[32m {
\e[m
4546 \e[32m+
\e[m
\e[32m _this.xhrOnError(_this.xhr);
\e[m
4547 \e[32m+
\e[m
\e[32m }
\e[m
4548 \e[32m+
\e[m
\e[41m
\e[m
4549 \e[32m+
\e[m
\e[32m var formData = new FormData();
\e[m
4551 \e[32m+
\e[m
\e[32m formData.append('returnHTML', 'NO');
\e[m
4552 \e[32m+
\e[m
\e[41m
\e[m
4553 \e[32m+
\e[m
\e[32m if(crop){
\e[m
4554 \e[32m+
\e[m
\e[32m formData.append('crop', crop);
\e[m
4555 \e[32m+
\e[m
\e[32m }
\e[m
4556 \e[32m+
\e[m
\e[41m
\e[m
4557 \e[32m+
\e[m
\e[32m if(typeof(file) != 'undefined' && (typeof(file.id) == 'undefined' || file.id * 1 < 1)){
\e[m
4558 \e[32m+
\e[m
\e[32m formData.append(this.paramName, file, file.name);
\e[m
4559 \e[32m+
\e[m
\e[32m }
\e[m
4560 \e[32m+
\e[m
\e[41m
\e[m
4561 \e[32m+
\e[m
\e[32m if(typeof(file.filename) != 'undefined'){
\e[m
4562 \e[32m+
\e[m
\e[32m formData.append('filename', file.filename);
\e[m
4563 \e[32m+
\e[m
\e[32m }
\e[m
4564 \e[32m+
\e[m
\e[41m
\e[m
4565 \e[32m+
\e[m
\e[32m if(typeof(file.mimetype) != 'undefined'){
\e[m
4566 \e[32m+
\e[m
\e[32m formData.append('mimetype', file.mimetype);
\e[m
4567 \e[32m+
\e[m
\e[32m }
\e[m
4568 \e[32m+
\e[m
\e[41m
\e[m
4569 \e[32m+
\e[m
\e[32m if(this.fireEvent('arrange', this, formData) != false){
\e[m
4570 \e[32m+
\e[m
\e[32m this.xhr.send(formData);
\e[m
4571 \e[32m+
\e[m
\e[32m };
\e[m
4572 \e[32m+
\e[m
\e[32m },
\e[m
4573 \e[32m+
\e[m
\e[41m
\e[m
4574 \e[32m+
\e[m
\e[32m xhrOnLoad : function(xhr)
\e[m
4575 \e[32m+
\e[m
\e[32m {
\e[m
4576 \e[32m+
\e[m
\e[32m if(this.loadMask){
\e[m
4577 \e[32m+
\e[m
\e[32m this.maskEl.unmask();
\e[m
4578 \e[32m+
\e[m
\e[32m }
\e[m
4579 \e[32m+
\e[m
\e[41m
\e[m
4580 \e[32m+
\e[m
\e[32m if (xhr.readyState !== 4) {
\e[m
4581 \e[32m+
\e[m
\e[32m this.fireEvent('exception', this, xhr);
\e[m
4582 \e[32m+
\e[m
\e[32m return;
\e[m
4583 \e[32m+
\e[m
\e[32m }
\e[m
4585 \e[32m+
\e[m
\e[32m var response = Roo.decode(xhr.responseText);
\e[m
4586 \e[32m+
\e[m
\e[41m
\e[m
4587 \e[32m+
\e[m
\e[32m if(!response.success){
\e[m
4588 \e[32m+
\e[m
\e[32m this.fireEvent('exception', this, xhr);
\e[m
4589 \e[32m+
\e[m
\e[32m return;
\e[m
4590 \e[32m+
\e[m
\e[32m }
\e[m
4591 \e[32m+
\e[m
\e[41m
\e[m
4592 \e[32m+
\e[m
\e[32m var response = Roo.decode(xhr.responseText);
\e[m
4593 \e[32m+
\e[m
\e[41m
\e[m
4594 \e[32m+
\e[m
\e[32m this.fireEvent('upload', this, response);
\e[m
4595 \e[32m+
\e[m
\e[41m
\e[m
4596 \e[32m+
\e[m
\e[32m },
\e[m
4597 \e[32m+
\e[m
\e[41m
\e[m
4598 \e[32m+
\e[m
\e[32m xhrOnError : function()
\e[m
4599 \e[32m+
\e[m
\e[32m {
\e[m
4600 \e[32m+
\e[m
\e[32m if(this.loadMask){
\e[m
4601 \e[32m+
\e[m
\e[32m this.maskEl.unmask();
\e[m
4602 \e[32m+
\e[m
\e[32m }
\e[m
4603 \e[32m+
\e[m
\e[41m
\e[m
4604 \e[32m+
\e[m
\e[32m Roo.log('xhr on error');
\e[m
4605 \e[32m+
\e[m
\e[41m
\e[m
4606 \e[32m+
\e[m
\e[32m var response = Roo.decode(xhr.responseText);
\e[m
4607 \e[32m+
\e[m
\e[41m
\e[m
4608 \e[32m+
\e[m
\e[32m Roo.log(response);
\e[m
4609 \e[32m+
\e[m
\e[41m
\e[m
4610 \e[32m+
\e[m
\e[32m },
\e[m
4611 \e[32m+
\e[m
\e[41m
\e[m
4612 \e[32m+
\e[m
\e[32m prepare : function(file)
\e[m
4613 \e[32m+
\e[m
\e[32m {
\e[m
\e[41m
\e[m
4614 \e[32m+
\e[m
\e[32m if(this.loadMask){
\e[m
4615 \e[32m+
\e[m
\e[32m this.maskEl.mask(this.loadingText);
\e[m
4616 \e[32m+
\e[m
\e[32m }
\e[m
4617 \e[32m+
\e[m
\e[41m
\e[m
4618 \e[32m+
\e[m
\e[32m this.file = false;
\e[m
4619 \e[32m+
\e[m
\e[32m this.exif = {};
\e[m
4620 \e[32m+
\e[m
\e[41m
\e[m
4621 \e[32m+
\e[m
\e[32m if(typeof(file) === 'string'){
\e[m
4622 \e[32m+
\e[m
\e[32m this.loadCanvas(file);
\e[m
4623 \e[32m+
\e[m
\e[32m return;
\e[m
4624 \e[32m+
\e[m
\e[32m }
\e[m
4625 \e[32m+
\e[m
\e[41m
\e[m
4626 \e[32m+
\e[m
\e[32m if(!file || !this.urlAPI){
\e[m
4627 \e[32m+
\e[m
\e[32m return;
\e[m
4628 \e[32m+
\e[m
\e[32m }
\e[m
4629 \e[32m+
\e[m
\e[41m
\e[m
4630 \e[32m+
\e[m
\e[32m this.file = file;
\e[m
4631 \e[32m+
\e[m
\e[32m this.cropType = file.type;
\e[m
4632 \e[32m+
\e[m
\e[41m
\e[m
4633 \e[32m+
\e[m
\e[32m var _this = this;
\e[m
4634 \e[32m+
\e[m
\e[41m
\e[m
4635 \e[32m+
\e[m
\e[32m if(this.fireEvent('prepare', this, this.file) != false){
\e[m
4636 \e[32m+
\e[m
\e[41m
\e[m
4637 \e[32m+
\e[m
\e[32m var reader = new FileReader();
\e[m
4638 \e[32m+
\e[m
\e[41m
\e[m
4639 \e[32m+
\e[m
\e[32m reader.onload = function (e) {
\e[m
4640 \e[32m+
\e[m
\e[32m if (e.target.error) {
\e[m
4641 \e[32m+
\e[m
\e[32m Roo.log(e.target.error);
\e[m
4642 \e[32m+
\e[m
\e[32m return;
\e[m
4643 \e[32m+
\e[m
\e[32m }
\e[m
4644 \e[32m+
\e[m
\e[41m
\e[m
4645 \e[32m+
\e[m
\e[32m var buffer = e.target.result,
\e[m
4646 \e[32m+
\e[m
\e[32m dataView = new DataView(buffer),
\e[m
4647 \e[32m+
\e[m
\e[32m offset = 2,
\e[m
4648 \e[32m+
\e[m
\e[32m maxOffset = dataView.byteLength - 4,
\e[m
4649 \e[32m+
\e[m
\e[32m markerBytes,
\e[m
4650 \e[32m+
\e[m
\e[32m markerLength;
\e[m
4651 \e[32m+
\e[m
\e[41m
\e[m
4652 \e[32m+
\e[m
\e[32m if (dataView.getUint16(0) === 0xffd8) {
\e[m
4653 \e[32m+
\e[m
\e[32m while (offset < maxOffset) {
\e[m
4654 \e[32m+
\e[m
\e[32m markerBytes = dataView.getUint16(offset);
\e[m
4655 \e[32m+
\e[m
\e[41m
\e[m
4656 \e[32m+
\e[m
\e[32m if ((markerBytes >= 0xffe0 && markerBytes <= 0xffef) || markerBytes === 0xfffe) {
\e[m
4657 \e[32m+
\e[m
\e[32m markerLength = dataView.getUint16(offset + 2) + 2;
\e[m
4658 \e[32m+
\e[m
\e[32m if (offset + markerLength > dataView.byteLength) {
\e[m
4659 \e[32m+
\e[m
\e[32m Roo.log('Invalid meta data: Invalid segment size.');
\e[m
4660 \e[32m+
\e[m
\e[32m break;
\e[m
4661 \e[32m+
\e[m
\e[32m }
\e[m
4662 \e[32m+
\e[m
\e[41m
\e[m
4663 \e[32m+
\e[m
\e[32m if(markerBytes == 0xffe1){
\e[m
4664 \e[32m+
\e[m
\e[32m _this.parseExifData(
\e[m
4665 \e[32m+
\e[m
\e[32m dataView,
\e[m
4666 \e[32m+
\e[m
\e[32m offset,
\e[m
4667 \e[32m+
\e[m
\e[32m markerLength
\e[m
4668 \e[32m+
\e[m
\e[32m );
\e[m
4669 \e[32m+
\e[m
\e[32m }
\e[m
4670 \e[32m+
\e[m
\e[41m
\e[m
4671 \e[32m+
\e[m
\e[32m offset += markerLength;
\e[m
4672 \e[32m+
\e[m
\e[41m
\e[m
4673 \e[32m+
\e[m
\e[32m continue;
\e[m
4674 \e[32m+
\e[m
\e[32m }
\e[m
4675 \e[32m+
\e[m
\e[41m
\e[m
4676 \e[32m+
\e[m
\e[32m break;
\e[m
4677 \e[32m+
\e[m
\e[32m }
\e[m
4678 \e[32m+
\e[m
\e[41m
\e[m
4679 \e[32m+
\e[m
\e[32m }
\e[m
4680 \e[32m+
\e[m
\e[41m
\e[m
4681 \e[32m+
\e[m
\e[32m var url = _this.urlAPI.createObjectURL(_this.file);
\e[m
4682 \e[32m+
\e[m
\e[41m
\e[m
4683 \e[32m+
\e[m
\e[32m _this.loadCanvas(url);
\e[m
4684 \e[32m+
\e[m
\e[41m
\e[m
4685 \e[32m+
\e[m
\e[32m return;
\e[m
4686 \e[32m+
\e[m
\e[32m }
\e[m
4687 \e[32m+
\e[m
\e[41m
\e[m
4688 \e[32m+
\e[m
\e[32m reader.readAsArrayBuffer(this.file);
\e[m
4689 \e[32m+
\e[m
\e[41m
\e[m
4690 \e[32m+
\e[m
\e[32m }
\e[m
4691 \e[32m+
\e[m
\e[41m
\e[m
4692 \e[32m+
\e[m
\e[32m },
\e[m
4693 \e[32m+
\e[m
\e[41m
\e[m
4694 \e[32m+
\e[m
\e[32m parseExifData : function(dataView, offset, length)
\e[m
4695 \e[32m+
\e[m
\e[32m {
\e[m
4696 \e[32m+
\e[m
\e[32m var tiffOffset = offset + 10,
\e[m
4697 \e[32m+
\e[m
\e[32m littleEndian,
\e[m
4698 \e[32m+
\e[m
\e[32m dirOffset;
\e[m
4699 \e[32m+
\e[m
\e[41m
\e[m
4700 \e[32m+
\e[m
\e[32m if (dataView.getUint32(offset + 4) !== 0x45786966) {
\e[m
4701 \e[32m+
\e[m
\e[32m // No Exif data, might be XMP data instead
\e[m
4702 \e[32m+
\e[m
\e[32m return;
\e[m
4703 \e[32m+
\e[m
\e[32m }
\e[m
4704 \e[32m+
\e[m
\e[41m
\e[m
4705 \e[32m+
\e[m
\e[32m // Check for the ASCII code for "Exif" (0x45786966):
\e[m
4706 \e[32m+
\e[m
\e[32m if (dataView.getUint32(offset + 4) !== 0x45786966) {
\e[m
4707 \e[32m+
\e[m
\e[32m // No Exif data, might be XMP data instead
\e[m
4708 \e[32m+
\e[m
\e[32m return;
\e[m
4709 \e[32m+
\e[m
\e[32m }
\e[m
4710 \e[32m+
\e[m
\e[32m if (tiffOffset + 8 > dataView.byteLength) {
\e[m
4711 \e[32m+
\e[m
\e[32m Roo.log('Invalid Exif data: Invalid segment size.');
\e[m
4712 \e[32m+
\e[m
\e[32m return;
\e[m
4713 \e[32m+
\e[m
\e[32m }
\e[m
4714 \e[32m+
\e[m
\e[32m // Check for the two null bytes:
\e[m
4715 \e[32m+
\e[m
\e[32m if (dataView.getUint16(offset + 8) !== 0x0000) {
\e[m
4716 \e[32m+
\e[m
\e[32m Roo.log('Invalid Exif data: Missing byte alignment offset.');
\e[m
4717 \e[32m+
\e[m
\e[32m return;
\e[m
4718 \e[32m+
\e[m
\e[32m }
\e[m
4719 \e[32m+
\e[m
\e[32m // Check the byte alignment:
\e[m
4720 \e[32m+
\e[m
\e[32m switch (dataView.getUint16(tiffOffset)) {
\e[m
4721 \e[32m+
\e[m
\e[32m case 0x4949:
\e[m
4722 \e[32m+
\e[m
\e[32m littleEndian = true;
\e[m
4723 \e[32m+
\e[m
\e[32m break;
\e[m
4724 \e[32m+
\e[m
\e[32m case 0x4D4D:
\e[m
4725 \e[32m+
\e[m
\e[32m littleEndian = false;
\e[m
4726 \e[32m+
\e[m
\e[32m break;
\e[m
4727 \e[32m+
\e[m
\e[32m default:
\e[m
4728 \e[32m+
\e[m
\e[32m Roo.log('Invalid Exif data: Invalid byte alignment marker.');
\e[m
4729 \e[32m+
\e[m
\e[32m return;
\e[m
4730 \e[32m+
\e[m
\e[32m }
\e[m
4731 \e[32m+
\e[m
\e[32m // Check for the TIFF tag marker (0x002A):
\e[m
4732 \e[32m+
\e[m
\e[32m if (dataView.getUint16(tiffOffset + 2, littleEndian) !== 0x002A) {
\e[m
4733 \e[32m+
\e[m
\e[32m Roo.log('Invalid Exif data: Missing TIFF marker.');
\e[m
4734 \e[32m+
\e[m
\e[32m return;
\e[m
4735 \e[32m+
\e[m
\e[32m }
\e[m
4736 \e[32m+
\e[m
\e[32m // Retrieve the directory offset bytes, usually 0x00000008 or 8 decimal:
\e[m
4737 \e[32m+
\e[m
\e[32m dirOffset = dataView.getUint32(tiffOffset + 4, littleEndian);
\e[m
4738 \e[32m+
\e[m
\e[41m
\e[m
4739 \e[32m+
\e[m
\e[32m this.parseExifTags(
\e[m
4740 \e[32m+
\e[m
\e[32m dataView,
\e[m
4741 \e[32m+
\e[m
\e[32m tiffOffset,
\e[m
4742 \e[32m+
\e[m
\e[32m tiffOffset + dirOffset,
\e[m
4743 \e[32m+
\e[m
\e[32m littleEndian
\e[m
4744 \e[32m+
\e[m
\e[32m );
\e[m
4745 \e[32m+
\e[m
\e[32m },
\e[m
4746 \e[32m+
\e[m
\e[41m
\e[m
4747 \e[32m+
\e[m
\e[32m parseExifTags : function(dataView, tiffOffset, dirOffset, littleEndian)
\e[m
4748 \e[32m+
\e[m
\e[32m {
\e[m
4749 \e[32m+
\e[m
\e[32m var tagsNumber,
\e[m
4750 \e[32m+
\e[m
\e[32m dirEndOffset,
\e[m
4751 \e[32m+
\e[m
\e[32m i;
\e[m
4752 \e[32m+
\e[m
\e[32m if (dirOffset + 6 > dataView.byteLength) {
\e[m
4753 \e[32m+
\e[m
\e[32m Roo.log('Invalid Exif data: Invalid directory offset.');
\e[m
4754 \e[32m+
\e[m
\e[32m return;
\e[m
4755 \e[32m+
\e[m
\e[32m }
\e[m
4756 \e[32m+
\e[m
\e[32m tagsNumber = dataView.getUint16(dirOffset, littleEndian);
\e[m
4757 \e[32m+
\e[m
\e[32m dirEndOffset = dirOffset + 2 + 12 * tagsNumber;
\e[m
4758 \e[32m+
\e[m
\e[32m if (dirEndOffset + 4 > dataView.byteLength) {
\e[m
4759 \e[32m+
\e[m
\e[32m Roo.log('Invalid Exif data: Invalid directory size.');
\e[m
4760 \e[32m+
\e[m
\e[32m return;
\e[m
4761 \e[32m+
\e[m
\e[32m }
\e[m
4762 \e[32m+
\e[m
\e[32m for (i = 0; i < tagsNumber; i += 1) {
\e[m
4763 \e[32m+
\e[m
\e[32m this.parseExifTag(
\e[m
4764 \e[32m+
\e[m
\e[32m dataView,
\e[m
4765 \e[32m+
\e[m
\e[32m tiffOffset,
\e[m
4766 \e[32m+
\e[m
\e[32m dirOffset + 2 + 12 * i, // tag offset
\e[m
4767 \e[32m+
\e[m
\e[32m littleEndian
\e[m
4768 \e[32m+
\e[m
\e[32m );
\e[m
4769 \e[32m+
\e[m
\e[32m }
\e[m
4770 \e[32m+
\e[m
\e[32m // Return the offset to the next directory:
\e[m
4771 \e[32m+
\e[m
\e[32m return dataView.getUint32(dirEndOffset, littleEndian);
\e[m
4772 \e[32m+
\e[m
\e[32m },
\e[m
4773 \e[32m+
\e[m
\e[41m
\e[m
4774 \e[32m+
\e[m
\e[32m parseExifTag : function (dataView, tiffOffset, offset, littleEndian)
\e[m
\e[41m
\e[m
4775 \e[32m+
\e[m
\e[32m {
\e[m
4776 \e[32m+
\e[m
\e[32m var tag = dataView.getUint16(offset, littleEndian);
\e[m
4777 \e[32m+
\e[m
\e[41m
\e[m
4778 \e[32m+
\e[m
\e[32m this.exif[tag] = this.getExifValue(
\e[m
4779 \e[32m+
\e[m
\e[32m dataView,
\e[m
4780 \e[32m+
\e[m
\e[32m tiffOffset,
\e[m
4781 \e[32m+
\e[m
\e[32m offset,
\e[m
4782 \e[32m+
\e[m
\e[32m dataView.getUint16(offset + 2, littleEndian), // tag type
\e[m
4783 \e[32m+
\e[m
\e[32m dataView.getUint32(offset + 4, littleEndian), // tag length
\e[m
4784 \e[32m+
\e[m
\e[32m littleEndian
\e[m
4785 \e[32m+
\e[m
\e[32m );
\e[m
4786 \e[32m+
\e[m
\e[32m },
\e[m
4787 \e[32m+
\e[m
\e[41m
\e[m
4788 \e[32m+
\e[m
\e[32m getExifValue : function (dataView, tiffOffset, offset, type, length, littleEndian)
\e[m
4789 \e[32m+
\e[m
\e[32m {
\e[m
4790 \e[32m+
\e[m
\e[32m var tagType = Roo.dialog.UploadCropbox.exifTagTypes[type],
\e[m
4791 \e[32m+
\e[m
\e[32m tagSize,
\e[m
4792 \e[32m+
\e[m
\e[32m dataOffset,
\e[m
4793 \e[32m+
\e[m
\e[32m values,
\e[m
4794 \e[32m+
\e[m
\e[32m i,
\e[m
4795 \e[32m+
\e[m
\e[32m str,
\e[m
4796 \e[32m+
\e[m
\e[32m c;
\e[m
4797 \e[32m+
\e[m
\e[41m
\e[m
4798 \e[32m+
\e[m
\e[32m if (!tagType) {
\e[m
4799 \e[32m+
\e[m
\e[32m Roo.log('Invalid Exif data: Invalid tag type.');
\e[m
4800 \e[32m+
\e[m
\e[32m return;
\e[m
4801 \e[32m+
\e[m
\e[32m }
\e[m
4802 \e[32m+
\e[m
\e[41m
\e[m
4803 \e[32m+
\e[m
\e[32m tagSize = tagType.size * length;
\e[m
4804 \e[32m+
\e[m
\e[32m // Determine if the value is contained in the dataOffset bytes,
\e[m
4805 \e[32m+
\e[m
\e[32m // or if the value at the dataOffset is a pointer to the actual data:
\e[m
4806 \e[32m+
\e[m
\e[32m dataOffset = tagSize > 4 ?
\e[m
4807 \e[32m+
\e[m
\e[32m tiffOffset + dataView.getUint32(offset + 8, littleEndian) : (offset + 8);
\e[m
4808 \e[32m+
\e[m
\e[32m if (dataOffset + tagSize > dataView.byteLength) {
\e[m
4809 \e[32m+
\e[m
\e[32m Roo.log('Invalid Exif data: Invalid data offset.');
\e[m
4810 \e[32m+
\e[m
\e[32m return;
\e[m
4811 \e[32m+
\e[m
\e[32m }
\e[m
4812 \e[32m+
\e[m
\e[32m if (length === 1) {
\e[m
4813 \e[32m+
\e[m
\e[32m return tagType.getValue(dataView, dataOffset, littleEndian);
\e[m
4814 \e[32m+
\e[m
\e[32m }
\e[m
4815 \e[32m+
\e[m
\e[32m values = [];
\e[m
4816 \e[32m+
\e[m
\e[32m for (i = 0; i < length; i += 1) {
\e[m
4817 \e[32m+
\e[m
\e[32m values[i] = tagType.getValue(dataView, dataOffset + i * tagType.size, littleEndian);
\e[m
4818 \e[32m+
\e[m
\e[32m }
\e[m
4819 \e[32m+
\e[m
\e[41m
\e[m
4820 \e[32m+
\e[m
\e[32m if (tagType.ascii) {
\e[m
4821 \e[32m+
\e[m
\e[32m str = '';
\e[m
4822 \e[32m+
\e[m
\e[32m // Concatenate the chars:
\e[m
4823 \e[32m+
\e[m
\e[32m for (i = 0; i < values.length; i += 1) {
\e[m
4824 \e[32m+
\e[m
\e[32m c = values[i];
\e[m
4825 \e[32m+
\e[m
\e[32m // Ignore the terminating NULL byte(s):
\e[m
4826 \e[32m+
\e[m
\e[32m if (c === '\u0000') {
\e[m
4827 \e[32m+
\e[m
\e[32m break;
\e[m
4828 \e[32m+
\e[m
\e[32m }
\e[m
4829 \e[32m+
\e[m
\e[32m str += c;
\e[m
4830 \e[32m+
\e[m
\e[32m }
\e[m
4831 \e[32m+
\e[m
\e[32m return str;
\e[m
4832 \e[32m+
\e[m
\e[32m }
\e[m
4833 \e[32m+
\e[m
\e[32m return values;
\e[m
4834 \e[32m+
\e[m
\e[32m }
\e[m
4835 \e[32m+
\e[m
\e[41m
\e[m
4836 \e[32m+
\e[m
\e[32m});
\e[m
4838 \e[32m+
\e[m
\e[32mRoo.apply(Roo.dialog.UploadCropbox, {
\e[m
4839 \e[32m+
\e[m
\e[32m tags : {
\e[m
4840 \e[32m+
\e[m
\e[32m 'Orientation': 0x0112
\e[m
4841 \e[32m+
\e[m
\e[32m },
\e[m
4842 \e[32m+
\e[m
\e[41m
\e[m
4843 \e[32m+
\e[m
\e[32m Orientation: {
\e[m
4844 \e[32m+
\e[m
\e[32m 1: 0, //'top-left',
\e[m
4845 \e[32m+
\e[m
\e[32m// 2: 'top-right',
\e[m
4846 \e[32m+
\e[m
\e[32m 3: 180, //'bottom-right',
\e[m
4847 \e[32m+
\e[m
\e[32m// 4: 'bottom-left',
\e[m
4848 \e[32m+
\e[m
\e[32m// 5: 'left-top',
\e[m
4849 \e[32m+
\e[m
\e[32m 6: 90, //'right-top',
\e[m
4850 \e[32m+
\e[m
\e[32m// 7: 'right-bottom',
\e[m
4851 \e[32m+
\e[m
\e[32m 8: 270 //'left-bottom'
\e[m
4852 \e[32m+
\e[m
\e[32m },
\e[m
4853 \e[32m+
\e[m
\e[41m
\e[m
4854 \e[32m+
\e[m
\e[32m exifTagTypes : {
\e[m
4855 \e[32m+
\e[m
\e[32m // byte, 8-bit unsigned int:
\e[m
4856 \e[32m+
\e[m
\e[32m 1: {
\e[m
4857 \e[32m+
\e[m
\e[32m getValue: function (dataView, dataOffset) {
\e[m
4858 \e[32m+
\e[m
\e[32m return dataView.getUint8(dataOffset);
\e[m
4859 \e[32m+
\e[m
\e[32m },
\e[m
4860 \e[32m+
\e[m
\e[32m size: 1
\e[m
4861 \e[32m+
\e[m
\e[32m },
\e[m
4862 \e[32m+
\e[m
\e[32m // ascii, 8-bit byte:
\e[m
4863 \e[32m+
\e[m
\e[32m 2: {
\e[m
4864 \e[32m+
\e[m
\e[32m getValue: function (dataView, dataOffset) {
\e[m
4865 \e[32m+
\e[m
\e[32m return String.fromCharCode(dataView.getUint8(dataOffset));
\e[m
4866 \e[32m+
\e[m
\e[32m },
\e[m
4867 \e[32m+
\e[m
\e[32m size: 1,
\e[m
4868 \e[32m+
\e[m
\e[32m ascii: true
\e[m
4869 \e[32m+
\e[m
\e[32m },
\e[m
4870 \e[32m+
\e[m
\e[32m // short, 16 bit int:
\e[m
4871 \e[32m+
\e[m
\e[32m 3: {
\e[m
4872 \e[32m+
\e[m
\e[32m getValue: function (dataView, dataOffset, littleEndian) {
\e[m
4873 \e[32m+
\e[m
\e[32m return dataView.getUint16(dataOffset, littleEndian);
\e[m
4874 \e[32m+
\e[m
\e[32m },
\e[m
4875 \e[32m+
\e[m
\e[32m size: 2
\e[m
4876 \e[32m+
\e[m
\e[32m },
\e[m
4877 \e[32m+
\e[m
\e[32m // long, 32 bit int:
\e[m
4878 \e[32m+
\e[m
\e[32m 4: {
\e[m
4879 \e[32m+
\e[m
\e[32m getValue: function (dataView, dataOffset, littleEndian) {
\e[m
4880 \e[32m+
\e[m
\e[32m return dataView.getUint32(dataOffset, littleEndian);
\e[m
4881 \e[32m+
\e[m
\e[32m },
\e[m
4882 \e[32m+
\e[m
\e[32m size: 4
\e[m
4883 \e[32m+
\e[m
\e[32m },
\e[m
4884 \e[32m+
\e[m
\e[32m // rational = two long values, first is numerator, second is denominator:
\e[m
4885 \e[32m+
\e[m
\e[32m 5: {
\e[m
4886 \e[32m+
\e[m
\e[32m getValue: function (dataView, dataOffset, littleEndian) {
\e[m
4887 \e[32m+
\e[m
\e[32m return dataView.getUint32(dataOffset, littleEndian) /
\e[m
4888 \e[32m+
\e[m
\e[32m dataView.getUint32(dataOffset + 4, littleEndian);
\e[m
4889 \e[32m+
\e[m
\e[32m },
\e[m
4890 \e[32m+
\e[m
\e[32m size: 8
\e[m
4891 \e[32m+
\e[m
\e[32m },
\e[m
4892 \e[32m+
\e[m
\e[32m // slong, 32 bit signed int:
\e[m
4893 \e[32m+
\e[m
\e[32m 9: {
\e[m
4894 \e[32m+
\e[m
\e[32m getValue: function (dataView, dataOffset, littleEndian) {
\e[m
4895 \e[32m+
\e[m
\e[32m return dataView.getInt32(dataOffset, littleEndian);
\e[m
4896 \e[32m+
\e[m
\e[32m },
\e[m
4897 \e[32m+
\e[m
\e[32m size: 4
\e[m
4898 \e[32m+
\e[m
\e[32m },
\e[m
4899 \e[32m+
\e[m
\e[32m // srational, two slongs, first is numerator, second is denominator:
\e[m
4900 \e[32m+
\e[m
\e[32m 10: {
\e[m
4901 \e[32m+
\e[m
\e[32m getValue: function (dataView, dataOffset, littleEndian) {
\e[m
4902 \e[32m+
\e[m
\e[32m return dataView.getInt32(dataOffset, littleEndian) /
\e[m
4903 \e[32m+
\e[m
\e[32m dataView.getInt32(dataOffset + 4, littleEndian);
\e[m
4904 \e[32m+
\e[m
\e[32m },
\e[m
4905 \e[32m+
\e[m
\e[32m size: 8
\e[m
4906 \e[32m+
\e[m
\e[32m }
\e[m
4907 \e[32m+
\e[m
\e[32m },
\e[m
4908 \e[32m+
\e[m
\e[41m
\e[m
4909 \e[32m+
\e[m
\e[32m footer : {
\e[m
4910 \e[32m+
\e[m
\e[32m STANDARD : [
\e[m
4911 \e[32m+
\e[m
\e[32m {
\e[m
4912 \e[32m+
\e[m
\e[32m tag : 'div',
\e[m
4913 \e[32m+
\e[m
\e[32m cls : 'btn-group roo-upload-cropbox-rotate-left',
\e[m
4914 \e[32m+
\e[m
\e[32m action : 'rotate-left',
\e[m
4915 \e[32m+
\e[m
\e[32m cn : [
\e[m
4916 \e[32m+
\e[m
\e[32m {
\e[m
4917 \e[32m+
\e[m
\e[32m tag : 'button',
\e[m
4918 \e[32m+
\e[m
\e[32m cls : 'btn btn-default',
\e[m
4919 \e[32m+
\e[m
\e[32m html : '<i class="fa fa-undo"></i>'
\e[m
4920 \e[32m+
\e[m
\e[32m }
\e[m
4921 \e[32m+
\e[m
\e[32m ]
\e[m
4922 \e[32m+
\e[m
\e[32m },
\e[m
4923 \e[32m+
\e[m
\e[32m {
\e[m
4924 \e[32m+
\e[m
\e[32m tag : 'div',
\e[m
4925 \e[32m+
\e[m
\e[32m cls : 'btn-group roo-upload-cropbox-picture',
\e[m
4926 \e[32m+
\e[m
\e[32m action : 'picture',
\e[m
4927 \e[32m+
\e[m
\e[32m cn : [
\e[m
4928 \e[32m+
\e[m
\e[32m {
\e[m
4929 \e[32m+
\e[m
\e[32m tag : 'button',
\e[m
4930 \e[32m+
\e[m
\e[32m cls : 'btn btn-default',
\e[m
4931 \e[32m+
\e[m
\e[32m html : '<i class="fa fa-picture-o"></i>'
\e[m
4932 \e[32m+
\e[m
\e[32m }
\e[m
4933 \e[32m+
\e[m
\e[32m ]
\e[m
4934 \e[32m+
\e[m
\e[32m },
\e[m
4935 \e[32m+
\e[m
\e[32m {
\e[m
4936 \e[32m+
\e[m
\e[32m tag : 'div',
\e[m
4937 \e[32m+
\e[m
\e[32m cls : 'btn-group roo-upload-cropbox-rotate-right',
\e[m
4938 \e[32m+
\e[m
\e[32m action : 'rotate-right',
\e[m
4939 \e[32m+
\e[m
\e[32m cn : [
\e[m
4940 \e[32m+
\e[m
\e[32m {
\e[m
4941 \e[32m+
\e[m
\e[32m tag : 'button',
\e[m
4942 \e[32m+
\e[m
\e[32m cls : 'btn btn-default',
\e[m
4943 \e[32m+
\e[m
\e[32m html : '<i class="fa fa-repeat"></i>'
\e[m
4944 \e[32m+
\e[m
\e[32m }
\e[m
4945 \e[32m+
\e[m
\e[32m ]
\e[m
4946 \e[32m+
\e[m
\e[32m }
\e[m
4947 \e[32m+
\e[m
\e[32m ],
\e[m
4948 \e[32m+
\e[m
\e[32m DOCUMENT : [
\e[m
4949 \e[32m+
\e[m
\e[32m {
\e[m
4950 \e[32m+
\e[m
\e[32m tag : 'div',
\e[m
4951 \e[32m+
\e[m
\e[32m cls : 'btn-group roo-upload-cropbox-rotate-left',
\e[m
4952 \e[32m+
\e[m
\e[32m action : 'rotate-left',
\e[m
4953 \e[32m+
\e[m
\e[32m cn : [
\e[m
4954 \e[32m+
\e[m
\e[32m {
\e[m
4955 \e[32m+
\e[m
\e[32m tag : 'button',
\e[m
4956 \e[32m+
\e[m
\e[32m cls : 'btn btn-default',
\e[m
4957 \e[32m+
\e[m
\e[32m html : '<i class="fa fa-undo"></i>'
\e[m
4958 \e[32m+
\e[m
\e[32m }
\e[m
4959 \e[32m+
\e[m
\e[32m ]
\e[m
4960 \e[32m+
\e[m
\e[32m },
\e[m
4961 \e[32m+
\e[m
\e[32m {
\e[m
4962 \e[32m+
\e[m
\e[32m tag : 'div',
\e[m
4963 \e[32m+
\e[m
\e[32m cls : 'btn-group roo-upload-cropbox-download',
\e[m
4964 \e[32m+
\e[m
\e[32m action : 'download',
\e[m
4965 \e[32m+
\e[m
\e[32m cn : [
\e[m
4966 \e[32m+
\e[m
\e[32m {
\e[m
4967 \e[32m+
\e[m
\e[32m tag : 'button',
\e[m
4968 \e[32m+
\e[m
\e[32m cls : 'btn btn-default',
\e[m
4969 \e[32m+
\e[m
\e[32m html : '<i class="fa fa-download"></i>'
\e[m
4970 \e[32m+
\e[m
\e[32m }
\e[m
4971 \e[32m+
\e[m
\e[32m ]
\e[m
4972 \e[32m+
\e[m
\e[32m },
\e[m
4973 \e[32m+
\e[m
\e[32m {
\e[m
4974 \e[32m+
\e[m
\e[32m tag : 'div',
\e[m
4975 \e[32m+
\e[m
\e[32m cls : 'btn-group roo-upload-cropbox-crop',
\e[m
4976 \e[32m+
\e[m
\e[32m action : 'crop',
\e[m
4977 \e[32m+
\e[m
\e[32m cn : [
\e[m
4978 \e[32m+
\e[m
\e[32m {
\e[m
4979 \e[32m+
\e[m
\e[32m tag : 'button',
\e[m
4980 \e[32m+
\e[m
\e[32m cls : 'btn btn-default',
\e[m
4981 \e[32m+
\e[m
\e[32m html : '<i class="fa fa-crop"></i>'
\e[m
4982 \e[32m+
\e[m
\e[32m }
\e[m
4983 \e[32m+
\e[m
\e[32m ]
\e[m
4984 \e[32m+
\e[m
\e[32m },
\e[m
4985 \e[32m+
\e[m
\e[32m {
\e[m
4986 \e[32m+
\e[m
\e[32m tag : 'div',
\e[m
4987 \e[32m+
\e[m
\e[32m cls : 'btn-group roo-upload-cropbox-trash',
\e[m
4988 \e[32m+
\e[m
\e[32m action : 'trash',
\e[m
4989 \e[32m+
\e[m
\e[32m cn : [
\e[m
4990 \e[32m+
\e[m
\e[32m {
\e[m
4991 \e[32m+
\e[m
\e[32m tag : 'button',
\e[m
4992 \e[32m+
\e[m
\e[32m cls : 'btn btn-default',
\e[m
4993 \e[32m+
\e[m
\e[32m html : '<i class="fa fa-trash"></i>'
\e[m
4994 \e[32m+
\e[m
\e[32m }
\e[m
4995 \e[32m+
\e[m
\e[32m ]
\e[m
4996 \e[32m+
\e[m
\e[32m },
\e[m
4997 \e[32m+
\e[m
\e[32m {
\e[m
4998 \e[32m+
\e[m
\e[32m tag : 'div',
\e[m
4999 \e[32m+
\e[m
\e[32m cls : 'btn-group roo-upload-cropbox-rotate-right',
\e[m
5000 \e[32m+
\e[m
\e[32m action : 'rotate-right',
\e[m
5001 \e[32m+
\e[m
\e[32m cn : [
\e[m
5002 \e[32m+
\e[m
\e[32m {
\e[m
5003 \e[32m+
\e[m
\e[32m tag : 'button',
\e[m
5004 \e[32m+
\e[m
\e[32m cls : 'btn btn-default',
\e[m
5005 \e[32m+
\e[m
\e[32m html : '<i class="fa fa-repeat"></i>'
\e[m
5006 \e[32m+
\e[m
\e[32m }
\e[m
5007 \e[32m+
\e[m
\e[32m ]
\e[m
5008 \e[32m+
\e[m
\e[32m }
\e[m
5009 \e[32m+
\e[m
\e[32m ],
\e[m
5010 \e[32m+
\e[m
\e[32m ROTATOR : [
\e[m
5011 \e[32m+
\e[m
\e[32m {
\e[m
5012 \e[32m+
\e[m
\e[32m tag : 'div',
\e[m
5013 \e[32m+
\e[m
\e[32m cls : 'btn-group roo-upload-cropbox-rotate-left',
\e[m
5014 \e[32m+
\e[m
\e[32m action : 'rotate-left',
\e[m
5015 \e[32m+
\e[m
\e[32m cn : [
\e[m
5016 \e[32m+
\e[m
\e[32m {
\e[m
5017 \e[32m+
\e[m
\e[32m tag : 'button',
\e[m
5018 \e[32m+
\e[m
\e[32m cls : 'btn btn-default',
\e[m
5019 \e[32m+
\e[m
\e[32m html : '<i class="fa fa-undo"></i>'
\e[m
5020 \e[32m+
\e[m
\e[32m }
\e[m
5021 \e[32m+
\e[m
\e[32m ]
\e[m
5022 \e[32m+
\e[m
\e[32m },
\e[m
5023 \e[32m+
\e[m
\e[32m {
\e[m
5024 \e[32m+
\e[m
\e[32m tag : 'div',
\e[m
5025 \e[32m+
\e[m
\e[32m cls : 'btn-group roo-upload-cropbox-rotate-right',
\e[m
5026 \e[32m+
\e[m
\e[32m action : 'rotate-right',
\e[m
5027 \e[32m+
\e[m
\e[32m cn : [
\e[m
5028 \e[32m+
\e[m
\e[32m {
\e[m
5029 \e[32m+
\e[m
\e[32m tag : 'button',
\e[m
5030 \e[32m+
\e[m
\e[32m cls : 'btn btn-default',
\e[m
5031 \e[32m+
\e[m
\e[32m html : '<i class="fa fa-repeat"></i>'
\e[m
5032 \e[32m+
\e[m
\e[32m }
\e[m
5033 \e[32m+
\e[m
\e[32m ]
\e[m
5034 \e[32m+
\e[m
\e[32m }
\e[m
5035 \e[32m+
\e[m
\e[32m ]
\e[m
5036 \e[32m+
\e[m
\e[32m }
\e[m
5037 \e[32m+
\e[m
\e[32m});
\e[m
5038 \e[1mdiff --git a/roojs-ui-debug.js b/roojs-ui-debug.js
\e[m
5039 \e[1mindex 4458d38422..4cc277300f 100644
\e[m
5040 \e[1m--- a/roojs-ui-debug.js
\e[m
5041 \e[1m+++ b/roojs-ui-debug.js
\e[m
5042 \e[36m@@ -35922,7 +35922,6 @@
\e[m
\e[mRoo.LayoutStateManager.prototype = {
\e[m
5044 Roo.ContentPanel = function(el, config, content){
\e[m
5048 if(el.autoCreate || el.xtype){ // xtype is available if this is called from factory
\e[m
5050 \e[36m@@ -36306,6 +36305,14 @@
\e[m
\e[mlayout.addxtype({
\e[m
5053 addxtype : function(cfg) {
\e[m
5054 \e[32m+
\e[m
\e[32m if(cfg.xtype.match(/^UploadCropbox$/)) {
\e[m
5056 \e[32m+
\e[m
\e[32m this.cropbox = new Roo.factory(cfg);
\e[m
5058 \e[32m+
\e[m
\e[32m this.cropbox.render(this.el);
\e[m
5060 \e[32m+
\e[m
\e[32m return this.cropbox;
\e[m
5061 \e[32m+
\e[m
\e[32m }
\e[m
5063 if (cfg.xtype.match(/^Form$/)) {
\e[m
5065 \e[36m@@ -43558,4 +43565,1795 @@
\e[m
\e[mRoo.extend(Roo.XTemplate, Roo.Template, {
\e[m
5066 Roo.XTemplate.from = function(el){
\e[m
5067 el = Roo.getDom(el);
\e[m
5068 return new Roo.XTemplate(el.value || el.innerHTML);
\e[m
5070 \ No newline at end of file
\e[m
5071 \e[32m+
\e[m
\e[32m};Roo.dialog = {};
\e[m
5072 \e[32m+
\e[m
\e[32m/*
\e[m
5073 \e[32m+
\e[m
\e[32m* Licence: LGPL
\e[m
5074 \e[32m+
\e[m
\e[32m*/
\e[m
5076 \e[32m+
\e[m
\e[32m/**
\e[m
5077 \e[32m+
\e[m
\e[32m * @class Roo.dialog.UploadCropbox
\e[m
5078 \e[32m+
\e[m
\e[32m * @extends Roo.BoxComponent
\e[m
5079 \e[32m+
\e[m
\e[32m * Dialog UploadCropbox class
\e[m
5080 \e[32m+
\e[m
\e[32m * @cfg {String} emptyText show when image has been loaded
\e[m
5081 \e[32m+
\e[m
\e[32m * @cfg {String} rotateNotify show when image too small to rotate
\e[m
5082 \e[32m+
\e[m
\e[32m * @cfg {Number} errorTimeout default 3000
\e[m
5083 \e[32m+
\e[m
\e[32m * @cfg {Number} minWidth default 300
\e[m
5084 \e[32m+
\e[m
\e[32m * @cfg {Number} minHeight default 300
\e[m
5085 \e[32m+
\e[m
\e[32m * @cfg {Array} buttons default ['rotateLeft', 'pictureBtn', 'rotateRight']
\e[m
5086 \e[32m+
\e[m
\e[32m * @cfg {Boolean} isDocument (true|false) default false
\e[m
5087 \e[32m+
\e[m
\e[32m * @cfg {String} url action url
\e[m
5088 \e[32m+
\e[m
\e[32m * @cfg {String} paramName default 'imageUpload'
\e[m
5089 \e[32m+
\e[m
\e[32m * @cfg {String} method default POST
\e[m
5090 \e[32m+
\e[m
\e[32m * @cfg {Boolean} loadMask (true|false) default true
\e[m
5091 \e[32m+
\e[m
\e[32m * @cfg {Boolean} loadingText default 'Loading...'
\e[m
5092 \e[32m+
\e[m
\e[32m *
\e[m
\e[41m
\e[m
5093 \e[32m+
\e[m
\e[32m * @constructor
\e[m
5094 \e[32m+
\e[m
\e[32m * Create a new UploadCropbox
\e[m
5095 \e[32m+
\e[m
\e[32m * @param {Object} config The config object
\e[m
5096 \e[32m+
\e[m
\e[32m */
\e[m
5098 \e[32m+
\e[m
\e[32m Roo.dialog.UploadCropbox = function(config){
\e[m
5099 \e[32m+
\e[m
\e[32m console.log("Dialog UploadCropbox Constructor");
\e[m
5100 \e[32m+
\e[m
\e[32m Roo.dialog.UploadCropbox.superclass.constructor.call(this, config);
\e[m
5101 \e[32m+
\e[m
\e[41m
\e[m
5102 \e[32m+
\e[m
\e[32m this.addEvents({
\e[m
5103 \e[32m+
\e[m
\e[32m /**
\e[m
5104 \e[32m+
\e[m
\e[32m * @event beforeselectfile
\e[m
5105 \e[32m+
\e[m
\e[32m * Fire before select file
\e[m
5106 \e[32m+
\e[m
\e[32m * @param {Roo.dialog.UploadCropbox} this
\e[m
5107 \e[32m+
\e[m
\e[32m */
\e[m
5108 \e[32m+
\e[m
\e[32m "beforeselectfile" : true,
\e[m
5109 \e[32m+
\e[m
\e[32m /**
\e[m
5110 \e[32m+
\e[m
\e[32m * @event initial
\e[m
5111 \e[32m+
\e[m
\e[32m * Fire after initEvent
\e[m
5112 \e[32m+
\e[m
\e[32m * @param {Roo.dialog.UploadCropbox} this
\e[m
5113 \e[32m+
\e[m
\e[32m */
\e[m
5114 \e[32m+
\e[m
\e[32m "initial" : true,
\e[m
5115 \e[32m+
\e[m
\e[32m /**
\e[m
5116 \e[32m+
\e[m
\e[32m * @event crop
\e[m
5117 \e[32m+
\e[m
\e[32m * Fire after initEvent
\e[m
5118 \e[32m+
\e[m
\e[32m * @param {Roo.dialog.UploadCropbox} this
\e[m
5119 \e[32m+
\e[m
\e[32m * @param {String} data
\e[m
5120 \e[32m+
\e[m
\e[32m */
\e[m
5121 \e[32m+
\e[m
\e[32m "crop" : true,
\e[m
5122 \e[32m+
\e[m
\e[32m /**
\e[m
5123 \e[32m+
\e[m
\e[32m * @event prepare
\e[m
5124 \e[32m+
\e[m
\e[32m * Fire when preparing the file data
\e[m
5125 \e[32m+
\e[m
\e[32m * @param {Roo.dialog.UploadCropbox} this
\e[m
5126 \e[32m+
\e[m
\e[32m * @param {Object} file
\e[m
5127 \e[32m+
\e[m
\e[32m */
\e[m
5128 \e[32m+
\e[m
\e[32m "prepare" : true,
\e[m
5129 \e[32m+
\e[m
\e[32m /**
\e[m
5130 \e[32m+
\e[m
\e[32m * @event exception
\e[m
5131 \e[32m+
\e[m
\e[32m * Fire when get exception
\e[m
5132 \e[32m+
\e[m
\e[32m * @param {Roo.dialog.UploadCropbox} this
\e[m
5133 \e[32m+
\e[m
\e[32m * @param {XMLHttpRequest} xhr
\e[m
5134 \e[32m+
\e[m
\e[32m */
\e[m
5135 \e[32m+
\e[m
\e[32m "exception" : true,
\e[m
5136 \e[32m+
\e[m
\e[32m /**
\e[m
5137 \e[32m+
\e[m
\e[32m * @event beforeloadcanvas
\e[m
5138 \e[32m+
\e[m
\e[32m * Fire before load the canvas
\e[m
5139 \e[32m+
\e[m
\e[32m * @param {Roo.dialog.UploadCropbox} this
\e[m
5140 \e[32m+
\e[m
\e[32m * @param {String} src
\e[m
5141 \e[32m+
\e[m
\e[32m */
\e[m
5142 \e[32m+
\e[m
\e[32m "beforeloadcanvas" : true,
\e[m
5143 \e[32m+
\e[m
\e[32m /**
\e[m
5144 \e[32m+
\e[m
\e[32m * @event trash
\e[m
5145 \e[32m+
\e[m
\e[32m * Fire when trash image
\e[m
5146 \e[32m+
\e[m
\e[32m * @param {Roo.dialog.UploadCropbox} this
\e[m
5147 \e[32m+
\e[m
\e[32m */
\e[m
5148 \e[32m+
\e[m
\e[32m "trash" : true,
\e[m
5149 \e[32m+
\e[m
\e[32m /**
\e[m
5150 \e[32m+
\e[m
\e[32m * @event download
\e[m
5151 \e[32m+
\e[m
\e[32m * Fire when download the image
\e[m
5152 \e[32m+
\e[m
\e[32m * @param {Roo.dialog.UploadCropbox} this
\e[m
5153 \e[32m+
\e[m
\e[32m */
\e[m
5154 \e[32m+
\e[m
\e[32m "download" : true,
\e[m
5155 \e[32m+
\e[m
\e[32m /**
\e[m
5156 \e[32m+
\e[m
\e[32m * @event footerbuttonclick
\e[m
5157 \e[32m+
\e[m
\e[32m * Fire when footerbuttonclick
\e[m
5158 \e[32m+
\e[m
\e[32m * @param {Roo.dialog.UploadCropbox} this
\e[m
5159 \e[32m+
\e[m
\e[32m * @param {String} type
\e[m
5160 \e[32m+
\e[m
\e[32m */
\e[m
5161 \e[32m+
\e[m
\e[32m "footerbuttonclick" : true,
\e[m
5162 \e[32m+
\e[m
\e[32m /**
\e[m
5163 \e[32m+
\e[m
\e[32m * @event resize
\e[m
5164 \e[32m+
\e[m
\e[32m * Fire when resize
\e[m
5165 \e[32m+
\e[m
\e[32m * @param {Roo.dialog.UploadCropbox} this
\e[m
5166 \e[32m+
\e[m
\e[32m */
\e[m
5167 \e[32m+
\e[m
\e[32m "resize" : true,
\e[m
5168 \e[32m+
\e[m
\e[32m /**
\e[m
5169 \e[32m+
\e[m
\e[32m * @event rotate
\e[m
5170 \e[32m+
\e[m
\e[32m * Fire when rotate the image
\e[m
5171 \e[32m+
\e[m
\e[32m * @param {Roo.dialog.UploadCropbox} this
\e[m
5172 \e[32m+
\e[m
\e[32m * @param {String} pos
\e[m
5173 \e[32m+
\e[m
\e[32m */
\e[m
5174 \e[32m+
\e[m
\e[32m "rotate" : true,
\e[m
5175 \e[32m+
\e[m
\e[32m /**
\e[m
5176 \e[32m+
\e[m
\e[32m * @event inspect
\e[m
5177 \e[32m+
\e[m
\e[32m * Fire when inspect the file
\e[m
5178 \e[32m+
\e[m
\e[32m * @param {Roo.dialog.UploadCropbox} this
\e[m
5179 \e[32m+
\e[m
\e[32m * @param {Object} file
\e[m
5180 \e[32m+
\e[m
\e[32m */
\e[m
5181 \e[32m+
\e[m
\e[32m "inspect" : true,
\e[m
5182 \e[32m+
\e[m
\e[32m /**
\e[m
5183 \e[32m+
\e[m
\e[32m * @event upload
\e[m
5184 \e[32m+
\e[m
\e[32m * Fire when xhr upload the file
\e[m
5185 \e[32m+
\e[m
\e[32m * @param {Roo.dialog.UploadCropbox} this
\e[m
5186 \e[32m+
\e[m
\e[32m * @param {Object} data
\e[m
5187 \e[32m+
\e[m
\e[32m */
\e[m
5188 \e[32m+
\e[m
\e[32m "upload" : true,
\e[m
5189 \e[32m+
\e[m
\e[32m /**
\e[m
5190 \e[32m+
\e[m
\e[32m * @event arrange
\e[m
5191 \e[32m+
\e[m
\e[32m * Fire when arrange the file data
\e[m
5192 \e[32m+
\e[m
\e[32m * @param {Roo.dialog.UploadCropbox} this
\e[m
5193 \e[32m+
\e[m
\e[32m * @param {Object} formData
\e[m
5194 \e[32m+
\e[m
\e[32m */
\e[m
5195 \e[32m+
\e[m
\e[32m "arrange" : true,
\e[m
5196 \e[32m+
\e[m
\e[32m /**
\e[m
5197 \e[32m+
\e[m
\e[32m * @event loadcanvas
\e[m
5198 \e[32m+
\e[m
\e[32m * Fire after load the canvas
\e[m
5199 \e[32m+
\e[m
\e[32m * @param {Roo.dialog.UploadCropbox}
\e[m
5200 \e[32m+
\e[m
\e[32m * @param {Object} imgEl
\e[m
5201 \e[32m+
\e[m
\e[32m */
\e[m
5202 \e[32m+
\e[m
\e[32m "loadcanvas" : true
\e[m
5203 \e[32m+
\e[m
\e[32m });
\e[m
5204 \e[32m+
\e[m
\e[41m
\e[m
5205 \e[32m+
\e[m
\e[32m this.buttons = this.buttons || Roo.dialog.UploadCropbox.footer.STANDARD;
\e[m
5206 \e[32m+
\e[m
\e[32m};
\e[m
5208 \e[32m+
\e[m
\e[32mRoo.extend(Roo.dialog.UploadCropbox, Roo.Component, {
\e[m
5209 \e[32m+
\e[m
\e[41m
\e[m
5210 \e[32m+
\e[m
\e[32m emptyText : 'Click to upload image',
\e[m
5211 \e[32m+
\e[m
\e[32m rotateNotify : 'Image is too small to rotate',
\e[m
5212 \e[32m+
\e[m
\e[32m errorTimeout : 3000,
\e[m
5213 \e[32m+
\e[m
\e[32m scale : 0,
\e[m
5214 \e[32m+
\e[m
\e[32m baseScale : 1,
\e[m
5215 \e[32m+
\e[m
\e[32m rotate : 0,
\e[m
5216 \e[32m+
\e[m
\e[32m dragable : false,
\e[m
5217 \e[32m+
\e[m
\e[32m pinching : false,
\e[m
5218 \e[32m+
\e[m
\e[32m mouseX : 0,
\e[m
5219 \e[32m+
\e[m
\e[32m mouseY : 0,
\e[m
5220 \e[32m+
\e[m
\e[32m cropData : false,
\e[m
5221 \e[32m+
\e[m
\e[32m minWidth : 300,
\e[m
5222 \e[32m+
\e[m
\e[32m minHeight : 300,
\e[m
5223 \e[32m+
\e[m
\e[32m file : false,
\e[m
5224 \e[32m+
\e[m
\e[32m exif : {},
\e[m
5225 \e[32m+
\e[m
\e[32m baseRotate : 1,
\e[m
5226 \e[32m+
\e[m
\e[32m cropType : 'image/jpeg',
\e[m
5227 \e[32m+
\e[m
\e[32m buttons : false,
\e[m
5228 \e[32m+
\e[m
\e[32m canvasLoaded : false,
\e[m
5229 \e[32m+
\e[m
\e[32m isDocument : false,
\e[m
5230 \e[32m+
\e[m
\e[32m method : 'POST',
\e[m
5231 \e[32m+
\e[m
\e[32m paramName : 'imageUpload',
\e[m
5232 \e[32m+
\e[m
\e[32m loadMask : true,
\e[m
5233 \e[32m+
\e[m
\e[32m loadingText : 'Loading...',
\e[m
5234 \e[32m+
\e[m
\e[32m maskEl : false,
\e[m
5235 \e[32m+
\e[m
\e[41m
\e[m
5236 \e[32m+
\e[m
\e[32m getAutoCreate : function()
\e[m
5237 \e[32m+
\e[m
\e[32m {
\e[m
5238 \e[32m+
\e[m
\e[32m var cfg = {
\e[m
5239 \e[32m+
\e[m
\e[32m tag : 'div',
\e[m
5240 \e[32m+
\e[m
\e[32m cls : 'roo-upload-cropbox',
\e[m
5241 \e[32m+
\e[m
\e[32m cn : [
\e[m
5242 \e[32m+
\e[m
\e[32m {
\e[m
5243 \e[32m+
\e[m
\e[32m tag : 'input',
\e[m
5244 \e[32m+
\e[m
\e[32m cls : 'roo-upload-cropbox-selector',
\e[m
5245 \e[32m+
\e[m
\e[32m type : 'file'
\e[m
5246 \e[32m+
\e[m
\e[32m },
\e[m
5247 \e[32m+
\e[m
\e[32m {
\e[m
5248 \e[32m+
\e[m
\e[32m tag : 'div',
\e[m
5249 \e[32m+
\e[m
\e[32m cls : 'roo-upload-cropbox-body',
\e[m
5250 \e[32m+
\e[m
\e[32m style : 'cursor:pointer',
\e[m
5251 \e[32m+
\e[m
\e[32m cn : [
\e[m
5252 \e[32m+
\e[m
\e[32m {
\e[m
5253 \e[32m+
\e[m
\e[32m tag : 'div',
\e[m
5254 \e[32m+
\e[m
\e[32m cls : 'roo-upload-cropbox-preview'
\e[m
5255 \e[32m+
\e[m
\e[32m },
\e[m
5256 \e[32m+
\e[m
\e[32m {
\e[m
5257 \e[32m+
\e[m
\e[32m tag : 'div',
\e[m
5258 \e[32m+
\e[m
\e[32m cls : 'roo-upload-cropbox-thumb'
\e[m
5259 \e[32m+
\e[m
\e[32m },
\e[m
5260 \e[32m+
\e[m
\e[32m {
\e[m
5261 \e[32m+
\e[m
\e[32m tag : 'div',
\e[m
5262 \e[32m+
\e[m
\e[32m cls : 'roo-upload-cropbox-empty-notify',
\e[m
5263 \e[32m+
\e[m
\e[32m html : this.emptyText
\e[m
5264 \e[32m+
\e[m
\e[32m },
\e[m
5265 \e[32m+
\e[m
\e[32m {
\e[m
5266 \e[32m+
\e[m
\e[32m tag : 'div',
\e[m
5267 \e[32m+
\e[m
\e[32m cls : 'roo-upload-cropbox-error-notify alert alert-danger',
\e[m
5268 \e[32m+
\e[m
\e[32m html : this.rotateNotify
\e[m
5269 \e[32m+
\e[m
\e[32m }
\e[m
5270 \e[32m+
\e[m
\e[32m ]
\e[m
5271 \e[32m+
\e[m
\e[32m },
\e[m
5272 \e[32m+
\e[m
\e[32m {
\e[m
5273 \e[32m+
\e[m
\e[32m tag : 'div',
\e[m
5274 \e[32m+
\e[m
\e[32m cls : 'roo-upload-cropbox-footer',
\e[m
5275 \e[32m+
\e[m
\e[32m cn : {
\e[m
5276 \e[32m+
\e[m
\e[32m tag : 'div',
\e[m
5277 \e[32m+
\e[m
\e[32m cls : 'btn-group btn-group-justified roo-upload-cropbox-btn-group',
\e[m
5278 \e[32m+
\e[m
\e[32m cn : []
\e[m
5279 \e[32m+
\e[m
\e[32m }
\e[m
5280 \e[32m+
\e[m
\e[32m }
\e[m
5281 \e[32m+
\e[m
\e[32m ]
\e[m
5282 \e[32m+
\e[m
\e[32m };
\e[m
5283 \e[32m+
\e[m
\e[41m
\e[m
5284 \e[32m+
\e[m
\e[32m return cfg;
\e[m
5285 \e[32m+
\e[m
\e[32m },
\e[m
5286 \e[32m+
\e[m
\e[41m
\e[m
5287 \e[32m+
\e[m
\e[32m onRender : function(ct, position)
\e[m
5288 \e[32m+
\e[m
\e[32m {
\e[m
5289 \e[32m+
\e[m
\e[32m console.log("On Render");
\e[m
5290 \e[32m+
\e[m
\e[32m console.log(this);
\e[m
5291 \e[32m+
\e[m
\e[32m Roo.dialog.UploadCropbox.superclass.onRender.call(this, ct, position);
\e[m
5293 \e[32m+
\e[m
\e[32m if(this.el){
\e[m
5294 \e[32m+
\e[m
\e[32m if (this.el.attr('xtype')) {
\e[m
5295 \e[32m+
\e[m
\e[32m this.el.attr('xtypex', this.el.attr('xtype'));
\e[m
5296 \e[32m+
\e[m
\e[32m this.el.dom.removeAttribute('xtype');
\e[m
5297 \e[32m+
\e[m
\e[41m
\e[m
5298 \e[32m+
\e[m
\e[32m this.initEvents();
\e[m
5299 \e[32m+
\e[m
\e[32m }
\e[m
5300 \e[32m+
\e[m
\e[32m }
\e[m
5301 \e[32m+
\e[m
\e[32m else {
\e[m
5302 \e[32m+
\e[m
\e[32m var cfg = Roo.apply({}, this.getAutoCreate());
\e[m
5303 \e[32m+
\e[m
\e[41m
\e[m
5304 \e[32m+
\e[m
\e[32m cfg.id = this.id || Roo.id();
\e[m
5305 \e[32m+
\e[m
\e[41m
\e[m
5306 \e[32m+
\e[m
\e[32m if (this.cls) {
\e[m
5307 \e[32m+
\e[m
\e[32m cfg.cls = (typeof(cfg.cls) == 'undefined' ? this.cls : cfg.cls) + ' ' + this.cls;
\e[m
5308 \e[32m+
\e[m
\e[32m }
\e[m
5309 \e[32m+
\e[m
\e[41m
\e[m
5310 \e[32m+
\e[m
\e[32m if (this.style) { // fixme needs to support more complex style data.
\e[m
5311 \e[32m+
\e[m
\e[32m cfg.style = (typeof(cfg.style) == 'undefined' ? this.style : cfg.style) + '; ' + this.style;
\e[m
5312 \e[32m+
\e[m
\e[32m }
\e[m
5313 \e[32m+
\e[m
\e[41m
\e[m
5314 \e[32m+
\e[m
\e[32m this.el = ct.createChild(cfg, position);
\e[m
5315 \e[32m+
\e[m
\e[41m
\e[m
5316 \e[32m+
\e[m
\e[32m this.initEvents();
\e[m
5317 \e[32m+
\e[m
\e[32m }
\e[m
5318 \e[32m+
\e[m
\e[41m
\e[m
5319 \e[32m+
\e[m
\e[32m if (this.buttons.length) {
\e[m
5320 \e[32m+
\e[m
\e[41m
\e[m
5321 \e[32m+
\e[m
\e[32m Roo.each(this.buttons, function(bb) {
\e[m
5322 \e[32m+
\e[m
\e[41m
\e[m
5323 \e[32m+
\e[m
\e[32m var btn = this.el.select('.roo-upload-cropbox-footer div.roo-upload-cropbox-btn-group').first().createChild(bb);
\e[m
5324 \e[32m+
\e[m
\e[41m
\e[m
5325 \e[32m+
\e[m
\e[32m btn.on('click', this.onFooterButtonClick.createDelegate(this, [bb.action], true));
\e[m
5326 \e[32m+
\e[m
\e[41m
\e[m
5327 \e[32m+
\e[m
\e[32m }, this);
\e[m
5328 \e[32m+
\e[m
\e[32m }
\e[m
5329 \e[32m+
\e[m
\e[41m
\e[m
5330 \e[32m+
\e[m
\e[32m if(this.loadMask){
\e[m
5331 \e[32m+
\e[m
\e[32m this.maskEl = this.el;
\e[m
5332 \e[32m+
\e[m
\e[32m }
\e[m
5333 \e[32m+
\e[m
\e[32m },
\e[m
5334 \e[32m+
\e[m
\e[41m
\e[m
5335 \e[32m+
\e[m
\e[32m initEvents : function()
\e[m
5336 \e[32m+
\e[m
\e[32m {
\e[m
5337 \e[32m+
\e[m
\e[32m this.urlAPI = (window.createObjectURL && window) ||
\e[m
\e[41m
\e[m
5338 \e[32m+
\e[m
\e[32m (window.URL && URL.revokeObjectURL && URL) ||
\e[m
\e[41m
\e[m
5339 \e[32m+
\e[m
\e[32m (window.webkitURL && webkitURL);
\e[m
5340 \e[32m+
\e[m
\e[41m
\e[m
5341 \e[32m+
\e[m
\e[32m this.bodyEl = this.el.select('.roo-upload-cropbox-body', true).first();
\e[m
5342 \e[32m+
\e[m
\e[32m this.bodyEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
\e[m
5343 \e[32m+
\e[m
\e[41m
\e[m
5344 \e[32m+
\e[m
\e[32m this.selectorEl = this.el.select('.roo-upload-cropbox-selector', true).first();
\e[m
5345 \e[32m+
\e[m
\e[32m this.selectorEl.hide();
\e[m
5346 \e[32m+
\e[m
\e[41m
\e[m
5347 \e[32m+
\e[m
\e[32m this.previewEl = this.el.select('.roo-upload-cropbox-preview', true).first();
\e[m
5348 \e[32m+
\e[m
\e[32m this.previewEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
\e[m
5349 \e[32m+
\e[m
\e[41m
\e[m
5350 \e[32m+
\e[m
\e[32m this.thumbEl = this.el.select('.roo-upload-cropbox-thumb', true).first();
\e[m
5351 \e[32m+
\e[m
\e[32m this.thumbEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
\e[m
5352 \e[32m+
\e[m
\e[32m this.thumbEl.hide();
\e[m
5353 \e[32m+
\e[m
\e[41m
\e[m
5354 \e[32m+
\e[m
\e[32m this.notifyEl = this.el.select('.roo-upload-cropbox-empty-notify', true).first();
\e[m
5355 \e[32m+
\e[m
\e[32m this.notifyEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
\e[m
5356 \e[32m+
\e[m
\e[41m
\e[m
5357 \e[32m+
\e[m
\e[32m this.errorEl = this.el.select('.roo-upload-cropbox-error-notify', true).first();
\e[m
5358 \e[32m+
\e[m
\e[32m this.errorEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
\e[m
5359 \e[32m+
\e[m
\e[32m this.errorEl.hide();
\e[m
5360 \e[32m+
\e[m
\e[41m
\e[m
5361 \e[32m+
\e[m
\e[32m this.footerEl = this.el.select('.roo-upload-cropbox-footer', true).first();
\e[m
5362 \e[32m+
\e[m
\e[32m this.footerEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
\e[m
5363 \e[32m+
\e[m
\e[32m this.footerEl.hide();
\e[m
5364 \e[32m+
\e[m
\e[41m
\e[m
5365 \e[32m+
\e[m
\e[32m this.setThumbBoxSize();
\e[m
5366 \e[32m+
\e[m
\e[41m
\e[m
5367 \e[32m+
\e[m
\e[32m this.bind();
\e[m
5368 \e[32m+
\e[m
\e[41m
\e[m
5369 \e[32m+
\e[m
\e[32m this.resize();
\e[m
5370 \e[32m+
\e[m
\e[41m
\e[m
5371 \e[32m+
\e[m
\e[32m this.fireEvent('initial', this);
\e[m
5372 \e[32m+
\e[m
\e[32m },
\e[m
5374 \e[32m+
\e[m
\e[32m bind : function()
\e[m
5375 \e[32m+
\e[m
\e[32m {
\e[m
5376 \e[32m+
\e[m
\e[32m var _this = this;
\e[m
5377 \e[32m+
\e[m
\e[41m
\e[m
5378 \e[32m+
\e[m
\e[32m window.addEventListener("resize", function() { _this.resize(); } );
\e[m
5379 \e[32m+
\e[m
\e[41m
\e[m
5380 \e[32m+
\e[m
\e[32m this.bodyEl.on('click', this.beforeSelectFile, this);
\e[m
5381 \e[32m+
\e[m
\e[41m
\e[m
5382 \e[32m+
\e[m
\e[32m if(Roo.isTouch){
\e[m
5383 \e[32m+
\e[m
\e[32m this.bodyEl.on('touchstart', this.onTouchStart, this);
\e[m
5384 \e[32m+
\e[m
\e[32m this.bodyEl.on('touchmove', this.onTouchMove, this);
\e[m
5385 \e[32m+
\e[m
\e[32m this.bodyEl.on('touchend', this.onTouchEnd, this);
\e[m
5386 \e[32m+
\e[m
\e[32m }
\e[m
5387 \e[32m+
\e[m
\e[41m
\e[m
5388 \e[32m+
\e[m
\e[32m if(!Roo.isTouch){
\e[m
5389 \e[32m+
\e[m
\e[32m this.bodyEl.on('mousedown', this.onMouseDown, this);
\e[m
5390 \e[32m+
\e[m
\e[32m this.bodyEl.on('mousemove', this.onMouseMove, this);
\e[m
5391 \e[32m+
\e[m
\e[32m var mousewheel = (/Firefox/i.test(navigator.userAgent))? 'DOMMouseScroll' : 'mousewheel';
\e[m
5392 \e[32m+
\e[m
\e[32m this.bodyEl.on(mousewheel, this.onMouseWheel, this);
\e[m
5393 \e[32m+
\e[m
\e[32m Roo.get(document).on('mouseup', this.onMouseUp, this);
\e[m
5394 \e[32m+
\e[m
\e[32m }
\e[m
5395 \e[32m+
\e[m
\e[41m
\e[m
5396 \e[32m+
\e[m
\e[32m this.selectorEl.on('change', this.onFileSelected, this);
\e[m
5397 \e[32m+
\e[m
\e[32m },
\e[m
5398 \e[32m+
\e[m
\e[41m
\e[m
5399 \e[32m+
\e[m
\e[32m reset : function()
\e[m
5400 \e[32m+
\e[m
\e[32m {
\e[m
\e[41m
\e[m
5401 \e[32m+
\e[m
\e[32m this.scale = 0;
\e[m
5402 \e[32m+
\e[m
\e[32m this.baseScale = 1;
\e[m
5403 \e[32m+
\e[m
\e[32m this.rotate = 0;
\e[m
5404 \e[32m+
\e[m
\e[32m this.baseRotate = 1;
\e[m
5405 \e[32m+
\e[m
\e[32m this.dragable = false;
\e[m
5406 \e[32m+
\e[m
\e[32m this.pinching = false;
\e[m
5407 \e[32m+
\e[m
\e[32m this.mouseX = 0;
\e[m
5408 \e[32m+
\e[m
\e[32m this.mouseY = 0;
\e[m
5409 \e[32m+
\e[m
\e[32m this.cropData = false;
\e[m
5410 \e[32m+
\e[m
\e[32m this.notifyEl.dom.innerHTML = this.emptyText;
\e[m
5411 \e[32m+
\e[m
\e[41m
\e[m
5412 \e[32m+
\e[m
\e[32m // this.selectorEl.dom.value = '';
\e[m
5413 \e[32m+
\e[m
\e[41m
\e[m
5414 \e[32m+
\e[m
\e[32m },
\e[m
5415 \e[32m+
\e[m
\e[41m
\e[m
5416 \e[32m+
\e[m
\e[32m resize : function()
\e[m
5417 \e[32m+
\e[m
\e[32m {
\e[m
5418 \e[32m+
\e[m
\e[32m if(this.fireEvent('resize', this) != false){
\e[m
5419 \e[32m+
\e[m
\e[32m this.setThumbBoxPosition();
\e[m
5420 \e[32m+
\e[m
\e[32m this.setCanvasPosition();
\e[m
5421 \e[32m+
\e[m
\e[32m }
\e[m
5422 \e[32m+
\e[m
\e[32m },
\e[m
5423 \e[32m+
\e[m
\e[41m
\e[m
5424 \e[32m+
\e[m
\e[32m onFooterButtonClick : function(e, el, o, type)
\e[m
5425 \e[32m+
\e[m
\e[32m {
\e[m
5426 \e[32m+
\e[m
\e[32m switch (type) {
\e[m
5427 \e[32m+
\e[m
\e[32m case 'rotate-left' :
\e[m
5428 \e[32m+
\e[m
\e[32m this.onRotateLeft(e);
\e[m
5429 \e[32m+
\e[m
\e[32m break;
\e[m
5430 \e[32m+
\e[m
\e[32m case 'rotate-right' :
\e[m
5431 \e[32m+
\e[m
\e[32m this.onRotateRight(e);
\e[m
5432 \e[32m+
\e[m
\e[32m break;
\e[m
5433 \e[32m+
\e[m
\e[32m case 'picture' :
\e[m
5434 \e[32m+
\e[m
\e[32m this.beforeSelectFile(e);
\e[m
5435 \e[32m+
\e[m
\e[32m break;
\e[m
5436 \e[32m+
\e[m
\e[32m case 'trash' :
\e[m
5437 \e[32m+
\e[m
\e[32m this.trash(e);
\e[m
5438 \e[32m+
\e[m
\e[32m break;
\e[m
5439 \e[32m+
\e[m
\e[32m case 'crop' :
\e[m
5440 \e[32m+
\e[m
\e[32m this.crop(e);
\e[m
5441 \e[32m+
\e[m
\e[32m break;
\e[m
5442 \e[32m+
\e[m
\e[32m case 'download' :
\e[m
5443 \e[32m+
\e[m
\e[32m this.download(e);
\e[m
5444 \e[32m+
\e[m
\e[32m break;
\e[m
5445 \e[32m+
\e[m
\e[32m default :
\e[m
5446 \e[32m+
\e[m
\e[32m break;
\e[m
5447 \e[32m+
\e[m
\e[32m }
\e[m
5448 \e[32m+
\e[m
\e[41m
\e[m
5449 \e[32m+
\e[m
\e[32m this.fireEvent('footerbuttonclick', this, type);
\e[m
5450 \e[32m+
\e[m
\e[32m },
\e[m
5451 \e[32m+
\e[m
\e[41m
\e[m
5452 \e[32m+
\e[m
\e[32m beforeSelectFile : function(e)
\e[m
5453 \e[32m+
\e[m
\e[32m {
\e[m
5454 \e[32m+
\e[m
\e[32m e.preventDefault();
\e[m
5455 \e[32m+
\e[m
\e[41m
\e[m
5456 \e[32m+
\e[m
\e[32m if(this.fireEvent('beforeselectfile', this) != false){
\e[m
5457 \e[32m+
\e[m
\e[32m this.selectorEl.dom.click();
\e[m
5458 \e[32m+
\e[m
\e[32m }
\e[m
5459 \e[32m+
\e[m
\e[32m },
\e[m
5460 \e[32m+
\e[m
\e[41m
\e[m
5461 \e[32m+
\e[m
\e[32m onFileSelected : function(e)
\e[m
5462 \e[32m+
\e[m
\e[32m {
\e[m
5463 \e[32m+
\e[m
\e[32m e.preventDefault();
\e[m
5464 \e[32m+
\e[m
\e[41m
\e[m
5465 \e[32m+
\e[m
\e[32m if(typeof(this.selectorEl.dom.files) == 'undefined' || !this.selectorEl.dom.files.length){
\e[m
5466 \e[32m+
\e[m
\e[32m return;
\e[m
5467 \e[32m+
\e[m
\e[32m }
\e[m
5468 \e[32m+
\e[m
\e[41m
\e[m
5469 \e[32m+
\e[m
\e[32m var file = this.selectorEl.dom.files[0];
\e[m
5470 \e[32m+
\e[m
\e[41m
\e[m
5471 \e[32m+
\e[m
\e[32m if(this.fireEvent('inspect', this, file) != false){
\e[m
5472 \e[32m+
\e[m
\e[32m this.prepare(file);
\e[m
5473 \e[32m+
\e[m
\e[32m }
\e[m
5474 \e[32m+
\e[m
\e[41m
\e[m
5475 \e[32m+
\e[m
\e[32m },
\e[m
5476 \e[32m+
\e[m
\e[41m
\e[m
5477 \e[32m+
\e[m
\e[32m trash : function(e)
\e[m
5478 \e[32m+
\e[m
\e[32m {
\e[m
5479 \e[32m+
\e[m
\e[32m this.fireEvent('trash', this);
\e[m
5480 \e[32m+
\e[m
\e[32m },
\e[m
5481 \e[32m+
\e[m
\e[41m
\e[m
5482 \e[32m+
\e[m
\e[32m download : function(e)
\e[m
5483 \e[32m+
\e[m
\e[32m {
\e[m
5484 \e[32m+
\e[m
\e[32m this.fireEvent('download', this);
\e[m
5485 \e[32m+
\e[m
\e[32m },
\e[m
5486 \e[32m+
\e[m
\e[41m
\e[m
5487 \e[32m+
\e[m
\e[32m loadCanvas : function(src)
\e[m
5488 \e[32m+
\e[m
\e[32m {
\e[m
\e[41m
\e[m
5489 \e[32m+
\e[m
\e[32m if(this.fireEvent('beforeloadcanvas', this, src) != false){
\e[m
5490 \e[32m+
\e[m
\e[41m
\e[m
5491 \e[32m+
\e[m
\e[32m this.reset();
\e[m
5492 \e[32m+
\e[m
\e[41m
\e[m
5493 \e[32m+
\e[m
\e[32m this.imageEl = document.createElement('img');
\e[m
5494 \e[32m+
\e[m
\e[41m
\e[m
5495 \e[32m+
\e[m
\e[32m var _this = this;
\e[m
5496 \e[32m+
\e[m
\e[41m
\e[m
5497 \e[32m+
\e[m
\e[32m this.imageEl.addEventListener("load", function(){ _this.onLoadCanvas(); });
\e[m
5498 \e[32m+
\e[m
\e[41m
\e[m
5499 \e[32m+
\e[m
\e[32m this.imageEl.src = src;
\e[m
5500 \e[32m+
\e[m
\e[32m }
\e[m
5501 \e[32m+
\e[m
\e[32m },
\e[m
5502 \e[32m+
\e[m
\e[41m
\e[m
5503 \e[32m+
\e[m
\e[32m onLoadCanvas : function()
\e[m
5504 \e[32m+
\e[m
\e[32m {
\e[m
\e[41m
\e[m
5505 \e[32m+
\e[m
\e[32m this.imageEl.OriginWidth = this.imageEl.naturalWidth || this.imageEl.width;
\e[m
5506 \e[32m+
\e[m
\e[32m this.imageEl.OriginHeight = this.imageEl.naturalHeight || this.imageEl.height;
\e[m
5508 \e[32m+
\e[m
\e[32m if(this.fireEvent('loadcanvas', this, this.imageEl) != false){
\e[m
5509 \e[32m+
\e[m
\e[41m
\e[m
5510 \e[32m+
\e[m
\e[32m this.bodyEl.un('click', this.beforeSelectFile, this);
\e[m
5511 \e[32m+
\e[m
\e[41m
\e[m
5512 \e[32m+
\e[m
\e[32m this.notifyEl.hide();
\e[m
5513 \e[32m+
\e[m
\e[32m this.thumbEl.show();
\e[m
5514 \e[32m+
\e[m
\e[32m this.footerEl.show();
\e[m
5515 \e[32m+
\e[m
\e[41m
\e[m
5516 \e[32m+
\e[m
\e[32m this.baseRotateLevel();
\e[m
5517 \e[32m+
\e[m
\e[41m
\e[m
5518 \e[32m+
\e[m
\e[32m if(this.isDocument){
\e[m
5519 \e[32m+
\e[m
\e[32m this.setThumbBoxSize();
\e[m
5520 \e[32m+
\e[m
\e[32m }
\e[m
5521 \e[32m+
\e[m
\e[41m
\e[m
5522 \e[32m+
\e[m
\e[32m this.setThumbBoxPosition();
\e[m
5523 \e[32m+
\e[m
\e[41m
\e[m
5524 \e[32m+
\e[m
\e[32m this.baseScaleLevel();
\e[m
5525 \e[32m+
\e[m
\e[41m
\e[m
5526 \e[32m+
\e[m
\e[32m this.draw();
\e[m
5527 \e[32m+
\e[m
\e[41m
\e[m
5528 \e[32m+
\e[m
\e[32m this.resize();
\e[m
5529 \e[32m+
\e[m
\e[41m
\e[m
5530 \e[32m+
\e[m
\e[32m this.canvasLoaded = true;
\e[m
5531 \e[32m+
\e[m
\e[41m
\e[m
5532 \e[32m+
\e[m
\e[32m }
\e[m
5533 \e[32m+
\e[m
\e[41m
\e[m
5534 \e[32m+
\e[m
\e[32m if(this.loadMask){
\e[m
5535 \e[32m+
\e[m
\e[32m this.maskEl.unmask();
\e[m
5536 \e[32m+
\e[m
\e[32m }
\e[m
5537 \e[32m+
\e[m
\e[41m
\e[m
5538 \e[32m+
\e[m
\e[32m },
\e[m
5539 \e[32m+
\e[m
\e[41m
\e[m
5540 \e[32m+
\e[m
\e[32m setCanvasPosition : function()
\e[m
5541 \e[32m+
\e[m
\e[32m {
\e[m
\e[41m
\e[m
5542 \e[32m+
\e[m
\e[32m if(!this.canvasEl){
\e[m
5543 \e[32m+
\e[m
\e[32m return;
\e[m
5544 \e[32m+
\e[m
\e[32m }
\e[m
5545 \e[32m+
\e[m
\e[41m
\e[m
5546 \e[32m+
\e[m
\e[32m var pw = Math.ceil((this.bodyEl.getWidth() - this.canvasEl.width) / 2);
\e[m
5547 \e[32m+
\e[m
\e[32m var ph = Math.ceil((this.bodyEl.getHeight() - this.canvasEl.height) / 2);
\e[m
5548 \e[32m+
\e[m
\e[41m
\e[m
5549 \e[32m+
\e[m
\e[32m this.previewEl.setLeft(pw);
\e[m
5550 \e[32m+
\e[m
\e[32m this.previewEl.setTop(ph);
\e[m
5551 \e[32m+
\e[m
\e[41m
\e[m
5552 \e[32m+
\e[m
\e[32m },
\e[m
5553 \e[32m+
\e[m
\e[41m
\e[m
5554 \e[32m+
\e[m
\e[32m onMouseDown : function(e)
\e[m
5555 \e[32m+
\e[m
\e[32m {
\e[m
\e[41m
\e[m
5556 \e[32m+
\e[m
\e[32m e.stopEvent();
\e[m
5557 \e[32m+
\e[m
\e[41m
\e[m
5558 \e[32m+
\e[m
\e[32m this.dragable = true;
\e[m
5559 \e[32m+
\e[m
\e[32m this.pinching = false;
\e[m
5560 \e[32m+
\e[m
\e[41m
\e[m
5561 \e[32m+
\e[m
\e[32m if(this.isDocument && (this.canvasEl.width < this.thumbEl.getWidth() || this.canvasEl.height < this.thumbEl.getHeight())){
\e[m
5562 \e[32m+
\e[m
\e[32m this.dragable = false;
\e[m
5563 \e[32m+
\e[m
\e[32m return;
\e[m
5564 \e[32m+
\e[m
\e[32m }
\e[m
5565 \e[32m+
\e[m
\e[41m
\e[m
5566 \e[32m+
\e[m
\e[32m this.mouseX = Roo.isTouch ? e.browserEvent.touches[0].pageX : e.getPageX();
\e[m
5567 \e[32m+
\e[m
\e[32m this.mouseY = Roo.isTouch ? e.browserEvent.touches[0].pageY : e.getPageY();
\e[m
5568 \e[32m+
\e[m
\e[41m
\e[m
5569 \e[32m+
\e[m
\e[32m },
\e[m
5570 \e[32m+
\e[m
\e[41m
\e[m
5571 \e[32m+
\e[m
\e[32m onMouseMove : function(e)
\e[m
5572 \e[32m+
\e[m
\e[32m {
\e[m
\e[41m
\e[m
5573 \e[32m+
\e[m
\e[32m e.stopEvent();
\e[m
5574 \e[32m+
\e[m
\e[41m
\e[m
5575 \e[32m+
\e[m
\e[32m if(!this.canvasLoaded){
\e[m
5576 \e[32m+
\e[m
\e[32m return;
\e[m
5577 \e[32m+
\e[m
\e[32m }
\e[m
5578 \e[32m+
\e[m
\e[41m
\e[m
5579 \e[32m+
\e[m
\e[32m if (!this.dragable){
\e[m
5580 \e[32m+
\e[m
\e[32m return;
\e[m
5581 \e[32m+
\e[m
\e[32m }
\e[m
5582 \e[32m+
\e[m
\e[41m
\e[m
5583 \e[32m+
\e[m
\e[32m var minX = Math.ceil(this.thumbEl.getLeft(true));
\e[m
5584 \e[32m+
\e[m
\e[32m var minY = Math.ceil(this.thumbEl.getTop(true));
\e[m
5585 \e[32m+
\e[m
\e[41m
\e[m
5586 \e[32m+
\e[m
\e[32m var maxX = Math.ceil(minX + this.thumbEl.getWidth() - this.canvasEl.width);
\e[m
5587 \e[32m+
\e[m
\e[32m var maxY = Math.ceil(minY + this.thumbEl.getHeight() - this.canvasEl.height);
\e[m
5588 \e[32m+
\e[m
\e[41m
\e[m
5589 \e[32m+
\e[m
\e[32m var x = Roo.isTouch ? e.browserEvent.touches[0].pageX : e.getPageX();
\e[m
5590 \e[32m+
\e[m
\e[32m var y = Roo.isTouch ? e.browserEvent.touches[0].pageY : e.getPageY();
\e[m
5591 \e[32m+
\e[m
\e[41m
\e[m
5592 \e[32m+
\e[m
\e[32m x = x - this.mouseX;
\e[m
5593 \e[32m+
\e[m
\e[32m y = y - this.mouseY;
\e[m
5594 \e[32m+
\e[m
\e[41m
\e[m
5595 \e[32m+
\e[m
\e[32m var bgX = Math.ceil(x + this.previewEl.getLeft(true));
\e[m
5596 \e[32m+
\e[m
\e[32m var bgY = Math.ceil(y + this.previewEl.getTop(true));
\e[m
5597 \e[32m+
\e[m
\e[41m
\e[m
5598 \e[32m+
\e[m
\e[32m bgX = (minX < bgX) ? minX : ((maxX > bgX) ? maxX : bgX);
\e[m
5599 \e[32m+
\e[m
\e[32m bgY = (minY < bgY) ? minY : ((maxY > bgY) ? maxY : bgY);
\e[m
5600 \e[32m+
\e[m
\e[41m
\e[m
5601 \e[32m+
\e[m
\e[32m this.previewEl.setLeft(bgX);
\e[m
5602 \e[32m+
\e[m
\e[32m this.previewEl.setTop(bgY);
\e[m
5603 \e[32m+
\e[m
\e[41m
\e[m
5604 \e[32m+
\e[m
\e[32m this.mouseX = Roo.isTouch ? e.browserEvent.touches[0].pageX : e.getPageX();
\e[m
5605 \e[32m+
\e[m
\e[32m this.mouseY = Roo.isTouch ? e.browserEvent.touches[0].pageY : e.getPageY();
\e[m
5606 \e[32m+
\e[m
\e[32m },
\e[m
5607 \e[32m+
\e[m
\e[41m
\e[m
5608 \e[32m+
\e[m
\e[32m onMouseUp : function(e)
\e[m
5609 \e[32m+
\e[m
\e[32m {
\e[m
\e[41m
\e[m
5610 \e[32m+
\e[m
\e[32m e.stopEvent();
\e[m
5611 \e[32m+
\e[m
\e[41m
\e[m
5612 \e[32m+
\e[m
\e[32m this.dragable = false;
\e[m
5613 \e[32m+
\e[m
\e[32m },
\e[m
5614 \e[32m+
\e[m
\e[41m
\e[m
5615 \e[32m+
\e[m
\e[32m onMouseWheel : function(e)
\e[m
5616 \e[32m+
\e[m
\e[32m {
\e[m
\e[41m
\e[m
5617 \e[32m+
\e[m
\e[32m e.stopEvent();
\e[m
5618 \e[32m+
\e[m
\e[41m
\e[m
5619 \e[32m+
\e[m
\e[32m this.startScale = this.scale;
\e[m
5620 \e[32m+
\e[m
\e[41m
\e[m
5621 \e[32m+
\e[m
\e[32m this.scale = (e.getWheelDelta() == 1) ? (this.scale + 1) : (this.scale - 1);
\e[m
5622 \e[32m+
\e[m
\e[41m
\e[m
5623 \e[32m+
\e[m
\e[32m if(!this.zoomable()){
\e[m
5624 \e[32m+
\e[m
\e[32m this.scale = this.startScale;
\e[m
5625 \e[32m+
\e[m
\e[32m return;
\e[m
5626 \e[32m+
\e[m
\e[32m }
\e[m
5627 \e[32m+
\e[m
\e[41m
\e[m
5628 \e[32m+
\e[m
\e[32m this.draw();
\e[m
5629 \e[32m+
\e[m
\e[41m
\e[m
5630 \e[32m+
\e[m
\e[32m return;
\e[m
5631 \e[32m+
\e[m
\e[32m },
\e[m
5632 \e[32m+
\e[m
\e[41m
\e[m
5633 \e[32m+
\e[m
\e[32m zoomable : function()
\e[m
5634 \e[32m+
\e[m
\e[32m {
\e[m
5635 \e[32m+
\e[m
\e[32m var minScale = this.thumbEl.getWidth() / this.minWidth;
\e[m
5636 \e[32m+
\e[m
\e[41m
\e[m
5637 \e[32m+
\e[m
\e[32m if(this.minWidth < this.minHeight){
\e[m
5638 \e[32m+
\e[m
\e[32m minScale = this.thumbEl.getHeight() / this.minHeight;
\e[m
5639 \e[32m+
\e[m
\e[32m }
\e[m
5640 \e[32m+
\e[m
\e[41m
\e[m
5641 \e[32m+
\e[m
\e[32m var width = Math.ceil(this.imageEl.OriginWidth * this.getScaleLevel() / minScale);
\e[m
5642 \e[32m+
\e[m
\e[32m var height = Math.ceil(this.imageEl.OriginHeight * this.getScaleLevel() / minScale);
\e[m
5643 \e[32m+
\e[m
\e[41m
\e[m
5644 \e[32m+
\e[m
\e[32m if(
\e[m
5645 \e[32m+
\e[m
\e[32m this.isDocument &&
\e[m
5646 \e[32m+
\e[m
\e[32m (this.rotate == 0 || this.rotate == 180) &&
\e[m
\e[41m
\e[m
5647 \e[32m+
\e[m
\e[32m (
\e[m
5648 \e[32m+
\e[m
\e[32m width > this.imageEl.OriginWidth ||
\e[m
\e[41m
\e[m
5649 \e[32m+
\e[m
\e[32m height > this.imageEl.OriginHeight ||
\e[m
5650 \e[32m+
\e[m
\e[32m (width < this.minWidth && height < this.minHeight)
\e[m
5651 \e[32m+
\e[m
\e[32m )
\e[m
5652 \e[32m+
\e[m
\e[32m ){
\e[m
5653 \e[32m+
\e[m
\e[32m return false;
\e[m
5654 \e[32m+
\e[m
\e[32m }
\e[m
5655 \e[32m+
\e[m
\e[41m
\e[m
5656 \e[32m+
\e[m
\e[32m if(
\e[m
5657 \e[32m+
\e[m
\e[32m this.isDocument &&
\e[m
5658 \e[32m+
\e[m
\e[32m (this.rotate == 90 || this.rotate == 270) &&
\e[m
\e[41m
\e[m
5659 \e[32m+
\e[m
\e[32m (
\e[m
5660 \e[32m+
\e[m
\e[32m width > this.imageEl.OriginWidth ||
\e[m
\e[41m
\e[m
5661 \e[32m+
\e[m
\e[32m height > this.imageEl.OriginHeight ||
\e[m
5662 \e[32m+
\e[m
\e[32m (width < this.minHeight && height < this.minWidth)
\e[m
5663 \e[32m+
\e[m
\e[32m )
\e[m
5664 \e[32m+
\e[m
\e[32m ){
\e[m
5665 \e[32m+
\e[m
\e[32m return false;
\e[m
5666 \e[32m+
\e[m
\e[32m }
\e[m
5667 \e[32m+
\e[m
\e[41m
\e[m
5668 \e[32m+
\e[m
\e[32m if(
\e[m
5669 \e[32m+
\e[m
\e[32m !this.isDocument &&
\e[m
5670 \e[32m+
\e[m
\e[32m (this.rotate == 0 || this.rotate == 180) &&
\e[m
\e[41m
\e[m
5671 \e[32m+
\e[m
\e[32m (
\e[m
5672 \e[32m+
\e[m
\e[32m width < this.minWidth ||
\e[m
\e[41m
\e[m
5673 \e[32m+
\e[m
\e[32m width > this.imageEl.OriginWidth ||
\e[m
\e[41m
\e[m
5674 \e[32m+
\e[m
\e[32m height < this.minHeight ||
\e[m
\e[41m
\e[m
5675 \e[32m+
\e[m
\e[32m height > this.imageEl.OriginHeight
\e[m
5676 \e[32m+
\e[m
\e[32m )
\e[m
5677 \e[32m+
\e[m
\e[32m ){
\e[m
5678 \e[32m+
\e[m
\e[32m return false;
\e[m
5679 \e[32m+
\e[m
\e[32m }
\e[m
5680 \e[32m+
\e[m
\e[41m
\e[m
5681 \e[32m+
\e[m
\e[32m if(
\e[m
5682 \e[32m+
\e[m
\e[32m !this.isDocument &&
\e[m
5683 \e[32m+
\e[m
\e[32m (this.rotate == 90 || this.rotate == 270) &&
\e[m
\e[41m
\e[m
5684 \e[32m+
\e[m
\e[32m (
\e[m
5685 \e[32m+
\e[m
\e[32m width < this.minHeight ||
\e[m
\e[41m
\e[m
5686 \e[32m+
\e[m
\e[32m width > this.imageEl.OriginWidth ||
\e[m
\e[41m
\e[m
5687 \e[32m+
\e[m
\e[32m height < this.minWidth ||
\e[m
\e[41m
\e[m
5688 \e[32m+
\e[m
\e[32m height > this.imageEl.OriginHeight
\e[m
5689 \e[32m+
\e[m
\e[32m )
\e[m
5690 \e[32m+
\e[m
\e[32m ){
\e[m
5691 \e[32m+
\e[m
\e[32m return false;
\e[m
5692 \e[32m+
\e[m
\e[32m }
\e[m
5693 \e[32m+
\e[m
\e[41m
\e[m
5694 \e[32m+
\e[m
\e[32m return true;
\e[m
5695 \e[32m+
\e[m
\e[41m
\e[m
5696 \e[32m+
\e[m
\e[32m },
\e[m
5697 \e[32m+
\e[m
\e[41m
\e[m
5698 \e[32m+
\e[m
\e[32m onRotateLeft : function(e)
\e[m
5699 \e[32m+
\e[m
\e[32m {
\e[m
\e[41m
\e[m
5700 \e[32m+
\e[m
\e[32m if(!this.isDocument && (this.canvasEl.height < this.thumbEl.getWidth() || this.canvasEl.width < this.thumbEl.getHeight())){
\e[m
5701 \e[32m+
\e[m
\e[41m
\e[m
5702 \e[32m+
\e[m
\e[32m var minScale = this.thumbEl.getWidth() / this.minWidth;
\e[m
5703 \e[32m+
\e[m
\e[41m
\e[m
5704 \e[32m+
\e[m
\e[32m var bw = Math.ceil(this.canvasEl.width / this.getScaleLevel());
\e[m
5705 \e[32m+
\e[m
\e[32m var bh = Math.ceil(this.canvasEl.height / this.getScaleLevel());
\e[m
5706 \e[32m+
\e[m
\e[41m
\e[m
5707 \e[32m+
\e[m
\e[32m this.startScale = this.scale;
\e[m
5708 \e[32m+
\e[m
\e[41m
\e[m
5709 \e[32m+
\e[m
\e[32m while (this.getScaleLevel() < minScale){
\e[m
5710 \e[32m+
\e[m
\e[41m
\e[m
5711 \e[32m+
\e[m
\e[32m this.scale = this.scale + 1;
\e[m
5712 \e[32m+
\e[m
\e[41m
\e[m
5713 \e[32m+
\e[m
\e[32m if(!this.zoomable()){
\e[m
5714 \e[32m+
\e[m
\e[32m break;
\e[m
5715 \e[32m+
\e[m
\e[32m }
\e[m
5716 \e[32m+
\e[m
\e[41m
\e[m
5717 \e[32m+
\e[m
\e[32m if(
\e[m
5718 \e[32m+
\e[m
\e[32m Math.ceil(bw * this.getScaleLevel()) < this.thumbEl.getHeight() ||
\e[m
5719 \e[32m+
\e[m
\e[32m Math.ceil(bh * this.getScaleLevel()) < this.thumbEl.getWidth()
\e[m
5720 \e[32m+
\e[m
\e[32m ){
\e[m
5721 \e[32m+
\e[m
\e[32m continue;
\e[m
5722 \e[32m+
\e[m
\e[32m }
\e[m
5723 \e[32m+
\e[m
\e[41m
\e[m
5724 \e[32m+
\e[m
\e[32m this.rotate = (this.rotate < 90) ? 270 : this.rotate - 90;
\e[m
5726 \e[32m+
\e[m
\e[32m this.draw();
\e[m
5727 \e[32m+
\e[m
\e[41m
\e[m
5728 \e[32m+
\e[m
\e[32m return;
\e[m
5729 \e[32m+
\e[m
\e[32m }
\e[m
5730 \e[32m+
\e[m
\e[41m
\e[m
5731 \e[32m+
\e[m
\e[32m this.scale = this.startScale;
\e[m
5732 \e[32m+
\e[m
\e[41m
\e[m
5733 \e[32m+
\e[m
\e[32m this.onRotateFail();
\e[m
5734 \e[32m+
\e[m
\e[41m
\e[m
5735 \e[32m+
\e[m
\e[32m return false;
\e[m
5736 \e[32m+
\e[m
\e[32m }
\e[m
5737 \e[32m+
\e[m
\e[41m
\e[m
5738 \e[32m+
\e[m
\e[32m this.rotate = (this.rotate < 90) ? 270 : this.rotate - 90;
\e[m
5740 \e[32m+
\e[m
\e[32m if(this.isDocument){
\e[m
5741 \e[32m+
\e[m
\e[32m this.setThumbBoxSize();
\e[m
5742 \e[32m+
\e[m
\e[32m this.setThumbBoxPosition();
\e[m
5743 \e[32m+
\e[m
\e[32m this.setCanvasPosition();
\e[m
5744 \e[32m+
\e[m
\e[32m }
\e[m
5745 \e[32m+
\e[m
\e[41m
\e[m
5746 \e[32m+
\e[m
\e[32m this.draw();
\e[m
5747 \e[32m+
\e[m
\e[41m
\e[m
5748 \e[32m+
\e[m
\e[32m this.fireEvent('rotate', this, 'left');
\e[m
5749 \e[32m+
\e[m
\e[41m
\e[m
5750 \e[32m+
\e[m
\e[32m },
\e[m
5751 \e[32m+
\e[m
\e[41m
\e[m
5752 \e[32m+
\e[m
\e[32m onRotateRight : function(e)
\e[m
5753 \e[32m+
\e[m
\e[32m {
\e[m
5754 \e[32m+
\e[m
\e[32m if(!this.isDocument && (this.canvasEl.height < this.thumbEl.getWidth() || this.canvasEl.width < this.thumbEl.getHeight())){
\e[m
5755 \e[32m+
\e[m
\e[41m
\e[m
5756 \e[32m+
\e[m
\e[32m var minScale = this.thumbEl.getWidth() / this.minWidth;
\e[m
5757 \e[32m+
\e[m
\e[41m
\e[m
5758 \e[32m+
\e[m
\e[32m var bw = Math.ceil(this.canvasEl.width / this.getScaleLevel());
\e[m
5759 \e[32m+
\e[m
\e[32m var bh = Math.ceil(this.canvasEl.height / this.getScaleLevel());
\e[m
5760 \e[32m+
\e[m
\e[41m
\e[m
5761 \e[32m+
\e[m
\e[32m this.startScale = this.scale;
\e[m
5762 \e[32m+
\e[m
\e[41m
\e[m
5763 \e[32m+
\e[m
\e[32m while (this.getScaleLevel() < minScale){
\e[m
5764 \e[32m+
\e[m
\e[41m
\e[m
5765 \e[32m+
\e[m
\e[32m this.scale = this.scale + 1;
\e[m
5766 \e[32m+
\e[m
\e[41m
\e[m
5767 \e[32m+
\e[m
\e[32m if(!this.zoomable()){
\e[m
5768 \e[32m+
\e[m
\e[32m break;
\e[m
5769 \e[32m+
\e[m
\e[32m }
\e[m
5770 \e[32m+
\e[m
\e[41m
\e[m
5771 \e[32m+
\e[m
\e[32m if(
\e[m
5772 \e[32m+
\e[m
\e[32m Math.ceil(bw * this.getScaleLevel()) < this.thumbEl.getHeight() ||
\e[m
5773 \e[32m+
\e[m
\e[32m Math.ceil(bh * this.getScaleLevel()) < this.thumbEl.getWidth()
\e[m
5774 \e[32m+
\e[m
\e[32m ){
\e[m
5775 \e[32m+
\e[m
\e[32m continue;
\e[m
5776 \e[32m+
\e[m
\e[32m }
\e[m
5777 \e[32m+
\e[m
\e[41m
\e[m
5778 \e[32m+
\e[m
\e[32m this.rotate = (this.rotate > 180) ? 0 : this.rotate + 90;
\e[m
5780 \e[32m+
\e[m
\e[32m this.draw();
\e[m
5781 \e[32m+
\e[m
\e[41m
\e[m
5782 \e[32m+
\e[m
\e[32m return;
\e[m
5783 \e[32m+
\e[m
\e[32m }
\e[m
5784 \e[32m+
\e[m
\e[41m
\e[m
5785 \e[32m+
\e[m
\e[32m this.scale = this.startScale;
\e[m
5786 \e[32m+
\e[m
\e[41m
\e[m
5787 \e[32m+
\e[m
\e[32m this.onRotateFail();
\e[m
5788 \e[32m+
\e[m
\e[41m
\e[m
5789 \e[32m+
\e[m
\e[32m return false;
\e[m
5790 \e[32m+
\e[m
\e[32m }
\e[m
5791 \e[32m+
\e[m
\e[41m
\e[m
5792 \e[32m+
\e[m
\e[32m this.rotate = (this.rotate > 180) ? 0 : this.rotate + 90;
\e[m
5794 \e[32m+
\e[m
\e[32m if(this.isDocument){
\e[m
5795 \e[32m+
\e[m
\e[32m this.setThumbBoxSize();
\e[m
5796 \e[32m+
\e[m
\e[32m this.setThumbBoxPosition();
\e[m
5797 \e[32m+
\e[m
\e[32m this.setCanvasPosition();
\e[m
5798 \e[32m+
\e[m
\e[32m }
\e[m
5799 \e[32m+
\e[m
\e[41m
\e[m
5800 \e[32m+
\e[m
\e[32m this.draw();
\e[m
5801 \e[32m+
\e[m
\e[41m
\e[m
5802 \e[32m+
\e[m
\e[32m this.fireEvent('rotate', this, 'right');
\e[m
5803 \e[32m+
\e[m
\e[32m },
\e[m
5804 \e[32m+
\e[m
\e[41m
\e[m
5805 \e[32m+
\e[m
\e[32m onRotateFail : function()
\e[m
5806 \e[32m+
\e[m
\e[32m {
\e[m
5807 \e[32m+
\e[m
\e[32m this.errorEl.show(true);
\e[m
5808 \e[32m+
\e[m
\e[41m
\e[m
5809 \e[32m+
\e[m
\e[32m var _this = this;
\e[m
5810 \e[32m+
\e[m
\e[41m
\e[m
5811 \e[32m+
\e[m
\e[32m (function() { _this.errorEl.hide(true); }).defer(this.errorTimeout);
\e[m
5812 \e[32m+
\e[m
\e[32m },
\e[m
5813 \e[32m+
\e[m
\e[41m
\e[m
5814 \e[32m+
\e[m
\e[32m draw : function()
\e[m
5815 \e[32m+
\e[m
\e[32m {
\e[m
5816 \e[32m+
\e[m
\e[32m this.previewEl.dom.innerHTML = '';
\e[m
5817 \e[32m+
\e[m
\e[41m
\e[m
5818 \e[32m+
\e[m
\e[32m var canvasEl = document.createElement("canvas");
\e[m
5819 \e[32m+
\e[m
\e[41m
\e[m
5820 \e[32m+
\e[m
\e[32m var contextEl = canvasEl.getContext("2d");
\e[m
5821 \e[32m+
\e[m
\e[41m
\e[m
5822 \e[32m+
\e[m
\e[32m canvasEl.width = this.imageEl.OriginWidth * this.getScaleLevel();
\e[m
5823 \e[32m+
\e[m
\e[32m canvasEl.height = this.imageEl.OriginWidth * this.getScaleLevel();
\e[m
5824 \e[32m+
\e[m
\e[32m var center = this.imageEl.OriginWidth / 2;
\e[m
5825 \e[32m+
\e[m
\e[41m
\e[m
5826 \e[32m+
\e[m
\e[32m if(this.imageEl.OriginWidth < this.imageEl.OriginHeight){
\e[m
5827 \e[32m+
\e[m
\e[32m canvasEl.width = this.imageEl.OriginHeight * this.getScaleLevel();
\e[m
5828 \e[32m+
\e[m
\e[32m canvasEl.height = this.imageEl.OriginHeight * this.getScaleLevel();
\e[m
5829 \e[32m+
\e[m
\e[32m center = this.imageEl.OriginHeight / 2;
\e[m
5830 \e[32m+
\e[m
\e[32m }
\e[m
5831 \e[32m+
\e[m
\e[41m
\e[m
5832 \e[32m+
\e[m
\e[32m contextEl.scale(this.getScaleLevel(), this.getScaleLevel());
\e[m
5833 \e[32m+
\e[m
\e[41m
\e[m
5834 \e[32m+
\e[m
\e[32m contextEl.translate(center, center);
\e[m
5835 \e[32m+
\e[m
\e[32m contextEl.rotate(this.rotate * Math.PI / 180);
\e[m
5837 \e[32m+
\e[m
\e[32m contextEl.drawImage(this.imageEl, 0, 0, this.imageEl.OriginWidth, this.imageEl.OriginHeight, center * -1, center * -1, this.imageEl.OriginWidth, this.imageEl.OriginHeight);
\e[m
5838 \e[32m+
\e[m
\e[41m
\e[m
5839 \e[32m+
\e[m
\e[32m this.canvasEl = document.createElement("canvas");
\e[m
5840 \e[32m+
\e[m
\e[41m
\e[m
5841 \e[32m+
\e[m
\e[32m this.contextEl = this.canvasEl.getContext("2d");
\e[m
5842 \e[32m+
\e[m
\e[41m
\e[m
5843 \e[32m+
\e[m
\e[32m switch (this.rotate) {
\e[m
5844 \e[32m+
\e[m
\e[32m case 0 :
\e[m
5845 \e[32m+
\e[m
\e[41m
\e[m
5846 \e[32m+
\e[m
\e[32m this.canvasEl.width = this.imageEl.OriginWidth * this.getScaleLevel();
\e[m
5847 \e[32m+
\e[m
\e[32m this.canvasEl.height = this.imageEl.OriginHeight * this.getScaleLevel();
\e[m
5848 \e[32m+
\e[m
\e[41m
\e[m
5849 \e[32m+
\e[m
\e[32m this.contextEl.drawImage(canvasEl, 0, 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
\e[m
5850 \e[32m+
\e[m
\e[41m
\e[m
5851 \e[32m+
\e[m
\e[32m break;
\e[m
5852 \e[32m+
\e[m
\e[32m case 90 :
\e[m
\e[41m
\e[m
5853 \e[32m+
\e[m
\e[41m
\e[m
5854 \e[32m+
\e[m
\e[32m this.canvasEl.width = this.imageEl.OriginHeight * this.getScaleLevel();
\e[m
5855 \e[32m+
\e[m
\e[32m this.canvasEl.height = this.imageEl.OriginWidth * this.getScaleLevel();
\e[m
5856 \e[32m+
\e[m
\e[41m
\e[m
5857 \e[32m+
\e[m
\e[32m if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
\e[m
5858 \e[32m+
\e[m
\e[32m this.contextEl.drawImage(canvasEl, Math.abs(this.canvasEl.width - this.canvasEl.height), 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
\e[m
5859 \e[32m+
\e[m
\e[32m break;
\e[m
5860 \e[32m+
\e[m
\e[32m }
\e[m
5861 \e[32m+
\e[m
\e[41m
\e[m
5862 \e[32m+
\e[m
\e[32m this.contextEl.drawImage(canvasEl, 0, 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
\e[m
5863 \e[32m+
\e[m
\e[41m
\e[m
5864 \e[32m+
\e[m
\e[32m break;
\e[m
5865 \e[32m+
\e[m
\e[32m case 180 :
\e[m
5866 \e[32m+
\e[m
\e[41m
\e[m
5867 \e[32m+
\e[m
\e[32m this.canvasEl.width = this.imageEl.OriginWidth * this.getScaleLevel();
\e[m
5868 \e[32m+
\e[m
\e[32m this.canvasEl.height = this.imageEl.OriginHeight * this.getScaleLevel();
\e[m
5869 \e[32m+
\e[m
\e[41m
\e[m
5870 \e[32m+
\e[m
\e[32m if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
\e[m
5871 \e[32m+
\e[m
\e[32m this.contextEl.drawImage(canvasEl, 0, Math.abs(this.canvasEl.width - this.canvasEl.height), this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
\e[m
5872 \e[32m+
\e[m
\e[32m break;
\e[m
5873 \e[32m+
\e[m
\e[32m }
\e[m
5874 \e[32m+
\e[m
\e[41m
\e[m
5875 \e[32m+
\e[m
\e[32m this.contextEl.drawImage(canvasEl, Math.abs(this.canvasEl.width - this.canvasEl.height), 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
\e[m
5876 \e[32m+
\e[m
\e[41m
\e[m
5877 \e[32m+
\e[m
\e[32m break;
\e[m
5878 \e[32m+
\e[m
\e[32m case 270 :
\e[m
5879 \e[32m+
\e[m
\e[41m
\e[m
5880 \e[32m+
\e[m
\e[32m this.canvasEl.width = this.imageEl.OriginHeight * this.getScaleLevel();
\e[m
5881 \e[32m+
\e[m
\e[32m this.canvasEl.height = this.imageEl.OriginWidth * this.getScaleLevel();
\e[m
5882 \e[32m+
\e[m
\e[41m
\e[m
5883 \e[32m+
\e[m
\e[32m if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
\e[m
5884 \e[32m+
\e[m
\e[32m this.contextEl.drawImage(canvasEl, 0, 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
\e[m
5885 \e[32m+
\e[m
\e[32m break;
\e[m
5886 \e[32m+
\e[m
\e[32m }
\e[m
5887 \e[32m+
\e[m
\e[41m
\e[m
5888 \e[32m+
\e[m
\e[32m this.contextEl.drawImage(canvasEl, 0, Math.abs(this.canvasEl.width - this.canvasEl.height), this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
\e[m
5889 \e[32m+
\e[m
\e[41m
\e[m
5890 \e[32m+
\e[m
\e[32m break;
\e[m
5891 \e[32m+
\e[m
\e[32m default :
\e[m
\e[41m
\e[m
5892 \e[32m+
\e[m
\e[32m break;
\e[m
5893 \e[32m+
\e[m
\e[32m }
\e[m
5894 \e[32m+
\e[m
\e[41m
\e[m
5895 \e[32m+
\e[m
\e[32m this.previewEl.appendChild(this.canvasEl);
\e[m
5896 \e[32m+
\e[m
\e[41m
\e[m
5897 \e[32m+
\e[m
\e[32m this.setCanvasPosition();
\e[m
5898 \e[32m+
\e[m
\e[32m },
\e[m
5899 \e[32m+
\e[m
\e[41m
\e[m
5900 \e[32m+
\e[m
\e[32m crop : function()
\e[m
5901 \e[32m+
\e[m
\e[32m {
\e[m
5902 \e[32m+
\e[m
\e[32m if(!this.canvasLoaded){
\e[m
5903 \e[32m+
\e[m
\e[32m return;
\e[m
5904 \e[32m+
\e[m
\e[32m }
\e[m
5905 \e[32m+
\e[m
\e[41m
\e[m
5906 \e[32m+
\e[m
\e[32m var imageCanvas = document.createElement("canvas");
\e[m
5907 \e[32m+
\e[m
\e[41m
\e[m
5908 \e[32m+
\e[m
\e[32m var imageContext = imageCanvas.getContext("2d");
\e[m
5909 \e[32m+
\e[m
\e[41m
\e[m
5910 \e[32m+
\e[m
\e[32m imageCanvas.width = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? this.imageEl.OriginWidth : this.imageEl.OriginHeight;
\e[m
5911 \e[32m+
\e[m
\e[32m imageCanvas.height = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? this.imageEl.OriginWidth : this.imageEl.OriginHeight;
\e[m
5912 \e[32m+
\e[m
\e[41m
\e[m
5913 \e[32m+
\e[m
\e[32m var center = imageCanvas.width / 2;
\e[m
5914 \e[32m+
\e[m
\e[41m
\e[m
5915 \e[32m+
\e[m
\e[32m imageContext.translate(center, center);
\e[m
5916 \e[32m+
\e[m
\e[41m
\e[m
5917 \e[32m+
\e[m
\e[32m imageContext.rotate(this.rotate * Math.PI / 180);
\e[m
5918 \e[32m+
\e[m
\e[41m
\e[m
5919 \e[32m+
\e[m
\e[32m imageContext.drawImage(this.imageEl, 0, 0, this.imageEl.OriginWidth, this.imageEl.OriginHeight, center * -1, center * -1, this.imageEl.OriginWidth, this.imageEl.OriginHeight);
\e[m
5920 \e[32m+
\e[m
\e[41m
\e[m
5921 \e[32m+
\e[m
\e[32m var canvas = document.createElement("canvas");
\e[m
5922 \e[32m+
\e[m
\e[41m
\e[m
5923 \e[32m+
\e[m
\e[32m var context = canvas.getContext("2d");
\e[m
5924 \e[32m+
\e[m
\e[41m
\e[m
5925 \e[32m+
\e[m
\e[32m canvas.width = this.minWidth;
\e[m
5926 \e[32m+
\e[m
\e[32m canvas.height = this.minHeight;
\e[m
5928 \e[32m+
\e[m
\e[32m switch (this.rotate) {
\e[m
5929 \e[32m+
\e[m
\e[32m case 0 :
\e[m
5930 \e[32m+
\e[m
\e[41m
\e[m
5931 \e[32m+
\e[m
\e[32m var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getWidth() / this.getScaleLevel());
\e[m
5932 \e[32m+
\e[m
\e[32m var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getHeight() / this.getScaleLevel());
\e[m
5933 \e[32m+
\e[m
\e[41m
\e[m
5934 \e[32m+
\e[m
\e[32m var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());
\e[m
5935 \e[32m+
\e[m
\e[32m var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
\e[m
5936 \e[32m+
\e[m
\e[41m
\e[m
5937 \e[32m+
\e[m
\e[32m var targetWidth = this.minWidth - 2 * x;
\e[m
5938 \e[32m+
\e[m
\e[32m var targetHeight = this.minHeight - 2 * y;
\e[m
5939 \e[32m+
\e[m
\e[41m
\e[m
5940 \e[32m+
\e[m
\e[32m var scale = 1;
\e[m
5941 \e[32m+
\e[m
\e[41m
\e[m
5942 \e[32m+
\e[m
\e[32m if((x == 0 && y == 0) || (x == 0 && y > 0)){
\e[m
5943 \e[32m+
\e[m
\e[32m scale = targetWidth / width;
\e[m
5944 \e[32m+
\e[m
\e[32m }
\e[m
5945 \e[32m+
\e[m
\e[41m
\e[m
5946 \e[32m+
\e[m
\e[32m if(x > 0 && y == 0){
\e[m
5947 \e[32m+
\e[m
\e[32m scale = targetHeight / height;
\e[m
5948 \e[32m+
\e[m
\e[32m }
\e[m
5949 \e[32m+
\e[m
\e[41m
\e[m
5950 \e[32m+
\e[m
\e[32m if(x > 0 && y > 0){
\e[m
5951 \e[32m+
\e[m
\e[32m scale = targetWidth / width;
\e[m
5952 \e[32m+
\e[m
\e[41m
\e[m
5953 \e[32m+
\e[m
\e[32m if(width < height){
\e[m
5954 \e[32m+
\e[m
\e[32m scale = targetHeight / height;
\e[m
5955 \e[32m+
\e[m
\e[32m }
\e[m
5956 \e[32m+
\e[m
\e[32m }
\e[m
5957 \e[32m+
\e[m
\e[41m
\e[m
5958 \e[32m+
\e[m
\e[32m context.scale(scale, scale);
\e[m
5959 \e[32m+
\e[m
\e[41m
\e[m
5960 \e[32m+
\e[m
\e[32m var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));
\e[m
5961 \e[32m+
\e[m
\e[32m var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));
\e[m
5963 \e[32m+
\e[m
\e[32m sx = sx < 0 ? 0 : (sx / this.getScaleLevel());
\e[m
5964 \e[32m+
\e[m
\e[32m sy = sy < 0 ? 0 : (sy / this.getScaleLevel());
\e[m
5966 \e[32m+
\e[m
\e[32m context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
\e[m
5967 \e[32m+
\e[m
\e[41m
\e[m
5968 \e[32m+
\e[m
\e[32m break;
\e[m
5969 \e[32m+
\e[m
\e[32m case 90 :
\e[m
\e[41m
\e[m
5970 \e[32m+
\e[m
\e[41m
\e[m
5971 \e[32m+
\e[m
\e[32m var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getWidth() / this.getScaleLevel());
\e[m
5972 \e[32m+
\e[m
\e[32m var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getHeight() / this.getScaleLevel());
\e[m
5973 \e[32m+
\e[m
\e[41m
\e[m
5974 \e[32m+
\e[m
\e[32m var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());
\e[m
5975 \e[32m+
\e[m
\e[32m var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
\e[m
5976 \e[32m+
\e[m
\e[41m
\e[m
5977 \e[32m+
\e[m
\e[32m var targetWidth = this.minWidth - 2 * x;
\e[m
5978 \e[32m+
\e[m
\e[32m var targetHeight = this.minHeight - 2 * y;
\e[m
5979 \e[32m+
\e[m
\e[41m
\e[m
5980 \e[32m+
\e[m
\e[32m var scale = 1;
\e[m
5981 \e[32m+
\e[m
\e[41m
\e[m
5982 \e[32m+
\e[m
\e[32m if((x == 0 && y == 0) || (x == 0 && y > 0)){
\e[m
5983 \e[32m+
\e[m
\e[32m scale = targetWidth / width;
\e[m
5984 \e[32m+
\e[m
\e[32m }
\e[m
5985 \e[32m+
\e[m
\e[41m
\e[m
5986 \e[32m+
\e[m
\e[32m if(x > 0 && y == 0){
\e[m
5987 \e[32m+
\e[m
\e[32m scale = targetHeight / height;
\e[m
5988 \e[32m+
\e[m
\e[32m }
\e[m
5989 \e[32m+
\e[m
\e[41m
\e[m
5990 \e[32m+
\e[m
\e[32m if(x > 0 && y > 0){
\e[m
5991 \e[32m+
\e[m
\e[32m scale = targetWidth / width;
\e[m
5992 \e[32m+
\e[m
\e[41m
\e[m
5993 \e[32m+
\e[m
\e[32m if(width < height){
\e[m
5994 \e[32m+
\e[m
\e[32m scale = targetHeight / height;
\e[m
5995 \e[32m+
\e[m
\e[32m }
\e[m
5996 \e[32m+
\e[m
\e[32m }
\e[m
5997 \e[32m+
\e[m
\e[41m
\e[m
5998 \e[32m+
\e[m
\e[32m context.scale(scale, scale);
\e[m
5999 \e[32m+
\e[m
\e[41m
\e[m
6000 \e[32m+
\e[m
\e[32m var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));
\e[m
6001 \e[32m+
\e[m
\e[32m var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));
\e[m
6003 \e[32m+
\e[m
\e[32m sx = sx < 0 ? 0 : (sx / this.getScaleLevel());
\e[m
6004 \e[32m+
\e[m
\e[32m sy = sy < 0 ? 0 : (sy / this.getScaleLevel());
\e[m
6005 \e[32m+
\e[m
\e[41m
\e[m
6006 \e[32m+
\e[m
\e[32m sx += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight) : 0;
\e[m
6007 \e[32m+
\e[m
\e[41m
\e[m
6008 \e[32m+
\e[m
\e[32m context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
\e[m
6009 \e[32m+
\e[m
\e[41m
\e[m
6010 \e[32m+
\e[m
\e[32m break;
\e[m
6011 \e[32m+
\e[m
\e[32m case 180 :
\e[m
6012 \e[32m+
\e[m
\e[41m
\e[m
6013 \e[32m+
\e[m
\e[32m var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getWidth() / this.getScaleLevel());
\e[m
6014 \e[32m+
\e[m
\e[32m var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getHeight() / this.getScaleLevel());
\e[m
6015 \e[32m+
\e[m
\e[41m
\e[m
6016 \e[32m+
\e[m
\e[32m var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());
\e[m
6017 \e[32m+
\e[m
\e[32m var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
\e[m
6018 \e[32m+
\e[m
\e[41m
\e[m
6019 \e[32m+
\e[m
\e[32m var targetWidth = this.minWidth - 2 * x;
\e[m
6020 \e[32m+
\e[m
\e[32m var targetHeight = this.minHeight - 2 * y;
\e[m
6021 \e[32m+
\e[m
\e[41m
\e[m
6022 \e[32m+
\e[m
\e[32m var scale = 1;
\e[m
6023 \e[32m+
\e[m
\e[41m
\e[m
6024 \e[32m+
\e[m
\e[32m if((x == 0 && y == 0) || (x == 0 && y > 0)){
\e[m
6025 \e[32m+
\e[m
\e[32m scale = targetWidth / width;
\e[m
6026 \e[32m+
\e[m
\e[32m }
\e[m
6027 \e[32m+
\e[m
\e[41m
\e[m
6028 \e[32m+
\e[m
\e[32m if(x > 0 && y == 0){
\e[m
6029 \e[32m+
\e[m
\e[32m scale = targetHeight / height;
\e[m
6030 \e[32m+
\e[m
\e[32m }
\e[m
6031 \e[32m+
\e[m
\e[41m
\e[m
6032 \e[32m+
\e[m
\e[32m if(x > 0 && y > 0){
\e[m
6033 \e[32m+
\e[m
\e[32m scale = targetWidth / width;
\e[m
6034 \e[32m+
\e[m
\e[41m
\e[m
6035 \e[32m+
\e[m
\e[32m if(width < height){
\e[m
6036 \e[32m+
\e[m
\e[32m scale = targetHeight / height;
\e[m
6037 \e[32m+
\e[m
\e[32m }
\e[m
6038 \e[32m+
\e[m
\e[32m }
\e[m
6039 \e[32m+
\e[m
\e[41m
\e[m
6040 \e[32m+
\e[m
\e[32m context.scale(scale, scale);
\e[m
6041 \e[32m+
\e[m
\e[41m
\e[m
6042 \e[32m+
\e[m
\e[32m var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));
\e[m
6043 \e[32m+
\e[m
\e[32m var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));
\e[m
6045 \e[32m+
\e[m
\e[32m sx = sx < 0 ? 0 : (sx / this.getScaleLevel());
\e[m
6046 \e[32m+
\e[m
\e[32m sy = sy < 0 ? 0 : (sy / this.getScaleLevel());
\e[m
6048 \e[32m+
\e[m
\e[32m sx += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? 0 : Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight);
\e[m
6049 \e[32m+
\e[m
\e[32m sy += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight) : 0;
\e[m
6050 \e[32m+
\e[m
\e[41m
\e[m
6051 \e[32m+
\e[m
\e[32m context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
\e[m
6052 \e[32m+
\e[m
\e[41m
\e[m
6053 \e[32m+
\e[m
\e[32m break;
\e[m
6054 \e[32m+
\e[m
\e[32m case 270 :
\e[m
6055 \e[32m+
\e[m
\e[41m
\e[m
6056 \e[32m+
\e[m
\e[32m var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getWidth() / this.getScaleLevel());
\e[m
6057 \e[32m+
\e[m
\e[32m var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getHeight() / this.getScaleLevel());
\e[m
6058 \e[32m+
\e[m
\e[41m
\e[m
6059 \e[32m+
\e[m
\e[32m var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());
\e[m
6060 \e[32m+
\e[m
\e[32m var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
\e[m
6061 \e[32m+
\e[m
\e[41m
\e[m
6062 \e[32m+
\e[m
\e[32m var targetWidth = this.minWidth - 2 * x;
\e[m
6063 \e[32m+
\e[m
\e[32m var targetHeight = this.minHeight - 2 * y;
\e[m
6064 \e[32m+
\e[m
\e[41m
\e[m
6065 \e[32m+
\e[m
\e[32m var scale = 1;
\e[m
6066 \e[32m+
\e[m
\e[41m
\e[m
6067 \e[32m+
\e[m
\e[32m if((x == 0 && y == 0) || (x == 0 && y > 0)){
\e[m
6068 \e[32m+
\e[m
\e[32m scale = targetWidth / width;
\e[m
6069 \e[32m+
\e[m
\e[32m }
\e[m
6070 \e[32m+
\e[m
\e[41m
\e[m
6071 \e[32m+
\e[m
\e[32m if(x > 0 && y == 0){
\e[m
6072 \e[32m+
\e[m
\e[32m scale = targetHeight / height;
\e[m
6073 \e[32m+
\e[m
\e[32m }
\e[m
6074 \e[32m+
\e[m
\e[41m
\e[m
6075 \e[32m+
\e[m
\e[32m if(x > 0 && y > 0){
\e[m
6076 \e[32m+
\e[m
\e[32m scale = targetWidth / width;
\e[m
6077 \e[32m+
\e[m
\e[41m
\e[m
6078 \e[32m+
\e[m
\e[32m if(width < height){
\e[m
6079 \e[32m+
\e[m
\e[32m scale = targetHeight / height;
\e[m
6080 \e[32m+
\e[m
\e[32m }
\e[m
6081 \e[32m+
\e[m
\e[32m }
\e[m
6082 \e[32m+
\e[m
\e[41m
\e[m
6083 \e[32m+
\e[m
\e[32m context.scale(scale, scale);
\e[m
6084 \e[32m+
\e[m
\e[41m
\e[m
6085 \e[32m+
\e[m
\e[32m var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));
\e[m
6086 \e[32m+
\e[m
\e[32m var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));
\e[m
6088 \e[32m+
\e[m
\e[32m sx = sx < 0 ? 0 : (sx / this.getScaleLevel());
\e[m
6089 \e[32m+
\e[m
\e[32m sy = sy < 0 ? 0 : (sy / this.getScaleLevel());
\e[m
6090 \e[32m+
\e[m
\e[41m
\e[m
6091 \e[32m+
\e[m
\e[32m sy += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? 0 : Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight);
\e[m
6092 \e[32m+
\e[m
\e[41m
\e[m
6093 \e[32m+
\e[m
\e[32m context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
\e[m
6094 \e[32m+
\e[m
\e[41m
\e[m
6095 \e[32m+
\e[m
\e[32m break;
\e[m
6096 \e[32m+
\e[m
\e[32m default :
\e[m
\e[41m
\e[m
6097 \e[32m+
\e[m
\e[32m break;
\e[m
6098 \e[32m+
\e[m
\e[32m }
\e[m
6099 \e[32m+
\e[m
\e[41m
\e[m
6100 \e[32m+
\e[m
\e[32m this.cropData = canvas.toDataURL(this.cropType);
\e[m
6101 \e[32m+
\e[m
\e[41m
\e[m
6102 \e[32m+
\e[m
\e[32m if(this.fireEvent('crop', this, this.cropData) !== false){
\e[m
6103 \e[32m+
\e[m
\e[32m this.process(this.file, this.cropData);
\e[m
6104 \e[32m+
\e[m
\e[32m }
\e[m
6105 \e[32m+
\e[m
\e[41m
\e[m
6106 \e[32m+
\e[m
\e[32m return;
\e[m
6107 \e[32m+
\e[m
\e[41m
\e[m
6108 \e[32m+
\e[m
\e[32m },
\e[m
6109 \e[32m+
\e[m
\e[41m
\e[m
6110 \e[32m+
\e[m
\e[32m setThumbBoxSize : function()
\e[m
6111 \e[32m+
\e[m
\e[32m {
\e[m
6112 \e[32m+
\e[m
\e[32m var width, height;
\e[m
6113 \e[32m+
\e[m
\e[41m
\e[m
6114 \e[32m+
\e[m
\e[32m if(this.isDocument && typeof(this.imageEl) != 'undefined'){
\e[m
6115 \e[32m+
\e[m
\e[32m width = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.max(this.minWidth, this.minHeight) : Math.min(this.minWidth, this.minHeight);
\e[m
6116 \e[32m+
\e[m
\e[32m height = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.min(this.minWidth, this.minHeight) : Math.max(this.minWidth, this.minHeight);
\e[m
6117 \e[32m+
\e[m
\e[41m
\e[m
6118 \e[32m+
\e[m
\e[32m this.minWidth = width;
\e[m
6119 \e[32m+
\e[m
\e[32m this.minHeight = height;
\e[m
6120 \e[32m+
\e[m
\e[41m
\e[m
6121 \e[32m+
\e[m
\e[32m if(this.rotate == 90 || this.rotate == 270){
\e[m
6122 \e[32m+
\e[m
\e[32m this.minWidth = height;
\e[m
6123 \e[32m+
\e[m
\e[32m this.minHeight = width;
\e[m
6124 \e[32m+
\e[m
\e[32m }
\e[m
6125 \e[32m+
\e[m
\e[32m }
\e[m
6126 \e[32m+
\e[m
\e[41m
\e[m
6127 \e[32m+
\e[m
\e[32m height = 300;
\e[m
6128 \e[32m+
\e[m
\e[32m width = Math.ceil(this.minWidth * height / this.minHeight);
\e[m
6129 \e[32m+
\e[m
\e[41m
\e[m
6130 \e[32m+
\e[m
\e[32m if(this.minWidth > this.minHeight){
\e[m
6131 \e[32m+
\e[m
\e[32m width = 300;
\e[m
6132 \e[32m+
\e[m
\e[32m height = Math.ceil(this.minHeight * width / this.minWidth);
\e[m
6133 \e[32m+
\e[m
\e[32m }
\e[m
6134 \e[32m+
\e[m
\e[41m
\e[m
6135 \e[32m+
\e[m
\e[32m this.thumbEl.setStyle({
\e[m
6136 \e[32m+
\e[m
\e[32m width : width + 'px',
\e[m
6137 \e[32m+
\e[m
\e[32m height : height + 'px'
\e[m
6138 \e[32m+
\e[m
\e[32m });
\e[m
6140 \e[32m+
\e[m
\e[32m return;
\e[m
6141 \e[32m+
\e[m
\e[41m
\e[m
6142 \e[32m+
\e[m
\e[32m },
\e[m
6143 \e[32m+
\e[m
\e[41m
\e[m
6144 \e[32m+
\e[m
\e[32m setThumbBoxPosition : function()
\e[m
6145 \e[32m+
\e[m
\e[32m {
\e[m
6146 \e[32m+
\e[m
\e[32m var x = Math.ceil((this.bodyEl.getWidth() - this.thumbEl.getWidth()) / 2 );
\e[m
6147 \e[32m+
\e[m
\e[32m var y = Math.ceil((this.bodyEl.getHeight() - this.thumbEl.getHeight()) / 2);
\e[m
6148 \e[32m+
\e[m
\e[41m
\e[m
6149 \e[32m+
\e[m
\e[32m this.thumbEl.setLeft(x);
\e[m
6150 \e[32m+
\e[m
\e[32m this.thumbEl.setTop(y);
\e[m
6151 \e[32m+
\e[m
\e[41m
\e[m
6152 \e[32m+
\e[m
\e[32m },
\e[m
6153 \e[32m+
\e[m
\e[41m
\e[m
6154 \e[32m+
\e[m
\e[32m baseRotateLevel : function()
\e[m
6155 \e[32m+
\e[m
\e[32m {
\e[m
6156 \e[32m+
\e[m
\e[32m this.baseRotate = 1;
\e[m
6157 \e[32m+
\e[m
\e[41m
\e[m
6158 \e[32m+
\e[m
\e[32m if(
\e[m
6159 \e[32m+
\e[m
\e[32m typeof(this.exif) != 'undefined' &&
\e[m
6160 \e[32m+
\e[m
\e[32m typeof(this.exif[Roo.dialog.UploadCropbox['tags']['Orientation']]) != 'undefined' &&
\e[m
6161 \e[32m+
\e[m
\e[32m [1, 3, 6, 8].indexOf(this.exif[Roo.dialog.UploadCropbox['tags']['Orientation']]) != -1
\e[m
6162 \e[32m+
\e[m
\e[32m ){
\e[m
6163 \e[32m+
\e[m
\e[32m this.baseRotate = this.exif[Roo.dialog.UploadCropbox['tags']['Orientation']];
\e[m
6164 \e[32m+
\e[m
\e[32m }
\e[m
6165 \e[32m+
\e[m
\e[41m
\e[m
6166 \e[32m+
\e[m
\e[32m this.rotate = Roo.dialog.UploadCropbox['Orientation'][this.baseRotate];
\e[m
6167 \e[32m+
\e[m
\e[41m
\e[m
6168 \e[32m+
\e[m
\e[32m },
\e[m
6169 \e[32m+
\e[m
\e[41m
\e[m
6170 \e[32m+
\e[m
\e[32m baseScaleLevel : function()
\e[m
6171 \e[32m+
\e[m
\e[32m {
\e[m
6172 \e[32m+
\e[m
\e[32m var width, height;
\e[m
6173 \e[32m+
\e[m
\e[41m
\e[m
6174 \e[32m+
\e[m
\e[32m if(this.isDocument){
\e[m
6175 \e[32m+
\e[m
\e[41m
\e[m
6176 \e[32m+
\e[m
\e[32m if(this.baseRotate == 6 || this.baseRotate == 8){
\e[m
6177 \e[32m+
\e[m
\e[41m
\e[m
6178 \e[32m+
\e[m
\e[32m height = this.thumbEl.getHeight();
\e[m
6179 \e[32m+
\e[m
\e[32m this.baseScale = height / this.imageEl.OriginWidth;
\e[m
6181 \e[32m+
\e[m
\e[32m if(this.imageEl.OriginHeight * this.baseScale > this.thumbEl.getWidth()){
\e[m
6182 \e[32m+
\e[m
\e[32m width = this.thumbEl.getWidth();
\e[m
6183 \e[32m+
\e[m
\e[32m this.baseScale = width / this.imageEl.OriginHeight;
\e[m
6184 \e[32m+
\e[m
\e[32m }
\e[m
6186 \e[32m+
\e[m
\e[32m return;
\e[m
6187 \e[32m+
\e[m
\e[32m }
\e[m
6189 \e[32m+
\e[m
\e[32m height = this.thumbEl.getHeight();
\e[m
6190 \e[32m+
\e[m
\e[32m this.baseScale = height / this.imageEl.OriginHeight;
\e[m
6192 \e[32m+
\e[m
\e[32m if(this.imageEl.OriginWidth * this.baseScale > this.thumbEl.getWidth()){
\e[m
6193 \e[32m+
\e[m
\e[32m width = this.thumbEl.getWidth();
\e[m
6194 \e[32m+
\e[m
\e[32m this.baseScale = width / this.imageEl.OriginWidth;
\e[m
6195 \e[32m+
\e[m
\e[32m }
\e[m
6197 \e[32m+
\e[m
\e[32m return;
\e[m
6198 \e[32m+
\e[m
\e[32m }
\e[m
6199 \e[32m+
\e[m
\e[41m
\e[m
6200 \e[32m+
\e[m
\e[32m if(this.baseRotate == 6 || this.baseRotate == 8){
\e[m
6201 \e[32m+
\e[m
\e[41m
\e[m
6202 \e[32m+
\e[m
\e[32m width = this.thumbEl.getHeight();
\e[m
6203 \e[32m+
\e[m
\e[32m this.baseScale = width / this.imageEl.OriginHeight;
\e[m
6204 \e[32m+
\e[m
\e[41m
\e[m
6205 \e[32m+
\e[m
\e[32m if(this.imageEl.OriginHeight * this.baseScale < this.thumbEl.getWidth()){
\e[m
6206 \e[32m+
\e[m
\e[32m height = this.thumbEl.getWidth();
\e[m
6207 \e[32m+
\e[m
\e[32m this.baseScale = height / this.imageEl.OriginHeight;
\e[m
6208 \e[32m+
\e[m
\e[32m }
\e[m
6209 \e[32m+
\e[m
\e[41m
\e[m
6210 \e[32m+
\e[m
\e[32m if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
\e[m
6211 \e[32m+
\e[m
\e[32m height = this.thumbEl.getWidth();
\e[m
6212 \e[32m+
\e[m
\e[32m this.baseScale = height / this.imageEl.OriginHeight;
\e[m
6213 \e[32m+
\e[m
\e[41m
\e[m
6214 \e[32m+
\e[m
\e[32m if(this.imageEl.OriginWidth * this.baseScale < this.thumbEl.getHeight()){
\e[m
6215 \e[32m+
\e[m
\e[32m width = this.thumbEl.getHeight();
\e[m
6216 \e[32m+
\e[m
\e[32m this.baseScale = width / this.imageEl.OriginWidth;
\e[m
6217 \e[32m+
\e[m
\e[32m }
\e[m
6218 \e[32m+
\e[m
\e[32m }
\e[m
6219 \e[32m+
\e[m
\e[41m
\e[m
6220 \e[32m+
\e[m
\e[32m return;
\e[m
6221 \e[32m+
\e[m
\e[32m }
\e[m
6222 \e[32m+
\e[m
\e[41m
\e[m
6223 \e[32m+
\e[m
\e[32m width = this.thumbEl.getWidth();
\e[m
6224 \e[32m+
\e[m
\e[32m this.baseScale = width / this.imageEl.OriginWidth;
\e[m
6225 \e[32m+
\e[m
\e[41m
\e[m
6226 \e[32m+
\e[m
\e[32m if(this.imageEl.OriginHeight * this.baseScale < this.thumbEl.getHeight()){
\e[m
6227 \e[32m+
\e[m
\e[32m height = this.thumbEl.getHeight();
\e[m
6228 \e[32m+
\e[m
\e[32m this.baseScale = height / this.imageEl.OriginHeight;
\e[m
6229 \e[32m+
\e[m
\e[32m }
\e[m
6230 \e[32m+
\e[m
\e[41m
\e[m
6231 \e[32m+
\e[m
\e[32m if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
\e[m
6232 \e[32m+
\e[m
\e[41m
\e[m
6233 \e[32m+
\e[m
\e[32m height = this.thumbEl.getHeight();
\e[m
6234 \e[32m+
\e[m
\e[32m this.baseScale = height / this.imageEl.OriginHeight;
\e[m
6235 \e[32m+
\e[m
\e[41m
\e[m
6236 \e[32m+
\e[m
\e[32m if(this.imageEl.OriginWidth * this.baseScale < this.thumbEl.getWidth()){
\e[m
6237 \e[32m+
\e[m
\e[32m width = this.thumbEl.getWidth();
\e[m
6238 \e[32m+
\e[m
\e[32m this.baseScale = width / this.imageEl.OriginWidth;
\e[m
6239 \e[32m+
\e[m
\e[32m }
\e[m
6240 \e[32m+
\e[m
\e[41m
\e[m
6241 \e[32m+
\e[m
\e[32m }
\e[m
6242 \e[32m+
\e[m
\e[41m
\e[m
6243 \e[32m+
\e[m
\e[32m return;
\e[m
6244 \e[32m+
\e[m
\e[32m },
\e[m
6245 \e[32m+
\e[m
\e[41m
\e[m
6246 \e[32m+
\e[m
\e[32m getScaleLevel : function()
\e[m
6247 \e[32m+
\e[m
\e[32m {
\e[m
6248 \e[32m+
\e[m
\e[32m return this.baseScale * Math.pow(1.1, this.scale);
\e[m
6249 \e[32m+
\e[m
\e[32m },
\e[m
6250 \e[32m+
\e[m
\e[41m
\e[m
6251 \e[32m+
\e[m
\e[32m onTouchStart : function(e)
\e[m
6252 \e[32m+
\e[m
\e[32m {
\e[m
6253 \e[32m+
\e[m
\e[32m if(!this.canvasLoaded){
\e[m
6254 \e[32m+
\e[m
\e[32m this.beforeSelectFile(e);
\e[m
6255 \e[32m+
\e[m
\e[32m return;
\e[m
6256 \e[32m+
\e[m
\e[32m }
\e[m
6257 \e[32m+
\e[m
\e[41m
\e[m
6258 \e[32m+
\e[m
\e[32m var touches = e.browserEvent.touches;
\e[m
6259 \e[32m+
\e[m
\e[41m
\e[m
6260 \e[32m+
\e[m
\e[32m if(!touches){
\e[m
6261 \e[32m+
\e[m
\e[32m return;
\e[m
6262 \e[32m+
\e[m
\e[32m }
\e[m
6263 \e[32m+
\e[m
\e[41m
\e[m
6264 \e[32m+
\e[m
\e[32m if(touches.length == 1){
\e[m
6265 \e[32m+
\e[m
\e[32m this.onMouseDown(e);
\e[m
6266 \e[32m+
\e[m
\e[32m return;
\e[m
6267 \e[32m+
\e[m
\e[32m }
\e[m
6268 \e[32m+
\e[m
\e[41m
\e[m
6269 \e[32m+
\e[m
\e[32m if(touches.length != 2){
\e[m
6270 \e[32m+
\e[m
\e[32m return;
\e[m
6271 \e[32m+
\e[m
\e[32m }
\e[m
6272 \e[32m+
\e[m
\e[41m
\e[m
6273 \e[32m+
\e[m
\e[32m var coords = [];
\e[m
6274 \e[32m+
\e[m
\e[41m
\e[m
6275 \e[32m+
\e[m
\e[32m for(var i = 0, finger; finger = touches[i]; i++){
\e[m
6276 \e[32m+
\e[m
\e[32m coords.push(finger.pageX, finger.pageY);
\e[m
6277 \e[32m+
\e[m
\e[32m }
\e[m
6278 \e[32m+
\e[m
\e[41m
\e[m
6279 \e[32m+
\e[m
\e[32m var x = Math.pow(coords[0] - coords[2], 2);
\e[m
6280 \e[32m+
\e[m
\e[32m var y = Math.pow(coords[1] - coords[3], 2);
\e[m
6281 \e[32m+
\e[m
\e[41m
\e[m
6282 \e[32m+
\e[m
\e[32m this.startDistance = Math.sqrt(x + y);
\e[m
6283 \e[32m+
\e[m
\e[41m
\e[m
6284 \e[32m+
\e[m
\e[32m this.startScale = this.scale;
\e[m
6285 \e[32m+
\e[m
\e[41m
\e[m
6286 \e[32m+
\e[m
\e[32m this.pinching = true;
\e[m
6287 \e[32m+
\e[m
\e[32m this.dragable = false;
\e[m
6288 \e[32m+
\e[m
\e[41m
\e[m
6289 \e[32m+
\e[m
\e[32m },
\e[m
6290 \e[32m+
\e[m
\e[41m
\e[m
6291 \e[32m+
\e[m
\e[32m onTouchMove : function(e)
\e[m
6292 \e[32m+
\e[m
\e[32m {
\e[m
6293 \e[32m+
\e[m
\e[32m if(!this.pinching && !this.dragable){
\e[m
6294 \e[32m+
\e[m
\e[32m return;
\e[m
6295 \e[32m+
\e[m
\e[32m }
\e[m
6296 \e[32m+
\e[m
\e[41m
\e[m
6297 \e[32m+
\e[m
\e[32m var touches = e.browserEvent.touches;
\e[m
6298 \e[32m+
\e[m
\e[41m
\e[m
6299 \e[32m+
\e[m
\e[32m if(!touches){
\e[m
6300 \e[32m+
\e[m
\e[32m return;
\e[m
6301 \e[32m+
\e[m
\e[32m }
\e[m
6302 \e[32m+
\e[m
\e[41m
\e[m
6303 \e[32m+
\e[m
\e[32m if(this.dragable){
\e[m
6304 \e[32m+
\e[m
\e[32m this.onMouseMove(e);
\e[m
6305 \e[32m+
\e[m
\e[32m return;
\e[m
6306 \e[32m+
\e[m
\e[32m }
\e[m
6307 \e[32m+
\e[m
\e[41m
\e[m
6308 \e[32m+
\e[m
\e[32m var coords = [];
\e[m
6309 \e[32m+
\e[m
\e[41m
\e[m
6310 \e[32m+
\e[m
\e[32m for(var i = 0, finger; finger = touches[i]; i++){
\e[m
6311 \e[32m+
\e[m
\e[32m coords.push(finger.pageX, finger.pageY);
\e[m
6312 \e[32m+
\e[m
\e[32m }
\e[m
6313 \e[32m+
\e[m
\e[41m
\e[m
6314 \e[32m+
\e[m
\e[32m var x = Math.pow(coords[0] - coords[2], 2);
\e[m
6315 \e[32m+
\e[m
\e[32m var y = Math.pow(coords[1] - coords[3], 2);
\e[m
6316 \e[32m+
\e[m
\e[41m
\e[m
6317 \e[32m+
\e[m
\e[32m this.endDistance = Math.sqrt(x + y);
\e[m
6318 \e[32m+
\e[m
\e[41m
\e[m
6319 \e[32m+
\e[m
\e[32m this.scale = this.startScale + Math.floor(Math.log(this.endDistance / this.startDistance) / Math.log(1.1));
\e[m
6320 \e[32m+
\e[m
\e[41m
\e[m
6321 \e[32m+
\e[m
\e[32m if(!this.zoomable()){
\e[m
6322 \e[32m+
\e[m
\e[32m this.scale = this.startScale;
\e[m
6323 \e[32m+
\e[m
\e[32m return;
\e[m
6324 \e[32m+
\e[m
\e[32m }
\e[m
6325 \e[32m+
\e[m
\e[41m
\e[m
6326 \e[32m+
\e[m
\e[32m this.draw();
\e[m
6327 \e[32m+
\e[m
\e[41m
\e[m
6328 \e[32m+
\e[m
\e[32m },
\e[m
6329 \e[32m+
\e[m
\e[41m
\e[m
6330 \e[32m+
\e[m
\e[32m onTouchEnd : function(e)
\e[m
6331 \e[32m+
\e[m
\e[32m {
\e[m
6332 \e[32m+
\e[m
\e[32m this.pinching = false;
\e[m
6333 \e[32m+
\e[m
\e[32m this.dragable = false;
\e[m
6334 \e[32m+
\e[m
\e[41m
\e[m
6335 \e[32m+
\e[m
\e[32m },
\e[m
6336 \e[32m+
\e[m
\e[41m
\e[m
6337 \e[32m+
\e[m
\e[32m process : function(file, crop)
\e[m
6338 \e[32m+
\e[m
\e[32m {
\e[m
6339 \e[32m+
\e[m
\e[32m if(this.loadMask){
\e[m
6340 \e[32m+
\e[m
\e[32m this.maskEl.mask(this.loadingText);
\e[m
6341 \e[32m+
\e[m
\e[32m }
\e[m
6342 \e[32m+
\e[m
\e[41m
\e[m
6343 \e[32m+
\e[m
\e[32m this.xhr = new XMLHttpRequest();
\e[m
6344 \e[32m+
\e[m
\e[41m
\e[m
6345 \e[32m+
\e[m
\e[32m file.xhr = this.xhr;
\e[m
6347 \e[32m+
\e[m
\e[32m this.xhr.open(this.method, this.url, true);
\e[m
6348 \e[32m+
\e[m
\e[41m
\e[m
6349 \e[32m+
\e[m
\e[32m var headers = {
\e[m
6350 \e[32m+
\e[m
\e[32m "Accept": "application/json",
\e[m
6351 \e[32m+
\e[m
\e[32m "Cache-Control": "no-cache",
\e[m
6352 \e[32m+
\e[m
\e[32m "X-Requested-With": "XMLHttpRequest"
\e[m
6353 \e[32m+
\e[m
\e[32m };
\e[m
6354 \e[32m+
\e[m
\e[41m
\e[m
6355 \e[32m+
\e[m
\e[32m for (var headerName in headers) {
\e[m
6356 \e[32m+
\e[m
\e[32m var headerValue = headers[headerName];
\e[m
6357 \e[32m+
\e[m
\e[32m if (headerValue) {
\e[m
6358 \e[32m+
\e[m
\e[32m this.xhr.setRequestHeader(headerName, headerValue);
\e[m
6359 \e[32m+
\e[m
\e[32m }
\e[m
6360 \e[32m+
\e[m
\e[32m }
\e[m
6361 \e[32m+
\e[m
\e[41m
\e[m
6362 \e[32m+
\e[m
\e[32m var _this = this;
\e[m
6363 \e[32m+
\e[m
\e[41m
\e[m
6364 \e[32m+
\e[m
\e[32m this.xhr.onload = function()
\e[m
6365 \e[32m+
\e[m
\e[32m {
\e[m
6366 \e[32m+
\e[m
\e[32m _this.xhrOnLoad(_this.xhr);
\e[m
6367 \e[32m+
\e[m
\e[32m }
\e[m
6368 \e[32m+
\e[m
\e[41m
\e[m
6369 \e[32m+
\e[m
\e[32m this.xhr.onerror = function()
\e[m
6370 \e[32m+
\e[m
\e[32m {
\e[m
6371 \e[32m+
\e[m
\e[32m _this.xhrOnError(_this.xhr);
\e[m
6372 \e[32m+
\e[m
\e[32m }
\e[m
6373 \e[32m+
\e[m
\e[41m
\e[m
6374 \e[32m+
\e[m
\e[32m var formData = new FormData();
\e[m
6376 \e[32m+
\e[m
\e[32m formData.append('returnHTML', 'NO');
\e[m
6377 \e[32m+
\e[m
\e[41m
\e[m
6378 \e[32m+
\e[m
\e[32m if(crop){
\e[m
6379 \e[32m+
\e[m
\e[32m formData.append('crop', crop);
\e[m
6380 \e[32m+
\e[m
\e[32m }
\e[m
6381 \e[32m+
\e[m
\e[41m
\e[m
6382 \e[32m+
\e[m
\e[32m if(typeof(file) != 'undefined' && (typeof(file.id) == 'undefined' || file.id * 1 < 1)){
\e[m
6383 \e[32m+
\e[m
\e[32m formData.append(this.paramName, file, file.name);
\e[m
6384 \e[32m+
\e[m
\e[32m }
\e[m
6385 \e[32m+
\e[m
\e[41m
\e[m
6386 \e[32m+
\e[m
\e[32m if(typeof(file.filename) != 'undefined'){
\e[m
6387 \e[32m+
\e[m
\e[32m formData.append('filename', file.filename);
\e[m
6388 \e[32m+
\e[m
\e[32m }
\e[m
6389 \e[32m+
\e[m
\e[41m
\e[m
6390 \e[32m+
\e[m
\e[32m if(typeof(file.mimetype) != 'undefined'){
\e[m
6391 \e[32m+
\e[m
\e[32m formData.append('mimetype', file.mimetype);
\e[m
6392 \e[32m+
\e[m
\e[32m }
\e[m
6393 \e[32m+
\e[m
\e[41m
\e[m
6394 \e[32m+
\e[m
\e[32m if(this.fireEvent('arrange', this, formData) != false){
\e[m
6395 \e[32m+
\e[m
\e[32m this.xhr.send(formData);
\e[m
6396 \e[32m+
\e[m
\e[32m };
\e[m
6397 \e[32m+
\e[m
\e[32m },
\e[m
6398 \e[32m+
\e[m
\e[41m
\e[m
6399 \e[32m+
\e[m
\e[32m xhrOnLoad : function(xhr)
\e[m
6400 \e[32m+
\e[m
\e[32m {
\e[m
6401 \e[32m+
\e[m
\e[32m if(this.loadMask){
\e[m
6402 \e[32m+
\e[m
\e[32m this.maskEl.unmask();
\e[m
6403 \e[32m+
\e[m
\e[32m }
\e[m
6404 \e[32m+
\e[m
\e[41m
\e[m
6405 \e[32m+
\e[m
\e[32m if (xhr.readyState !== 4) {
\e[m
6406 \e[32m+
\e[m
\e[32m this.fireEvent('exception', this, xhr);
\e[m
6407 \e[32m+
\e[m
\e[32m return;
\e[m
6408 \e[32m+
\e[m
\e[32m }
\e[m
6410 \e[32m+
\e[m
\e[32m var response = Roo.decode(xhr.responseText);
\e[m
6411 \e[32m+
\e[m
\e[41m
\e[m
6412 \e[32m+
\e[m
\e[32m if(!response.success){
\e[m
6413 \e[32m+
\e[m
\e[32m this.fireEvent('exception', this, xhr);
\e[m
6414 \e[32m+
\e[m
\e[32m return;
\e[m
6415 \e[32m+
\e[m
\e[32m }
\e[m
6416 \e[32m+
\e[m
\e[41m
\e[m
6417 \e[32m+
\e[m
\e[32m var response = Roo.decode(xhr.responseText);
\e[m
6418 \e[32m+
\e[m
\e[41m
\e[m
6419 \e[32m+
\e[m
\e[32m this.fireEvent('upload', this, response);
\e[m
6420 \e[32m+
\e[m
\e[41m
\e[m
6421 \e[32m+
\e[m
\e[32m },
\e[m
6422 \e[32m+
\e[m
\e[41m
\e[m
6423 \e[32m+
\e[m
\e[32m xhrOnError : function()
\e[m
6424 \e[32m+
\e[m
\e[32m {
\e[m
6425 \e[32m+
\e[m
\e[32m if(this.loadMask){
\e[m
6426 \e[32m+
\e[m
\e[32m this.maskEl.unmask();
\e[m
6427 \e[32m+
\e[m
\e[32m }
\e[m
6428 \e[32m+
\e[m
\e[41m
\e[m
6429 \e[32m+
\e[m
\e[32m Roo.log('xhr on error');
\e[m
6430 \e[32m+
\e[m
\e[41m
\e[m
6431 \e[32m+
\e[m
\e[32m var response = Roo.decode(xhr.responseText);
\e[m
6432 \e[32m+
\e[m
\e[41m
\e[m
6433 \e[32m+
\e[m
\e[32m Roo.log(response);
\e[m
6434 \e[32m+
\e[m
\e[41m
\e[m
6435 \e[32m+
\e[m
\e[32m },
\e[m
6436 \e[32m+
\e[m
\e[41m
\e[m
6437 \e[32m+
\e[m
\e[32m prepare : function(file)
\e[m
6438 \e[32m+
\e[m
\e[32m {
\e[m
\e[41m
\e[m
6439 \e[32m+
\e[m
\e[32m if(this.loadMask){
\e[m
6440 \e[32m+
\e[m
\e[32m this.maskEl.mask(this.loadingText);
\e[m
6441 \e[32m+
\e[m
\e[32m }
\e[m
6442 \e[32m+
\e[m
\e[41m
\e[m
6443 \e[32m+
\e[m
\e[32m this.file = false;
\e[m
6444 \e[32m+
\e[m
\e[32m this.exif = {};
\e[m
6445 \e[32m+
\e[m
\e[41m
\e[m
6446 \e[32m+
\e[m
\e[32m if(typeof(file) === 'string'){
\e[m
6447 \e[32m+
\e[m
\e[32m this.loadCanvas(file);
\e[m
6448 \e[32m+
\e[m
\e[32m return;
\e[m
6449 \e[32m+
\e[m
\e[32m }
\e[m
6450 \e[32m+
\e[m
\e[41m
\e[m
6451 \e[32m+
\e[m
\e[32m if(!file || !this.urlAPI){
\e[m
6452 \e[32m+
\e[m
\e[32m return;
\e[m
6453 \e[32m+
\e[m
\e[32m }
\e[m
6454 \e[32m+
\e[m
\e[41m
\e[m
6455 \e[32m+
\e[m
\e[32m this.file = file;
\e[m
6456 \e[32m+
\e[m
\e[32m this.cropType = file.type;
\e[m
6457 \e[32m+
\e[m
\e[41m
\e[m
6458 \e[32m+
\e[m
\e[32m var _this = this;
\e[m
6459 \e[32m+
\e[m
\e[41m
\e[m
6460 \e[32m+
\e[m
\e[32m if(this.fireEvent('prepare', this, this.file) != false){
\e[m
6461 \e[32m+
\e[m
\e[41m
\e[m
6462 \e[32m+
\e[m
\e[32m var reader = new FileReader();
\e[m
6463 \e[32m+
\e[m
\e[41m
\e[m
6464 \e[32m+
\e[m
\e[32m reader.onload = function (e) {
\e[m
6465 \e[32m+
\e[m
\e[32m if (e.target.error) {
\e[m
6466 \e[32m+
\e[m
\e[32m Roo.log(e.target.error);
\e[m
6467 \e[32m+
\e[m
\e[32m return;
\e[m
6468 \e[32m+
\e[m
\e[32m }
\e[m
6469 \e[32m+
\e[m
\e[41m
\e[m
6470 \e[32m+
\e[m
\e[32m var buffer = e.target.result,
\e[m
6471 \e[32m+
\e[m
\e[32m dataView = new DataView(buffer),
\e[m
6472 \e[32m+
\e[m
\e[32m offset = 2,
\e[m
6473 \e[32m+
\e[m
\e[32m maxOffset = dataView.byteLength - 4,
\e[m
6474 \e[32m+
\e[m
\e[32m markerBytes,
\e[m
6475 \e[32m+
\e[m
\e[32m markerLength;
\e[m
6476 \e[32m+
\e[m
\e[41m
\e[m
6477 \e[32m+
\e[m
\e[32m if (dataView.getUint16(0) === 0xffd8) {
\e[m
6478 \e[32m+
\e[m
\e[32m while (offset < maxOffset) {
\e[m
6479 \e[32m+
\e[m
\e[32m markerBytes = dataView.getUint16(offset);
\e[m
6480 \e[32m+
\e[m
\e[41m
\e[m
6481 \e[32m+
\e[m
\e[32m if ((markerBytes >= 0xffe0 && markerBytes <= 0xffef) || markerBytes === 0xfffe) {
\e[m
6482 \e[32m+
\e[m
\e[32m markerLength = dataView.getUint16(offset + 2) + 2;
\e[m
6483 \e[32m+
\e[m
\e[32m if (offset + markerLength > dataView.byteLength) {
\e[m
6484 \e[32m+
\e[m
\e[32m Roo.log('Invalid meta data: Invalid segment size.');
\e[m
6485 \e[32m+
\e[m
\e[32m break;
\e[m
6486 \e[32m+
\e[m
\e[32m }
\e[m
6487 \e[32m+
\e[m
\e[41m
\e[m
6488 \e[32m+
\e[m
\e[32m if(markerBytes == 0xffe1){
\e[m
6489 \e[32m+
\e[m
\e[32m _this.parseExifData(
\e[m
6490 \e[32m+
\e[m
\e[32m dataView,
\e[m
6491 \e[32m+
\e[m
\e[32m offset,
\e[m
6492 \e[32m+
\e[m
\e[32m markerLength
\e[m
6493 \e[32m+
\e[m
\e[32m );
\e[m
6494 \e[32m+
\e[m
\e[32m }
\e[m
6495 \e[32m+
\e[m
\e[41m
\e[m
6496 \e[32m+
\e[m
\e[32m offset += markerLength;
\e[m
6497 \e[32m+
\e[m
\e[41m
\e[m
6498 \e[32m+
\e[m
\e[32m continue;
\e[m
6499 \e[32m+
\e[m
\e[32m }
\e[m
6500 \e[32m+
\e[m
\e[41m
\e[m
6501 \e[32m+
\e[m
\e[32m break;
\e[m
6502 \e[32m+
\e[m
\e[32m }
\e[m
6503 \e[32m+
\e[m
\e[41m
\e[m
6504 \e[32m+
\e[m
\e[32m }
\e[m
6505 \e[32m+
\e[m
\e[41m
\e[m
6506 \e[32m+
\e[m
\e[32m var url = _this.urlAPI.createObjectURL(_this.file);
\e[m
6507 \e[32m+
\e[m
\e[41m
\e[m
6508 \e[32m+
\e[m
\e[32m _this.loadCanvas(url);
\e[m
6509 \e[32m+
\e[m
\e[41m
\e[m
6510 \e[32m+
\e[m
\e[32m return;
\e[m
6511 \e[32m+
\e[m
\e[32m }
\e[m
6512 \e[32m+
\e[m
\e[41m
\e[m
6513 \e[32m+
\e[m
\e[32m reader.readAsArrayBuffer(this.file);
\e[m
6514 \e[32m+
\e[m
\e[41m
\e[m
6515 \e[32m+
\e[m
\e[32m }
\e[m
6516 \e[32m+
\e[m
\e[41m
\e[m
6517 \e[32m+
\e[m
\e[32m },
\e[m
6518 \e[32m+
\e[m
\e[41m
\e[m
6519 \e[32m+
\e[m
\e[32m parseExifData : function(dataView, offset, length)
\e[m
6520 \e[32m+
\e[m
\e[32m {
\e[m
6521 \e[32m+
\e[m
\e[32m var tiffOffset = offset + 10,
\e[m
6522 \e[32m+
\e[m
\e[32m littleEndian,
\e[m
6523 \e[32m+
\e[m
\e[32m dirOffset;
\e[m
6524 \e[32m+
\e[m
\e[41m
\e[m
6525 \e[32m+
\e[m
\e[32m if (dataView.getUint32(offset + 4) !== 0x45786966) {
\e[m
6526 \e[32m+
\e[m
\e[32m // No Exif data, might be XMP data instead
\e[m
6527 \e[32m+
\e[m
\e[32m return;
\e[m
6528 \e[32m+
\e[m
\e[32m }
\e[m
6529 \e[32m+
\e[m
\e[41m
\e[m
6530 \e[32m+
\e[m
\e[32m // Check for the ASCII code for "Exif" (0x45786966):
\e[m
6531 \e[32m+
\e[m
\e[32m if (dataView.getUint32(offset + 4) !== 0x45786966) {
\e[m
6532 \e[32m+
\e[m
\e[32m // No Exif data, might be XMP data instead
\e[m
6533 \e[32m+
\e[m
\e[32m return;
\e[m
6534 \e[32m+
\e[m
\e[32m }
\e[m
6535 \e[32m+
\e[m
\e[32m if (tiffOffset + 8 > dataView.byteLength) {
\e[m
6536 \e[32m+
\e[m
\e[32m Roo.log('Invalid Exif data: Invalid segment size.');
\e[m
6537 \e[32m+
\e[m
\e[32m return;
\e[m
6538 \e[32m+
\e[m
\e[32m }
\e[m
6539 \e[32m+
\e[m
\e[32m // Check for the two null bytes:
\e[m
6540 \e[32m+
\e[m
\e[32m if (dataView.getUint16(offset + 8) !== 0x0000) {
\e[m
6541 \e[32m+
\e[m
\e[32m Roo.log('Invalid Exif data: Missing byte alignment offset.');
\e[m
6542 \e[32m+
\e[m
\e[32m return;
\e[m
6543 \e[32m+
\e[m
\e[32m }
\e[m
6544 \e[32m+
\e[m
\e[32m // Check the byte alignment:
\e[m
6545 \e[32m+
\e[m
\e[32m switch (dataView.getUint16(tiffOffset)) {
\e[m
6546 \e[32m+
\e[m
\e[32m case 0x4949:
\e[m
6547 \e[32m+
\e[m
\e[32m littleEndian = true;
\e[m
6548 \e[32m+
\e[m
\e[32m break;
\e[m
6549 \e[32m+
\e[m
\e[32m case 0x4D4D:
\e[m
6550 \e[32m+
\e[m
\e[32m littleEndian = false;
\e[m
6551 \e[32m+
\e[m
\e[32m break;
\e[m
6552 \e[32m+
\e[m
\e[32m default:
\e[m
6553 \e[32m+
\e[m
\e[32m Roo.log('Invalid Exif data: Invalid byte alignment marker.');
\e[m
6554 \e[32m+
\e[m
\e[32m return;
\e[m
6555 \e[32m+
\e[m
\e[32m }
\e[m
6556 \e[32m+
\e[m
\e[32m // Check for the TIFF tag marker (0x002A):
\e[m
6557 \e[32m+
\e[m
\e[32m if (dataView.getUint16(tiffOffset + 2, littleEndian) !== 0x002A) {
\e[m
6558 \e[32m+
\e[m
\e[32m Roo.log('Invalid Exif data: Missing TIFF marker.');
\e[m
6559 \e[32m+
\e[m
\e[32m return;
\e[m
6560 \e[32m+
\e[m
\e[32m }
\e[m
6561 \e[32m+
\e[m
\e[32m // Retrieve the directory offset bytes, usually 0x00000008 or 8 decimal:
\e[m
6562 \e[32m+
\e[m
\e[32m dirOffset = dataView.getUint32(tiffOffset + 4, littleEndian);
\e[m
6563 \e[32m+
\e[m
\e[41m
\e[m
6564 \e[32m+
\e[m
\e[32m this.parseExifTags(
\e[m
6565 \e[32m+
\e[m
\e[32m dataView,
\e[m
6566 \e[32m+
\e[m
\e[32m tiffOffset,
\e[m
6567 \e[32m+
\e[m
\e[32m tiffOffset + dirOffset,
\e[m
6568 \e[32m+
\e[m
\e[32m littleEndian
\e[m
6569 \e[32m+
\e[m
\e[32m );
\e[m
6570 \e[32m+
\e[m
\e[32m },
\e[m
6571 \e[32m+
\e[m
\e[41m
\e[m
6572 \e[32m+
\e[m
\e[32m parseExifTags : function(dataView, tiffOffset, dirOffset, littleEndian)
\e[m
6573 \e[32m+
\e[m
\e[32m {
\e[m
6574 \e[32m+
\e[m
\e[32m var tagsNumber,
\e[m
6575 \e[32m+
\e[m
\e[32m dirEndOffset,
\e[m
6576 \e[32m+
\e[m
\e[32m i;
\e[m
6577 \e[32m+
\e[m
\e[32m if (dirOffset + 6 > dataView.byteLength) {
\e[m
6578 \e[32m+
\e[m
\e[32m Roo.log('Invalid Exif data: Invalid directory offset.');
\e[m
6579 \e[32m+
\e[m
\e[32m return;
\e[m
6580 \e[32m+
\e[m
\e[32m }
\e[m
6581 \e[32m+
\e[m
\e[32m tagsNumber = dataView.getUint16(dirOffset, littleEndian);
\e[m
6582 \e[32m+
\e[m
\e[32m dirEndOffset = dirOffset + 2 + 12 * tagsNumber;
\e[m
6583 \e[32m+
\e[m
\e[32m if (dirEndOffset + 4 > dataView.byteLength) {
\e[m
6584 \e[32m+
\e[m
\e[32m Roo.log('Invalid Exif data: Invalid directory size.');
\e[m
6585 \e[32m+
\e[m
\e[32m return;
\e[m
6586 \e[32m+
\e[m
\e[32m }
\e[m
6587 \e[32m+
\e[m
\e[32m for (i = 0; i < tagsNumber; i += 1) {
\e[m
6588 \e[32m+
\e[m
\e[32m this.parseExifTag(
\e[m
6589 \e[32m+
\e[m
\e[32m dataView,
\e[m
6590 \e[32m+
\e[m
\e[32m tiffOffset,
\e[m
6591 \e[32m+
\e[m
\e[32m dirOffset + 2 + 12 * i, // tag offset
\e[m
6592 \e[32m+
\e[m
\e[32m littleEndian
\e[m
6593 \e[32m+
\e[m
\e[32m );
\e[m
6594 \e[32m+
\e[m
\e[32m }
\e[m
6595 \e[32m+
\e[m
\e[32m // Return the offset to the next directory:
\e[m
6596 \e[32m+
\e[m
\e[32m return dataView.getUint32(dirEndOffset, littleEndian);
\e[m
6597 \e[32m+
\e[m
\e[32m },
\e[m
6598 \e[32m+
\e[m
\e[41m
\e[m
6599 \e[32m+
\e[m
\e[32m parseExifTag : function (dataView, tiffOffset, offset, littleEndian)
\e[m
\e[41m
\e[m
6600 \e[32m+
\e[m
\e[32m {
\e[m
6601 \e[32m+
\e[m
\e[32m var tag = dataView.getUint16(offset, littleEndian);
\e[m
6602 \e[32m+
\e[m
\e[41m
\e[m
6603 \e[32m+
\e[m
\e[32m this.exif[tag] = this.getExifValue(
\e[m
6604 \e[32m+
\e[m
\e[32m dataView,
\e[m
6605 \e[32m+
\e[m
\e[32m tiffOffset,
\e[m
6606 \e[32m+
\e[m
\e[32m offset,
\e[m
6607 \e[32m+
\e[m
\e[32m dataView.getUint16(offset + 2, littleEndian), // tag type
\e[m
6608 \e[32m+
\e[m
\e[32m dataView.getUint32(offset + 4, littleEndian), // tag length
\e[m
6609 \e[32m+
\e[m
\e[32m littleEndian
\e[m
6610 \e[32m+
\e[m
\e[32m );
\e[m
6611 \e[32m+
\e[m
\e[32m },
\e[m
6612 \e[32m+
\e[m
\e[41m
\e[m
6613 \e[32m+
\e[m
\e[32m getExifValue : function (dataView, tiffOffset, offset, type, length, littleEndian)
\e[m
6614 \e[32m+
\e[m
\e[32m {
\e[m
6615 \e[32m+
\e[m
\e[32m var tagType = Roo.dialog.UploadCropbox.exifTagTypes[type],
\e[m
6616 \e[32m+
\e[m
\e[32m tagSize,
\e[m
6617 \e[32m+
\e[m
\e[32m dataOffset,
\e[m
6618 \e[32m+
\e[m
\e[32m values,
\e[m
6619 \e[32m+
\e[m
\e[32m i,
\e[m
6620 \e[32m+
\e[m
\e[32m str,
\e[m
6621 \e[32m+
\e[m
\e[32m c;
\e[m
6622 \e[32m+
\e[m
\e[41m
\e[m
6623 \e[32m+
\e[m
\e[32m if (!tagType) {
\e[m
6624 \e[32m+
\e[m
\e[32m Roo.log('Invalid Exif data: Invalid tag type.');
\e[m
6625 \e[32m+
\e[m
\e[32m return;
\e[m
6626 \e[32m+
\e[m
\e[32m }
\e[m
6627 \e[32m+
\e[m
\e[41m
\e[m
6628 \e[32m+
\e[m
\e[32m tagSize = tagType.size * length;
\e[m
6629 \e[32m+
\e[m
\e[32m // Determine if the value is contained in the dataOffset bytes,
\e[m
6630 \e[32m+
\e[m
\e[32m // or if the value at the dataOffset is a pointer to the actual data:
\e[m
6631 \e[32m+
\e[m
\e[32m dataOffset = tagSize > 4 ?
\e[m
6632 \e[32m+
\e[m
\e[32m tiffOffset + dataView.getUint32(offset + 8, littleEndian) : (offset + 8);
\e[m
6633 \e[32m+
\e[m
\e[32m if (dataOffset + tagSize > dataView.byteLength) {
\e[m
6634 \e[32m+
\e[m
\e[32m Roo.log('Invalid Exif data: Invalid data offset.');
\e[m
6635 \e[32m+
\e[m
\e[32m return;
\e[m
6636 \e[32m+
\e[m
\e[32m }
\e[m
6637 \e[32m+
\e[m
\e[32m if (length === 1) {
\e[m
6638 \e[32m+
\e[m
\e[32m return tagType.getValue(dataView, dataOffset, littleEndian);
\e[m
6639 \e[32m+
\e[m
\e[32m }
\e[m
6640 \e[32m+
\e[m
\e[32m values = [];
\e[m
6641 \e[32m+
\e[m
\e[32m for (i = 0; i < length; i += 1) {
\e[m
6642 \e[32m+
\e[m
\e[32m values[i] = tagType.getValue(dataView, dataOffset + i * tagType.size, littleEndian);
\e[m
6643 \e[32m+
\e[m
\e[32m }
\e[m
6644 \e[32m+
\e[m
\e[41m
\e[m
6645 \e[32m+
\e[m
\e[32m if (tagType.ascii) {
\e[m
6646 \e[32m+
\e[m
\e[32m str = '';
\e[m
6647 \e[32m+
\e[m
\e[32m // Concatenate the chars:
\e[m
6648 \e[32m+
\e[m
\e[32m for (i = 0; i < values.length; i += 1) {
\e[m
6649 \e[32m+
\e[m
\e[32m c = values[i];
\e[m
6650 \e[32m+
\e[m
\e[32m // Ignore the terminating NULL byte(s):
\e[m
6651 \e[32m+
\e[m
\e[32m if (c === '\u0000') {
\e[m
6652 \e[32m+
\e[m
\e[32m break;
\e[m
6653 \e[32m+
\e[m
\e[32m }
\e[m
6654 \e[32m+
\e[m
\e[32m str += c;
\e[m
6655 \e[32m+
\e[m
\e[32m }
\e[m
6656 \e[32m+
\e[m
\e[32m return str;
\e[m
6657 \e[32m+
\e[m
\e[32m }
\e[m
6658 \e[32m+
\e[m
\e[32m return values;
\e[m
6659 \e[32m+
\e[m
\e[32m }
\e[m
6660 \e[32m+
\e[m
\e[41m
\e[m
6661 \e[32m+
\e[m
\e[32m});
\e[m
6663 \e[32m+
\e[m
\e[32mRoo.apply(Roo.dialog.UploadCropbox, {
\e[m
6664 \e[32m+
\e[m
\e[32m tags : {
\e[m
6665 \e[32m+
\e[m
\e[32m 'Orientation': 0x0112
\e[m
6666 \e[32m+
\e[m
\e[32m },
\e[m
6667 \e[32m+
\e[m
\e[41m
\e[m
6668 \e[32m+
\e[m
\e[32m Orientation: {
\e[m
6669 \e[32m+
\e[m
\e[32m 1: 0, //'top-left',
\e[m
6670 \e[32m+
\e[m
\e[32m// 2: 'top-right',
\e[m
6671 \e[32m+
\e[m
\e[32m 3: 180, //'bottom-right',
\e[m
6672 \e[32m+
\e[m
\e[32m// 4: 'bottom-left',
\e[m
6673 \e[32m+
\e[m
\e[32m// 5: 'left-top',
\e[m
6674 \e[32m+
\e[m
\e[32m 6: 90, //'right-top',
\e[m
6675 \e[32m+
\e[m
\e[32m// 7: 'right-bottom',
\e[m
6676 \e[32m+
\e[m
\e[32m 8: 270 //'left-bottom'
\e[m
6677 \e[32m+
\e[m
\e[32m },
\e[m
6678 \e[32m+
\e[m
\e[41m
\e[m
6679 \e[32m+
\e[m
\e[32m exifTagTypes : {
\e[m
6680 \e[32m+
\e[m
\e[32m // byte, 8-bit unsigned int:
\e[m
6681 \e[32m+
\e[m
\e[32m 1: {
\e[m
6682 \e[32m+
\e[m
\e[32m getValue: function (dataView, dataOffset) {
\e[m
6683 \e[32m+
\e[m
\e[32m return dataView.getUint8(dataOffset);
\e[m
6684 \e[32m+
\e[m
\e[32m },
\e[m
6685 \e[32m+
\e[m
\e[32m size: 1
\e[m
6686 \e[32m+
\e[m
\e[32m },
\e[m
6687 \e[32m+
\e[m
\e[32m // ascii, 8-bit byte:
\e[m
6688 \e[32m+
\e[m
\e[32m 2: {
\e[m
6689 \e[32m+
\e[m
\e[32m getValue: function (dataView, dataOffset) {
\e[m
6690 \e[32m+
\e[m
\e[32m return String.fromCharCode(dataView.getUint8(dataOffset));
\e[m
6691 \e[32m+
\e[m
\e[32m },
\e[m
6692 \e[32m+
\e[m
\e[32m size: 1,
\e[m
6693 \e[32m+
\e[m
\e[32m ascii: true
\e[m
6694 \e[32m+
\e[m
\e[32m },
\e[m
6695 \e[32m+
\e[m
\e[32m // short, 16 bit int:
\e[m
6696 \e[32m+
\e[m
\e[32m 3: {
\e[m
6697 \e[32m+
\e[m
\e[32m getValue: function (dataView, dataOffset, littleEndian) {
\e[m
6698 \e[32m+
\e[m
\e[32m return dataView.getUint16(dataOffset, littleEndian);
\e[m
6699 \e[32m+
\e[m
\e[32m },
\e[m
6700 \e[32m+
\e[m
\e[32m size: 2
\e[m
6701 \e[32m+
\e[m
\e[32m },
\e[m
6702 \e[32m+
\e[m
\e[32m // long, 32 bit int:
\e[m
6703 \e[32m+
\e[m
\e[32m 4: {
\e[m
6704 \e[32m+
\e[m
\e[32m getValue: function (dataView, dataOffset, littleEndian) {
\e[m
6705 \e[32m+
\e[m
\e[32m return dataView.getUint32(dataOffset, littleEndian);
\e[m
6706 \e[32m+
\e[m
\e[32m },
\e[m
6707 \e[32m+
\e[m
\e[32m size: 4
\e[m
6708 \e[32m+
\e[m
\e[32m },
\e[m
6709 \e[32m+
\e[m
\e[32m // rational = two long values, first is numerator, second is denominator:
\e[m
6710 \e[32m+
\e[m
\e[32m 5: {
\e[m
6711 \e[32m+
\e[m
\e[32m getValue: function (dataView, dataOffset, littleEndian) {
\e[m
6712 \e[32m+
\e[m
\e[32m return dataView.getUint32(dataOffset, littleEndian) /
\e[m
6713 \e[32m+
\e[m
\e[32m dataView.getUint32(dataOffset + 4, littleEndian);
\e[m
6714 \e[32m+
\e[m
\e[32m },
\e[m
6715 \e[32m+
\e[m
\e[32m size: 8
\e[m
6716 \e[32m+
\e[m
\e[32m },
\e[m
6717 \e[32m+
\e[m
\e[32m // slong, 32 bit signed int:
\e[m
6718 \e[32m+
\e[m
\e[32m 9: {
\e[m
6719 \e[32m+
\e[m
\e[32m getValue: function (dataView, dataOffset, littleEndian) {
\e[m
6720 \e[32m+
\e[m
\e[32m return dataView.getInt32(dataOffset, littleEndian);
\e[m
6721 \e[32m+
\e[m
\e[32m },
\e[m
6722 \e[32m+
\e[m
\e[32m size: 4
\e[m
6723 \e[32m+
\e[m
\e[32m },
\e[m
6724 \e[32m+
\e[m
\e[32m // srational, two slongs, first is numerator, second is denominator:
\e[m
6725 \e[32m+
\e[m
\e[32m 10: {
\e[m
6726 \e[32m+
\e[m
\e[32m getValue: function (dataView, dataOffset, littleEndian) {
\e[m
6727 \e[32m+
\e[m
\e[32m return dataView.getInt32(dataOffset, littleEndian) /
\e[m
6728 \e[32m+
\e[m
\e[32m dataView.getInt32(dataOffset + 4, littleEndian);
\e[m
6729 \e[32m+
\e[m
\e[32m },
\e[m
6730 \e[32m+
\e[m
\e[32m size: 8
\e[m
6731 \e[32m+
\e[m
\e[32m }
\e[m
6732 \e[32m+
\e[m
\e[32m },
\e[m
6733 \e[32m+
\e[m
\e[41m
\e[m
6734 \e[32m+
\e[m
\e[32m footer : {
\e[m
6735 \e[32m+
\e[m
\e[32m STANDARD : [
\e[m
6736 \e[32m+
\e[m
\e[32m {
\e[m
6737 \e[32m+
\e[m
\e[32m tag : 'div',
\e[m
6738 \e[32m+
\e[m
\e[32m cls : 'btn-group roo-upload-cropbox-rotate-left',
\e[m
6739 \e[32m+
\e[m
\e[32m action : 'rotate-left',
\e[m
6740 \e[32m+
\e[m
\e[32m cn : [
\e[m
6741 \e[32m+
\e[m
\e[32m {
\e[m
6742 \e[32m+
\e[m
\e[32m tag : 'button',
\e[m
6743 \e[32m+
\e[m
\e[32m cls : 'btn btn-default',
\e[m
6744 \e[32m+
\e[m
\e[32m html : '<i class="fa fa-undo"></i>'
\e[m
6745 \e[32m+
\e[m
\e[32m }
\e[m
6746 \e[32m+
\e[m
\e[32m ]
\e[m
6747 \e[32m+
\e[m
\e[32m },
\e[m
6748 \e[32m+
\e[m
\e[32m {
\e[m
6749 \e[32m+
\e[m
\e[32m tag : 'div',
\e[m
6750 \e[32m+
\e[m
\e[32m cls : 'btn-group roo-upload-cropbox-picture',
\e[m
6751 \e[32m+
\e[m
\e[32m action : 'picture',
\e[m
6752 \e[32m+
\e[m
\e[32m cn : [
\e[m
6753 \e[32m+
\e[m
\e[32m {
\e[m
6754 \e[32m+
\e[m
\e[32m tag : 'button',
\e[m
6755 \e[32m+
\e[m
\e[32m cls : 'btn btn-default',
\e[m
6756 \e[32m+
\e[m
\e[32m html : '<i class="fa fa-picture-o"></i>'
\e[m
6757 \e[32m+
\e[m
\e[32m }
\e[m
6758 \e[32m+
\e[m
\e[32m ]
\e[m
6759 \e[32m+
\e[m
\e[32m },
\e[m
6760 \e[32m+
\e[m
\e[32m {
\e[m
6761 \e[32m+
\e[m
\e[32m tag : 'div',
\e[m
6762 \e[32m+
\e[m
\e[32m cls : 'btn-group roo-upload-cropbox-rotate-right',
\e[m
6763 \e[32m+
\e[m
\e[32m action : 'rotate-right',
\e[m
6764 \e[32m+
\e[m
\e[32m cn : [
\e[m
6765 \e[32m+
\e[m
\e[32m {
\e[m
6766 \e[32m+
\e[m
\e[32m tag : 'button',
\e[m
6767 \e[32m+
\e[m
\e[32m cls : 'btn btn-default',
\e[m
6768 \e[32m+
\e[m
\e[32m html : '<i class="fa fa-repeat"></i>'
\e[m
6769 \e[32m+
\e[m
\e[32m }
\e[m
6770 \e[32m+
\e[m
\e[32m ]
\e[m
6771 \e[32m+
\e[m
\e[32m }
\e[m
6772 \e[32m+
\e[m
\e[32m ],
\e[m
6773 \e[32m+
\e[m
\e[32m DOCUMENT : [
\e[m
6774 \e[32m+
\e[m
\e[32m {
\e[m
6775 \e[32m+
\e[m
\e[32m tag : 'div',
\e[m
6776 \e[32m+
\e[m
\e[32m cls : 'btn-group roo-upload-cropbox-rotate-left',
\e[m
6777 \e[32m+
\e[m
\e[32m action : 'rotate-left',
\e[m
6778 \e[32m+
\e[m
\e[32m cn : [
\e[m
6779 \e[32m+
\e[m
\e[32m {
\e[m
6780 \e[32m+
\e[m
\e[32m tag : 'button',
\e[m
6781 \e[32m+
\e[m
\e[32m cls : 'btn btn-default',
\e[m
6782 \e[32m+
\e[m
\e[32m html : '<i class="fa fa-undo"></i>'
\e[m
6783 \e[32m+
\e[m
\e[32m }
\e[m
6784 \e[32m+
\e[m
\e[32m ]
\e[m
6785 \e[32m+
\e[m
\e[32m },
\e[m
6786 \e[32m+
\e[m
\e[32m {
\e[m
6787 \e[32m+
\e[m
\e[32m tag : 'div',
\e[m
6788 \e[32m+
\e[m
\e[32m cls : 'btn-group roo-upload-cropbox-download',
\e[m
6789 \e[32m+
\e[m
\e[32m action : 'download',
\e[m
6790 \e[32m+
\e[m
\e[32m cn : [
\e[m
6791 \e[32m+
\e[m
\e[32m {
\e[m
6792 \e[32m+
\e[m
\e[32m tag : 'button',
\e[m
6793 \e[32m+
\e[m
\e[32m cls : 'btn btn-default',
\e[m
6794 \e[32m+
\e[m
\e[32m html : '<i class="fa fa-download"></i>'
\e[m
6795 \e[32m+
\e[m
\e[32m }
\e[m
6796 \e[32m+
\e[m
\e[32m ]
\e[m
6797 \e[32m+
\e[m
\e[32m },
\e[m
6798 \e[32m+
\e[m
\e[32m {
\e[m
6799 \e[32m+
\e[m
\e[32m tag : 'div',
\e[m
6800 \e[32m+
\e[m
\e[32m cls : 'btn-group roo-upload-cropbox-crop',
\e[m
6801 \e[32m+
\e[m
\e[32m action : 'crop',
\e[m
6802 \e[32m+
\e[m
\e[32m cn : [
\e[m
6803 \e[32m+
\e[m
\e[32m {
\e[m
6804 \e[32m+
\e[m
\e[32m tag : 'button',
\e[m
6805 \e[32m+
\e[m
\e[32m cls : 'btn btn-default',
\e[m
6806 \e[32m+
\e[m
\e[32m html : '<i class="fa fa-crop"></i>'
\e[m
6807 \e[32m+
\e[m
\e[32m }
\e[m
6808 \e[32m+
\e[m
\e[32m ]
\e[m
6809 \e[32m+
\e[m
\e[32m },
\e[m
6810 \e[32m+
\e[m
\e[32m {
\e[m
6811 \e[32m+
\e[m
\e[32m tag : 'div',
\e[m
6812 \e[32m+
\e[m
\e[32m cls : 'btn-group roo-upload-cropbox-trash',
\e[m
6813 \e[32m+
\e[m
\e[32m action : 'trash',
\e[m
6814 \e[32m+
\e[m
\e[32m cn : [
\e[m
6815 \e[32m+
\e[m
\e[32m {
\e[m
6816 \e[32m+
\e[m
\e[32m tag : 'button',
\e[m
6817 \e[32m+
\e[m
\e[32m cls : 'btn btn-default',
\e[m
6818 \e[32m+
\e[m
\e[32m html : '<i class="fa fa-trash"></i>'
\e[m
6819 \e[32m+
\e[m
\e[32m }
\e[m
6820 \e[32m+
\e[m
\e[32m ]
\e[m
6821 \e[32m+
\e[m
\e[32m },
\e[m
6822 \e[32m+
\e[m
\e[32m {
\e[m
6823 \e[32m+
\e[m
\e[32m tag : 'div',
\e[m
6824 \e[32m+
\e[m
\e[32m cls : 'btn-group roo-upload-cropbox-rotate-right',
\e[m
6825 \e[32m+
\e[m
\e[32m action : 'rotate-right',
\e[m
6826 \e[32m+
\e[m
\e[32m cn : [
\e[m
6827 \e[32m+
\e[m
\e[32m {
\e[m
6828 \e[32m+
\e[m
\e[32m tag : 'button',
\e[m
6829 \e[32m+
\e[m
\e[32m cls : 'btn btn-default',
\e[m
6830 \e[32m+
\e[m
\e[32m html : '<i class="fa fa-repeat"></i>'
\e[m
6831 \e[32m+
\e[m
\e[32m }
\e[m
6832 \e[32m+
\e[m
\e[32m ]
\e[m
6833 \e[32m+
\e[m
\e[32m }
\e[m
6834 \e[32m+
\e[m
\e[32m ],
\e[m
6835 \e[32m+
\e[m
\e[32m ROTATOR : [
\e[m
6836 \e[32m+
\e[m
\e[32m {
\e[m
6837 \e[32m+
\e[m
\e[32m tag : 'div',
\e[m
6838 \e[32m+
\e[m
\e[32m cls : 'btn-group roo-upload-cropbox-rotate-left',
\e[m
6839 \e[32m+
\e[m
\e[32m action : 'rotate-left',
\e[m
6840 \e[32m+
\e[m
\e[32m cn : [
\e[m
6841 \e[32m+
\e[m
\e[32m {
\e[m
6842 \e[32m+
\e[m
\e[32m tag : 'button',
\e[m
6843 \e[32m+
\e[m
\e[32m cls : 'btn btn-default',
\e[m
6844 \e[32m+
\e[m
\e[32m html : '<i class="fa fa-undo"></i>'
\e[m
6845 \e[32m+
\e[m
\e[32m }
\e[m
6846 \e[32m+
\e[m
\e[32m ]
\e[m
6847 \e[32m+
\e[m
\e[32m },
\e[m
6848 \e[32m+
\e[m
\e[32m {
\e[m
6849 \e[32m+
\e[m
\e[32m tag : 'div',
\e[m
6850 \e[32m+
\e[m
\e[32m cls : 'btn-group roo-upload-cropbox-rotate-right',
\e[m
6851 \e[32m+
\e[m
\e[32m action : 'rotate-right',
\e[m
6852 \e[32m+
\e[m
\e[32m cn : [
\e[m
6853 \e[32m+
\e[m
\e[32m {
\e[m
6854 \e[32m+
\e[m
\e[32m tag : 'button',
\e[m
6855 \e[32m+
\e[m
\e[32m cls : 'btn btn-default',
\e[m
6856 \e[32m+
\e[m
\e[32m html : '<i class="fa fa-repeat"></i>'
\e[m
6857 \e[32m+
\e[m
\e[32m }
\e[m
6858 \e[32m+
\e[m
\e[32m ]
\e[m
6859 \e[32m+
\e[m
\e[32m }
\e[m
6860 \e[32m+
\e[m
\e[32m ]
\e[m
6861 \e[32m+
\e[m
\e[32m }
\e[m
6862 \e[32m+
\e[m
\e[32m});
\e[m
6863 \e[1mdiff --git a/roojs-ui.js b/roojs-ui.js
\e[m
6864 \e[1mindex 98443d0ddf..0cc67d83a4 100644
\e[m
6865 \e[1m--- a/roojs-ui.js
\e[m
6866 \e[1m+++ b/roojs-ui.js
\e[m
6867 \e[36m@@ -1598,9 +1598,9 @@
\e[m
\e[mreturn this.el.getUpdateManager();},_handleRefresh:function(A,B,C){if(!C||!this.
\e[m
6868 te.setWidth(A);}if(this.adjustments){A+=this.adjustments[0];B+=this.adjustments[1];}return {"width":A,"height":B};},setSize:function(A,B){if(this.fitToFrame&&!this.ignoreResize(A,B)){if(this.fitContainer&&this.resizeEl!=this.el){this.el.setSize(A,B);}var C=this.adjustForComponents(A,B);
\e[m
6869 this.resizeEl.setSize(this.autoWidth?"auto":C.width,this.autoHeight?"auto":C.height);this.fireEvent('resize',this,C.width,C.height);}},getTitle:function(){return this.title;},setTitle:function(A){this.title=A;if(this.region){this.region.updatePanelTitle(this,A);
\e[m
6870 }},isClosable:function(){return this.closable;},beforeSlide:function(){this.el.clip();this.resizeEl.clip();},afterSlide:function(){this.el.unclip();this.resizeEl.unclip();},refresh:function(){if(this.refreshDelegate){this.loaded=false;this.refreshDelegate();
\e[m
6871 \e[31m-}},destroy:function(){this.el.removeAllListeners();var A=document.createElement("span");A.appendChild(this.el.dom);A.innerHTML="";this.el.remove();this.el=null;},form:false,view:false,addxtype:function(A){if(A.xtype.match(/^Form$/)){var el;el=this.el.createChild();
\e[m
6872 \e[31m-this.form=new Roo.form.Form(A);if(this.form.allItems.length){this.form.render(el.dom);}return this.form;}if(['View','JsonView','DatePicker'].indexOf(A.xtype)>-1){A.el=this.el.appendChild(document.createElement("div"));var B=new Roo.factory(A);B.render&&B.render(false,'');
\e[m
6873 \e[31m-this.view=B;return B;}return false;}});
\e[m
6874 \e[32m+
\e[m
\e[32m}},destroy:function(){this.el.removeAllListeners();var A=document.createElement("span");A.appendChild(this.el.dom);A.innerHTML="";this.el.remove();this.el=null;},form:false,view:false,addxtype:function(A){if(A.xtype.match(/^UploadCropbox$/)){this.cropbox=new Roo.factory(A);
\e[m
6875 \e[32m+
\e[m
\e[32mthis.cropbox.render(this.el);return this.cropbox;}if(A.xtype.match(/^Form$/)){var el;el=this.el.createChild();this.form=new Roo.form.Form(A);if(this.form.allItems.length){this.form.render(el.dom);}return this.form;}if(['View','JsonView','DatePicker'].indexOf(A.xtype)>-1){A.el=this.el.appendChild(document.createElement("div"));
\e[m
6876 \e[32m+
\e[m
\e[32mvar B=new Roo.factory(A);B.render&&B.render(false,'');this.view=B;return B;}return false;}});
\e[m
6877 // Roo/GridPanel.js
\e[m
6878 Roo.GridPanel=function(A,B){if(typeof(A.grid)!='undefined'){B=A;A=B.grid;}this.wrapper=Roo.DomHelper.append(document.body,{tag:"div",cls:"x-layout-grid-wrapper x-layout-inactive-content"},true);this.wrapper.dom.appendChild(A.getGridEl().dom);Roo.GridPanel.superclass.constructor.call(this,this.wrapper,B);
\e[m
6879 if(this.toolbar){this.toolbar.el.insertBefore(this.wrapper.dom.firstChild);}if(this.footer&&!this.footer.el&&this.footer.xtype){this.footer.container=this.grid.getView().getFooterPanel(true);this.footer.dataSource=this.grid.dataSource;this.footer=Roo.factory(this.footer,Roo);
\e[m
6880 \e[36m@@ -1929,3 +1929,103 @@
\e[m
\e[mF.push("(typeof("+G+") == 'undefined')");});var H='(('+F.join(" || ")+") ? undef
\e[m
6881 }return "'"+A+H+C+")"+A+"'";};var B;if(Roo.isGecko){B="tpl.compiled = function(values, parent){ with(values) { return '"+tpl.body.replace(/(\r\n|\n)/g,'\\n').replace(/'/g,"\\'").replace(this.re,fn)+"';};};";}else{B=["tpl.compiled = function(values, parent){ with (values) { return ['"];
\e[m
6882 B.push(tpl.body.replace(/(\r\n|\n)/g,'\\n').replace(/'/g,"\\'").replace(this.re,fn));B.push("'].join('');};};");B=B.join('');}Roo.debug&&Roo.log(B.replace(/\\n/,'\n'));eval(B);return this;},applyTemplate:function(A){return this.master.compiled.call(this,A,{}
\e[m
6883 );},apply:function(){return this.applyTemplate.apply(this,arguments);}});Roo.XTemplate.from=function(el){el=Roo.getDom(el);return new Roo.XTemplate(el.value||el.innerHTML);};
\e[m
6884 \e[32m+
\e[m
\e[32m// Roo/dialog/namespace.js
\e[m
6885 \e[32m+
\e[m
\e[32mRoo.dialog={};
\e[m
6886 \e[32m+
\e[m
\e[32m// Roo/dialog/UploadCropbox.js
\e[m
6887 \e[32m+
\e[m
\e[32mRoo.dialog.UploadCropbox=function(A){console.log("Dialog UploadCropbox Constructor");Roo.dialog.UploadCropbox.superclass.constructor.call(this,A);this.addEvents({"beforeselectfile":true,"initial":true,"crop":true,"prepare":true,"exception":true,"beforeloadcanvas":true,"trash":true,"download":true,"footerbuttonclick":true,"resize":true,"rotate":true,"inspect":true,"upload":true,"arrange":true,"loadcanvas":true}
\e[m
6888 \e[32m+
\e[m
\e[32m);this.buttons=this.buttons||Roo.dialog.UploadCropbox.footer.STANDARD;};Roo.extend(Roo.dialog.UploadCropbox,Roo.Component,{emptyText:'Click to upload image',rotateNotify:'Image is too small to rotate',errorTimeout:3000,scale:0,baseScale:1,rotate:0,dragable:false,pinching:false,mouseX:0,mouseY:0,cropData:false,minWidth:300,minHeight:300,file:false,exif:{}
\e[m
6889 \e[32m+
\e[m
\e[32m,baseRotate:1,cropType:'image/jpeg',buttons:false,canvasLoaded:false,isDocument:false,method:'POST',paramName:'imageUpload',loadMask:true,loadingText:'Loading...',maskEl:false,getAutoCreate:function(){var A={tag:'div',cls:'roo-upload-cropbox',cn:[{tag:'input',cls:'roo-upload-cropbox-selector',type:'file'}
\e[m
6890 \e[32m+
\e[m
\e[32m,{tag:'div',cls:'roo-upload-cropbox-body',style:'cursor:pointer',cn:[{tag:'div',cls:'roo-upload-cropbox-preview'},{tag:'div',cls:'roo-upload-cropbox-thumb'},{tag:'div',cls:'roo-upload-cropbox-empty-notify',html:this.emptyText},{tag:'div',cls:'roo-upload-cropbox-error-notify alert alert-danger',html:this.rotateNotify}
\e[m
6891 \e[32m+
\e[m
\e[32m]},{tag:'div',cls:'roo-upload-cropbox-footer',cn:{tag:'div',cls:'btn-group btn-group-justified roo-upload-cropbox-btn-group',cn:[]}}]};return A;},onRender:function(ct,A){console.log("On Render");console.log(this);Roo.dialog.UploadCropbox.superclass.onRender.call(this,ct,A);
\e[m
6892 \e[32m+
\e[m
\e[32mif(this.el){if(this.el.attr('xtype')){this.el.attr('xtypex',this.el.attr('xtype'));this.el.dom.removeAttribute('xtype');this.initEvents();}}else{var B=Roo.apply({},this.getAutoCreate());B.id=this.id||Roo.id();if(this.cls){B.cls=(typeof(B.cls)=='undefined'?this.cls:B.cls)+' '+this.cls;
\e[m
6893 \e[32m+
\e[m
\e[32m}if(this.style){B.style=(typeof(B.style)=='undefined'?this.style:B.style)+'; '+this.style;}this.el=ct.createChild(B,A);this.initEvents();}if(this.buttons.length){Roo.each(this.buttons,function(bb){var C=this.el.select('.roo-upload-cropbox-footer div.roo-upload-cropbox-btn-group').first().createChild(bb);
\e[m
6894 \e[32m+
\e[m
\e[32mC.on('click',this.onFooterButtonClick.createDelegate(this,[bb.action],true));},this);}if(this.loadMask){this.maskEl=this.el;}},initEvents:function(){this.urlAPI=(window.createObjectURL&&window)||(window.URL&&URL.revokeObjectURL&&URL)||(window.webkitURL&&webkitURL);
\e[m
6895 \e[32m+
\e[m
\e[32mthis.bodyEl=this.el.select('.roo-upload-cropbox-body',true).first();this.bodyEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';this.selectorEl=this.el.select('.roo-upload-cropbox-selector',true).first();this.selectorEl.hide();this.previewEl=this.el.select('.roo-upload-cropbox-preview',true).first();
\e[m
6896 \e[32m+
\e[m
\e[32mthis.previewEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';this.thumbEl=this.el.select('.roo-upload-cropbox-thumb',true).first();this.thumbEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';this.thumbEl.hide();this.notifyEl=this.el.select('.roo-upload-cropbox-empty-notify',true).first();
\e[m
6897 \e[32m+
\e[m
\e[32mthis.notifyEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';this.errorEl=this.el.select('.roo-upload-cropbox-error-notify',true).first();this.errorEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';this.errorEl.hide();this.footerEl=this.el.select('.roo-upload-cropbox-footer',true).first();
\e[m
6898 \e[32m+
\e[m
\e[32mthis.footerEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';this.footerEl.hide();this.setThumbBoxSize();this.bind();this.resize();this.fireEvent('initial',this);},bind:function(){var A=this;window.addEventListener("resize",function(){A.resize();
\e[m
6899 \e[32m+
\e[m
\e[32m});this.bodyEl.on('click',this.beforeSelectFile,this);if(Roo.isTouch){this.bodyEl.on('touchstart',this.onTouchStart,this);this.bodyEl.on('touchmove',this.onTouchMove,this);this.bodyEl.on('touchend',this.onTouchEnd,this);}if(!Roo.isTouch){this.bodyEl.on('mousedown',this.onMouseDown,this);
\e[m
6900 \e[32m+
\e[m
\e[32mthis.bodyEl.on('mousemove',this.onMouseMove,this);var B=(/Firefox/i.test(navigator.userAgent))?'DOMMouseScroll':'mousewheel';this.bodyEl.on(B,this.onMouseWheel,this);Roo.get(document).on('mouseup',this.onMouseUp,this);}this.selectorEl.on('change',this.onFileSelected,this);
\e[m
6901 \e[32m+
\e[m
\e[32m},reset:function(){this.scale=0;this.baseScale=1;this.rotate=0;this.baseRotate=1;this.dragable=false;this.pinching=false;this.mouseX=0;this.mouseY=0;this.cropData=false;this.notifyEl.dom.innerHTML=this.emptyText;},resize:function(){if(this.fireEvent('resize',this)!=false){this.setThumbBoxPosition();
\e[m
6902 \e[32m+
\e[m
\e[32mthis.setCanvasPosition();}},onFooterButtonClick:function(e,el,o,A){switch(A){case 'rotate-left':this.onRotateLeft(e);break;case 'rotate-right':this.onRotateRight(e);break;case 'picture':this.beforeSelectFile(e);break;case 'trash':this.trash(e);break;case 'crop':this.crop(e);
\e[m
6903 \e[32m+
\e[m
\e[32mbreak;case 'download':this.download(e);break;default:break;}this.fireEvent('footerbuttonclick',this,A);},beforeSelectFile:function(e){e.preventDefault();if(this.fireEvent('beforeselectfile',this)!=false){this.selectorEl.dom.click();}},onFileSelected:function(e){e.preventDefault();
\e[m
6904 \e[32m+
\e[m
\e[32mif(typeof(this.selectorEl.dom.files)=='undefined'||!this.selectorEl.dom.files.length){return;}var A=this.selectorEl.dom.files[0];if(this.fireEvent('inspect',this,A)!=false){this.prepare(A);}},trash:function(e){this.fireEvent('trash',this);},download:function(e){this.fireEvent('download',this);
\e[m
6905 \e[32m+
\e[m
\e[32m},loadCanvas:function(A){if(this.fireEvent('beforeloadcanvas',this,A)!=false){this.reset();this.imageEl=document.createElement('img');var B=this;this.imageEl.addEventListener("load",function(){B.onLoadCanvas();});this.imageEl.src=A;}},onLoadCanvas:function(){this.imageEl.OriginWidth=this.imageEl.naturalWidth||this.imageEl.width;
\e[m
6906 \e[32m+
\e[m
\e[32mthis.imageEl.OriginHeight=this.imageEl.naturalHeight||this.imageEl.height;if(this.fireEvent('loadcanvas',this,this.imageEl)!=false){this.bodyEl.un('click',this.beforeSelectFile,this);this.notifyEl.hide();this.thumbEl.show();this.footerEl.show();this.baseRotateLevel();
\e[m
6907 \e[32m+
\e[m
\e[32mif(this.isDocument){this.setThumbBoxSize();}this.setThumbBoxPosition();this.baseScaleLevel();this.draw();this.resize();this.canvasLoaded=true;}if(this.loadMask){this.maskEl.unmask();}},setCanvasPosition:function(){if(!this.canvasEl){return;}var pw=Math.ceil((this.bodyEl.getWidth()-this.canvasEl.width)/2);
\e[m
6908 \e[32m+
\e[m
\e[32mvar ph=Math.ceil((this.bodyEl.getHeight()-this.canvasEl.height)/2);this.previewEl.setLeft(pw);this.previewEl.setTop(ph);},onMouseDown:function(e){e.stopEvent();this.dragable=true;this.pinching=false;if(this.isDocument&&(this.canvasEl.width<this.thumbEl.getWidth()||this.canvasEl.height<this.thumbEl.getHeight())){this.dragable=false;
\e[m
6909 \e[32m+
\e[m
\e[32mreturn;}this.mouseX=Roo.isTouch?e.browserEvent.touches[0].pageX:e.getPageX();this.mouseY=Roo.isTouch?e.browserEvent.touches[0].pageY:e.getPageY();},onMouseMove:function(e){e.stopEvent();if(!this.canvasLoaded){return;}if(!this.dragable){return;}var A=Math.ceil(this.thumbEl.getLeft(true));
\e[m
6910 \e[32m+
\e[m
\e[32mvar B=Math.ceil(this.thumbEl.getTop(true));var C=Math.ceil(A+this.thumbEl.getWidth()-this.canvasEl.width);var D=Math.ceil(B+this.thumbEl.getHeight()-this.canvasEl.height);var x=Roo.isTouch?e.browserEvent.touches[0].pageX:e.getPageX();var y=Roo.isTouch?e.browserEvent.touches[0].pageY:e.getPageY();
\e[m
6911 \e[32m+
\e[m
\e[32mx=x-this.mouseX;y=y-this.mouseY;var E=Math.ceil(x+this.previewEl.getLeft(true));var F=Math.ceil(y+this.previewEl.getTop(true));E=(A<E)?A:((C>E)?C:E);F=(B<F)?B:((D>F)?D:F);this.previewEl.setLeft(E);this.previewEl.setTop(F);this.mouseX=Roo.isTouch?e.browserEvent.touches[0].pageX:e.getPageX();
\e[m
6912 \e[32m+
\e[m
\e[32mthis.mouseY=Roo.isTouch?e.browserEvent.touches[0].pageY:e.getPageY();},onMouseUp:function(e){e.stopEvent();this.dragable=false;},onMouseWheel:function(e){e.stopEvent();this.startScale=this.scale;this.scale=(e.getWheelDelta()==1)?(this.scale+1):(this.scale-1);
\e[m
6913 \e[32m+
\e[m
\e[32mif(!this.zoomable()){this.scale=this.startScale;return;}this.draw();return;},zoomable:function(){var A=this.thumbEl.getWidth()/this.minWidth;if(this.minWidth<this.minHeight){A=this.thumbEl.getHeight()/this.minHeight;}var B=Math.ceil(this.imageEl.OriginWidth*this.getScaleLevel()/A);
\e[m
6914 \e[32m+
\e[m
\e[32mvar C=Math.ceil(this.imageEl.OriginHeight*this.getScaleLevel()/A);if(this.isDocument&&(this.rotate==0||this.rotate==180)&&(B>this.imageEl.OriginWidth||C>this.imageEl.OriginHeight||(B<this.minWidth&&C<this.minHeight))){return false;}if(this.isDocument&&(this.rotate==90||this.rotate==270)&&(B>this.imageEl.OriginWidth||C>this.imageEl.OriginHeight||(B<this.minHeight&&C<this.minWidth))){return false;
\e[m
6915 \e[32m+
\e[m
\e[32m}if(!this.isDocument&&(this.rotate==0||this.rotate==180)&&(B<this.minWidth||B>this.imageEl.OriginWidth||C<this.minHeight||C>this.imageEl.OriginHeight)){return false;}if(!this.isDocument&&(this.rotate==90||this.rotate==270)&&(B<this.minHeight||B>this.imageEl.OriginWidth||C<this.minWidth||C>this.imageEl.OriginHeight)){return false;
\e[m
6916 \e[32m+
\e[m
\e[32m}return true;},onRotateLeft:function(e){if(!this.isDocument&&(this.canvasEl.height<this.thumbEl.getWidth()||this.canvasEl.width<this.thumbEl.getHeight())){var A=this.thumbEl.getWidth()/this.minWidth;var bw=Math.ceil(this.canvasEl.width/this.getScaleLevel());
\e[m
6917 \e[32m+
\e[m
\e[32mvar bh=Math.ceil(this.canvasEl.height/this.getScaleLevel());this.startScale=this.scale;while(this.getScaleLevel()<A){this.scale=this.scale+1;if(!this.zoomable()){break;}if(Math.ceil(bw*this.getScaleLevel())<this.thumbEl.getHeight()||Math.ceil(bh*this.getScaleLevel())<this.thumbEl.getWidth()){continue;
\e[m
6918 \e[32m+
\e[m
\e[32m}this.rotate=(this.rotate<90)?270:this.rotate-90;this.draw();return;}this.scale=this.startScale;this.onRotateFail();return false;}this.rotate=(this.rotate<90)?270:this.rotate-90;if(this.isDocument){this.setThumbBoxSize();this.setThumbBoxPosition();this.setCanvasPosition();
\e[m
6919 \e[32m+
\e[m
\e[32m}this.draw();this.fireEvent('rotate',this,'left');},onRotateRight:function(e){if(!this.isDocument&&(this.canvasEl.height<this.thumbEl.getWidth()||this.canvasEl.width<this.thumbEl.getHeight())){var A=this.thumbEl.getWidth()/this.minWidth;var bw=Math.ceil(this.canvasEl.width/this.getScaleLevel());
\e[m
6920 \e[32m+
\e[m
\e[32mvar bh=Math.ceil(this.canvasEl.height/this.getScaleLevel());this.startScale=this.scale;while(this.getScaleLevel()<A){this.scale=this.scale+1;if(!this.zoomable()){break;}if(Math.ceil(bw*this.getScaleLevel())<this.thumbEl.getHeight()||Math.ceil(bh*this.getScaleLevel())<this.thumbEl.getWidth()){continue;
\e[m
6921 \e[32m+
\e[m
\e[32m}this.rotate=(this.rotate>180)?0:this.rotate+90;this.draw();return;}this.scale=this.startScale;this.onRotateFail();return false;}this.rotate=(this.rotate>180)?0:this.rotate+90;if(this.isDocument){this.setThumbBoxSize();this.setThumbBoxPosition();this.setCanvasPosition();
\e[m
6922 \e[32m+
\e[m
\e[32m}this.draw();this.fireEvent('rotate',this,'right');},onRotateFail:function(){this.errorEl.show(true);var A=this;(function(){A.errorEl.hide(true);}).defer(this.errorTimeout);},draw:function(){this.previewEl.dom.innerHTML='';var A=document.createElement("canvas");
\e[m
6923 \e[32m+
\e[m
\e[32mvar B=A.getContext("2d");A.width=this.imageEl.OriginWidth*this.getScaleLevel();A.height=this.imageEl.OriginWidth*this.getScaleLevel();var C=this.imageEl.OriginWidth/2;if(this.imageEl.OriginWidth<this.imageEl.OriginHeight){A.width=this.imageEl.OriginHeight*this.getScaleLevel();
\e[m
6924 \e[32m+
\e[m
\e[32mA.height=this.imageEl.OriginHeight*this.getScaleLevel();C=this.imageEl.OriginHeight/2;}B.scale(this.getScaleLevel(),this.getScaleLevel());B.translate(C,C);B.rotate(this.rotate*Math.PI/180);B.drawImage(this.imageEl,0,0,this.imageEl.OriginWidth,this.imageEl.OriginHeight,C*-1,C*-1,this.imageEl.OriginWidth,this.imageEl.OriginHeight);
\e[m
6925 \e[32m+
\e[m
\e[32mthis.canvasEl=document.createElement("canvas");this.contextEl=this.canvasEl.getContext("2d");switch(this.rotate){case 0:this.canvasEl.width=this.imageEl.OriginWidth*this.getScaleLevel();this.canvasEl.height=this.imageEl.OriginHeight*this.getScaleLevel();this.contextEl.drawImage(A,0,0,this.canvasEl.width,this.canvasEl.height,0,0,this.canvasEl.width,this.canvasEl.height);
\e[m
6926 \e[32m+
\e[m
\e[32mbreak;case 90:this.canvasEl.width=this.imageEl.OriginHeight*this.getScaleLevel();this.canvasEl.height=this.imageEl.OriginWidth*this.getScaleLevel();if(this.imageEl.OriginWidth>this.imageEl.OriginHeight){this.contextEl.drawImage(A,Math.abs(this.canvasEl.width-this.canvasEl.height),0,this.canvasEl.width,this.canvasEl.height,0,0,this.canvasEl.width,this.canvasEl.height);
\e[m
6927 \e[32m+
\e[m
\e[32mbreak;}this.contextEl.drawImage(A,0,0,this.canvasEl.width,this.canvasEl.height,0,0,this.canvasEl.width,this.canvasEl.height);break;case 180:this.canvasEl.width=this.imageEl.OriginWidth*this.getScaleLevel();this.canvasEl.height=this.imageEl.OriginHeight*this.getScaleLevel();
\e[m
6928 \e[32m+
\e[m
\e[32mif(this.imageEl.OriginWidth>this.imageEl.OriginHeight){this.contextEl.drawImage(A,0,Math.abs(this.canvasEl.width-this.canvasEl.height),this.canvasEl.width,this.canvasEl.height,0,0,this.canvasEl.width,this.canvasEl.height);break;}this.contextEl.drawImage(A,Math.abs(this.canvasEl.width-this.canvasEl.height),0,this.canvasEl.width,this.canvasEl.height,0,0,this.canvasEl.width,this.canvasEl.height);
\e[m
6929 \e[32m+
\e[m
\e[32mbreak;case 270:this.canvasEl.width=this.imageEl.OriginHeight*this.getScaleLevel();this.canvasEl.height=this.imageEl.OriginWidth*this.getScaleLevel();if(this.imageEl.OriginWidth>this.imageEl.OriginHeight){this.contextEl.drawImage(A,0,0,this.canvasEl.width,this.canvasEl.height,0,0,this.canvasEl.width,this.canvasEl.height);
\e[m
6930 \e[32m+
\e[m
\e[32mbreak;}this.contextEl.drawImage(A,0,Math.abs(this.canvasEl.width-this.canvasEl.height),this.canvasEl.width,this.canvasEl.height,0,0,this.canvasEl.width,this.canvasEl.height);break;default:break;}this.previewEl.appendChild(this.canvasEl);this.setCanvasPosition();
\e[m
6931 \e[32m+
\e[m
\e[32m},crop:function(){if(!this.canvasLoaded){return;}var A=document.createElement("canvas");var B=A.getContext("2d");A.width=(this.imageEl.OriginWidth>this.imageEl.OriginHeight)?this.imageEl.OriginWidth:this.imageEl.OriginHeight;A.height=(this.imageEl.OriginWidth>this.imageEl.OriginHeight)?this.imageEl.OriginWidth:this.imageEl.OriginHeight;
\e[m
6932 \e[32m+
\e[m
\e[32mvar C=A.width/2;B.translate(C,C);B.rotate(this.rotate*Math.PI/180);B.drawImage(this.imageEl,0,0,this.imageEl.OriginWidth,this.imageEl.OriginHeight,C*-1,C*-1,this.imageEl.OriginWidth,this.imageEl.OriginHeight);var D=document.createElement("canvas");var E=D.getContext("2d");
\e[m
6933 \e[32m+
\e[m
\e[32mD.width=this.minWidth;D.height=this.minHeight;switch(this.rotate){case 0:var F=(this.thumbEl.getWidth()/this.getScaleLevel()>this.imageEl.OriginWidth)?this.imageEl.OriginWidth:(this.thumbEl.getWidth()/this.getScaleLevel());var G=(this.thumbEl.getHeight()/this.getScaleLevel()>this.imageEl.OriginHeight)?this.imageEl.OriginHeight:(this.thumbEl.getHeight()/this.getScaleLevel());
\e[m
6934 \e[32m+
\e[m
\e[32mvar x=(this.thumbEl.getLeft(true)>this.previewEl.getLeft(true))?0:((this.previewEl.getLeft(true)-this.thumbEl.getLeft(true))/this.getScaleLevel());var y=(this.thumbEl.getTop(true)>this.previewEl.getTop(true))?0:((this.previewEl.getTop(true)-this.thumbEl.getTop(true))/this.getScaleLevel());
\e[m
6935 \e[32m+
\e[m
\e[32mvar H=this.minWidth-2*x;var I=this.minHeight-2*y;var J=1;if((x==0&&y==0)||(x==0&&y>0)){J=H/F;}if(x>0&&y==0){J=I/G;}if(x>0&&y>0){J=H/F;if(F<G){J=I/G;}}E.scale(J,J);var sx=Math.min(this.canvasEl.width-this.thumbEl.getWidth(),this.thumbEl.getLeft(true)-this.previewEl.getLeft(true));
\e[m
6936 \e[32m+
\e[m
\e[32mvar sy=Math.min(this.canvasEl.height-this.thumbEl.getHeight(),this.thumbEl.getTop(true)-this.previewEl.getTop(true));sx=sx<0?0:(sx/this.getScaleLevel());sy=sy<0?0:(sy/this.getScaleLevel());E.drawImage(A,sx,sy,F,G,x,y,F,G);break;case 90:var F=(this.thumbEl.getWidth()/this.getScaleLevel()>this.imageEl.OriginHeight)?this.imageEl.OriginHeight:(this.thumbEl.getWidth()/this.getScaleLevel());
\e[m
6937 \e[32m+
\e[m
\e[32mvar G=(this.thumbEl.getHeight()/this.getScaleLevel()>this.imageEl.OriginWidth)?this.imageEl.OriginWidth:(this.thumbEl.getHeight()/this.getScaleLevel());var x=(this.thumbEl.getLeft(true)>this.previewEl.getLeft(true))?0:((this.previewEl.getLeft(true)-this.thumbEl.getLeft(true))/this.getScaleLevel());
\e[m
6938 \e[32m+
\e[m
\e[32mvar y=(this.thumbEl.getTop(true)>this.previewEl.getTop(true))?0:((this.previewEl.getTop(true)-this.thumbEl.getTop(true))/this.getScaleLevel());var H=this.minWidth-2*x;var I=this.minHeight-2*y;var J=1;if((x==0&&y==0)||(x==0&&y>0)){J=H/F;}if(x>0&&y==0){J=I/G;
\e[m
6939 \e[32m+
\e[m
\e[32m}if(x>0&&y>0){J=H/F;if(F<G){J=I/G;}}E.scale(J,J);var sx=Math.min(this.canvasEl.width-this.thumbEl.getWidth(),this.thumbEl.getLeft(true)-this.previewEl.getLeft(true));var sy=Math.min(this.canvasEl.height-this.thumbEl.getHeight(),this.thumbEl.getTop(true)-this.previewEl.getTop(true));
\e[m
6940 \e[32m+
\e[m
\e[32msx=sx<0?0:(sx/this.getScaleLevel());sy=sy<0?0:(sy/this.getScaleLevel());sx+=(this.imageEl.OriginWidth>this.imageEl.OriginHeight)?Math.abs(this.imageEl.OriginWidth-this.imageEl.OriginHeight):0;E.drawImage(A,sx,sy,F,G,x,y,F,G);break;case 180:var F=(this.thumbEl.getWidth()/this.getScaleLevel()>this.imageEl.OriginWidth)?this.imageEl.OriginWidth:(this.thumbEl.getWidth()/this.getScaleLevel());
\e[m
6941 \e[32m+
\e[m
\e[32mvar G=(this.thumbEl.getHeight()/this.getScaleLevel()>this.imageEl.OriginHeight)?this.imageEl.OriginHeight:(this.thumbEl.getHeight()/this.getScaleLevel());var x=(this.thumbEl.getLeft(true)>this.previewEl.getLeft(true))?0:((this.previewEl.getLeft(true)-this.thumbEl.getLeft(true))/this.getScaleLevel());
\e[m
6942 \e[32m+
\e[m
\e[32mvar y=(this.thumbEl.getTop(true)>this.previewEl.getTop(true))?0:((this.previewEl.getTop(true)-this.thumbEl.getTop(true))/this.getScaleLevel());var H=this.minWidth-2*x;var I=this.minHeight-2*y;var J=1;if((x==0&&y==0)||(x==0&&y>0)){J=H/F;}if(x>0&&y==0){J=I/G;
\e[m
6943 \e[32m+
\e[m
\e[32m}if(x>0&&y>0){J=H/F;if(F<G){J=I/G;}}E.scale(J,J);var sx=Math.min(this.canvasEl.width-this.thumbEl.getWidth(),this.thumbEl.getLeft(true)-this.previewEl.getLeft(true));var sy=Math.min(this.canvasEl.height-this.thumbEl.getHeight(),this.thumbEl.getTop(true)-this.previewEl.getTop(true));
\e[m
6944 \e[32m+
\e[m
\e[32msx=sx<0?0:(sx/this.getScaleLevel());sy=sy<0?0:(sy/this.getScaleLevel());sx+=(this.imageEl.OriginWidth>this.imageEl.OriginHeight)?0:Math.abs(this.imageEl.OriginWidth-this.imageEl.OriginHeight);sy+=(this.imageEl.OriginWidth>this.imageEl.OriginHeight)?Math.abs(this.imageEl.OriginWidth-this.imageEl.OriginHeight):0;
\e[m
6945 \e[32m+
\e[m
\e[32mE.drawImage(A,sx,sy,F,G,x,y,F,G);break;case 270:var F=(this.thumbEl.getWidth()/this.getScaleLevel()>this.imageEl.OriginHeight)?this.imageEl.OriginHeight:(this.thumbEl.getWidth()/this.getScaleLevel());var G=(this.thumbEl.getHeight()/this.getScaleLevel()>this.imageEl.OriginWidth)?this.imageEl.OriginWidth:(this.thumbEl.getHeight()/this.getScaleLevel());
\e[m
6946 \e[32m+
\e[m
\e[32mvar x=(this.thumbEl.getLeft(true)>this.previewEl.getLeft(true))?0:((this.previewEl.getLeft(true)-this.thumbEl.getLeft(true))/this.getScaleLevel());var y=(this.thumbEl.getTop(true)>this.previewEl.getTop(true))?0:((this.previewEl.getTop(true)-this.thumbEl.getTop(true))/this.getScaleLevel());
\e[m
6947 \e[32m+
\e[m
\e[32mvar H=this.minWidth-2*x;var I=this.minHeight-2*y;var J=1;if((x==0&&y==0)||(x==0&&y>0)){J=H/F;}if(x>0&&y==0){J=I/G;}if(x>0&&y>0){J=H/F;if(F<G){J=I/G;}}E.scale(J,J);var sx=Math.min(this.canvasEl.width-this.thumbEl.getWidth(),this.thumbEl.getLeft(true)-this.previewEl.getLeft(true));
\e[m
6948 \e[32m+
\e[m
\e[32mvar sy=Math.min(this.canvasEl.height-this.thumbEl.getHeight(),this.thumbEl.getTop(true)-this.previewEl.getTop(true));sx=sx<0?0:(sx/this.getScaleLevel());sy=sy<0?0:(sy/this.getScaleLevel());sy+=(this.imageEl.OriginWidth>this.imageEl.OriginHeight)?0:Math.abs(this.imageEl.OriginWidth-this.imageEl.OriginHeight);
\e[m
6949 \e[32m+
\e[m
\e[32mE.drawImage(A,sx,sy,F,G,x,y,F,G);break;default:break;}this.cropData=D.toDataURL(this.cropType);if(this.fireEvent('crop',this,this.cropData)!==false){this.process(this.file,this.cropData);}return;},setThumbBoxSize:function(){var A,B;if(this.isDocument&&typeof(this.imageEl)!='undefined'){A=(this.imageEl.OriginWidth>this.imageEl.OriginHeight)?Math.max(this.minWidth,this.minHeight):Math.min(this.minWidth,this.minHeight);
\e[m
6950 \e[32m+
\e[m
\e[32mB=(this.imageEl.OriginWidth>this.imageEl.OriginHeight)?Math.min(this.minWidth,this.minHeight):Math.max(this.minWidth,this.minHeight);this.minWidth=A;this.minHeight=B;if(this.rotate==90||this.rotate==270){this.minWidth=B;this.minHeight=A;}}B=300;A=Math.ceil(this.minWidth*B/this.minHeight);
\e[m
6951 \e[32m+
\e[m
\e[32mif(this.minWidth>this.minHeight){A=300;B=Math.ceil(this.minHeight*A/this.minWidth);}this.thumbEl.setStyle({width:A+'px',height:B+'px'});return;},setThumbBoxPosition:function(){var x=Math.ceil((this.bodyEl.getWidth()-this.thumbEl.getWidth())/2);var y=Math.ceil((this.bodyEl.getHeight()-this.thumbEl.getHeight())/2);
\e[m
6952 \e[32m+
\e[m
\e[32mthis.thumbEl.setLeft(x);this.thumbEl.setTop(y);},baseRotateLevel:function(){this.baseRotate=1;if(typeof(this.exif)!='undefined'&&typeof(this.exif[Roo.dialog.UploadCropbox['tags']['Orientation']])!='undefined'&&[1,3,6,8].indexOf(this.exif[Roo.dialog.UploadCropbox['tags']['Orientation']])!=-1){this.baseRotate=this.exif[Roo.dialog.UploadCropbox['tags']['Orientation']];
\e[m
6953 \e[32m+
\e[m
\e[32m}this.rotate=Roo.dialog.UploadCropbox['Orientation'][this.baseRotate];},baseScaleLevel:function(){var A,B;if(this.isDocument){if(this.baseRotate==6||this.baseRotate==8){B=this.thumbEl.getHeight();this.baseScale=B/this.imageEl.OriginWidth;if(this.imageEl.OriginHeight*this.baseScale>this.thumbEl.getWidth()){A=this.thumbEl.getWidth();
\e[m
6954 \e[32m+
\e[m
\e[32mthis.baseScale=A/this.imageEl.OriginHeight;}return;}B=this.thumbEl.getHeight();this.baseScale=B/this.imageEl.OriginHeight;if(this.imageEl.OriginWidth*this.baseScale>this.thumbEl.getWidth()){A=this.thumbEl.getWidth();this.baseScale=A/this.imageEl.OriginWidth;
\e[m
6955 \e[32m+
\e[m
\e[32m}return;}if(this.baseRotate==6||this.baseRotate==8){A=this.thumbEl.getHeight();this.baseScale=A/this.imageEl.OriginHeight;if(this.imageEl.OriginHeight*this.baseScale<this.thumbEl.getWidth()){B=this.thumbEl.getWidth();this.baseScale=B/this.imageEl.OriginHeight;
\e[m
6956 \e[32m+
\e[m
\e[32m}if(this.imageEl.OriginWidth>this.imageEl.OriginHeight){B=this.thumbEl.getWidth();this.baseScale=B/this.imageEl.OriginHeight;if(this.imageEl.OriginWidth*this.baseScale<this.thumbEl.getHeight()){A=this.thumbEl.getHeight();this.baseScale=A/this.imageEl.OriginWidth;
\e[m
6957 \e[32m+
\e[m
\e[32m}}return;}A=this.thumbEl.getWidth();this.baseScale=A/this.imageEl.OriginWidth;if(this.imageEl.OriginHeight*this.baseScale<this.thumbEl.getHeight()){B=this.thumbEl.getHeight();this.baseScale=B/this.imageEl.OriginHeight;}if(this.imageEl.OriginWidth>this.imageEl.OriginHeight){B=this.thumbEl.getHeight();
\e[m
6958 \e[32m+
\e[m
\e[32mthis.baseScale=B/this.imageEl.OriginHeight;if(this.imageEl.OriginWidth*this.baseScale<this.thumbEl.getWidth()){A=this.thumbEl.getWidth();this.baseScale=A/this.imageEl.OriginWidth;}}return;},getScaleLevel:function(){return this.baseScale*Math.pow(1.1,this.scale);
\e[m
6959 \e[32m+
\e[m
\e[32m},onTouchStart:function(e){if(!this.canvasLoaded){this.beforeSelectFile(e);return;}var A=e.browserEvent.touches;if(!A){return;}if(A.length==1){this.onMouseDown(e);return;}if(A.length!=2){return;}var B=[];for(var i=0,C;C=A[i];i++){B.push(C.pageX,C.pageY);}
\e[m
6960 \e[32m+
\e[m
\e[32mvar x=Math.pow(B[0]-B[2],2);var y=Math.pow(B[1]-B[3],2);this.startDistance=Math.sqrt(x+y);this.startScale=this.scale;this.pinching=true;this.dragable=false;},onTouchMove:function(e){if(!this.pinching&&!this.dragable){return;}var A=e.browserEvent.touches;if(!A){return;
\e[m
6961 \e[32m+
\e[m
\e[32m}if(this.dragable){this.onMouseMove(e);return;}var B=[];for(var i=0,C;C=A[i];i++){B.push(C.pageX,C.pageY);}var x=Math.pow(B[0]-B[2],2);var y=Math.pow(B[1]-B[3],2);this.endDistance=Math.sqrt(x+y);this.scale=this.startScale+Math.floor(Math.log(this.endDistance/this.startDistance)/Math.log(1.1));
\e[m
6962 \e[32m+
\e[m
\e[32mif(!this.zoomable()){this.scale=this.startScale;return;}this.draw();},onTouchEnd:function(e){this.pinching=false;this.dragable=false;},process:function(A,B){if(this.loadMask){this.maskEl.mask(this.loadingText);}this.xhr=new XMLHttpRequest();A.xhr=this.xhr;
\e[m
6963 \e[32m+
\e[m
\e[32mthis.xhr.open(this.method,this.url,true);var C={"Accept":"application/json","Cache-Control":"no-cache","X-Requested-With":"XMLHttpRequest"};for(var D in C){var E=C[D];if(E){this.xhr.setRequestHeader(D,E);}}var F=this;this.xhr.onload=function(){F.xhrOnLoad(F.xhr);
\e[m
6964 \e[32m+
\e[m
\e[32m};this.xhr.onerror=function(){F.xhrOnError(F.xhr);};var G=new FormData();G.append('returnHTML','NO');if(B){G.append('crop',B);}if(typeof(A)!='undefined'&&(typeof(A.id)=='undefined'||A.id*1<1)){G.append(this.paramName,A,A.name);}if(typeof(A.filename)!='undefined'){G.append('filename',A.filename);
\e[m
6965 \e[32m+
\e[m
\e[32m}if(typeof(A.mimetype)!='undefined'){G.append('mimetype',A.mimetype);}if(this.fireEvent('arrange',this,G)!=false){this.xhr.send(G);};},xhrOnLoad:function(A){if(this.loadMask){this.maskEl.unmask();}if(A.readyState!==4){this.fireEvent('exception',this,A);return;
\e[m
6966 \e[32m+
\e[m
\e[32m}var B=Roo.decode(A.responseText);if(!B.success){this.fireEvent('exception',this,A);return;}var B=Roo.decode(A.responseText);this.fireEvent('upload',this,B);},xhrOnError:function(){if(this.loadMask){this.maskEl.unmask();}Roo.log('xhr on error');var A=Roo.decode(xhr.responseText);
\e[m
6967 \e[32m+
\e[m
\e[32mRoo.log(A);},prepare:function(A){if(this.loadMask){this.maskEl.mask(this.loadingText);}this.file=false;this.exif={};if(typeof(A)==='string'){this.loadCanvas(A);return;}if(!A||!this.urlAPI){return;}this.file=A;this.cropType=A.type;var B=this;if(this.fireEvent('prepare',this,this.file)!=false){var C=new FileReader();
\e[m
6968 \e[32m+
\e[m
\e[32mC.onload=function(e){if(e.target.error){Roo.log(e.target.error);return;}var D=e.target.result,E=new DataView(D),F=2,G=E.byteLength-4,H,I;if(E.getUint16(0)===0xffd8){while(F<G){H=E.getUint16(F);if((H>=0xffe0&&H<=0xffef)||H===0xfffe){I=E.getUint16(F+2)+2;if(F+I>E.byteLength){Roo.log('Invalid meta data: Invalid segment size.');
\e[m
6969 \e[32m+
\e[m
\e[32mbreak;}if(H==0xffe1){B.parseExifData(E,F,I);}F+=I;continue;}break;}}var J=B.urlAPI.createObjectURL(B.file);B.loadCanvas(J);return;};C.readAsArrayBuffer(this.file);}},parseExifData:function(A,B,C){var D=B+10,E,F;if(A.getUint32(B+4)!==0x45786966){return;}if(A.getUint32(B+4)!==0x45786966){return;
\e[m
6970 \e[32m+
\e[m
\e[32m}if(D+8>A.byteLength){Roo.log('Invalid Exif data: Invalid segment size.');return;}if(A.getUint16(B+8)!==0x0000){Roo.log('Invalid Exif data: Missing byte alignment offset.');return;}switch(A.getUint16(D)){case 0x4949:E=true;break;case 0x4D4D:E=false;break;
\e[m
6971 \e[32m+
\e[m
\e[32mdefault:Roo.log('Invalid Exif data: Invalid byte alignment marker.');return;}if(A.getUint16(D+2,E)!==0x002A){Roo.log('Invalid Exif data: Missing TIFF marker.');return;}F=A.getUint32(D+4,E);this.parseExifTags(A,D,D+F,E);},parseExifTags:function(A,B,C,D){var E,F,i;
\e[m
6972 \e[32m+
\e[m
\e[32mif(C+6>A.byteLength){Roo.log('Invalid Exif data: Invalid directory offset.');return;}E=A.getUint16(C,D);F=C+2+12*E;if(F+4>A.byteLength){Roo.log('Invalid Exif data: Invalid directory size.');return;}for(i=0;i<E;i+=1){this.parseExifTag(A,B,C+2+12*i,D);}return A.getUint32(F,D);
\e[m
6973 \e[32m+
\e[m
\e[32m},parseExifTag:function(A,B,C,D){var E=A.getUint16(C,D);this.exif[E]=this.getExifValue(A,B,C,A.getUint16(C+2,D),A.getUint32(C+4,D),D);},getExifValue:function(A,B,C,D,E,F){var G=Roo.dialog.UploadCropbox.exifTagTypes[D],H,I,J,i,K,c;if(!G){Roo.log('Invalid Exif data: Invalid tag type.');
\e[m
6974 \e[32m+
\e[m
\e[32mreturn;}H=G.size*E;I=H>4?B+A.getUint32(C+8,F):(C+8);if(I+H>A.byteLength){Roo.log('Invalid Exif data: Invalid data offset.');return;}if(E===1){return G.getValue(A,I,F);}J=[];for(i=0;i<E;i+=1){J[i]=G.getValue(A,I+i*G.size,F);}if(G.ascii){K='';for(i=0;i<J.length;
\e[m
6975 \e[32m+
\e[m
\e[32mi+=1){c=J[i];if(c==='\u0000'){break;}K+=c;}return K;}return J;}});Roo.apply(Roo.dialog.UploadCropbox,{tags:{'Orientation':0x0112
\e[m
6976 \e[32m+
\e[m
\e[32m},Orientation:{1:0,3:180,6:90,8:270},exifTagTypes:{1:{getValue:function(A,B){return A.getUint8(B);},size:1},2:{getValue:function(A,B){return String.fromCharCode(A.getUint8(B));
\e[m
6977 \e[32m+
\e[m
\e[32m},size:1,ascii:true},3:{getValue:function(A,B,C){return A.getUint16(B,C);},size:2},4:{getValue:function(A,B,C){return A.getUint32(B,C);},size:4},5:{getValue:function(A,B,C){return A.getUint32(B,C)/A.getUint32(B+4,C);},size:8},9:{getValue:function(A,B,C){return A.getInt32(B,C);
\e[m
6978 \e[32m+
\e[m
\e[32m},size:4},10:{getValue:function(A,B,C){return A.getInt32(B,C)/A.getInt32(B+4,C);},size:8}},footer:{STANDARD:[{tag:'div',cls:'btn-group roo-upload-cropbox-rotate-left',action:'rotate-left',cn:[{tag:'button',cls:'btn btn-default',html:'<i class="fa fa-undo"></i>'}
\e[m
6979 \e[32m+
\e[m
\e[32m]},{tag:'div',cls:'btn-group roo-upload-cropbox-picture',action:'picture',cn:[{tag:'button',cls:'btn btn-default',html:'<i class="fa fa-picture-o"></i>'}]},{tag:'div',cls:'btn-group roo-upload-cropbox-rotate-right',action:'rotate-right',cn:[{tag:'button',cls:'btn btn-default',html:'<i class="fa fa-repeat"></i>'}
\e[m
6980 \e[32m+
\e[m
\e[32m]}],DOCUMENT:[{tag:'div',cls:'btn-group roo-upload-cropbox-rotate-left',action:'rotate-left',cn:[{tag:'button',cls:'btn btn-default',html:'<i class="fa fa-undo"></i>'}]},{tag:'div',cls:'btn-group roo-upload-cropbox-download',action:'download',cn:[{tag:'button',cls:'btn btn-default',html:'<i class="fa fa-download"></i>'}
\e[m
6981 \e[32m+
\e[m
\e[32m]},{tag:'div',cls:'btn-group roo-upload-cropbox-crop',action:'crop',cn:[{tag:'button',cls:'btn btn-default',html:'<i class="fa fa-crop"></i>'}]},{tag:'div',cls:'btn-group roo-upload-cropbox-trash',action:'trash',cn:[{tag:'button',cls:'btn btn-default',html:'<i class="fa fa-trash"></i>'}
\e[m
6982 \e[32m+
\e[m
\e[32m]},{tag:'div',cls:'btn-group roo-upload-cropbox-rotate-right',action:'rotate-right',cn:[{tag:'button',cls:'btn btn-default',html:'<i class="fa fa-repeat"></i>'}]}],ROTATOR:[{tag:'div',cls:'btn-group roo-upload-cropbox-rotate-left',action:'rotate-left',cn:[{tag:'button',cls:'btn btn-default',html:'<i class="fa fa-undo"></i>'}
\e[m
6983 \e[32m+
\e[m
\e[32m]},{tag:'div',cls:'btn-group roo-upload-cropbox-rotate-right',action:'rotate-right',cn:[{tag:'button',cls:'btn btn-default',html:'<i class="fa fa-repeat"></i>'}]}]}});
\e[m
6984 bezier_signature
\e[m
6988 github.com.roojs1.master
\e[m
6991 wip_alan_T5622_fix_roojs_dynamic_example
\e[m
6992 wip_alan_T5635_chome_extension_for_uploading_clippings
\e[m
6993 wip_alan_T5654_roojspacker_get_it_working_as
\e[m
6994 wip_alan_T5657_Summary_page_for_documentation
\e[m
6995 wip_alan_T5660_roojs_docs_linking_and_other
\e[m
6996 wip_alan_T5665_precommit_hooks_for_roojs
\e[m
6997 wip_alan_T5678_tidy_up_roojs_directory
\e[m
6998 wip_alan_T5681_fix_bootstrap4_detection
\e[m
6999 wip_alan_T5747_combo_pulldown_issue
\e[m
7000 wip_alan_T5750_roo_library_dynamic_components
\e[m
7001 wip_alan_T5829_Messing_around_with_flutter_API
\e[m
7002 wip_alan_T5925_minimal_bootstrap_for_alerts
\e[m
7003 wip_alan_T5944_trim_leading_white_space_from
\e[m
7004 wip_alan_T5946_fix_defaults_on_js_breaks
\e[m
7005 wip_alan_T5956_handle_file_input_with_stripping
\e[m
7006 wip_alan_T5963_white_space_strip_only_on
\e[m
7007 wip_alan_T6011_fixing_surrogate_characters
\e[m
7008 wip_alan_T6045_use_formdata_to_handle_forms
\e[m
7009 wip_alan_T6048_clean_up_hanging_span_content
\e[m
7010 wip_alan_T6102_issue_with_word_clean
\e[m
7011 wip_alan_T6141_super_script_and_subscribe
\e[m
7012 wip_alan_T6201_Category_select
\e[m
7013 wip_alan_T6293_support_for_adding_columns
\e[m
7014 wip_alan_T6384_See_if_we_can_get
\e[m
7015 wip_alan_T6430_messing_arouds_with_cards_BS4
\e[m
7016 wip_alan_T6433_fine_tuning_tests_for_cards
\e[m
7017 wip_alan_T6464_card_header
\e[m
7018 wip_alan_T6465_drag_drop_for_cards
\e[m
7019 wip_alan_T6495_add_ticket_testing
\e[m
7020 wip_alan_T6524_test_client_access
\e[m
7021 wip_alan_T6584_make_popover_a_primary_container
\e[m
7022 wip_alan_T6593_time_picker_tester
\e[m
7023 wip_alan_T6596_lightbox_on_images
\e[m
7024 wip_alan_T6597_Popover_api_improvements
\e[m
7025 wip_alan_T6625_undo_reset
\e[m
7026 wip_alan_T6630_making_upload_work_with_card
\e[m
7027 wip_alan_T6637_more_image_tiy_up_on
\e[m
7028 wip_alan_T6640_Inspection_Schedule
\e[m
7029 wip_alan_T6641_add_events_for_handling_view
\e[m
7030 wip_alan_T6652_pass_gridview_events_into_grid
\e[m
7031 wip_alan_T6662_support_header_image_in_square
\e[m
7032 wip_alan_T6666_paging_upgrade_to_bs4
\e[m
7033 wip_alan_T6673_mobile_cards_issues
\e[m
7034 wip_alan_T6696_Document_Browse
\e[m
7035 wip_alan_T6709_default_widths_on_input_fields
\e[m
7036 wip_alan_T6790_Upload_Button
\e[m
7037 wip_alan_T6814_Notification_fadeout
\e[m
7038 wip_alan_T6833_print_layer_map
\e[m
7039 wip_alan_T6842_svg_handling
\e[m
7040 wip_alan_T6852_svg_support_for_domquery_gettarget
\e[m
7041 wip_alan_T6864_dynamicall_adding_columns
\e[m
7042 wip_alan_T6874_Grid_column_resize
\e[m
7043 wip_alan_T6883_image_loading_tidy_up
\e[m
7044 wip_alan_T6893_fix_roo_docs
\e[m
7045 wip_alan_T6901_CRM_allow_comments_in_HTML
\e[m
7046 wip_alan_T6904_JSON_output_for_docs_editor
\e[m
7047 wip_alan_T6912_issue_with_parsing_RoolibDom
\e[m
7048 wip_alan_T6913_add_more_documentation_to_code
\e[m
7049 wip_alan_T6922_replace_builder_to_with_parent
\e[m
7050 wip_alan_T6962_html_editor_update_to_new
\e[m
7051 wip_alan_T7151_parse_block_for_figure
\e[m
7052 wip_alan_T7160_sort_out_comment_removal_and
\e[m
7053 wip_alan_T7162_warnings_on_files
\e[m
7054 wip_alan_T7189_simplify_array_grid_example
\e[m
7055 wip_alan_T7197_fix_form_layout_files_and
\e[m
7056 wip_alan_T7275_handling_odd_word_document
\e[m
7057 wip_alan_T7284_more_issues_with_bullet_point
\e[m
7058 wip_alan_T7295_a_name_tags_in_word
\e[m
7059 wip_alan_T7300_namespace_cleaning_on_word
\e[m
7060 wip_edward_T5642_Report_designer_hebe
\e[m
7061 wip_edward_T5655_UAT_of_Press_release_detail
\e[m
7062 wip_edward_T5718_Change_the_order_layout_of
\e[m
7063 wip_edward_T5720_Order_Discount_Penalty_new_tab
\e[m
7064 wip_edward_T5765_masking_for_missing_entries
\e[m
7065 wip_edward_T5791_Search_Criteria_on_Orders_Columns
\e[m
7066 wip_edward_T5820_Load_times_of_country_tree
\e[m
7067 wip_edward_T5859_Fw_Fw_Text_sticking_together
\e[m
7068 *
\e[32mwip_leon_T7094_logo_image_upload_in_boilerplate
\e[m
7069 wip_leon_T7199_adding_images_to_bolierplates
\e[m
7070 wip_leon_T7207_html_editor_clean_word_button
\e[m
7071 wip_leon_T7281_table_editing_widths_doent_work
\e[m
projects / roojs1 / blob