From: Alan
Date: Wed, 13 Jul 2022 05:27:31 +0000 (+0800)
Subject: Merge branch 'master' into wip_leon_T7094_logo_image_upload_in_boilerplate
X-Git-Url: http://git.roojs.org/?a=commitdiff_plain;h=2d6c77a29b0c4f558ef0ba872d37e06b12c9ceef;hp=d97e0976f1719f86bbaee600d9591d911cdaac9f;p=roojs1
Merge branch 'master' into wip_leon_T7094_logo_image_upload_in_boilerplate
---
diff --git a/-core.js roojs-ui.js > roojs-all.js b/-core.js roojs-ui.js > roojs-all.js
new file mode 100644
index 0000000000..e07924d2fc
--- /dev/null
+++ b/-core.js roojs-ui.js > roojs-all.js
@@ -0,0 +1,6983 @@
+[1mdiff --git a/Roo/ContentPanel.js b/Roo/ContentPanel.js[m
+[1mindex 0984532b54..cc1b9d0ce5 100644[m
+[1m--- a/Roo/ContentPanel.js[m
+[1m+++ b/Roo/ContentPanel.js[m
+[36m@@ -41,7 +41,6 @@[m
+ */[m
+ Roo.ContentPanel = function(el, config, content){[m
+ [m
+[31m- [m
+ /*[m
+ if(el.autoCreate || el.xtype){ // xtype is available if this is called from factory[m
+ config = el;[m
+[36m@@ -425,6 +424,14 @@[m [mlayout.addxtype({[m
+ */[m
+ [m
+ addxtype : function(cfg) {[m
+[32m+[m[32m if(cfg.xtype.match(/^UploadCropbox$/)) {[m
+[32m+[m
+[32m+[m[32m this.cropbox = new Roo.factory(cfg);[m
+[32m+[m
+[32m+[m[32m this.cropbox.render(this.el);[m
+[32m+[m
+[32m+[m[32m return this.cropbox;[m
+[32m+[m[32m }[m
+ // add form..[m
+ if (cfg.xtype.match(/^Form$/)) {[m
+ [m
+[1mdiff --git a/Roo/dialog/UploadCropbox.js b/Roo/dialog/UploadCropbox.js[m
+[1mnew file mode 100644[m
+[1mindex 0000000000..8cf986b2e5[m
+[1m--- /dev/null[m
+[1m+++ b/Roo/dialog/UploadCropbox.js[m
+[36m@@ -0,0 +1,1791 @@[m
+[32m+[m
+[32m+[m[32m/*[m
+[32m+[m[32m* Licence: LGPL[m
+[32m+[m[32m*/[m
+[32m+[m
+[32m+[m[32m/**[m
+[32m+[m[32m * @class Roo.dialog.UploadCropbox[m
+[32m+[m[32m * @extends Roo.BoxComponent[m
+[32m+[m[32m * Dialog UploadCropbox class[m
+[32m+[m[32m * @cfg {String} emptyText show when image has been loaded[m
+[32m+[m[32m * @cfg {String} rotateNotify show when image too small to rotate[m
+[32m+[m[32m * @cfg {Number} errorTimeout default 3000[m
+[32m+[m[32m * @cfg {Number} minWidth default 300[m
+[32m+[m[32m * @cfg {Number} minHeight default 300[m
+[32m+[m[32m * @cfg {Array} buttons default ['rotateLeft', 'pictureBtn', 'rotateRight'][m
+[32m+[m[32m * @cfg {Boolean} isDocument (true|false) default false[m
+[32m+[m[32m * @cfg {String} url action url[m
+[32m+[m[32m * @cfg {String} paramName default 'imageUpload'[m
+[32m+[m[32m * @cfg {String} method default POST[m
+[32m+[m[32m * @cfg {Boolean} loadMask (true|false) default true[m
+[32m+[m[32m * @cfg {Boolean} loadingText default 'Loading...'[m
+[32m+[m[32m *[m[41m [m
+[32m+[m[32m * @constructor[m
+[32m+[m[32m * Create a new UploadCropbox[m
+[32m+[m[32m * @param {Object} config The config object[m
+[32m+[m[32m */[m
+[32m+[m
+[32m+[m[32m Roo.dialog.UploadCropbox = function(config){[m
+[32m+[m[32m Roo.dialog.UploadCropbox.superclass.constructor.call(this, config);[m
+[32m+[m[41m [m
+[32m+[m[32m this.addEvents({[m
+[32m+[m[32m /**[m
+[32m+[m[32m * @event beforeselectfile[m
+[32m+[m[32m * Fire before select file[m
+[32m+[m[32m * @param {Roo.dialog.UploadCropbox} this[m
+[32m+[m[32m */[m
+[32m+[m[32m "beforeselectfile" : true,[m
+[32m+[m[32m /**[m
+[32m+[m[32m * @event initial[m
+[32m+[m[32m * Fire after initEvent[m
+[32m+[m[32m * @param {Roo.dialog.UploadCropbox} this[m
+[32m+[m[32m */[m
+[32m+[m[32m "initial" : true,[m
+[32m+[m[32m /**[m
+[32m+[m[32m * @event crop[m
+[32m+[m[32m * Fire after initEvent[m
+[32m+[m[32m * @param {Roo.dialog.UploadCropbox} this[m
+[32m+[m[32m * @param {String} data[m
+[32m+[m[32m */[m
+[32m+[m[32m "crop" : true,[m
+[32m+[m[32m /**[m
+[32m+[m[32m * @event prepare[m
+[32m+[m[32m * Fire when preparing the file data[m
+[32m+[m[32m * @param {Roo.dialog.UploadCropbox} this[m
+[32m+[m[32m * @param {Object} file[m
+[32m+[m[32m */[m
+[32m+[m[32m "prepare" : true,[m
+[32m+[m[32m /**[m
+[32m+[m[32m * @event exception[m
+[32m+[m[32m * Fire when get exception[m
+[32m+[m[32m * @param {Roo.dialog.UploadCropbox} this[m
+[32m+[m[32m * @param {XMLHttpRequest} xhr[m
+[32m+[m[32m */[m
+[32m+[m[32m "exception" : true,[m
+[32m+[m[32m /**[m
+[32m+[m[32m * @event beforeloadcanvas[m
+[32m+[m[32m * Fire before load the canvas[m
+[32m+[m[32m * @param {Roo.dialog.UploadCropbox} this[m
+[32m+[m[32m * @param {String} src[m
+[32m+[m[32m */[m
+[32m+[m[32m "beforeloadcanvas" : true,[m
+[32m+[m[32m /**[m
+[32m+[m[32m * @event trash[m
+[32m+[m[32m * Fire when trash image[m
+[32m+[m[32m * @param {Roo.dialog.UploadCropbox} this[m
+[32m+[m[32m */[m
+[32m+[m[32m "trash" : true,[m
+[32m+[m[32m /**[m
+[32m+[m[32m * @event download[m
+[32m+[m[32m * Fire when download the image[m
+[32m+[m[32m * @param {Roo.dialog.UploadCropbox} this[m
+[32m+[m[32m */[m
+[32m+[m[32m "download" : true,[m
+[32m+[m[32m /**[m
+[32m+[m[32m * @event footerbuttonclick[m
+[32m+[m[32m * Fire when footerbuttonclick[m
+[32m+[m[32m * @param {Roo.dialog.UploadCropbox} this[m
+[32m+[m[32m * @param {String} type[m
+[32m+[m[32m */[m
+[32m+[m[32m "footerbuttonclick" : true,[m
+[32m+[m[32m /**[m
+[32m+[m[32m * @event resize[m
+[32m+[m[32m * Fire when resize[m
+[32m+[m[32m * @param {Roo.dialog.UploadCropbox} this[m
+[32m+[m[32m */[m
+[32m+[m[32m "resize" : true,[m
+[32m+[m[32m /**[m
+[32m+[m[32m * @event rotate[m
+[32m+[m[32m * Fire when rotate the image[m
+[32m+[m[32m * @param {Roo.dialog.UploadCropbox} this[m
+[32m+[m[32m * @param {String} pos[m
+[32m+[m[32m */[m
+[32m+[m[32m "rotate" : true,[m
+[32m+[m[32m /**[m
+[32m+[m[32m * @event inspect[m
+[32m+[m[32m * Fire when inspect the file[m
+[32m+[m[32m * @param {Roo.dialog.UploadCropbox} this[m
+[32m+[m[32m * @param {Object} file[m
+[32m+[m[32m */[m
+[32m+[m[32m "inspect" : true,[m
+[32m+[m[32m /**[m
+[32m+[m[32m * @event upload[m
+[32m+[m[32m * Fire when xhr upload the file[m
+[32m+[m[32m * @param {Roo.dialog.UploadCropbox} this[m
+[32m+[m[32m * @param {Object} data[m
+[32m+[m[32m */[m
+[32m+[m[32m "upload" : true,[m
+[32m+[m[32m /**[m
+[32m+[m[32m * @event arrange[m
+[32m+[m[32m * Fire when arrange the file data[m
+[32m+[m[32m * @param {Roo.dialog.UploadCropbox} this[m
+[32m+[m[32m * @param {Object} formData[m
+[32m+[m[32m */[m
+[32m+[m[32m "arrange" : true,[m
+[32m+[m[32m /**[m
+[32m+[m[32m * @event loadcanvas[m
+[32m+[m[32m * Fire after load the canvas[m
+[32m+[m[32m * @param {Roo.dialog.UploadCropbox}[m
+[32m+[m[32m * @param {Object} imgEl[m
+[32m+[m[32m */[m
+[32m+[m[32m "loadcanvas" : true[m
+[32m+[m[32m });[m
+[32m+[m[41m [m
+[32m+[m[32m this.buttons = this.buttons || Roo.dialog.UploadCropbox.footer.STANDARD;[m
+[32m+[m[32m};[m
+[32m+[m
+[32m+[m[32mRoo.extend(Roo.dialog.UploadCropbox, Roo.Component, {[m
+[32m+[m[41m [m
+[32m+[m[32m emptyText : 'Click to upload image',[m
+[32m+[m[32m rotateNotify : 'Image is too small to rotate',[m
+[32m+[m[32m errorTimeout : 3000,[m
+[32m+[m[32m scale : 0,[m
+[32m+[m[32m baseScale : 1,[m
+[32m+[m[32m rotate : 0,[m
+[32m+[m[32m dragable : false,[m
+[32m+[m[32m pinching : false,[m
+[32m+[m[32m mouseX : 0,[m
+[32m+[m[32m mouseY : 0,[m
+[32m+[m[32m cropData : false,[m
+[32m+[m[32m minWidth : 300,[m
+[32m+[m[32m minHeight : 300,[m
+[32m+[m[32m file : false,[m
+[32m+[m[32m exif : {},[m
+[32m+[m[32m baseRotate : 1,[m
+[32m+[m[32m cropType : 'image/jpeg',[m
+[32m+[m[32m buttons : false,[m
+[32m+[m[32m canvasLoaded : false,[m
+[32m+[m[32m isDocument : false,[m
+[32m+[m[32m method : 'POST',[m
+[32m+[m[32m paramName : 'imageUpload',[m
+[32m+[m[32m loadMask : true,[m
+[32m+[m[32m loadingText : 'Loading...',[m
+[32m+[m[32m maskEl : false,[m
+[32m+[m[41m [m
+[32m+[m[32m getAutoCreate : function()[m
+[32m+[m[32m {[m
+[32m+[m[32m var cfg = {[m
+[32m+[m[32m tag : 'div',[m
+[32m+[m[32m cls : 'roo-upload-cropbox',[m
+[32m+[m[32m cn : [[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'input',[m
+[32m+[m[32m cls : 'roo-upload-cropbox-selector',[m
+[32m+[m[32m type : 'file'[m
+[32m+[m[32m },[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'div',[m
+[32m+[m[32m cls : 'roo-upload-cropbox-body',[m
+[32m+[m[32m style : 'cursor:pointer',[m
+[32m+[m[32m cn : [[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'div',[m
+[32m+[m[32m cls : 'roo-upload-cropbox-preview'[m
+[32m+[m[32m },[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'div',[m
+[32m+[m[32m cls : 'roo-upload-cropbox-thumb'[m
+[32m+[m[32m },[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'div',[m
+[32m+[m[32m cls : 'roo-upload-cropbox-empty-notify',[m
+[32m+[m[32m html : this.emptyText[m
+[32m+[m[32m },[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'div',[m
+[32m+[m[32m cls : 'roo-upload-cropbox-error-notify alert alert-danger',[m
+[32m+[m[32m html : this.rotateNotify[m
+[32m+[m[32m }[m
+[32m+[m[32m ][m
+[32m+[m[32m },[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'div',[m
+[32m+[m[32m cls : 'roo-upload-cropbox-footer',[m
+[32m+[m[32m cn : {[m
+[32m+[m[32m tag : 'div',[m
+[32m+[m[32m cls : 'btn-group btn-group-justified roo-upload-cropbox-btn-group',[m
+[32m+[m[32m cn : [][m
+[32m+[m[32m }[m
+[32m+[m[32m }[m
+[32m+[m[32m ][m
+[32m+[m[32m };[m
+[32m+[m[41m [m
+[32m+[m[32m return cfg;[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m onRender : function(ct, position)[m
+[32m+[m[32m {[m
+[32m+[m[32m console.log("On Render");[m
+[32m+[m[32m console.log(this);[m
+[32m+[m[32m Roo.dialog.UploadCropbox.superclass.onRender.call(this, ct, position);[m
+[32m+[m
+[32m+[m[32m if(this.el){[m
+[32m+[m[32m if (this.el.attr('xtype')) {[m
+[32m+[m[32m this.el.attr('xtypex', this.el.attr('xtype'));[m
+[32m+[m[32m this.el.dom.removeAttribute('xtype');[m
+[32m+[m[41m [m
+[32m+[m[32m this.initEvents();[m
+[32m+[m[32m }[m
+[32m+[m[32m }[m
+[32m+[m[32m else {[m
+[32m+[m[32m var cfg = Roo.apply({}, this.getAutoCreate());[m
+[32m+[m[41m [m
+[32m+[m[32m cfg.id = this.id || Roo.id();[m
+[32m+[m[41m [m
+[32m+[m[32m if (this.cls) {[m
+[32m+[m[32m cfg.cls = (typeof(cfg.cls) == 'undefined' ? this.cls : cfg.cls) + ' ' + this.cls;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if (this.style) { // fixme needs to support more complex style data.[m
+[32m+[m[32m cfg.style = (typeof(cfg.style) == 'undefined' ? this.style : cfg.style) + '; ' + this.style;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.el = ct.createChild(cfg, position);[m
+[32m+[m[41m [m
+[32m+[m[32m this.initEvents();[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if (this.buttons.length) {[m
+[32m+[m[41m [m
+[32m+[m[32m Roo.each(this.buttons, function(bb) {[m
+[32m+[m[41m [m
+[32m+[m[32m var btn = this.el.select('.roo-upload-cropbox-footer div.roo-upload-cropbox-btn-group').first().createChild(bb);[m
+[32m+[m[41m [m
+[32m+[m[32m btn.on('click', this.onFooterButtonClick.createDelegate(this, [bb.action], true));[m
+[32m+[m[41m [m
+[32m+[m[32m }, this);[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.loadMask){[m
+[32m+[m[32m this.maskEl = this.el;[m
+[32m+[m[32m }[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m initEvents : function()[m
+[32m+[m[32m {[m
+[32m+[m[32m this.urlAPI = (window.createObjectURL && window) ||[m[41m [m
+[32m+[m[32m (window.URL && URL.revokeObjectURL && URL) ||[m[41m [m
+[32m+[m[32m (window.webkitURL && webkitURL);[m
+[32m+[m[41m [m
+[32m+[m[32m this.bodyEl = this.el.select('.roo-upload-cropbox-body', true).first();[m
+[32m+[m[32m this.bodyEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';[m
+[32m+[m[41m [m
+[32m+[m[32m this.selectorEl = this.el.select('.roo-upload-cropbox-selector', true).first();[m
+[32m+[m[32m this.selectorEl.hide();[m
+[32m+[m[41m [m
+[32m+[m[32m this.previewEl = this.el.select('.roo-upload-cropbox-preview', true).first();[m
+[32m+[m[32m this.previewEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';[m
+[32m+[m[41m [m
+[32m+[m[32m this.thumbEl = this.el.select('.roo-upload-cropbox-thumb', true).first();[m
+[32m+[m[32m this.thumbEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';[m
+[32m+[m[32m this.thumbEl.hide();[m
+[32m+[m[41m [m
+[32m+[m[32m this.notifyEl = this.el.select('.roo-upload-cropbox-empty-notify', true).first();[m
+[32m+[m[32m this.notifyEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';[m
+[32m+[m[41m [m
+[32m+[m[32m this.errorEl = this.el.select('.roo-upload-cropbox-error-notify', true).first();[m
+[32m+[m[32m this.errorEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';[m
+[32m+[m[32m this.errorEl.hide();[m
+[32m+[m[41m [m
+[32m+[m[32m this.footerEl = this.el.select('.roo-upload-cropbox-footer', true).first();[m
+[32m+[m[32m this.footerEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';[m
+[32m+[m[32m this.footerEl.hide();[m
+[32m+[m[41m [m
+[32m+[m[32m this.setThumbBoxSize();[m
+[32m+[m[41m [m
+[32m+[m[32m this.bind();[m
+[32m+[m[41m [m
+[32m+[m[32m this.resize();[m
+[32m+[m[41m [m
+[32m+[m[32m this.fireEvent('initial', this);[m
+[32m+[m[32m },[m
+[32m+[m
+[32m+[m[32m bind : function()[m
+[32m+[m[32m {[m
+[32m+[m[32m var _this = this;[m
+[32m+[m[41m [m
+[32m+[m[32m window.addEventListener("resize", function() { _this.resize(); } );[m
+[32m+[m[41m [m
+[32m+[m[32m this.bodyEl.on('click', this.beforeSelectFile, this);[m
+[32m+[m[41m [m
+[32m+[m[32m if(Roo.isTouch){[m
+[32m+[m[32m this.bodyEl.on('touchstart', this.onTouchStart, this);[m
+[32m+[m[32m this.bodyEl.on('touchmove', this.onTouchMove, this);[m
+[32m+[m[32m this.bodyEl.on('touchend', this.onTouchEnd, this);[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if(!Roo.isTouch){[m
+[32m+[m[32m this.bodyEl.on('mousedown', this.onMouseDown, this);[m
+[32m+[m[32m this.bodyEl.on('mousemove', this.onMouseMove, this);[m
+[32m+[m[32m var mousewheel = (/Firefox/i.test(navigator.userAgent))? 'DOMMouseScroll' : 'mousewheel';[m
+[32m+[m[32m this.bodyEl.on(mousewheel, this.onMouseWheel, this);[m
+[32m+[m[32m Roo.get(document).on('mouseup', this.onMouseUp, this);[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.selectorEl.on('change', this.onFileSelected, this);[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m reset : function()[m
+[32m+[m[32m {[m[41m [m
+[32m+[m[32m this.scale = 0;[m
+[32m+[m[32m this.baseScale = 1;[m
+[32m+[m[32m this.rotate = 0;[m
+[32m+[m[32m this.baseRotate = 1;[m
+[32m+[m[32m this.dragable = false;[m
+[32m+[m[32m this.pinching = false;[m
+[32m+[m[32m this.mouseX = 0;[m
+[32m+[m[32m this.mouseY = 0;[m
+[32m+[m[32m this.cropData = false;[m
+[32m+[m[32m this.notifyEl.dom.innerHTML = this.emptyText;[m
+[32m+[m[41m [m
+[32m+[m[32m // this.selectorEl.dom.value = '';[m
+[32m+[m[41m [m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m resize : function()[m
+[32m+[m[32m {[m
+[32m+[m[32m if(this.fireEvent('resize', this) != false){[m
+[32m+[m[32m this.setThumbBoxPosition();[m
+[32m+[m[32m this.setCanvasPosition();[m
+[32m+[m[32m }[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m onFooterButtonClick : function(e, el, o, type)[m
+[32m+[m[32m {[m
+[32m+[m[32m switch (type) {[m
+[32m+[m[32m case 'rotate-left' :[m
+[32m+[m[32m this.onRotateLeft(e);[m
+[32m+[m[32m break;[m
+[32m+[m[32m case 'rotate-right' :[m
+[32m+[m[32m this.onRotateRight(e);[m
+[32m+[m[32m break;[m
+[32m+[m[32m case 'picture' :[m
+[32m+[m[32m this.beforeSelectFile(e);[m
+[32m+[m[32m break;[m
+[32m+[m[32m case 'trash' :[m
+[32m+[m[32m this.trash(e);[m
+[32m+[m[32m break;[m
+[32m+[m[32m case 'crop' :[m
+[32m+[m[32m this.crop(e);[m
+[32m+[m[32m break;[m
+[32m+[m[32m case 'download' :[m
+[32m+[m[32m this.download(e);[m
+[32m+[m[32m break;[m
+[32m+[m[32m default :[m
+[32m+[m[32m break;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.fireEvent('footerbuttonclick', this, type);[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m beforeSelectFile : function(e)[m
+[32m+[m[32m {[m
+[32m+[m[32m e.preventDefault();[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.fireEvent('beforeselectfile', this) != false){[m
+[32m+[m[32m this.selectorEl.dom.click();[m
+[32m+[m[32m }[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m onFileSelected : function(e)[m
+[32m+[m[32m {[m
+[32m+[m[32m e.preventDefault();[m
+[32m+[m[41m [m
+[32m+[m[32m if(typeof(this.selectorEl.dom.files) == 'undefined' || !this.selectorEl.dom.files.length){[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m var file = this.selectorEl.dom.files[0];[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.fireEvent('inspect', this, file) != false){[m
+[32m+[m[32m this.prepare(file);[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m trash : function(e)[m
+[32m+[m[32m {[m
+[32m+[m[32m this.fireEvent('trash', this);[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m download : function(e)[m
+[32m+[m[32m {[m
+[32m+[m[32m this.fireEvent('download', this);[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m loadCanvas : function(src)[m
+[32m+[m[32m {[m[41m [m
+[32m+[m[32m if(this.fireEvent('beforeloadcanvas', this, src) != false){[m
+[32m+[m[41m [m
+[32m+[m[32m this.reset();[m
+[32m+[m[41m [m
+[32m+[m[32m this.imageEl = document.createElement('img');[m
+[32m+[m[41m [m
+[32m+[m[32m var _this = this;[m
+[32m+[m[41m [m
+[32m+[m[32m this.imageEl.addEventListener("load", function(){ _this.onLoadCanvas(); });[m
+[32m+[m[41m [m
+[32m+[m[32m this.imageEl.src = src;[m
+[32m+[m[32m }[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m onLoadCanvas : function()[m
+[32m+[m[32m {[m[41m [m
+[32m+[m[32m this.imageEl.OriginWidth = this.imageEl.naturalWidth || this.imageEl.width;[m
+[32m+[m[32m this.imageEl.OriginHeight = this.imageEl.naturalHeight || this.imageEl.height;[m
+[32m+[m
+[32m+[m[32m if(this.fireEvent('loadcanvas', this, this.imageEl) != false){[m
+[32m+[m[41m [m
+[32m+[m[32m this.bodyEl.un('click', this.beforeSelectFile, this);[m
+[32m+[m[41m [m
+[32m+[m[32m this.notifyEl.hide();[m
+[32m+[m[32m this.thumbEl.show();[m
+[32m+[m[32m this.footerEl.show();[m
+[32m+[m[41m [m
+[32m+[m[32m this.baseRotateLevel();[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.isDocument){[m
+[32m+[m[32m this.setThumbBoxSize();[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.setThumbBoxPosition();[m
+[32m+[m[41m [m
+[32m+[m[32m this.baseScaleLevel();[m
+[32m+[m[41m [m
+[32m+[m[32m this.draw();[m
+[32m+[m[41m [m
+[32m+[m[32m this.resize();[m
+[32m+[m[41m [m
+[32m+[m[32m this.canvasLoaded = true;[m
+[32m+[m[41m [m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.loadMask){[m
+[32m+[m[32m this.maskEl.unmask();[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m setCanvasPosition : function()[m
+[32m+[m[32m {[m[41m [m
+[32m+[m[32m if(!this.canvasEl){[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m var pw = Math.ceil((this.bodyEl.getWidth() - this.canvasEl.width) / 2);[m
+[32m+[m[32m var ph = Math.ceil((this.bodyEl.getHeight() - this.canvasEl.height) / 2);[m
+[32m+[m[41m [m
+[32m+[m[32m this.previewEl.setLeft(pw);[m
+[32m+[m[32m this.previewEl.setTop(ph);[m
+[32m+[m[41m [m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m onMouseDown : function(e)[m
+[32m+[m[32m {[m[41m [m
+[32m+[m[32m e.stopEvent();[m
+[32m+[m[41m [m
+[32m+[m[32m this.dragable = true;[m
+[32m+[m[32m this.pinching = false;[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.isDocument && (this.canvasEl.width < this.thumbEl.getWidth() || this.canvasEl.height < this.thumbEl.getHeight())){[m
+[32m+[m[32m this.dragable = false;[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.mouseX = Roo.isTouch ? e.browserEvent.touches[0].pageX : e.getPageX();[m
+[32m+[m[32m this.mouseY = Roo.isTouch ? e.browserEvent.touches[0].pageY : e.getPageY();[m
+[32m+[m[41m [m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m onMouseMove : function(e)[m
+[32m+[m[32m {[m[41m [m
+[32m+[m[32m e.stopEvent();[m
+[32m+[m[41m [m
+[32m+[m[32m if(!this.canvasLoaded){[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if (!this.dragable){[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m var minX = Math.ceil(this.thumbEl.getLeft(true));[m
+[32m+[m[32m var minY = Math.ceil(this.thumbEl.getTop(true));[m
+[32m+[m[41m [m
+[32m+[m[32m var maxX = Math.ceil(minX + this.thumbEl.getWidth() - this.canvasEl.width);[m
+[32m+[m[32m var maxY = Math.ceil(minY + this.thumbEl.getHeight() - this.canvasEl.height);[m
+[32m+[m[41m [m
+[32m+[m[32m var x = Roo.isTouch ? e.browserEvent.touches[0].pageX : e.getPageX();[m
+[32m+[m[32m var y = Roo.isTouch ? e.browserEvent.touches[0].pageY : e.getPageY();[m
+[32m+[m[41m [m
+[32m+[m[32m x = x - this.mouseX;[m
+[32m+[m[32m y = y - this.mouseY;[m
+[32m+[m[41m [m
+[32m+[m[32m var bgX = Math.ceil(x + this.previewEl.getLeft(true));[m
+[32m+[m[32m var bgY = Math.ceil(y + this.previewEl.getTop(true));[m
+[32m+[m[41m [m
+[32m+[m[32m bgX = (minX < bgX) ? minX : ((maxX > bgX) ? maxX : bgX);[m
+[32m+[m[32m bgY = (minY < bgY) ? minY : ((maxY > bgY) ? maxY : bgY);[m
+[32m+[m[41m [m
+[32m+[m[32m this.previewEl.setLeft(bgX);[m
+[32m+[m[32m this.previewEl.setTop(bgY);[m
+[32m+[m[41m [m
+[32m+[m[32m this.mouseX = Roo.isTouch ? e.browserEvent.touches[0].pageX : e.getPageX();[m
+[32m+[m[32m this.mouseY = Roo.isTouch ? e.browserEvent.touches[0].pageY : e.getPageY();[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m onMouseUp : function(e)[m
+[32m+[m[32m {[m[41m [m
+[32m+[m[32m e.stopEvent();[m
+[32m+[m[41m [m
+[32m+[m[32m this.dragable = false;[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m onMouseWheel : function(e)[m
+[32m+[m[32m {[m[41m [m
+[32m+[m[32m e.stopEvent();[m
+[32m+[m[41m [m
+[32m+[m[32m this.startScale = this.scale;[m
+[32m+[m[41m [m
+[32m+[m[32m this.scale = (e.getWheelDelta() == 1) ? (this.scale + 1) : (this.scale - 1);[m
+[32m+[m[41m [m
+[32m+[m[32m if(!this.zoomable()){[m
+[32m+[m[32m this.scale = this.startScale;[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.draw();[m
+[32m+[m[41m [m
+[32m+[m[32m return;[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m zoomable : function()[m
+[32m+[m[32m {[m
+[32m+[m[32m var minScale = this.thumbEl.getWidth() / this.minWidth;[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.minWidth < this.minHeight){[m
+[32m+[m[32m minScale = this.thumbEl.getHeight() / this.minHeight;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m var width = Math.ceil(this.imageEl.OriginWidth * this.getScaleLevel() / minScale);[m
+[32m+[m[32m var height = Math.ceil(this.imageEl.OriginHeight * this.getScaleLevel() / minScale);[m
+[32m+[m[41m [m
+[32m+[m[32m if([m
+[32m+[m[32m this.isDocument &&[m
+[32m+[m[32m (this.rotate == 0 || this.rotate == 180) &&[m[41m [m
+[32m+[m[32m ([m
+[32m+[m[32m width > this.imageEl.OriginWidth ||[m[41m [m
+[32m+[m[32m height > this.imageEl.OriginHeight ||[m
+[32m+[m[32m (width < this.minWidth && height < this.minHeight)[m
+[32m+[m[32m )[m
+[32m+[m[32m ){[m
+[32m+[m[32m return false;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if([m
+[32m+[m[32m this.isDocument &&[m
+[32m+[m[32m (this.rotate == 90 || this.rotate == 270) &&[m[41m [m
+[32m+[m[32m ([m
+[32m+[m[32m width > this.imageEl.OriginWidth ||[m[41m [m
+[32m+[m[32m height > this.imageEl.OriginHeight ||[m
+[32m+[m[32m (width < this.minHeight && height < this.minWidth)[m
+[32m+[m[32m )[m
+[32m+[m[32m ){[m
+[32m+[m[32m return false;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if([m
+[32m+[m[32m !this.isDocument &&[m
+[32m+[m[32m (this.rotate == 0 || this.rotate == 180) &&[m[41m [m
+[32m+[m[32m ([m
+[32m+[m[32m width < this.minWidth ||[m[41m [m
+[32m+[m[32m width > this.imageEl.OriginWidth ||[m[41m [m
+[32m+[m[32m height < this.minHeight ||[m[41m [m
+[32m+[m[32m height > this.imageEl.OriginHeight[m
+[32m+[m[32m )[m
+[32m+[m[32m ){[m
+[32m+[m[32m return false;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if([m
+[32m+[m[32m !this.isDocument &&[m
+[32m+[m[32m (this.rotate == 90 || this.rotate == 270) &&[m[41m [m
+[32m+[m[32m ([m
+[32m+[m[32m width < this.minHeight ||[m[41m [m
+[32m+[m[32m width > this.imageEl.OriginWidth ||[m[41m [m
+[32m+[m[32m height < this.minWidth ||[m[41m [m
+[32m+[m[32m height > this.imageEl.OriginHeight[m
+[32m+[m[32m )[m
+[32m+[m[32m ){[m
+[32m+[m[32m return false;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m return true;[m
+[32m+[m[41m [m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m onRotateLeft : function(e)[m
+[32m+[m[32m {[m[41m [m
+[32m+[m[32m if(!this.isDocument && (this.canvasEl.height < this.thumbEl.getWidth() || this.canvasEl.width < this.thumbEl.getHeight())){[m
+[32m+[m[41m [m
+[32m+[m[32m var minScale = this.thumbEl.getWidth() / this.minWidth;[m
+[32m+[m[41m [m
+[32m+[m[32m var bw = Math.ceil(this.canvasEl.width / this.getScaleLevel());[m
+[32m+[m[32m var bh = Math.ceil(this.canvasEl.height / this.getScaleLevel());[m
+[32m+[m[41m [m
+[32m+[m[32m this.startScale = this.scale;[m
+[32m+[m[41m [m
+[32m+[m[32m while (this.getScaleLevel() < minScale){[m
+[32m+[m[41m [m
+[32m+[m[32m this.scale = this.scale + 1;[m
+[32m+[m[41m [m
+[32m+[m[32m if(!this.zoomable()){[m
+[32m+[m[32m break;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if([m
+[32m+[m[32m Math.ceil(bw * this.getScaleLevel()) < this.thumbEl.getHeight() ||[m
+[32m+[m[32m Math.ceil(bh * this.getScaleLevel()) < this.thumbEl.getWidth()[m
+[32m+[m[32m ){[m
+[32m+[m[32m continue;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.rotate = (this.rotate < 90) ? 270 : this.rotate - 90;[m
+[32m+[m
+[32m+[m[32m this.draw();[m
+[32m+[m[41m [m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.scale = this.startScale;[m
+[32m+[m[41m [m
+[32m+[m[32m this.onRotateFail();[m
+[32m+[m[41m [m
+[32m+[m[32m return false;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.rotate = (this.rotate < 90) ? 270 : this.rotate - 90;[m
+[32m+[m
+[32m+[m[32m if(this.isDocument){[m
+[32m+[m[32m this.setThumbBoxSize();[m
+[32m+[m[32m this.setThumbBoxPosition();[m
+[32m+[m[32m this.setCanvasPosition();[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.draw();[m
+[32m+[m[41m [m
+[32m+[m[32m this.fireEvent('rotate', this, 'left');[m
+[32m+[m[41m [m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m onRotateRight : function(e)[m
+[32m+[m[32m {[m
+[32m+[m[32m if(!this.isDocument && (this.canvasEl.height < this.thumbEl.getWidth() || this.canvasEl.width < this.thumbEl.getHeight())){[m
+[32m+[m[41m [m
+[32m+[m[32m var minScale = this.thumbEl.getWidth() / this.minWidth;[m
+[32m+[m[41m [m
+[32m+[m[32m var bw = Math.ceil(this.canvasEl.width / this.getScaleLevel());[m
+[32m+[m[32m var bh = Math.ceil(this.canvasEl.height / this.getScaleLevel());[m
+[32m+[m[41m [m
+[32m+[m[32m this.startScale = this.scale;[m
+[32m+[m[41m [m
+[32m+[m[32m while (this.getScaleLevel() < minScale){[m
+[32m+[m[41m [m
+[32m+[m[32m this.scale = this.scale + 1;[m
+[32m+[m[41m [m
+[32m+[m[32m if(!this.zoomable()){[m
+[32m+[m[32m break;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if([m
+[32m+[m[32m Math.ceil(bw * this.getScaleLevel()) < this.thumbEl.getHeight() ||[m
+[32m+[m[32m Math.ceil(bh * this.getScaleLevel()) < this.thumbEl.getWidth()[m
+[32m+[m[32m ){[m
+[32m+[m[32m continue;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.rotate = (this.rotate > 180) ? 0 : this.rotate + 90;[m
+[32m+[m
+[32m+[m[32m this.draw();[m
+[32m+[m[41m [m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.scale = this.startScale;[m
+[32m+[m[41m [m
+[32m+[m[32m this.onRotateFail();[m
+[32m+[m[41m [m
+[32m+[m[32m return false;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.rotate = (this.rotate > 180) ? 0 : this.rotate + 90;[m
+[32m+[m
+[32m+[m[32m if(this.isDocument){[m
+[32m+[m[32m this.setThumbBoxSize();[m
+[32m+[m[32m this.setThumbBoxPosition();[m
+[32m+[m[32m this.setCanvasPosition();[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.draw();[m
+[32m+[m[41m [m
+[32m+[m[32m this.fireEvent('rotate', this, 'right');[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m onRotateFail : function()[m
+[32m+[m[32m {[m
+[32m+[m[32m this.errorEl.show(true);[m
+[32m+[m[41m [m
+[32m+[m[32m var _this = this;[m
+[32m+[m[41m [m
+[32m+[m[32m (function() { _this.errorEl.hide(true); }).defer(this.errorTimeout);[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m draw : function()[m
+[32m+[m[32m {[m
+[32m+[m[32m this.previewEl.dom.innerHTML = '';[m
+[32m+[m[41m [m
+[32m+[m[32m var canvasEl = document.createElement("canvas");[m
+[32m+[m[41m [m
+[32m+[m[32m var contextEl = canvasEl.getContext("2d");[m
+[32m+[m[41m [m
+[32m+[m[32m canvasEl.width = this.imageEl.OriginWidth * this.getScaleLevel();[m
+[32m+[m[32m canvasEl.height = this.imageEl.OriginWidth * this.getScaleLevel();[m
+[32m+[m[32m var center = this.imageEl.OriginWidth / 2;[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.imageEl.OriginWidth < this.imageEl.OriginHeight){[m
+[32m+[m[32m canvasEl.width = this.imageEl.OriginHeight * this.getScaleLevel();[m
+[32m+[m[32m canvasEl.height = this.imageEl.OriginHeight * this.getScaleLevel();[m
+[32m+[m[32m center = this.imageEl.OriginHeight / 2;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m contextEl.scale(this.getScaleLevel(), this.getScaleLevel());[m
+[32m+[m[41m [m
+[32m+[m[32m contextEl.translate(center, center);[m
+[32m+[m[32m contextEl.rotate(this.rotate * Math.PI / 180);[m
+[32m+[m
+[32m+[m[32m contextEl.drawImage(this.imageEl, 0, 0, this.imageEl.OriginWidth, this.imageEl.OriginHeight, center * -1, center * -1, this.imageEl.OriginWidth, this.imageEl.OriginHeight);[m
+[32m+[m[41m [m
+[32m+[m[32m this.canvasEl = document.createElement("canvas");[m
+[32m+[m[41m [m
+[32m+[m[32m this.contextEl = this.canvasEl.getContext("2d");[m
+[32m+[m[41m [m
+[32m+[m[32m switch (this.rotate) {[m
+[32m+[m[32m case 0 :[m
+[32m+[m[41m [m
+[32m+[m[32m this.canvasEl.width = this.imageEl.OriginWidth * this.getScaleLevel();[m
+[32m+[m[32m this.canvasEl.height = this.imageEl.OriginHeight * this.getScaleLevel();[m
+[32m+[m[41m [m
+[32m+[m[32m this.contextEl.drawImage(canvasEl, 0, 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);[m
+[32m+[m[41m [m
+[32m+[m[32m break;[m
+[32m+[m[32m case 90 :[m[41m [m
+[32m+[m[41m [m
+[32m+[m[32m this.canvasEl.width = this.imageEl.OriginHeight * this.getScaleLevel();[m
+[32m+[m[32m this.canvasEl.height = this.imageEl.OriginWidth * this.getScaleLevel();[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){[m
+[32m+[m[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);[m
+[32m+[m[32m break;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.contextEl.drawImage(canvasEl, 0, 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);[m
+[32m+[m[41m [m
+[32m+[m[32m break;[m
+[32m+[m[32m case 180 :[m
+[32m+[m[41m [m
+[32m+[m[32m this.canvasEl.width = this.imageEl.OriginWidth * this.getScaleLevel();[m
+[32m+[m[32m this.canvasEl.height = this.imageEl.OriginHeight * this.getScaleLevel();[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){[m
+[32m+[m[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);[m
+[32m+[m[32m break;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[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);[m
+[32m+[m[41m [m
+[32m+[m[32m break;[m
+[32m+[m[32m case 270 :[m
+[32m+[m[41m [m
+[32m+[m[32m this.canvasEl.width = this.imageEl.OriginHeight * this.getScaleLevel();[m
+[32m+[m[32m this.canvasEl.height = this.imageEl.OriginWidth * this.getScaleLevel();[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){[m
+[32m+[m[32m this.contextEl.drawImage(canvasEl, 0, 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);[m
+[32m+[m[32m break;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[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);[m
+[32m+[m[41m [m
+[32m+[m[32m break;[m
+[32m+[m[32m default :[m[41m [m
+[32m+[m[32m break;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.previewEl.appendChild(this.canvasEl);[m
+[32m+[m[41m [m
+[32m+[m[32m this.setCanvasPosition();[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m crop : function()[m
+[32m+[m[32m {[m
+[32m+[m[32m if(!this.canvasLoaded){[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m var imageCanvas = document.createElement("canvas");[m
+[32m+[m[41m [m
+[32m+[m[32m var imageContext = imageCanvas.getContext("2d");[m
+[32m+[m[41m [m
+[32m+[m[32m imageCanvas.width = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? this.imageEl.OriginWidth : this.imageEl.OriginHeight;[m
+[32m+[m[32m imageCanvas.height = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? this.imageEl.OriginWidth : this.imageEl.OriginHeight;[m
+[32m+[m[41m [m
+[32m+[m[32m var center = imageCanvas.width / 2;[m
+[32m+[m[41m [m
+[32m+[m[32m imageContext.translate(center, center);[m
+[32m+[m[41m [m
+[32m+[m[32m imageContext.rotate(this.rotate * Math.PI / 180);[m
+[32m+[m[41m [m
+[32m+[m[32m imageContext.drawImage(this.imageEl, 0, 0, this.imageEl.OriginWidth, this.imageEl.OriginHeight, center * -1, center * -1, this.imageEl.OriginWidth, this.imageEl.OriginHeight);[m
+[32m+[m[41m [m
+[32m+[m[32m var canvas = document.createElement("canvas");[m
+[32m+[m[41m [m
+[32m+[m[32m var context = canvas.getContext("2d");[m
+[32m+[m[41m [m
+[32m+[m[32m canvas.width = this.minWidth;[m
+[32m+[m[32m canvas.height = this.minHeight;[m
+[32m+[m
+[32m+[m[32m switch (this.rotate) {[m
+[32m+[m[32m case 0 :[m
+[32m+[m[41m [m
+[32m+[m[32m var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getWidth() / this.getScaleLevel());[m
+[32m+[m[32m var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getHeight() / this.getScaleLevel());[m
+[32m+[m[41m [m
+[32m+[m[32m var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());[m
+[32m+[m[32m var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());[m
+[32m+[m[41m [m
+[32m+[m[32m var targetWidth = this.minWidth - 2 * x;[m
+[32m+[m[32m var targetHeight = this.minHeight - 2 * y;[m
+[32m+[m[41m [m
+[32m+[m[32m var scale = 1;[m
+[32m+[m[41m [m
+[32m+[m[32m if((x == 0 && y == 0) || (x == 0 && y > 0)){[m
+[32m+[m[32m scale = targetWidth / width;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if(x > 0 && y == 0){[m
+[32m+[m[32m scale = targetHeight / height;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if(x > 0 && y > 0){[m
+[32m+[m[32m scale = targetWidth / width;[m
+[32m+[m[41m [m
+[32m+[m[32m if(width < height){[m
+[32m+[m[32m scale = targetHeight / height;[m
+[32m+[m[32m }[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m context.scale(scale, scale);[m
+[32m+[m[41m [m
+[32m+[m[32m var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));[m
+[32m+[m[32m var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));[m
+[32m+[m
+[32m+[m[32m sx = sx < 0 ? 0 : (sx / this.getScaleLevel());[m
+[32m+[m[32m sy = sy < 0 ? 0 : (sy / this.getScaleLevel());[m
+[32m+[m
+[32m+[m[32m context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);[m
+[32m+[m[41m [m
+[32m+[m[32m break;[m
+[32m+[m[32m case 90 :[m[41m [m
+[32m+[m[41m [m
+[32m+[m[32m var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getWidth() / this.getScaleLevel());[m
+[32m+[m[32m var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getHeight() / this.getScaleLevel());[m
+[32m+[m[41m [m
+[32m+[m[32m var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());[m
+[32m+[m[32m var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());[m
+[32m+[m[41m [m
+[32m+[m[32m var targetWidth = this.minWidth - 2 * x;[m
+[32m+[m[32m var targetHeight = this.minHeight - 2 * y;[m
+[32m+[m[41m [m
+[32m+[m[32m var scale = 1;[m
+[32m+[m[41m [m
+[32m+[m[32m if((x == 0 && y == 0) || (x == 0 && y > 0)){[m
+[32m+[m[32m scale = targetWidth / width;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if(x > 0 && y == 0){[m
+[32m+[m[32m scale = targetHeight / height;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if(x > 0 && y > 0){[m
+[32m+[m[32m scale = targetWidth / width;[m
+[32m+[m[41m [m
+[32m+[m[32m if(width < height){[m
+[32m+[m[32m scale = targetHeight / height;[m
+[32m+[m[32m }[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m context.scale(scale, scale);[m
+[32m+[m[41m [m
+[32m+[m[32m var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));[m
+[32m+[m[32m var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));[m
+[32m+[m
+[32m+[m[32m sx = sx < 0 ? 0 : (sx / this.getScaleLevel());[m
+[32m+[m[32m sy = sy < 0 ? 0 : (sy / this.getScaleLevel());[m
+[32m+[m[41m [m
+[32m+[m[32m sx += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight) : 0;[m
+[32m+[m[41m [m
+[32m+[m[32m context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);[m
+[32m+[m[41m [m
+[32m+[m[32m break;[m
+[32m+[m[32m case 180 :[m
+[32m+[m[41m [m
+[32m+[m[32m var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getWidth() / this.getScaleLevel());[m
+[32m+[m[32m var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getHeight() / this.getScaleLevel());[m
+[32m+[m[41m [m
+[32m+[m[32m var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());[m
+[32m+[m[32m var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());[m
+[32m+[m[41m [m
+[32m+[m[32m var targetWidth = this.minWidth - 2 * x;[m
+[32m+[m[32m var targetHeight = this.minHeight - 2 * y;[m
+[32m+[m[41m [m
+[32m+[m[32m var scale = 1;[m
+[32m+[m[41m [m
+[32m+[m[32m if((x == 0 && y == 0) || (x == 0 && y > 0)){[m
+[32m+[m[32m scale = targetWidth / width;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if(x > 0 && y == 0){[m
+[32m+[m[32m scale = targetHeight / height;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if(x > 0 && y > 0){[m
+[32m+[m[32m scale = targetWidth / width;[m
+[32m+[m[41m [m
+[32m+[m[32m if(width < height){[m
+[32m+[m[32m scale = targetHeight / height;[m
+[32m+[m[32m }[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m context.scale(scale, scale);[m
+[32m+[m[41m [m
+[32m+[m[32m var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));[m
+[32m+[m[32m var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));[m
+[32m+[m
+[32m+[m[32m sx = sx < 0 ? 0 : (sx / this.getScaleLevel());[m
+[32m+[m[32m sy = sy < 0 ? 0 : (sy / this.getScaleLevel());[m
+[32m+[m
+[32m+[m[32m sx += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? 0 : Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight);[m
+[32m+[m[32m sy += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight) : 0;[m
+[32m+[m[41m [m
+[32m+[m[32m context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);[m
+[32m+[m[41m [m
+[32m+[m[32m break;[m
+[32m+[m[32m case 270 :[m
+[32m+[m[41m [m
+[32m+[m[32m var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getWidth() / this.getScaleLevel());[m
+[32m+[m[32m var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getHeight() / this.getScaleLevel());[m
+[32m+[m[41m [m
+[32m+[m[32m var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());[m
+[32m+[m[32m var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());[m
+[32m+[m[41m [m
+[32m+[m[32m var targetWidth = this.minWidth - 2 * x;[m
+[32m+[m[32m var targetHeight = this.minHeight - 2 * y;[m
+[32m+[m[41m [m
+[32m+[m[32m var scale = 1;[m
+[32m+[m[41m [m
+[32m+[m[32m if((x == 0 && y == 0) || (x == 0 && y > 0)){[m
+[32m+[m[32m scale = targetWidth / width;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if(x > 0 && y == 0){[m
+[32m+[m[32m scale = targetHeight / height;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if(x > 0 && y > 0){[m
+[32m+[m[32m scale = targetWidth / width;[m
+[32m+[m[41m [m
+[32m+[m[32m if(width < height){[m
+[32m+[m[32m scale = targetHeight / height;[m
+[32m+[m[32m }[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m context.scale(scale, scale);[m
+[32m+[m[41m [m
+[32m+[m[32m var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));[m
+[32m+[m[32m var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));[m
+[32m+[m
+[32m+[m[32m sx = sx < 0 ? 0 : (sx / this.getScaleLevel());[m
+[32m+[m[32m sy = sy < 0 ? 0 : (sy / this.getScaleLevel());[m
+[32m+[m[41m [m
+[32m+[m[32m sy += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? 0 : Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight);[m
+[32m+[m[41m [m
+[32m+[m[32m context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);[m
+[32m+[m[41m [m
+[32m+[m[32m break;[m
+[32m+[m[32m default :[m[41m [m
+[32m+[m[32m break;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.cropData = canvas.toDataURL(this.cropType);[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.fireEvent('crop', this, this.cropData) !== false){[m
+[32m+[m[32m this.process(this.file, this.cropData);[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m return;[m
+[32m+[m[41m [m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m setThumbBoxSize : function()[m
+[32m+[m[32m {[m
+[32m+[m[32m var width, height;[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.isDocument && typeof(this.imageEl) != 'undefined'){[m
+[32m+[m[32m width = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.max(this.minWidth, this.minHeight) : Math.min(this.minWidth, this.minHeight);[m
+[32m+[m[32m height = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.min(this.minWidth, this.minHeight) : Math.max(this.minWidth, this.minHeight);[m
+[32m+[m[41m [m
+[32m+[m[32m this.minWidth = width;[m
+[32m+[m[32m this.minHeight = height;[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.rotate == 90 || this.rotate == 270){[m
+[32m+[m[32m this.minWidth = height;[m
+[32m+[m[32m this.minHeight = width;[m
+[32m+[m[32m }[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m height = 300;[m
+[32m+[m[32m width = Math.ceil(this.minWidth * height / this.minHeight);[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.minWidth > this.minHeight){[m
+[32m+[m[32m width = 300;[m
+[32m+[m[32m height = Math.ceil(this.minHeight * width / this.minWidth);[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.thumbEl.setStyle({[m
+[32m+[m[32m width : width + 'px',[m
+[32m+[m[32m height : height + 'px'[m
+[32m+[m[32m });[m
+[32m+[m
+[32m+[m[32m return;[m
+[32m+[m[41m [m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m setThumbBoxPosition : function()[m
+[32m+[m[32m {[m
+[32m+[m[32m var x = Math.ceil((this.bodyEl.getWidth() - this.thumbEl.getWidth()) / 2 );[m
+[32m+[m[32m var y = Math.ceil((this.bodyEl.getHeight() - this.thumbEl.getHeight()) / 2);[m
+[32m+[m[41m [m
+[32m+[m[32m this.thumbEl.setLeft(x);[m
+[32m+[m[32m this.thumbEl.setTop(y);[m
+[32m+[m[41m [m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m baseRotateLevel : function()[m
+[32m+[m[32m {[m
+[32m+[m[32m this.baseRotate = 1;[m
+[32m+[m[41m [m
+[32m+[m[32m if([m
+[32m+[m[32m typeof(this.exif) != 'undefined' &&[m
+[32m+[m[32m typeof(this.exif[Roo.dialog.UploadCropbox['tags']['Orientation']]) != 'undefined' &&[m
+[32m+[m[32m [1, 3, 6, 8].indexOf(this.exif[Roo.dialog.UploadCropbox['tags']['Orientation']]) != -1[m
+[32m+[m[32m ){[m
+[32m+[m[32m this.baseRotate = this.exif[Roo.dialog.UploadCropbox['tags']['Orientation']];[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.rotate = Roo.dialog.UploadCropbox['Orientation'][this.baseRotate];[m
+[32m+[m[41m [m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m baseScaleLevel : function()[m
+[32m+[m[32m {[m
+[32m+[m[32m var width, height;[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.isDocument){[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.baseRotate == 6 || this.baseRotate == 8){[m
+[32m+[m[41m [m
+[32m+[m[32m height = this.thumbEl.getHeight();[m
+[32m+[m[32m this.baseScale = height / this.imageEl.OriginWidth;[m
+[32m+[m
+[32m+[m[32m if(this.imageEl.OriginHeight * this.baseScale > this.thumbEl.getWidth()){[m
+[32m+[m[32m width = this.thumbEl.getWidth();[m
+[32m+[m[32m this.baseScale = width / this.imageEl.OriginHeight;[m
+[32m+[m[32m }[m
+[32m+[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m
+[32m+[m[32m height = this.thumbEl.getHeight();[m
+[32m+[m[32m this.baseScale = height / this.imageEl.OriginHeight;[m
+[32m+[m
+[32m+[m[32m if(this.imageEl.OriginWidth * this.baseScale > this.thumbEl.getWidth()){[m
+[32m+[m[32m width = this.thumbEl.getWidth();[m
+[32m+[m[32m this.baseScale = width / this.imageEl.OriginWidth;[m
+[32m+[m[32m }[m
+[32m+[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.baseRotate == 6 || this.baseRotate == 8){[m
+[32m+[m[41m [m
+[32m+[m[32m width = this.thumbEl.getHeight();[m
+[32m+[m[32m this.baseScale = width / this.imageEl.OriginHeight;[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.imageEl.OriginHeight * this.baseScale < this.thumbEl.getWidth()){[m
+[32m+[m[32m height = this.thumbEl.getWidth();[m
+[32m+[m[32m this.baseScale = height / this.imageEl.OriginHeight;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){[m
+[32m+[m[32m height = this.thumbEl.getWidth();[m
+[32m+[m[32m this.baseScale = height / this.imageEl.OriginHeight;[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.imageEl.OriginWidth * this.baseScale < this.thumbEl.getHeight()){[m
+[32m+[m[32m width = this.thumbEl.getHeight();[m
+[32m+[m[32m this.baseScale = width / this.imageEl.OriginWidth;[m
+[32m+[m[32m }[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m width = this.thumbEl.getWidth();[m
+[32m+[m[32m this.baseScale = width / this.imageEl.OriginWidth;[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.imageEl.OriginHeight * this.baseScale < this.thumbEl.getHeight()){[m
+[32m+[m[32m height = this.thumbEl.getHeight();[m
+[32m+[m[32m this.baseScale = height / this.imageEl.OriginHeight;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){[m
+[32m+[m[41m [m
+[32m+[m[32m height = this.thumbEl.getHeight();[m
+[32m+[m[32m this.baseScale = height / this.imageEl.OriginHeight;[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.imageEl.OriginWidth * this.baseScale < this.thumbEl.getWidth()){[m
+[32m+[m[32m width = this.thumbEl.getWidth();[m
+[32m+[m[32m this.baseScale = width / this.imageEl.OriginWidth;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m return;[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m getScaleLevel : function()[m
+[32m+[m[32m {[m
+[32m+[m[32m return this.baseScale * Math.pow(1.1, this.scale);[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m onTouchStart : function(e)[m
+[32m+[m[32m {[m
+[32m+[m[32m if(!this.canvasLoaded){[m
+[32m+[m[32m this.beforeSelectFile(e);[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m var touches = e.browserEvent.touches;[m
+[32m+[m[41m [m
+[32m+[m[32m if(!touches){[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if(touches.length == 1){[m
+[32m+[m[32m this.onMouseDown(e);[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if(touches.length != 2){[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m var coords = [];[m
+[32m+[m[41m [m
+[32m+[m[32m for(var i = 0, finger; finger = touches[i]; i++){[m
+[32m+[m[32m coords.push(finger.pageX, finger.pageY);[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m var x = Math.pow(coords[0] - coords[2], 2);[m
+[32m+[m[32m var y = Math.pow(coords[1] - coords[3], 2);[m
+[32m+[m[41m [m
+[32m+[m[32m this.startDistance = Math.sqrt(x + y);[m
+[32m+[m[41m [m
+[32m+[m[32m this.startScale = this.scale;[m
+[32m+[m[41m [m
+[32m+[m[32m this.pinching = true;[m
+[32m+[m[32m this.dragable = false;[m
+[32m+[m[41m [m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m onTouchMove : function(e)[m
+[32m+[m[32m {[m
+[32m+[m[32m if(!this.pinching && !this.dragable){[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m var touches = e.browserEvent.touches;[m
+[32m+[m[41m [m
+[32m+[m[32m if(!touches){[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.dragable){[m
+[32m+[m[32m this.onMouseMove(e);[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m var coords = [];[m
+[32m+[m[41m [m
+[32m+[m[32m for(var i = 0, finger; finger = touches[i]; i++){[m
+[32m+[m[32m coords.push(finger.pageX, finger.pageY);[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m var x = Math.pow(coords[0] - coords[2], 2);[m
+[32m+[m[32m var y = Math.pow(coords[1] - coords[3], 2);[m
+[32m+[m[41m [m
+[32m+[m[32m this.endDistance = Math.sqrt(x + y);[m
+[32m+[m[41m [m
+[32m+[m[32m this.scale = this.startScale + Math.floor(Math.log(this.endDistance / this.startDistance) / Math.log(1.1));[m
+[32m+[m[41m [m
+[32m+[m[32m if(!this.zoomable()){[m
+[32m+[m[32m this.scale = this.startScale;[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.draw();[m
+[32m+[m[41m [m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m onTouchEnd : function(e)[m
+[32m+[m[32m {[m
+[32m+[m[32m this.pinching = false;[m
+[32m+[m[32m this.dragable = false;[m
+[32m+[m[41m [m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m process : function(file, crop)[m
+[32m+[m[32m {[m
+[32m+[m[32m if(this.loadMask){[m
+[32m+[m[32m this.maskEl.mask(this.loadingText);[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.xhr = new XMLHttpRequest();[m
+[32m+[m[41m [m
+[32m+[m[32m file.xhr = this.xhr;[m
+[32m+[m
+[32m+[m[32m this.xhr.open(this.method, this.url, true);[m
+[32m+[m[41m [m
+[32m+[m[32m var headers = {[m
+[32m+[m[32m "Accept": "application/json",[m
+[32m+[m[32m "Cache-Control": "no-cache",[m
+[32m+[m[32m "X-Requested-With": "XMLHttpRequest"[m
+[32m+[m[32m };[m
+[32m+[m[41m [m
+[32m+[m[32m for (var headerName in headers) {[m
+[32m+[m[32m var headerValue = headers[headerName];[m
+[32m+[m[32m if (headerValue) {[m
+[32m+[m[32m this.xhr.setRequestHeader(headerName, headerValue);[m
+[32m+[m[32m }[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m var _this = this;[m
+[32m+[m[41m [m
+[32m+[m[32m this.xhr.onload = function()[m
+[32m+[m[32m {[m
+[32m+[m[32m _this.xhrOnLoad(_this.xhr);[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.xhr.onerror = function()[m
+[32m+[m[32m {[m
+[32m+[m[32m _this.xhrOnError(_this.xhr);[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m var formData = new FormData();[m
+[32m+[m
+[32m+[m[32m formData.append('returnHTML', 'NO');[m
+[32m+[m[41m [m
+[32m+[m[32m if(crop){[m
+[32m+[m[32m formData.append('crop', crop);[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if(typeof(file) != 'undefined' && (typeof(file.id) == 'undefined' || file.id * 1 < 1)){[m
+[32m+[m[32m formData.append(this.paramName, file, file.name);[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if(typeof(file.filename) != 'undefined'){[m
+[32m+[m[32m formData.append('filename', file.filename);[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if(typeof(file.mimetype) != 'undefined'){[m
+[32m+[m[32m formData.append('mimetype', file.mimetype);[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.fireEvent('arrange', this, formData) != false){[m
+[32m+[m[32m this.xhr.send(formData);[m
+[32m+[m[32m };[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m xhrOnLoad : function(xhr)[m
+[32m+[m[32m {[m
+[32m+[m[32m if(this.loadMask){[m
+[32m+[m[32m this.maskEl.unmask();[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if (xhr.readyState !== 4) {[m
+[32m+[m[32m this.fireEvent('exception', this, xhr);[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m
+[32m+[m[32m var response = Roo.decode(xhr.responseText);[m
+[32m+[m[41m [m
+[32m+[m[32m if(!response.success){[m
+[32m+[m[32m this.fireEvent('exception', this, xhr);[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m var response = Roo.decode(xhr.responseText);[m
+[32m+[m[41m [m
+[32m+[m[32m this.fireEvent('upload', this, response);[m
+[32m+[m[41m [m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m xhrOnError : function()[m
+[32m+[m[32m {[m
+[32m+[m[32m if(this.loadMask){[m
+[32m+[m[32m this.maskEl.unmask();[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m Roo.log('xhr on error');[m
+[32m+[m[41m [m
+[32m+[m[32m var response = Roo.decode(xhr.responseText);[m
+[32m+[m[41m [m
+[32m+[m[32m Roo.log(response);[m
+[32m+[m[41m [m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m prepare : function(file)[m
+[32m+[m[32m {[m[41m [m
+[32m+[m[32m if(this.loadMask){[m
+[32m+[m[32m this.maskEl.mask(this.loadingText);[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.file = false;[m
+[32m+[m[32m this.exif = {};[m
+[32m+[m[41m [m
+[32m+[m[32m if(typeof(file) === 'string'){[m
+[32m+[m[32m this.loadCanvas(file);[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if(!file || !this.urlAPI){[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.file = file;[m
+[32m+[m[32m this.cropType = file.type;[m
+[32m+[m[41m [m
+[32m+[m[32m var _this = this;[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.fireEvent('prepare', this, this.file) != false){[m
+[32m+[m[41m [m
+[32m+[m[32m var reader = new FileReader();[m
+[32m+[m[41m [m
+[32m+[m[32m reader.onload = function (e) {[m
+[32m+[m[32m if (e.target.error) {[m
+[32m+[m[32m Roo.log(e.target.error);[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m var buffer = e.target.result,[m
+[32m+[m[32m dataView = new DataView(buffer),[m
+[32m+[m[32m offset = 2,[m
+[32m+[m[32m maxOffset = dataView.byteLength - 4,[m
+[32m+[m[32m markerBytes,[m
+[32m+[m[32m markerLength;[m
+[32m+[m[41m [m
+[32m+[m[32m if (dataView.getUint16(0) === 0xffd8) {[m
+[32m+[m[32m while (offset < maxOffset) {[m
+[32m+[m[32m markerBytes = dataView.getUint16(offset);[m
+[32m+[m[41m [m
+[32m+[m[32m if ((markerBytes >= 0xffe0 && markerBytes <= 0xffef) || markerBytes === 0xfffe) {[m
+[32m+[m[32m markerLength = dataView.getUint16(offset + 2) + 2;[m
+[32m+[m[32m if (offset + markerLength > dataView.byteLength) {[m
+[32m+[m[32m Roo.log('Invalid meta data: Invalid segment size.');[m
+[32m+[m[32m break;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if(markerBytes == 0xffe1){[m
+[32m+[m[32m _this.parseExifData([m
+[32m+[m[32m dataView,[m
+[32m+[m[32m offset,[m
+[32m+[m[32m markerLength[m
+[32m+[m[32m );[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m offset += markerLength;[m
+[32m+[m[41m [m
+[32m+[m[32m continue;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m break;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m var url = _this.urlAPI.createObjectURL(_this.file);[m
+[32m+[m[41m [m
+[32m+[m[32m _this.loadCanvas(url);[m
+[32m+[m[41m [m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m reader.readAsArrayBuffer(this.file);[m
+[32m+[m[41m [m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m parseExifData : function(dataView, offset, length)[m
+[32m+[m[32m {[m
+[32m+[m[32m var tiffOffset = offset + 10,[m
+[32m+[m[32m littleEndian,[m
+[32m+[m[32m dirOffset;[m
+[32m+[m[41m [m
+[32m+[m[32m if (dataView.getUint32(offset + 4) !== 0x45786966) {[m
+[32m+[m[32m // No Exif data, might be XMP data instead[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m // Check for the ASCII code for "Exif" (0x45786966):[m
+[32m+[m[32m if (dataView.getUint32(offset + 4) !== 0x45786966) {[m
+[32m+[m[32m // No Exif data, might be XMP data instead[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[32m if (tiffOffset + 8 > dataView.byteLength) {[m
+[32m+[m[32m Roo.log('Invalid Exif data: Invalid segment size.');[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[32m // Check for the two null bytes:[m
+[32m+[m[32m if (dataView.getUint16(offset + 8) !== 0x0000) {[m
+[32m+[m[32m Roo.log('Invalid Exif data: Missing byte alignment offset.');[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[32m // Check the byte alignment:[m
+[32m+[m[32m switch (dataView.getUint16(tiffOffset)) {[m
+[32m+[m[32m case 0x4949:[m
+[32m+[m[32m littleEndian = true;[m
+[32m+[m[32m break;[m
+[32m+[m[32m case 0x4D4D:[m
+[32m+[m[32m littleEndian = false;[m
+[32m+[m[32m break;[m
+[32m+[m[32m default:[m
+[32m+[m[32m Roo.log('Invalid Exif data: Invalid byte alignment marker.');[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[32m // Check for the TIFF tag marker (0x002A):[m
+[32m+[m[32m if (dataView.getUint16(tiffOffset + 2, littleEndian) !== 0x002A) {[m
+[32m+[m[32m Roo.log('Invalid Exif data: Missing TIFF marker.');[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[32m // Retrieve the directory offset bytes, usually 0x00000008 or 8 decimal:[m
+[32m+[m[32m dirOffset = dataView.getUint32(tiffOffset + 4, littleEndian);[m
+[32m+[m[41m [m
+[32m+[m[32m this.parseExifTags([m
+[32m+[m[32m dataView,[m
+[32m+[m[32m tiffOffset,[m
+[32m+[m[32m tiffOffset + dirOffset,[m
+[32m+[m[32m littleEndian[m
+[32m+[m[32m );[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m parseExifTags : function(dataView, tiffOffset, dirOffset, littleEndian)[m
+[32m+[m[32m {[m
+[32m+[m[32m var tagsNumber,[m
+[32m+[m[32m dirEndOffset,[m
+[32m+[m[32m i;[m
+[32m+[m[32m if (dirOffset + 6 > dataView.byteLength) {[m
+[32m+[m[32m Roo.log('Invalid Exif data: Invalid directory offset.');[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[32m tagsNumber = dataView.getUint16(dirOffset, littleEndian);[m
+[32m+[m[32m dirEndOffset = dirOffset + 2 + 12 * tagsNumber;[m
+[32m+[m[32m if (dirEndOffset + 4 > dataView.byteLength) {[m
+[32m+[m[32m Roo.log('Invalid Exif data: Invalid directory size.');[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[32m for (i = 0; i < tagsNumber; i += 1) {[m
+[32m+[m[32m this.parseExifTag([m
+[32m+[m[32m dataView,[m
+[32m+[m[32m tiffOffset,[m
+[32m+[m[32m dirOffset + 2 + 12 * i, // tag offset[m
+[32m+[m[32m littleEndian[m
+[32m+[m[32m );[m
+[32m+[m[32m }[m
+[32m+[m[32m // Return the offset to the next directory:[m
+[32m+[m[32m return dataView.getUint32(dirEndOffset, littleEndian);[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m parseExifTag : function (dataView, tiffOffset, offset, littleEndian)[m[41m [m
+[32m+[m[32m {[m
+[32m+[m[32m var tag = dataView.getUint16(offset, littleEndian);[m
+[32m+[m[41m [m
+[32m+[m[32m this.exif[tag] = this.getExifValue([m
+[32m+[m[32m dataView,[m
+[32m+[m[32m tiffOffset,[m
+[32m+[m[32m offset,[m
+[32m+[m[32m dataView.getUint16(offset + 2, littleEndian), // tag type[m
+[32m+[m[32m dataView.getUint32(offset + 4, littleEndian), // tag length[m
+[32m+[m[32m littleEndian[m
+[32m+[m[32m );[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m getExifValue : function (dataView, tiffOffset, offset, type, length, littleEndian)[m
+[32m+[m[32m {[m
+[32m+[m[32m var tagType = Roo.dialog.UploadCropbox.exifTagTypes[type],[m
+[32m+[m[32m tagSize,[m
+[32m+[m[32m dataOffset,[m
+[32m+[m[32m values,[m
+[32m+[m[32m i,[m
+[32m+[m[32m str,[m
+[32m+[m[32m c;[m
+[32m+[m[41m [m
+[32m+[m[32m if (!tagType) {[m
+[32m+[m[32m Roo.log('Invalid Exif data: Invalid tag type.');[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m tagSize = tagType.size * length;[m
+[32m+[m[32m // Determine if the value is contained in the dataOffset bytes,[m
+[32m+[m[32m // or if the value at the dataOffset is a pointer to the actual data:[m
+[32m+[m[32m dataOffset = tagSize > 4 ?[m
+[32m+[m[32m tiffOffset + dataView.getUint32(offset + 8, littleEndian) : (offset + 8);[m
+[32m+[m[32m if (dataOffset + tagSize > dataView.byteLength) {[m
+[32m+[m[32m Roo.log('Invalid Exif data: Invalid data offset.');[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[32m if (length === 1) {[m
+[32m+[m[32m return tagType.getValue(dataView, dataOffset, littleEndian);[m
+[32m+[m[32m }[m
+[32m+[m[32m values = [];[m
+[32m+[m[32m for (i = 0; i < length; i += 1) {[m
+[32m+[m[32m values[i] = tagType.getValue(dataView, dataOffset + i * tagType.size, littleEndian);[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if (tagType.ascii) {[m
+[32m+[m[32m str = '';[m
+[32m+[m[32m // Concatenate the chars:[m
+[32m+[m[32m for (i = 0; i < values.length; i += 1) {[m
+[32m+[m[32m c = values[i];[m
+[32m+[m[32m // Ignore the terminating NULL byte(s):[m
+[32m+[m[32m if (c === '\u0000') {[m
+[32m+[m[32m break;[m
+[32m+[m[32m }[m
+[32m+[m[32m str += c;[m
+[32m+[m[32m }[m
+[32m+[m[32m return str;[m
+[32m+[m[32m }[m
+[32m+[m[32m return values;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m});[m
+[32m+[m
+[32m+[m[32mRoo.apply(Roo.dialog.UploadCropbox, {[m
+[32m+[m[32m tags : {[m
+[32m+[m[32m 'Orientation': 0x0112[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m Orientation: {[m
+[32m+[m[32m 1: 0, //'top-left',[m
+[32m+[m[32m// 2: 'top-right',[m
+[32m+[m[32m 3: 180, //'bottom-right',[m
+[32m+[m[32m// 4: 'bottom-left',[m
+[32m+[m[32m// 5: 'left-top',[m
+[32m+[m[32m 6: 90, //'right-top',[m
+[32m+[m[32m// 7: 'right-bottom',[m
+[32m+[m[32m 8: 270 //'left-bottom'[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m exifTagTypes : {[m
+[32m+[m[32m // byte, 8-bit unsigned int:[m
+[32m+[m[32m 1: {[m
+[32m+[m[32m getValue: function (dataView, dataOffset) {[m
+[32m+[m[32m return dataView.getUint8(dataOffset);[m
+[32m+[m[32m },[m
+[32m+[m[32m size: 1[m
+[32m+[m[32m },[m
+[32m+[m[32m // ascii, 8-bit byte:[m
+[32m+[m[32m 2: {[m
+[32m+[m[32m getValue: function (dataView, dataOffset) {[m
+[32m+[m[32m return String.fromCharCode(dataView.getUint8(dataOffset));[m
+[32m+[m[32m },[m
+[32m+[m[32m size: 1,[m
+[32m+[m[32m ascii: true[m
+[32m+[m[32m },[m
+[32m+[m[32m // short, 16 bit int:[m
+[32m+[m[32m 3: {[m
+[32m+[m[32m getValue: function (dataView, dataOffset, littleEndian) {[m
+[32m+[m[32m return dataView.getUint16(dataOffset, littleEndian);[m
+[32m+[m[32m },[m
+[32m+[m[32m size: 2[m
+[32m+[m[32m },[m
+[32m+[m[32m // long, 32 bit int:[m
+[32m+[m[32m 4: {[m
+[32m+[m[32m getValue: function (dataView, dataOffset, littleEndian) {[m
+[32m+[m[32m return dataView.getUint32(dataOffset, littleEndian);[m
+[32m+[m[32m },[m
+[32m+[m[32m size: 4[m
+[32m+[m[32m },[m
+[32m+[m[32m // rational = two long values, first is numerator, second is denominator:[m
+[32m+[m[32m 5: {[m
+[32m+[m[32m getValue: function (dataView, dataOffset, littleEndian) {[m
+[32m+[m[32m return dataView.getUint32(dataOffset, littleEndian) /[m
+[32m+[m[32m dataView.getUint32(dataOffset + 4, littleEndian);[m
+[32m+[m[32m },[m
+[32m+[m[32m size: 8[m
+[32m+[m[32m },[m
+[32m+[m[32m // slong, 32 bit signed int:[m
+[32m+[m[32m 9: {[m
+[32m+[m[32m getValue: function (dataView, dataOffset, littleEndian) {[m
+[32m+[m[32m return dataView.getInt32(dataOffset, littleEndian);[m
+[32m+[m[32m },[m
+[32m+[m[32m size: 4[m
+[32m+[m[32m },[m
+[32m+[m[32m // srational, two slongs, first is numerator, second is denominator:[m
+[32m+[m[32m 10: {[m
+[32m+[m[32m getValue: function (dataView, dataOffset, littleEndian) {[m
+[32m+[m[32m return dataView.getInt32(dataOffset, littleEndian) /[m
+[32m+[m[32m dataView.getInt32(dataOffset + 4, littleEndian);[m
+[32m+[m[32m },[m
+[32m+[m[32m size: 8[m
+[32m+[m[32m }[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m footer : {[m
+[32m+[m[32m STANDARD : [[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'div',[m
+[32m+[m[32m cls : 'btn-group roo-upload-cropbox-rotate-left',[m
+[32m+[m[32m action : 'rotate-left',[m
+[32m+[m[32m cn : [[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'button',[m
+[32m+[m[32m cls : 'btn btn-default',[m
+[32m+[m[32m html : ''[m
+[32m+[m[32m }[m
+[32m+[m[32m ][m
+[32m+[m[32m },[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'div',[m
+[32m+[m[32m cls : 'btn-group roo-upload-cropbox-picture',[m
+[32m+[m[32m action : 'picture',[m
+[32m+[m[32m cn : [[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'button',[m
+[32m+[m[32m cls : 'btn btn-default',[m
+[32m+[m[32m html : ''[m
+[32m+[m[32m }[m
+[32m+[m[32m ][m
+[32m+[m[32m },[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'div',[m
+[32m+[m[32m cls : 'btn-group roo-upload-cropbox-rotate-right',[m
+[32m+[m[32m action : 'rotate-right',[m
+[32m+[m[32m cn : [[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'button',[m
+[32m+[m[32m cls : 'btn btn-default',[m
+[32m+[m[32m html : ''[m
+[32m+[m[32m }[m
+[32m+[m[32m ][m
+[32m+[m[32m }[m
+[32m+[m[32m ],[m
+[32m+[m[32m DOCUMENT : [[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'div',[m
+[32m+[m[32m cls : 'btn-group roo-upload-cropbox-rotate-left',[m
+[32m+[m[32m action : 'rotate-left',[m
+[32m+[m[32m cn : [[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'button',[m
+[32m+[m[32m cls : 'btn btn-default',[m
+[32m+[m[32m html : ''[m
+[32m+[m[32m }[m
+[32m+[m[32m ][m
+[32m+[m[32m },[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'div',[m
+[32m+[m[32m cls : 'btn-group roo-upload-cropbox-download',[m
+[32m+[m[32m action : 'download',[m
+[32m+[m[32m cn : [[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'button',[m
+[32m+[m[32m cls : 'btn btn-default',[m
+[32m+[m[32m html : ''[m
+[32m+[m[32m }[m
+[32m+[m[32m ][m
+[32m+[m[32m },[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'div',[m
+[32m+[m[32m cls : 'btn-group roo-upload-cropbox-crop',[m
+[32m+[m[32m action : 'crop',[m
+[32m+[m[32m cn : [[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'button',[m
+[32m+[m[32m cls : 'btn btn-default',[m
+[32m+[m[32m html : ''[m
+[32m+[m[32m }[m
+[32m+[m[32m ][m
+[32m+[m[32m },[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'div',[m
+[32m+[m[32m cls : 'btn-group roo-upload-cropbox-trash',[m
+[32m+[m[32m action : 'trash',[m
+[32m+[m[32m cn : [[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'button',[m
+[32m+[m[32m cls : 'btn btn-default',[m
+[32m+[m[32m html : ''[m
+[32m+[m[32m }[m
+[32m+[m[32m ][m
+[32m+[m[32m },[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'div',[m
+[32m+[m[32m cls : 'btn-group roo-upload-cropbox-rotate-right',[m
+[32m+[m[32m action : 'rotate-right',[m
+[32m+[m[32m cn : [[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'button',[m
+[32m+[m[32m cls : 'btn btn-default',[m
+[32m+[m[32m html : ''[m
+[32m+[m[32m }[m
+[32m+[m[32m ][m
+[32m+[m[32m }[m
+[32m+[m[32m ],[m
+[32m+[m[32m ROTATOR : [[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'div',[m
+[32m+[m[32m cls : 'btn-group roo-upload-cropbox-rotate-left',[m
+[32m+[m[32m action : 'rotate-left',[m
+[32m+[m[32m cn : [[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'button',[m
+[32m+[m[32m cls : 'btn btn-default',[m
+[32m+[m[32m html : ''[m
+[32m+[m[32m }[m
+[32m+[m[32m ][m
+[32m+[m[32m },[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'div',[m
+[32m+[m[32m cls : 'btn-group roo-upload-cropbox-rotate-right',[m
+[32m+[m[32m action : 'rotate-right',[m
+[32m+[m[32m cn : [[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'button',[m
+[32m+[m[32m cls : 'btn btn-default',[m
+[32m+[m[32m html : ''[m
+[32m+[m[32m }[m
+[32m+[m[32m ][m
+[32m+[m[32m }[m
+[32m+[m[32m ][m
+[32m+[m[32m }[m
+[32m+[m[32m});[m
+[1mdiff --git a/buildSDK/dependancy_ui.txt b/buildSDK/dependancy_ui.txt[m
+[1mindex 5a8e5a9ac5..f89656e412 100644[m
+[1m--- a/buildSDK/dependancy_ui.txt[m
+[1m+++ b/buildSDK/dependancy_ui.txt[m
+[36m@@ -197,3 +197,6 @@[m [mRoo.XTemplate[m
+ [m
+ // is this ready yet? - is it used?[m
+ // Roo.Login[m
+[32m+[m
+[32m+[m[32mRoo.dialog.namespace[m
+[32m+[m[32mRoo.dialog.UploadCropbox[m
+[1mdiff --git a/css/alert.css b/css/alert.css[m
+[1mnew file mode 100644[m
+[1mindex 0000000000..0cc7751f02[m
+[1m--- /dev/null[m
+[1m+++ b/css/alert.css[m
+[36m@@ -0,0 +1,75 @@[m
+[32m+[m[32m.alert {[m
+[32m+[m[32m padding: 15px;[m
+[32m+[m[32m margin-bottom: 20px;[m
+[32m+[m[32m border: 1px solid transparent;[m
+[32m+[m[32m border-radius: 4px;[m
+[32m+[m[32m}[m
+[32m+[m[32m.alert h4 {[m
+[32m+[m[32m margin-top: 0;[m
+[32m+[m[32m color: inherit;[m
+[32m+[m[32m}[m
+[32m+[m[32m.alert .alert-link {[m
+[32m+[m[32m font-weight: bold;[m
+[32m+[m[32m}[m
+[32m+[m[32m.alert > p,[m
+[32m+[m[32m.alert > ul {[m
+[32m+[m[32m margin-bottom: 0;[m
+[32m+[m[32m}[m
+[32m+[m[32m.alert > p + p {[m
+[32m+[m[32m margin-top: 5px;[m
+[32m+[m[32m}[m
+[32m+[m[32m.alert-dismissable,[m
+[32m+[m[32m.alert-dismissible {[m
+[32m+[m[32m padding-right: 35px;[m
+[32m+[m[32m}[m
+[32m+[m[32m.alert-dismissable .close,[m
+[32m+[m[32m.alert-dismissible .close {[m
+[32m+[m[32m position: relative;[m
+[32m+[m[32m top: -2px;[m
+[32m+[m[32m right: -21px;[m
+[32m+[m[32m color: inherit;[m
+[32m+[m[32m}[m
+[32m+[m[32m.alert-success {[m
+[32m+[m[32m background-color: #dff0d8;[m
+[32m+[m[32m border-color: #d6e9c6;[m
+[32m+[m[32m color: #3c763d;[m
+[32m+[m[32m}[m
+[32m+[m[32m.alert-success hr {[m
+[32m+[m[32m border-top-color: #c9e2b3;[m
+[32m+[m[32m}[m
+[32m+[m[32m.alert-success .alert-link {[m
+[32m+[m[32m color: #2b542c;[m
+[32m+[m[32m}[m
+[32m+[m[32m.alert-info {[m
+[32m+[m[32m background-color: #d9edf7;[m
+[32m+[m[32m border-color: #bce8f1;[m
+[32m+[m[32m color: #31708f;[m
+[32m+[m[32m}[m
+[32m+[m[32m.alert-info hr {[m
+[32m+[m[32m border-top-color: #a6e1ec;[m
+[32m+[m[32m}[m
+[32m+[m[32m.alert-info .alert-link {[m
+[32m+[m[32m color: #245269;[m
+[32m+[m[32m}[m
+[32m+[m[32m.alert-warning {[m
+[32m+[m[32m background-color: #fcf8e3;[m
+[32m+[m[32m border-color: #faebcc;[m
+[32m+[m[32m color: #8a6d3b;[m
+[32m+[m[32m}[m
+[32m+[m[32m.alert-warning hr {[m
+[32m+[m[32m border-top-color: #f7e1b5;[m
+[32m+[m[32m}[m
+[32m+[m[32m.alert-warning .alert-link {[m
+[32m+[m[32m color: #66512c;[m
+[32m+[m[32m}[m
+[32m+[m[32m.alert-danger {[m
+[32m+[m[32m background-color: #f2dede;[m
+[32m+[m[32m border-color: #ebccd1;[m
+[32m+[m[32m color: #a94442;[m
+[32m+[m[32m}[m
+[32m+[m[32m.alert-danger hr {[m
+[32m+[m[32m border-top-color: #e4b9c0;[m
+[32m+[m[32m}[m
+[32m+[m[32m.alert-danger .alert-link {[m
+[32m+[m[32m color: #843534;[m
+[32m+[m[32m}[m
+\ No newline at end of file[m
+[1mdiff --git a/css/button-groups.css b/css/button-groups.css[m
+[1mnew file mode 100644[m
+[1mindex 0000000000..b725faf99b[m
+[1m--- /dev/null[m
+[1m+++ b/css/button-groups.css[m
+[36m@@ -0,0 +1,171 @@[m
+[32m+[m[32m.btn-group,[m
+[32m+[m[32m.btn-group-vertical {[m
+[32m+[m[32m position: relative;[m
+[32m+[m[32m display: inline-block;[m
+[32m+[m[32m vertical-align: middle;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-group > .btn,[m
+[32m+[m[32m.btn-group-vertical > .btn {[m
+[32m+[m[32m position: relative;[m
+[32m+[m[32m float: left;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-group > .btn:hover,[m
+[32m+[m[32m.btn-group-vertical > .btn:hover,[m
+[32m+[m[32m.btn-group > .btn:focus,[m
+[32m+[m[32m.btn-group-vertical > .btn:focus,[m
+[32m+[m[32m.btn-group > .btn:active,[m
+[32m+[m[32m.btn-group-vertical > .btn:active,[m
+[32m+[m[32m.btn-group > .btn.active,[m
+[32m+[m[32m.btn-group-vertical > .btn.active {[m
+[32m+[m[32m z-index: 2;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-group .btn + .btn,[m
+[32m+[m[32m.btn-group .btn + .btn-group,[m
+[32m+[m[32m.btn-group .btn-group + .btn,[m
+[32m+[m[32m.btn-group .btn-group + .btn-group {[m
+[32m+[m[32m margin-left: -1px;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-toolbar {[m
+[32m+[m[32m margin-left: -5px;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-toolbar .btn,[m
+[32m+[m[32m.btn-toolbar .btn-group,[m
+[32m+[m[32m.btn-toolbar .input-group {[m
+[32m+[m[32m float: left;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-toolbar > .btn,[m
+[32m+[m[32m.btn-toolbar > .btn-group,[m
+[32m+[m[32m.btn-toolbar > .input-group {[m
+[32m+[m[32m margin-left: 5px;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {[m
+[32m+[m[32m border-radius: 0;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-group > .btn:first-child {[m
+[32m+[m[32m margin-left: 0;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {[m
+[32m+[m[32m border-bottom-right-radius: 0;[m
+[32m+[m[32m border-top-right-radius: 0;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-group > .btn:last-child:not(:first-child),[m
+[32m+[m[32m.btn-group > .dropdown-toggle:not(:first-child) {[m
+[32m+[m[32m border-bottom-left-radius: 0;[m
+[32m+[m[32m border-top-left-radius: 0;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-group > .btn-group {[m
+[32m+[m[32m float: left;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {[m
+[32m+[m[32m border-radius: 0;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-group > .btn-group:first-child:not(:last-child) > .btn:last-child,[m
+[32m+[m[32m.btn-group > .btn-group:first-child:not(:last-child) > .dropdown-toggle {[m
+[32m+[m[32m border-bottom-right-radius: 0;[m
+[32m+[m[32m border-top-right-radius: 0;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child {[m
+[32m+[m[32m border-bottom-left-radius: 0;[m
+[32m+[m[32m border-top-left-radius: 0;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-group .dropdown-toggle:active,[m
+[32m+[m[32m.btn-group.open .dropdown-toggle {[m
+[32m+[m[32m outline: 0;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-group > .btn + .dropdown-toggle {[m
+[32m+[m[32m padding-left: 8px;[m
+[32m+[m[32m padding-right: 8px;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-group > .btn-lg + .dropdown-toggle {[m
+[32m+[m[32m padding-left: 12px;[m
+[32m+[m[32m padding-right: 12px;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-group.open .dropdown-toggle {[m
+[32m+[m[32m -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);[m
+[32m+[m[32m box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-group.open .dropdown-toggle.btn-link {[m
+[32m+[m[32m -webkit-box-shadow: none;[m
+[32m+[m[32m box-shadow: none;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn .caret {[m
+[32m+[m[32m margin-left: 0;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-lg .caret {[m
+[32m+[m[32m border-width: 5px 5px 0;[m
+[32m+[m[32m border-bottom-width: 0;[m
+[32m+[m[32m}[m
+[32m+[m[32m.dropup .btn-lg .caret {[m
+[32m+[m[32m border-width: 0 5px 5px;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-group-vertical > .btn,[m
+[32m+[m[32m.btn-group-vertical > .btn-group,[m
+[32m+[m[32m.btn-group-vertical > .btn-group > .btn {[m
+[32m+[m[32m display: block;[m
+[32m+[m[32m float: none;[m
+[32m+[m[32m width: 100%;[m
+[32m+[m[32m max-width: 100%;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-group-vertical > .btn-group > .btn {[m
+[32m+[m[32m float: none;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-group-vertical > .btn + .btn,[m
+[32m+[m[32m.btn-group-vertical > .btn + .btn-group,[m
+[32m+[m[32m.btn-group-vertical > .btn-group + .btn,[m
+[32m+[m[32m.btn-group-vertical > .btn-group + .btn-group {[m
+[32m+[m[32m margin-top: -1px;[m
+[32m+[m[32m margin-left: 0;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-group-vertical > .btn:not(:first-child):not(:last-child) {[m
+[32m+[m[32m border-radius: 0;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-group-vertical > .btn:first-child:not(:last-child) {[m
+[32m+[m[32m border-top-right-radius: 4px;[m
+[32m+[m[32m border-top-left-radius: 4px;[m
+[32m+[m[32m border-bottom-right-radius: 0;[m
+[32m+[m[32m border-bottom-left-radius: 0;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-group-vertical > .btn:last-child:not(:first-child) {[m
+[32m+[m[32m border-top-right-radius: 0;[m
+[32m+[m[32m border-top-left-radius: 0;[m
+[32m+[m[32m border-bottom-right-radius: 4px;[m
+[32m+[m[32m border-bottom-left-radius: 4px;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {[m
+[32m+[m[32m border-radius: 0;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-group-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child,[m
+[32m+[m[32m.btn-group-vertical > .btn-group:first-child:not(:last-child) > .dropdown-toggle {[m
+[32m+[m[32m border-bottom-right-radius: 0;[m
+[32m+[m[32m border-bottom-left-radius: 0;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {[m
+[32m+[m[32m border-top-right-radius: 0;[m
+[32m+[m[32m border-top-left-radius: 0;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-group-justified {[m
+[32m+[m[32m display: table;[m
+[32m+[m[32m width: 100%;[m
+[32m+[m[32m table-layout: fixed;[m
+[32m+[m[32m border-collapse: separate;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-group-justified > .btn,[m
+[32m+[m[32m.btn-group-justified > .btn-group {[m
+[32m+[m[32m float: none;[m
+[32m+[m[32m display: table-cell;[m
+[32m+[m[32m width: 1%;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-group-justified > .btn-group .btn {[m
+[32m+[m[32m width: 100%;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-group-justified > .btn-group .dropdown-menu {[m
+[32m+[m[32m left: auto;[m
+[32m+[m[32m}[m
+[32m+[m[32m[data-toggle="buttons"] > .btn input[type="radio"],[m
+[32m+[m[32m[data-toggle="buttons"] > .btn-group > .btn input[type="radio"],[m
+[32m+[m[32m[data-toggle="buttons"] > .btn input[type="checkbox"],[m
+[32m+[m[32m[data-toggle="buttons"] > .btn-group > .btn input[type="checkbox"] {[m
+[32m+[m[32m position: absolute;[m
+[32m+[m[32m clip: rect(0, 0, 0, 0);[m
+[32m+[m[32m pointer-events: none;[m
+[32m+[m[32m}[m
+\ No newline at end of file[m
+[1mdiff --git a/css/buttons.css b/css/buttons.css[m
+[1mnew file mode 100644[m
+[1mindex 0000000000..42ec098feb[m
+[1m--- /dev/null[m
+[1m+++ b/css/buttons.css[m
+[36m@@ -0,0 +1,463 @@[m
+[32m+[m[32m.btn {[m
+[32m+[m[32m display: inline-block;[m
+[32m+[m[32m margin-bottom: 0;[m
+[32m+[m[32m font-weight: normal;[m
+[32m+[m[32m text-align: center;[m
+[32m+[m[32m vertical-align: middle;[m
+[32m+[m[32m touch-action: manipulation;[m
+[32m+[m[32m cursor: pointer;[m
+[32m+[m[32m background-image: none;[m
+[32m+[m[32m border: 1px solid transparent;[m
+[32m+[m[32m white-space: nowrap;[m
+[32m+[m[32m padding: 6px 12px;[m
+[32m+[m[32m font-size: 14px;[m
+[32m+[m[32m line-height: 1.42857143;[m
+[32m+[m[32m border-radius: 4px;[m
+[32m+[m[32m -webkit-user-select: none;[m
+[32m+[m[32m -moz-user-select: none;[m
+[32m+[m[32m -ms-user-select: none;[m
+[32m+[m[32m user-select: none;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn:focus,[m
+[32m+[m[32m.btn:active:focus,[m
+[32m+[m[32m.btn.active:focus,[m
+[32m+[m[32m.btn.focus,[m
+[32m+[m[32m.btn:active.focus,[m
+[32m+[m[32m.btn.active.focus {[m
+[32m+[m[32m outline: 5px auto -webkit-focus-ring-color;[m
+[32m+[m[32m outline-offset: -2px;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn:hover,[m
+[32m+[m[32m.btn:focus,[m
+[32m+[m[32m.btn.focus {[m
+[32m+[m[32m color: #333333;[m
+[32m+[m[32m text-decoration: none;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn:active,[m
+[32m+[m[32m.btn.active {[m
+[32m+[m[32m outline: 0;[m
+[32m+[m[32m background-image: none;[m
+[32m+[m[32m -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);[m
+[32m+[m[32m box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn.disabled,[m
+[32m+[m[32m.btn[disabled],[m
+[32m+[m[32mfieldset[disabled] .btn {[m
+[32m+[m[32m cursor: not-allowed;[m
+[32m+[m[32m opacity: 0.65;[m
+[32m+[m[32m filter: alpha(opacity=65);[m
+[32m+[m[32m -webkit-box-shadow: none;[m
+[32m+[m[32m box-shadow: none;[m
+[32m+[m[32m}[m
+[32m+[m[32ma.btn.disabled,[m
+[32m+[m[32mfieldset[disabled] a.btn {[m
+[32m+[m[32m pointer-events: none;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-default {[m
+[32m+[m[32m color: #333333;[m
+[32m+[m[32m background-color: #ffffff;[m
+[32m+[m[32m border-color: #cccccc;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-default:focus,[m
+[32m+[m[32m.btn-default.focus {[m
+[32m+[m[32m color: #333333;[m
+[32m+[m[32m background-color: #e6e6e6;[m
+[32m+[m[32m border-color: #8c8c8c;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-default:hover {[m
+[32m+[m[32m color: #333333;[m
+[32m+[m[32m background-color: #e6e6e6;[m
+[32m+[m[32m border-color: #adadad;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-default:active,[m
+[32m+[m[32m.btn-default.active,[m
+[32m+[m[32m.open > .dropdown-toggle.btn-default {[m
+[32m+[m[32m color: #333333;[m
+[32m+[m[32m background-color: #e6e6e6;[m
+[32m+[m[32m border-color: #adadad;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-default:active:hover,[m
+[32m+[m[32m.btn-default.active:hover,[m
+[32m+[m[32m.open > .dropdown-toggle.btn-default:hover,[m
+[32m+[m[32m.btn-default:active:focus,[m
+[32m+[m[32m.btn-default.active:focus,[m
+[32m+[m[32m.open > .dropdown-toggle.btn-default:focus,[m
+[32m+[m[32m.btn-default:active.focus,[m
+[32m+[m[32m.btn-default.active.focus,[m
+[32m+[m[32m.open > .dropdown-toggle.btn-default.focus {[m
+[32m+[m[32m color: #333333;[m
+[32m+[m[32m background-color: #d4d4d4;[m
+[32m+[m[32m border-color: #8c8c8c;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-default:active,[m
+[32m+[m[32m.btn-default.active,[m
+[32m+[m[32m.open > .dropdown-toggle.btn-default {[m
+[32m+[m[32m background-image: none;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-default.disabled:hover,[m
+[32m+[m[32m.btn-default[disabled]:hover,[m
+[32m+[m[32mfieldset[disabled] .btn-default:hover,[m
+[32m+[m[32m.btn-default.disabled:focus,[m
+[32m+[m[32m.btn-default[disabled]:focus,[m
+[32m+[m[32mfieldset[disabled] .btn-default:focus,[m
+[32m+[m[32m.btn-default.disabled.focus,[m
+[32m+[m[32m.btn-default[disabled].focus,[m
+[32m+[m[32mfieldset[disabled] .btn-default.focus {[m
+[32m+[m[32m background-color: #ffffff;[m
+[32m+[m[32m border-color: #cccccc;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-default .badge {[m
+[32m+[m[32m color: #ffffff;[m
+[32m+[m[32m background-color: #333333;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-primary {[m
+[32m+[m[32m color: #ffffff;[m
+[32m+[m[32m background-color: #337ab7;[m
+[32m+[m[32m border-color: #2e6da4;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-primary:focus,[m
+[32m+[m[32m.btn-primary.focus {[m
+[32m+[m[32m color: #ffffff;[m
+[32m+[m[32m background-color: #286090;[m
+[32m+[m[32m border-color: #122b40;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-primary:hover {[m
+[32m+[m[32m color: #ffffff;[m
+[32m+[m[32m background-color: #286090;[m
+[32m+[m[32m border-color: #204d74;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-primary:active,[m
+[32m+[m[32m.btn-primary.active,[m
+[32m+[m[32m.open > .dropdown-toggle.btn-primary {[m
+[32m+[m[32m color: #ffffff;[m
+[32m+[m[32m background-color: #286090;[m
+[32m+[m[32m border-color: #204d74;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-primary:active:hover,[m
+[32m+[m[32m.btn-primary.active:hover,[m
+[32m+[m[32m.open > .dropdown-toggle.btn-primary:hover,[m
+[32m+[m[32m.btn-primary:active:focus,[m
+[32m+[m[32m.btn-primary.active:focus,[m
+[32m+[m[32m.open > .dropdown-toggle.btn-primary:focus,[m
+[32m+[m[32m.btn-primary:active.focus,[m
+[32m+[m[32m.btn-primary.active.focus,[m
+[32m+[m[32m.open > .dropdown-toggle.btn-primary.focus {[m
+[32m+[m[32m color: #ffffff;[m
+[32m+[m[32m background-color: #204d74;[m
+[32m+[m[32m border-color: #122b40;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-primary:active,[m
+[32m+[m[32m.btn-primary.active,[m
+[32m+[m[32m.open > .dropdown-toggle.btn-primary {[m
+[32m+[m[32m background-image: none;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-primary.disabled:hover,[m
+[32m+[m[32m.btn-primary[disabled]:hover,[m
+[32m+[m[32mfieldset[disabled] .btn-primary:hover,[m
+[32m+[m[32m.btn-primary.disabled:focus,[m
+[32m+[m[32m.btn-primary[disabled]:focus,[m
+[32m+[m[32mfieldset[disabled] .btn-primary:focus,[m
+[32m+[m[32m.btn-primary.disabled.focus,[m
+[32m+[m[32m.btn-primary[disabled].focus,[m
+[32m+[m[32mfieldset[disabled] .btn-primary.focus {[m
+[32m+[m[32m background-color: #337ab7;[m
+[32m+[m[32m border-color: #2e6da4;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-primary .badge {[m
+[32m+[m[32m color: #337ab7;[m
+[32m+[m[32m background-color: #ffffff;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-success {[m
+[32m+[m[32m color: #ffffff;[m
+[32m+[m[32m background-color: #5cb85c;[m
+[32m+[m[32m border-color: #4cae4c;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-success:focus,[m
+[32m+[m[32m.btn-success.focus {[m
+[32m+[m[32m color: #ffffff;[m
+[32m+[m[32m background-color: #449d44;[m
+[32m+[m[32m border-color: #255625;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-success:hover {[m
+[32m+[m[32m color: #ffffff;[m
+[32m+[m[32m background-color: #449d44;[m
+[32m+[m[32m border-color: #398439;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-success:active,[m
+[32m+[m[32m.btn-success.active,[m
+[32m+[m[32m.open > .dropdown-toggle.btn-success {[m
+[32m+[m[32m color: #ffffff;[m
+[32m+[m[32m background-color: #449d44;[m
+[32m+[m[32m border-color: #398439;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-success:active:hover,[m
+[32m+[m[32m.btn-success.active:hover,[m
+[32m+[m[32m.open > .dropdown-toggle.btn-success:hover,[m
+[32m+[m[32m.btn-success:active:focus,[m
+[32m+[m[32m.btn-success.active:focus,[m
+[32m+[m[32m.open > .dropdown-toggle.btn-success:focus,[m
+[32m+[m[32m.btn-success:active.focus,[m
+[32m+[m[32m.btn-success.active.focus,[m
+[32m+[m[32m.open > .dropdown-toggle.btn-success.focus {[m
+[32m+[m[32m color: #ffffff;[m
+[32m+[m[32m background-color: #398439;[m
+[32m+[m[32m border-color: #255625;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-success:active,[m
+[32m+[m[32m.btn-success.active,[m
+[32m+[m[32m.open > .dropdown-toggle.btn-success {[m
+[32m+[m[32m background-image: none;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-success.disabled:hover,[m
+[32m+[m[32m.btn-success[disabled]:hover,[m
+[32m+[m[32mfieldset[disabled] .btn-success:hover,[m
+[32m+[m[32m.btn-success.disabled:focus,[m
+[32m+[m[32m.btn-success[disabled]:focus,[m
+[32m+[m[32mfieldset[disabled] .btn-success:focus,[m
+[32m+[m[32m.btn-success.disabled.focus,[m
+[32m+[m[32m.btn-success[disabled].focus,[m
+[32m+[m[32mfieldset[disabled] .btn-success.focus {[m
+[32m+[m[32m background-color: #5cb85c;[m
+[32m+[m[32m border-color: #4cae4c;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-success .badge {[m
+[32m+[m[32m color: #5cb85c;[m
+[32m+[m[32m background-color: #ffffff;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-info {[m
+[32m+[m[32m color: #ffffff;[m
+[32m+[m[32m background-color: #5bc0de;[m
+[32m+[m[32m border-color: #46b8da;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-info:focus,[m
+[32m+[m[32m.btn-info.focus {[m
+[32m+[m[32m color: #ffffff;[m
+[32m+[m[32m background-color: #31b0d5;[m
+[32m+[m[32m border-color: #1b6d85;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-info:hover {[m
+[32m+[m[32m color: #ffffff;[m
+[32m+[m[32m background-color: #31b0d5;[m
+[32m+[m[32m border-color: #269abc;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-info:active,[m
+[32m+[m[32m.btn-info.active,[m
+[32m+[m[32m.open > .dropdown-toggle.btn-info {[m
+[32m+[m[32m color: #ffffff;[m
+[32m+[m[32m background-color: #31b0d5;[m
+[32m+[m[32m border-color: #269abc;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-info:active:hover,[m
+[32m+[m[32m.btn-info.active:hover,[m
+[32m+[m[32m.open > .dropdown-toggle.btn-info:hover,[m
+[32m+[m[32m.btn-info:active:focus,[m
+[32m+[m[32m.btn-info.active:focus,[m
+[32m+[m[32m.open > .dropdown-toggle.btn-info:focus,[m
+[32m+[m[32m.btn-info:active.focus,[m
+[32m+[m[32m.btn-info.active.focus,[m
+[32m+[m[32m.open > .dropdown-toggle.btn-info.focus {[m
+[32m+[m[32m color: #ffffff;[m
+[32m+[m[32m background-color: #269abc;[m
+[32m+[m[32m border-color: #1b6d85;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-info:active,[m
+[32m+[m[32m.btn-info.active,[m
+[32m+[m[32m.open > .dropdown-toggle.btn-info {[m
+[32m+[m[32m background-image: none;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-info.disabled:hover,[m
+[32m+[m[32m.btn-info[disabled]:hover,[m
+[32m+[m[32mfieldset[disabled] .btn-info:hover,[m
+[32m+[m[32m.btn-info.disabled:focus,[m
+[32m+[m[32m.btn-info[disabled]:focus,[m
+[32m+[m[32mfieldset[disabled] .btn-info:focus,[m
+[32m+[m[32m.btn-info.disabled.focus,[m
+[32m+[m[32m.btn-info[disabled].focus,[m
+[32m+[m[32mfieldset[disabled] .btn-info.focus {[m
+[32m+[m[32m background-color: #5bc0de;[m
+[32m+[m[32m border-color: #46b8da;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-info .badge {[m
+[32m+[m[32m color: #5bc0de;[m
+[32m+[m[32m background-color: #ffffff;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-warning {[m
+[32m+[m[32m color: #ffffff;[m
+[32m+[m[32m background-color: #f0ad4e;[m
+[32m+[m[32m border-color: #eea236;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-warning:focus,[m
+[32m+[m[32m.btn-warning.focus {[m
+[32m+[m[32m color: #ffffff;[m
+[32m+[m[32m background-color: #ec971f;[m
+[32m+[m[32m border-color: #985f0d;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-warning:hover {[m
+[32m+[m[32m color: #ffffff;[m
+[32m+[m[32m background-color: #ec971f;[m
+[32m+[m[32m border-color: #d58512;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-warning:active,[m
+[32m+[m[32m.btn-warning.active,[m
+[32m+[m[32m.open > .dropdown-toggle.btn-warning {[m
+[32m+[m[32m color: #ffffff;[m
+[32m+[m[32m background-color: #ec971f;[m
+[32m+[m[32m border-color: #d58512;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-warning:active:hover,[m
+[32m+[m[32m.btn-warning.active:hover,[m
+[32m+[m[32m.open > .dropdown-toggle.btn-warning:hover,[m
+[32m+[m[32m.btn-warning:active:focus,[m
+[32m+[m[32m.btn-warning.active:focus,[m
+[32m+[m[32m.open > .dropdown-toggle.btn-warning:focus,[m
+[32m+[m[32m.btn-warning:active.focus,[m
+[32m+[m[32m.btn-warning.active.focus,[m
+[32m+[m[32m.open > .dropdown-toggle.btn-warning.focus {[m
+[32m+[m[32m color: #ffffff;[m
+[32m+[m[32m background-color: #d58512;[m
+[32m+[m[32m border-color: #985f0d;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-warning:active,[m
+[32m+[m[32m.btn-warning.active,[m
+[32m+[m[32m.open > .dropdown-toggle.btn-warning {[m
+[32m+[m[32m background-image: none;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-warning.disabled:hover,[m
+[32m+[m[32m.btn-warning[disabled]:hover,[m
+[32m+[m[32mfieldset[disabled] .btn-warning:hover,[m
+[32m+[m[32m.btn-warning.disabled:focus,[m
+[32m+[m[32m.btn-warning[disabled]:focus,[m
+[32m+[m[32mfieldset[disabled] .btn-warning:focus,[m
+[32m+[m[32m.btn-warning.disabled.focus,[m
+[32m+[m[32m.btn-warning[disabled].focus,[m
+[32m+[m[32mfieldset[disabled] .btn-warning.focus {[m
+[32m+[m[32m background-color: #f0ad4e;[m
+[32m+[m[32m border-color: #eea236;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-warning .badge {[m
+[32m+[m[32m color: #f0ad4e;[m
+[32m+[m[32m background-color: #ffffff;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-danger {[m
+[32m+[m[32m color: #ffffff;[m
+[32m+[m[32m background-color: #d9534f;[m
+[32m+[m[32m border-color: #d43f3a;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-danger:focus,[m
+[32m+[m[32m.btn-danger.focus {[m
+[32m+[m[32m color: #ffffff;[m
+[32m+[m[32m background-color: #c9302c;[m
+[32m+[m[32m border-color: #761c19;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-danger:hover {[m
+[32m+[m[32m color: #ffffff;[m
+[32m+[m[32m background-color: #c9302c;[m
+[32m+[m[32m border-color: #ac2925;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-danger:active,[m
+[32m+[m[32m.btn-danger.active,[m
+[32m+[m[32m.open > .dropdown-toggle.btn-danger {[m
+[32m+[m[32m color: #ffffff;[m
+[32m+[m[32m background-color: #c9302c;[m
+[32m+[m[32m border-color: #ac2925;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-danger:active:hover,[m
+[32m+[m[32m.btn-danger.active:hover,[m
+[32m+[m[32m.open > .dropdown-toggle.btn-danger:hover,[m
+[32m+[m[32m.btn-danger:active:focus,[m
+[32m+[m[32m.btn-danger.active:focus,[m
+[32m+[m[32m.open > .dropdown-toggle.btn-danger:focus,[m
+[32m+[m[32m.btn-danger:active.focus,[m
+[32m+[m[32m.btn-danger.active.focus,[m
+[32m+[m[32m.open > .dropdown-toggle.btn-danger.focus {[m
+[32m+[m[32m color: #ffffff;[m
+[32m+[m[32m background-color: #ac2925;[m
+[32m+[m[32m border-color: #761c19;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-danger:active,[m
+[32m+[m[32m.btn-danger.active,[m
+[32m+[m[32m.open > .dropdown-toggle.btn-danger {[m
+[32m+[m[32m background-image: none;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-danger.disabled:hover,[m
+[32m+[m[32m.btn-danger[disabled]:hover,[m
+[32m+[m[32mfieldset[disabled] .btn-danger:hover,[m
+[32m+[m[32m.btn-danger.disabled:focus,[m
+[32m+[m[32m.btn-danger[disabled]:focus,[m
+[32m+[m[32mfieldset[disabled] .btn-danger:focus,[m
+[32m+[m[32m.btn-danger.disabled.focus,[m
+[32m+[m[32m.btn-danger[disabled].focus,[m
+[32m+[m[32mfieldset[disabled] .btn-danger.focus {[m
+[32m+[m[32m background-color: #d9534f;[m
+[32m+[m[32m border-color: #d43f3a;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-danger .badge {[m
+[32m+[m[32m color: #d9534f;[m
+[32m+[m[32m background-color: #ffffff;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-link {[m
+[32m+[m[32m color: #337ab7;[m
+[32m+[m[32m font-weight: normal;[m
+[32m+[m[32m border-radius: 0;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-link,[m
+[32m+[m[32m.btn-link:active,[m
+[32m+[m[32m.btn-link.active,[m
+[32m+[m[32m.btn-link[disabled],[m
+[32m+[m[32mfieldset[disabled] .btn-link {[m
+[32m+[m[32m background-color: transparent;[m
+[32m+[m[32m -webkit-box-shadow: none;[m
+[32m+[m[32m box-shadow: none;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-link,[m
+[32m+[m[32m.btn-link:hover,[m
+[32m+[m[32m.btn-link:focus,[m
+[32m+[m[32m.btn-link:active {[m
+[32m+[m[32m border-color: transparent;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-link:hover,[m
+[32m+[m[32m.btn-link:focus {[m
+[32m+[m[32m color: #23527c;[m
+[32m+[m[32m text-decoration: underline;[m
+[32m+[m[32m background-color: transparent;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-link[disabled]:hover,[m
+[32m+[m[32mfieldset[disabled] .btn-link:hover,[m
+[32m+[m[32m.btn-link[disabled]:focus,[m
+[32m+[m[32mfieldset[disabled] .btn-link:focus {[m
+[32m+[m[32m color: #777777;[m
+[32m+[m[32m text-decoration: none;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-lg,[m
+[32m+[m[32m.btn-group-lg > .btn {[m
+[32m+[m[32m padding: 10px 16px;[m
+[32m+[m[32m font-size: 18px;[m
+[32m+[m[32m line-height: 1.3333333;[m
+[32m+[m[32m border-radius: 6px;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-sm,[m
+[32m+[m[32m.btn-group-sm > .btn {[m
+[32m+[m[32m padding: 5px 10px;[m
+[32m+[m[32m font-size: 12px;[m
+[32m+[m[32m line-height: 1.5;[m
+[32m+[m[32m border-radius: 3px;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-xs,[m
+[32m+[m[32m.btn-group-xs > .btn {[m
+[32m+[m[32m padding: 1px 5px;[m
+[32m+[m[32m font-size: 12px;[m
+[32m+[m[32m line-height: 1.5;[m
+[32m+[m[32m border-radius: 3px;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-block {[m
+[32m+[m[32m display: block;[m
+[32m+[m[32m width: 100%;[m
+[32m+[m[32m}[m
+[32m+[m[32m.btn-block + .btn-block {[m
+[32m+[m[32m margin-top: 5px;[m
+[32m+[m[32m}[m
+[32m+[m[32minput[type="submit"].btn-block,[m
+[32m+[m[32minput[type="reset"].btn-block,[m
+[32m+[m[32minput[type="button"].btn-block {[m
+[32m+[m[32m width: 100%;[m
+[32m+[m[32m}[m
+\ No newline at end of file[m
+[1mdiff --git a/css/upload-cropbox.css b/css/upload-cropbox.css[m
+[1mnew file mode 100644[m
+[1mindex 0000000000..f8500935aa[m
+[1m--- /dev/null[m
+[1m+++ b/css/upload-cropbox.css[m
+[36m@@ -0,0 +1,62 @@[m
+[32m+[m[32m.roo-upload-cropbox-selector {[m
+[32m+[m[32m visibility: hidden;[m
+[32m+[m[32m height: 0px;[m
+[32m+[m[32m}[m
+[32m+[m[32m.roo-upload-cropbox-dialog .modal-header,[m
+[32m+[m[32m.roo-upload-cropbox-dialog .modal-footer {[m
+[32m+[m[32m padding-top: 5px;[m
+[32m+[m[32m padding-bottom: 5px;[m
+[32m+[m[32m}[m
+[32m+[m[32m.roo-upload-cropbox-body {[m
+[32m+[m[32m background-color: #ffffff;[m
+[32m+[m[32m border: 1px solid #777777;[m
+[32m+[m[32m width: 100%;[m
+[32m+[m[32m height: 450px;[m
+[32m+[m[32m max-height: 450px;[m
+[32m+[m[32m position: relative;[m
+[32m+[m[32m overflow: hidden;[m
+[32m+[m[32m cursor: move;[m
+[32m+[m[32m}[m
+[32m+[m[32m.roo-upload-cropbox-preview {[m
+[32m+[m[32m position: absolute;[m
+[32m+[m[32m top: 0px;[m
+[32m+[m[32m left: 0px;[m
+[32m+[m[32m text-align: center;[m
+[32m+[m[32m margin: 0px;[m
+[32m+[m[32m padding: 0px;[m
+[32m+[m[32m border: none;[m
+[32m+[m[32m}[m
+[32m+[m[32m.roo-upload-cropbox-body .roo-upload-cropbox-thumb {[m
+[32m+[m[32m position: absolute;[m
+[32m+[m[32m /* top: 50%;[m
+[32m+[m[32m left: 50%;[m
+[32m+[m[32m transform: translate(-50%, -50%);*/[m
+[32m+[m[32m box-sizing: border-box;[m
+[32m+[m[32m border: 1px solid #777777;[m
+[32m+[m[32m box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.5);[m
+[32m+[m[32m background: none repeat scroll 0% 0% transparent;[m
+[32m+[m[32m}[m
+[32m+[m[32m.roo-upload-cropbox-body .roo-upload-cropbox-empty-notify {[m
+[32m+[m[32m height: 100%;[m
+[32m+[m[32m background-color: rgba(0, 0, 0, 0.5);[m
+[32m+[m[32m color: #ffffff;[m
+[32m+[m[32m font-weight: bold;[m
+[32m+[m[32m font-size: 24px;[m
+[32m+[m[32m text-align: center;[m
+[32m+[m[32m padding-top: 50px;[m
+[32m+[m[32m font-style: italic;[m
+[32m+[m[32m}[m
+[32m+[m[32m.roo-upload-cropbox-btn-group button {[m
+[32m+[m[32m background-color: #000000;[m
+[32m+[m[32m color: #ffffff;[m
+[32m+[m[32m border-color: #333333;[m
+[32m+[m[32m}[m
+[32m+[m[32m.roo-upload-cropbox-error-notify {[m
+[32m+[m[32m border-radius: 0px;[m
+[32m+[m[32m text-align: center;[m
+[32m+[m[32m padding: 0px !important;[m
+[32m+[m[32m margin: 0px !important;[m
+[32m+[m[32m position: absolute;[m
+[32m+[m[32m top: 0;[m
+[32m+[m[32m left: 0;[m
+[32m+[m[32m}[m
+\ No newline at end of file[m
+[1mdiff --git a/examples/dialog/hello.html b/examples/dialog/hello.html[m
+[1mindex ab43ed9999..ec001bf313 100644[m
+[1m--- a/examples/dialog/hello.html[m
+[1m+++ b/examples/dialog/hello.html[m
+[36m@@ -1,27 +1,27 @@[m
+[31m-[m
+[31m-[m
+[31m-[m
+[31m-[m
+[31m-Hello World Dialog Example[m
+[32m+[m[32m[m
+[32m+[m[32m[m
+[32m+[m[32m[m
+[32m+[m[32m[m
+[32m+[m[32mHello World Dialog Example[m
+ [m
+ [m
+ [m
+ [m
+[31m- [m
+[31m- [m
+[31m- [m
+[31m-[m
+[31m-[m
+[31m-[m
+[31m-[m
+[31m-[m
+[31m-[m
+[31m-Hello World Dialog
[m
+[31m-This example shows how to create a very simple modal BasicDialog with "autoTabs".
[m
+[31m-
[m
+[32m+[m[41m [m
+[32m+[m[32m [m
+[32m+[m[41m [m
+[32m+[m[32m[m
+[32m+[m[32m[m
+[32m+[m[32m[m
+[32m+[m[32m[m
+[32m+[m[32m[m
+[32m+[m
+[32m+[m[32mHello World Dialog
[m
+[32m+[m[32mThis example shows how to create a very simple modal BasicDialog with "autoTabs".
[m
+[32m+[m[32m
[m
+ Note that the js is not minified so it is readable. See [m
+[31m-for the full source code.
[m
+[31m-Here's snapshot of the code that creates the dialog:[m
+[32m+[m[32mfor the full source code.
[m
+[32m+[m[32mHere's snapshot of the code that creates the dialog:[m
+ Roo.BLANK_IMAGE_URL = "../../images/default/s.gif";[m
+ [m
+ [m
+[36m@@ -121,29 +121,29 @@[m [mRoo.onReady(function() {[m
+ Roo.get('show-dialog-btn').on('click',function () {[m
+ HelloWorld.show({ _el : this});[m
+ });[m
+[31m-});[m
+[31m-
[m
+[31m-[m
+[31m- [m
+[31m- [m
+[31m-
Hello Dialog
[m
+[31m-
[m
+[31m- [m
+[31m-
[m
+[31m- [m
+[31m-
[m
+[31m- Hello...
[m
+[31m-
[m
+[31m-
[m
+[31m- [m
+[31m-
[m
+[31m-
[m
+[31m- ... World![m
+[31m-
[m
+[31m-
[m
+[31m-
[m
+[31m-
[m
+[31m-[m
+[31m-[m
+[31m-[m
+[32m+[m[32m});[m
+[32m+[m[32m[m
+[32m+[m
+[32m+[m[32m [m
+[32m+[m[32m [m
+[32m+[m[32m
Hello Dialog
[m
+[32m+[m[32m
[m
+[32m+[m[32m [m
+[32m+[m[32m
[m
+[32m+[m[32m [m
+[32m+[m[32m
[m
+[32m+[m[32m Hello...
[m
+[32m+[m[32m
[m
+[32m+[m[32m
[m
+[32m+[m[32m [m
+[32m+[m[32m
[m
+[32m+[m[32m
[m
+[32m+[m[32m ... World![m
+[32m+[m[32m
[m
+[32m+[m[32m
[m
+[32m+[m[32m
[m
+[32m+[m[32m
[m
+[32m+[m[32m[m
+[32m+[m[32m[m
+[32m+[m[32m[m
+[1mdiff --git a/examples/dialog/test-2.html b/examples/dialog/test-2.html[m
+[1mnew file mode 100644[m
+[1mindex 0000000000..e26d6ee586[m
+[1m--- /dev/null[m
+[1m+++ b/examples/dialog/test-2.html[m
+[36m@@ -0,0 +1,30 @@[m
+[32m+[m[32m[m
+[32m+[m[32m[m
+[32m+[m[32m[m
+[32m+[m[32m [m
+[32m+[m[32m Upload Cropbox Dialog Example[m
+[32m+[m
+[32m+[m[32m [m
+[32m+[m[32m [m
+[32m+[m[32m [m
+[32m+[m[32m [m
+[32m+[m[32m [m
+[32m+[m[32m [m
+[32m+[m[32m [m
+[32m+[m
+[32m+[m[32m [m[41m [m
+[32m+[m[32m [m
+[32m+[m[32m [m
+[32m+[m
+[32m+[m[32m[m
+[32m+[m[32m[m
+[32m+[m
+[32m+[m[32mUpload Cropbox Dialog
[m
+[32m+[m[32mThis example shows how to create a very simple BasicDialog with "UploadCropbox".
[m
+[32m+[m[32m
[m
+[32m+[m[32mNote that the js is not minified so it is readable. See[m[41m [m
+[32m+[m[32mfor the full source code.
[m
+[32m+[m
+[32m+[m[32m[m
+[32m+[m[32m[m
+[32m+[m[32m[m
+[1mdiff --git a/examples/dialog/test-2.js b/examples/dialog/test-2.js[m
+[1mnew file mode 100644[m
+[1mindex 0000000000..c4dcdedd7e[m
+[1m--- /dev/null[m
+[1m+++ b/examples/dialog/test-2.js[m
+[36m@@ -0,0 +1,171 @@[m
+[32m+[m[32mvar uploadCropbox = {[m
+[32m+[m[32m dialog : false,[m
+[32m+[m[32m callback : false,[m
+[32m+[m
+[32m+[m[32m show : function(data, cb)[m
+[32m+[m[32m {[m
+[32m+[m[32m if (!this.dialog) {[m
+[32m+[m[32m this.create();[m
+[32m+[m[32m }[m
+[32m+[m
+[32m+[m[32m this.callback = cb;[m
+[32m+[m[32m this.data = data;[m
+[32m+[m[32m this.dialog.show();[m
+[32m+[m[32m },[m
+[32m+[m
+[32m+[m[32m create : function()[m
+[32m+[m[32m {[m
+[32m+[m[32m var _this = this;[m
+[32m+[m[32m this.dialog = Roo.factory({[m
+[32m+[m[32m xns : Roo,[m
+[32m+[m[32m xtype : 'LayoutDialog',[m
+[32m+[m[32m width : 800,[m
+[32m+[m[32m height : 600,[m
+[32m+[m[32m center : {[m
+[32m+[m[32m xns : Roo,[m
+[32m+[m[32m xtype : 'LayoutRegion'[m
+[32m+[m[32m },[m
+[32m+[m[32m items : [[m
+[32m+[m[32m {[m
+[32m+[m[32m xtype: 'ContentPanel',[m
+[32m+[m[32m xns: Roo,[m
+[32m+[m[32m region : "center",[m
+[32m+[m[32m items : [[m
+[32m+[m[32m {[m
+[32m+[m[32m xtype : 'UploadCropbox',[m
+[32m+[m[32m xns : Roo.dialog,[m
+[32m+[m[32m minWidth : 720,[m
+[32m+[m[32m minHeight: 480,[m
+[32m+[m[32m buttons: [],[m
+[32m+[m[32m listeners : {[m
+[32m+[m[32m render : function (_self)[m
+[32m+[m[32m {[m
+[32m+[m[32m _this.cropbox = _self;[m
+[32m+[m[32m },[m
+[32m+[m[32m loadcanvas : function (_self, imageEl)[m
+[32m+[m[32m {[m
+[32m+[m[32m if(imageEl.OriginWidth < 720) {[m
+[32m+[m[32m Roo.Msg.show({[m
+[32m+[m[32m title: 'Error',[m
+[32m+[m[32m msg: "Image width should be at least 720",[m
+[32m+[m[32m buttons: {ok : true},[m
+[32m+[m[32m fn: function(res) {[m
+[32m+[m[32m _this.cropbox.selectorEl.dom.click();[m
+[32m+[m[32m }[m
+[32m+[m[32m });[m
+[32m+[m[32m return false;[m
+[32m+[m[32m }[m
+[32m+[m[32m }[m
+[32m+[m[32m }[m
+[32m+[m[32m }[m
+[32m+[m[32m ][m
+[32m+[m[32m }[m
+[32m+[m[32m ],[m
+[32m+[m[32m buttons : [[m
+[32m+[m[32m {[m
+[32m+[m[32m xtype : 'Button',[m
+[32m+[m[32m xns : Roo,[m
+[32m+[m[32m text : 'Save',[m
+[32m+[m[32m listeners : {[m
+[32m+[m[32m click : function () {[m
+[32m+[m[32m }[m[41m [m
+[32m+[m[32m }[m
+[32m+[m[32m },[m
+[32m+[m[32m {[m
+[32m+[m[32m xtype : 'Button',[m
+[32m+[m[32m xns : Roo,[m
+[32m+[m[32m text : 'Cancel',[m
+[32m+[m[32m listeners : {[m
+[32m+[m[32m click : function () {[m
+[32m+[m[32m _this.dialog.hide()[m
+[32m+[m[32m }[m[41m [m
+[32m+[m[32m }[m
+[32m+[m[32m }[m
+[32m+[m[32m ][m
+[32m+[m[32m });[m
+[32m+[m[32m }[m
+[32m+[m[32m}[m
+[32m+[m
+[32m+[m[32mvar test = {[m
+[32m+[m
+[32m+[m[32m dialog : false,[m
+[32m+[m[32m callback : false,[m
+[32m+[m
+[32m+[m[32m show : function(data, cb)[m
+[32m+[m[32m {[m
+[32m+[m[32m if (!this.dialog) {[m
+[32m+[m[32m this.create();[m
+[32m+[m[32m }[m
+[32m+[m
+[32m+[m[32m this.callback = cb;[m
+[32m+[m[32m this.data = data;[m
+[32m+[m[32m this.dialog.show();[m
+[32m+[m[32m },[m
+[32m+[m
+[32m+[m[32m create : function()[m
+[32m+[m[32m {[m
+[32m+[m[32m var _this = this;[m
+[32m+[m[32m this.dialog = Roo.factory({[m
+[32m+[m[32m xns : Roo,[m
+[32m+[m[32m xtype : 'LayoutDialog',[m
+[32m+[m[32m width : 600,[m
+[32m+[m[32m height : 450,[m
+[32m+[m[32m center : {[m
+[32m+[m[32m xns : Roo,[m
+[32m+[m[32m xtype : 'LayoutRegion'[m
+[32m+[m[32m },[m
+[32m+[m[32m items : [[m
+[32m+[m[32m {[m
+[32m+[m[32m xns : Roo,[m
+[32m+[m[32m xtype: 'GridPanel',[m
+[32m+[m[32m region : "center",[m
+[32m+[m[32m grid : {[m
+[32m+[m[32m xns : Roo.grid,[m
+[32m+[m[32m xtype : 'Grid',[m
+[32m+[m[32m cm : [[m
+[32m+[m[32m {[m
+[32m+[m[32m xns : Roo.grid,[m
+[32m+[m[32m xtype : 'ColumnModel',[m
+[32m+[m[32m header : 'test'[m
+[32m+[m[32m }[m
+[32m+[m[32m ],[m
+[32m+[m[32m ds : {[m
+[32m+[m[32m xns: Roo.data,[m
+[32m+[m[32m xtype: 'Store'[m
+[32m+[m[32m },[m
+[32m+[m[32m toolbar : {[m
+[32m+[m[32m xns: Roo,[m
+[32m+[m[32m xtype: 'Toolbar',[m
+[32m+[m[32m items : [[m
+[32m+[m[32m {[m[41m [m
+[32m+[m[32m xtype : 'Button',[m
+[32m+[m[32m text : 'Add',[m
+[32m+[m[32m listeners : {[m
+[32m+[m[32m click : function () {[m
+[32m+[m[32m uploadCropbox.show();[m
+[32m+[m[32m document.body.onfocus = function(e) {[m
+[32m+[m[32m document.body.onfocus = null;[m
+[32m+[m[32m if(!uploadCropbox.cropbox.selectorEl.dom.files.length) {[m
+[32m+[m[32m uploadCropbox.dialog.hide();[m
+[32m+[m[32m }[m
+[32m+[m[32m }[m
+[32m+[m[32m uploadCropbox.cropbox.selectorEl.dom.click();[m
+[32m+[m[32m }[m
+[32m+[m[32m }[m
+[32m+[m[32m }[m
+[32m+[m[32m ][m
+[32m+[m[32m }[m
+[32m+[m[32m }[m
+[32m+[m[32m }[m
+[32m+[m[32m ],[m
+[32m+[m[32m });[m
+[32m+[m[32m }[m
+[32m+[m[32m}[m
+[32m+[m
+[32m+[m[32mRoo.onReady(function() {[m
+[32m+[m[41m [m
+[32m+[m[32m Roo.get('show-dialog-btn').on('click',function () {[m
+[32m+[m[32m test.show({});[m
+[32m+[m[32m console.log(test);[m
+[32m+[m[32m });[m
+[32m+[m[32m});[m
+\ No newline at end of file[m
+[1mdiff --git a/examples/dialog/test.html b/examples/dialog/test.html[m
+[1mnew file mode 100644[m
+[1mindex 0000000000..ecb2a0afa3[m
+[1m--- /dev/null[m
+[1m+++ b/examples/dialog/test.html[m
+[36m@@ -0,0 +1,29 @@[m
+[32m+[m[32m[m
+[32m+[m[32m[m
+[32m+[m[32m[m
+[32m+[m[32m [m
+[32m+[m[32m Upload Cropbox Dialog Example[m
+[32m+[m
+[32m+[m[32m [m
+[32m+[m[32m [m
+[32m+[m[32m [m
+[32m+[m[32m [m
+[32m+[m[32m [m
+[32m+[m
+[32m+[m[32m [m[41m [m
+[32m+[m[32m [m[41m [m
+[32m+[m[32m [m
+[32m+[m[32m [m
+[32m+[m
+[32m+[m[32m[m
+[32m+[m[32m[m
+[32m+[m
+[32m+[m[32mUpload Cropbox Bootstrap
[m
+[32m+[m[32mThis example shows how to create a very simple modal BasicDialog with "autoTabs".
[m
+[32m+[m[32m
[m
+[32m+[m[32mNote that the js is not minified so it is readable. See[m[41m [m
+[32m+[m[32mfor the full source code.
[m
+[32m+[m
+[32m+[m[32m[m
+[32m+[m[32m[m
+[32m+[m[32m[m
+[1mdiff --git a/examples/dialog/test.js b/examples/dialog/test.js[m
+[1mnew file mode 100644[m
+[1mindex 0000000000..f08db909f3[m
+[1m--- /dev/null[m
+[1m+++ b/examples/dialog/test.js[m
+[36m@@ -0,0 +1,94 @@[m
+[32m+[m[32mvar test = {[m
+[32m+[m
+[32m+[m[32m dialog : false,[m
+[32m+[m[32m callback : false,[m
+[32m+[m
+[32m+[m[32m show : function(data, cb)[m
+[32m+[m[32m {[m
+[32m+[m[32m if (!this.dialog) {[m
+[32m+[m[32m this.create();[m
+[32m+[m[32m }[m
+[32m+[m
+[32m+[m[32m this.callback = cb;[m
+[32m+[m[32m this.data = data;[m
+[32m+[m[32m this.dialog.show();[m
+[32m+[m[32m },[m
+[32m+[m
+[32m+[m[32m create : function()[m
+[32m+[m[32m {[m
+[32m+[m[32m var _this = this;[m
+[32m+[m[32m this.dialog = Roo.factory({[m
+[32m+[m[32m xtype : 'Modal',[m
+[32m+[m[32m xns : Roo.bootstrap,[m
+[32m+[m[32m title : 'Upload an Image',[m
+[32m+[m[32m buttons : Roo.bootstrap.Modal.OKCANCEL,[m
+[32m+[m[32m items: [[m
+[32m+[m[32m {[m
+[32m+[m[32m xtype : 'Row',[m
+[32m+[m[32m xns : Roo.bootstrap,[m
+[32m+[m[32m items: [[m
+[32m+[m[32m {[m
+[32m+[m[32m xtype : 'Column',[m
+[32m+[m[32m xns : Roo.bootstrap,[m
+[32m+[m[32m items: [[m
+[32m+[m[32m {[m
+[32m+[m[32m xtype : 'UploadCropbox',[m
+[32m+[m[32m xns : Roo.bootstrap,[m
+[32m+[m[32m minWidth : 720,[m
+[32m+[m[32m minHeight: 480,[m
+[32m+[m[32m listeners : {[m
+[32m+[m[32m arrange : function (_self, formData)[m
+[32m+[m[32m {[m
+[32m+[m[32m console.log("ARRANGE");[m
+[32m+[m[32m console.log(formData);[m
+[32m+[m[32m },[m
+[32m+[m[32m crop : function (_self, data)[m
+[32m+[m[32m {[m
+[32m+[m[32m console.log("CROP");[m
+[32m+[m[32m console.log(data);[m
+[32m+[m[32m },[m
+[32m+[m[32m resize : function (_self)[m
+[32m+[m[32m {[m
+[32m+[m[32m console.log("RESIZE");[m
+[32m+[m[32m },[m
+[32m+[m[32m rotate : function (_self)[m
+[32m+[m[32m {[m
+[32m+[m[32m console.log("ROTATE");[m
+[32m+[m[32m },[m
+[32m+[m[32m render : function (_self)[m
+[32m+[m[32m {[m
+[32m+[m[32m console.log("RENDER");[m
+[32m+[m[32m console.log(_self);[m
+[32m+[m[32m _this.cropbox = _self;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m }[m
+[32m+[m[32m }[m
+[32m+[m[32m ][m
+[32m+[m[32m }[m
+[32m+[m[32m ][m
+[32m+[m[32m }[m
+[32m+[m[32m ],[m
+[32m+[m[32m listeners : {[m
+[32m+[m[32m btnclick : function (e)[m
+[32m+[m[32m {[m
+[32m+[m[32m console.log(e);[m
+[32m+[m[32m if(e == 'cancel') {[m
+[32m+[m[32m _this.dialog.hide();[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m
+[32m+[m[32m _this.cropbox.crop();[m
+[32m+[m[32m }[m
+[32m+[m[32m }[m
+[32m+[m[32m });[m
+[32m+[m[32m }[m
+[32m+[m[32m}[m
+[32m+[m
+[32m+[m[32mRoo.onReady(function() {[m
+[32m+[m[41m [m
+[32m+[m[32m Roo.get('show-dialog-btn').on('click',function () {[m
+[32m+[m[32m test.show({});[m
+[32m+[m[32m console.log(test);[m
+[32m+[m[32m });[m
+[32m+[m[32m});[m
+\ No newline at end of file[m
+[1mdiff --git a/roojs-all.js b/roojs-all.js[m
+[1mindex 9d9fc1f28f..f98434e789 100644[m
+[1m--- a/roojs-all.js[m
+[1m+++ b/roojs-all.js[m
+[36m@@ -2544,9 +2544,9 @@[m [mreturn this.el.getUpdateManager();},_handleRefresh:function(A,B,C){if(!C||!this.[m
+ 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);[m
+ 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);[m
+ }},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();[m
+[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();[m
+[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,'');[m
+[31m-this.view=B;return B;}return false;}});[m
+[32m+[m[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);[m
+[32m+[m[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"));[m
+[32m+[m[32mvar B=new Roo.factory(A);B.render&&B.render(false,'');this.view=B;return B;}return false;}});[m
+ // Roo/GridPanel.js[m
+ 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);[m
+ 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);[m
+[36m@@ -2875,3 +2875,103 @@[m [mF.push("(typeof("+G+") == 'undefined')");});var H='(('+F.join(" || ")+") ? undef[m
+ }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 ['"];[m
+ 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,{}[m
+ );},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);};[m
+[32m+[m[32m// Roo/dialog/namespace.js[m
+[32m+[m[32mRoo.dialog={};[m
+[32m+[m[32m// Roo/dialog/UploadCropbox.js[m
+[32m+[m[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}[m
+[32m+[m[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:{}[m
+[32m+[m[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'}[m
+[32m+[m[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}[m
+[32m+[m[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);[m
+[32m+[m[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;[m
+[32m+[m[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);[m
+[32m+[m[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);[m
+[32m+[m[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();[m
+[32m+[m[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();[m
+[32m+[m[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();[m
+[32m+[m[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();[m
+[32m+[m[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);[m
+[32m+[m[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);[m
+[32m+[m[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();[m
+[32m+[m[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);[m
+[32m+[m[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();[m
+[32m+[m[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);[m
+[32m+[m[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;[m
+[32m+[m[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();[m
+[32m+[m[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);[m
+[32m+[m[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.widthE)?C:E);F=(BF)?D:F);this.previewEl.setLeft(E);this.previewEl.setTop(F);this.mouseX=Roo.isTouch?e.browserEvent.touches[0].pageX:e.getPageX();[m
+[32m+[m[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);[m
+[32m+[m[32mif(!this.zoomable()){this.scale=this.startScale;return;}this.draw();return;},zoomable:function(){var A=this.thumbEl.getWidth()/this.minWidth;if(this.minWidththis.imageEl.OriginWidth||C>this.imageEl.OriginHeight||(Bthis.imageEl.OriginWidth||C>this.imageEl.OriginHeight||(Bthis.imageEl.OriginWidth||Cthis.imageEl.OriginHeight)){return false;}if(!this.isDocument&&(this.rotate==90||this.rotate==270)&&(Bthis.imageEl.OriginWidth||Cthis.imageEl.OriginHeight)){return false;[m
+[32m+[m[32m}return true;},onRotateLeft:function(e){if(!this.isDocument&&(this.canvasEl.height180)?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();[m
+[32m+[m[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");[m
+[32m+[m[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.OriginWidththis.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);[m
+[32m+[m[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();[m
+[32m+[m[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);[m
+[32m+[m[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);[m
+[32m+[m[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();[m
+[32m+[m[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;[m
+[32m+[m[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");[m
+[32m+[m[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());[m
+[32m+[m[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());[m
+[32m+[m[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(Fthis.imageEl.OriginHeight)?this.imageEl.OriginHeight:(this.thumbEl.getWidth()/this.getScaleLevel());[m
+[32m+[m[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());[m
+[32m+[m[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;[m
+[32m+[m[32m}if(x>0&&y>0){J=H/F;if(Fthis.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());[m
+[32m+[m[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());[m
+[32m+[m[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;[m
+[32m+[m[32m}if(x>0&&y>0){J=H/F;if(Fthis.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;[m
+[32m+[m[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());[m
+[32m+[m[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());[m
+[32m+[m[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(Fthis.imageEl.OriginHeight)?0:Math.abs(this.imageEl.OriginWidth-this.imageEl.OriginHeight);[m
+[32m+[m[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);[m
+[32m+[m[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);[m
+[32m+[m[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);[m
+[32m+[m[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']];[m
+[32m+[m[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();[m
+[32m+[m[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;[m
+[32m+[m[32m}return;}if(this.baseRotate==6||this.baseRotate==8){A=this.thumbEl.getHeight();this.baseScale=A/this.imageEl.OriginHeight;if(this.imageEl.OriginHeight*this.baseScalethis.imageEl.OriginHeight){B=this.thumbEl.getWidth();this.baseScale=B/this.imageEl.OriginHeight;if(this.imageEl.OriginWidth*this.baseScalethis.imageEl.OriginHeight){B=this.thumbEl.getHeight();[m
+[32m+[m[32mthis.baseScale=B/this.imageEl.OriginHeight;if(this.imageEl.OriginWidth*this.baseScale=0xffe0&&H<=0xffef)||H===0xfffe){I=E.getUint16(F+2)+2;if(F+I>E.byteLength){Roo.log('Invalid meta data: Invalid segment size.');[m
+[32m+[m[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;[m
+[32m+[m[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;[m
+[32m+[m[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;[m
+[32m+[m[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;i4?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'}[m
+[32m+[m[32m]},{tag:'div',cls:'btn-group roo-upload-cropbox-picture',action:'picture',cn:[{tag:'button',cls:'btn btn-default',html:''}]},{tag:'div',cls:'btn-group roo-upload-cropbox-rotate-right',action:'rotate-right',cn:[{tag:'button',cls:'btn btn-default',html:''}[m
+[32m+[m[32m]}],DOCUMENT:[{tag:'div',cls:'btn-group roo-upload-cropbox-rotate-left',action:'rotate-left',cn:[{tag:'button',cls:'btn btn-default',html:''}]},{tag:'div',cls:'btn-group roo-upload-cropbox-download',action:'download',cn:[{tag:'button',cls:'btn btn-default',html:''}[m
+[32m+[m[32m]},{tag:'div',cls:'btn-group roo-upload-cropbox-crop',action:'crop',cn:[{tag:'button',cls:'btn btn-default',html:''}]},{tag:'div',cls:'btn-group roo-upload-cropbox-trash',action:'trash',cn:[{tag:'button',cls:'btn btn-default',html:''}[m
+[32m+[m[32m]},{tag:'div',cls:'btn-group roo-upload-cropbox-rotate-right',action:'rotate-right',cn:[{tag:'button',cls:'btn btn-default',html:''}]}],ROTATOR:[{tag:'div',cls:'btn-group roo-upload-cropbox-rotate-left',action:'rotate-left',cn:[{tag:'button',cls:'btn btn-default',html:''}[m
+[32m+[m[32m]},{tag:'div',cls:'btn-group roo-upload-cropbox-rotate-right',action:'rotate-right',cn:[{tag:'button',cls:'btn btn-default',html:''}]}]}});[m
+[1mdiff --git a/roojs-debug.js b/roojs-debug.js[m
+[1mindex 5e539c7e68..d341c59730 100644[m
+[1m--- a/roojs-debug.js[m
+[1m+++ b/roojs-debug.js[m
+[36m@@ -60414,7 +60414,6 @@[m [mRoo.LayoutStateManager.prototype = {[m
+ */[m
+ Roo.ContentPanel = function(el, config, content){[m
+ [m
+[31m- [m
+ /*[m
+ if(el.autoCreate || el.xtype){ // xtype is available if this is called from factory[m
+ config = el;[m
+[36m@@ -60798,6 +60797,14 @@[m [mlayout.addxtype({[m
+ */[m
+ [m
+ addxtype : function(cfg) {[m
+[32m+[m[32m if(cfg.xtype.match(/^UploadCropbox$/)) {[m
+[32m+[m
+[32m+[m[32m this.cropbox = new Roo.factory(cfg);[m
+[32m+[m
+[32m+[m[32m this.cropbox.render(this.el);[m
+[32m+[m
+[32m+[m[32m return this.cropbox;[m
+[32m+[m[32m }[m
+ // add form..[m
+ if (cfg.xtype.match(/^Form$/)) {[m
+ [m
+[36m@@ -68050,4 +68057,1795 @@[m [mRoo.extend(Roo.XTemplate, Roo.Template, {[m
+ Roo.XTemplate.from = function(el){[m
+ el = Roo.getDom(el);[m
+ return new Roo.XTemplate(el.value || el.innerHTML);[m
+[31m-};[m
+\ No newline at end of file[m
+[32m+[m[32m};Roo.dialog = {};[m
+[32m+[m[32m/*[m
+[32m+[m[32m* Licence: LGPL[m
+[32m+[m[32m*/[m
+[32m+[m
+[32m+[m[32m/**[m
+[32m+[m[32m * @class Roo.dialog.UploadCropbox[m
+[32m+[m[32m * @extends Roo.BoxComponent[m
+[32m+[m[32m * Dialog UploadCropbox class[m
+[32m+[m[32m * @cfg {String} emptyText show when image has been loaded[m
+[32m+[m[32m * @cfg {String} rotateNotify show when image too small to rotate[m
+[32m+[m[32m * @cfg {Number} errorTimeout default 3000[m
+[32m+[m[32m * @cfg {Number} minWidth default 300[m
+[32m+[m[32m * @cfg {Number} minHeight default 300[m
+[32m+[m[32m * @cfg {Array} buttons default ['rotateLeft', 'pictureBtn', 'rotateRight'][m
+[32m+[m[32m * @cfg {Boolean} isDocument (true|false) default false[m
+[32m+[m[32m * @cfg {String} url action url[m
+[32m+[m[32m * @cfg {String} paramName default 'imageUpload'[m
+[32m+[m[32m * @cfg {String} method default POST[m
+[32m+[m[32m * @cfg {Boolean} loadMask (true|false) default true[m
+[32m+[m[32m * @cfg {Boolean} loadingText default 'Loading...'[m
+[32m+[m[32m *[m[41m [m
+[32m+[m[32m * @constructor[m
+[32m+[m[32m * Create a new UploadCropbox[m
+[32m+[m[32m * @param {Object} config The config object[m
+[32m+[m[32m */[m
+[32m+[m
+[32m+[m[32m Roo.dialog.UploadCropbox = function(config){[m
+[32m+[m[32m console.log("Dialog UploadCropbox Constructor");[m
+[32m+[m[32m Roo.dialog.UploadCropbox.superclass.constructor.call(this, config);[m
+[32m+[m[41m [m
+[32m+[m[32m this.addEvents({[m
+[32m+[m[32m /**[m
+[32m+[m[32m * @event beforeselectfile[m
+[32m+[m[32m * Fire before select file[m
+[32m+[m[32m * @param {Roo.dialog.UploadCropbox} this[m
+[32m+[m[32m */[m
+[32m+[m[32m "beforeselectfile" : true,[m
+[32m+[m[32m /**[m
+[32m+[m[32m * @event initial[m
+[32m+[m[32m * Fire after initEvent[m
+[32m+[m[32m * @param {Roo.dialog.UploadCropbox} this[m
+[32m+[m[32m */[m
+[32m+[m[32m "initial" : true,[m
+[32m+[m[32m /**[m
+[32m+[m[32m * @event crop[m
+[32m+[m[32m * Fire after initEvent[m
+[32m+[m[32m * @param {Roo.dialog.UploadCropbox} this[m
+[32m+[m[32m * @param {String} data[m
+[32m+[m[32m */[m
+[32m+[m[32m "crop" : true,[m
+[32m+[m[32m /**[m
+[32m+[m[32m * @event prepare[m
+[32m+[m[32m * Fire when preparing the file data[m
+[32m+[m[32m * @param {Roo.dialog.UploadCropbox} this[m
+[32m+[m[32m * @param {Object} file[m
+[32m+[m[32m */[m
+[32m+[m[32m "prepare" : true,[m
+[32m+[m[32m /**[m
+[32m+[m[32m * @event exception[m
+[32m+[m[32m * Fire when get exception[m
+[32m+[m[32m * @param {Roo.dialog.UploadCropbox} this[m
+[32m+[m[32m * @param {XMLHttpRequest} xhr[m
+[32m+[m[32m */[m
+[32m+[m[32m "exception" : true,[m
+[32m+[m[32m /**[m
+[32m+[m[32m * @event beforeloadcanvas[m
+[32m+[m[32m * Fire before load the canvas[m
+[32m+[m[32m * @param {Roo.dialog.UploadCropbox} this[m
+[32m+[m[32m * @param {String} src[m
+[32m+[m[32m */[m
+[32m+[m[32m "beforeloadcanvas" : true,[m
+[32m+[m[32m /**[m
+[32m+[m[32m * @event trash[m
+[32m+[m[32m * Fire when trash image[m
+[32m+[m[32m * @param {Roo.dialog.UploadCropbox} this[m
+[32m+[m[32m */[m
+[32m+[m[32m "trash" : true,[m
+[32m+[m[32m /**[m
+[32m+[m[32m * @event download[m
+[32m+[m[32m * Fire when download the image[m
+[32m+[m[32m * @param {Roo.dialog.UploadCropbox} this[m
+[32m+[m[32m */[m
+[32m+[m[32m "download" : true,[m
+[32m+[m[32m /**[m
+[32m+[m[32m * @event footerbuttonclick[m
+[32m+[m[32m * Fire when footerbuttonclick[m
+[32m+[m[32m * @param {Roo.dialog.UploadCropbox} this[m
+[32m+[m[32m * @param {String} type[m
+[32m+[m[32m */[m
+[32m+[m[32m "footerbuttonclick" : true,[m
+[32m+[m[32m /**[m
+[32m+[m[32m * @event resize[m
+[32m+[m[32m * Fire when resize[m
+[32m+[m[32m * @param {Roo.dialog.UploadCropbox} this[m
+[32m+[m[32m */[m
+[32m+[m[32m "resize" : true,[m
+[32m+[m[32m /**[m
+[32m+[m[32m * @event rotate[m
+[32m+[m[32m * Fire when rotate the image[m
+[32m+[m[32m * @param {Roo.dialog.UploadCropbox} this[m
+[32m+[m[32m * @param {String} pos[m
+[32m+[m[32m */[m
+[32m+[m[32m "rotate" : true,[m
+[32m+[m[32m /**[m
+[32m+[m[32m * @event inspect[m
+[32m+[m[32m * Fire when inspect the file[m
+[32m+[m[32m * @param {Roo.dialog.UploadCropbox} this[m
+[32m+[m[32m * @param {Object} file[m
+[32m+[m[32m */[m
+[32m+[m[32m "inspect" : true,[m
+[32m+[m[32m /**[m
+[32m+[m[32m * @event upload[m
+[32m+[m[32m * Fire when xhr upload the file[m
+[32m+[m[32m * @param {Roo.dialog.UploadCropbox} this[m
+[32m+[m[32m * @param {Object} data[m
+[32m+[m[32m */[m
+[32m+[m[32m "upload" : true,[m
+[32m+[m[32m /**[m
+[32m+[m[32m * @event arrange[m
+[32m+[m[32m * Fire when arrange the file data[m
+[32m+[m[32m * @param {Roo.dialog.UploadCropbox} this[m
+[32m+[m[32m * @param {Object} formData[m
+[32m+[m[32m */[m
+[32m+[m[32m "arrange" : true,[m
+[32m+[m[32m /**[m
+[32m+[m[32m * @event loadcanvas[m
+[32m+[m[32m * Fire after load the canvas[m
+[32m+[m[32m * @param {Roo.dialog.UploadCropbox}[m
+[32m+[m[32m * @param {Object} imgEl[m
+[32m+[m[32m */[m
+[32m+[m[32m "loadcanvas" : true[m
+[32m+[m[32m });[m
+[32m+[m[41m [m
+[32m+[m[32m this.buttons = this.buttons || Roo.dialog.UploadCropbox.footer.STANDARD;[m
+[32m+[m[32m};[m
+[32m+[m
+[32m+[m[32mRoo.extend(Roo.dialog.UploadCropbox, Roo.Component, {[m
+[32m+[m[41m [m
+[32m+[m[32m emptyText : 'Click to upload image',[m
+[32m+[m[32m rotateNotify : 'Image is too small to rotate',[m
+[32m+[m[32m errorTimeout : 3000,[m
+[32m+[m[32m scale : 0,[m
+[32m+[m[32m baseScale : 1,[m
+[32m+[m[32m rotate : 0,[m
+[32m+[m[32m dragable : false,[m
+[32m+[m[32m pinching : false,[m
+[32m+[m[32m mouseX : 0,[m
+[32m+[m[32m mouseY : 0,[m
+[32m+[m[32m cropData : false,[m
+[32m+[m[32m minWidth : 300,[m
+[32m+[m[32m minHeight : 300,[m
+[32m+[m[32m file : false,[m
+[32m+[m[32m exif : {},[m
+[32m+[m[32m baseRotate : 1,[m
+[32m+[m[32m cropType : 'image/jpeg',[m
+[32m+[m[32m buttons : false,[m
+[32m+[m[32m canvasLoaded : false,[m
+[32m+[m[32m isDocument : false,[m
+[32m+[m[32m method : 'POST',[m
+[32m+[m[32m paramName : 'imageUpload',[m
+[32m+[m[32m loadMask : true,[m
+[32m+[m[32m loadingText : 'Loading...',[m
+[32m+[m[32m maskEl : false,[m
+[32m+[m[41m [m
+[32m+[m[32m getAutoCreate : function()[m
+[32m+[m[32m {[m
+[32m+[m[32m var cfg = {[m
+[32m+[m[32m tag : 'div',[m
+[32m+[m[32m cls : 'roo-upload-cropbox',[m
+[32m+[m[32m cn : [[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'input',[m
+[32m+[m[32m cls : 'roo-upload-cropbox-selector',[m
+[32m+[m[32m type : 'file'[m
+[32m+[m[32m },[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'div',[m
+[32m+[m[32m cls : 'roo-upload-cropbox-body',[m
+[32m+[m[32m style : 'cursor:pointer',[m
+[32m+[m[32m cn : [[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'div',[m
+[32m+[m[32m cls : 'roo-upload-cropbox-preview'[m
+[32m+[m[32m },[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'div',[m
+[32m+[m[32m cls : 'roo-upload-cropbox-thumb'[m
+[32m+[m[32m },[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'div',[m
+[32m+[m[32m cls : 'roo-upload-cropbox-empty-notify',[m
+[32m+[m[32m html : this.emptyText[m
+[32m+[m[32m },[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'div',[m
+[32m+[m[32m cls : 'roo-upload-cropbox-error-notify alert alert-danger',[m
+[32m+[m[32m html : this.rotateNotify[m
+[32m+[m[32m }[m
+[32m+[m[32m ][m
+[32m+[m[32m },[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'div',[m
+[32m+[m[32m cls : 'roo-upload-cropbox-footer',[m
+[32m+[m[32m cn : {[m
+[32m+[m[32m tag : 'div',[m
+[32m+[m[32m cls : 'btn-group btn-group-justified roo-upload-cropbox-btn-group',[m
+[32m+[m[32m cn : [][m
+[32m+[m[32m }[m
+[32m+[m[32m }[m
+[32m+[m[32m ][m
+[32m+[m[32m };[m
+[32m+[m[41m [m
+[32m+[m[32m return cfg;[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m onRender : function(ct, position)[m
+[32m+[m[32m {[m
+[32m+[m[32m console.log("On Render");[m
+[32m+[m[32m console.log(this);[m
+[32m+[m[32m Roo.dialog.UploadCropbox.superclass.onRender.call(this, ct, position);[m
+[32m+[m
+[32m+[m[32m if(this.el){[m
+[32m+[m[32m if (this.el.attr('xtype')) {[m
+[32m+[m[32m this.el.attr('xtypex', this.el.attr('xtype'));[m
+[32m+[m[32m this.el.dom.removeAttribute('xtype');[m
+[32m+[m[41m [m
+[32m+[m[32m this.initEvents();[m
+[32m+[m[32m }[m
+[32m+[m[32m }[m
+[32m+[m[32m else {[m
+[32m+[m[32m var cfg = Roo.apply({}, this.getAutoCreate());[m
+[32m+[m[41m [m
+[32m+[m[32m cfg.id = this.id || Roo.id();[m
+[32m+[m[41m [m
+[32m+[m[32m if (this.cls) {[m
+[32m+[m[32m cfg.cls = (typeof(cfg.cls) == 'undefined' ? this.cls : cfg.cls) + ' ' + this.cls;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if (this.style) { // fixme needs to support more complex style data.[m
+[32m+[m[32m cfg.style = (typeof(cfg.style) == 'undefined' ? this.style : cfg.style) + '; ' + this.style;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.el = ct.createChild(cfg, position);[m
+[32m+[m[41m [m
+[32m+[m[32m this.initEvents();[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if (this.buttons.length) {[m
+[32m+[m[41m [m
+[32m+[m[32m Roo.each(this.buttons, function(bb) {[m
+[32m+[m[41m [m
+[32m+[m[32m var btn = this.el.select('.roo-upload-cropbox-footer div.roo-upload-cropbox-btn-group').first().createChild(bb);[m
+[32m+[m[41m [m
+[32m+[m[32m btn.on('click', this.onFooterButtonClick.createDelegate(this, [bb.action], true));[m
+[32m+[m[41m [m
+[32m+[m[32m }, this);[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.loadMask){[m
+[32m+[m[32m this.maskEl = this.el;[m
+[32m+[m[32m }[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m initEvents : function()[m
+[32m+[m[32m {[m
+[32m+[m[32m this.urlAPI = (window.createObjectURL && window) ||[m[41m [m
+[32m+[m[32m (window.URL && URL.revokeObjectURL && URL) ||[m[41m [m
+[32m+[m[32m (window.webkitURL && webkitURL);[m
+[32m+[m[41m [m
+[32m+[m[32m this.bodyEl = this.el.select('.roo-upload-cropbox-body', true).first();[m
+[32m+[m[32m this.bodyEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';[m
+[32m+[m[41m [m
+[32m+[m[32m this.selectorEl = this.el.select('.roo-upload-cropbox-selector', true).first();[m
+[32m+[m[32m this.selectorEl.hide();[m
+[32m+[m[41m [m
+[32m+[m[32m this.previewEl = this.el.select('.roo-upload-cropbox-preview', true).first();[m
+[32m+[m[32m this.previewEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';[m
+[32m+[m[41m [m
+[32m+[m[32m this.thumbEl = this.el.select('.roo-upload-cropbox-thumb', true).first();[m
+[32m+[m[32m this.thumbEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';[m
+[32m+[m[32m this.thumbEl.hide();[m
+[32m+[m[41m [m
+[32m+[m[32m this.notifyEl = this.el.select('.roo-upload-cropbox-empty-notify', true).first();[m
+[32m+[m[32m this.notifyEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';[m
+[32m+[m[41m [m
+[32m+[m[32m this.errorEl = this.el.select('.roo-upload-cropbox-error-notify', true).first();[m
+[32m+[m[32m this.errorEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';[m
+[32m+[m[32m this.errorEl.hide();[m
+[32m+[m[41m [m
+[32m+[m[32m this.footerEl = this.el.select('.roo-upload-cropbox-footer', true).first();[m
+[32m+[m[32m this.footerEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';[m
+[32m+[m[32m this.footerEl.hide();[m
+[32m+[m[41m [m
+[32m+[m[32m this.setThumbBoxSize();[m
+[32m+[m[41m [m
+[32m+[m[32m this.bind();[m
+[32m+[m[41m [m
+[32m+[m[32m this.resize();[m
+[32m+[m[41m [m
+[32m+[m[32m this.fireEvent('initial', this);[m
+[32m+[m[32m },[m
+[32m+[m
+[32m+[m[32m bind : function()[m
+[32m+[m[32m {[m
+[32m+[m[32m var _this = this;[m
+[32m+[m[41m [m
+[32m+[m[32m window.addEventListener("resize", function() { _this.resize(); } );[m
+[32m+[m[41m [m
+[32m+[m[32m this.bodyEl.on('click', this.beforeSelectFile, this);[m
+[32m+[m[41m [m
+[32m+[m[32m if(Roo.isTouch){[m
+[32m+[m[32m this.bodyEl.on('touchstart', this.onTouchStart, this);[m
+[32m+[m[32m this.bodyEl.on('touchmove', this.onTouchMove, this);[m
+[32m+[m[32m this.bodyEl.on('touchend', this.onTouchEnd, this);[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if(!Roo.isTouch){[m
+[32m+[m[32m this.bodyEl.on('mousedown', this.onMouseDown, this);[m
+[32m+[m[32m this.bodyEl.on('mousemove', this.onMouseMove, this);[m
+[32m+[m[32m var mousewheel = (/Firefox/i.test(navigator.userAgent))? 'DOMMouseScroll' : 'mousewheel';[m
+[32m+[m[32m this.bodyEl.on(mousewheel, this.onMouseWheel, this);[m
+[32m+[m[32m Roo.get(document).on('mouseup', this.onMouseUp, this);[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.selectorEl.on('change', this.onFileSelected, this);[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m reset : function()[m
+[32m+[m[32m {[m[41m [m
+[32m+[m[32m this.scale = 0;[m
+[32m+[m[32m this.baseScale = 1;[m
+[32m+[m[32m this.rotate = 0;[m
+[32m+[m[32m this.baseRotate = 1;[m
+[32m+[m[32m this.dragable = false;[m
+[32m+[m[32m this.pinching = false;[m
+[32m+[m[32m this.mouseX = 0;[m
+[32m+[m[32m this.mouseY = 0;[m
+[32m+[m[32m this.cropData = false;[m
+[32m+[m[32m this.notifyEl.dom.innerHTML = this.emptyText;[m
+[32m+[m[41m [m
+[32m+[m[32m // this.selectorEl.dom.value = '';[m
+[32m+[m[41m [m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m resize : function()[m
+[32m+[m[32m {[m
+[32m+[m[32m if(this.fireEvent('resize', this) != false){[m
+[32m+[m[32m this.setThumbBoxPosition();[m
+[32m+[m[32m this.setCanvasPosition();[m
+[32m+[m[32m }[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m onFooterButtonClick : function(e, el, o, type)[m
+[32m+[m[32m {[m
+[32m+[m[32m switch (type) {[m
+[32m+[m[32m case 'rotate-left' :[m
+[32m+[m[32m this.onRotateLeft(e);[m
+[32m+[m[32m break;[m
+[32m+[m[32m case 'rotate-right' :[m
+[32m+[m[32m this.onRotateRight(e);[m
+[32m+[m[32m break;[m
+[32m+[m[32m case 'picture' :[m
+[32m+[m[32m this.beforeSelectFile(e);[m
+[32m+[m[32m break;[m
+[32m+[m[32m case 'trash' :[m
+[32m+[m[32m this.trash(e);[m
+[32m+[m[32m break;[m
+[32m+[m[32m case 'crop' :[m
+[32m+[m[32m this.crop(e);[m
+[32m+[m[32m break;[m
+[32m+[m[32m case 'download' :[m
+[32m+[m[32m this.download(e);[m
+[32m+[m[32m break;[m
+[32m+[m[32m default :[m
+[32m+[m[32m break;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.fireEvent('footerbuttonclick', this, type);[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m beforeSelectFile : function(e)[m
+[32m+[m[32m {[m
+[32m+[m[32m e.preventDefault();[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.fireEvent('beforeselectfile', this) != false){[m
+[32m+[m[32m this.selectorEl.dom.click();[m
+[32m+[m[32m }[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m onFileSelected : function(e)[m
+[32m+[m[32m {[m
+[32m+[m[32m e.preventDefault();[m
+[32m+[m[41m [m
+[32m+[m[32m if(typeof(this.selectorEl.dom.files) == 'undefined' || !this.selectorEl.dom.files.length){[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m var file = this.selectorEl.dom.files[0];[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.fireEvent('inspect', this, file) != false){[m
+[32m+[m[32m this.prepare(file);[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m trash : function(e)[m
+[32m+[m[32m {[m
+[32m+[m[32m this.fireEvent('trash', this);[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m download : function(e)[m
+[32m+[m[32m {[m
+[32m+[m[32m this.fireEvent('download', this);[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m loadCanvas : function(src)[m
+[32m+[m[32m {[m[41m [m
+[32m+[m[32m if(this.fireEvent('beforeloadcanvas', this, src) != false){[m
+[32m+[m[41m [m
+[32m+[m[32m this.reset();[m
+[32m+[m[41m [m
+[32m+[m[32m this.imageEl = document.createElement('img');[m
+[32m+[m[41m [m
+[32m+[m[32m var _this = this;[m
+[32m+[m[41m [m
+[32m+[m[32m this.imageEl.addEventListener("load", function(){ _this.onLoadCanvas(); });[m
+[32m+[m[41m [m
+[32m+[m[32m this.imageEl.src = src;[m
+[32m+[m[32m }[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m onLoadCanvas : function()[m
+[32m+[m[32m {[m[41m [m
+[32m+[m[32m this.imageEl.OriginWidth = this.imageEl.naturalWidth || this.imageEl.width;[m
+[32m+[m[32m this.imageEl.OriginHeight = this.imageEl.naturalHeight || this.imageEl.height;[m
+[32m+[m
+[32m+[m[32m if(this.fireEvent('loadcanvas', this, this.imageEl) != false){[m
+[32m+[m[41m [m
+[32m+[m[32m this.bodyEl.un('click', this.beforeSelectFile, this);[m
+[32m+[m[41m [m
+[32m+[m[32m this.notifyEl.hide();[m
+[32m+[m[32m this.thumbEl.show();[m
+[32m+[m[32m this.footerEl.show();[m
+[32m+[m[41m [m
+[32m+[m[32m this.baseRotateLevel();[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.isDocument){[m
+[32m+[m[32m this.setThumbBoxSize();[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.setThumbBoxPosition();[m
+[32m+[m[41m [m
+[32m+[m[32m this.baseScaleLevel();[m
+[32m+[m[41m [m
+[32m+[m[32m this.draw();[m
+[32m+[m[41m [m
+[32m+[m[32m this.resize();[m
+[32m+[m[41m [m
+[32m+[m[32m this.canvasLoaded = true;[m
+[32m+[m[41m [m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.loadMask){[m
+[32m+[m[32m this.maskEl.unmask();[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m setCanvasPosition : function()[m
+[32m+[m[32m {[m[41m [m
+[32m+[m[32m if(!this.canvasEl){[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m var pw = Math.ceil((this.bodyEl.getWidth() - this.canvasEl.width) / 2);[m
+[32m+[m[32m var ph = Math.ceil((this.bodyEl.getHeight() - this.canvasEl.height) / 2);[m
+[32m+[m[41m [m
+[32m+[m[32m this.previewEl.setLeft(pw);[m
+[32m+[m[32m this.previewEl.setTop(ph);[m
+[32m+[m[41m [m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m onMouseDown : function(e)[m
+[32m+[m[32m {[m[41m [m
+[32m+[m[32m e.stopEvent();[m
+[32m+[m[41m [m
+[32m+[m[32m this.dragable = true;[m
+[32m+[m[32m this.pinching = false;[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.isDocument && (this.canvasEl.width < this.thumbEl.getWidth() || this.canvasEl.height < this.thumbEl.getHeight())){[m
+[32m+[m[32m this.dragable = false;[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.mouseX = Roo.isTouch ? e.browserEvent.touches[0].pageX : e.getPageX();[m
+[32m+[m[32m this.mouseY = Roo.isTouch ? e.browserEvent.touches[0].pageY : e.getPageY();[m
+[32m+[m[41m [m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m onMouseMove : function(e)[m
+[32m+[m[32m {[m[41m [m
+[32m+[m[32m e.stopEvent();[m
+[32m+[m[41m [m
+[32m+[m[32m if(!this.canvasLoaded){[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if (!this.dragable){[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m var minX = Math.ceil(this.thumbEl.getLeft(true));[m
+[32m+[m[32m var minY = Math.ceil(this.thumbEl.getTop(true));[m
+[32m+[m[41m [m
+[32m+[m[32m var maxX = Math.ceil(minX + this.thumbEl.getWidth() - this.canvasEl.width);[m
+[32m+[m[32m var maxY = Math.ceil(minY + this.thumbEl.getHeight() - this.canvasEl.height);[m
+[32m+[m[41m [m
+[32m+[m[32m var x = Roo.isTouch ? e.browserEvent.touches[0].pageX : e.getPageX();[m
+[32m+[m[32m var y = Roo.isTouch ? e.browserEvent.touches[0].pageY : e.getPageY();[m
+[32m+[m[41m [m
+[32m+[m[32m x = x - this.mouseX;[m
+[32m+[m[32m y = y - this.mouseY;[m
+[32m+[m[41m [m
+[32m+[m[32m var bgX = Math.ceil(x + this.previewEl.getLeft(true));[m
+[32m+[m[32m var bgY = Math.ceil(y + this.previewEl.getTop(true));[m
+[32m+[m[41m [m
+[32m+[m[32m bgX = (minX < bgX) ? minX : ((maxX > bgX) ? maxX : bgX);[m
+[32m+[m[32m bgY = (minY < bgY) ? minY : ((maxY > bgY) ? maxY : bgY);[m
+[32m+[m[41m [m
+[32m+[m[32m this.previewEl.setLeft(bgX);[m
+[32m+[m[32m this.previewEl.setTop(bgY);[m
+[32m+[m[41m [m
+[32m+[m[32m this.mouseX = Roo.isTouch ? e.browserEvent.touches[0].pageX : e.getPageX();[m
+[32m+[m[32m this.mouseY = Roo.isTouch ? e.browserEvent.touches[0].pageY : e.getPageY();[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m onMouseUp : function(e)[m
+[32m+[m[32m {[m[41m [m
+[32m+[m[32m e.stopEvent();[m
+[32m+[m[41m [m
+[32m+[m[32m this.dragable = false;[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m onMouseWheel : function(e)[m
+[32m+[m[32m {[m[41m [m
+[32m+[m[32m e.stopEvent();[m
+[32m+[m[41m [m
+[32m+[m[32m this.startScale = this.scale;[m
+[32m+[m[41m [m
+[32m+[m[32m this.scale = (e.getWheelDelta() == 1) ? (this.scale + 1) : (this.scale - 1);[m
+[32m+[m[41m [m
+[32m+[m[32m if(!this.zoomable()){[m
+[32m+[m[32m this.scale = this.startScale;[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.draw();[m
+[32m+[m[41m [m
+[32m+[m[32m return;[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m zoomable : function()[m
+[32m+[m[32m {[m
+[32m+[m[32m var minScale = this.thumbEl.getWidth() / this.minWidth;[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.minWidth < this.minHeight){[m
+[32m+[m[32m minScale = this.thumbEl.getHeight() / this.minHeight;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m var width = Math.ceil(this.imageEl.OriginWidth * this.getScaleLevel() / minScale);[m
+[32m+[m[32m var height = Math.ceil(this.imageEl.OriginHeight * this.getScaleLevel() / minScale);[m
+[32m+[m[41m [m
+[32m+[m[32m if([m
+[32m+[m[32m this.isDocument &&[m
+[32m+[m[32m (this.rotate == 0 || this.rotate == 180) &&[m[41m [m
+[32m+[m[32m ([m
+[32m+[m[32m width > this.imageEl.OriginWidth ||[m[41m [m
+[32m+[m[32m height > this.imageEl.OriginHeight ||[m
+[32m+[m[32m (width < this.minWidth && height < this.minHeight)[m
+[32m+[m[32m )[m
+[32m+[m[32m ){[m
+[32m+[m[32m return false;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if([m
+[32m+[m[32m this.isDocument &&[m
+[32m+[m[32m (this.rotate == 90 || this.rotate == 270) &&[m[41m [m
+[32m+[m[32m ([m
+[32m+[m[32m width > this.imageEl.OriginWidth ||[m[41m [m
+[32m+[m[32m height > this.imageEl.OriginHeight ||[m
+[32m+[m[32m (width < this.minHeight && height < this.minWidth)[m
+[32m+[m[32m )[m
+[32m+[m[32m ){[m
+[32m+[m[32m return false;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if([m
+[32m+[m[32m !this.isDocument &&[m
+[32m+[m[32m (this.rotate == 0 || this.rotate == 180) &&[m[41m [m
+[32m+[m[32m ([m
+[32m+[m[32m width < this.minWidth ||[m[41m [m
+[32m+[m[32m width > this.imageEl.OriginWidth ||[m[41m [m
+[32m+[m[32m height < this.minHeight ||[m[41m [m
+[32m+[m[32m height > this.imageEl.OriginHeight[m
+[32m+[m[32m )[m
+[32m+[m[32m ){[m
+[32m+[m[32m return false;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if([m
+[32m+[m[32m !this.isDocument &&[m
+[32m+[m[32m (this.rotate == 90 || this.rotate == 270) &&[m[41m [m
+[32m+[m[32m ([m
+[32m+[m[32m width < this.minHeight ||[m[41m [m
+[32m+[m[32m width > this.imageEl.OriginWidth ||[m[41m [m
+[32m+[m[32m height < this.minWidth ||[m[41m [m
+[32m+[m[32m height > this.imageEl.OriginHeight[m
+[32m+[m[32m )[m
+[32m+[m[32m ){[m
+[32m+[m[32m return false;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m return true;[m
+[32m+[m[41m [m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m onRotateLeft : function(e)[m
+[32m+[m[32m {[m[41m [m
+[32m+[m[32m if(!this.isDocument && (this.canvasEl.height < this.thumbEl.getWidth() || this.canvasEl.width < this.thumbEl.getHeight())){[m
+[32m+[m[41m [m
+[32m+[m[32m var minScale = this.thumbEl.getWidth() / this.minWidth;[m
+[32m+[m[41m [m
+[32m+[m[32m var bw = Math.ceil(this.canvasEl.width / this.getScaleLevel());[m
+[32m+[m[32m var bh = Math.ceil(this.canvasEl.height / this.getScaleLevel());[m
+[32m+[m[41m [m
+[32m+[m[32m this.startScale = this.scale;[m
+[32m+[m[41m [m
+[32m+[m[32m while (this.getScaleLevel() < minScale){[m
+[32m+[m[41m [m
+[32m+[m[32m this.scale = this.scale + 1;[m
+[32m+[m[41m [m
+[32m+[m[32m if(!this.zoomable()){[m
+[32m+[m[32m break;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if([m
+[32m+[m[32m Math.ceil(bw * this.getScaleLevel()) < this.thumbEl.getHeight() ||[m
+[32m+[m[32m Math.ceil(bh * this.getScaleLevel()) < this.thumbEl.getWidth()[m
+[32m+[m[32m ){[m
+[32m+[m[32m continue;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.rotate = (this.rotate < 90) ? 270 : this.rotate - 90;[m
+[32m+[m
+[32m+[m[32m this.draw();[m
+[32m+[m[41m [m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.scale = this.startScale;[m
+[32m+[m[41m [m
+[32m+[m[32m this.onRotateFail();[m
+[32m+[m[41m [m
+[32m+[m[32m return false;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.rotate = (this.rotate < 90) ? 270 : this.rotate - 90;[m
+[32m+[m
+[32m+[m[32m if(this.isDocument){[m
+[32m+[m[32m this.setThumbBoxSize();[m
+[32m+[m[32m this.setThumbBoxPosition();[m
+[32m+[m[32m this.setCanvasPosition();[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.draw();[m
+[32m+[m[41m [m
+[32m+[m[32m this.fireEvent('rotate', this, 'left');[m
+[32m+[m[41m [m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m onRotateRight : function(e)[m
+[32m+[m[32m {[m
+[32m+[m[32m if(!this.isDocument && (this.canvasEl.height < this.thumbEl.getWidth() || this.canvasEl.width < this.thumbEl.getHeight())){[m
+[32m+[m[41m [m
+[32m+[m[32m var minScale = this.thumbEl.getWidth() / this.minWidth;[m
+[32m+[m[41m [m
+[32m+[m[32m var bw = Math.ceil(this.canvasEl.width / this.getScaleLevel());[m
+[32m+[m[32m var bh = Math.ceil(this.canvasEl.height / this.getScaleLevel());[m
+[32m+[m[41m [m
+[32m+[m[32m this.startScale = this.scale;[m
+[32m+[m[41m [m
+[32m+[m[32m while (this.getScaleLevel() < minScale){[m
+[32m+[m[41m [m
+[32m+[m[32m this.scale = this.scale + 1;[m
+[32m+[m[41m [m
+[32m+[m[32m if(!this.zoomable()){[m
+[32m+[m[32m break;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if([m
+[32m+[m[32m Math.ceil(bw * this.getScaleLevel()) < this.thumbEl.getHeight() ||[m
+[32m+[m[32m Math.ceil(bh * this.getScaleLevel()) < this.thumbEl.getWidth()[m
+[32m+[m[32m ){[m
+[32m+[m[32m continue;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.rotate = (this.rotate > 180) ? 0 : this.rotate + 90;[m
+[32m+[m
+[32m+[m[32m this.draw();[m
+[32m+[m[41m [m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.scale = this.startScale;[m
+[32m+[m[41m [m
+[32m+[m[32m this.onRotateFail();[m
+[32m+[m[41m [m
+[32m+[m[32m return false;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.rotate = (this.rotate > 180) ? 0 : this.rotate + 90;[m
+[32m+[m
+[32m+[m[32m if(this.isDocument){[m
+[32m+[m[32m this.setThumbBoxSize();[m
+[32m+[m[32m this.setThumbBoxPosition();[m
+[32m+[m[32m this.setCanvasPosition();[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.draw();[m
+[32m+[m[41m [m
+[32m+[m[32m this.fireEvent('rotate', this, 'right');[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m onRotateFail : function()[m
+[32m+[m[32m {[m
+[32m+[m[32m this.errorEl.show(true);[m
+[32m+[m[41m [m
+[32m+[m[32m var _this = this;[m
+[32m+[m[41m [m
+[32m+[m[32m (function() { _this.errorEl.hide(true); }).defer(this.errorTimeout);[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m draw : function()[m
+[32m+[m[32m {[m
+[32m+[m[32m this.previewEl.dom.innerHTML = '';[m
+[32m+[m[41m [m
+[32m+[m[32m var canvasEl = document.createElement("canvas");[m
+[32m+[m[41m [m
+[32m+[m[32m var contextEl = canvasEl.getContext("2d");[m
+[32m+[m[41m [m
+[32m+[m[32m canvasEl.width = this.imageEl.OriginWidth * this.getScaleLevel();[m
+[32m+[m[32m canvasEl.height = this.imageEl.OriginWidth * this.getScaleLevel();[m
+[32m+[m[32m var center = this.imageEl.OriginWidth / 2;[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.imageEl.OriginWidth < this.imageEl.OriginHeight){[m
+[32m+[m[32m canvasEl.width = this.imageEl.OriginHeight * this.getScaleLevel();[m
+[32m+[m[32m canvasEl.height = this.imageEl.OriginHeight * this.getScaleLevel();[m
+[32m+[m[32m center = this.imageEl.OriginHeight / 2;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m contextEl.scale(this.getScaleLevel(), this.getScaleLevel());[m
+[32m+[m[41m [m
+[32m+[m[32m contextEl.translate(center, center);[m
+[32m+[m[32m contextEl.rotate(this.rotate * Math.PI / 180);[m
+[32m+[m
+[32m+[m[32m contextEl.drawImage(this.imageEl, 0, 0, this.imageEl.OriginWidth, this.imageEl.OriginHeight, center * -1, center * -1, this.imageEl.OriginWidth, this.imageEl.OriginHeight);[m
+[32m+[m[41m [m
+[32m+[m[32m this.canvasEl = document.createElement("canvas");[m
+[32m+[m[41m [m
+[32m+[m[32m this.contextEl = this.canvasEl.getContext("2d");[m
+[32m+[m[41m [m
+[32m+[m[32m switch (this.rotate) {[m
+[32m+[m[32m case 0 :[m
+[32m+[m[41m [m
+[32m+[m[32m this.canvasEl.width = this.imageEl.OriginWidth * this.getScaleLevel();[m
+[32m+[m[32m this.canvasEl.height = this.imageEl.OriginHeight * this.getScaleLevel();[m
+[32m+[m[41m [m
+[32m+[m[32m this.contextEl.drawImage(canvasEl, 0, 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);[m
+[32m+[m[41m [m
+[32m+[m[32m break;[m
+[32m+[m[32m case 90 :[m[41m [m
+[32m+[m[41m [m
+[32m+[m[32m this.canvasEl.width = this.imageEl.OriginHeight * this.getScaleLevel();[m
+[32m+[m[32m this.canvasEl.height = this.imageEl.OriginWidth * this.getScaleLevel();[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){[m
+[32m+[m[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);[m
+[32m+[m[32m break;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.contextEl.drawImage(canvasEl, 0, 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);[m
+[32m+[m[41m [m
+[32m+[m[32m break;[m
+[32m+[m[32m case 180 :[m
+[32m+[m[41m [m
+[32m+[m[32m this.canvasEl.width = this.imageEl.OriginWidth * this.getScaleLevel();[m
+[32m+[m[32m this.canvasEl.height = this.imageEl.OriginHeight * this.getScaleLevel();[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){[m
+[32m+[m[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);[m
+[32m+[m[32m break;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[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);[m
+[32m+[m[41m [m
+[32m+[m[32m break;[m
+[32m+[m[32m case 270 :[m
+[32m+[m[41m [m
+[32m+[m[32m this.canvasEl.width = this.imageEl.OriginHeight * this.getScaleLevel();[m
+[32m+[m[32m this.canvasEl.height = this.imageEl.OriginWidth * this.getScaleLevel();[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){[m
+[32m+[m[32m this.contextEl.drawImage(canvasEl, 0, 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);[m
+[32m+[m[32m break;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[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);[m
+[32m+[m[41m [m
+[32m+[m[32m break;[m
+[32m+[m[32m default :[m[41m [m
+[32m+[m[32m break;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.previewEl.appendChild(this.canvasEl);[m
+[32m+[m[41m [m
+[32m+[m[32m this.setCanvasPosition();[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m crop : function()[m
+[32m+[m[32m {[m
+[32m+[m[32m if(!this.canvasLoaded){[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m var imageCanvas = document.createElement("canvas");[m
+[32m+[m[41m [m
+[32m+[m[32m var imageContext = imageCanvas.getContext("2d");[m
+[32m+[m[41m [m
+[32m+[m[32m imageCanvas.width = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? this.imageEl.OriginWidth : this.imageEl.OriginHeight;[m
+[32m+[m[32m imageCanvas.height = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? this.imageEl.OriginWidth : this.imageEl.OriginHeight;[m
+[32m+[m[41m [m
+[32m+[m[32m var center = imageCanvas.width / 2;[m
+[32m+[m[41m [m
+[32m+[m[32m imageContext.translate(center, center);[m
+[32m+[m[41m [m
+[32m+[m[32m imageContext.rotate(this.rotate * Math.PI / 180);[m
+[32m+[m[41m [m
+[32m+[m[32m imageContext.drawImage(this.imageEl, 0, 0, this.imageEl.OriginWidth, this.imageEl.OriginHeight, center * -1, center * -1, this.imageEl.OriginWidth, this.imageEl.OriginHeight);[m
+[32m+[m[41m [m
+[32m+[m[32m var canvas = document.createElement("canvas");[m
+[32m+[m[41m [m
+[32m+[m[32m var context = canvas.getContext("2d");[m
+[32m+[m[41m [m
+[32m+[m[32m canvas.width = this.minWidth;[m
+[32m+[m[32m canvas.height = this.minHeight;[m
+[32m+[m
+[32m+[m[32m switch (this.rotate) {[m
+[32m+[m[32m case 0 :[m
+[32m+[m[41m [m
+[32m+[m[32m var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getWidth() / this.getScaleLevel());[m
+[32m+[m[32m var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getHeight() / this.getScaleLevel());[m
+[32m+[m[41m [m
+[32m+[m[32m var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());[m
+[32m+[m[32m var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());[m
+[32m+[m[41m [m
+[32m+[m[32m var targetWidth = this.minWidth - 2 * x;[m
+[32m+[m[32m var targetHeight = this.minHeight - 2 * y;[m
+[32m+[m[41m [m
+[32m+[m[32m var scale = 1;[m
+[32m+[m[41m [m
+[32m+[m[32m if((x == 0 && y == 0) || (x == 0 && y > 0)){[m
+[32m+[m[32m scale = targetWidth / width;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if(x > 0 && y == 0){[m
+[32m+[m[32m scale = targetHeight / height;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if(x > 0 && y > 0){[m
+[32m+[m[32m scale = targetWidth / width;[m
+[32m+[m[41m [m
+[32m+[m[32m if(width < height){[m
+[32m+[m[32m scale = targetHeight / height;[m
+[32m+[m[32m }[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m context.scale(scale, scale);[m
+[32m+[m[41m [m
+[32m+[m[32m var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));[m
+[32m+[m[32m var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));[m
+[32m+[m
+[32m+[m[32m sx = sx < 0 ? 0 : (sx / this.getScaleLevel());[m
+[32m+[m[32m sy = sy < 0 ? 0 : (sy / this.getScaleLevel());[m
+[32m+[m
+[32m+[m[32m context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);[m
+[32m+[m[41m [m
+[32m+[m[32m break;[m
+[32m+[m[32m case 90 :[m[41m [m
+[32m+[m[41m [m
+[32m+[m[32m var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getWidth() / this.getScaleLevel());[m
+[32m+[m[32m var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getHeight() / this.getScaleLevel());[m
+[32m+[m[41m [m
+[32m+[m[32m var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());[m
+[32m+[m[32m var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());[m
+[32m+[m[41m [m
+[32m+[m[32m var targetWidth = this.minWidth - 2 * x;[m
+[32m+[m[32m var targetHeight = this.minHeight - 2 * y;[m
+[32m+[m[41m [m
+[32m+[m[32m var scale = 1;[m
+[32m+[m[41m [m
+[32m+[m[32m if((x == 0 && y == 0) || (x == 0 && y > 0)){[m
+[32m+[m[32m scale = targetWidth / width;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if(x > 0 && y == 0){[m
+[32m+[m[32m scale = targetHeight / height;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if(x > 0 && y > 0){[m
+[32m+[m[32m scale = targetWidth / width;[m
+[32m+[m[41m [m
+[32m+[m[32m if(width < height){[m
+[32m+[m[32m scale = targetHeight / height;[m
+[32m+[m[32m }[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m context.scale(scale, scale);[m
+[32m+[m[41m [m
+[32m+[m[32m var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));[m
+[32m+[m[32m var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));[m
+[32m+[m
+[32m+[m[32m sx = sx < 0 ? 0 : (sx / this.getScaleLevel());[m
+[32m+[m[32m sy = sy < 0 ? 0 : (sy / this.getScaleLevel());[m
+[32m+[m[41m [m
+[32m+[m[32m sx += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight) : 0;[m
+[32m+[m[41m [m
+[32m+[m[32m context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);[m
+[32m+[m[41m [m
+[32m+[m[32m break;[m
+[32m+[m[32m case 180 :[m
+[32m+[m[41m [m
+[32m+[m[32m var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getWidth() / this.getScaleLevel());[m
+[32m+[m[32m var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getHeight() / this.getScaleLevel());[m
+[32m+[m[41m [m
+[32m+[m[32m var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());[m
+[32m+[m[32m var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());[m
+[32m+[m[41m [m
+[32m+[m[32m var targetWidth = this.minWidth - 2 * x;[m
+[32m+[m[32m var targetHeight = this.minHeight - 2 * y;[m
+[32m+[m[41m [m
+[32m+[m[32m var scale = 1;[m
+[32m+[m[41m [m
+[32m+[m[32m if((x == 0 && y == 0) || (x == 0 && y > 0)){[m
+[32m+[m[32m scale = targetWidth / width;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if(x > 0 && y == 0){[m
+[32m+[m[32m scale = targetHeight / height;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if(x > 0 && y > 0){[m
+[32m+[m[32m scale = targetWidth / width;[m
+[32m+[m[41m [m
+[32m+[m[32m if(width < height){[m
+[32m+[m[32m scale = targetHeight / height;[m
+[32m+[m[32m }[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m context.scale(scale, scale);[m
+[32m+[m[41m [m
+[32m+[m[32m var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));[m
+[32m+[m[32m var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));[m
+[32m+[m
+[32m+[m[32m sx = sx < 0 ? 0 : (sx / this.getScaleLevel());[m
+[32m+[m[32m sy = sy < 0 ? 0 : (sy / this.getScaleLevel());[m
+[32m+[m
+[32m+[m[32m sx += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? 0 : Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight);[m
+[32m+[m[32m sy += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight) : 0;[m
+[32m+[m[41m [m
+[32m+[m[32m context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);[m
+[32m+[m[41m [m
+[32m+[m[32m break;[m
+[32m+[m[32m case 270 :[m
+[32m+[m[41m [m
+[32m+[m[32m var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getWidth() / this.getScaleLevel());[m
+[32m+[m[32m var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getHeight() / this.getScaleLevel());[m
+[32m+[m[41m [m
+[32m+[m[32m var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());[m
+[32m+[m[32m var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());[m
+[32m+[m[41m [m
+[32m+[m[32m var targetWidth = this.minWidth - 2 * x;[m
+[32m+[m[32m var targetHeight = this.minHeight - 2 * y;[m
+[32m+[m[41m [m
+[32m+[m[32m var scale = 1;[m
+[32m+[m[41m [m
+[32m+[m[32m if((x == 0 && y == 0) || (x == 0 && y > 0)){[m
+[32m+[m[32m scale = targetWidth / width;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if(x > 0 && y == 0){[m
+[32m+[m[32m scale = targetHeight / height;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if(x > 0 && y > 0){[m
+[32m+[m[32m scale = targetWidth / width;[m
+[32m+[m[41m [m
+[32m+[m[32m if(width < height){[m
+[32m+[m[32m scale = targetHeight / height;[m
+[32m+[m[32m }[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m context.scale(scale, scale);[m
+[32m+[m[41m [m
+[32m+[m[32m var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));[m
+[32m+[m[32m var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));[m
+[32m+[m
+[32m+[m[32m sx = sx < 0 ? 0 : (sx / this.getScaleLevel());[m
+[32m+[m[32m sy = sy < 0 ? 0 : (sy / this.getScaleLevel());[m
+[32m+[m[41m [m
+[32m+[m[32m sy += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? 0 : Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight);[m
+[32m+[m[41m [m
+[32m+[m[32m context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);[m
+[32m+[m[41m [m
+[32m+[m[32m break;[m
+[32m+[m[32m default :[m[41m [m
+[32m+[m[32m break;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.cropData = canvas.toDataURL(this.cropType);[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.fireEvent('crop', this, this.cropData) !== false){[m
+[32m+[m[32m this.process(this.file, this.cropData);[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m return;[m
+[32m+[m[41m [m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m setThumbBoxSize : function()[m
+[32m+[m[32m {[m
+[32m+[m[32m var width, height;[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.isDocument && typeof(this.imageEl) != 'undefined'){[m
+[32m+[m[32m width = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.max(this.minWidth, this.minHeight) : Math.min(this.minWidth, this.minHeight);[m
+[32m+[m[32m height = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.min(this.minWidth, this.minHeight) : Math.max(this.minWidth, this.minHeight);[m
+[32m+[m[41m [m
+[32m+[m[32m this.minWidth = width;[m
+[32m+[m[32m this.minHeight = height;[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.rotate == 90 || this.rotate == 270){[m
+[32m+[m[32m this.minWidth = height;[m
+[32m+[m[32m this.minHeight = width;[m
+[32m+[m[32m }[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m height = 300;[m
+[32m+[m[32m width = Math.ceil(this.minWidth * height / this.minHeight);[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.minWidth > this.minHeight){[m
+[32m+[m[32m width = 300;[m
+[32m+[m[32m height = Math.ceil(this.minHeight * width / this.minWidth);[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.thumbEl.setStyle({[m
+[32m+[m[32m width : width + 'px',[m
+[32m+[m[32m height : height + 'px'[m
+[32m+[m[32m });[m
+[32m+[m
+[32m+[m[32m return;[m
+[32m+[m[41m [m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m setThumbBoxPosition : function()[m
+[32m+[m[32m {[m
+[32m+[m[32m var x = Math.ceil((this.bodyEl.getWidth() - this.thumbEl.getWidth()) / 2 );[m
+[32m+[m[32m var y = Math.ceil((this.bodyEl.getHeight() - this.thumbEl.getHeight()) / 2);[m
+[32m+[m[41m [m
+[32m+[m[32m this.thumbEl.setLeft(x);[m
+[32m+[m[32m this.thumbEl.setTop(y);[m
+[32m+[m[41m [m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m baseRotateLevel : function()[m
+[32m+[m[32m {[m
+[32m+[m[32m this.baseRotate = 1;[m
+[32m+[m[41m [m
+[32m+[m[32m if([m
+[32m+[m[32m typeof(this.exif) != 'undefined' &&[m
+[32m+[m[32m typeof(this.exif[Roo.dialog.UploadCropbox['tags']['Orientation']]) != 'undefined' &&[m
+[32m+[m[32m [1, 3, 6, 8].indexOf(this.exif[Roo.dialog.UploadCropbox['tags']['Orientation']]) != -1[m
+[32m+[m[32m ){[m
+[32m+[m[32m this.baseRotate = this.exif[Roo.dialog.UploadCropbox['tags']['Orientation']];[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.rotate = Roo.dialog.UploadCropbox['Orientation'][this.baseRotate];[m
+[32m+[m[41m [m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m baseScaleLevel : function()[m
+[32m+[m[32m {[m
+[32m+[m[32m var width, height;[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.isDocument){[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.baseRotate == 6 || this.baseRotate == 8){[m
+[32m+[m[41m [m
+[32m+[m[32m height = this.thumbEl.getHeight();[m
+[32m+[m[32m this.baseScale = height / this.imageEl.OriginWidth;[m
+[32m+[m
+[32m+[m[32m if(this.imageEl.OriginHeight * this.baseScale > this.thumbEl.getWidth()){[m
+[32m+[m[32m width = this.thumbEl.getWidth();[m
+[32m+[m[32m this.baseScale = width / this.imageEl.OriginHeight;[m
+[32m+[m[32m }[m
+[32m+[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m
+[32m+[m[32m height = this.thumbEl.getHeight();[m
+[32m+[m[32m this.baseScale = height / this.imageEl.OriginHeight;[m
+[32m+[m
+[32m+[m[32m if(this.imageEl.OriginWidth * this.baseScale > this.thumbEl.getWidth()){[m
+[32m+[m[32m width = this.thumbEl.getWidth();[m
+[32m+[m[32m this.baseScale = width / this.imageEl.OriginWidth;[m
+[32m+[m[32m }[m
+[32m+[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.baseRotate == 6 || this.baseRotate == 8){[m
+[32m+[m[41m [m
+[32m+[m[32m width = this.thumbEl.getHeight();[m
+[32m+[m[32m this.baseScale = width / this.imageEl.OriginHeight;[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.imageEl.OriginHeight * this.baseScale < this.thumbEl.getWidth()){[m
+[32m+[m[32m height = this.thumbEl.getWidth();[m
+[32m+[m[32m this.baseScale = height / this.imageEl.OriginHeight;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){[m
+[32m+[m[32m height = this.thumbEl.getWidth();[m
+[32m+[m[32m this.baseScale = height / this.imageEl.OriginHeight;[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.imageEl.OriginWidth * this.baseScale < this.thumbEl.getHeight()){[m
+[32m+[m[32m width = this.thumbEl.getHeight();[m
+[32m+[m[32m this.baseScale = width / this.imageEl.OriginWidth;[m
+[32m+[m[32m }[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m width = this.thumbEl.getWidth();[m
+[32m+[m[32m this.baseScale = width / this.imageEl.OriginWidth;[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.imageEl.OriginHeight * this.baseScale < this.thumbEl.getHeight()){[m
+[32m+[m[32m height = this.thumbEl.getHeight();[m
+[32m+[m[32m this.baseScale = height / this.imageEl.OriginHeight;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){[m
+[32m+[m[41m [m
+[32m+[m[32m height = this.thumbEl.getHeight();[m
+[32m+[m[32m this.baseScale = height / this.imageEl.OriginHeight;[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.imageEl.OriginWidth * this.baseScale < this.thumbEl.getWidth()){[m
+[32m+[m[32m width = this.thumbEl.getWidth();[m
+[32m+[m[32m this.baseScale = width / this.imageEl.OriginWidth;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m return;[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m getScaleLevel : function()[m
+[32m+[m[32m {[m
+[32m+[m[32m return this.baseScale * Math.pow(1.1, this.scale);[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m onTouchStart : function(e)[m
+[32m+[m[32m {[m
+[32m+[m[32m if(!this.canvasLoaded){[m
+[32m+[m[32m this.beforeSelectFile(e);[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m var touches = e.browserEvent.touches;[m
+[32m+[m[41m [m
+[32m+[m[32m if(!touches){[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if(touches.length == 1){[m
+[32m+[m[32m this.onMouseDown(e);[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if(touches.length != 2){[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m var coords = [];[m
+[32m+[m[41m [m
+[32m+[m[32m for(var i = 0, finger; finger = touches[i]; i++){[m
+[32m+[m[32m coords.push(finger.pageX, finger.pageY);[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m var x = Math.pow(coords[0] - coords[2], 2);[m
+[32m+[m[32m var y = Math.pow(coords[1] - coords[3], 2);[m
+[32m+[m[41m [m
+[32m+[m[32m this.startDistance = Math.sqrt(x + y);[m
+[32m+[m[41m [m
+[32m+[m[32m this.startScale = this.scale;[m
+[32m+[m[41m [m
+[32m+[m[32m this.pinching = true;[m
+[32m+[m[32m this.dragable = false;[m
+[32m+[m[41m [m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m onTouchMove : function(e)[m
+[32m+[m[32m {[m
+[32m+[m[32m if(!this.pinching && !this.dragable){[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m var touches = e.browserEvent.touches;[m
+[32m+[m[41m [m
+[32m+[m[32m if(!touches){[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.dragable){[m
+[32m+[m[32m this.onMouseMove(e);[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m var coords = [];[m
+[32m+[m[41m [m
+[32m+[m[32m for(var i = 0, finger; finger = touches[i]; i++){[m
+[32m+[m[32m coords.push(finger.pageX, finger.pageY);[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m var x = Math.pow(coords[0] - coords[2], 2);[m
+[32m+[m[32m var y = Math.pow(coords[1] - coords[3], 2);[m
+[32m+[m[41m [m
+[32m+[m[32m this.endDistance = Math.sqrt(x + y);[m
+[32m+[m[41m [m
+[32m+[m[32m this.scale = this.startScale + Math.floor(Math.log(this.endDistance / this.startDistance) / Math.log(1.1));[m
+[32m+[m[41m [m
+[32m+[m[32m if(!this.zoomable()){[m
+[32m+[m[32m this.scale = this.startScale;[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.draw();[m
+[32m+[m[41m [m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m onTouchEnd : function(e)[m
+[32m+[m[32m {[m
+[32m+[m[32m this.pinching = false;[m
+[32m+[m[32m this.dragable = false;[m
+[32m+[m[41m [m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m process : function(file, crop)[m
+[32m+[m[32m {[m
+[32m+[m[32m if(this.loadMask){[m
+[32m+[m[32m this.maskEl.mask(this.loadingText);[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.xhr = new XMLHttpRequest();[m
+[32m+[m[41m [m
+[32m+[m[32m file.xhr = this.xhr;[m
+[32m+[m
+[32m+[m[32m this.xhr.open(this.method, this.url, true);[m
+[32m+[m[41m [m
+[32m+[m[32m var headers = {[m
+[32m+[m[32m "Accept": "application/json",[m
+[32m+[m[32m "Cache-Control": "no-cache",[m
+[32m+[m[32m "X-Requested-With": "XMLHttpRequest"[m
+[32m+[m[32m };[m
+[32m+[m[41m [m
+[32m+[m[32m for (var headerName in headers) {[m
+[32m+[m[32m var headerValue = headers[headerName];[m
+[32m+[m[32m if (headerValue) {[m
+[32m+[m[32m this.xhr.setRequestHeader(headerName, headerValue);[m
+[32m+[m[32m }[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m var _this = this;[m
+[32m+[m[41m [m
+[32m+[m[32m this.xhr.onload = function()[m
+[32m+[m[32m {[m
+[32m+[m[32m _this.xhrOnLoad(_this.xhr);[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.xhr.onerror = function()[m
+[32m+[m[32m {[m
+[32m+[m[32m _this.xhrOnError(_this.xhr);[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m var formData = new FormData();[m
+[32m+[m
+[32m+[m[32m formData.append('returnHTML', 'NO');[m
+[32m+[m[41m [m
+[32m+[m[32m if(crop){[m
+[32m+[m[32m formData.append('crop', crop);[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if(typeof(file) != 'undefined' && (typeof(file.id) == 'undefined' || file.id * 1 < 1)){[m
+[32m+[m[32m formData.append(this.paramName, file, file.name);[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if(typeof(file.filename) != 'undefined'){[m
+[32m+[m[32m formData.append('filename', file.filename);[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if(typeof(file.mimetype) != 'undefined'){[m
+[32m+[m[32m formData.append('mimetype', file.mimetype);[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.fireEvent('arrange', this, formData) != false){[m
+[32m+[m[32m this.xhr.send(formData);[m
+[32m+[m[32m };[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m xhrOnLoad : function(xhr)[m
+[32m+[m[32m {[m
+[32m+[m[32m if(this.loadMask){[m
+[32m+[m[32m this.maskEl.unmask();[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if (xhr.readyState !== 4) {[m
+[32m+[m[32m this.fireEvent('exception', this, xhr);[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m
+[32m+[m[32m var response = Roo.decode(xhr.responseText);[m
+[32m+[m[41m [m
+[32m+[m[32m if(!response.success){[m
+[32m+[m[32m this.fireEvent('exception', this, xhr);[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m var response = Roo.decode(xhr.responseText);[m
+[32m+[m[41m [m
+[32m+[m[32m this.fireEvent('upload', this, response);[m
+[32m+[m[41m [m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m xhrOnError : function()[m
+[32m+[m[32m {[m
+[32m+[m[32m if(this.loadMask){[m
+[32m+[m[32m this.maskEl.unmask();[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m Roo.log('xhr on error');[m
+[32m+[m[41m [m
+[32m+[m[32m var response = Roo.decode(xhr.responseText);[m
+[32m+[m[41m [m
+[32m+[m[32m Roo.log(response);[m
+[32m+[m[41m [m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m prepare : function(file)[m
+[32m+[m[32m {[m[41m [m
+[32m+[m[32m if(this.loadMask){[m
+[32m+[m[32m this.maskEl.mask(this.loadingText);[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.file = false;[m
+[32m+[m[32m this.exif = {};[m
+[32m+[m[41m [m
+[32m+[m[32m if(typeof(file) === 'string'){[m
+[32m+[m[32m this.loadCanvas(file);[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if(!file || !this.urlAPI){[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.file = file;[m
+[32m+[m[32m this.cropType = file.type;[m
+[32m+[m[41m [m
+[32m+[m[32m var _this = this;[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.fireEvent('prepare', this, this.file) != false){[m
+[32m+[m[41m [m
+[32m+[m[32m var reader = new FileReader();[m
+[32m+[m[41m [m
+[32m+[m[32m reader.onload = function (e) {[m
+[32m+[m[32m if (e.target.error) {[m
+[32m+[m[32m Roo.log(e.target.error);[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m var buffer = e.target.result,[m
+[32m+[m[32m dataView = new DataView(buffer),[m
+[32m+[m[32m offset = 2,[m
+[32m+[m[32m maxOffset = dataView.byteLength - 4,[m
+[32m+[m[32m markerBytes,[m
+[32m+[m[32m markerLength;[m
+[32m+[m[41m [m
+[32m+[m[32m if (dataView.getUint16(0) === 0xffd8) {[m
+[32m+[m[32m while (offset < maxOffset) {[m
+[32m+[m[32m markerBytes = dataView.getUint16(offset);[m
+[32m+[m[41m [m
+[32m+[m[32m if ((markerBytes >= 0xffe0 && markerBytes <= 0xffef) || markerBytes === 0xfffe) {[m
+[32m+[m[32m markerLength = dataView.getUint16(offset + 2) + 2;[m
+[32m+[m[32m if (offset + markerLength > dataView.byteLength) {[m
+[32m+[m[32m Roo.log('Invalid meta data: Invalid segment size.');[m
+[32m+[m[32m break;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if(markerBytes == 0xffe1){[m
+[32m+[m[32m _this.parseExifData([m
+[32m+[m[32m dataView,[m
+[32m+[m[32m offset,[m
+[32m+[m[32m markerLength[m
+[32m+[m[32m );[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m offset += markerLength;[m
+[32m+[m[41m [m
+[32m+[m[32m continue;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m break;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m var url = _this.urlAPI.createObjectURL(_this.file);[m
+[32m+[m[41m [m
+[32m+[m[32m _this.loadCanvas(url);[m
+[32m+[m[41m [m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m reader.readAsArrayBuffer(this.file);[m
+[32m+[m[41m [m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m parseExifData : function(dataView, offset, length)[m
+[32m+[m[32m {[m
+[32m+[m[32m var tiffOffset = offset + 10,[m
+[32m+[m[32m littleEndian,[m
+[32m+[m[32m dirOffset;[m
+[32m+[m[41m [m
+[32m+[m[32m if (dataView.getUint32(offset + 4) !== 0x45786966) {[m
+[32m+[m[32m // No Exif data, might be XMP data instead[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m // Check for the ASCII code for "Exif" (0x45786966):[m
+[32m+[m[32m if (dataView.getUint32(offset + 4) !== 0x45786966) {[m
+[32m+[m[32m // No Exif data, might be XMP data instead[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[32m if (tiffOffset + 8 > dataView.byteLength) {[m
+[32m+[m[32m Roo.log('Invalid Exif data: Invalid segment size.');[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[32m // Check for the two null bytes:[m
+[32m+[m[32m if (dataView.getUint16(offset + 8) !== 0x0000) {[m
+[32m+[m[32m Roo.log('Invalid Exif data: Missing byte alignment offset.');[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[32m // Check the byte alignment:[m
+[32m+[m[32m switch (dataView.getUint16(tiffOffset)) {[m
+[32m+[m[32m case 0x4949:[m
+[32m+[m[32m littleEndian = true;[m
+[32m+[m[32m break;[m
+[32m+[m[32m case 0x4D4D:[m
+[32m+[m[32m littleEndian = false;[m
+[32m+[m[32m break;[m
+[32m+[m[32m default:[m
+[32m+[m[32m Roo.log('Invalid Exif data: Invalid byte alignment marker.');[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[32m // Check for the TIFF tag marker (0x002A):[m
+[32m+[m[32m if (dataView.getUint16(tiffOffset + 2, littleEndian) !== 0x002A) {[m
+[32m+[m[32m Roo.log('Invalid Exif data: Missing TIFF marker.');[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[32m // Retrieve the directory offset bytes, usually 0x00000008 or 8 decimal:[m
+[32m+[m[32m dirOffset = dataView.getUint32(tiffOffset + 4, littleEndian);[m
+[32m+[m[41m [m
+[32m+[m[32m this.parseExifTags([m
+[32m+[m[32m dataView,[m
+[32m+[m[32m tiffOffset,[m
+[32m+[m[32m tiffOffset + dirOffset,[m
+[32m+[m[32m littleEndian[m
+[32m+[m[32m );[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m parseExifTags : function(dataView, tiffOffset, dirOffset, littleEndian)[m
+[32m+[m[32m {[m
+[32m+[m[32m var tagsNumber,[m
+[32m+[m[32m dirEndOffset,[m
+[32m+[m[32m i;[m
+[32m+[m[32m if (dirOffset + 6 > dataView.byteLength) {[m
+[32m+[m[32m Roo.log('Invalid Exif data: Invalid directory offset.');[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[32m tagsNumber = dataView.getUint16(dirOffset, littleEndian);[m
+[32m+[m[32m dirEndOffset = dirOffset + 2 + 12 * tagsNumber;[m
+[32m+[m[32m if (dirEndOffset + 4 > dataView.byteLength) {[m
+[32m+[m[32m Roo.log('Invalid Exif data: Invalid directory size.');[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[32m for (i = 0; i < tagsNumber; i += 1) {[m
+[32m+[m[32m this.parseExifTag([m
+[32m+[m[32m dataView,[m
+[32m+[m[32m tiffOffset,[m
+[32m+[m[32m dirOffset + 2 + 12 * i, // tag offset[m
+[32m+[m[32m littleEndian[m
+[32m+[m[32m );[m
+[32m+[m[32m }[m
+[32m+[m[32m // Return the offset to the next directory:[m
+[32m+[m[32m return dataView.getUint32(dirEndOffset, littleEndian);[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m parseExifTag : function (dataView, tiffOffset, offset, littleEndian)[m[41m [m
+[32m+[m[32m {[m
+[32m+[m[32m var tag = dataView.getUint16(offset, littleEndian);[m
+[32m+[m[41m [m
+[32m+[m[32m this.exif[tag] = this.getExifValue([m
+[32m+[m[32m dataView,[m
+[32m+[m[32m tiffOffset,[m
+[32m+[m[32m offset,[m
+[32m+[m[32m dataView.getUint16(offset + 2, littleEndian), // tag type[m
+[32m+[m[32m dataView.getUint32(offset + 4, littleEndian), // tag length[m
+[32m+[m[32m littleEndian[m
+[32m+[m[32m );[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m getExifValue : function (dataView, tiffOffset, offset, type, length, littleEndian)[m
+[32m+[m[32m {[m
+[32m+[m[32m var tagType = Roo.dialog.UploadCropbox.exifTagTypes[type],[m
+[32m+[m[32m tagSize,[m
+[32m+[m[32m dataOffset,[m
+[32m+[m[32m values,[m
+[32m+[m[32m i,[m
+[32m+[m[32m str,[m
+[32m+[m[32m c;[m
+[32m+[m[41m [m
+[32m+[m[32m if (!tagType) {[m
+[32m+[m[32m Roo.log('Invalid Exif data: Invalid tag type.');[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m tagSize = tagType.size * length;[m
+[32m+[m[32m // Determine if the value is contained in the dataOffset bytes,[m
+[32m+[m[32m // or if the value at the dataOffset is a pointer to the actual data:[m
+[32m+[m[32m dataOffset = tagSize > 4 ?[m
+[32m+[m[32m tiffOffset + dataView.getUint32(offset + 8, littleEndian) : (offset + 8);[m
+[32m+[m[32m if (dataOffset + tagSize > dataView.byteLength) {[m
+[32m+[m[32m Roo.log('Invalid Exif data: Invalid data offset.');[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[32m if (length === 1) {[m
+[32m+[m[32m return tagType.getValue(dataView, dataOffset, littleEndian);[m
+[32m+[m[32m }[m
+[32m+[m[32m values = [];[m
+[32m+[m[32m for (i = 0; i < length; i += 1) {[m
+[32m+[m[32m values[i] = tagType.getValue(dataView, dataOffset + i * tagType.size, littleEndian);[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if (tagType.ascii) {[m
+[32m+[m[32m str = '';[m
+[32m+[m[32m // Concatenate the chars:[m
+[32m+[m[32m for (i = 0; i < values.length; i += 1) {[m
+[32m+[m[32m c = values[i];[m
+[32m+[m[32m // Ignore the terminating NULL byte(s):[m
+[32m+[m[32m if (c === '\u0000') {[m
+[32m+[m[32m break;[m
+[32m+[m[32m }[m
+[32m+[m[32m str += c;[m
+[32m+[m[32m }[m
+[32m+[m[32m return str;[m
+[32m+[m[32m }[m
+[32m+[m[32m return values;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m});[m
+[32m+[m
+[32m+[m[32mRoo.apply(Roo.dialog.UploadCropbox, {[m
+[32m+[m[32m tags : {[m
+[32m+[m[32m 'Orientation': 0x0112[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m Orientation: {[m
+[32m+[m[32m 1: 0, //'top-left',[m
+[32m+[m[32m// 2: 'top-right',[m
+[32m+[m[32m 3: 180, //'bottom-right',[m
+[32m+[m[32m// 4: 'bottom-left',[m
+[32m+[m[32m// 5: 'left-top',[m
+[32m+[m[32m 6: 90, //'right-top',[m
+[32m+[m[32m// 7: 'right-bottom',[m
+[32m+[m[32m 8: 270 //'left-bottom'[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m exifTagTypes : {[m
+[32m+[m[32m // byte, 8-bit unsigned int:[m
+[32m+[m[32m 1: {[m
+[32m+[m[32m getValue: function (dataView, dataOffset) {[m
+[32m+[m[32m return dataView.getUint8(dataOffset);[m
+[32m+[m[32m },[m
+[32m+[m[32m size: 1[m
+[32m+[m[32m },[m
+[32m+[m[32m // ascii, 8-bit byte:[m
+[32m+[m[32m 2: {[m
+[32m+[m[32m getValue: function (dataView, dataOffset) {[m
+[32m+[m[32m return String.fromCharCode(dataView.getUint8(dataOffset));[m
+[32m+[m[32m },[m
+[32m+[m[32m size: 1,[m
+[32m+[m[32m ascii: true[m
+[32m+[m[32m },[m
+[32m+[m[32m // short, 16 bit int:[m
+[32m+[m[32m 3: {[m
+[32m+[m[32m getValue: function (dataView, dataOffset, littleEndian) {[m
+[32m+[m[32m return dataView.getUint16(dataOffset, littleEndian);[m
+[32m+[m[32m },[m
+[32m+[m[32m size: 2[m
+[32m+[m[32m },[m
+[32m+[m[32m // long, 32 bit int:[m
+[32m+[m[32m 4: {[m
+[32m+[m[32m getValue: function (dataView, dataOffset, littleEndian) {[m
+[32m+[m[32m return dataView.getUint32(dataOffset, littleEndian);[m
+[32m+[m[32m },[m
+[32m+[m[32m size: 4[m
+[32m+[m[32m },[m
+[32m+[m[32m // rational = two long values, first is numerator, second is denominator:[m
+[32m+[m[32m 5: {[m
+[32m+[m[32m getValue: function (dataView, dataOffset, littleEndian) {[m
+[32m+[m[32m return dataView.getUint32(dataOffset, littleEndian) /[m
+[32m+[m[32m dataView.getUint32(dataOffset + 4, littleEndian);[m
+[32m+[m[32m },[m
+[32m+[m[32m size: 8[m
+[32m+[m[32m },[m
+[32m+[m[32m // slong, 32 bit signed int:[m
+[32m+[m[32m 9: {[m
+[32m+[m[32m getValue: function (dataView, dataOffset, littleEndian) {[m
+[32m+[m[32m return dataView.getInt32(dataOffset, littleEndian);[m
+[32m+[m[32m },[m
+[32m+[m[32m size: 4[m
+[32m+[m[32m },[m
+[32m+[m[32m // srational, two slongs, first is numerator, second is denominator:[m
+[32m+[m[32m 10: {[m
+[32m+[m[32m getValue: function (dataView, dataOffset, littleEndian) {[m
+[32m+[m[32m return dataView.getInt32(dataOffset, littleEndian) /[m
+[32m+[m[32m dataView.getInt32(dataOffset + 4, littleEndian);[m
+[32m+[m[32m },[m
+[32m+[m[32m size: 8[m
+[32m+[m[32m }[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m footer : {[m
+[32m+[m[32m STANDARD : [[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'div',[m
+[32m+[m[32m cls : 'btn-group roo-upload-cropbox-rotate-left',[m
+[32m+[m[32m action : 'rotate-left',[m
+[32m+[m[32m cn : [[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'button',[m
+[32m+[m[32m cls : 'btn btn-default',[m
+[32m+[m[32m html : ''[m
+[32m+[m[32m }[m
+[32m+[m[32m ][m
+[32m+[m[32m },[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'div',[m
+[32m+[m[32m cls : 'btn-group roo-upload-cropbox-picture',[m
+[32m+[m[32m action : 'picture',[m
+[32m+[m[32m cn : [[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'button',[m
+[32m+[m[32m cls : 'btn btn-default',[m
+[32m+[m[32m html : ''[m
+[32m+[m[32m }[m
+[32m+[m[32m ][m
+[32m+[m[32m },[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'div',[m
+[32m+[m[32m cls : 'btn-group roo-upload-cropbox-rotate-right',[m
+[32m+[m[32m action : 'rotate-right',[m
+[32m+[m[32m cn : [[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'button',[m
+[32m+[m[32m cls : 'btn btn-default',[m
+[32m+[m[32m html : ''[m
+[32m+[m[32m }[m
+[32m+[m[32m ][m
+[32m+[m[32m }[m
+[32m+[m[32m ],[m
+[32m+[m[32m DOCUMENT : [[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'div',[m
+[32m+[m[32m cls : 'btn-group roo-upload-cropbox-rotate-left',[m
+[32m+[m[32m action : 'rotate-left',[m
+[32m+[m[32m cn : [[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'button',[m
+[32m+[m[32m cls : 'btn btn-default',[m
+[32m+[m[32m html : ''[m
+[32m+[m[32m }[m
+[32m+[m[32m ][m
+[32m+[m[32m },[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'div',[m
+[32m+[m[32m cls : 'btn-group roo-upload-cropbox-download',[m
+[32m+[m[32m action : 'download',[m
+[32m+[m[32m cn : [[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'button',[m
+[32m+[m[32m cls : 'btn btn-default',[m
+[32m+[m[32m html : ''[m
+[32m+[m[32m }[m
+[32m+[m[32m ][m
+[32m+[m[32m },[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'div',[m
+[32m+[m[32m cls : 'btn-group roo-upload-cropbox-crop',[m
+[32m+[m[32m action : 'crop',[m
+[32m+[m[32m cn : [[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'button',[m
+[32m+[m[32m cls : 'btn btn-default',[m
+[32m+[m[32m html : ''[m
+[32m+[m[32m }[m
+[32m+[m[32m ][m
+[32m+[m[32m },[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'div',[m
+[32m+[m[32m cls : 'btn-group roo-upload-cropbox-trash',[m
+[32m+[m[32m action : 'trash',[m
+[32m+[m[32m cn : [[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'button',[m
+[32m+[m[32m cls : 'btn btn-default',[m
+[32m+[m[32m html : ''[m
+[32m+[m[32m }[m
+[32m+[m[32m ][m
+[32m+[m[32m },[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'div',[m
+[32m+[m[32m cls : 'btn-group roo-upload-cropbox-rotate-right',[m
+[32m+[m[32m action : 'rotate-right',[m
+[32m+[m[32m cn : [[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'button',[m
+[32m+[m[32m cls : 'btn btn-default',[m
+[32m+[m[32m html : ''[m
+[32m+[m[32m }[m
+[32m+[m[32m ][m
+[32m+[m[32m }[m
+[32m+[m[32m ],[m
+[32m+[m[32m ROTATOR : [[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'div',[m
+[32m+[m[32m cls : 'btn-group roo-upload-cropbox-rotate-left',[m
+[32m+[m[32m action : 'rotate-left',[m
+[32m+[m[32m cn : [[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'button',[m
+[32m+[m[32m cls : 'btn btn-default',[m
+[32m+[m[32m html : ''[m
+[32m+[m[32m }[m
+[32m+[m[32m ][m
+[32m+[m[32m },[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'div',[m
+[32m+[m[32m cls : 'btn-group roo-upload-cropbox-rotate-right',[m
+[32m+[m[32m action : 'rotate-right',[m
+[32m+[m[32m cn : [[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'button',[m
+[32m+[m[32m cls : 'btn btn-default',[m
+[32m+[m[32m html : ''[m
+[32m+[m[32m }[m
+[32m+[m[32m ][m
+[32m+[m[32m }[m
+[32m+[m[32m ][m
+[32m+[m[32m }[m
+[32m+[m[32m});[m
+[1mdiff --git a/roojs-ui-debug.js b/roojs-ui-debug.js[m
+[1mindex 4458d38422..4cc277300f 100644[m
+[1m--- a/roojs-ui-debug.js[m
+[1m+++ b/roojs-ui-debug.js[m
+[36m@@ -35922,7 +35922,6 @@[m [mRoo.LayoutStateManager.prototype = {[m
+ */[m
+ Roo.ContentPanel = function(el, config, content){[m
+ [m
+[31m- [m
+ /*[m
+ if(el.autoCreate || el.xtype){ // xtype is available if this is called from factory[m
+ config = el;[m
+[36m@@ -36306,6 +36305,14 @@[m [mlayout.addxtype({[m
+ */[m
+ [m
+ addxtype : function(cfg) {[m
+[32m+[m[32m if(cfg.xtype.match(/^UploadCropbox$/)) {[m
+[32m+[m
+[32m+[m[32m this.cropbox = new Roo.factory(cfg);[m
+[32m+[m
+[32m+[m[32m this.cropbox.render(this.el);[m
+[32m+[m
+[32m+[m[32m return this.cropbox;[m
+[32m+[m[32m }[m
+ // add form..[m
+ if (cfg.xtype.match(/^Form$/)) {[m
+ [m
+[36m@@ -43558,4 +43565,1795 @@[m [mRoo.extend(Roo.XTemplate, Roo.Template, {[m
+ Roo.XTemplate.from = function(el){[m
+ el = Roo.getDom(el);[m
+ return new Roo.XTemplate(el.value || el.innerHTML);[m
+[31m-};[m
+\ No newline at end of file[m
+[32m+[m[32m};Roo.dialog = {};[m
+[32m+[m[32m/*[m
+[32m+[m[32m* Licence: LGPL[m
+[32m+[m[32m*/[m
+[32m+[m
+[32m+[m[32m/**[m
+[32m+[m[32m * @class Roo.dialog.UploadCropbox[m
+[32m+[m[32m * @extends Roo.BoxComponent[m
+[32m+[m[32m * Dialog UploadCropbox class[m
+[32m+[m[32m * @cfg {String} emptyText show when image has been loaded[m
+[32m+[m[32m * @cfg {String} rotateNotify show when image too small to rotate[m
+[32m+[m[32m * @cfg {Number} errorTimeout default 3000[m
+[32m+[m[32m * @cfg {Number} minWidth default 300[m
+[32m+[m[32m * @cfg {Number} minHeight default 300[m
+[32m+[m[32m * @cfg {Array} buttons default ['rotateLeft', 'pictureBtn', 'rotateRight'][m
+[32m+[m[32m * @cfg {Boolean} isDocument (true|false) default false[m
+[32m+[m[32m * @cfg {String} url action url[m
+[32m+[m[32m * @cfg {String} paramName default 'imageUpload'[m
+[32m+[m[32m * @cfg {String} method default POST[m
+[32m+[m[32m * @cfg {Boolean} loadMask (true|false) default true[m
+[32m+[m[32m * @cfg {Boolean} loadingText default 'Loading...'[m
+[32m+[m[32m *[m[41m [m
+[32m+[m[32m * @constructor[m
+[32m+[m[32m * Create a new UploadCropbox[m
+[32m+[m[32m * @param {Object} config The config object[m
+[32m+[m[32m */[m
+[32m+[m
+[32m+[m[32m Roo.dialog.UploadCropbox = function(config){[m
+[32m+[m[32m console.log("Dialog UploadCropbox Constructor");[m
+[32m+[m[32m Roo.dialog.UploadCropbox.superclass.constructor.call(this, config);[m
+[32m+[m[41m [m
+[32m+[m[32m this.addEvents({[m
+[32m+[m[32m /**[m
+[32m+[m[32m * @event beforeselectfile[m
+[32m+[m[32m * Fire before select file[m
+[32m+[m[32m * @param {Roo.dialog.UploadCropbox} this[m
+[32m+[m[32m */[m
+[32m+[m[32m "beforeselectfile" : true,[m
+[32m+[m[32m /**[m
+[32m+[m[32m * @event initial[m
+[32m+[m[32m * Fire after initEvent[m
+[32m+[m[32m * @param {Roo.dialog.UploadCropbox} this[m
+[32m+[m[32m */[m
+[32m+[m[32m "initial" : true,[m
+[32m+[m[32m /**[m
+[32m+[m[32m * @event crop[m
+[32m+[m[32m * Fire after initEvent[m
+[32m+[m[32m * @param {Roo.dialog.UploadCropbox} this[m
+[32m+[m[32m * @param {String} data[m
+[32m+[m[32m */[m
+[32m+[m[32m "crop" : true,[m
+[32m+[m[32m /**[m
+[32m+[m[32m * @event prepare[m
+[32m+[m[32m * Fire when preparing the file data[m
+[32m+[m[32m * @param {Roo.dialog.UploadCropbox} this[m
+[32m+[m[32m * @param {Object} file[m
+[32m+[m[32m */[m
+[32m+[m[32m "prepare" : true,[m
+[32m+[m[32m /**[m
+[32m+[m[32m * @event exception[m
+[32m+[m[32m * Fire when get exception[m
+[32m+[m[32m * @param {Roo.dialog.UploadCropbox} this[m
+[32m+[m[32m * @param {XMLHttpRequest} xhr[m
+[32m+[m[32m */[m
+[32m+[m[32m "exception" : true,[m
+[32m+[m[32m /**[m
+[32m+[m[32m * @event beforeloadcanvas[m
+[32m+[m[32m * Fire before load the canvas[m
+[32m+[m[32m * @param {Roo.dialog.UploadCropbox} this[m
+[32m+[m[32m * @param {String} src[m
+[32m+[m[32m */[m
+[32m+[m[32m "beforeloadcanvas" : true,[m
+[32m+[m[32m /**[m
+[32m+[m[32m * @event trash[m
+[32m+[m[32m * Fire when trash image[m
+[32m+[m[32m * @param {Roo.dialog.UploadCropbox} this[m
+[32m+[m[32m */[m
+[32m+[m[32m "trash" : true,[m
+[32m+[m[32m /**[m
+[32m+[m[32m * @event download[m
+[32m+[m[32m * Fire when download the image[m
+[32m+[m[32m * @param {Roo.dialog.UploadCropbox} this[m
+[32m+[m[32m */[m
+[32m+[m[32m "download" : true,[m
+[32m+[m[32m /**[m
+[32m+[m[32m * @event footerbuttonclick[m
+[32m+[m[32m * Fire when footerbuttonclick[m
+[32m+[m[32m * @param {Roo.dialog.UploadCropbox} this[m
+[32m+[m[32m * @param {String} type[m
+[32m+[m[32m */[m
+[32m+[m[32m "footerbuttonclick" : true,[m
+[32m+[m[32m /**[m
+[32m+[m[32m * @event resize[m
+[32m+[m[32m * Fire when resize[m
+[32m+[m[32m * @param {Roo.dialog.UploadCropbox} this[m
+[32m+[m[32m */[m
+[32m+[m[32m "resize" : true,[m
+[32m+[m[32m /**[m
+[32m+[m[32m * @event rotate[m
+[32m+[m[32m * Fire when rotate the image[m
+[32m+[m[32m * @param {Roo.dialog.UploadCropbox} this[m
+[32m+[m[32m * @param {String} pos[m
+[32m+[m[32m */[m
+[32m+[m[32m "rotate" : true,[m
+[32m+[m[32m /**[m
+[32m+[m[32m * @event inspect[m
+[32m+[m[32m * Fire when inspect the file[m
+[32m+[m[32m * @param {Roo.dialog.UploadCropbox} this[m
+[32m+[m[32m * @param {Object} file[m
+[32m+[m[32m */[m
+[32m+[m[32m "inspect" : true,[m
+[32m+[m[32m /**[m
+[32m+[m[32m * @event upload[m
+[32m+[m[32m * Fire when xhr upload the file[m
+[32m+[m[32m * @param {Roo.dialog.UploadCropbox} this[m
+[32m+[m[32m * @param {Object} data[m
+[32m+[m[32m */[m
+[32m+[m[32m "upload" : true,[m
+[32m+[m[32m /**[m
+[32m+[m[32m * @event arrange[m
+[32m+[m[32m * Fire when arrange the file data[m
+[32m+[m[32m * @param {Roo.dialog.UploadCropbox} this[m
+[32m+[m[32m * @param {Object} formData[m
+[32m+[m[32m */[m
+[32m+[m[32m "arrange" : true,[m
+[32m+[m[32m /**[m
+[32m+[m[32m * @event loadcanvas[m
+[32m+[m[32m * Fire after load the canvas[m
+[32m+[m[32m * @param {Roo.dialog.UploadCropbox}[m
+[32m+[m[32m * @param {Object} imgEl[m
+[32m+[m[32m */[m
+[32m+[m[32m "loadcanvas" : true[m
+[32m+[m[32m });[m
+[32m+[m[41m [m
+[32m+[m[32m this.buttons = this.buttons || Roo.dialog.UploadCropbox.footer.STANDARD;[m
+[32m+[m[32m};[m
+[32m+[m
+[32m+[m[32mRoo.extend(Roo.dialog.UploadCropbox, Roo.Component, {[m
+[32m+[m[41m [m
+[32m+[m[32m emptyText : 'Click to upload image',[m
+[32m+[m[32m rotateNotify : 'Image is too small to rotate',[m
+[32m+[m[32m errorTimeout : 3000,[m
+[32m+[m[32m scale : 0,[m
+[32m+[m[32m baseScale : 1,[m
+[32m+[m[32m rotate : 0,[m
+[32m+[m[32m dragable : false,[m
+[32m+[m[32m pinching : false,[m
+[32m+[m[32m mouseX : 0,[m
+[32m+[m[32m mouseY : 0,[m
+[32m+[m[32m cropData : false,[m
+[32m+[m[32m minWidth : 300,[m
+[32m+[m[32m minHeight : 300,[m
+[32m+[m[32m file : false,[m
+[32m+[m[32m exif : {},[m
+[32m+[m[32m baseRotate : 1,[m
+[32m+[m[32m cropType : 'image/jpeg',[m
+[32m+[m[32m buttons : false,[m
+[32m+[m[32m canvasLoaded : false,[m
+[32m+[m[32m isDocument : false,[m
+[32m+[m[32m method : 'POST',[m
+[32m+[m[32m paramName : 'imageUpload',[m
+[32m+[m[32m loadMask : true,[m
+[32m+[m[32m loadingText : 'Loading...',[m
+[32m+[m[32m maskEl : false,[m
+[32m+[m[41m [m
+[32m+[m[32m getAutoCreate : function()[m
+[32m+[m[32m {[m
+[32m+[m[32m var cfg = {[m
+[32m+[m[32m tag : 'div',[m
+[32m+[m[32m cls : 'roo-upload-cropbox',[m
+[32m+[m[32m cn : [[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'input',[m
+[32m+[m[32m cls : 'roo-upload-cropbox-selector',[m
+[32m+[m[32m type : 'file'[m
+[32m+[m[32m },[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'div',[m
+[32m+[m[32m cls : 'roo-upload-cropbox-body',[m
+[32m+[m[32m style : 'cursor:pointer',[m
+[32m+[m[32m cn : [[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'div',[m
+[32m+[m[32m cls : 'roo-upload-cropbox-preview'[m
+[32m+[m[32m },[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'div',[m
+[32m+[m[32m cls : 'roo-upload-cropbox-thumb'[m
+[32m+[m[32m },[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'div',[m
+[32m+[m[32m cls : 'roo-upload-cropbox-empty-notify',[m
+[32m+[m[32m html : this.emptyText[m
+[32m+[m[32m },[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'div',[m
+[32m+[m[32m cls : 'roo-upload-cropbox-error-notify alert alert-danger',[m
+[32m+[m[32m html : this.rotateNotify[m
+[32m+[m[32m }[m
+[32m+[m[32m ][m
+[32m+[m[32m },[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'div',[m
+[32m+[m[32m cls : 'roo-upload-cropbox-footer',[m
+[32m+[m[32m cn : {[m
+[32m+[m[32m tag : 'div',[m
+[32m+[m[32m cls : 'btn-group btn-group-justified roo-upload-cropbox-btn-group',[m
+[32m+[m[32m cn : [][m
+[32m+[m[32m }[m
+[32m+[m[32m }[m
+[32m+[m[32m ][m
+[32m+[m[32m };[m
+[32m+[m[41m [m
+[32m+[m[32m return cfg;[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m onRender : function(ct, position)[m
+[32m+[m[32m {[m
+[32m+[m[32m console.log("On Render");[m
+[32m+[m[32m console.log(this);[m
+[32m+[m[32m Roo.dialog.UploadCropbox.superclass.onRender.call(this, ct, position);[m
+[32m+[m
+[32m+[m[32m if(this.el){[m
+[32m+[m[32m if (this.el.attr('xtype')) {[m
+[32m+[m[32m this.el.attr('xtypex', this.el.attr('xtype'));[m
+[32m+[m[32m this.el.dom.removeAttribute('xtype');[m
+[32m+[m[41m [m
+[32m+[m[32m this.initEvents();[m
+[32m+[m[32m }[m
+[32m+[m[32m }[m
+[32m+[m[32m else {[m
+[32m+[m[32m var cfg = Roo.apply({}, this.getAutoCreate());[m
+[32m+[m[41m [m
+[32m+[m[32m cfg.id = this.id || Roo.id();[m
+[32m+[m[41m [m
+[32m+[m[32m if (this.cls) {[m
+[32m+[m[32m cfg.cls = (typeof(cfg.cls) == 'undefined' ? this.cls : cfg.cls) + ' ' + this.cls;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if (this.style) { // fixme needs to support more complex style data.[m
+[32m+[m[32m cfg.style = (typeof(cfg.style) == 'undefined' ? this.style : cfg.style) + '; ' + this.style;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.el = ct.createChild(cfg, position);[m
+[32m+[m[41m [m
+[32m+[m[32m this.initEvents();[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if (this.buttons.length) {[m
+[32m+[m[41m [m
+[32m+[m[32m Roo.each(this.buttons, function(bb) {[m
+[32m+[m[41m [m
+[32m+[m[32m var btn = this.el.select('.roo-upload-cropbox-footer div.roo-upload-cropbox-btn-group').first().createChild(bb);[m
+[32m+[m[41m [m
+[32m+[m[32m btn.on('click', this.onFooterButtonClick.createDelegate(this, [bb.action], true));[m
+[32m+[m[41m [m
+[32m+[m[32m }, this);[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.loadMask){[m
+[32m+[m[32m this.maskEl = this.el;[m
+[32m+[m[32m }[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m initEvents : function()[m
+[32m+[m[32m {[m
+[32m+[m[32m this.urlAPI = (window.createObjectURL && window) ||[m[41m [m
+[32m+[m[32m (window.URL && URL.revokeObjectURL && URL) ||[m[41m [m
+[32m+[m[32m (window.webkitURL && webkitURL);[m
+[32m+[m[41m [m
+[32m+[m[32m this.bodyEl = this.el.select('.roo-upload-cropbox-body', true).first();[m
+[32m+[m[32m this.bodyEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';[m
+[32m+[m[41m [m
+[32m+[m[32m this.selectorEl = this.el.select('.roo-upload-cropbox-selector', true).first();[m
+[32m+[m[32m this.selectorEl.hide();[m
+[32m+[m[41m [m
+[32m+[m[32m this.previewEl = this.el.select('.roo-upload-cropbox-preview', true).first();[m
+[32m+[m[32m this.previewEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';[m
+[32m+[m[41m [m
+[32m+[m[32m this.thumbEl = this.el.select('.roo-upload-cropbox-thumb', true).first();[m
+[32m+[m[32m this.thumbEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';[m
+[32m+[m[32m this.thumbEl.hide();[m
+[32m+[m[41m [m
+[32m+[m[32m this.notifyEl = this.el.select('.roo-upload-cropbox-empty-notify', true).first();[m
+[32m+[m[32m this.notifyEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';[m
+[32m+[m[41m [m
+[32m+[m[32m this.errorEl = this.el.select('.roo-upload-cropbox-error-notify', true).first();[m
+[32m+[m[32m this.errorEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';[m
+[32m+[m[32m this.errorEl.hide();[m
+[32m+[m[41m [m
+[32m+[m[32m this.footerEl = this.el.select('.roo-upload-cropbox-footer', true).first();[m
+[32m+[m[32m this.footerEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';[m
+[32m+[m[32m this.footerEl.hide();[m
+[32m+[m[41m [m
+[32m+[m[32m this.setThumbBoxSize();[m
+[32m+[m[41m [m
+[32m+[m[32m this.bind();[m
+[32m+[m[41m [m
+[32m+[m[32m this.resize();[m
+[32m+[m[41m [m
+[32m+[m[32m this.fireEvent('initial', this);[m
+[32m+[m[32m },[m
+[32m+[m
+[32m+[m[32m bind : function()[m
+[32m+[m[32m {[m
+[32m+[m[32m var _this = this;[m
+[32m+[m[41m [m
+[32m+[m[32m window.addEventListener("resize", function() { _this.resize(); } );[m
+[32m+[m[41m [m
+[32m+[m[32m this.bodyEl.on('click', this.beforeSelectFile, this);[m
+[32m+[m[41m [m
+[32m+[m[32m if(Roo.isTouch){[m
+[32m+[m[32m this.bodyEl.on('touchstart', this.onTouchStart, this);[m
+[32m+[m[32m this.bodyEl.on('touchmove', this.onTouchMove, this);[m
+[32m+[m[32m this.bodyEl.on('touchend', this.onTouchEnd, this);[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if(!Roo.isTouch){[m
+[32m+[m[32m this.bodyEl.on('mousedown', this.onMouseDown, this);[m
+[32m+[m[32m this.bodyEl.on('mousemove', this.onMouseMove, this);[m
+[32m+[m[32m var mousewheel = (/Firefox/i.test(navigator.userAgent))? 'DOMMouseScroll' : 'mousewheel';[m
+[32m+[m[32m this.bodyEl.on(mousewheel, this.onMouseWheel, this);[m
+[32m+[m[32m Roo.get(document).on('mouseup', this.onMouseUp, this);[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.selectorEl.on('change', this.onFileSelected, this);[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m reset : function()[m
+[32m+[m[32m {[m[41m [m
+[32m+[m[32m this.scale = 0;[m
+[32m+[m[32m this.baseScale = 1;[m
+[32m+[m[32m this.rotate = 0;[m
+[32m+[m[32m this.baseRotate = 1;[m
+[32m+[m[32m this.dragable = false;[m
+[32m+[m[32m this.pinching = false;[m
+[32m+[m[32m this.mouseX = 0;[m
+[32m+[m[32m this.mouseY = 0;[m
+[32m+[m[32m this.cropData = false;[m
+[32m+[m[32m this.notifyEl.dom.innerHTML = this.emptyText;[m
+[32m+[m[41m [m
+[32m+[m[32m // this.selectorEl.dom.value = '';[m
+[32m+[m[41m [m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m resize : function()[m
+[32m+[m[32m {[m
+[32m+[m[32m if(this.fireEvent('resize', this) != false){[m
+[32m+[m[32m this.setThumbBoxPosition();[m
+[32m+[m[32m this.setCanvasPosition();[m
+[32m+[m[32m }[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m onFooterButtonClick : function(e, el, o, type)[m
+[32m+[m[32m {[m
+[32m+[m[32m switch (type) {[m
+[32m+[m[32m case 'rotate-left' :[m
+[32m+[m[32m this.onRotateLeft(e);[m
+[32m+[m[32m break;[m
+[32m+[m[32m case 'rotate-right' :[m
+[32m+[m[32m this.onRotateRight(e);[m
+[32m+[m[32m break;[m
+[32m+[m[32m case 'picture' :[m
+[32m+[m[32m this.beforeSelectFile(e);[m
+[32m+[m[32m break;[m
+[32m+[m[32m case 'trash' :[m
+[32m+[m[32m this.trash(e);[m
+[32m+[m[32m break;[m
+[32m+[m[32m case 'crop' :[m
+[32m+[m[32m this.crop(e);[m
+[32m+[m[32m break;[m
+[32m+[m[32m case 'download' :[m
+[32m+[m[32m this.download(e);[m
+[32m+[m[32m break;[m
+[32m+[m[32m default :[m
+[32m+[m[32m break;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.fireEvent('footerbuttonclick', this, type);[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m beforeSelectFile : function(e)[m
+[32m+[m[32m {[m
+[32m+[m[32m e.preventDefault();[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.fireEvent('beforeselectfile', this) != false){[m
+[32m+[m[32m this.selectorEl.dom.click();[m
+[32m+[m[32m }[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m onFileSelected : function(e)[m
+[32m+[m[32m {[m
+[32m+[m[32m e.preventDefault();[m
+[32m+[m[41m [m
+[32m+[m[32m if(typeof(this.selectorEl.dom.files) == 'undefined' || !this.selectorEl.dom.files.length){[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m var file = this.selectorEl.dom.files[0];[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.fireEvent('inspect', this, file) != false){[m
+[32m+[m[32m this.prepare(file);[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m trash : function(e)[m
+[32m+[m[32m {[m
+[32m+[m[32m this.fireEvent('trash', this);[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m download : function(e)[m
+[32m+[m[32m {[m
+[32m+[m[32m this.fireEvent('download', this);[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m loadCanvas : function(src)[m
+[32m+[m[32m {[m[41m [m
+[32m+[m[32m if(this.fireEvent('beforeloadcanvas', this, src) != false){[m
+[32m+[m[41m [m
+[32m+[m[32m this.reset();[m
+[32m+[m[41m [m
+[32m+[m[32m this.imageEl = document.createElement('img');[m
+[32m+[m[41m [m
+[32m+[m[32m var _this = this;[m
+[32m+[m[41m [m
+[32m+[m[32m this.imageEl.addEventListener("load", function(){ _this.onLoadCanvas(); });[m
+[32m+[m[41m [m
+[32m+[m[32m this.imageEl.src = src;[m
+[32m+[m[32m }[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m onLoadCanvas : function()[m
+[32m+[m[32m {[m[41m [m
+[32m+[m[32m this.imageEl.OriginWidth = this.imageEl.naturalWidth || this.imageEl.width;[m
+[32m+[m[32m this.imageEl.OriginHeight = this.imageEl.naturalHeight || this.imageEl.height;[m
+[32m+[m
+[32m+[m[32m if(this.fireEvent('loadcanvas', this, this.imageEl) != false){[m
+[32m+[m[41m [m
+[32m+[m[32m this.bodyEl.un('click', this.beforeSelectFile, this);[m
+[32m+[m[41m [m
+[32m+[m[32m this.notifyEl.hide();[m
+[32m+[m[32m this.thumbEl.show();[m
+[32m+[m[32m this.footerEl.show();[m
+[32m+[m[41m [m
+[32m+[m[32m this.baseRotateLevel();[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.isDocument){[m
+[32m+[m[32m this.setThumbBoxSize();[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.setThumbBoxPosition();[m
+[32m+[m[41m [m
+[32m+[m[32m this.baseScaleLevel();[m
+[32m+[m[41m [m
+[32m+[m[32m this.draw();[m
+[32m+[m[41m [m
+[32m+[m[32m this.resize();[m
+[32m+[m[41m [m
+[32m+[m[32m this.canvasLoaded = true;[m
+[32m+[m[41m [m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.loadMask){[m
+[32m+[m[32m this.maskEl.unmask();[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m setCanvasPosition : function()[m
+[32m+[m[32m {[m[41m [m
+[32m+[m[32m if(!this.canvasEl){[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m var pw = Math.ceil((this.bodyEl.getWidth() - this.canvasEl.width) / 2);[m
+[32m+[m[32m var ph = Math.ceil((this.bodyEl.getHeight() - this.canvasEl.height) / 2);[m
+[32m+[m[41m [m
+[32m+[m[32m this.previewEl.setLeft(pw);[m
+[32m+[m[32m this.previewEl.setTop(ph);[m
+[32m+[m[41m [m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m onMouseDown : function(e)[m
+[32m+[m[32m {[m[41m [m
+[32m+[m[32m e.stopEvent();[m
+[32m+[m[41m [m
+[32m+[m[32m this.dragable = true;[m
+[32m+[m[32m this.pinching = false;[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.isDocument && (this.canvasEl.width < this.thumbEl.getWidth() || this.canvasEl.height < this.thumbEl.getHeight())){[m
+[32m+[m[32m this.dragable = false;[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.mouseX = Roo.isTouch ? e.browserEvent.touches[0].pageX : e.getPageX();[m
+[32m+[m[32m this.mouseY = Roo.isTouch ? e.browserEvent.touches[0].pageY : e.getPageY();[m
+[32m+[m[41m [m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m onMouseMove : function(e)[m
+[32m+[m[32m {[m[41m [m
+[32m+[m[32m e.stopEvent();[m
+[32m+[m[41m [m
+[32m+[m[32m if(!this.canvasLoaded){[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if (!this.dragable){[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m var minX = Math.ceil(this.thumbEl.getLeft(true));[m
+[32m+[m[32m var minY = Math.ceil(this.thumbEl.getTop(true));[m
+[32m+[m[41m [m
+[32m+[m[32m var maxX = Math.ceil(minX + this.thumbEl.getWidth() - this.canvasEl.width);[m
+[32m+[m[32m var maxY = Math.ceil(minY + this.thumbEl.getHeight() - this.canvasEl.height);[m
+[32m+[m[41m [m
+[32m+[m[32m var x = Roo.isTouch ? e.browserEvent.touches[0].pageX : e.getPageX();[m
+[32m+[m[32m var y = Roo.isTouch ? e.browserEvent.touches[0].pageY : e.getPageY();[m
+[32m+[m[41m [m
+[32m+[m[32m x = x - this.mouseX;[m
+[32m+[m[32m y = y - this.mouseY;[m
+[32m+[m[41m [m
+[32m+[m[32m var bgX = Math.ceil(x + this.previewEl.getLeft(true));[m
+[32m+[m[32m var bgY = Math.ceil(y + this.previewEl.getTop(true));[m
+[32m+[m[41m [m
+[32m+[m[32m bgX = (minX < bgX) ? minX : ((maxX > bgX) ? maxX : bgX);[m
+[32m+[m[32m bgY = (minY < bgY) ? minY : ((maxY > bgY) ? maxY : bgY);[m
+[32m+[m[41m [m
+[32m+[m[32m this.previewEl.setLeft(bgX);[m
+[32m+[m[32m this.previewEl.setTop(bgY);[m
+[32m+[m[41m [m
+[32m+[m[32m this.mouseX = Roo.isTouch ? e.browserEvent.touches[0].pageX : e.getPageX();[m
+[32m+[m[32m this.mouseY = Roo.isTouch ? e.browserEvent.touches[0].pageY : e.getPageY();[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m onMouseUp : function(e)[m
+[32m+[m[32m {[m[41m [m
+[32m+[m[32m e.stopEvent();[m
+[32m+[m[41m [m
+[32m+[m[32m this.dragable = false;[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m onMouseWheel : function(e)[m
+[32m+[m[32m {[m[41m [m
+[32m+[m[32m e.stopEvent();[m
+[32m+[m[41m [m
+[32m+[m[32m this.startScale = this.scale;[m
+[32m+[m[41m [m
+[32m+[m[32m this.scale = (e.getWheelDelta() == 1) ? (this.scale + 1) : (this.scale - 1);[m
+[32m+[m[41m [m
+[32m+[m[32m if(!this.zoomable()){[m
+[32m+[m[32m this.scale = this.startScale;[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.draw();[m
+[32m+[m[41m [m
+[32m+[m[32m return;[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m zoomable : function()[m
+[32m+[m[32m {[m
+[32m+[m[32m var minScale = this.thumbEl.getWidth() / this.minWidth;[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.minWidth < this.minHeight){[m
+[32m+[m[32m minScale = this.thumbEl.getHeight() / this.minHeight;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m var width = Math.ceil(this.imageEl.OriginWidth * this.getScaleLevel() / minScale);[m
+[32m+[m[32m var height = Math.ceil(this.imageEl.OriginHeight * this.getScaleLevel() / minScale);[m
+[32m+[m[41m [m
+[32m+[m[32m if([m
+[32m+[m[32m this.isDocument &&[m
+[32m+[m[32m (this.rotate == 0 || this.rotate == 180) &&[m[41m [m
+[32m+[m[32m ([m
+[32m+[m[32m width > this.imageEl.OriginWidth ||[m[41m [m
+[32m+[m[32m height > this.imageEl.OriginHeight ||[m
+[32m+[m[32m (width < this.minWidth && height < this.minHeight)[m
+[32m+[m[32m )[m
+[32m+[m[32m ){[m
+[32m+[m[32m return false;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if([m
+[32m+[m[32m this.isDocument &&[m
+[32m+[m[32m (this.rotate == 90 || this.rotate == 270) &&[m[41m [m
+[32m+[m[32m ([m
+[32m+[m[32m width > this.imageEl.OriginWidth ||[m[41m [m
+[32m+[m[32m height > this.imageEl.OriginHeight ||[m
+[32m+[m[32m (width < this.minHeight && height < this.minWidth)[m
+[32m+[m[32m )[m
+[32m+[m[32m ){[m
+[32m+[m[32m return false;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if([m
+[32m+[m[32m !this.isDocument &&[m
+[32m+[m[32m (this.rotate == 0 || this.rotate == 180) &&[m[41m [m
+[32m+[m[32m ([m
+[32m+[m[32m width < this.minWidth ||[m[41m [m
+[32m+[m[32m width > this.imageEl.OriginWidth ||[m[41m [m
+[32m+[m[32m height < this.minHeight ||[m[41m [m
+[32m+[m[32m height > this.imageEl.OriginHeight[m
+[32m+[m[32m )[m
+[32m+[m[32m ){[m
+[32m+[m[32m return false;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if([m
+[32m+[m[32m !this.isDocument &&[m
+[32m+[m[32m (this.rotate == 90 || this.rotate == 270) &&[m[41m [m
+[32m+[m[32m ([m
+[32m+[m[32m width < this.minHeight ||[m[41m [m
+[32m+[m[32m width > this.imageEl.OriginWidth ||[m[41m [m
+[32m+[m[32m height < this.minWidth ||[m[41m [m
+[32m+[m[32m height > this.imageEl.OriginHeight[m
+[32m+[m[32m )[m
+[32m+[m[32m ){[m
+[32m+[m[32m return false;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m return true;[m
+[32m+[m[41m [m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m onRotateLeft : function(e)[m
+[32m+[m[32m {[m[41m [m
+[32m+[m[32m if(!this.isDocument && (this.canvasEl.height < this.thumbEl.getWidth() || this.canvasEl.width < this.thumbEl.getHeight())){[m
+[32m+[m[41m [m
+[32m+[m[32m var minScale = this.thumbEl.getWidth() / this.minWidth;[m
+[32m+[m[41m [m
+[32m+[m[32m var bw = Math.ceil(this.canvasEl.width / this.getScaleLevel());[m
+[32m+[m[32m var bh = Math.ceil(this.canvasEl.height / this.getScaleLevel());[m
+[32m+[m[41m [m
+[32m+[m[32m this.startScale = this.scale;[m
+[32m+[m[41m [m
+[32m+[m[32m while (this.getScaleLevel() < minScale){[m
+[32m+[m[41m [m
+[32m+[m[32m this.scale = this.scale + 1;[m
+[32m+[m[41m [m
+[32m+[m[32m if(!this.zoomable()){[m
+[32m+[m[32m break;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if([m
+[32m+[m[32m Math.ceil(bw * this.getScaleLevel()) < this.thumbEl.getHeight() ||[m
+[32m+[m[32m Math.ceil(bh * this.getScaleLevel()) < this.thumbEl.getWidth()[m
+[32m+[m[32m ){[m
+[32m+[m[32m continue;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.rotate = (this.rotate < 90) ? 270 : this.rotate - 90;[m
+[32m+[m
+[32m+[m[32m this.draw();[m
+[32m+[m[41m [m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.scale = this.startScale;[m
+[32m+[m[41m [m
+[32m+[m[32m this.onRotateFail();[m
+[32m+[m[41m [m
+[32m+[m[32m return false;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.rotate = (this.rotate < 90) ? 270 : this.rotate - 90;[m
+[32m+[m
+[32m+[m[32m if(this.isDocument){[m
+[32m+[m[32m this.setThumbBoxSize();[m
+[32m+[m[32m this.setThumbBoxPosition();[m
+[32m+[m[32m this.setCanvasPosition();[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.draw();[m
+[32m+[m[41m [m
+[32m+[m[32m this.fireEvent('rotate', this, 'left');[m
+[32m+[m[41m [m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m onRotateRight : function(e)[m
+[32m+[m[32m {[m
+[32m+[m[32m if(!this.isDocument && (this.canvasEl.height < this.thumbEl.getWidth() || this.canvasEl.width < this.thumbEl.getHeight())){[m
+[32m+[m[41m [m
+[32m+[m[32m var minScale = this.thumbEl.getWidth() / this.minWidth;[m
+[32m+[m[41m [m
+[32m+[m[32m var bw = Math.ceil(this.canvasEl.width / this.getScaleLevel());[m
+[32m+[m[32m var bh = Math.ceil(this.canvasEl.height / this.getScaleLevel());[m
+[32m+[m[41m [m
+[32m+[m[32m this.startScale = this.scale;[m
+[32m+[m[41m [m
+[32m+[m[32m while (this.getScaleLevel() < minScale){[m
+[32m+[m[41m [m
+[32m+[m[32m this.scale = this.scale + 1;[m
+[32m+[m[41m [m
+[32m+[m[32m if(!this.zoomable()){[m
+[32m+[m[32m break;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if([m
+[32m+[m[32m Math.ceil(bw * this.getScaleLevel()) < this.thumbEl.getHeight() ||[m
+[32m+[m[32m Math.ceil(bh * this.getScaleLevel()) < this.thumbEl.getWidth()[m
+[32m+[m[32m ){[m
+[32m+[m[32m continue;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.rotate = (this.rotate > 180) ? 0 : this.rotate + 90;[m
+[32m+[m
+[32m+[m[32m this.draw();[m
+[32m+[m[41m [m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.scale = this.startScale;[m
+[32m+[m[41m [m
+[32m+[m[32m this.onRotateFail();[m
+[32m+[m[41m [m
+[32m+[m[32m return false;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.rotate = (this.rotate > 180) ? 0 : this.rotate + 90;[m
+[32m+[m
+[32m+[m[32m if(this.isDocument){[m
+[32m+[m[32m this.setThumbBoxSize();[m
+[32m+[m[32m this.setThumbBoxPosition();[m
+[32m+[m[32m this.setCanvasPosition();[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.draw();[m
+[32m+[m[41m [m
+[32m+[m[32m this.fireEvent('rotate', this, 'right');[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m onRotateFail : function()[m
+[32m+[m[32m {[m
+[32m+[m[32m this.errorEl.show(true);[m
+[32m+[m[41m [m
+[32m+[m[32m var _this = this;[m
+[32m+[m[41m [m
+[32m+[m[32m (function() { _this.errorEl.hide(true); }).defer(this.errorTimeout);[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m draw : function()[m
+[32m+[m[32m {[m
+[32m+[m[32m this.previewEl.dom.innerHTML = '';[m
+[32m+[m[41m [m
+[32m+[m[32m var canvasEl = document.createElement("canvas");[m
+[32m+[m[41m [m
+[32m+[m[32m var contextEl = canvasEl.getContext("2d");[m
+[32m+[m[41m [m
+[32m+[m[32m canvasEl.width = this.imageEl.OriginWidth * this.getScaleLevel();[m
+[32m+[m[32m canvasEl.height = this.imageEl.OriginWidth * this.getScaleLevel();[m
+[32m+[m[32m var center = this.imageEl.OriginWidth / 2;[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.imageEl.OriginWidth < this.imageEl.OriginHeight){[m
+[32m+[m[32m canvasEl.width = this.imageEl.OriginHeight * this.getScaleLevel();[m
+[32m+[m[32m canvasEl.height = this.imageEl.OriginHeight * this.getScaleLevel();[m
+[32m+[m[32m center = this.imageEl.OriginHeight / 2;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m contextEl.scale(this.getScaleLevel(), this.getScaleLevel());[m
+[32m+[m[41m [m
+[32m+[m[32m contextEl.translate(center, center);[m
+[32m+[m[32m contextEl.rotate(this.rotate * Math.PI / 180);[m
+[32m+[m
+[32m+[m[32m contextEl.drawImage(this.imageEl, 0, 0, this.imageEl.OriginWidth, this.imageEl.OriginHeight, center * -1, center * -1, this.imageEl.OriginWidth, this.imageEl.OriginHeight);[m
+[32m+[m[41m [m
+[32m+[m[32m this.canvasEl = document.createElement("canvas");[m
+[32m+[m[41m [m
+[32m+[m[32m this.contextEl = this.canvasEl.getContext("2d");[m
+[32m+[m[41m [m
+[32m+[m[32m switch (this.rotate) {[m
+[32m+[m[32m case 0 :[m
+[32m+[m[41m [m
+[32m+[m[32m this.canvasEl.width = this.imageEl.OriginWidth * this.getScaleLevel();[m
+[32m+[m[32m this.canvasEl.height = this.imageEl.OriginHeight * this.getScaleLevel();[m
+[32m+[m[41m [m
+[32m+[m[32m this.contextEl.drawImage(canvasEl, 0, 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);[m
+[32m+[m[41m [m
+[32m+[m[32m break;[m
+[32m+[m[32m case 90 :[m[41m [m
+[32m+[m[41m [m
+[32m+[m[32m this.canvasEl.width = this.imageEl.OriginHeight * this.getScaleLevel();[m
+[32m+[m[32m this.canvasEl.height = this.imageEl.OriginWidth * this.getScaleLevel();[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){[m
+[32m+[m[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);[m
+[32m+[m[32m break;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.contextEl.drawImage(canvasEl, 0, 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);[m
+[32m+[m[41m [m
+[32m+[m[32m break;[m
+[32m+[m[32m case 180 :[m
+[32m+[m[41m [m
+[32m+[m[32m this.canvasEl.width = this.imageEl.OriginWidth * this.getScaleLevel();[m
+[32m+[m[32m this.canvasEl.height = this.imageEl.OriginHeight * this.getScaleLevel();[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){[m
+[32m+[m[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);[m
+[32m+[m[32m break;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[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);[m
+[32m+[m[41m [m
+[32m+[m[32m break;[m
+[32m+[m[32m case 270 :[m
+[32m+[m[41m [m
+[32m+[m[32m this.canvasEl.width = this.imageEl.OriginHeight * this.getScaleLevel();[m
+[32m+[m[32m this.canvasEl.height = this.imageEl.OriginWidth * this.getScaleLevel();[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){[m
+[32m+[m[32m this.contextEl.drawImage(canvasEl, 0, 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);[m
+[32m+[m[32m break;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[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);[m
+[32m+[m[41m [m
+[32m+[m[32m break;[m
+[32m+[m[32m default :[m[41m [m
+[32m+[m[32m break;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.previewEl.appendChild(this.canvasEl);[m
+[32m+[m[41m [m
+[32m+[m[32m this.setCanvasPosition();[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m crop : function()[m
+[32m+[m[32m {[m
+[32m+[m[32m if(!this.canvasLoaded){[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m var imageCanvas = document.createElement("canvas");[m
+[32m+[m[41m [m
+[32m+[m[32m var imageContext = imageCanvas.getContext("2d");[m
+[32m+[m[41m [m
+[32m+[m[32m imageCanvas.width = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? this.imageEl.OriginWidth : this.imageEl.OriginHeight;[m
+[32m+[m[32m imageCanvas.height = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? this.imageEl.OriginWidth : this.imageEl.OriginHeight;[m
+[32m+[m[41m [m
+[32m+[m[32m var center = imageCanvas.width / 2;[m
+[32m+[m[41m [m
+[32m+[m[32m imageContext.translate(center, center);[m
+[32m+[m[41m [m
+[32m+[m[32m imageContext.rotate(this.rotate * Math.PI / 180);[m
+[32m+[m[41m [m
+[32m+[m[32m imageContext.drawImage(this.imageEl, 0, 0, this.imageEl.OriginWidth, this.imageEl.OriginHeight, center * -1, center * -1, this.imageEl.OriginWidth, this.imageEl.OriginHeight);[m
+[32m+[m[41m [m
+[32m+[m[32m var canvas = document.createElement("canvas");[m
+[32m+[m[41m [m
+[32m+[m[32m var context = canvas.getContext("2d");[m
+[32m+[m[41m [m
+[32m+[m[32m canvas.width = this.minWidth;[m
+[32m+[m[32m canvas.height = this.minHeight;[m
+[32m+[m
+[32m+[m[32m switch (this.rotate) {[m
+[32m+[m[32m case 0 :[m
+[32m+[m[41m [m
+[32m+[m[32m var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getWidth() / this.getScaleLevel());[m
+[32m+[m[32m var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getHeight() / this.getScaleLevel());[m
+[32m+[m[41m [m
+[32m+[m[32m var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());[m
+[32m+[m[32m var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());[m
+[32m+[m[41m [m
+[32m+[m[32m var targetWidth = this.minWidth - 2 * x;[m
+[32m+[m[32m var targetHeight = this.minHeight - 2 * y;[m
+[32m+[m[41m [m
+[32m+[m[32m var scale = 1;[m
+[32m+[m[41m [m
+[32m+[m[32m if((x == 0 && y == 0) || (x == 0 && y > 0)){[m
+[32m+[m[32m scale = targetWidth / width;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if(x > 0 && y == 0){[m
+[32m+[m[32m scale = targetHeight / height;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if(x > 0 && y > 0){[m
+[32m+[m[32m scale = targetWidth / width;[m
+[32m+[m[41m [m
+[32m+[m[32m if(width < height){[m
+[32m+[m[32m scale = targetHeight / height;[m
+[32m+[m[32m }[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m context.scale(scale, scale);[m
+[32m+[m[41m [m
+[32m+[m[32m var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));[m
+[32m+[m[32m var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));[m
+[32m+[m
+[32m+[m[32m sx = sx < 0 ? 0 : (sx / this.getScaleLevel());[m
+[32m+[m[32m sy = sy < 0 ? 0 : (sy / this.getScaleLevel());[m
+[32m+[m
+[32m+[m[32m context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);[m
+[32m+[m[41m [m
+[32m+[m[32m break;[m
+[32m+[m[32m case 90 :[m[41m [m
+[32m+[m[41m [m
+[32m+[m[32m var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getWidth() / this.getScaleLevel());[m
+[32m+[m[32m var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getHeight() / this.getScaleLevel());[m
+[32m+[m[41m [m
+[32m+[m[32m var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());[m
+[32m+[m[32m var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());[m
+[32m+[m[41m [m
+[32m+[m[32m var targetWidth = this.minWidth - 2 * x;[m
+[32m+[m[32m var targetHeight = this.minHeight - 2 * y;[m
+[32m+[m[41m [m
+[32m+[m[32m var scale = 1;[m
+[32m+[m[41m [m
+[32m+[m[32m if((x == 0 && y == 0) || (x == 0 && y > 0)){[m
+[32m+[m[32m scale = targetWidth / width;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if(x > 0 && y == 0){[m
+[32m+[m[32m scale = targetHeight / height;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if(x > 0 && y > 0){[m
+[32m+[m[32m scale = targetWidth / width;[m
+[32m+[m[41m [m
+[32m+[m[32m if(width < height){[m
+[32m+[m[32m scale = targetHeight / height;[m
+[32m+[m[32m }[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m context.scale(scale, scale);[m
+[32m+[m[41m [m
+[32m+[m[32m var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));[m
+[32m+[m[32m var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));[m
+[32m+[m
+[32m+[m[32m sx = sx < 0 ? 0 : (sx / this.getScaleLevel());[m
+[32m+[m[32m sy = sy < 0 ? 0 : (sy / this.getScaleLevel());[m
+[32m+[m[41m [m
+[32m+[m[32m sx += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight) : 0;[m
+[32m+[m[41m [m
+[32m+[m[32m context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);[m
+[32m+[m[41m [m
+[32m+[m[32m break;[m
+[32m+[m[32m case 180 :[m
+[32m+[m[41m [m
+[32m+[m[32m var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getWidth() / this.getScaleLevel());[m
+[32m+[m[32m var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getHeight() / this.getScaleLevel());[m
+[32m+[m[41m [m
+[32m+[m[32m var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());[m
+[32m+[m[32m var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());[m
+[32m+[m[41m [m
+[32m+[m[32m var targetWidth = this.minWidth - 2 * x;[m
+[32m+[m[32m var targetHeight = this.minHeight - 2 * y;[m
+[32m+[m[41m [m
+[32m+[m[32m var scale = 1;[m
+[32m+[m[41m [m
+[32m+[m[32m if((x == 0 && y == 0) || (x == 0 && y > 0)){[m
+[32m+[m[32m scale = targetWidth / width;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if(x > 0 && y == 0){[m
+[32m+[m[32m scale = targetHeight / height;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if(x > 0 && y > 0){[m
+[32m+[m[32m scale = targetWidth / width;[m
+[32m+[m[41m [m
+[32m+[m[32m if(width < height){[m
+[32m+[m[32m scale = targetHeight / height;[m
+[32m+[m[32m }[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m context.scale(scale, scale);[m
+[32m+[m[41m [m
+[32m+[m[32m var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));[m
+[32m+[m[32m var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));[m
+[32m+[m
+[32m+[m[32m sx = sx < 0 ? 0 : (sx / this.getScaleLevel());[m
+[32m+[m[32m sy = sy < 0 ? 0 : (sy / this.getScaleLevel());[m
+[32m+[m
+[32m+[m[32m sx += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? 0 : Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight);[m
+[32m+[m[32m sy += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight) : 0;[m
+[32m+[m[41m [m
+[32m+[m[32m context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);[m
+[32m+[m[41m [m
+[32m+[m[32m break;[m
+[32m+[m[32m case 270 :[m
+[32m+[m[41m [m
+[32m+[m[32m var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getWidth() / this.getScaleLevel());[m
+[32m+[m[32m var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getHeight() / this.getScaleLevel());[m
+[32m+[m[41m [m
+[32m+[m[32m var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());[m
+[32m+[m[32m var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());[m
+[32m+[m[41m [m
+[32m+[m[32m var targetWidth = this.minWidth - 2 * x;[m
+[32m+[m[32m var targetHeight = this.minHeight - 2 * y;[m
+[32m+[m[41m [m
+[32m+[m[32m var scale = 1;[m
+[32m+[m[41m [m
+[32m+[m[32m if((x == 0 && y == 0) || (x == 0 && y > 0)){[m
+[32m+[m[32m scale = targetWidth / width;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if(x > 0 && y == 0){[m
+[32m+[m[32m scale = targetHeight / height;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if(x > 0 && y > 0){[m
+[32m+[m[32m scale = targetWidth / width;[m
+[32m+[m[41m [m
+[32m+[m[32m if(width < height){[m
+[32m+[m[32m scale = targetHeight / height;[m
+[32m+[m[32m }[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m context.scale(scale, scale);[m
+[32m+[m[41m [m
+[32m+[m[32m var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));[m
+[32m+[m[32m var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));[m
+[32m+[m
+[32m+[m[32m sx = sx < 0 ? 0 : (sx / this.getScaleLevel());[m
+[32m+[m[32m sy = sy < 0 ? 0 : (sy / this.getScaleLevel());[m
+[32m+[m[41m [m
+[32m+[m[32m sy += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? 0 : Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight);[m
+[32m+[m[41m [m
+[32m+[m[32m context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);[m
+[32m+[m[41m [m
+[32m+[m[32m break;[m
+[32m+[m[32m default :[m[41m [m
+[32m+[m[32m break;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.cropData = canvas.toDataURL(this.cropType);[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.fireEvent('crop', this, this.cropData) !== false){[m
+[32m+[m[32m this.process(this.file, this.cropData);[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m return;[m
+[32m+[m[41m [m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m setThumbBoxSize : function()[m
+[32m+[m[32m {[m
+[32m+[m[32m var width, height;[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.isDocument && typeof(this.imageEl) != 'undefined'){[m
+[32m+[m[32m width = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.max(this.minWidth, this.minHeight) : Math.min(this.minWidth, this.minHeight);[m
+[32m+[m[32m height = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.min(this.minWidth, this.minHeight) : Math.max(this.minWidth, this.minHeight);[m
+[32m+[m[41m [m
+[32m+[m[32m this.minWidth = width;[m
+[32m+[m[32m this.minHeight = height;[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.rotate == 90 || this.rotate == 270){[m
+[32m+[m[32m this.minWidth = height;[m
+[32m+[m[32m this.minHeight = width;[m
+[32m+[m[32m }[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m height = 300;[m
+[32m+[m[32m width = Math.ceil(this.minWidth * height / this.minHeight);[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.minWidth > this.minHeight){[m
+[32m+[m[32m width = 300;[m
+[32m+[m[32m height = Math.ceil(this.minHeight * width / this.minWidth);[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.thumbEl.setStyle({[m
+[32m+[m[32m width : width + 'px',[m
+[32m+[m[32m height : height + 'px'[m
+[32m+[m[32m });[m
+[32m+[m
+[32m+[m[32m return;[m
+[32m+[m[41m [m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m setThumbBoxPosition : function()[m
+[32m+[m[32m {[m
+[32m+[m[32m var x = Math.ceil((this.bodyEl.getWidth() - this.thumbEl.getWidth()) / 2 );[m
+[32m+[m[32m var y = Math.ceil((this.bodyEl.getHeight() - this.thumbEl.getHeight()) / 2);[m
+[32m+[m[41m [m
+[32m+[m[32m this.thumbEl.setLeft(x);[m
+[32m+[m[32m this.thumbEl.setTop(y);[m
+[32m+[m[41m [m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m baseRotateLevel : function()[m
+[32m+[m[32m {[m
+[32m+[m[32m this.baseRotate = 1;[m
+[32m+[m[41m [m
+[32m+[m[32m if([m
+[32m+[m[32m typeof(this.exif) != 'undefined' &&[m
+[32m+[m[32m typeof(this.exif[Roo.dialog.UploadCropbox['tags']['Orientation']]) != 'undefined' &&[m
+[32m+[m[32m [1, 3, 6, 8].indexOf(this.exif[Roo.dialog.UploadCropbox['tags']['Orientation']]) != -1[m
+[32m+[m[32m ){[m
+[32m+[m[32m this.baseRotate = this.exif[Roo.dialog.UploadCropbox['tags']['Orientation']];[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.rotate = Roo.dialog.UploadCropbox['Orientation'][this.baseRotate];[m
+[32m+[m[41m [m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m baseScaleLevel : function()[m
+[32m+[m[32m {[m
+[32m+[m[32m var width, height;[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.isDocument){[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.baseRotate == 6 || this.baseRotate == 8){[m
+[32m+[m[41m [m
+[32m+[m[32m height = this.thumbEl.getHeight();[m
+[32m+[m[32m this.baseScale = height / this.imageEl.OriginWidth;[m
+[32m+[m
+[32m+[m[32m if(this.imageEl.OriginHeight * this.baseScale > this.thumbEl.getWidth()){[m
+[32m+[m[32m width = this.thumbEl.getWidth();[m
+[32m+[m[32m this.baseScale = width / this.imageEl.OriginHeight;[m
+[32m+[m[32m }[m
+[32m+[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m
+[32m+[m[32m height = this.thumbEl.getHeight();[m
+[32m+[m[32m this.baseScale = height / this.imageEl.OriginHeight;[m
+[32m+[m
+[32m+[m[32m if(this.imageEl.OriginWidth * this.baseScale > this.thumbEl.getWidth()){[m
+[32m+[m[32m width = this.thumbEl.getWidth();[m
+[32m+[m[32m this.baseScale = width / this.imageEl.OriginWidth;[m
+[32m+[m[32m }[m
+[32m+[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.baseRotate == 6 || this.baseRotate == 8){[m
+[32m+[m[41m [m
+[32m+[m[32m width = this.thumbEl.getHeight();[m
+[32m+[m[32m this.baseScale = width / this.imageEl.OriginHeight;[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.imageEl.OriginHeight * this.baseScale < this.thumbEl.getWidth()){[m
+[32m+[m[32m height = this.thumbEl.getWidth();[m
+[32m+[m[32m this.baseScale = height / this.imageEl.OriginHeight;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){[m
+[32m+[m[32m height = this.thumbEl.getWidth();[m
+[32m+[m[32m this.baseScale = height / this.imageEl.OriginHeight;[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.imageEl.OriginWidth * this.baseScale < this.thumbEl.getHeight()){[m
+[32m+[m[32m width = this.thumbEl.getHeight();[m
+[32m+[m[32m this.baseScale = width / this.imageEl.OriginWidth;[m
+[32m+[m[32m }[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m width = this.thumbEl.getWidth();[m
+[32m+[m[32m this.baseScale = width / this.imageEl.OriginWidth;[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.imageEl.OriginHeight * this.baseScale < this.thumbEl.getHeight()){[m
+[32m+[m[32m height = this.thumbEl.getHeight();[m
+[32m+[m[32m this.baseScale = height / this.imageEl.OriginHeight;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){[m
+[32m+[m[41m [m
+[32m+[m[32m height = this.thumbEl.getHeight();[m
+[32m+[m[32m this.baseScale = height / this.imageEl.OriginHeight;[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.imageEl.OriginWidth * this.baseScale < this.thumbEl.getWidth()){[m
+[32m+[m[32m width = this.thumbEl.getWidth();[m
+[32m+[m[32m this.baseScale = width / this.imageEl.OriginWidth;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m return;[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m getScaleLevel : function()[m
+[32m+[m[32m {[m
+[32m+[m[32m return this.baseScale * Math.pow(1.1, this.scale);[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m onTouchStart : function(e)[m
+[32m+[m[32m {[m
+[32m+[m[32m if(!this.canvasLoaded){[m
+[32m+[m[32m this.beforeSelectFile(e);[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m var touches = e.browserEvent.touches;[m
+[32m+[m[41m [m
+[32m+[m[32m if(!touches){[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if(touches.length == 1){[m
+[32m+[m[32m this.onMouseDown(e);[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if(touches.length != 2){[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m var coords = [];[m
+[32m+[m[41m [m
+[32m+[m[32m for(var i = 0, finger; finger = touches[i]; i++){[m
+[32m+[m[32m coords.push(finger.pageX, finger.pageY);[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m var x = Math.pow(coords[0] - coords[2], 2);[m
+[32m+[m[32m var y = Math.pow(coords[1] - coords[3], 2);[m
+[32m+[m[41m [m
+[32m+[m[32m this.startDistance = Math.sqrt(x + y);[m
+[32m+[m[41m [m
+[32m+[m[32m this.startScale = this.scale;[m
+[32m+[m[41m [m
+[32m+[m[32m this.pinching = true;[m
+[32m+[m[32m this.dragable = false;[m
+[32m+[m[41m [m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m onTouchMove : function(e)[m
+[32m+[m[32m {[m
+[32m+[m[32m if(!this.pinching && !this.dragable){[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m var touches = e.browserEvent.touches;[m
+[32m+[m[41m [m
+[32m+[m[32m if(!touches){[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.dragable){[m
+[32m+[m[32m this.onMouseMove(e);[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m var coords = [];[m
+[32m+[m[41m [m
+[32m+[m[32m for(var i = 0, finger; finger = touches[i]; i++){[m
+[32m+[m[32m coords.push(finger.pageX, finger.pageY);[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m var x = Math.pow(coords[0] - coords[2], 2);[m
+[32m+[m[32m var y = Math.pow(coords[1] - coords[3], 2);[m
+[32m+[m[41m [m
+[32m+[m[32m this.endDistance = Math.sqrt(x + y);[m
+[32m+[m[41m [m
+[32m+[m[32m this.scale = this.startScale + Math.floor(Math.log(this.endDistance / this.startDistance) / Math.log(1.1));[m
+[32m+[m[41m [m
+[32m+[m[32m if(!this.zoomable()){[m
+[32m+[m[32m this.scale = this.startScale;[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.draw();[m
+[32m+[m[41m [m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m onTouchEnd : function(e)[m
+[32m+[m[32m {[m
+[32m+[m[32m this.pinching = false;[m
+[32m+[m[32m this.dragable = false;[m
+[32m+[m[41m [m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m process : function(file, crop)[m
+[32m+[m[32m {[m
+[32m+[m[32m if(this.loadMask){[m
+[32m+[m[32m this.maskEl.mask(this.loadingText);[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.xhr = new XMLHttpRequest();[m
+[32m+[m[41m [m
+[32m+[m[32m file.xhr = this.xhr;[m
+[32m+[m
+[32m+[m[32m this.xhr.open(this.method, this.url, true);[m
+[32m+[m[41m [m
+[32m+[m[32m var headers = {[m
+[32m+[m[32m "Accept": "application/json",[m
+[32m+[m[32m "Cache-Control": "no-cache",[m
+[32m+[m[32m "X-Requested-With": "XMLHttpRequest"[m
+[32m+[m[32m };[m
+[32m+[m[41m [m
+[32m+[m[32m for (var headerName in headers) {[m
+[32m+[m[32m var headerValue = headers[headerName];[m
+[32m+[m[32m if (headerValue) {[m
+[32m+[m[32m this.xhr.setRequestHeader(headerName, headerValue);[m
+[32m+[m[32m }[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m var _this = this;[m
+[32m+[m[41m [m
+[32m+[m[32m this.xhr.onload = function()[m
+[32m+[m[32m {[m
+[32m+[m[32m _this.xhrOnLoad(_this.xhr);[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.xhr.onerror = function()[m
+[32m+[m[32m {[m
+[32m+[m[32m _this.xhrOnError(_this.xhr);[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m var formData = new FormData();[m
+[32m+[m
+[32m+[m[32m formData.append('returnHTML', 'NO');[m
+[32m+[m[41m [m
+[32m+[m[32m if(crop){[m
+[32m+[m[32m formData.append('crop', crop);[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if(typeof(file) != 'undefined' && (typeof(file.id) == 'undefined' || file.id * 1 < 1)){[m
+[32m+[m[32m formData.append(this.paramName, file, file.name);[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if(typeof(file.filename) != 'undefined'){[m
+[32m+[m[32m formData.append('filename', file.filename);[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if(typeof(file.mimetype) != 'undefined'){[m
+[32m+[m[32m formData.append('mimetype', file.mimetype);[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.fireEvent('arrange', this, formData) != false){[m
+[32m+[m[32m this.xhr.send(formData);[m
+[32m+[m[32m };[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m xhrOnLoad : function(xhr)[m
+[32m+[m[32m {[m
+[32m+[m[32m if(this.loadMask){[m
+[32m+[m[32m this.maskEl.unmask();[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if (xhr.readyState !== 4) {[m
+[32m+[m[32m this.fireEvent('exception', this, xhr);[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m
+[32m+[m[32m var response = Roo.decode(xhr.responseText);[m
+[32m+[m[41m [m
+[32m+[m[32m if(!response.success){[m
+[32m+[m[32m this.fireEvent('exception', this, xhr);[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m var response = Roo.decode(xhr.responseText);[m
+[32m+[m[41m [m
+[32m+[m[32m this.fireEvent('upload', this, response);[m
+[32m+[m[41m [m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m xhrOnError : function()[m
+[32m+[m[32m {[m
+[32m+[m[32m if(this.loadMask){[m
+[32m+[m[32m this.maskEl.unmask();[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m Roo.log('xhr on error');[m
+[32m+[m[41m [m
+[32m+[m[32m var response = Roo.decode(xhr.responseText);[m
+[32m+[m[41m [m
+[32m+[m[32m Roo.log(response);[m
+[32m+[m[41m [m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m prepare : function(file)[m
+[32m+[m[32m {[m[41m [m
+[32m+[m[32m if(this.loadMask){[m
+[32m+[m[32m this.maskEl.mask(this.loadingText);[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.file = false;[m
+[32m+[m[32m this.exif = {};[m
+[32m+[m[41m [m
+[32m+[m[32m if(typeof(file) === 'string'){[m
+[32m+[m[32m this.loadCanvas(file);[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if(!file || !this.urlAPI){[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m this.file = file;[m
+[32m+[m[32m this.cropType = file.type;[m
+[32m+[m[41m [m
+[32m+[m[32m var _this = this;[m
+[32m+[m[41m [m
+[32m+[m[32m if(this.fireEvent('prepare', this, this.file) != false){[m
+[32m+[m[41m [m
+[32m+[m[32m var reader = new FileReader();[m
+[32m+[m[41m [m
+[32m+[m[32m reader.onload = function (e) {[m
+[32m+[m[32m if (e.target.error) {[m
+[32m+[m[32m Roo.log(e.target.error);[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m var buffer = e.target.result,[m
+[32m+[m[32m dataView = new DataView(buffer),[m
+[32m+[m[32m offset = 2,[m
+[32m+[m[32m maxOffset = dataView.byteLength - 4,[m
+[32m+[m[32m markerBytes,[m
+[32m+[m[32m markerLength;[m
+[32m+[m[41m [m
+[32m+[m[32m if (dataView.getUint16(0) === 0xffd8) {[m
+[32m+[m[32m while (offset < maxOffset) {[m
+[32m+[m[32m markerBytes = dataView.getUint16(offset);[m
+[32m+[m[41m [m
+[32m+[m[32m if ((markerBytes >= 0xffe0 && markerBytes <= 0xffef) || markerBytes === 0xfffe) {[m
+[32m+[m[32m markerLength = dataView.getUint16(offset + 2) + 2;[m
+[32m+[m[32m if (offset + markerLength > dataView.byteLength) {[m
+[32m+[m[32m Roo.log('Invalid meta data: Invalid segment size.');[m
+[32m+[m[32m break;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if(markerBytes == 0xffe1){[m
+[32m+[m[32m _this.parseExifData([m
+[32m+[m[32m dataView,[m
+[32m+[m[32m offset,[m
+[32m+[m[32m markerLength[m
+[32m+[m[32m );[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m offset += markerLength;[m
+[32m+[m[41m [m
+[32m+[m[32m continue;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m break;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m var url = _this.urlAPI.createObjectURL(_this.file);[m
+[32m+[m[41m [m
+[32m+[m[32m _this.loadCanvas(url);[m
+[32m+[m[41m [m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m reader.readAsArrayBuffer(this.file);[m
+[32m+[m[41m [m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m parseExifData : function(dataView, offset, length)[m
+[32m+[m[32m {[m
+[32m+[m[32m var tiffOffset = offset + 10,[m
+[32m+[m[32m littleEndian,[m
+[32m+[m[32m dirOffset;[m
+[32m+[m[41m [m
+[32m+[m[32m if (dataView.getUint32(offset + 4) !== 0x45786966) {[m
+[32m+[m[32m // No Exif data, might be XMP data instead[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m // Check for the ASCII code for "Exif" (0x45786966):[m
+[32m+[m[32m if (dataView.getUint32(offset + 4) !== 0x45786966) {[m
+[32m+[m[32m // No Exif data, might be XMP data instead[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[32m if (tiffOffset + 8 > dataView.byteLength) {[m
+[32m+[m[32m Roo.log('Invalid Exif data: Invalid segment size.');[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[32m // Check for the two null bytes:[m
+[32m+[m[32m if (dataView.getUint16(offset + 8) !== 0x0000) {[m
+[32m+[m[32m Roo.log('Invalid Exif data: Missing byte alignment offset.');[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[32m // Check the byte alignment:[m
+[32m+[m[32m switch (dataView.getUint16(tiffOffset)) {[m
+[32m+[m[32m case 0x4949:[m
+[32m+[m[32m littleEndian = true;[m
+[32m+[m[32m break;[m
+[32m+[m[32m case 0x4D4D:[m
+[32m+[m[32m littleEndian = false;[m
+[32m+[m[32m break;[m
+[32m+[m[32m default:[m
+[32m+[m[32m Roo.log('Invalid Exif data: Invalid byte alignment marker.');[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[32m // Check for the TIFF tag marker (0x002A):[m
+[32m+[m[32m if (dataView.getUint16(tiffOffset + 2, littleEndian) !== 0x002A) {[m
+[32m+[m[32m Roo.log('Invalid Exif data: Missing TIFF marker.');[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[32m // Retrieve the directory offset bytes, usually 0x00000008 or 8 decimal:[m
+[32m+[m[32m dirOffset = dataView.getUint32(tiffOffset + 4, littleEndian);[m
+[32m+[m[41m [m
+[32m+[m[32m this.parseExifTags([m
+[32m+[m[32m dataView,[m
+[32m+[m[32m tiffOffset,[m
+[32m+[m[32m tiffOffset + dirOffset,[m
+[32m+[m[32m littleEndian[m
+[32m+[m[32m );[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m parseExifTags : function(dataView, tiffOffset, dirOffset, littleEndian)[m
+[32m+[m[32m {[m
+[32m+[m[32m var tagsNumber,[m
+[32m+[m[32m dirEndOffset,[m
+[32m+[m[32m i;[m
+[32m+[m[32m if (dirOffset + 6 > dataView.byteLength) {[m
+[32m+[m[32m Roo.log('Invalid Exif data: Invalid directory offset.');[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[32m tagsNumber = dataView.getUint16(dirOffset, littleEndian);[m
+[32m+[m[32m dirEndOffset = dirOffset + 2 + 12 * tagsNumber;[m
+[32m+[m[32m if (dirEndOffset + 4 > dataView.byteLength) {[m
+[32m+[m[32m Roo.log('Invalid Exif data: Invalid directory size.');[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[32m for (i = 0; i < tagsNumber; i += 1) {[m
+[32m+[m[32m this.parseExifTag([m
+[32m+[m[32m dataView,[m
+[32m+[m[32m tiffOffset,[m
+[32m+[m[32m dirOffset + 2 + 12 * i, // tag offset[m
+[32m+[m[32m littleEndian[m
+[32m+[m[32m );[m
+[32m+[m[32m }[m
+[32m+[m[32m // Return the offset to the next directory:[m
+[32m+[m[32m return dataView.getUint32(dirEndOffset, littleEndian);[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m parseExifTag : function (dataView, tiffOffset, offset, littleEndian)[m[41m [m
+[32m+[m[32m {[m
+[32m+[m[32m var tag = dataView.getUint16(offset, littleEndian);[m
+[32m+[m[41m [m
+[32m+[m[32m this.exif[tag] = this.getExifValue([m
+[32m+[m[32m dataView,[m
+[32m+[m[32m tiffOffset,[m
+[32m+[m[32m offset,[m
+[32m+[m[32m dataView.getUint16(offset + 2, littleEndian), // tag type[m
+[32m+[m[32m dataView.getUint32(offset + 4, littleEndian), // tag length[m
+[32m+[m[32m littleEndian[m
+[32m+[m[32m );[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m getExifValue : function (dataView, tiffOffset, offset, type, length, littleEndian)[m
+[32m+[m[32m {[m
+[32m+[m[32m var tagType = Roo.dialog.UploadCropbox.exifTagTypes[type],[m
+[32m+[m[32m tagSize,[m
+[32m+[m[32m dataOffset,[m
+[32m+[m[32m values,[m
+[32m+[m[32m i,[m
+[32m+[m[32m str,[m
+[32m+[m[32m c;[m
+[32m+[m[41m [m
+[32m+[m[32m if (!tagType) {[m
+[32m+[m[32m Roo.log('Invalid Exif data: Invalid tag type.');[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m tagSize = tagType.size * length;[m
+[32m+[m[32m // Determine if the value is contained in the dataOffset bytes,[m
+[32m+[m[32m // or if the value at the dataOffset is a pointer to the actual data:[m
+[32m+[m[32m dataOffset = tagSize > 4 ?[m
+[32m+[m[32m tiffOffset + dataView.getUint32(offset + 8, littleEndian) : (offset + 8);[m
+[32m+[m[32m if (dataOffset + tagSize > dataView.byteLength) {[m
+[32m+[m[32m Roo.log('Invalid Exif data: Invalid data offset.');[m
+[32m+[m[32m return;[m
+[32m+[m[32m }[m
+[32m+[m[32m if (length === 1) {[m
+[32m+[m[32m return tagType.getValue(dataView, dataOffset, littleEndian);[m
+[32m+[m[32m }[m
+[32m+[m[32m values = [];[m
+[32m+[m[32m for (i = 0; i < length; i += 1) {[m
+[32m+[m[32m values[i] = tagType.getValue(dataView, dataOffset + i * tagType.size, littleEndian);[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m if (tagType.ascii) {[m
+[32m+[m[32m str = '';[m
+[32m+[m[32m // Concatenate the chars:[m
+[32m+[m[32m for (i = 0; i < values.length; i += 1) {[m
+[32m+[m[32m c = values[i];[m
+[32m+[m[32m // Ignore the terminating NULL byte(s):[m
+[32m+[m[32m if (c === '\u0000') {[m
+[32m+[m[32m break;[m
+[32m+[m[32m }[m
+[32m+[m[32m str += c;[m
+[32m+[m[32m }[m
+[32m+[m[32m return str;[m
+[32m+[m[32m }[m
+[32m+[m[32m return values;[m
+[32m+[m[32m }[m
+[32m+[m[41m [m
+[32m+[m[32m});[m
+[32m+[m
+[32m+[m[32mRoo.apply(Roo.dialog.UploadCropbox, {[m
+[32m+[m[32m tags : {[m
+[32m+[m[32m 'Orientation': 0x0112[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m Orientation: {[m
+[32m+[m[32m 1: 0, //'top-left',[m
+[32m+[m[32m// 2: 'top-right',[m
+[32m+[m[32m 3: 180, //'bottom-right',[m
+[32m+[m[32m// 4: 'bottom-left',[m
+[32m+[m[32m// 5: 'left-top',[m
+[32m+[m[32m 6: 90, //'right-top',[m
+[32m+[m[32m// 7: 'right-bottom',[m
+[32m+[m[32m 8: 270 //'left-bottom'[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m exifTagTypes : {[m
+[32m+[m[32m // byte, 8-bit unsigned int:[m
+[32m+[m[32m 1: {[m
+[32m+[m[32m getValue: function (dataView, dataOffset) {[m
+[32m+[m[32m return dataView.getUint8(dataOffset);[m
+[32m+[m[32m },[m
+[32m+[m[32m size: 1[m
+[32m+[m[32m },[m
+[32m+[m[32m // ascii, 8-bit byte:[m
+[32m+[m[32m 2: {[m
+[32m+[m[32m getValue: function (dataView, dataOffset) {[m
+[32m+[m[32m return String.fromCharCode(dataView.getUint8(dataOffset));[m
+[32m+[m[32m },[m
+[32m+[m[32m size: 1,[m
+[32m+[m[32m ascii: true[m
+[32m+[m[32m },[m
+[32m+[m[32m // short, 16 bit int:[m
+[32m+[m[32m 3: {[m
+[32m+[m[32m getValue: function (dataView, dataOffset, littleEndian) {[m
+[32m+[m[32m return dataView.getUint16(dataOffset, littleEndian);[m
+[32m+[m[32m },[m
+[32m+[m[32m size: 2[m
+[32m+[m[32m },[m
+[32m+[m[32m // long, 32 bit int:[m
+[32m+[m[32m 4: {[m
+[32m+[m[32m getValue: function (dataView, dataOffset, littleEndian) {[m
+[32m+[m[32m return dataView.getUint32(dataOffset, littleEndian);[m
+[32m+[m[32m },[m
+[32m+[m[32m size: 4[m
+[32m+[m[32m },[m
+[32m+[m[32m // rational = two long values, first is numerator, second is denominator:[m
+[32m+[m[32m 5: {[m
+[32m+[m[32m getValue: function (dataView, dataOffset, littleEndian) {[m
+[32m+[m[32m return dataView.getUint32(dataOffset, littleEndian) /[m
+[32m+[m[32m dataView.getUint32(dataOffset + 4, littleEndian);[m
+[32m+[m[32m },[m
+[32m+[m[32m size: 8[m
+[32m+[m[32m },[m
+[32m+[m[32m // slong, 32 bit signed int:[m
+[32m+[m[32m 9: {[m
+[32m+[m[32m getValue: function (dataView, dataOffset, littleEndian) {[m
+[32m+[m[32m return dataView.getInt32(dataOffset, littleEndian);[m
+[32m+[m[32m },[m
+[32m+[m[32m size: 4[m
+[32m+[m[32m },[m
+[32m+[m[32m // srational, two slongs, first is numerator, second is denominator:[m
+[32m+[m[32m 10: {[m
+[32m+[m[32m getValue: function (dataView, dataOffset, littleEndian) {[m
+[32m+[m[32m return dataView.getInt32(dataOffset, littleEndian) /[m
+[32m+[m[32m dataView.getInt32(dataOffset + 4, littleEndian);[m
+[32m+[m[32m },[m
+[32m+[m[32m size: 8[m
+[32m+[m[32m }[m
+[32m+[m[32m },[m
+[32m+[m[41m [m
+[32m+[m[32m footer : {[m
+[32m+[m[32m STANDARD : [[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'div',[m
+[32m+[m[32m cls : 'btn-group roo-upload-cropbox-rotate-left',[m
+[32m+[m[32m action : 'rotate-left',[m
+[32m+[m[32m cn : [[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'button',[m
+[32m+[m[32m cls : 'btn btn-default',[m
+[32m+[m[32m html : ''[m
+[32m+[m[32m }[m
+[32m+[m[32m ][m
+[32m+[m[32m },[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'div',[m
+[32m+[m[32m cls : 'btn-group roo-upload-cropbox-picture',[m
+[32m+[m[32m action : 'picture',[m
+[32m+[m[32m cn : [[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'button',[m
+[32m+[m[32m cls : 'btn btn-default',[m
+[32m+[m[32m html : ''[m
+[32m+[m[32m }[m
+[32m+[m[32m ][m
+[32m+[m[32m },[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'div',[m
+[32m+[m[32m cls : 'btn-group roo-upload-cropbox-rotate-right',[m
+[32m+[m[32m action : 'rotate-right',[m
+[32m+[m[32m cn : [[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'button',[m
+[32m+[m[32m cls : 'btn btn-default',[m
+[32m+[m[32m html : ''[m
+[32m+[m[32m }[m
+[32m+[m[32m ][m
+[32m+[m[32m }[m
+[32m+[m[32m ],[m
+[32m+[m[32m DOCUMENT : [[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'div',[m
+[32m+[m[32m cls : 'btn-group roo-upload-cropbox-rotate-left',[m
+[32m+[m[32m action : 'rotate-left',[m
+[32m+[m[32m cn : [[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'button',[m
+[32m+[m[32m cls : 'btn btn-default',[m
+[32m+[m[32m html : ''[m
+[32m+[m[32m }[m
+[32m+[m[32m ][m
+[32m+[m[32m },[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'div',[m
+[32m+[m[32m cls : 'btn-group roo-upload-cropbox-download',[m
+[32m+[m[32m action : 'download',[m
+[32m+[m[32m cn : [[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'button',[m
+[32m+[m[32m cls : 'btn btn-default',[m
+[32m+[m[32m html : ''[m
+[32m+[m[32m }[m
+[32m+[m[32m ][m
+[32m+[m[32m },[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'div',[m
+[32m+[m[32m cls : 'btn-group roo-upload-cropbox-crop',[m
+[32m+[m[32m action : 'crop',[m
+[32m+[m[32m cn : [[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'button',[m
+[32m+[m[32m cls : 'btn btn-default',[m
+[32m+[m[32m html : ''[m
+[32m+[m[32m }[m
+[32m+[m[32m ][m
+[32m+[m[32m },[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'div',[m
+[32m+[m[32m cls : 'btn-group roo-upload-cropbox-trash',[m
+[32m+[m[32m action : 'trash',[m
+[32m+[m[32m cn : [[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'button',[m
+[32m+[m[32m cls : 'btn btn-default',[m
+[32m+[m[32m html : ''[m
+[32m+[m[32m }[m
+[32m+[m[32m ][m
+[32m+[m[32m },[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'div',[m
+[32m+[m[32m cls : 'btn-group roo-upload-cropbox-rotate-right',[m
+[32m+[m[32m action : 'rotate-right',[m
+[32m+[m[32m cn : [[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'button',[m
+[32m+[m[32m cls : 'btn btn-default',[m
+[32m+[m[32m html : ''[m
+[32m+[m[32m }[m
+[32m+[m[32m ][m
+[32m+[m[32m }[m
+[32m+[m[32m ],[m
+[32m+[m[32m ROTATOR : [[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'div',[m
+[32m+[m[32m cls : 'btn-group roo-upload-cropbox-rotate-left',[m
+[32m+[m[32m action : 'rotate-left',[m
+[32m+[m[32m cn : [[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'button',[m
+[32m+[m[32m cls : 'btn btn-default',[m
+[32m+[m[32m html : ''[m
+[32m+[m[32m }[m
+[32m+[m[32m ][m
+[32m+[m[32m },[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'div',[m
+[32m+[m[32m cls : 'btn-group roo-upload-cropbox-rotate-right',[m
+[32m+[m[32m action : 'rotate-right',[m
+[32m+[m[32m cn : [[m
+[32m+[m[32m {[m
+[32m+[m[32m tag : 'button',[m
+[32m+[m[32m cls : 'btn btn-default',[m
+[32m+[m[32m html : ''[m
+[32m+[m[32m }[m
+[32m+[m[32m ][m
+[32m+[m[32m }[m
+[32m+[m[32m ][m
+[32m+[m[32m }[m
+[32m+[m[32m});[m
+[1mdiff --git a/roojs-ui.js b/roojs-ui.js[m
+[1mindex 98443d0ddf..0cc67d83a4 100644[m
+[1m--- a/roojs-ui.js[m
+[1m+++ b/roojs-ui.js[m
+[36m@@ -1598,9 +1598,9 @@[m [mreturn this.el.getUpdateManager();},_handleRefresh:function(A,B,C){if(!C||!this.[m
+ 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);[m
+ 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);[m
+ }},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();[m
+[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();[m
+[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,'');[m
+[31m-this.view=B;return B;}return false;}});[m
+[32m+[m[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);[m
+[32m+[m[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"));[m
+[32m+[m[32mvar B=new Roo.factory(A);B.render&&B.render(false,'');this.view=B;return B;}return false;}});[m
+ // Roo/GridPanel.js[m
+ 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);[m
+ 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);[m
+[36m@@ -1929,3 +1929,103 @@[m [mF.push("(typeof("+G+") == 'undefined')");});var H='(('+F.join(" || ")+") ? undef[m
+ }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 ['"];[m
+ 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,{}[m
+ );},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);};[m
+[32m+[m[32m// Roo/dialog/namespace.js[m
+[32m+[m[32mRoo.dialog={};[m
+[32m+[m[32m// Roo/dialog/UploadCropbox.js[m
+[32m+[m[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}[m
+[32m+[m[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:{}[m
+[32m+[m[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'}[m
+[32m+[m[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}[m
+[32m+[m[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);[m
+[32m+[m[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;[m
+[32m+[m[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);[m
+[32m+[m[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);[m
+[32m+[m[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();[m
+[32m+[m[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();[m
+[32m+[m[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();[m
+[32m+[m[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();[m
+[32m+[m[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);[m
+[32m+[m[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);[m
+[32m+[m[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();[m
+[32m+[m[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);[m
+[32m+[m[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();[m
+[32m+[m[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);[m
+[32m+[m[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;[m
+[32m+[m[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();[m
+[32m+[m[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);[m
+[32m+[m[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.widthE)?C:E);F=(BF)?D:F);this.previewEl.setLeft(E);this.previewEl.setTop(F);this.mouseX=Roo.isTouch?e.browserEvent.touches[0].pageX:e.getPageX();[m
+[32m+[m[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);[m
+[32m+[m[32mif(!this.zoomable()){this.scale=this.startScale;return;}this.draw();return;},zoomable:function(){var A=this.thumbEl.getWidth()/this.minWidth;if(this.minWidththis.imageEl.OriginWidth||C>this.imageEl.OriginHeight||(Bthis.imageEl.OriginWidth||C>this.imageEl.OriginHeight||(Bthis.imageEl.OriginWidth||Cthis.imageEl.OriginHeight)){return false;}if(!this.isDocument&&(this.rotate==90||this.rotate==270)&&(Bthis.imageEl.OriginWidth||Cthis.imageEl.OriginHeight)){return false;[m
+[32m+[m[32m}return true;},onRotateLeft:function(e){if(!this.isDocument&&(this.canvasEl.height180)?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();[m
+[32m+[m[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");[m
+[32m+[m[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.OriginWidththis.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);[m
+[32m+[m[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();[m
+[32m+[m[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);[m
+[32m+[m[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);[m
+[32m+[m[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();[m
+[32m+[m[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;[m
+[32m+[m[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");[m
+[32m+[m[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());[m
+[32m+[m[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());[m
+[32m+[m[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(Fthis.imageEl.OriginHeight)?this.imageEl.OriginHeight:(this.thumbEl.getWidth()/this.getScaleLevel());[m
+[32m+[m[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());[m
+[32m+[m[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;[m
+[32m+[m[32m}if(x>0&&y>0){J=H/F;if(Fthis.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());[m
+[32m+[m[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());[m
+[32m+[m[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;[m
+[32m+[m[32m}if(x>0&&y>0){J=H/F;if(Fthis.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;[m
+[32m+[m[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());[m
+[32m+[m[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());[m
+[32m+[m[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(Fthis.imageEl.OriginHeight)?0:Math.abs(this.imageEl.OriginWidth-this.imageEl.OriginHeight);[m
+[32m+[m[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);[m
+[32m+[m[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);[m
+[32m+[m[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);[m
+[32m+[m[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']];[m
+[32m+[m[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();[m
+[32m+[m[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;[m
+[32m+[m[32m}return;}if(this.baseRotate==6||this.baseRotate==8){A=this.thumbEl.getHeight();this.baseScale=A/this.imageEl.OriginHeight;if(this.imageEl.OriginHeight*this.baseScalethis.imageEl.OriginHeight){B=this.thumbEl.getWidth();this.baseScale=B/this.imageEl.OriginHeight;if(this.imageEl.OriginWidth*this.baseScalethis.imageEl.OriginHeight){B=this.thumbEl.getHeight();[m
+[32m+[m[32mthis.baseScale=B/this.imageEl.OriginHeight;if(this.imageEl.OriginWidth*this.baseScale=0xffe0&&H<=0xffef)||H===0xfffe){I=E.getUint16(F+2)+2;if(F+I>E.byteLength){Roo.log('Invalid meta data: Invalid segment size.');[m
+[32m+[m[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;[m
+[32m+[m[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;[m
+[32m+[m[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;[m
+[32m+[m[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;i4?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'}[m
+[32m+[m[32m]},{tag:'div',cls:'btn-group roo-upload-cropbox-picture',action:'picture',cn:[{tag:'button',cls:'btn btn-default',html:''}]},{tag:'div',cls:'btn-group roo-upload-cropbox-rotate-right',action:'rotate-right',cn:[{tag:'button',cls:'btn btn-default',html:''}[m
+[32m+[m[32m]}],DOCUMENT:[{tag:'div',cls:'btn-group roo-upload-cropbox-rotate-left',action:'rotate-left',cn:[{tag:'button',cls:'btn btn-default',html:''}]},{tag:'div',cls:'btn-group roo-upload-cropbox-download',action:'download',cn:[{tag:'button',cls:'btn btn-default',html:''}[m
+[32m+[m[32m]},{tag:'div',cls:'btn-group roo-upload-cropbox-crop',action:'crop',cn:[{tag:'button',cls:'btn btn-default',html:''}]},{tag:'div',cls:'btn-group roo-upload-cropbox-trash',action:'trash',cn:[{tag:'button',cls:'btn btn-default',html:''}[m
+[32m+[m[32m]},{tag:'div',cls:'btn-group roo-upload-cropbox-rotate-right',action:'rotate-right',cn:[{tag:'button',cls:'btn btn-default',html:''}]}],ROTATOR:[{tag:'div',cls:'btn-group roo-upload-cropbox-rotate-left',action:'rotate-left',cn:[{tag:'button',cls:'btn btn-default',html:''}[m
+[32m+[m[32m]},{tag:'div',cls:'btn-group roo-upload-cropbox-rotate-right',action:'rotate-right',cn:[{tag:'button',cls:'btn btn-default',html:''}]}]}});[m
diff --git a/Roo/ContentPanel.js b/Roo/ContentPanel.js
index 0984532b54..cc1b9d0ce5 100644
--- a/Roo/ContentPanel.js
+++ b/Roo/ContentPanel.js
@@ -41,7 +41,6 @@
*/
Roo.ContentPanel = function(el, config, content){
-
/*
if(el.autoCreate || el.xtype){ // xtype is available if this is called from factory
config = el;
@@ -425,6 +424,14 @@ layout.addxtype({
*/
addxtype : function(cfg) {
+ if(cfg.xtype.match(/^UploadCropbox$/)) {
+
+ this.cropbox = new Roo.factory(cfg);
+
+ this.cropbox.render(this.el);
+
+ return this.cropbox;
+ }
// add form..
if (cfg.xtype.match(/^Form$/)) {
diff --git a/Roo/dialog/UploadCropbox.js b/Roo/dialog/UploadCropbox.js
new file mode 100644
index 0000000000..1d43fef410
--- /dev/null
+++ b/Roo/dialog/UploadCropbox.js
@@ -0,0 +1,1800 @@
+
+/*
+* Licence: LGPL
+*/
+
+/**
+ * @class Roo.dialog.UploadCropbox
+ * @extends Roo.BoxComponent
+ * Dialog UploadCropbox class
+ * @cfg {String} emptyText show when image has been loaded
+ * @cfg {String} rotateNotify show when image too small to rotate
+ * @cfg {Number} errorTimeout default 3000
+ * @cfg {Number} minWidth default 300
+ * @cfg {Number} minHeight default 300
+ * @cfg {Number} outputMaxWidth default 1200
+ * @cfg {Array} buttons default ['rotateLeft', 'pictureBtn', 'rotateRight']
+ * @cfg {Boolean} isDocument (true|false) default false
+ * @cfg {String} url action url
+ * @cfg {String} paramName default 'imageUpload'
+ * @cfg {String} method default POST
+ * @cfg {Boolean} loadMask (true|false) default true
+ * @cfg {Boolean} loadingText default 'Loading...'
+ *
+ * @constructor
+ * Create a new UploadCropbox
+ * @param {Object} config The config object
+ */
+
+ Roo.dialog.UploadCropbox = function(config){
+ Roo.dialog.UploadCropbox.superclass.constructor.call(this, config);
+
+ this.addEvents({
+ /**
+ * @event beforeselectfile
+ * Fire before select file
+ * @param {Roo.dialog.UploadCropbox} this
+ */
+ "beforeselectfile" : true,
+ /**
+ * @event initial
+ * Fire after initEvent
+ * @param {Roo.dialog.UploadCropbox} this
+ */
+ "initial" : true,
+ /**
+ * @event crop
+ * Fire after initEvent
+ * @param {Roo.dialog.UploadCropbox} this
+ * @param {String} data
+ */
+ "crop" : true,
+ /**
+ * @event prepare
+ * Fire when preparing the file data
+ * @param {Roo.dialog.UploadCropbox} this
+ * @param {Object} file
+ */
+ "prepare" : true,
+ /**
+ * @event exception
+ * Fire when get exception
+ * @param {Roo.dialog.UploadCropbox} this
+ * @param {XMLHttpRequest} xhr
+ */
+ "exception" : true,
+ /**
+ * @event beforeloadcanvas
+ * Fire before load the canvas
+ * @param {Roo.dialog.UploadCropbox} this
+ * @param {String} src
+ */
+ "beforeloadcanvas" : true,
+ /**
+ * @event trash
+ * Fire when trash image
+ * @param {Roo.dialog.UploadCropbox} this
+ */
+ "trash" : true,
+ /**
+ * @event download
+ * Fire when download the image
+ * @param {Roo.dialog.UploadCropbox} this
+ */
+ "download" : true,
+ /**
+ * @event footerbuttonclick
+ * Fire when footerbuttonclick
+ * @param {Roo.dialog.UploadCropbox} this
+ * @param {String} type
+ */
+ "footerbuttonclick" : true,
+ /**
+ * @event resize
+ * Fire when resize
+ * @param {Roo.dialog.UploadCropbox} this
+ */
+ "resize" : true,
+ /**
+ * @event rotate
+ * Fire when rotate the image
+ * @param {Roo.dialog.UploadCropbox} this
+ * @param {String} pos
+ */
+ "rotate" : true,
+ /**
+ * @event inspect
+ * Fire when inspect the file
+ * @param {Roo.dialog.UploadCropbox} this
+ * @param {Object} file
+ */
+ "inspect" : true,
+ /**
+ * @event upload
+ * Fire when xhr upload the file
+ * @param {Roo.dialog.UploadCropbox} this
+ * @param {Object} data
+ */
+ "upload" : true,
+ /**
+ * @event arrange
+ * Fire when arrange the file data
+ * @param {Roo.dialog.UploadCropbox} this
+ * @param {Object} formData
+ */
+ "arrange" : true,
+ /**
+ * @event loadcanvas
+ * Fire after load the canvas
+ * @param {Roo.dialog.UploadCropbox}
+ * @param {Object} imgEl
+ */
+ "loadcanvas" : true
+ });
+
+ 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,
+ outputMaxWidth : 1200,
+ file : false,
+ exif : {},
+ baseRotate : 1,
+ cropType : 'image/jpeg',
+ buttons : false,
+ canvasLoaded : false,
+ isDocument : false,
+ method : 'POST',
+ paramName : 'imageUpload',
+ loadMask : true,
+ loadingText : 'Loading...',
+ maskEl : false,
+
+ getAutoCreate : function()
+ {
+ var cfg = {
+ tag : 'div',
+ cls : 'roo-upload-cropbox',
+ cn : [
+ {
+ tag : 'input',
+ cls : 'roo-upload-cropbox-selector',
+ type : 'file'
+ },
+ {
+ 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
+ }
+ ]
+ },
+ {
+ tag : 'div',
+ cls : 'roo-upload-cropbox-footer',
+ cn : {
+ tag : 'div',
+ cls : 'btn-group btn-group-justified roo-upload-cropbox-btn-group',
+ cn : []
+ }
+ }
+ ]
+ };
+
+ return cfg;
+ },
+
+ onRender : function(ct, position)
+ {
+ Roo.dialog.UploadCropbox.superclass.onRender.call(this, ct, position);
+
+ if(this.el){
+ if (this.el.attr('xtype')) {
+ this.el.attr('xtypex', this.el.attr('xtype'));
+ this.el.dom.removeAttribute('xtype');
+
+ this.initEvents();
+ }
+ }
+ else {
+ var cfg = Roo.apply({}, this.getAutoCreate());
+
+ cfg.id = this.id || Roo.id();
+
+ if (this.cls) {
+ cfg.cls = (typeof(cfg.cls) == 'undefined' ? this.cls : cfg.cls) + ' ' + this.cls;
+ }
+
+ if (this.style) { // fixme needs to support more complex style data.
+ cfg.style = (typeof(cfg.style) == 'undefined' ? this.style : cfg.style) + '; ' + this.style;
+ }
+
+ this.el = ct.createChild(cfg, position);
+
+ this.initEvents();
+ }
+
+ if (this.buttons.length) {
+
+ Roo.each(this.buttons, function(bb) {
+
+ var btn = this.el.select('.roo-upload-cropbox-footer div.roo-upload-cropbox-btn-group').first().createChild(bb);
+
+ btn.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);
+
+ this.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();
+ this.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();
+ this.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();
+ this.footerEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
+ this.footerEl.hide();
+
+ this.setThumbBoxSize();
+
+ this.bind();
+
+ this.resize();
+
+ this.fireEvent('initial', this);
+ },
+
+ bind : function()
+ {
+ var _this = this;
+
+ window.addEventListener("resize", function() { _this.resize(); } );
+
+ 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);
+ this.bodyEl.on('mousemove', this.onMouseMove, this);
+ var mousewheel = (/Firefox/i.test(navigator.userAgent))? 'DOMMouseScroll' : 'mousewheel';
+ this.bodyEl.on(mousewheel, this.onMouseWheel, this);
+ Roo.get(document).on('mouseup', this.onMouseUp, this);
+ }
+
+ this.selectorEl.on('change', this.onFileSelected, this);
+ },
+
+ 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;
+
+ // this.selectorEl.dom.value = '';
+
+ },
+
+ resize : function()
+ {
+ if(this.fireEvent('resize', this) != false){
+ this.setThumbBoxPosition();
+ this.setCanvasPosition();
+ }
+ },
+
+ onFooterButtonClick : function(e, el, o, type)
+ {
+ switch (type) {
+ 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);
+ break;
+ case 'download' :
+ this.download(e);
+ break;
+ default :
+ break;
+ }
+
+ this.fireEvent('footerbuttonclick', this, type);
+ },
+
+ beforeSelectFile : function(e)
+ {
+ e.preventDefault();
+
+ if(this.fireEvent('beforeselectfile', this) != false){
+ this.selectorEl.dom.click();
+ }
+ },
+
+ onFileSelected : function(e)
+ {
+ e.preventDefault();
+
+ if(typeof(this.selectorEl.dom.files) == 'undefined' || !this.selectorEl.dom.files.length){
+ return;
+ }
+
+ var file = this.selectorEl.dom.files[0];
+
+ if(this.fireEvent('inspect', this, file) != false){
+ this.prepare(file);
+ }
+
+ },
+
+ trash : function(e)
+ {
+ this.fireEvent('trash', this);
+ },
+
+ download : function(e)
+ {
+ this.fireEvent('download', this);
+ },
+
+ loadCanvas : function(src)
+ {
+ if(this.fireEvent('beforeloadcanvas', this, src) != false){
+
+ this.reset();
+
+ this.imageEl = document.createElement('img');
+
+ var _this = this;
+
+ this.imageEl.addEventListener("load", function(){ _this.onLoadCanvas(); });
+
+ this.imageEl.src = src;
+ }
+ },
+
+ onLoadCanvas : function()
+ {
+ this.imageEl.OriginWidth = this.imageEl.naturalWidth || this.imageEl.width;
+ this.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();
+
+ if(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);
+ var 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;
+ return;
+ }
+
+ 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 minX = Math.ceil(this.thumbEl.getLeft(true));
+ var minY = Math.ceil(this.thumbEl.getTop(true));
+
+ var maxX = Math.ceil(minX + this.thumbEl.getWidth() - this.canvasEl.width);
+ var maxY = Math.ceil(minY + this.thumbEl.getHeight() - this.canvasEl.height);
+
+ if(minX > maxX) {
+ var tempX = minX;
+ minX = maxX;
+ maxX = tempX;
+ }
+
+ if(minY > maxY) {
+ var tempY = minY;
+ minY = maxY;
+ maxY = tempY;
+ }
+
+ var x = Roo.isTouch ? e.browserEvent.touches[0].pageX : e.getPageX();
+ var y = Roo.isTouch ? e.browserEvent.touches[0].pageY : e.getPageY();
+
+ x = x - this.mouseX;
+ y = y - this.mouseY;
+
+ var bgX = Math.ceil(x + this.previewEl.getLeft(true));
+ var bgY = Math.ceil(y + this.previewEl.getTop(true));
+
+ bgX = (bgX < minX) ? minX : ((bgX > maxX) ? maxX : bgX);
+ bgY = (bgY < minY) ? minY : ((bgY > maxY) ? maxY : bgY);
+
+ this.previewEl.setLeft(bgX);
+ this.previewEl.setTop(bgY);
+
+ this.mouseX = Roo.isTouch ? e.browserEvent.touches[0].pageX : e.getPageX();
+ this.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);
+
+ if(!this.zoomable()){
+ this.scale = this.startScale;
+ return;
+ }
+
+
+ this.draw();
+
+ return;
+ },
+
+ zoomable : function()
+ {
+ var minScale = this.thumbEl.getWidth() / this.minWidth;
+
+ if(this.minWidth < this.minHeight){
+ minScale = this.thumbEl.getHeight() / this.minHeight;
+ }
+
+ var width = Math.ceil(this.imageEl.OriginWidth * this.getScaleLevel() / minScale);
+ var height = Math.ceil(this.imageEl.OriginHeight * this.getScaleLevel() / minScale);
+
+
+ var maxWidth = this.imageEl.OriginWidth;
+ var maxHeight = this.imageEl.OriginHeight;
+
+ if(
+ this.isDocument &&
+ (this.rotate == 0 || this.rotate == 180) &&
+ (
+ width > this.imageEl.OriginWidth ||
+ height > this.imageEl.OriginHeight ||
+ (width < this.minWidth && height < this.minHeight)
+ )
+ ){
+ return false;
+ }
+
+ if(
+ this.isDocument &&
+ (this.rotate == 90 || this.rotate == 270) &&
+ (
+ width > this.imageEl.OriginWidth ||
+ height > this.imageEl.OriginHeight ||
+ (width < this.minHeight && height < this.minWidth)
+ )
+ ){
+ return false;
+ }
+
+ if(
+ !this.isDocument &&
+ (this.rotate == 0 || this.rotate == 180) &&
+ (
+ (this.imageEl.OriginWidth >= this.minWidth) && width < this.minWidth ||
+ (this.imageEl.OriginHeight >= this.minHeight) && height < this.minHeight ||
+ width > maxWidth ||
+ height > maxHeight
+ )
+ ){
+ return false;
+ }
+
+ if(
+ !this.isDocument &&
+ (this.rotate == 90 || this.rotate == 270) &&
+ (
+ width < this.minHeight ||
+ width > this.imageEl.OriginWidth ||
+ height < this.minWidth ||
+ height > this.imageEl.OriginHeight
+ )
+ ){
+ return false;
+ }
+
+ return true;
+
+ },
+
+ onRotateLeft : function(e)
+ {
+ if(!this.isDocument && (this.canvasEl.height < this.thumbEl.getWidth() || this.canvasEl.width < this.thumbEl.getHeight())){
+
+ var minScale = this.thumbEl.getWidth() / this.minWidth;
+
+ var bw = Math.ceil(this.canvasEl.width / this.getScaleLevel());
+ var bh = Math.ceil(this.canvasEl.height / this.getScaleLevel());
+
+ this.startScale = this.scale;
+
+ while (this.getScaleLevel() < minScale){
+
+ 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;
+ }
+
+ 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();
+ }
+
+ 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 minScale = this.thumbEl.getWidth() / this.minWidth;
+
+ var bw = Math.ceil(this.canvasEl.width / this.getScaleLevel());
+ var bh = Math.ceil(this.canvasEl.height / this.getScaleLevel());
+
+ this.startScale = this.scale;
+
+ while (this.getScaleLevel() < minScale){
+
+ 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;
+ }
+
+ 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();
+ }
+
+ this.draw();
+
+ this.fireEvent('rotate', this, 'right');
+ },
+
+ onRotateFail : function()
+ {
+ this.errorEl.show(true);
+
+ var _this = this;
+
+ (function() { _this.errorEl.hide(true); }).defer(this.errorTimeout);
+ },
+
+ draw : function()
+ {
+ this.previewEl.dom.innerHTML = '';
+
+ var canvasEl = document.createElement("canvas");
+
+ var contextEl = canvasEl.getContext("2d");
+
+ canvasEl.width = this.imageEl.OriginWidth * this.getScaleLevel();
+ canvasEl.height = this.imageEl.OriginWidth * this.getScaleLevel();
+ var center = this.imageEl.OriginWidth / 2;
+
+ if(this.imageEl.OriginWidth < this.imageEl.OriginHeight){
+ canvasEl.width = this.imageEl.OriginHeight * this.getScaleLevel();
+ canvasEl.height = this.imageEl.OriginHeight * this.getScaleLevel();
+ center = this.imageEl.OriginHeight / 2;
+ }
+
+ contextEl.scale(this.getScaleLevel(), this.getScaleLevel());
+
+ contextEl.translate(center, center);
+ contextEl.rotate(this.rotate * Math.PI / 180);
+
+ contextEl.drawImage(this.imageEl, 0, 0, this.imageEl.OriginWidth, this.imageEl.OriginHeight, center * -1, center * -1, this.imageEl.OriginWidth, this.imageEl.OriginHeight);
+
+ this.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(canvasEl, 0, 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
+
+ break;
+ 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(canvasEl, Math.abs(this.canvasEl.width - this.canvasEl.height), 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
+ break;
+ }
+
+ this.contextEl.drawImage(canvasEl, 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();
+
+ if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
+ 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);
+ break;
+ }
+
+ 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);
+
+ break;
+ 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(canvasEl, 0, 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
+ break;
+ }
+
+ 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);
+
+ break;
+ default :
+ break;
+ }
+
+ this.previewEl.appendChild(this.canvasEl);
+
+ this.setCanvasPosition();
+ },
+
+ crop : function()
+ {
+ if(!this.canvasLoaded){
+ return;
+ }
+
+ var imageCanvas = document.createElement("canvas");
+
+ var imageContext = imageCanvas.getContext("2d");
+
+ imageCanvas.width = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? this.imageEl.OriginWidth : this.imageEl.OriginHeight;
+ imageCanvas.height = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? this.imageEl.OriginWidth : this.imageEl.OriginHeight;
+
+ var center = imageCanvas.width / 2;
+
+ imageContext.translate(center, center);
+
+ imageContext.rotate(this.rotate * Math.PI / 180);
+
+ imageContext.drawImage(this.imageEl, 0, 0, this.imageEl.OriginWidth, this.imageEl.OriginHeight, center * -1, center * -1, this.imageEl.OriginWidth, this.imageEl.OriginHeight);
+
+ var canvas = document.createElement("canvas");
+
+ var context = canvas.getContext("2d");
+
+ canvas.width = this.thumbEl.getWidth() / this.getScaleLevel();
+
+ canvas.height = this.thumbEl.getHeight() / this.getScaleLevel();
+
+ switch (this.rotate) {
+ case 0 :
+
+ var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getWidth() / this.getScaleLevel());
+ var height = (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());
+ var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
+
+ var sx = this.thumbEl.getLeft(true) - this.previewEl.getLeft(true);
+ var sy = this.thumbEl.getTop(true) - this.previewEl.getTop(true);
+
+ sx = sx < 0 ? 0 : (sx / this.getScaleLevel());
+ sy = sy < 0 ? 0 : (sy / this.getScaleLevel());
+
+ if(canvas.width > this.outputMaxWidth) {
+ var scale = this.outputMaxWidth / canvas.width;
+ canvas.width = canvas.width * scale;
+ canvas.height = canvas.height * scale;
+ context.scale(scale, scale);
+ }
+
+ context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
+
+ break;
+ case 90 :
+
+ var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getWidth() / this.getScaleLevel());
+ var height = (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());
+ var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
+
+ var targetWidth = this.minWidth - 2 * x;
+ var targetHeight = this.minHeight - 2 * y;
+
+ var scale = 1;
+
+ if((x == 0 && y == 0) || (x == 0 && y > 0)){
+ scale = targetWidth / width;
+ }
+
+ if(x > 0 && y == 0){
+ scale = targetHeight / height;
+ }
+
+ if(x > 0 && y > 0){
+ scale = targetWidth / width;
+
+ if(width < height){
+ scale = targetHeight / height;
+ }
+ }
+
+ context.scale(scale, scale);
+
+ 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));
+
+ sx = 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;
+
+ context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
+
+ break;
+ case 180 :
+
+ var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getWidth() / this.getScaleLevel());
+ var height = (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());
+ var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
+
+ var targetWidth = this.minWidth - 2 * x;
+ var targetHeight = this.minHeight - 2 * y;
+
+ var scale = 1;
+
+ if((x == 0 && y == 0) || (x == 0 && y > 0)){
+ scale = targetWidth / width;
+ }
+
+ if(x > 0 && y == 0){
+ scale = targetHeight / height;
+ }
+
+ if(x > 0 && y > 0){
+ scale = targetWidth / width;
+
+ if(width < height){
+ scale = targetHeight / height;
+ }
+ }
+
+ context.scale(scale, scale);
+
+ 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));
+
+ sx = 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;
+
+ context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
+
+ break;
+ case 270 :
+
+ var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getWidth() / this.getScaleLevel());
+ var height = (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());
+ var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
+
+ var targetWidth = this.minWidth - 2 * x;
+ var targetHeight = this.minHeight - 2 * y;
+
+ var scale = 1;
+
+ if((x == 0 && y == 0) || (x == 0 && y > 0)){
+ scale = targetWidth / width;
+ }
+
+ if(x > 0 && y == 0){
+ scale = targetHeight / height;
+ }
+
+ if(x > 0 && y > 0){
+ scale = targetWidth / width;
+
+ if(width < height){
+ scale = targetHeight / height;
+ }
+ }
+
+ context.scale(scale, scale);
+ 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));
+
+ 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);
+
+ context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
+
+ break;
+ default :
+ break;
+ }
+
+ this.cropData = canvas.toDataURL(this.cropType);
+
+ if(this.fireEvent('crop', this, this.cropData) !== false){
+ this.process(this.file, this.cropData);
+ }
+
+ return;
+
+ },
+
+ setThumbBoxSize : function()
+ {
+ var width, height;
+
+ if(this.isDocument && typeof(this.imageEl) != 'undefined'){
+ width = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.max(this.minWidth, this.minHeight) : Math.min(this.minWidth, this.minHeight);
+ height = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.min(this.minWidth, this.minHeight) : Math.max(this.minWidth, this.minHeight);
+
+ this.minWidth = width;
+ this.minHeight = height;
+
+ if(this.rotate == 90 || this.rotate == 270){
+ this.minWidth = height;
+ this.minHeight = width;
+ }
+ }
+
+ height = 300;
+ width = Math.ceil(this.minWidth * height / this.minHeight);
+
+ if(this.minWidth > this.minHeight){
+ width = 300;
+ height = Math.ceil(this.minHeight * width / this.minWidth);
+ }
+
+ this.thumbEl.setStyle({
+ width : width + 'px',
+ height : height + '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);
+
+ this.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']];
+ }
+
+ this.rotate = Roo.dialog.UploadCropbox['Orientation'][this.baseRotate];
+
+ },
+
+ baseScaleLevel : function()
+ {
+ var width, height;
+
+ if(this.isDocument){
+
+ if(this.baseRotate == 6 || this.baseRotate == 8){
+
+ height = this.thumbEl.getHeight();
+ this.baseScale = height / this.imageEl.OriginWidth;
+
+ if(this.imageEl.OriginHeight * this.baseScale > this.thumbEl.getWidth()){
+ width = this.thumbEl.getWidth();
+ this.baseScale = width / this.imageEl.OriginHeight;
+ }
+
+ return;
+ }
+
+ height = this.thumbEl.getHeight();
+ this.baseScale = height / this.imageEl.OriginHeight;
+
+ if(this.imageEl.OriginWidth * this.baseScale > this.thumbEl.getWidth()){
+ width = this.thumbEl.getWidth();
+ this.baseScale = width / this.imageEl.OriginWidth;
+ }
+
+ return;
+ }
+
+ if(this.baseRotate == 6 || this.baseRotate == 8){
+
+ width = this.thumbEl.getHeight();
+ this.baseScale = width / this.imageEl.OriginHeight;
+
+ if(this.imageEl.OriginHeight * this.baseScale < this.thumbEl.getWidth()){
+ height = this.thumbEl.getWidth();
+ this.baseScale = height / this.imageEl.OriginHeight;
+ }
+
+ if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
+ height = this.thumbEl.getWidth();
+ this.baseScale = height / this.imageEl.OriginHeight;
+
+ if(this.imageEl.OriginWidth * this.baseScale < this.thumbEl.getHeight()){
+ width = this.thumbEl.getHeight();
+ this.baseScale = width / this.imageEl.OriginWidth;
+ }
+ }
+
+ return;
+ }
+
+ width = this.thumbEl.getWidth();
+ this.baseScale = width / this.imageEl.OriginWidth;
+
+ if(this.imageEl.OriginHeight * this.baseScale < this.thumbEl.getHeight()){
+ height = this.thumbEl.getHeight();
+ this.baseScale = height / this.imageEl.OriginHeight;
+ }
+
+ if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
+
+ height = this.thumbEl.getHeight();
+ this.baseScale = height / this.imageEl.OriginHeight;
+
+ if(this.imageEl.OriginWidth * this.baseScale < this.thumbEl.getWidth()){
+ width = this.thumbEl.getWidth();
+ this.baseScale = width / this.imageEl.OriginWidth;
+ }
+
+ }
+
+ if(this.imageEl.OriginWidth < this.minWidth || this.imageEl.OriginHeight < this.minHeight) {
+ this.baseScale = width / this.minWidth;
+ }
+
+ return;
+ },
+
+ getScaleLevel : function()
+ {
+ return this.baseScale * Math.pow(1.02, this.scale);
+ },
+
+ onTouchStart : function(e)
+ {
+ if(!this.canvasLoaded){
+ this.beforeSelectFile(e);
+ return;
+ }
+
+ var touches = e.browserEvent.touches;
+
+ if(!touches){
+ return;
+ }
+
+ if(touches.length == 1){
+ this.onMouseDown(e);
+ return;
+ }
+
+ if(touches.length != 2){
+ return;
+ }
+
+ var coords = [];
+
+ for(var i = 0, finger; finger = touches[i]; i++){
+ coords.push(finger.pageX, finger.pageY);
+ }
+
+ var x = Math.pow(coords[0] - coords[2], 2);
+ var y = Math.pow(coords[1] - coords[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 touches = e.browserEvent.touches;
+
+ if(!touches){
+ return;
+ }
+
+ if(this.dragable){
+ this.onMouseMove(e);
+ return;
+ }
+
+ var coords = [];
+
+ for(var i = 0, finger; finger = touches[i]; i++){
+ coords.push(finger.pageX, finger.pageY);
+ }
+
+ var x = Math.pow(coords[0] - coords[2], 2);
+ var y = Math.pow(coords[1] - coords[3], 2);
+
+ this.endDistance = Math.sqrt(x + y);
+
+ this.scale = this.startScale + Math.floor(Math.log(this.endDistance / this.startDistance) / Math.log(1.1));
+
+ if(!this.zoomable()){
+ this.scale = this.startScale;
+ return;
+ }
+
+ this.draw();
+
+ },
+
+ onTouchEnd : function(e)
+ {
+ this.pinching = false;
+ this.dragable = false;
+
+ },
+
+ process : function(file, crop)
+ {
+ if(this.loadMask){
+ this.maskEl.mask(this.loadingText);
+ }
+
+ this.xhr = new XMLHttpRequest();
+
+ file.xhr = this.xhr;
+
+ this.xhr.open(this.method, this.url, true);
+
+ var headers = {
+ "Accept": "application/json",
+ "Cache-Control": "no-cache",
+ "X-Requested-With": "XMLHttpRequest"
+ };
+
+ for (var headerName in headers) {
+ var headerValue = headers[headerName];
+ if (headerValue) {
+ this.xhr.setRequestHeader(headerName, headerValue);
+ }
+ }
+
+ var _this = this;
+
+ this.xhr.onload = function()
+ {
+ _this.xhrOnLoad(_this.xhr);
+ }
+
+ this.xhr.onerror = function()
+ {
+ _this.xhrOnError(_this.xhr);
+ }
+
+ var formData = new FormData();
+
+ formData.append('returnHTML', 'NO');
+
+ if(crop){
+ formData.append('crop', crop);
+ var blobBin = atob(crop.split(',')[1]);
+ var array = [];
+ for(var i = 0; i < blobBin.length; i++) {
+ array.push(blobBin.charCodeAt(i));
+ }
+ var croppedFile =new Blob([new Uint8Array(array)], {type: this.cropType});
+ formData.append(this.paramName, croppedFile, file.name);
+ }
+
+ if(typeof(file.filename) != 'undefined'){
+ formData.append('filename', file.filename);
+ }
+
+ if(typeof(file.mimetype) != 'undefined'){
+ formData.append('mimetype', file.mimetype);
+ }
+
+ if(this.fireEvent('arrange', this, formData) != false){
+ this.xhr.send(formData);
+ };
+ },
+
+ xhrOnLoad : function(xhr)
+ {
+ if(this.loadMask){
+ this.maskEl.unmask();
+ }
+
+ if (xhr.readyState !== 4) {
+ this.fireEvent('exception', this, xhr);
+ return;
+ }
+
+ var response = Roo.decode(xhr.responseText);
+
+ if(!response.success){
+ this.fireEvent('exception', this, xhr);
+ return;
+ }
+
+ var response = Roo.decode(xhr.responseText);
+
+ this.fireEvent('upload', this, response);
+
+ },
+
+ xhrOnError : function()
+ {
+ if(this.loadMask){
+ this.maskEl.unmask();
+ }
+
+ Roo.log('xhr on error');
+
+ var response = Roo.decode(xhr.responseText);
+
+ Roo.log(response);
+
+ },
+
+ prepare : function(file)
+ {
+ if(this.loadMask){
+ this.maskEl.mask(this.loadingText);
+ }
+
+ this.file = false;
+ this.exif = {};
+
+ if(typeof(file) === 'string'){
+ this.loadCanvas(file);
+ return;
+ }
+
+ if(!file || !this.urlAPI){
+ return;
+ }
+
+ this.file = file;
+ if(typeof(file.type) != 'undefined' && file.type.length != 0) {
+ this.cropType = file.type;
+ }
+
+ var _this = this;
+
+ if(this.fireEvent('prepare', this, this.file) != false){
+
+ var reader = new FileReader();
+
+ reader.onload = function (e) {
+ if (e.target.error) {
+ Roo.log(e.target.error);
+ return;
+ }
+
+ var buffer = e.target.result,
+ dataView = new DataView(buffer),
+ offset = 2,
+ maxOffset = dataView.byteLength - 4,
+ markerBytes,
+ markerLength;
+
+ if (dataView.getUint16(0) === 0xffd8) {
+ while (offset < maxOffset) {
+ markerBytes = dataView.getUint16(offset);
+
+ if ((markerBytes >= 0xffe0 && markerBytes <= 0xffef) || markerBytes === 0xfffe) {
+ markerLength = dataView.getUint16(offset + 2) + 2;
+ if (offset + markerLength > dataView.byteLength) {
+ Roo.log('Invalid meta data: Invalid segment size.');
+ break;
+ }
+
+ if(markerBytes == 0xffe1){
+ _this.parseExifData(
+ dataView,
+ offset,
+ markerLength
+ );
+ }
+
+ offset += markerLength;
+
+ continue;
+ }
+
+ break;
+ }
+
+ }
+
+ var url = _this.urlAPI.createObjectURL(_this.file);
+
+ _this.loadCanvas(url);
+
+ return;
+ }
+
+ reader.readAsArrayBuffer(this.file);
+
+ }
+
+ },
+
+ parseExifData : function(dataView, offset, length)
+ {
+ var tiffOffset = offset + 10,
+ littleEndian,
+ dirOffset;
+
+ if (dataView.getUint32(offset + 4) !== 0x45786966) {
+ // No Exif data, might be XMP data instead
+ return;
+ }
+
+ // Check for the ASCII code for "Exif" (0x45786966):
+ if (dataView.getUint32(offset + 4) !== 0x45786966) {
+ // No Exif data, might be XMP data instead
+ return;
+ }
+ if (tiffOffset + 8 > dataView.byteLength) {
+ Roo.log('Invalid Exif data: Invalid segment size.');
+ return;
+ }
+ // Check for the two null bytes:
+ if (dataView.getUint16(offset + 8) !== 0x0000) {
+ Roo.log('Invalid Exif data: Missing byte alignment offset.');
+ return;
+ }
+ // Check the byte alignment:
+ switch (dataView.getUint16(tiffOffset)) {
+ case 0x4949:
+ littleEndian = true;
+ break;
+ case 0x4D4D:
+ littleEndian = false;
+ break;
+ default:
+ Roo.log('Invalid Exif data: Invalid byte alignment marker.');
+ return;
+ }
+ // Check for the TIFF tag marker (0x002A):
+ if (dataView.getUint16(tiffOffset + 2, littleEndian) !== 0x002A) {
+ Roo.log('Invalid Exif data: Missing TIFF marker.');
+ return;
+ }
+ // Retrieve the directory offset bytes, usually 0x00000008 or 8 decimal:
+ dirOffset = dataView.getUint32(tiffOffset + 4, littleEndian);
+
+ this.parseExifTags(
+ dataView,
+ tiffOffset,
+ tiffOffset + dirOffset,
+ littleEndian
+ );
+ },
+
+ parseExifTags : function(dataView, tiffOffset, dirOffset, littleEndian)
+ {
+ var tagsNumber,
+ dirEndOffset,
+ i;
+ if (dirOffset + 6 > dataView.byteLength) {
+ Roo.log('Invalid Exif data: Invalid directory offset.');
+ return;
+ }
+ tagsNumber = dataView.getUint16(dirOffset, littleEndian);
+ dirEndOffset = dirOffset + 2 + 12 * tagsNumber;
+ if (dirEndOffset + 4 > dataView.byteLength) {
+ Roo.log('Invalid Exif data: Invalid directory size.');
+ return;
+ }
+ for (i = 0; i < tagsNumber; i += 1) {
+ this.parseExifTag(
+ dataView,
+ tiffOffset,
+ dirOffset + 2 + 12 * i, // tag offset
+ littleEndian
+ );
+ }
+ // Return the offset to the next directory:
+ return dataView.getUint32(dirEndOffset, littleEndian);
+ },
+
+ parseExifTag : function (dataView, tiffOffset, offset, littleEndian)
+ {
+ var tag = dataView.getUint16(offset, littleEndian);
+
+ this.exif[tag] = this.getExifValue(
+ dataView,
+ tiffOffset,
+ offset,
+ dataView.getUint16(offset + 2, littleEndian), // tag type
+ dataView.getUint32(offset + 4, littleEndian), // tag length
+ littleEndian
+ );
+ },
+
+ getExifValue : function (dataView, tiffOffset, offset, type, length, littleEndian)
+ {
+ var tagType = Roo.dialog.UploadCropbox.exifTagTypes[type],
+ tagSize,
+ dataOffset,
+ values,
+ i,
+ str,
+ c;
+
+ if (!tagType) {
+ Roo.log('Invalid Exif data: Invalid tag type.');
+ return;
+ }
+
+ tagSize = tagType.size * length;
+ // Determine if the value is contained in the dataOffset bytes,
+ // or if the value at the dataOffset is a pointer to the actual data:
+ dataOffset = tagSize > 4 ?
+ tiffOffset + dataView.getUint32(offset + 8, littleEndian) : (offset + 8);
+ if (dataOffset + tagSize > dataView.byteLength) {
+ Roo.log('Invalid Exif data: Invalid data offset.');
+ return;
+ }
+ if (length === 1) {
+ return tagType.getValue(dataView, dataOffset, littleEndian);
+ }
+ values = [];
+ for (i = 0; i < length; i += 1) {
+ values[i] = tagType.getValue(dataView, dataOffset + i * tagType.size, littleEndian);
+ }
+
+ if (tagType.ascii) {
+ str = '';
+ // Concatenate the chars:
+ for (i = 0; i < values.length; i += 1) {
+ c = values[i];
+ // Ignore the terminating NULL byte(s):
+ if (c === '\u0000') {
+ break;
+ }
+ str += c;
+ }
+ return str;
+ }
+ return values;
+ }
+
+});
+
+Roo.apply(Roo.dialog.UploadCropbox, {
+ tags : {
+ 'Orientation': 0x0112
+ },
+
+ Orientation: {
+ 1: 0, //'top-left',
+// 2: 'top-right',
+ 3: 180, //'bottom-right',
+// 4: 'bottom-left',
+// 5: 'left-top',
+ 6: 90, //'right-top',
+// 7: 'right-bottom',
+ 8: 270 //'left-bottom'
+ },
+
+ exifTagTypes : {
+ // byte, 8-bit unsigned int:
+ 1: {
+ getValue: function (dataView, dataOffset) {
+ return dataView.getUint8(dataOffset);
+ },
+ size: 1
+ },
+ // ascii, 8-bit byte:
+ 2: {
+ getValue: function (dataView, dataOffset) {
+ return String.fromCharCode(dataView.getUint8(dataOffset));
+ },
+ size: 1,
+ ascii: true
+ },
+ // short, 16 bit int:
+ 3: {
+ getValue: function (dataView, dataOffset, littleEndian) {
+ return dataView.getUint16(dataOffset, littleEndian);
+ },
+ size: 2
+ },
+ // long, 32 bit int:
+ 4: {
+ getValue: function (dataView, dataOffset, littleEndian) {
+ return dataView.getUint32(dataOffset, littleEndian);
+ },
+ size: 4
+ },
+ // rational = two long values, first is numerator, second is denominator:
+ 5: {
+ getValue: function (dataView, dataOffset, littleEndian) {
+ return dataView.getUint32(dataOffset, littleEndian) /
+ dataView.getUint32(dataOffset + 4, littleEndian);
+ },
+ size: 8
+ },
+ // slong, 32 bit signed int:
+ 9: {
+ getValue: function (dataView, dataOffset, littleEndian) {
+ return dataView.getInt32(dataOffset, littleEndian);
+ },
+ size: 4
+ },
+ // srational, two slongs, first is numerator, second is denominator:
+ 10: {
+ getValue: function (dataView, dataOffset, littleEndian) {
+ return dataView.getInt32(dataOffset, littleEndian) /
+ dataView.getInt32(dataOffset + 4, littleEndian);
+ },
+ 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 : ''
+ }
+ ]
+ },
+ {
+ tag : 'div',
+ cls : 'btn-group roo-upload-cropbox-picture',
+ action : 'picture',
+ cn : [
+ {
+ tag : 'button',
+ cls : 'btn btn-default',
+ html : ''
+ }
+ ]
+ },
+ {
+ tag : 'div',
+ cls : 'btn-group roo-upload-cropbox-rotate-right',
+ action : 'rotate-right',
+ cn : [
+ {
+ tag : 'button',
+ cls : 'btn btn-default',
+ html : ''
+ }
+ ]
+ }
+ ],
+ DOCUMENT : [
+ {
+ tag : 'div',
+ cls : 'btn-group roo-upload-cropbox-rotate-left',
+ action : 'rotate-left',
+ cn : [
+ {
+ tag : 'button',
+ cls : 'btn btn-default',
+ html : ''
+ }
+ ]
+ },
+ {
+ tag : 'div',
+ cls : 'btn-group roo-upload-cropbox-download',
+ action : 'download',
+ cn : [
+ {
+ tag : 'button',
+ cls : 'btn btn-default',
+ html : ''
+ }
+ ]
+ },
+ {
+ tag : 'div',
+ cls : 'btn-group roo-upload-cropbox-crop',
+ action : 'crop',
+ cn : [
+ {
+ tag : 'button',
+ cls : 'btn btn-default',
+ html : ''
+ }
+ ]
+ },
+ {
+ tag : 'div',
+ cls : 'btn-group roo-upload-cropbox-trash',
+ action : 'trash',
+ cn : [
+ {
+ tag : 'button',
+ cls : 'btn btn-default',
+ html : ''
+ }
+ ]
+ },
+ {
+ tag : 'div',
+ cls : 'btn-group roo-upload-cropbox-rotate-right',
+ action : 'rotate-right',
+ cn : [
+ {
+ tag : 'button',
+ cls : 'btn btn-default',
+ html : ''
+ }
+ ]
+ }
+ ],
+ ROTATOR : [
+ {
+ tag : 'div',
+ cls : 'btn-group roo-upload-cropbox-rotate-left',
+ action : 'rotate-left',
+ cn : [
+ {
+ tag : 'button',
+ cls : 'btn btn-default',
+ html : ''
+ }
+ ]
+ },
+ {
+ tag : 'div',
+ cls : 'btn-group roo-upload-cropbox-rotate-right',
+ action : 'rotate-right',
+ cn : [
+ {
+ tag : 'button',
+ cls : 'btn btn-default',
+ html : ''
+ }
+ ]
+ }
+ ]
+ }
+});
diff --git a/Roo/dialog/namespace.js b/Roo/dialog/namespace.js
new file mode 100644
index 0000000000..b04737593a
--- /dev/null
+++ b/Roo/dialog/namespace.js
@@ -0,0 +1 @@
+Roo.dialog = {};
\ No newline at end of file
diff --git a/buildSDK/dependancy_ui.txt b/buildSDK/dependancy_ui.txt
index 5a8e5a9ac5..f89656e412 100644
--- a/buildSDK/dependancy_ui.txt
+++ b/buildSDK/dependancy_ui.txt
@@ -197,3 +197,6 @@ Roo.XTemplate
// is this ready yet? - is it used?
// Roo.Login
+
+Roo.dialog.namespace
+Roo.dialog.UploadCropbox
diff --git a/css/alert.css b/css/alert.css
new file mode 100644
index 0000000000..0cc7751f02
--- /dev/null
+++ b/css/alert.css
@@ -0,0 +1,75 @@
+.alert {
+ padding: 15px;
+ margin-bottom: 20px;
+ border: 1px solid transparent;
+ border-radius: 4px;
+}
+.alert h4 {
+ margin-top: 0;
+ color: inherit;
+}
+.alert .alert-link {
+ font-weight: bold;
+}
+.alert > p,
+.alert > ul {
+ margin-bottom: 0;
+}
+.alert > p + p {
+ margin-top: 5px;
+}
+.alert-dismissable,
+.alert-dismissible {
+ padding-right: 35px;
+}
+.alert-dismissable .close,
+.alert-dismissible .close {
+ position: relative;
+ top: -2px;
+ right: -21px;
+ color: inherit;
+}
+.alert-success {
+ background-color: #dff0d8;
+ border-color: #d6e9c6;
+ color: #3c763d;
+}
+.alert-success hr {
+ border-top-color: #c9e2b3;
+}
+.alert-success .alert-link {
+ color: #2b542c;
+}
+.alert-info {
+ background-color: #d9edf7;
+ border-color: #bce8f1;
+ color: #31708f;
+}
+.alert-info hr {
+ border-top-color: #a6e1ec;
+}
+.alert-info .alert-link {
+ color: #245269;
+}
+.alert-warning {
+ background-color: #fcf8e3;
+ border-color: #faebcc;
+ color: #8a6d3b;
+}
+.alert-warning hr {
+ border-top-color: #f7e1b5;
+}
+.alert-warning .alert-link {
+ color: #66512c;
+}
+.alert-danger {
+ background-color: #f2dede;
+ border-color: #ebccd1;
+ color: #a94442;
+}
+.alert-danger hr {
+ border-top-color: #e4b9c0;
+}
+.alert-danger .alert-link {
+ color: #843534;
+}
\ No newline at end of file
diff --git a/css/button-groups.css b/css/button-groups.css
new file mode 100644
index 0000000000..b725faf99b
--- /dev/null
+++ b/css/button-groups.css
@@ -0,0 +1,171 @@
+.btn-group,
+.btn-group-vertical {
+ position: relative;
+ display: inline-block;
+ vertical-align: middle;
+}
+.btn-group > .btn,
+.btn-group-vertical > .btn {
+ position: relative;
+ float: left;
+}
+.btn-group > .btn:hover,
+.btn-group-vertical > .btn:hover,
+.btn-group > .btn:focus,
+.btn-group-vertical > .btn:focus,
+.btn-group > .btn:active,
+.btn-group-vertical > .btn:active,
+.btn-group > .btn.active,
+.btn-group-vertical > .btn.active {
+ z-index: 2;
+}
+.btn-group .btn + .btn,
+.btn-group .btn + .btn-group,
+.btn-group .btn-group + .btn,
+.btn-group .btn-group + .btn-group {
+ margin-left: -1px;
+}
+.btn-toolbar {
+ margin-left: -5px;
+}
+.btn-toolbar .btn,
+.btn-toolbar .btn-group,
+.btn-toolbar .input-group {
+ float: left;
+}
+.btn-toolbar > .btn,
+.btn-toolbar > .btn-group,
+.btn-toolbar > .input-group {
+ margin-left: 5px;
+}
+.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
+ border-radius: 0;
+}
+.btn-group > .btn:first-child {
+ margin-left: 0;
+}
+.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
+ border-bottom-right-radius: 0;
+ border-top-right-radius: 0;
+}
+.btn-group > .btn:last-child:not(:first-child),
+.btn-group > .dropdown-toggle:not(:first-child) {
+ border-bottom-left-radius: 0;
+ border-top-left-radius: 0;
+}
+.btn-group > .btn-group {
+ float: left;
+}
+.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
+ border-radius: 0;
+}
+.btn-group > .btn-group:first-child:not(:last-child) > .btn:last-child,
+.btn-group > .btn-group:first-child:not(:last-child) > .dropdown-toggle {
+ border-bottom-right-radius: 0;
+ border-top-right-radius: 0;
+}
+.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child {
+ border-bottom-left-radius: 0;
+ border-top-left-radius: 0;
+}
+.btn-group .dropdown-toggle:active,
+.btn-group.open .dropdown-toggle {
+ outline: 0;
+}
+.btn-group > .btn + .dropdown-toggle {
+ padding-left: 8px;
+ padding-right: 8px;
+}
+.btn-group > .btn-lg + .dropdown-toggle {
+ padding-left: 12px;
+ padding-right: 12px;
+}
+.btn-group.open .dropdown-toggle {
+ -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+ box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+}
+.btn-group.open .dropdown-toggle.btn-link {
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+.btn .caret {
+ margin-left: 0;
+}
+.btn-lg .caret {
+ border-width: 5px 5px 0;
+ border-bottom-width: 0;
+}
+.dropup .btn-lg .caret {
+ border-width: 0 5px 5px;
+}
+.btn-group-vertical > .btn,
+.btn-group-vertical > .btn-group,
+.btn-group-vertical > .btn-group > .btn {
+ display: block;
+ float: none;
+ width: 100%;
+ max-width: 100%;
+}
+.btn-group-vertical > .btn-group > .btn {
+ float: none;
+}
+.btn-group-vertical > .btn + .btn,
+.btn-group-vertical > .btn + .btn-group,
+.btn-group-vertical > .btn-group + .btn,
+.btn-group-vertical > .btn-group + .btn-group {
+ margin-top: -1px;
+ margin-left: 0;
+}
+.btn-group-vertical > .btn:not(:first-child):not(:last-child) {
+ border-radius: 0;
+}
+.btn-group-vertical > .btn:first-child:not(:last-child) {
+ border-top-right-radius: 4px;
+ border-top-left-radius: 4px;
+ border-bottom-right-radius: 0;
+ border-bottom-left-radius: 0;
+}
+.btn-group-vertical > .btn:last-child:not(:first-child) {
+ border-top-right-radius: 0;
+ border-top-left-radius: 0;
+ border-bottom-right-radius: 4px;
+ border-bottom-left-radius: 4px;
+}
+.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
+ border-radius: 0;
+}
+.btn-group-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child,
+.btn-group-vertical > .btn-group:first-child:not(:last-child) > .dropdown-toggle {
+ border-bottom-right-radius: 0;
+ border-bottom-left-radius: 0;
+}
+.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
+ border-top-right-radius: 0;
+ border-top-left-radius: 0;
+}
+.btn-group-justified {
+ display: table;
+ width: 100%;
+ table-layout: fixed;
+ border-collapse: separate;
+}
+.btn-group-justified > .btn,
+.btn-group-justified > .btn-group {
+ float: none;
+ display: table-cell;
+ width: 1%;
+}
+.btn-group-justified > .btn-group .btn {
+ width: 100%;
+}
+.btn-group-justified > .btn-group .dropdown-menu {
+ left: auto;
+}
+[data-toggle="buttons"] > .btn input[type="radio"],
+[data-toggle="buttons"] > .btn-group > .btn input[type="radio"],
+[data-toggle="buttons"] > .btn input[type="checkbox"],
+[data-toggle="buttons"] > .btn-group > .btn input[type="checkbox"] {
+ position: absolute;
+ clip: rect(0, 0, 0, 0);
+ pointer-events: none;
+}
\ No newline at end of file
diff --git a/css/buttons.css b/css/buttons.css
new file mode 100644
index 0000000000..42ec098feb
--- /dev/null
+++ b/css/buttons.css
@@ -0,0 +1,463 @@
+.btn {
+ display: inline-block;
+ margin-bottom: 0;
+ font-weight: normal;
+ text-align: center;
+ vertical-align: middle;
+ touch-action: manipulation;
+ cursor: pointer;
+ background-image: none;
+ border: 1px solid transparent;
+ white-space: nowrap;
+ padding: 6px 12px;
+ font-size: 14px;
+ line-height: 1.42857143;
+ border-radius: 4px;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+.btn:focus,
+.btn:active:focus,
+.btn.active:focus,
+.btn.focus,
+.btn:active.focus,
+.btn.active.focus {
+ outline: 5px auto -webkit-focus-ring-color;
+ outline-offset: -2px;
+}
+.btn:hover,
+.btn:focus,
+.btn.focus {
+ color: #333333;
+ text-decoration: none;
+}
+.btn:active,
+.btn.active {
+ outline: 0;
+ background-image: none;
+ -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+ box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+}
+.btn.disabled,
+.btn[disabled],
+fieldset[disabled] .btn {
+ cursor: not-allowed;
+ opacity: 0.65;
+ filter: alpha(opacity=65);
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+a.btn.disabled,
+fieldset[disabled] a.btn {
+ pointer-events: none;
+}
+.btn-default {
+ color: #333333;
+ background-color: #ffffff;
+ border-color: #cccccc;
+}
+.btn-default:focus,
+.btn-default.focus {
+ color: #333333;
+ background-color: #e6e6e6;
+ border-color: #8c8c8c;
+}
+.btn-default:hover {
+ color: #333333;
+ background-color: #e6e6e6;
+ border-color: #adadad;
+}
+.btn-default:active,
+.btn-default.active,
+.open > .dropdown-toggle.btn-default {
+ color: #333333;
+ background-color: #e6e6e6;
+ border-color: #adadad;
+}
+.btn-default:active:hover,
+.btn-default.active:hover,
+.open > .dropdown-toggle.btn-default:hover,
+.btn-default:active:focus,
+.btn-default.active:focus,
+.open > .dropdown-toggle.btn-default:focus,
+.btn-default:active.focus,
+.btn-default.active.focus,
+.open > .dropdown-toggle.btn-default.focus {
+ color: #333333;
+ background-color: #d4d4d4;
+ border-color: #8c8c8c;
+}
+.btn-default:active,
+.btn-default.active,
+.open > .dropdown-toggle.btn-default {
+ background-image: none;
+}
+.btn-default.disabled:hover,
+.btn-default[disabled]:hover,
+fieldset[disabled] .btn-default:hover,
+.btn-default.disabled:focus,
+.btn-default[disabled]:focus,
+fieldset[disabled] .btn-default:focus,
+.btn-default.disabled.focus,
+.btn-default[disabled].focus,
+fieldset[disabled] .btn-default.focus {
+ background-color: #ffffff;
+ border-color: #cccccc;
+}
+.btn-default .badge {
+ color: #ffffff;
+ background-color: #333333;
+}
+.btn-primary {
+ color: #ffffff;
+ background-color: #337ab7;
+ border-color: #2e6da4;
+}
+.btn-primary:focus,
+.btn-primary.focus {
+ color: #ffffff;
+ background-color: #286090;
+ border-color: #122b40;
+}
+.btn-primary:hover {
+ color: #ffffff;
+ background-color: #286090;
+ border-color: #204d74;
+}
+.btn-primary:active,
+.btn-primary.active,
+.open > .dropdown-toggle.btn-primary {
+ color: #ffffff;
+ background-color: #286090;
+ border-color: #204d74;
+}
+.btn-primary:active:hover,
+.btn-primary.active:hover,
+.open > .dropdown-toggle.btn-primary:hover,
+.btn-primary:active:focus,
+.btn-primary.active:focus,
+.open > .dropdown-toggle.btn-primary:focus,
+.btn-primary:active.focus,
+.btn-primary.active.focus,
+.open > .dropdown-toggle.btn-primary.focus {
+ color: #ffffff;
+ background-color: #204d74;
+ border-color: #122b40;
+}
+.btn-primary:active,
+.btn-primary.active,
+.open > .dropdown-toggle.btn-primary {
+ background-image: none;
+}
+.btn-primary.disabled:hover,
+.btn-primary[disabled]:hover,
+fieldset[disabled] .btn-primary:hover,
+.btn-primary.disabled:focus,
+.btn-primary[disabled]:focus,
+fieldset[disabled] .btn-primary:focus,
+.btn-primary.disabled.focus,
+.btn-primary[disabled].focus,
+fieldset[disabled] .btn-primary.focus {
+ background-color: #337ab7;
+ border-color: #2e6da4;
+}
+.btn-primary .badge {
+ color: #337ab7;
+ background-color: #ffffff;
+}
+.btn-success {
+ color: #ffffff;
+ background-color: #5cb85c;
+ border-color: #4cae4c;
+}
+.btn-success:focus,
+.btn-success.focus {
+ color: #ffffff;
+ background-color: #449d44;
+ border-color: #255625;
+}
+.btn-success:hover {
+ color: #ffffff;
+ background-color: #449d44;
+ border-color: #398439;
+}
+.btn-success:active,
+.btn-success.active,
+.open > .dropdown-toggle.btn-success {
+ color: #ffffff;
+ background-color: #449d44;
+ border-color: #398439;
+}
+.btn-success:active:hover,
+.btn-success.active:hover,
+.open > .dropdown-toggle.btn-success:hover,
+.btn-success:active:focus,
+.btn-success.active:focus,
+.open > .dropdown-toggle.btn-success:focus,
+.btn-success:active.focus,
+.btn-success.active.focus,
+.open > .dropdown-toggle.btn-success.focus {
+ color: #ffffff;
+ background-color: #398439;
+ border-color: #255625;
+}
+.btn-success:active,
+.btn-success.active,
+.open > .dropdown-toggle.btn-success {
+ background-image: none;
+}
+.btn-success.disabled:hover,
+.btn-success[disabled]:hover,
+fieldset[disabled] .btn-success:hover,
+.btn-success.disabled:focus,
+.btn-success[disabled]:focus,
+fieldset[disabled] .btn-success:focus,
+.btn-success.disabled.focus,
+.btn-success[disabled].focus,
+fieldset[disabled] .btn-success.focus {
+ background-color: #5cb85c;
+ border-color: #4cae4c;
+}
+.btn-success .badge {
+ color: #5cb85c;
+ background-color: #ffffff;
+}
+.btn-info {
+ color: #ffffff;
+ background-color: #5bc0de;
+ border-color: #46b8da;
+}
+.btn-info:focus,
+.btn-info.focus {
+ color: #ffffff;
+ background-color: #31b0d5;
+ border-color: #1b6d85;
+}
+.btn-info:hover {
+ color: #ffffff;
+ background-color: #31b0d5;
+ border-color: #269abc;
+}
+.btn-info:active,
+.btn-info.active,
+.open > .dropdown-toggle.btn-info {
+ color: #ffffff;
+ background-color: #31b0d5;
+ border-color: #269abc;
+}
+.btn-info:active:hover,
+.btn-info.active:hover,
+.open > .dropdown-toggle.btn-info:hover,
+.btn-info:active:focus,
+.btn-info.active:focus,
+.open > .dropdown-toggle.btn-info:focus,
+.btn-info:active.focus,
+.btn-info.active.focus,
+.open > .dropdown-toggle.btn-info.focus {
+ color: #ffffff;
+ background-color: #269abc;
+ border-color: #1b6d85;
+}
+.btn-info:active,
+.btn-info.active,
+.open > .dropdown-toggle.btn-info {
+ background-image: none;
+}
+.btn-info.disabled:hover,
+.btn-info[disabled]:hover,
+fieldset[disabled] .btn-info:hover,
+.btn-info.disabled:focus,
+.btn-info[disabled]:focus,
+fieldset[disabled] .btn-info:focus,
+.btn-info.disabled.focus,
+.btn-info[disabled].focus,
+fieldset[disabled] .btn-info.focus {
+ background-color: #5bc0de;
+ border-color: #46b8da;
+}
+.btn-info .badge {
+ color: #5bc0de;
+ background-color: #ffffff;
+}
+.btn-warning {
+ color: #ffffff;
+ background-color: #f0ad4e;
+ border-color: #eea236;
+}
+.btn-warning:focus,
+.btn-warning.focus {
+ color: #ffffff;
+ background-color: #ec971f;
+ border-color: #985f0d;
+}
+.btn-warning:hover {
+ color: #ffffff;
+ background-color: #ec971f;
+ border-color: #d58512;
+}
+.btn-warning:active,
+.btn-warning.active,
+.open > .dropdown-toggle.btn-warning {
+ color: #ffffff;
+ background-color: #ec971f;
+ border-color: #d58512;
+}
+.btn-warning:active:hover,
+.btn-warning.active:hover,
+.open > .dropdown-toggle.btn-warning:hover,
+.btn-warning:active:focus,
+.btn-warning.active:focus,
+.open > .dropdown-toggle.btn-warning:focus,
+.btn-warning:active.focus,
+.btn-warning.active.focus,
+.open > .dropdown-toggle.btn-warning.focus {
+ color: #ffffff;
+ background-color: #d58512;
+ border-color: #985f0d;
+}
+.btn-warning:active,
+.btn-warning.active,
+.open > .dropdown-toggle.btn-warning {
+ background-image: none;
+}
+.btn-warning.disabled:hover,
+.btn-warning[disabled]:hover,
+fieldset[disabled] .btn-warning:hover,
+.btn-warning.disabled:focus,
+.btn-warning[disabled]:focus,
+fieldset[disabled] .btn-warning:focus,
+.btn-warning.disabled.focus,
+.btn-warning[disabled].focus,
+fieldset[disabled] .btn-warning.focus {
+ background-color: #f0ad4e;
+ border-color: #eea236;
+}
+.btn-warning .badge {
+ color: #f0ad4e;
+ background-color: #ffffff;
+}
+.btn-danger {
+ color: #ffffff;
+ background-color: #d9534f;
+ border-color: #d43f3a;
+}
+.btn-danger:focus,
+.btn-danger.focus {
+ color: #ffffff;
+ background-color: #c9302c;
+ border-color: #761c19;
+}
+.btn-danger:hover {
+ color: #ffffff;
+ background-color: #c9302c;
+ border-color: #ac2925;
+}
+.btn-danger:active,
+.btn-danger.active,
+.open > .dropdown-toggle.btn-danger {
+ color: #ffffff;
+ background-color: #c9302c;
+ border-color: #ac2925;
+}
+.btn-danger:active:hover,
+.btn-danger.active:hover,
+.open > .dropdown-toggle.btn-danger:hover,
+.btn-danger:active:focus,
+.btn-danger.active:focus,
+.open > .dropdown-toggle.btn-danger:focus,
+.btn-danger:active.focus,
+.btn-danger.active.focus,
+.open > .dropdown-toggle.btn-danger.focus {
+ color: #ffffff;
+ background-color: #ac2925;
+ border-color: #761c19;
+}
+.btn-danger:active,
+.btn-danger.active,
+.open > .dropdown-toggle.btn-danger {
+ background-image: none;
+}
+.btn-danger.disabled:hover,
+.btn-danger[disabled]:hover,
+fieldset[disabled] .btn-danger:hover,
+.btn-danger.disabled:focus,
+.btn-danger[disabled]:focus,
+fieldset[disabled] .btn-danger:focus,
+.btn-danger.disabled.focus,
+.btn-danger[disabled].focus,
+fieldset[disabled] .btn-danger.focus {
+ background-color: #d9534f;
+ border-color: #d43f3a;
+}
+.btn-danger .badge {
+ color: #d9534f;
+ background-color: #ffffff;
+}
+.btn-link {
+ color: #337ab7;
+ font-weight: normal;
+ border-radius: 0;
+}
+.btn-link,
+.btn-link:active,
+.btn-link.active,
+.btn-link[disabled],
+fieldset[disabled] .btn-link {
+ background-color: transparent;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+.btn-link,
+.btn-link:hover,
+.btn-link:focus,
+.btn-link:active {
+ border-color: transparent;
+}
+.btn-link:hover,
+.btn-link:focus {
+ color: #23527c;
+ text-decoration: underline;
+ background-color: transparent;
+}
+.btn-link[disabled]:hover,
+fieldset[disabled] .btn-link:hover,
+.btn-link[disabled]:focus,
+fieldset[disabled] .btn-link:focus {
+ color: #777777;
+ text-decoration: none;
+}
+.btn-lg,
+.btn-group-lg > .btn {
+ padding: 10px 16px;
+ font-size: 18px;
+ line-height: 1.3333333;
+ border-radius: 6px;
+}
+.btn-sm,
+.btn-group-sm > .btn {
+ padding: 5px 10px;
+ font-size: 12px;
+ line-height: 1.5;
+ border-radius: 3px;
+}
+.btn-xs,
+.btn-group-xs > .btn {
+ padding: 1px 5px;
+ font-size: 12px;
+ line-height: 1.5;
+ border-radius: 3px;
+}
+.btn-block {
+ display: block;
+ width: 100%;
+}
+.btn-block + .btn-block {
+ margin-top: 5px;
+}
+input[type="submit"].btn-block,
+input[type="reset"].btn-block,
+input[type="button"].btn-block {
+ width: 100%;
+}
\ No newline at end of file
diff --git a/css/roojs-debug.css b/css/roojs-debug.css
index dd07311e1b..0263f35a8e 100644
--- a/css/roojs-debug.css
+++ b/css/roojs-debug.css
@@ -29,3 +29,9 @@
@import url("inline-editor.css");
@import url("undoreset.css");
+
+/* css for Roo.dialog.UploadCropbox */
+@import url("alert.css");
+@import url("buttons.css");
+@import url("button-groups.css");
+@import url("upload-cropbox.css");
diff --git a/css/roojs.css b/css/roojs.css
index 0e75e04f12..fe0737c741 100644
--- a/css/roojs.css
+++ b/css/roojs.css
@@ -16,3 +16,7 @@ x-date{background:white;padding:2px;border:1px solid gray;z-index:12001;-moz-out
.x-form-daypick-item td div{width:30px;text-align:center;}.x-form-daypick-icons td img{background:url(../images/default/menu/chk-sprite.gif) no-repeat 0 0;width:16px;height:16px;margin:0;margin-left:5px;cursor:pointer;}.x-form-daypick-icons td img.x-menu-item-checked{background-position:0 -16px;}
.x-html-editor-wrap{background-color:#fff;border:1px solid #a3bac9;}.x-html-editor-tb{height:24px;}.x-html-editor-tb .x-toolbar{height:24px;}.x-html-editor-tb .x-toolbar>table{position:absolute;}.x-html-editor-tb .x-btn-text{background:transparent url(../images/default/form/htmleditor.gif) no-repeat scroll 0 0;}.x-html-editor-tb .x-btn-text{min-width:18px;}.x-html-editor-tb .x-edit-bold .x-btn-text{background-position:0 0;}.x-html-editor-tb .x-edit-italic .x-btn-text{background-position:0 -16px;}.x-html-editor-tb .x-edit-underline .x-btn-text{background-position:0 -32px;}.x-html-editor-tb .x-edit-strikethrough .x-btn-text{background-position:0 -223px;}.x-html-editor-tb .x-edit-increasefontsize .x-btn-text{background-position:0 -48px;}.x-html-editor-tb .x-edit-decreasefontsize .x-btn-text{background-position:0 -64px;}.x-html-editor-tb .x-edit-insertorderedlist .x-btn-text{background-position:0 -80px;}.x-html-editor-tb .x-edit-insertunorderedlist .x-btn-text{background-position:0 -96px;}.x-html-editor-tb .x-edit-justifyleft .x-btn-text{background-position:0 -112px;}.x-html-editor-tb .x-edit-justifycenter .x-btn-text{background-position:0 -128px;}.x-html-editor-tb .x-edit-justifyright .x-btn-text{background-position:0 -144px;}.x-html-editor-tb .x-edit-forecolor .x-btn-text{background-position:0 -160px;}.x-html-editor-tb .x-edit-backcolor .x-btn-text{background-position:0 -176px;}.x-html-editor-tb .x-edit-sourceedit .x-btn-text{background-position:0 -192px;}.x-html-editor-tb .x-edit-createlink .x-btn-text{background-position:0 -208px;}.x-html-editor-tb .x-edit-none .x-btn-text{background:transparent none 0 0;}.x-html-editor-tb .x-toolbar .x-btn{margin-left:0;margin-right:0;}.x-html-editor-wrap .x-toolbar{height:20px;}.x-html-editor-wrap .x-editor-context span{cursor:pointer;}.x-html-editor-wrap .x-editor-context span:hover{text-decoration:underline;}.roo-htmleditor-body ol li{list-style:decimal outside;}.roo-htmleditor-body ul li{list-style:disc outside;}.roo-htmleditor-body ol,.roo-htmleditor-body ul,.roo-htmleditor-body dl{margin-left:2em;}.roo-htmleditor-body::selection,.roo-htmleditor-body *::selection{background:#d9e8fb;}.roo-htmleditor-body table.roo-ed-selection,.roo-htmleditor-body td.roo-ed-selection{background-color:#d9e8fb;}
.undoreset div,.undoreset span,.undoreset applet,.undoreset object,.undoreset iframe,.undoreset h1,.undoreset h2,.undoreset h3,.undoreset h4,.undoreset h5,.undoreset h6,.undoreset p,.undoreset blockquote,.undoreset pre,.undoreset a,.undoreset abbr,.undoreset acronym,.undoreset address,.undoreset big,.undoreset cite,.undoreset code,.undoreset del,.undoreset dfn,.undoreset em,.undoreset img,.undoreset ins,.undoreset kbd,.undoreset q,.undoreset s,.undoreset samp,.undoreset small,.undoreset strike,.undoreset strong,.undoreset sub,.undoreset sup,.undoreset tt,.undoreset var,.undoreset b,.undoreset u,.undoreset i,.undoreset center,.undoreset dl,.undoreset dt,.undoreset dd,.undoreset ol,.undoreset ul,.undoreset li,.undoreset fieldset,.undoreset form,.undoreset label,.undoreset legend,.undoreset table,.undoreset caption,.undoreset tbody,.undoreset tfoot,.undoreset thead,.undoreset tr,.undoreset th,.undoreset td,.undoreset article,.undoreset aside,.undoreset canvas,.undoreset details,.undoreset embed,.undoreset figure,.undoreset figcaption,.undoreset footer,.undoreset header,.undoreset hgroup,.undoreset menu,.undoreset nav,.undoreset output,.undoreset ruby,.undoreset section,.undoreset summary,.undoreset time,.undoreset mark,.undoreset audio,.undoreset video{margin-bottom:1em;}.undoreset strong,.undoreset th{font-weight:bold;}.undoreset em,.undoreset address,.undoreset caption,.undoreset cite{font-style:italic;}.undoreset table{display:table;border-spacing:2px;border-collapse:separate;}.undoreset tr{display:table-row;vertical-align:inherit;}.undoreset td{display:table-cell;border-spacing:2px;padding:2px;vertical-align:inherit;text-align:inherit;padding:1px;border-collapse:none;}.undoreset th{display:table-cell;vertical-align:inherit;font-weight:bold;padding:1px;border-collapse:none;}.undoreset p{display:block;margin:1em 0;}.undoreset blockquote{display:block;margin:1em 40px;}.undoreset address{display:block;font-style:italic;}.undoreset center{display:block;text-align:center;}.undoreset h1{display:block;font-size:2em;font-weight:bold;margin:.67em 0;}.undoreset h2{display:block;font-size:1.5em;font-weight:bold;margin:.83em 0;}.undoreset h3{display:block;font-size:1.17em;font-weight:bold;margin:1em 0;}.undoreset h4{display:block;font-weight:bold;margin:1.33em 0;}.undoreset h5{display:block;font-size:.83em;font-weight:bold;margin:1.67em 0;}.undoreset h6{display:block;font-size:.67em;font-weight:bold;margin:2.33em 0;}.undoreset ul{display:block;list-style-type:disc;margin:1em 0;padding-left:40px;}.undoreset ol{display:block;list-style-type:decimal;margin:1em 0;padding-left:40px;}.undoreset li{display:list-item;}.undoreset pre,.undoreset code{display:block;font-family:Courier New;white-space:pre;margin:1em 0;}.roo-htmleditor-body [contenteditable=true]:focus-visible{background-color:#fafafa;padding:0 5px;;}.roo-htmleditor-body [contenteditable=true]:hover{border:1px solid #ccc;}
+.alert{padding:15px;margin-bottom:20px;border:1px solid transparent;border-radius:4px;}.alert h4{margin-top:0;color:inherit;}.alert .alert-link{font-weight:bold;}.alert>p,.alert>ul{margin-bottom:0;}.alert>p+p{margin-top:5px;}.alert-dismissable,.alert-dismissible{padding-right:35px;}.alert-dismissable .close,.alert-dismissible .close{position:relative;top:-2px;right:-21px;color:inherit;}.alert-success{background-color:#dff0d8;border-color:#d6e9c6;color:#3c763d;}.alert-success hr{border-top-color:#c9e2b3;}.alert-success .alert-link{color:#2b542c;}.alert-info{background-color:#d9edf7;border-color:#bce8f1;color:#31708f;}.alert-info hr{border-top-color:#a6e1ec;}.alert-info .alert-link{color:#245269;}.alert-warning{background-color:#fcf8e3;border-color:#faebcc;color:#8a6d3b;}.alert-warning hr{border-top-color:#f7e1b5;}.alert-warning .alert-link{color:#66512c;}.alert-danger{background-color:#f2dede;border-color:#ebccd1;color:#a94442;}.alert-danger hr{border-top-color:#e4b9c0;}.alert-danger .alert-link{color:#843534;}
+.btn{display:inline-block;margin-bottom:0;font-weight:normal;text-align:center;vertical-align:middle;touch-action:manipulation;cursor:pointer;background-image:none;border:1px solid transparent;white-space:nowrap;padding:6px 12px;font-size:14px;line-height:1.42857143;border-radius:4px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}.btn:focus,.btn:active:focus,.btn.active:focus,.btn.focus,.btn:active.focus,.btn.active.focus{outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;}.btn:hover,.btn:focus,.btn.focus{color:#333;text-decoration:none;}.btn:active,.btn.active{outline:0;background-image:none;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,0.125);box-shadow:inset 0 3px 5px rgba(0,0,0,0.125);}.btn.disabled,.btn[disabled],fieldset[disabled] .btn{cursor:not-allowed;opacity:.65;filter:alpha(opacity=65);-webkit-box-shadow:none;box-shadow:none;}a.btn.disabled,fieldset[disabled] a.btn{pointer-events:none;}.btn-default{color:#333;background-color:#fff;border-color:#ccc;}.btn-default:focus,.btn-default.focus{color:#333;background-color:#e6e6e6;border-color:#8c8c8c;}.btn-default:hover{color:#333;background-color:#e6e6e6;border-color:#adadad;}.btn-default:active,.btn-default.active,.open>.dropdown-toggle.btn-default{color:#333;background-color:#e6e6e6;border-color:#adadad;}.btn-default:active:hover,.btn-default.active:hover,.open>.dropdown-toggle.btn-default:hover,.btn-default:active:focus,.btn-default.active:focus,.open>.dropdown-toggle.btn-default:focus,.btn-default:active.focus,.btn-default.active.focus,.open>.dropdown-toggle.btn-default.focus{color:#333;background-color:#d4d4d4;border-color:#8c8c8c;}.btn-default:active,.btn-default.active,.open>.dropdown-toggle.btn-default{background-image:none;}.btn-default.disabled:hover,.btn-default[disabled]:hover,fieldset[disabled] .btn-default:hover,.btn-default.disabled:focus,.btn-default[disabled]:focus,fieldset[disabled] .btn-default:focus,.btn-default.disabled.focus,.btn-default[disabled].focus,fieldset[disabled] .btn-default.focus{background-color:#fff;border-color:#ccc;}.btn-default .badge{color:#fff;background-color:#333;}.btn-primary{color:#fff;background-color:#337ab7;border-color:#2e6da4;}.btn-primary:focus,.btn-primary.focus{color:#fff;background-color:#286090;border-color:#122b40;}.btn-primary:hover{color:#fff;background-color:#286090;border-color:#204d74;}.btn-primary:active,.btn-primary.active,.open>.dropdown-toggle.btn-primary{color:#fff;background-color:#286090;border-color:#204d74;}.btn-primary:active:hover,.btn-primary.active:hover,.open>.dropdown-toggle.btn-primary:hover,.btn-primary:active:focus,.btn-primary.active:focus,.open>.dropdown-toggle.btn-primary:focus,.btn-primary:active.focus,.btn-primary.active.focus,.open>.dropdown-toggle.btn-primary.focus{color:#fff;background-color:#204d74;border-color:#122b40;}.btn-primary:active,.btn-primary.active,.open>.dropdown-toggle.btn-primary{background-image:none;}.btn-primary.disabled:hover,.btn-primary[disabled]:hover,fieldset[disabled] .btn-primary:hover,.btn-primary.disabled:focus,.btn-primary[disabled]:focus,fieldset[disabled] .btn-primary:focus,.btn-primary.disabled.focus,.btn-primary[disabled].focus,fieldset[disabled] .btn-primary.focus{background-color:#337ab7;border-color:#2e6da4;}.btn-primary .badge{color:#337ab7;background-color:#fff;}.btn-success{color:#fff;background-color:#5cb85c;border-color:#4cae4c;}.btn-success:focus,.btn-success.focus{color:#fff;background-color:#449d44;border-color:#255625;}.btn-success:hover{color:#fff;background-color:#449d44;border-color:#398439;}.btn-success:active,.btn-success.active,.open>.dropdown-toggle.btn-success{color:#fff;background-color:#449d44;border-color:#398439;}.btn-success:active:hover,.btn-success.active:hover,.open>.dropdown-toggle.btn-success:hover,.btn-success:active:focus,.btn-success.active:focus,.open>.dropdown-toggle.btn-success:focus,.btn-success:active.focus,.btn-success.active.focus,.open>.dropdown-toggle.btn-success.focus{color:#fff;background-color:#398439;border-color:#255625;}.btn-success:active,.btn-success.active,.open>.dropdown-toggle.btn-success{background-image:none;}.btn-success.disabled:hover,.btn-success[disabled]:hover,fieldset[disabled] .btn-success:hover,.btn-success.disabled:focus,.btn-success[disabled]:focus,fieldset[disabled] .btn-success:focus,.btn-success.disabled.focus,.btn-success[disabled].focus,fieldset[disabled] .btn-success.focus{background-color:#5cb85c;border-color:#4cae4c;}.btn-success .badge{color:#5cb85c;background-color:#fff;}.btn-info{color:#fff;background-color:#5bc0de;border-color:#46b8da;}.btn-info:focus,.btn-info.focus{color:#fff;background-color:#31b0d5;border-color:#1b6d85;}.btn-info:hover{color:#fff;background-color:#31b0d5;border-color:#269abc;}.btn-info:active,.btn-info.active,.open>.dropdown-toggle.btn-info{color:#fff;background-color:#31b0d5;border-color:#269abc;}.btn-info:active:hover,.btn-info.active:hover,.open>.dropdown-toggle.btn-info:hover,.btn-info:active:focus,.btn-info.active:focus,.open>.dropdown-toggle.btn-info:focus,.btn-info:active.focus,.btn-info.active.focus,.open>.dropdown-toggle.btn-info.focus{color:#fff;background-color:#269abc;border-color:#1b6d85;}.btn-info:active,.btn-info.active,.open>.dropdown-toggle.btn-info{background-image:none;}.btn-info.disabled:hover,.btn-info[disabled]:hover,fieldset[disabled] .btn-info:hover,.btn-info.disabled:focus,.btn-info[disabled]:focus,fieldset[disabled] .btn-info:focus,.btn-info.disabled.focus,.btn-info[disabled].focus,fieldset[disabled] .btn-info.focus{background-color:#5bc0de;border-color:#46b8da;}.btn-info .badge{color:#5bc0de;background-color:#fff;}.btn-warning{color:#fff;background-color:#f0ad4e;border-color:#eea236;}.btn-warning:focus,.btn-warning.focus{color:#fff;background-color:#ec971f;border-color:#985f0d;}.btn-warning:hover{color:#fff;background-color:#ec971f;border-color:#d58512;}.btn-warning:active,.btn-warning.active,.open>.dropdown-toggle.btn-warning{color:#fff;background-color:#ec971f;border-color:#d58512;}.btn-warning:active:hover,.btn-warning.active:hover,.open>.dropdown-toggle.btn-warning:hover,.btn-warning:active:focus,.btn-warning.active:focus,.open>.dropdown-toggle.btn-warning:focus,.btn-warning:active.focus,.btn-warning.active.focus,.open>.dropdown-toggle.btn-warning.focus{color:#fff;background-color:#d58512;border-color:#985f0d;}.btn-warning:active,.btn-warning.active,.open>.dropdown-toggle.btn-warning{background-image:none;}.btn-warning.disabled:hover,.btn-warning[disabled]:hover,fieldset[disabled] .btn-warning:hover,.btn-warning.disabled:focus,.btn-warning[disabled]:focus,fieldset[disabled] .btn-warning:focus,.btn-warning.disabled.focus,.btn-warning[disabled].focus,fieldset[disabled] .btn-warning.focus{background-color:#f0ad4e;border-color:#eea236;}.btn-warning .badge{color:#f0ad4e;background-color:#fff;}.btn-danger{color:#fff;background-color:#d9534f;border-color:#d43f3a;}.btn-danger:focus,.btn-danger.focus{color:#fff;background-color:#c9302c;border-color:#761c19;}.btn-danger:hover{color:#fff;background-color:#c9302c;border-color:#ac2925;}.btn-danger:active,.btn-danger.active,.open>.dropdown-toggle.btn-danger{color:#fff;background-color:#c9302c;border-color:#ac2925;}.btn-danger:active:hover,.btn-danger.active:hover,.open>.dropdown-toggle.btn-danger:hover,.btn-danger:active:focus,.btn-danger.active:focus,.open>.dropdown-toggle.btn-danger:focus,.btn-danger:active.focus,.btn-danger.active.focus,.open>.dropdown-toggle.btn-danger.focus{color:#fff;background-color:#ac2925;border-color:#761c19;}.btn-danger:active,.btn-danger.active,.open>.dropdown-toggle.btn-danger{background-image:none;}.btn-danger.disabled:hover,.btn-danger[disabled]:hover,fieldset[disabled] .btn-danger:hover,.btn-danger.disabled:focus,.btn-danger[disabled]:focus,fieldset[disabled] .btn-danger:focus,.btn-danger.disabled.focus,.btn-danger[disabled].focus,fieldset[disabled] .btn-danger.focus{background-color:#d9534f;border-color:#d43f3a;}.btn-danger .badge{color:#d9534f;background-color:#fff;}.btn-link{color:#337ab7;font-weight:normal;border-radius:0;}.btn-link,.btn-link:active,.btn-link.active,.btn-link[disabled],fieldset[disabled] .btn-link{background-color:transparent;-webkit-box-shadow:none;box-shadow:none;}.btn-link,.btn-link:hover,.btn-link:focus,.btn-link:active{border-color:transparent;}.btn-link:hover,.btn-link:focus{color:#23527c;text-decoration:underline;background-color:transparent;}.btn-link[disabled]:hover,fieldset[disabled] .btn-link:hover,.btn-link[disabled]:focus,fieldset[disabled] .btn-link:focus{color:#777;text-decoration:none;}.btn-lg,.btn-group-lg>.btn{padding:10px 16px;font-size:18px;line-height:1.3333333;border-radius:6px;}.btn-sm,.btn-group-sm>.btn{padding:5px 10px;font-size:12px;line-height:1.5;border-radius:3px;}.btn-xs,.btn-group-xs>.btn{padding:1px 5px;font-size:12px;line-height:1.5;border-radius:3px;}.btn-block{display:block;width:100%;}.btn-block+.btn-block{margin-top:5px;}input[type="submit"].btn-block,input[type="reset"].btn-block,input[type="button"].btn-block{width:100%;}
+.btn-group,.btn-group-vertical{position:relative;display:inline-block;vertical-align:middle;}.btn-group>.btn,.btn-group-vertical>.btn{position:relative;float:left;}.btn-group>.btn:hover,.btn-group-vertical>.btn:hover,.btn-group>.btn:focus,.btn-group-vertical>.btn:focus,.btn-group>.btn:active,.btn-group-vertical>.btn:active,.btn-group>.btn.active,.btn-group-vertical>.btn.active{z-index:2;}.btn-group .btn+.btn,.btn-group .btn+.btn-group,.btn-group .btn-group+.btn,.btn-group .btn-group+.btn-group{margin-left:-1px;}.btn-toolbar{margin-left:-5px;}.btn-toolbar .btn,.btn-toolbar .btn-group,.btn-toolbar .input-group{float:left;}.btn-toolbar>.btn,.btn-toolbar>.btn-group,.btn-toolbar>.input-group{margin-left:5px;}.btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle){border-radius:0;}.btn-group>.btn:first-child{margin-left:0;}.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle){border-bottom-right-radius:0;border-top-right-radius:0;}.btn-group>.btn:last-child:not(:first-child),.btn-group>.dropdown-toggle:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0;}.btn-group>.btn-group{float:left;}.btn-group>.btn-group:not(:first-child):not(:last-child)>.btn{border-radius:0;}.btn-group>.btn-group:first-child:not(:last-child)>.btn:last-child,.btn-group>.btn-group:first-child:not(:last-child)>.dropdown-toggle{border-bottom-right-radius:0;border-top-right-radius:0;}.btn-group>.btn-group:last-child:not(:first-child)>.btn:first-child{border-bottom-left-radius:0;border-top-left-radius:0;}.btn-group .dropdown-toggle:active,.btn-group.open .dropdown-toggle{outline:0;}.btn-group>.btn+.dropdown-toggle{padding-left:8px;padding-right:8px;}.btn-group>.btn-lg+.dropdown-toggle{padding-left:12px;padding-right:12px;}.btn-group.open .dropdown-toggle{-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,0.125);box-shadow:inset 0 3px 5px rgba(0,0,0,0.125);}.btn-group.open .dropdown-toggle.btn-link{-webkit-box-shadow:none;box-shadow:none;}.btn .caret{margin-left:0;}.btn-lg .caret{border-width:5px 5px 0;border-bottom-width:0;}.dropup .btn-lg .caret{border-width:0 5px 5px;}.btn-group-vertical>.btn,.btn-group-vertical>.btn-group,.btn-group-vertical>.btn-group>.btn{display:block;float:none;width:100%;max-width:100%;}.btn-group-vertical>.btn-group>.btn{float:none;}.btn-group-vertical>.btn+.btn,.btn-group-vertical>.btn+.btn-group,.btn-group-vertical>.btn-group+.btn,.btn-group-vertical>.btn-group+.btn-group{margin-top:-1px;margin-left:0;}.btn-group-vertical>.btn:not(:first-child):not(:last-child){border-radius:0;}.btn-group-vertical>.btn:first-child:not(:last-child){border-top-right-radius:4px;border-top-left-radius:4px;border-bottom-right-radius:0;border-bottom-left-radius:0;}.btn-group-vertical>.btn:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-right-radius:4px;border-bottom-left-radius:4px;}.btn-group-vertical>.btn-group:not(:first-child):not(:last-child)>.btn{border-radius:0;}.btn-group-vertical>.btn-group:first-child:not(:last-child)>.btn:last-child,.btn-group-vertical>.btn-group:first-child:not(:last-child)>.dropdown-toggle{border-bottom-right-radius:0;border-bottom-left-radius:0;}.btn-group-vertical>.btn-group:last-child:not(:first-child)>.btn:first-child{border-top-right-radius:0;border-top-left-radius:0;}.btn-group-justified{display:table;width:100%;table-layout:fixed;border-collapse:separate;}.btn-group-justified>.btn,.btn-group-justified>.btn-group{float:none;display:table-cell;width:1%;}.btn-group-justified>.btn-group .btn{width:100%;}.btn-group-justified>.btn-group .dropdown-menu{left:auto;}[data-toggle="buttons"]>.btn input[type="radio"],[data-toggle="buttons"]>.btn-group>.btn input[type="radio"],[data-toggle="buttons"]>.btn input[type="checkbox"],[data-toggle="buttons"]>.btn-group>.btn input[type="checkbox"]{position:absolute;clip:rect(0,0,0,0);pointer-events:none;}
+.roo-upload-cropbox-selector{visibility:hidden;height:0;}.roo-upload-cropbox-dialog .modal-header,.roo-upload-cropbox-dialog .modal-footer{padding-top:5px;padding-bottom:5px;}.roo-upload-cropbox-body{background-color:#fff;border:1px solid #777;width:100%;height:450px;max-height:450px;position:relative;overflow:hidden;cursor:move;}.roo-upload-cropbox-preview{position:absolute;top:0;left:0;text-align:center;margin:0;padding:0;border:none;}.roo-upload-cropbox-body .roo-upload-cropbox-thumb{position:absolute;box-sizing:border-box;border:1px solid #777;box-shadow:0 0 0 1000px rgba(0,0,0,0.5);background:none repeat scroll 0 0 transparent;}.roo-upload-cropbox-body .roo-upload-cropbox-empty-notify{height:100%;background-color:rgba(0,0,0,0.5);color:#fff;font-weight:bold;font-size:24px;text-align:center;padding-top:50px;font-style:italic;}.roo-upload-cropbox-btn-group button{background-color:#000;color:#fff;border-color:#333;}.roo-upload-cropbox-error-notify{border-radius:0;text-align:center;padding:0!important;margin:0!important;position:absolute;top:0;left:0;}
diff --git a/css/upload-cropbox.css b/css/upload-cropbox.css
new file mode 100644
index 0000000000..f8500935aa
--- /dev/null
+++ b/css/upload-cropbox.css
@@ -0,0 +1,62 @@
+.roo-upload-cropbox-selector {
+ visibility: hidden;
+ height: 0px;
+}
+.roo-upload-cropbox-dialog .modal-header,
+.roo-upload-cropbox-dialog .modal-footer {
+ padding-top: 5px;
+ padding-bottom: 5px;
+}
+.roo-upload-cropbox-body {
+ background-color: #ffffff;
+ border: 1px solid #777777;
+ width: 100%;
+ height: 450px;
+ max-height: 450px;
+ position: relative;
+ overflow: hidden;
+ cursor: move;
+}
+.roo-upload-cropbox-preview {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ text-align: center;
+ margin: 0px;
+ padding: 0px;
+ border: none;
+}
+.roo-upload-cropbox-body .roo-upload-cropbox-thumb {
+ position: absolute;
+ /* top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);*/
+ box-sizing: border-box;
+ border: 1px solid #777777;
+ box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.5);
+ background: none repeat scroll 0% 0% transparent;
+}
+.roo-upload-cropbox-body .roo-upload-cropbox-empty-notify {
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.5);
+ color: #ffffff;
+ font-weight: bold;
+ font-size: 24px;
+ text-align: center;
+ padding-top: 50px;
+ font-style: italic;
+}
+.roo-upload-cropbox-btn-group button {
+ background-color: #000000;
+ color: #ffffff;
+ border-color: #333333;
+}
+.roo-upload-cropbox-error-notify {
+ border-radius: 0px;
+ text-align: center;
+ padding: 0px !important;
+ margin: 0px !important;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
\ No newline at end of file
diff --git a/examples/dialog/hello.html b/examples/dialog/hello.html
index ab43ed9999..ec001bf313 100644
--- a/examples/dialog/hello.html
+++ b/examples/dialog/hello.html
@@ -1,27 +1,27 @@
-
-
-
-
-Hello World Dialog Example
+
+
+
+
+Hello World Dialog Example
-
-
-
-
-
-
-
-
-
-Hello World Dialog
-This example shows how to create a very simple modal BasicDialog with "autoTabs".
-
+
+
+
+
+
+
+
+
+
+Hello World Dialog
+This example shows how to create a very simple modal BasicDialog with "autoTabs".
+
Note that the js is not minified so it is readable. See
-for the full source code.
-Here's snapshot of the code that creates the dialog:
+for the full source code.
+Here's snapshot of the code that creates the dialog:
Roo.BLANK_IMAGE_URL = "../../images/default/s.gif";
@@ -121,29 +121,29 @@ Roo.onReady(function() {
Roo.get('show-dialog-btn').on('click',function () {
HelloWorld.show({ _el : this});
});
-});
-
-
-
-
-
-
-
+});
+
+
+
+
+
+
+
diff --git a/examples/dialog/uploadCropbox.html b/examples/dialog/uploadCropbox.html
new file mode 100644
index 0000000000..79ac18bc00
--- /dev/null
+++ b/examples/dialog/uploadCropbox.html
@@ -0,0 +1,31 @@
+
+
+
+
+ Upload Cropbox Dialog Example
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Upload Cropbox Dialog
+This example shows how to create a very simple BasicDialog with "UploadCropbox".
+
+Note that the js is not minified so it is readable. See
+for the full source code.
+
+
+
+
diff --git a/examples/dialog/uploadCropbox.js b/examples/dialog/uploadCropbox.js
new file mode 100644
index 0000000000..7604320283
--- /dev/null
+++ b/examples/dialog/uploadCropbox.js
@@ -0,0 +1,179 @@
+var uploadCropbox = {
+ dialog : false,
+ callback : false,
+
+ show : function(data, cb)
+ {
+ if (!this.dialog) {
+ this.create();
+ }
+
+ this.callback = cb;
+ this.data = data;
+ this.dialog.show();
+ },
+
+ create : function()
+ {
+ var _this = this;
+ this.dialog = Roo.factory({
+ xns : Roo,
+ xtype : 'LayoutDialog',
+ width : 800,
+ height : 600,
+ center : {
+ xns : Roo,
+ xtype : 'LayoutRegion'
+ },
+ items : [
+ {
+ xtype: 'ContentPanel',
+ xns: Roo,
+ region : "center",
+ items : [
+ {
+ xtype : 'UploadCropbox',
+ xns : Roo.dialog,
+ minWidth : 720,
+ minHeight : 480,
+ outputMaxWidth : 1300,
+ url: 'http://localhost/web.MediaOutreach/press.local.php/Roo/Images.php',
+ buttons: [],
+ listeners : {
+ render : function (_self)
+ {
+ _this.cropbox = _self;
+ },
+ loadcanvas : function (_self, imageEl)
+ {
+ if(imageEl.OriginWidth < 720) {
+ Roo.Msg.show({
+ title: 'Error',
+ msg: "Image width should be at least 720",
+ buttons: {ok : true},
+ fn: function(res) {
+ _this.cropbox.selectorEl.dom.value = '';
+ _this.cropbox.selectorEl.dom.click();
+ }
+ });
+ return false;
+ }
+ },
+ arrange : function (_self, formData)
+ {
+ formData.append("onid", "43024");
+ formData.append("ontable", "pressrelease_boilerplate");
+ }
+ }
+ }
+ ]
+ }
+ ],
+ buttons : [
+ {
+ xtype : 'Button',
+ xns : Roo,
+ text : 'Save',
+ listeners : {
+ click : function () {
+ _this.cropbox.crop();
+ _this.dialog.hide();
+ }
+ }
+ },
+ {
+ xtype : 'Button',
+ xns : Roo,
+ text : 'Cancel',
+ listeners : {
+ click : function () {
+ _this.dialog.hide();
+ }
+ }
+ }
+ ]
+ });
+ }
+}
+
+var test = {
+
+ dialog : false,
+ callback : false,
+
+ show : function(data, cb)
+ {
+ if (!this.dialog) {
+ this.create();
+ }
+
+ this.callback = cb;
+ this.data = data;
+ this.dialog.show();
+ },
+
+ create : function()
+ {
+ var _this = this;
+ this.dialog = Roo.factory({
+ xns : Roo,
+ xtype : 'LayoutDialog',
+ width : 600,
+ height : 450,
+ center : {
+ xns : Roo,
+ xtype : 'LayoutRegion'
+ },
+ items : [
+ {
+ xns : Roo,
+ xtype: 'GridPanel',
+ region : "center",
+ grid : {
+ xns : Roo.grid,
+ xtype : 'Grid',
+ cm : [
+ {
+ xns : Roo.grid,
+ xtype : 'ColumnModel',
+ header : 'test'
+ }
+ ],
+ ds : {
+ xns: Roo.data,
+ xtype: 'Store'
+ },
+ toolbar : {
+ xns: Roo,
+ xtype: 'Toolbar',
+ items : [
+ {
+ xtype : 'Button',
+ text : 'Add',
+ listeners : {
+ click : function () {
+ uploadCropbox.show();
+ document.body.onfocus = function(e) {
+ if(!uploadCropbox.cropbox.selectorEl.dom.files.length) {
+ uploadCropbox.dialog.hide();
+ }
+ }
+ uploadCropbox.cropbox.selectorEl.dom.click();
+ }
+ }
+ }
+ ]
+ }
+ }
+ }
+ ],
+ });
+ }
+}
+
+Roo.onReady(function() {
+
+ Roo.get('show-dialog-btn').on('click',function () {
+ test.show({});
+ });
+});
\ No newline at end of file
diff --git a/roojs-all.js b/roojs-all.js
index ab95b0181b..f5ddaf1948 100644
--- a/roojs-all.js
+++ b/roojs-all.js
@@ -2551,9 +2551,9 @@ return this.el.getUpdateManager();},_handleRefresh:function(A,B,C){if(!C||!this.
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);
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);
}},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();
-}},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();
-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,'');
-this.view=B;return B;}return false;}});
+}},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);
+this.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"));
+var B=new Roo.factory(A);B.render&&B.render(false,'');this.view=B;return B;}return false;}});
// Roo/GridPanel.js
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);
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);
@@ -2882,3 +2882,104 @@ F.push("(typeof("+G+") == 'undefined')");});var H='(('+F.join(" || ")+") ? undef
}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 ['"];
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,{}
);},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);};
+// Roo/dialog/namespace.js
+Roo.dialog={};
+// Roo/dialog/UploadCropbox.js
+Roo.dialog.UploadCropbox=function(A){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}
+);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,outputMaxWidth:1200,file:false,exif:{}
+,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'}
+,{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}
+]},{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){Roo.dialog.UploadCropbox.superclass.onRender.call(this,ct,A);if(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;}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);C.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);this.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();this.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();this.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();this.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();});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);this.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);},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();this.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);break;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();if(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);},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;this.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();if(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);var 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.widthC){var E=A;A=C;C=E;}if(B>D){var F=B;B=D;D=F;}var x=Roo.isTouch?e.browserEvent.touches[0].pageX:e.getPageX();
+var y=Roo.isTouch?e.browserEvent.touches[0].pageY:e.getPageY();x=x-this.mouseX;y=y-this.mouseY;var G=Math.ceil(x+this.previewEl.getLeft(true));var H=Math.ceil(y+this.previewEl.getTop(true));G=(GC)?C:G);H=(HD)?D:H);this.previewEl.setLeft(G);
+this.previewEl.setTop(H);this.mouseX=Roo.isTouch?e.browserEvent.touches[0].pageX:e.getPageX();this.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);if(!this.zoomable()){this.scale=this.startScale;return;}this.draw();return;},zoomable:function(){var A=this.thumbEl.getWidth()/this.minWidth;if(this.minWidththis.imageEl.OriginWidth||C>this.imageEl.OriginHeight||(Bthis.imageEl.OriginWidth||C>this.imageEl.OriginHeight||(B=this.minWidth)&&B=this.minHeight)&&CD||C>E)){return false;
+}if(!this.isDocument&&(this.rotate==90||this.rotate==270)&&(Bthis.imageEl.OriginWidth||Cthis.imageEl.OriginHeight)){return false;}return true;},onRotateLeft:function(e){if(!this.isDocument&&(this.canvasEl.height180)?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();
+}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");
+var 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.OriginWidththis.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);
+break;}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();
+if(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);
+break;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);
+break;}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();
+},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;
+var 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");
+D.width=this.thumbEl.getWidth()/this.getScaleLevel();D.height=this.thumbEl.getHeight()/this.getScaleLevel();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());var 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());var sx=this.thumbEl.getLeft(true)-this.previewEl.getLeft(true);var sy=this.thumbEl.getTop(true)-this.previewEl.getTop(true);
+sx=sx<0?0:(sx/this.getScaleLevel());sy=sy<0?0:(sy/this.getScaleLevel());if(D.width>this.outputMaxWidth){var H=this.outputMaxWidth/D.width;D.width=D.width*H;D.height=D.height*H;E.scale(H,H);}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());
+var 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());
+var y=(this.thumbEl.getTop(true)>this.previewEl.getTop(true))?0:((this.previewEl.getTop(true)-this.thumbEl.getTop(true))/this.getScaleLevel());var I=this.minWidth-2*x;var J=this.minHeight-2*y;var H=1;if((x==0&&y==0)||(x==0&&y>0)){H=I/F;}if(x>0&&y==0){H=J/G;
+}if(x>0&&y>0){H=I/F;if(Fthis.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());
+var 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());
+var y=(this.thumbEl.getTop(true)>this.previewEl.getTop(true))?0:((this.previewEl.getTop(true)-this.thumbEl.getTop(true))/this.getScaleLevel());var I=this.minWidth-2*x;var J=this.minHeight-2*y;var H=1;if((x==0&&y==0)||(x==0&&y>0)){H=I/F;}if(x>0&&y==0){H=J/G;
+}if(x>0&&y>0){H=I/F;if(Fthis.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.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());
+var 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());
+var I=this.minWidth-2*x;var J=this.minHeight-2*y;var H=1;if((x==0&&y==0)||(x==0&&y>0)){H=I/F;}if(x>0&&y==0){H=J/G;}if(x>0&&y>0){H=I/F;if(Fthis.imageEl.OriginHeight)?0:Math.abs(this.imageEl.OriginWidth-this.imageEl.OriginHeight);
+E.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);
+B=(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);
+if(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);
+this.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']];
+}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();
+this.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;
+}return;}if(this.baseRotate==6||this.baseRotate==8){A=this.thumbEl.getHeight();this.baseScale=A/this.imageEl.OriginHeight;if(this.imageEl.OriginHeight*this.baseScalethis.imageEl.OriginHeight){B=this.thumbEl.getWidth();this.baseScale=B/this.imageEl.OriginHeight;if(this.imageEl.OriginWidth*this.baseScalethis.imageEl.OriginHeight){B=this.thumbEl.getHeight();
+this.baseScale=B/this.imageEl.OriginHeight;if(this.imageEl.OriginWidth*this.baseScale=0xffe0&&H<=0xffef)||H===0xfffe){I=E.getUint16(F+2)+2;if(F+I>E.byteLength){Roo.log('Invalid meta data: Invalid segment size.');break;}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;}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;default: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;if(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;i4?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'}]},{tag:'div',cls:'btn-group roo-upload-cropbox-picture',action:'picture',cn:[{tag:'button',cls:'btn btn-default',html:''}
+]},{tag:'div',cls:'btn-group roo-upload-cropbox-rotate-right',action:'rotate-right',cn:[{tag:'button',cls:'btn btn-default',html:''}]}],DOCUMENT:[{tag:'div',cls:'btn-group roo-upload-cropbox-rotate-left',action:'rotate-left',cn:[{tag:'button',cls:'btn btn-default',html:''}
+]},{tag:'div',cls:'btn-group roo-upload-cropbox-download',action:'download',cn:[{tag:'button',cls:'btn btn-default',html:''}]},{tag:'div',cls:'btn-group roo-upload-cropbox-crop',action:'crop',cn:[{tag:'button',cls:'btn btn-default',html:''}
+]},{tag:'div',cls:'btn-group roo-upload-cropbox-trash',action:'trash',cn:[{tag:'button',cls:'btn btn-default',html:''}]},{tag:'div',cls:'btn-group roo-upload-cropbox-rotate-right',action:'rotate-right',cn:[{tag:'button',cls:'btn btn-default',html:''}
+]}],ROTATOR:[{tag:'div',cls:'btn-group roo-upload-cropbox-rotate-left',action:'rotate-left',cn:[{tag:'button',cls:'btn btn-default',html:''}]},{tag:'div',cls:'btn-group roo-upload-cropbox-rotate-right',action:'rotate-right',cn:[{tag:'button',cls:'btn btn-default',html:''}
+]}]}});
diff --git a/roojs-debug.js b/roojs-debug.js
index 752cb43776..e58e86b843 100644
--- a/roojs-debug.js
+++ b/roojs-debug.js
@@ -60557,7 +60557,6 @@ Roo.LayoutStateManager.prototype = {
*/
Roo.ContentPanel = function(el, config, content){
-
/*
if(el.autoCreate || el.xtype){ // xtype is available if this is called from factory
config = el;
@@ -60941,6 +60940,14 @@ layout.addxtype({
*/
addxtype : function(cfg) {
+ if(cfg.xtype.match(/^UploadCropbox$/)) {
+
+ this.cropbox = new Roo.factory(cfg);
+
+ this.cropbox.render(this.el);
+
+ return this.cropbox;
+ }
// add form..
if (cfg.xtype.match(/^Form$/)) {
@@ -68193,4 +68200,1803 @@ Roo.extend(Roo.XTemplate, Roo.Template, {
Roo.XTemplate.from = function(el){
el = Roo.getDom(el);
return new Roo.XTemplate(el.value || el.innerHTML);
-};
\ No newline at end of file
+};Roo.dialog = {};
+/*
+* Licence: LGPL
+*/
+
+/**
+ * @class Roo.dialog.UploadCropbox
+ * @extends Roo.BoxComponent
+ * Dialog UploadCropbox class
+ * @cfg {String} emptyText show when image has been loaded
+ * @cfg {String} rotateNotify show when image too small to rotate
+ * @cfg {Number} errorTimeout default 3000
+ * @cfg {Number} minWidth default 300
+ * @cfg {Number} minHeight default 300
+ * @cfg {Number} outputMaxWidth default 1200
+ * @cfg {Array} buttons default ['rotateLeft', 'pictureBtn', 'rotateRight']
+ * @cfg {Boolean} isDocument (true|false) default false
+ * @cfg {String} url action url
+ * @cfg {String} paramName default 'imageUpload'
+ * @cfg {String} method default POST
+ * @cfg {Boolean} loadMask (true|false) default true
+ * @cfg {Boolean} loadingText default 'Loading...'
+ *
+ * @constructor
+ * Create a new UploadCropbox
+ * @param {Object} config The config object
+ */
+
+ Roo.dialog.UploadCropbox = function(config){
+ Roo.dialog.UploadCropbox.superclass.constructor.call(this, config);
+
+ this.addEvents({
+ /**
+ * @event beforeselectfile
+ * Fire before select file
+ * @param {Roo.dialog.UploadCropbox} this
+ */
+ "beforeselectfile" : true,
+ /**
+ * @event initial
+ * Fire after initEvent
+ * @param {Roo.dialog.UploadCropbox} this
+ */
+ "initial" : true,
+ /**
+ * @event crop
+ * Fire after initEvent
+ * @param {Roo.dialog.UploadCropbox} this
+ * @param {String} data
+ */
+ "crop" : true,
+ /**
+ * @event prepare
+ * Fire when preparing the file data
+ * @param {Roo.dialog.UploadCropbox} this
+ * @param {Object} file
+ */
+ "prepare" : true,
+ /**
+ * @event exception
+ * Fire when get exception
+ * @param {Roo.dialog.UploadCropbox} this
+ * @param {XMLHttpRequest} xhr
+ */
+ "exception" : true,
+ /**
+ * @event beforeloadcanvas
+ * Fire before load the canvas
+ * @param {Roo.dialog.UploadCropbox} this
+ * @param {String} src
+ */
+ "beforeloadcanvas" : true,
+ /**
+ * @event trash
+ * Fire when trash image
+ * @param {Roo.dialog.UploadCropbox} this
+ */
+ "trash" : true,
+ /**
+ * @event download
+ * Fire when download the image
+ * @param {Roo.dialog.UploadCropbox} this
+ */
+ "download" : true,
+ /**
+ * @event footerbuttonclick
+ * Fire when footerbuttonclick
+ * @param {Roo.dialog.UploadCropbox} this
+ * @param {String} type
+ */
+ "footerbuttonclick" : true,
+ /**
+ * @event resize
+ * Fire when resize
+ * @param {Roo.dialog.UploadCropbox} this
+ */
+ "resize" : true,
+ /**
+ * @event rotate
+ * Fire when rotate the image
+ * @param {Roo.dialog.UploadCropbox} this
+ * @param {String} pos
+ */
+ "rotate" : true,
+ /**
+ * @event inspect
+ * Fire when inspect the file
+ * @param {Roo.dialog.UploadCropbox} this
+ * @param {Object} file
+ */
+ "inspect" : true,
+ /**
+ * @event upload
+ * Fire when xhr upload the file
+ * @param {Roo.dialog.UploadCropbox} this
+ * @param {Object} data
+ */
+ "upload" : true,
+ /**
+ * @event arrange
+ * Fire when arrange the file data
+ * @param {Roo.dialog.UploadCropbox} this
+ * @param {Object} formData
+ */
+ "arrange" : true,
+ /**
+ * @event loadcanvas
+ * Fire after load the canvas
+ * @param {Roo.dialog.UploadCropbox}
+ * @param {Object} imgEl
+ */
+ "loadcanvas" : true
+ });
+
+ 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,
+ outputMaxWidth : 1200,
+ file : false,
+ exif : {},
+ baseRotate : 1,
+ cropType : 'image/jpeg',
+ buttons : false,
+ canvasLoaded : false,
+ isDocument : false,
+ method : 'POST',
+ paramName : 'imageUpload',
+ loadMask : true,
+ loadingText : 'Loading...',
+ maskEl : false,
+
+ getAutoCreate : function()
+ {
+ var cfg = {
+ tag : 'div',
+ cls : 'roo-upload-cropbox',
+ cn : [
+ {
+ tag : 'input',
+ cls : 'roo-upload-cropbox-selector',
+ type : 'file'
+ },
+ {
+ 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
+ }
+ ]
+ },
+ {
+ tag : 'div',
+ cls : 'roo-upload-cropbox-footer',
+ cn : {
+ tag : 'div',
+ cls : 'btn-group btn-group-justified roo-upload-cropbox-btn-group',
+ cn : []
+ }
+ }
+ ]
+ };
+
+ return cfg;
+ },
+
+ onRender : function(ct, position)
+ {
+ Roo.dialog.UploadCropbox.superclass.onRender.call(this, ct, position);
+
+ if(this.el){
+ if (this.el.attr('xtype')) {
+ this.el.attr('xtypex', this.el.attr('xtype'));
+ this.el.dom.removeAttribute('xtype');
+
+ this.initEvents();
+ }
+ }
+ else {
+ var cfg = Roo.apply({}, this.getAutoCreate());
+
+ cfg.id = this.id || Roo.id();
+
+ if (this.cls) {
+ cfg.cls = (typeof(cfg.cls) == 'undefined' ? this.cls : cfg.cls) + ' ' + this.cls;
+ }
+
+ if (this.style) { // fixme needs to support more complex style data.
+ cfg.style = (typeof(cfg.style) == 'undefined' ? this.style : cfg.style) + '; ' + this.style;
+ }
+
+ this.el = ct.createChild(cfg, position);
+
+ this.initEvents();
+ }
+
+ if (this.buttons.length) {
+
+ Roo.each(this.buttons, function(bb) {
+
+ var btn = this.el.select('.roo-upload-cropbox-footer div.roo-upload-cropbox-btn-group').first().createChild(bb);
+
+ btn.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);
+
+ this.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();
+ this.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();
+ this.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();
+ this.footerEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
+ this.footerEl.hide();
+
+ this.setThumbBoxSize();
+
+ this.bind();
+
+ this.resize();
+
+ this.fireEvent('initial', this);
+ },
+
+ bind : function()
+ {
+ var _this = this;
+
+ window.addEventListener("resize", function() { _this.resize(); } );
+
+ 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);
+ this.bodyEl.on('mousemove', this.onMouseMove, this);
+ var mousewheel = (/Firefox/i.test(navigator.userAgent))? 'DOMMouseScroll' : 'mousewheel';
+ this.bodyEl.on(mousewheel, this.onMouseWheel, this);
+ Roo.get(document).on('mouseup', this.onMouseUp, this);
+ }
+
+ this.selectorEl.on('change', this.onFileSelected, this);
+ },
+
+ 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;
+
+ // this.selectorEl.dom.value = '';
+
+ },
+
+ resize : function()
+ {
+ if(this.fireEvent('resize', this) != false){
+ this.setThumbBoxPosition();
+ this.setCanvasPosition();
+ }
+ },
+
+ onFooterButtonClick : function(e, el, o, type)
+ {
+ switch (type) {
+ 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);
+ break;
+ case 'download' :
+ this.download(e);
+ break;
+ default :
+ break;
+ }
+
+ this.fireEvent('footerbuttonclick', this, type);
+ },
+
+ beforeSelectFile : function(e)
+ {
+ e.preventDefault();
+
+ if(this.fireEvent('beforeselectfile', this) != false){
+ this.selectorEl.dom.click();
+ }
+ },
+
+ onFileSelected : function(e)
+ {
+ e.preventDefault();
+
+ if(typeof(this.selectorEl.dom.files) == 'undefined' || !this.selectorEl.dom.files.length){
+ return;
+ }
+
+ var file = this.selectorEl.dom.files[0];
+
+ if(this.fireEvent('inspect', this, file) != false){
+ this.prepare(file);
+ }
+
+ },
+
+ trash : function(e)
+ {
+ this.fireEvent('trash', this);
+ },
+
+ download : function(e)
+ {
+ this.fireEvent('download', this);
+ },
+
+ loadCanvas : function(src)
+ {
+ if(this.fireEvent('beforeloadcanvas', this, src) != false){
+
+ this.reset();
+
+ this.imageEl = document.createElement('img');
+
+ var _this = this;
+
+ this.imageEl.addEventListener("load", function(){ _this.onLoadCanvas(); });
+
+ this.imageEl.src = src;
+ }
+ },
+
+ onLoadCanvas : function()
+ {
+ this.imageEl.OriginWidth = this.imageEl.naturalWidth || this.imageEl.width;
+ this.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();
+
+ if(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);
+ var 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;
+ return;
+ }
+
+ 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 minX = Math.ceil(this.thumbEl.getLeft(true));
+ var minY = Math.ceil(this.thumbEl.getTop(true));
+
+ var maxX = Math.ceil(minX + this.thumbEl.getWidth() - this.canvasEl.width);
+ var maxY = Math.ceil(minY + this.thumbEl.getHeight() - this.canvasEl.height);
+
+ if(minX > maxX) {
+ var tempX = minX;
+ minX = maxX;
+ maxX = tempX;
+ }
+
+ if(minY > maxY) {
+ var tempY = minY;
+ minY = maxY;
+ maxY = tempY;
+ }
+
+ var x = Roo.isTouch ? e.browserEvent.touches[0].pageX : e.getPageX();
+ var y = Roo.isTouch ? e.browserEvent.touches[0].pageY : e.getPageY();
+
+ x = x - this.mouseX;
+ y = y - this.mouseY;
+
+ var bgX = Math.ceil(x + this.previewEl.getLeft(true));
+ var bgY = Math.ceil(y + this.previewEl.getTop(true));
+
+ bgX = (bgX < minX) ? minX : ((bgX > maxX) ? maxX : bgX);
+ bgY = (bgY < minY) ? minY : ((bgY > maxY) ? maxY : bgY);
+
+ this.previewEl.setLeft(bgX);
+ this.previewEl.setTop(bgY);
+
+ this.mouseX = Roo.isTouch ? e.browserEvent.touches[0].pageX : e.getPageX();
+ this.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);
+
+ if(!this.zoomable()){
+ this.scale = this.startScale;
+ return;
+ }
+
+
+ this.draw();
+
+ return;
+ },
+
+ zoomable : function()
+ {
+ var minScale = this.thumbEl.getWidth() / this.minWidth;
+
+ if(this.minWidth < this.minHeight){
+ minScale = this.thumbEl.getHeight() / this.minHeight;
+ }
+
+ var width = Math.ceil(this.imageEl.OriginWidth * this.getScaleLevel() / minScale);
+ var height = Math.ceil(this.imageEl.OriginHeight * this.getScaleLevel() / minScale);
+
+
+ var maxWidth = this.imageEl.OriginWidth;
+ var maxHeight = this.imageEl.OriginHeight;
+
+ if(
+ this.isDocument &&
+ (this.rotate == 0 || this.rotate == 180) &&
+ (
+ width > this.imageEl.OriginWidth ||
+ height > this.imageEl.OriginHeight ||
+ (width < this.minWidth && height < this.minHeight)
+ )
+ ){
+ return false;
+ }
+
+ if(
+ this.isDocument &&
+ (this.rotate == 90 || this.rotate == 270) &&
+ (
+ width > this.imageEl.OriginWidth ||
+ height > this.imageEl.OriginHeight ||
+ (width < this.minHeight && height < this.minWidth)
+ )
+ ){
+ return false;
+ }
+
+ if(
+ !this.isDocument &&
+ (this.rotate == 0 || this.rotate == 180) &&
+ (
+ (this.imageEl.OriginWidth >= this.minWidth) && width < this.minWidth ||
+ (this.imageEl.OriginHeight >= this.minHeight) && height < this.minHeight ||
+ width > maxWidth ||
+ height > maxHeight
+ )
+ ){
+ return false;
+ }
+
+ if(
+ !this.isDocument &&
+ (this.rotate == 90 || this.rotate == 270) &&
+ (
+ width < this.minHeight ||
+ width > this.imageEl.OriginWidth ||
+ height < this.minWidth ||
+ height > this.imageEl.OriginHeight
+ )
+ ){
+ return false;
+ }
+
+ return true;
+
+ },
+
+ onRotateLeft : function(e)
+ {
+ if(!this.isDocument && (this.canvasEl.height < this.thumbEl.getWidth() || this.canvasEl.width < this.thumbEl.getHeight())){
+
+ var minScale = this.thumbEl.getWidth() / this.minWidth;
+
+ var bw = Math.ceil(this.canvasEl.width / this.getScaleLevel());
+ var bh = Math.ceil(this.canvasEl.height / this.getScaleLevel());
+
+ this.startScale = this.scale;
+
+ while (this.getScaleLevel() < minScale){
+
+ 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;
+ }
+
+ 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();
+ }
+
+ 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 minScale = this.thumbEl.getWidth() / this.minWidth;
+
+ var bw = Math.ceil(this.canvasEl.width / this.getScaleLevel());
+ var bh = Math.ceil(this.canvasEl.height / this.getScaleLevel());
+
+ this.startScale = this.scale;
+
+ while (this.getScaleLevel() < minScale){
+
+ 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;
+ }
+
+ 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();
+ }
+
+ this.draw();
+
+ this.fireEvent('rotate', this, 'right');
+ },
+
+ onRotateFail : function()
+ {
+ this.errorEl.show(true);
+
+ var _this = this;
+
+ (function() { _this.errorEl.hide(true); }).defer(this.errorTimeout);
+ },
+
+ draw : function()
+ {
+ this.previewEl.dom.innerHTML = '';
+
+ var canvasEl = document.createElement("canvas");
+
+ var contextEl = canvasEl.getContext("2d");
+
+ canvasEl.width = this.imageEl.OriginWidth * this.getScaleLevel();
+ canvasEl.height = this.imageEl.OriginWidth * this.getScaleLevel();
+ var center = this.imageEl.OriginWidth / 2;
+
+ if(this.imageEl.OriginWidth < this.imageEl.OriginHeight){
+ canvasEl.width = this.imageEl.OriginHeight * this.getScaleLevel();
+ canvasEl.height = this.imageEl.OriginHeight * this.getScaleLevel();
+ center = this.imageEl.OriginHeight / 2;
+ }
+
+ contextEl.scale(this.getScaleLevel(), this.getScaleLevel());
+
+ contextEl.translate(center, center);
+ contextEl.rotate(this.rotate * Math.PI / 180);
+
+ contextEl.drawImage(this.imageEl, 0, 0, this.imageEl.OriginWidth, this.imageEl.OriginHeight, center * -1, center * -1, this.imageEl.OriginWidth, this.imageEl.OriginHeight);
+
+ this.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(canvasEl, 0, 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
+
+ break;
+ 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(canvasEl, Math.abs(this.canvasEl.width - this.canvasEl.height), 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
+ break;
+ }
+
+ this.contextEl.drawImage(canvasEl, 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();
+
+ if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
+ 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);
+ break;
+ }
+
+ 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);
+
+ break;
+ 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(canvasEl, 0, 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
+ break;
+ }
+
+ 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);
+
+ break;
+ default :
+ break;
+ }
+
+ this.previewEl.appendChild(this.canvasEl);
+
+ this.setCanvasPosition();
+ },
+
+ crop : function()
+ {
+ if(!this.canvasLoaded){
+ return;
+ }
+
+ var imageCanvas = document.createElement("canvas");
+
+ var imageContext = imageCanvas.getContext("2d");
+
+ imageCanvas.width = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? this.imageEl.OriginWidth : this.imageEl.OriginHeight;
+ imageCanvas.height = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? this.imageEl.OriginWidth : this.imageEl.OriginHeight;
+
+ var center = imageCanvas.width / 2;
+
+ imageContext.translate(center, center);
+
+ imageContext.rotate(this.rotate * Math.PI / 180);
+
+ imageContext.drawImage(this.imageEl, 0, 0, this.imageEl.OriginWidth, this.imageEl.OriginHeight, center * -1, center * -1, this.imageEl.OriginWidth, this.imageEl.OriginHeight);
+
+ var canvas = document.createElement("canvas");
+
+ var context = canvas.getContext("2d");
+
+ canvas.width = this.thumbEl.getWidth() / this.getScaleLevel();
+
+ canvas.height = this.thumbEl.getHeight() / this.getScaleLevel();
+
+ switch (this.rotate) {
+ case 0 :
+
+ var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getWidth() / this.getScaleLevel());
+ var height = (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());
+ var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
+
+ var sx = this.thumbEl.getLeft(true) - this.previewEl.getLeft(true);
+ var sy = this.thumbEl.getTop(true) - this.previewEl.getTop(true);
+
+ sx = sx < 0 ? 0 : (sx / this.getScaleLevel());
+ sy = sy < 0 ? 0 : (sy / this.getScaleLevel());
+
+ if(canvas.width > this.outputMaxWidth) {
+ var scale = this.outputMaxWidth / canvas.width;
+ canvas.width = canvas.width * scale;
+ canvas.height = canvas.height * scale;
+ context.scale(scale, scale);
+ }
+
+ context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
+
+ break;
+ case 90 :
+
+ var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getWidth() / this.getScaleLevel());
+ var height = (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());
+ var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
+
+ var targetWidth = this.minWidth - 2 * x;
+ var targetHeight = this.minHeight - 2 * y;
+
+ var scale = 1;
+
+ if((x == 0 && y == 0) || (x == 0 && y > 0)){
+ scale = targetWidth / width;
+ }
+
+ if(x > 0 && y == 0){
+ scale = targetHeight / height;
+ }
+
+ if(x > 0 && y > 0){
+ scale = targetWidth / width;
+
+ if(width < height){
+ scale = targetHeight / height;
+ }
+ }
+
+ context.scale(scale, scale);
+
+ 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));
+
+ sx = 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;
+
+ context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
+
+ break;
+ case 180 :
+
+ var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getWidth() / this.getScaleLevel());
+ var height = (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());
+ var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
+
+ var targetWidth = this.minWidth - 2 * x;
+ var targetHeight = this.minHeight - 2 * y;
+
+ var scale = 1;
+
+ if((x == 0 && y == 0) || (x == 0 && y > 0)){
+ scale = targetWidth / width;
+ }
+
+ if(x > 0 && y == 0){
+ scale = targetHeight / height;
+ }
+
+ if(x > 0 && y > 0){
+ scale = targetWidth / width;
+
+ if(width < height){
+ scale = targetHeight / height;
+ }
+ }
+
+ context.scale(scale, scale);
+
+ 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));
+
+ sx = 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;
+
+ context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
+
+ break;
+ case 270 :
+
+ var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getWidth() / this.getScaleLevel());
+ var height = (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());
+ var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
+
+ var targetWidth = this.minWidth - 2 * x;
+ var targetHeight = this.minHeight - 2 * y;
+
+ var scale = 1;
+
+ if((x == 0 && y == 0) || (x == 0 && y > 0)){
+ scale = targetWidth / width;
+ }
+
+ if(x > 0 && y == 0){
+ scale = targetHeight / height;
+ }
+
+ if(x > 0 && y > 0){
+ scale = targetWidth / width;
+
+ if(width < height){
+ scale = targetHeight / height;
+ }
+ }
+
+ context.scale(scale, scale);
+ 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));
+
+ 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);
+
+ context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
+
+ break;
+ default :
+ break;
+ }
+
+ this.cropData = canvas.toDataURL(this.cropType);
+
+ if(this.fireEvent('crop', this, this.cropData) !== false){
+ this.process(this.file, this.cropData);
+ }
+
+ return;
+
+ },
+
+ setThumbBoxSize : function()
+ {
+ var width, height;
+
+ if(this.isDocument && typeof(this.imageEl) != 'undefined'){
+ width = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.max(this.minWidth, this.minHeight) : Math.min(this.minWidth, this.minHeight);
+ height = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.min(this.minWidth, this.minHeight) : Math.max(this.minWidth, this.minHeight);
+
+ this.minWidth = width;
+ this.minHeight = height;
+
+ if(this.rotate == 90 || this.rotate == 270){
+ this.minWidth = height;
+ this.minHeight = width;
+ }
+ }
+
+ height = 300;
+ width = Math.ceil(this.minWidth * height / this.minHeight);
+
+ if(this.minWidth > this.minHeight){
+ width = 300;
+ height = Math.ceil(this.minHeight * width / this.minWidth);
+ }
+
+ this.thumbEl.setStyle({
+ width : width + 'px',
+ height : height + '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);
+
+ this.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']];
+ }
+
+ this.rotate = Roo.dialog.UploadCropbox['Orientation'][this.baseRotate];
+
+ },
+
+ baseScaleLevel : function()
+ {
+ var width, height;
+
+ if(this.isDocument){
+
+ if(this.baseRotate == 6 || this.baseRotate == 8){
+
+ height = this.thumbEl.getHeight();
+ this.baseScale = height / this.imageEl.OriginWidth;
+
+ if(this.imageEl.OriginHeight * this.baseScale > this.thumbEl.getWidth()){
+ width = this.thumbEl.getWidth();
+ this.baseScale = width / this.imageEl.OriginHeight;
+ }
+
+ return;
+ }
+
+ height = this.thumbEl.getHeight();
+ this.baseScale = height / this.imageEl.OriginHeight;
+
+ if(this.imageEl.OriginWidth * this.baseScale > this.thumbEl.getWidth()){
+ width = this.thumbEl.getWidth();
+ this.baseScale = width / this.imageEl.OriginWidth;
+ }
+
+ return;
+ }
+
+ if(this.baseRotate == 6 || this.baseRotate == 8){
+
+ width = this.thumbEl.getHeight();
+ this.baseScale = width / this.imageEl.OriginHeight;
+
+ if(this.imageEl.OriginHeight * this.baseScale < this.thumbEl.getWidth()){
+ height = this.thumbEl.getWidth();
+ this.baseScale = height / this.imageEl.OriginHeight;
+ }
+
+ if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
+ height = this.thumbEl.getWidth();
+ this.baseScale = height / this.imageEl.OriginHeight;
+
+ if(this.imageEl.OriginWidth * this.baseScale < this.thumbEl.getHeight()){
+ width = this.thumbEl.getHeight();
+ this.baseScale = width / this.imageEl.OriginWidth;
+ }
+ }
+
+ return;
+ }
+
+ width = this.thumbEl.getWidth();
+ this.baseScale = width / this.imageEl.OriginWidth;
+
+ if(this.imageEl.OriginHeight * this.baseScale < this.thumbEl.getHeight()){
+ height = this.thumbEl.getHeight();
+ this.baseScale = height / this.imageEl.OriginHeight;
+ }
+
+ if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
+
+ height = this.thumbEl.getHeight();
+ this.baseScale = height / this.imageEl.OriginHeight;
+
+ if(this.imageEl.OriginWidth * this.baseScale < this.thumbEl.getWidth()){
+ width = this.thumbEl.getWidth();
+ this.baseScale = width / this.imageEl.OriginWidth;
+ }
+
+ }
+
+ if(this.imageEl.OriginWidth < this.minWidth || this.imageEl.OriginHeight < this.minHeight) {
+ this.baseScale = width / this.minWidth;
+ }
+
+ return;
+ },
+
+ getScaleLevel : function()
+ {
+ return this.baseScale * Math.pow(1.02, this.scale);
+ },
+
+ onTouchStart : function(e)
+ {
+ if(!this.canvasLoaded){
+ this.beforeSelectFile(e);
+ return;
+ }
+
+ var touches = e.browserEvent.touches;
+
+ if(!touches){
+ return;
+ }
+
+ if(touches.length == 1){
+ this.onMouseDown(e);
+ return;
+ }
+
+ if(touches.length != 2){
+ return;
+ }
+
+ var coords = [];
+
+ for(var i = 0, finger; finger = touches[i]; i++){
+ coords.push(finger.pageX, finger.pageY);
+ }
+
+ var x = Math.pow(coords[0] - coords[2], 2);
+ var y = Math.pow(coords[1] - coords[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 touches = e.browserEvent.touches;
+
+ if(!touches){
+ return;
+ }
+
+ if(this.dragable){
+ this.onMouseMove(e);
+ return;
+ }
+
+ var coords = [];
+
+ for(var i = 0, finger; finger = touches[i]; i++){
+ coords.push(finger.pageX, finger.pageY);
+ }
+
+ var x = Math.pow(coords[0] - coords[2], 2);
+ var y = Math.pow(coords[1] - coords[3], 2);
+
+ this.endDistance = Math.sqrt(x + y);
+
+ this.scale = this.startScale + Math.floor(Math.log(this.endDistance / this.startDistance) / Math.log(1.1));
+
+ if(!this.zoomable()){
+ this.scale = this.startScale;
+ return;
+ }
+
+ this.draw();
+
+ },
+
+ onTouchEnd : function(e)
+ {
+ this.pinching = false;
+ this.dragable = false;
+
+ },
+
+ process : function(file, crop)
+ {
+ if(this.loadMask){
+ this.maskEl.mask(this.loadingText);
+ }
+
+ this.xhr = new XMLHttpRequest();
+
+ file.xhr = this.xhr;
+
+ this.xhr.open(this.method, this.url, true);
+
+ var headers = {
+ "Accept": "application/json",
+ "Cache-Control": "no-cache",
+ "X-Requested-With": "XMLHttpRequest"
+ };
+
+ for (var headerName in headers) {
+ var headerValue = headers[headerName];
+ if (headerValue) {
+ this.xhr.setRequestHeader(headerName, headerValue);
+ }
+ }
+
+ var _this = this;
+
+ this.xhr.onload = function()
+ {
+ _this.xhrOnLoad(_this.xhr);
+ }
+
+ this.xhr.onerror = function()
+ {
+ _this.xhrOnError(_this.xhr);
+ }
+
+ var formData = new FormData();
+
+ formData.append('returnHTML', 'NO');
+
+ if(crop){
+ formData.append('crop', crop);
+ var blobBin = atob(crop.split(',')[1]);
+ var array = [];
+ for(var i = 0; i < blobBin.length; i++) {
+ array.push(blobBin.charCodeAt(i));
+ }
+ var croppedFile =new Blob([new Uint8Array(array)], {type: this.cropType});
+ formData.append(this.paramName, croppedFile, file.name);
+ }
+
+ if(typeof(file.filename) != 'undefined'){
+ formData.append('filename', file.filename);
+ }
+
+ if(typeof(file.mimetype) != 'undefined'){
+ formData.append('mimetype', file.mimetype);
+ }
+
+ if(this.fireEvent('arrange', this, formData) != false){
+ this.xhr.send(formData);
+ };
+ },
+
+ xhrOnLoad : function(xhr)
+ {
+ if(this.loadMask){
+ this.maskEl.unmask();
+ }
+
+ if (xhr.readyState !== 4) {
+ this.fireEvent('exception', this, xhr);
+ return;
+ }
+
+ var response = Roo.decode(xhr.responseText);
+
+ if(!response.success){
+ this.fireEvent('exception', this, xhr);
+ return;
+ }
+
+ var response = Roo.decode(xhr.responseText);
+
+ this.fireEvent('upload', this, response);
+
+ },
+
+ xhrOnError : function()
+ {
+ if(this.loadMask){
+ this.maskEl.unmask();
+ }
+
+ Roo.log('xhr on error');
+
+ var response = Roo.decode(xhr.responseText);
+
+ Roo.log(response);
+
+ },
+
+ prepare : function(file)
+ {
+ if(this.loadMask){
+ this.maskEl.mask(this.loadingText);
+ }
+
+ this.file = false;
+ this.exif = {};
+
+ if(typeof(file) === 'string'){
+ this.loadCanvas(file);
+ return;
+ }
+
+ if(!file || !this.urlAPI){
+ return;
+ }
+
+ this.file = file;
+ if(typeof(file.type) != 'undefined' && file.type.length != 0) {
+ this.cropType = file.type;
+ }
+
+ var _this = this;
+
+ if(this.fireEvent('prepare', this, this.file) != false){
+
+ var reader = new FileReader();
+
+ reader.onload = function (e) {
+ if (e.target.error) {
+ Roo.log(e.target.error);
+ return;
+ }
+
+ var buffer = e.target.result,
+ dataView = new DataView(buffer),
+ offset = 2,
+ maxOffset = dataView.byteLength - 4,
+ markerBytes,
+ markerLength;
+
+ if (dataView.getUint16(0) === 0xffd8) {
+ while (offset < maxOffset) {
+ markerBytes = dataView.getUint16(offset);
+
+ if ((markerBytes >= 0xffe0 && markerBytes <= 0xffef) || markerBytes === 0xfffe) {
+ markerLength = dataView.getUint16(offset + 2) + 2;
+ if (offset + markerLength > dataView.byteLength) {
+ Roo.log('Invalid meta data: Invalid segment size.');
+ break;
+ }
+
+ if(markerBytes == 0xffe1){
+ _this.parseExifData(
+ dataView,
+ offset,
+ markerLength
+ );
+ }
+
+ offset += markerLength;
+
+ continue;
+ }
+
+ break;
+ }
+
+ }
+
+ var url = _this.urlAPI.createObjectURL(_this.file);
+
+ _this.loadCanvas(url);
+
+ return;
+ }
+
+ reader.readAsArrayBuffer(this.file);
+
+ }
+
+ },
+
+ parseExifData : function(dataView, offset, length)
+ {
+ var tiffOffset = offset + 10,
+ littleEndian,
+ dirOffset;
+
+ if (dataView.getUint32(offset + 4) !== 0x45786966) {
+ // No Exif data, might be XMP data instead
+ return;
+ }
+
+ // Check for the ASCII code for "Exif" (0x45786966):
+ if (dataView.getUint32(offset + 4) !== 0x45786966) {
+ // No Exif data, might be XMP data instead
+ return;
+ }
+ if (tiffOffset + 8 > dataView.byteLength) {
+ Roo.log('Invalid Exif data: Invalid segment size.');
+ return;
+ }
+ // Check for the two null bytes:
+ if (dataView.getUint16(offset + 8) !== 0x0000) {
+ Roo.log('Invalid Exif data: Missing byte alignment offset.');
+ return;
+ }
+ // Check the byte alignment:
+ switch (dataView.getUint16(tiffOffset)) {
+ case 0x4949:
+ littleEndian = true;
+ break;
+ case 0x4D4D:
+ littleEndian = false;
+ break;
+ default:
+ Roo.log('Invalid Exif data: Invalid byte alignment marker.');
+ return;
+ }
+ // Check for the TIFF tag marker (0x002A):
+ if (dataView.getUint16(tiffOffset + 2, littleEndian) !== 0x002A) {
+ Roo.log('Invalid Exif data: Missing TIFF marker.');
+ return;
+ }
+ // Retrieve the directory offset bytes, usually 0x00000008 or 8 decimal:
+ dirOffset = dataView.getUint32(tiffOffset + 4, littleEndian);
+
+ this.parseExifTags(
+ dataView,
+ tiffOffset,
+ tiffOffset + dirOffset,
+ littleEndian
+ );
+ },
+
+ parseExifTags : function(dataView, tiffOffset, dirOffset, littleEndian)
+ {
+ var tagsNumber,
+ dirEndOffset,
+ i;
+ if (dirOffset + 6 > dataView.byteLength) {
+ Roo.log('Invalid Exif data: Invalid directory offset.');
+ return;
+ }
+ tagsNumber = dataView.getUint16(dirOffset, littleEndian);
+ dirEndOffset = dirOffset + 2 + 12 * tagsNumber;
+ if (dirEndOffset + 4 > dataView.byteLength) {
+ Roo.log('Invalid Exif data: Invalid directory size.');
+ return;
+ }
+ for (i = 0; i < tagsNumber; i += 1) {
+ this.parseExifTag(
+ dataView,
+ tiffOffset,
+ dirOffset + 2 + 12 * i, // tag offset
+ littleEndian
+ );
+ }
+ // Return the offset to the next directory:
+ return dataView.getUint32(dirEndOffset, littleEndian);
+ },
+
+ parseExifTag : function (dataView, tiffOffset, offset, littleEndian)
+ {
+ var tag = dataView.getUint16(offset, littleEndian);
+
+ this.exif[tag] = this.getExifValue(
+ dataView,
+ tiffOffset,
+ offset,
+ dataView.getUint16(offset + 2, littleEndian), // tag type
+ dataView.getUint32(offset + 4, littleEndian), // tag length
+ littleEndian
+ );
+ },
+
+ getExifValue : function (dataView, tiffOffset, offset, type, length, littleEndian)
+ {
+ var tagType = Roo.dialog.UploadCropbox.exifTagTypes[type],
+ tagSize,
+ dataOffset,
+ values,
+ i,
+ str,
+ c;
+
+ if (!tagType) {
+ Roo.log('Invalid Exif data: Invalid tag type.');
+ return;
+ }
+
+ tagSize = tagType.size * length;
+ // Determine if the value is contained in the dataOffset bytes,
+ // or if the value at the dataOffset is a pointer to the actual data:
+ dataOffset = tagSize > 4 ?
+ tiffOffset + dataView.getUint32(offset + 8, littleEndian) : (offset + 8);
+ if (dataOffset + tagSize > dataView.byteLength) {
+ Roo.log('Invalid Exif data: Invalid data offset.');
+ return;
+ }
+ if (length === 1) {
+ return tagType.getValue(dataView, dataOffset, littleEndian);
+ }
+ values = [];
+ for (i = 0; i < length; i += 1) {
+ values[i] = tagType.getValue(dataView, dataOffset + i * tagType.size, littleEndian);
+ }
+
+ if (tagType.ascii) {
+ str = '';
+ // Concatenate the chars:
+ for (i = 0; i < values.length; i += 1) {
+ c = values[i];
+ // Ignore the terminating NULL byte(s):
+ if (c === '\u0000') {
+ break;
+ }
+ str += c;
+ }
+ return str;
+ }
+ return values;
+ }
+
+});
+
+Roo.apply(Roo.dialog.UploadCropbox, {
+ tags : {
+ 'Orientation': 0x0112
+ },
+
+ Orientation: {
+ 1: 0, //'top-left',
+// 2: 'top-right',
+ 3: 180, //'bottom-right',
+// 4: 'bottom-left',
+// 5: 'left-top',
+ 6: 90, //'right-top',
+// 7: 'right-bottom',
+ 8: 270 //'left-bottom'
+ },
+
+ exifTagTypes : {
+ // byte, 8-bit unsigned int:
+ 1: {
+ getValue: function (dataView, dataOffset) {
+ return dataView.getUint8(dataOffset);
+ },
+ size: 1
+ },
+ // ascii, 8-bit byte:
+ 2: {
+ getValue: function (dataView, dataOffset) {
+ return String.fromCharCode(dataView.getUint8(dataOffset));
+ },
+ size: 1,
+ ascii: true
+ },
+ // short, 16 bit int:
+ 3: {
+ getValue: function (dataView, dataOffset, littleEndian) {
+ return dataView.getUint16(dataOffset, littleEndian);
+ },
+ size: 2
+ },
+ // long, 32 bit int:
+ 4: {
+ getValue: function (dataView, dataOffset, littleEndian) {
+ return dataView.getUint32(dataOffset, littleEndian);
+ },
+ size: 4
+ },
+ // rational = two long values, first is numerator, second is denominator:
+ 5: {
+ getValue: function (dataView, dataOffset, littleEndian) {
+ return dataView.getUint32(dataOffset, littleEndian) /
+ dataView.getUint32(dataOffset + 4, littleEndian);
+ },
+ size: 8
+ },
+ // slong, 32 bit signed int:
+ 9: {
+ getValue: function (dataView, dataOffset, littleEndian) {
+ return dataView.getInt32(dataOffset, littleEndian);
+ },
+ size: 4
+ },
+ // srational, two slongs, first is numerator, second is denominator:
+ 10: {
+ getValue: function (dataView, dataOffset, littleEndian) {
+ return dataView.getInt32(dataOffset, littleEndian) /
+ dataView.getInt32(dataOffset + 4, littleEndian);
+ },
+ 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 : ''
+ }
+ ]
+ },
+ {
+ tag : 'div',
+ cls : 'btn-group roo-upload-cropbox-picture',
+ action : 'picture',
+ cn : [
+ {
+ tag : 'button',
+ cls : 'btn btn-default',
+ html : ''
+ }
+ ]
+ },
+ {
+ tag : 'div',
+ cls : 'btn-group roo-upload-cropbox-rotate-right',
+ action : 'rotate-right',
+ cn : [
+ {
+ tag : 'button',
+ cls : 'btn btn-default',
+ html : ''
+ }
+ ]
+ }
+ ],
+ DOCUMENT : [
+ {
+ tag : 'div',
+ cls : 'btn-group roo-upload-cropbox-rotate-left',
+ action : 'rotate-left',
+ cn : [
+ {
+ tag : 'button',
+ cls : 'btn btn-default',
+ html : ''
+ }
+ ]
+ },
+ {
+ tag : 'div',
+ cls : 'btn-group roo-upload-cropbox-download',
+ action : 'download',
+ cn : [
+ {
+ tag : 'button',
+ cls : 'btn btn-default',
+ html : ''
+ }
+ ]
+ },
+ {
+ tag : 'div',
+ cls : 'btn-group roo-upload-cropbox-crop',
+ action : 'crop',
+ cn : [
+ {
+ tag : 'button',
+ cls : 'btn btn-default',
+ html : ''
+ }
+ ]
+ },
+ {
+ tag : 'div',
+ cls : 'btn-group roo-upload-cropbox-trash',
+ action : 'trash',
+ cn : [
+ {
+ tag : 'button',
+ cls : 'btn btn-default',
+ html : ''
+ }
+ ]
+ },
+ {
+ tag : 'div',
+ cls : 'btn-group roo-upload-cropbox-rotate-right',
+ action : 'rotate-right',
+ cn : [
+ {
+ tag : 'button',
+ cls : 'btn btn-default',
+ html : ''
+ }
+ ]
+ }
+ ],
+ ROTATOR : [
+ {
+ tag : 'div',
+ cls : 'btn-group roo-upload-cropbox-rotate-left',
+ action : 'rotate-left',
+ cn : [
+ {
+ tag : 'button',
+ cls : 'btn btn-default',
+ html : ''
+ }
+ ]
+ },
+ {
+ tag : 'div',
+ cls : 'btn-group roo-upload-cropbox-rotate-right',
+ action : 'rotate-right',
+ cn : [
+ {
+ tag : 'button',
+ cls : 'btn btn-default',
+ html : ''
+ }
+ ]
+ }
+ ]
+ }
+});
diff --git a/roojs-ui-debug.js b/roojs-ui-debug.js
index b25bce4fc1..48a71b3204 100644
--- a/roojs-ui-debug.js
+++ b/roojs-ui-debug.js
@@ -36065,7 +36065,6 @@ Roo.LayoutStateManager.prototype = {
*/
Roo.ContentPanel = function(el, config, content){
-
/*
if(el.autoCreate || el.xtype){ // xtype is available if this is called from factory
config = el;
@@ -36449,6 +36448,14 @@ layout.addxtype({
*/
addxtype : function(cfg) {
+ if(cfg.xtype.match(/^UploadCropbox$/)) {
+
+ this.cropbox = new Roo.factory(cfg);
+
+ this.cropbox.render(this.el);
+
+ return this.cropbox;
+ }
// add form..
if (cfg.xtype.match(/^Form$/)) {
@@ -43701,4 +43708,1803 @@ Roo.extend(Roo.XTemplate, Roo.Template, {
Roo.XTemplate.from = function(el){
el = Roo.getDom(el);
return new Roo.XTemplate(el.value || el.innerHTML);
-};
\ No newline at end of file
+};Roo.dialog = {};
+/*
+* Licence: LGPL
+*/
+
+/**
+ * @class Roo.dialog.UploadCropbox
+ * @extends Roo.BoxComponent
+ * Dialog UploadCropbox class
+ * @cfg {String} emptyText show when image has been loaded
+ * @cfg {String} rotateNotify show when image too small to rotate
+ * @cfg {Number} errorTimeout default 3000
+ * @cfg {Number} minWidth default 300
+ * @cfg {Number} minHeight default 300
+ * @cfg {Number} outputMaxWidth default 1200
+ * @cfg {Array} buttons default ['rotateLeft', 'pictureBtn', 'rotateRight']
+ * @cfg {Boolean} isDocument (true|false) default false
+ * @cfg {String} url action url
+ * @cfg {String} paramName default 'imageUpload'
+ * @cfg {String} method default POST
+ * @cfg {Boolean} loadMask (true|false) default true
+ * @cfg {Boolean} loadingText default 'Loading...'
+ *
+ * @constructor
+ * Create a new UploadCropbox
+ * @param {Object} config The config object
+ */
+
+ Roo.dialog.UploadCropbox = function(config){
+ Roo.dialog.UploadCropbox.superclass.constructor.call(this, config);
+
+ this.addEvents({
+ /**
+ * @event beforeselectfile
+ * Fire before select file
+ * @param {Roo.dialog.UploadCropbox} this
+ */
+ "beforeselectfile" : true,
+ /**
+ * @event initial
+ * Fire after initEvent
+ * @param {Roo.dialog.UploadCropbox} this
+ */
+ "initial" : true,
+ /**
+ * @event crop
+ * Fire after initEvent
+ * @param {Roo.dialog.UploadCropbox} this
+ * @param {String} data
+ */
+ "crop" : true,
+ /**
+ * @event prepare
+ * Fire when preparing the file data
+ * @param {Roo.dialog.UploadCropbox} this
+ * @param {Object} file
+ */
+ "prepare" : true,
+ /**
+ * @event exception
+ * Fire when get exception
+ * @param {Roo.dialog.UploadCropbox} this
+ * @param {XMLHttpRequest} xhr
+ */
+ "exception" : true,
+ /**
+ * @event beforeloadcanvas
+ * Fire before load the canvas
+ * @param {Roo.dialog.UploadCropbox} this
+ * @param {String} src
+ */
+ "beforeloadcanvas" : true,
+ /**
+ * @event trash
+ * Fire when trash image
+ * @param {Roo.dialog.UploadCropbox} this
+ */
+ "trash" : true,
+ /**
+ * @event download
+ * Fire when download the image
+ * @param {Roo.dialog.UploadCropbox} this
+ */
+ "download" : true,
+ /**
+ * @event footerbuttonclick
+ * Fire when footerbuttonclick
+ * @param {Roo.dialog.UploadCropbox} this
+ * @param {String} type
+ */
+ "footerbuttonclick" : true,
+ /**
+ * @event resize
+ * Fire when resize
+ * @param {Roo.dialog.UploadCropbox} this
+ */
+ "resize" : true,
+ /**
+ * @event rotate
+ * Fire when rotate the image
+ * @param {Roo.dialog.UploadCropbox} this
+ * @param {String} pos
+ */
+ "rotate" : true,
+ /**
+ * @event inspect
+ * Fire when inspect the file
+ * @param {Roo.dialog.UploadCropbox} this
+ * @param {Object} file
+ */
+ "inspect" : true,
+ /**
+ * @event upload
+ * Fire when xhr upload the file
+ * @param {Roo.dialog.UploadCropbox} this
+ * @param {Object} data
+ */
+ "upload" : true,
+ /**
+ * @event arrange
+ * Fire when arrange the file data
+ * @param {Roo.dialog.UploadCropbox} this
+ * @param {Object} formData
+ */
+ "arrange" : true,
+ /**
+ * @event loadcanvas
+ * Fire after load the canvas
+ * @param {Roo.dialog.UploadCropbox}
+ * @param {Object} imgEl
+ */
+ "loadcanvas" : true
+ });
+
+ 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,
+ outputMaxWidth : 1200,
+ file : false,
+ exif : {},
+ baseRotate : 1,
+ cropType : 'image/jpeg',
+ buttons : false,
+ canvasLoaded : false,
+ isDocument : false,
+ method : 'POST',
+ paramName : 'imageUpload',
+ loadMask : true,
+ loadingText : 'Loading...',
+ maskEl : false,
+
+ getAutoCreate : function()
+ {
+ var cfg = {
+ tag : 'div',
+ cls : 'roo-upload-cropbox',
+ cn : [
+ {
+ tag : 'input',
+ cls : 'roo-upload-cropbox-selector',
+ type : 'file'
+ },
+ {
+ 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
+ }
+ ]
+ },
+ {
+ tag : 'div',
+ cls : 'roo-upload-cropbox-footer',
+ cn : {
+ tag : 'div',
+ cls : 'btn-group btn-group-justified roo-upload-cropbox-btn-group',
+ cn : []
+ }
+ }
+ ]
+ };
+
+ return cfg;
+ },
+
+ onRender : function(ct, position)
+ {
+ Roo.dialog.UploadCropbox.superclass.onRender.call(this, ct, position);
+
+ if(this.el){
+ if (this.el.attr('xtype')) {
+ this.el.attr('xtypex', this.el.attr('xtype'));
+ this.el.dom.removeAttribute('xtype');
+
+ this.initEvents();
+ }
+ }
+ else {
+ var cfg = Roo.apply({}, this.getAutoCreate());
+
+ cfg.id = this.id || Roo.id();
+
+ if (this.cls) {
+ cfg.cls = (typeof(cfg.cls) == 'undefined' ? this.cls : cfg.cls) + ' ' + this.cls;
+ }
+
+ if (this.style) { // fixme needs to support more complex style data.
+ cfg.style = (typeof(cfg.style) == 'undefined' ? this.style : cfg.style) + '; ' + this.style;
+ }
+
+ this.el = ct.createChild(cfg, position);
+
+ this.initEvents();
+ }
+
+ if (this.buttons.length) {
+
+ Roo.each(this.buttons, function(bb) {
+
+ var btn = this.el.select('.roo-upload-cropbox-footer div.roo-upload-cropbox-btn-group').first().createChild(bb);
+
+ btn.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);
+
+ this.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();
+ this.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();
+ this.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();
+ this.footerEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
+ this.footerEl.hide();
+
+ this.setThumbBoxSize();
+
+ this.bind();
+
+ this.resize();
+
+ this.fireEvent('initial', this);
+ },
+
+ bind : function()
+ {
+ var _this = this;
+
+ window.addEventListener("resize", function() { _this.resize(); } );
+
+ 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);
+ this.bodyEl.on('mousemove', this.onMouseMove, this);
+ var mousewheel = (/Firefox/i.test(navigator.userAgent))? 'DOMMouseScroll' : 'mousewheel';
+ this.bodyEl.on(mousewheel, this.onMouseWheel, this);
+ Roo.get(document).on('mouseup', this.onMouseUp, this);
+ }
+
+ this.selectorEl.on('change', this.onFileSelected, this);
+ },
+
+ 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;
+
+ // this.selectorEl.dom.value = '';
+
+ },
+
+ resize : function()
+ {
+ if(this.fireEvent('resize', this) != false){
+ this.setThumbBoxPosition();
+ this.setCanvasPosition();
+ }
+ },
+
+ onFooterButtonClick : function(e, el, o, type)
+ {
+ switch (type) {
+ 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);
+ break;
+ case 'download' :
+ this.download(e);
+ break;
+ default :
+ break;
+ }
+
+ this.fireEvent('footerbuttonclick', this, type);
+ },
+
+ beforeSelectFile : function(e)
+ {
+ e.preventDefault();
+
+ if(this.fireEvent('beforeselectfile', this) != false){
+ this.selectorEl.dom.click();
+ }
+ },
+
+ onFileSelected : function(e)
+ {
+ e.preventDefault();
+
+ if(typeof(this.selectorEl.dom.files) == 'undefined' || !this.selectorEl.dom.files.length){
+ return;
+ }
+
+ var file = this.selectorEl.dom.files[0];
+
+ if(this.fireEvent('inspect', this, file) != false){
+ this.prepare(file);
+ }
+
+ },
+
+ trash : function(e)
+ {
+ this.fireEvent('trash', this);
+ },
+
+ download : function(e)
+ {
+ this.fireEvent('download', this);
+ },
+
+ loadCanvas : function(src)
+ {
+ if(this.fireEvent('beforeloadcanvas', this, src) != false){
+
+ this.reset();
+
+ this.imageEl = document.createElement('img');
+
+ var _this = this;
+
+ this.imageEl.addEventListener("load", function(){ _this.onLoadCanvas(); });
+
+ this.imageEl.src = src;
+ }
+ },
+
+ onLoadCanvas : function()
+ {
+ this.imageEl.OriginWidth = this.imageEl.naturalWidth || this.imageEl.width;
+ this.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();
+
+ if(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);
+ var 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;
+ return;
+ }
+
+ 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 minX = Math.ceil(this.thumbEl.getLeft(true));
+ var minY = Math.ceil(this.thumbEl.getTop(true));
+
+ var maxX = Math.ceil(minX + this.thumbEl.getWidth() - this.canvasEl.width);
+ var maxY = Math.ceil(minY + this.thumbEl.getHeight() - this.canvasEl.height);
+
+ if(minX > maxX) {
+ var tempX = minX;
+ minX = maxX;
+ maxX = tempX;
+ }
+
+ if(minY > maxY) {
+ var tempY = minY;
+ minY = maxY;
+ maxY = tempY;
+ }
+
+ var x = Roo.isTouch ? e.browserEvent.touches[0].pageX : e.getPageX();
+ var y = Roo.isTouch ? e.browserEvent.touches[0].pageY : e.getPageY();
+
+ x = x - this.mouseX;
+ y = y - this.mouseY;
+
+ var bgX = Math.ceil(x + this.previewEl.getLeft(true));
+ var bgY = Math.ceil(y + this.previewEl.getTop(true));
+
+ bgX = (bgX < minX) ? minX : ((bgX > maxX) ? maxX : bgX);
+ bgY = (bgY < minY) ? minY : ((bgY > maxY) ? maxY : bgY);
+
+ this.previewEl.setLeft(bgX);
+ this.previewEl.setTop(bgY);
+
+ this.mouseX = Roo.isTouch ? e.browserEvent.touches[0].pageX : e.getPageX();
+ this.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);
+
+ if(!this.zoomable()){
+ this.scale = this.startScale;
+ return;
+ }
+
+
+ this.draw();
+
+ return;
+ },
+
+ zoomable : function()
+ {
+ var minScale = this.thumbEl.getWidth() / this.minWidth;
+
+ if(this.minWidth < this.minHeight){
+ minScale = this.thumbEl.getHeight() / this.minHeight;
+ }
+
+ var width = Math.ceil(this.imageEl.OriginWidth * this.getScaleLevel() / minScale);
+ var height = Math.ceil(this.imageEl.OriginHeight * this.getScaleLevel() / minScale);
+
+
+ var maxWidth = this.imageEl.OriginWidth;
+ var maxHeight = this.imageEl.OriginHeight;
+
+ if(
+ this.isDocument &&
+ (this.rotate == 0 || this.rotate == 180) &&
+ (
+ width > this.imageEl.OriginWidth ||
+ height > this.imageEl.OriginHeight ||
+ (width < this.minWidth && height < this.minHeight)
+ )
+ ){
+ return false;
+ }
+
+ if(
+ this.isDocument &&
+ (this.rotate == 90 || this.rotate == 270) &&
+ (
+ width > this.imageEl.OriginWidth ||
+ height > this.imageEl.OriginHeight ||
+ (width < this.minHeight && height < this.minWidth)
+ )
+ ){
+ return false;
+ }
+
+ if(
+ !this.isDocument &&
+ (this.rotate == 0 || this.rotate == 180) &&
+ (
+ (this.imageEl.OriginWidth >= this.minWidth) && width < this.minWidth ||
+ (this.imageEl.OriginHeight >= this.minHeight) && height < this.minHeight ||
+ width > maxWidth ||
+ height > maxHeight
+ )
+ ){
+ return false;
+ }
+
+ if(
+ !this.isDocument &&
+ (this.rotate == 90 || this.rotate == 270) &&
+ (
+ width < this.minHeight ||
+ width > this.imageEl.OriginWidth ||
+ height < this.minWidth ||
+ height > this.imageEl.OriginHeight
+ )
+ ){
+ return false;
+ }
+
+ return true;
+
+ },
+
+ onRotateLeft : function(e)
+ {
+ if(!this.isDocument && (this.canvasEl.height < this.thumbEl.getWidth() || this.canvasEl.width < this.thumbEl.getHeight())){
+
+ var minScale = this.thumbEl.getWidth() / this.minWidth;
+
+ var bw = Math.ceil(this.canvasEl.width / this.getScaleLevel());
+ var bh = Math.ceil(this.canvasEl.height / this.getScaleLevel());
+
+ this.startScale = this.scale;
+
+ while (this.getScaleLevel() < minScale){
+
+ 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;
+ }
+
+ 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();
+ }
+
+ 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 minScale = this.thumbEl.getWidth() / this.minWidth;
+
+ var bw = Math.ceil(this.canvasEl.width / this.getScaleLevel());
+ var bh = Math.ceil(this.canvasEl.height / this.getScaleLevel());
+
+ this.startScale = this.scale;
+
+ while (this.getScaleLevel() < minScale){
+
+ 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;
+ }
+
+ 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();
+ }
+
+ this.draw();
+
+ this.fireEvent('rotate', this, 'right');
+ },
+
+ onRotateFail : function()
+ {
+ this.errorEl.show(true);
+
+ var _this = this;
+
+ (function() { _this.errorEl.hide(true); }).defer(this.errorTimeout);
+ },
+
+ draw : function()
+ {
+ this.previewEl.dom.innerHTML = '';
+
+ var canvasEl = document.createElement("canvas");
+
+ var contextEl = canvasEl.getContext("2d");
+
+ canvasEl.width = this.imageEl.OriginWidth * this.getScaleLevel();
+ canvasEl.height = this.imageEl.OriginWidth * this.getScaleLevel();
+ var center = this.imageEl.OriginWidth / 2;
+
+ if(this.imageEl.OriginWidth < this.imageEl.OriginHeight){
+ canvasEl.width = this.imageEl.OriginHeight * this.getScaleLevel();
+ canvasEl.height = this.imageEl.OriginHeight * this.getScaleLevel();
+ center = this.imageEl.OriginHeight / 2;
+ }
+
+ contextEl.scale(this.getScaleLevel(), this.getScaleLevel());
+
+ contextEl.translate(center, center);
+ contextEl.rotate(this.rotate * Math.PI / 180);
+
+ contextEl.drawImage(this.imageEl, 0, 0, this.imageEl.OriginWidth, this.imageEl.OriginHeight, center * -1, center * -1, this.imageEl.OriginWidth, this.imageEl.OriginHeight);
+
+ this.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(canvasEl, 0, 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
+
+ break;
+ 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(canvasEl, Math.abs(this.canvasEl.width - this.canvasEl.height), 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
+ break;
+ }
+
+ this.contextEl.drawImage(canvasEl, 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();
+
+ if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
+ 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);
+ break;
+ }
+
+ 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);
+
+ break;
+ 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(canvasEl, 0, 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
+ break;
+ }
+
+ 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);
+
+ break;
+ default :
+ break;
+ }
+
+ this.previewEl.appendChild(this.canvasEl);
+
+ this.setCanvasPosition();
+ },
+
+ crop : function()
+ {
+ if(!this.canvasLoaded){
+ return;
+ }
+
+ var imageCanvas = document.createElement("canvas");
+
+ var imageContext = imageCanvas.getContext("2d");
+
+ imageCanvas.width = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? this.imageEl.OriginWidth : this.imageEl.OriginHeight;
+ imageCanvas.height = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? this.imageEl.OriginWidth : this.imageEl.OriginHeight;
+
+ var center = imageCanvas.width / 2;
+
+ imageContext.translate(center, center);
+
+ imageContext.rotate(this.rotate * Math.PI / 180);
+
+ imageContext.drawImage(this.imageEl, 0, 0, this.imageEl.OriginWidth, this.imageEl.OriginHeight, center * -1, center * -1, this.imageEl.OriginWidth, this.imageEl.OriginHeight);
+
+ var canvas = document.createElement("canvas");
+
+ var context = canvas.getContext("2d");
+
+ canvas.width = this.thumbEl.getWidth() / this.getScaleLevel();
+
+ canvas.height = this.thumbEl.getHeight() / this.getScaleLevel();
+
+ switch (this.rotate) {
+ case 0 :
+
+ var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getWidth() / this.getScaleLevel());
+ var height = (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());
+ var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
+
+ var sx = this.thumbEl.getLeft(true) - this.previewEl.getLeft(true);
+ var sy = this.thumbEl.getTop(true) - this.previewEl.getTop(true);
+
+ sx = sx < 0 ? 0 : (sx / this.getScaleLevel());
+ sy = sy < 0 ? 0 : (sy / this.getScaleLevel());
+
+ if(canvas.width > this.outputMaxWidth) {
+ var scale = this.outputMaxWidth / canvas.width;
+ canvas.width = canvas.width * scale;
+ canvas.height = canvas.height * scale;
+ context.scale(scale, scale);
+ }
+
+ context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
+
+ break;
+ case 90 :
+
+ var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getWidth() / this.getScaleLevel());
+ var height = (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());
+ var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
+
+ var targetWidth = this.minWidth - 2 * x;
+ var targetHeight = this.minHeight - 2 * y;
+
+ var scale = 1;
+
+ if((x == 0 && y == 0) || (x == 0 && y > 0)){
+ scale = targetWidth / width;
+ }
+
+ if(x > 0 && y == 0){
+ scale = targetHeight / height;
+ }
+
+ if(x > 0 && y > 0){
+ scale = targetWidth / width;
+
+ if(width < height){
+ scale = targetHeight / height;
+ }
+ }
+
+ context.scale(scale, scale);
+
+ 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));
+
+ sx = 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;
+
+ context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
+
+ break;
+ case 180 :
+
+ var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getWidth() / this.getScaleLevel());
+ var height = (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());
+ var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
+
+ var targetWidth = this.minWidth - 2 * x;
+ var targetHeight = this.minHeight - 2 * y;
+
+ var scale = 1;
+
+ if((x == 0 && y == 0) || (x == 0 && y > 0)){
+ scale = targetWidth / width;
+ }
+
+ if(x > 0 && y == 0){
+ scale = targetHeight / height;
+ }
+
+ if(x > 0 && y > 0){
+ scale = targetWidth / width;
+
+ if(width < height){
+ scale = targetHeight / height;
+ }
+ }
+
+ context.scale(scale, scale);
+
+ 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));
+
+ sx = 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;
+
+ context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
+
+ break;
+ case 270 :
+
+ var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getWidth() / this.getScaleLevel());
+ var height = (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());
+ var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
+
+ var targetWidth = this.minWidth - 2 * x;
+ var targetHeight = this.minHeight - 2 * y;
+
+ var scale = 1;
+
+ if((x == 0 && y == 0) || (x == 0 && y > 0)){
+ scale = targetWidth / width;
+ }
+
+ if(x > 0 && y == 0){
+ scale = targetHeight / height;
+ }
+
+ if(x > 0 && y > 0){
+ scale = targetWidth / width;
+
+ if(width < height){
+ scale = targetHeight / height;
+ }
+ }
+
+ context.scale(scale, scale);
+ 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));
+
+ 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);
+
+ context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
+
+ break;
+ default :
+ break;
+ }
+
+ this.cropData = canvas.toDataURL(this.cropType);
+
+ if(this.fireEvent('crop', this, this.cropData) !== false){
+ this.process(this.file, this.cropData);
+ }
+
+ return;
+
+ },
+
+ setThumbBoxSize : function()
+ {
+ var width, height;
+
+ if(this.isDocument && typeof(this.imageEl) != 'undefined'){
+ width = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.max(this.minWidth, this.minHeight) : Math.min(this.minWidth, this.minHeight);
+ height = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.min(this.minWidth, this.minHeight) : Math.max(this.minWidth, this.minHeight);
+
+ this.minWidth = width;
+ this.minHeight = height;
+
+ if(this.rotate == 90 || this.rotate == 270){
+ this.minWidth = height;
+ this.minHeight = width;
+ }
+ }
+
+ height = 300;
+ width = Math.ceil(this.minWidth * height / this.minHeight);
+
+ if(this.minWidth > this.minHeight){
+ width = 300;
+ height = Math.ceil(this.minHeight * width / this.minWidth);
+ }
+
+ this.thumbEl.setStyle({
+ width : width + 'px',
+ height : height + '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);
+
+ this.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']];
+ }
+
+ this.rotate = Roo.dialog.UploadCropbox['Orientation'][this.baseRotate];
+
+ },
+
+ baseScaleLevel : function()
+ {
+ var width, height;
+
+ if(this.isDocument){
+
+ if(this.baseRotate == 6 || this.baseRotate == 8){
+
+ height = this.thumbEl.getHeight();
+ this.baseScale = height / this.imageEl.OriginWidth;
+
+ if(this.imageEl.OriginHeight * this.baseScale > this.thumbEl.getWidth()){
+ width = this.thumbEl.getWidth();
+ this.baseScale = width / this.imageEl.OriginHeight;
+ }
+
+ return;
+ }
+
+ height = this.thumbEl.getHeight();
+ this.baseScale = height / this.imageEl.OriginHeight;
+
+ if(this.imageEl.OriginWidth * this.baseScale > this.thumbEl.getWidth()){
+ width = this.thumbEl.getWidth();
+ this.baseScale = width / this.imageEl.OriginWidth;
+ }
+
+ return;
+ }
+
+ if(this.baseRotate == 6 || this.baseRotate == 8){
+
+ width = this.thumbEl.getHeight();
+ this.baseScale = width / this.imageEl.OriginHeight;
+
+ if(this.imageEl.OriginHeight * this.baseScale < this.thumbEl.getWidth()){
+ height = this.thumbEl.getWidth();
+ this.baseScale = height / this.imageEl.OriginHeight;
+ }
+
+ if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
+ height = this.thumbEl.getWidth();
+ this.baseScale = height / this.imageEl.OriginHeight;
+
+ if(this.imageEl.OriginWidth * this.baseScale < this.thumbEl.getHeight()){
+ width = this.thumbEl.getHeight();
+ this.baseScale = width / this.imageEl.OriginWidth;
+ }
+ }
+
+ return;
+ }
+
+ width = this.thumbEl.getWidth();
+ this.baseScale = width / this.imageEl.OriginWidth;
+
+ if(this.imageEl.OriginHeight * this.baseScale < this.thumbEl.getHeight()){
+ height = this.thumbEl.getHeight();
+ this.baseScale = height / this.imageEl.OriginHeight;
+ }
+
+ if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
+
+ height = this.thumbEl.getHeight();
+ this.baseScale = height / this.imageEl.OriginHeight;
+
+ if(this.imageEl.OriginWidth * this.baseScale < this.thumbEl.getWidth()){
+ width = this.thumbEl.getWidth();
+ this.baseScale = width / this.imageEl.OriginWidth;
+ }
+
+ }
+
+ if(this.imageEl.OriginWidth < this.minWidth || this.imageEl.OriginHeight < this.minHeight) {
+ this.baseScale = width / this.minWidth;
+ }
+
+ return;
+ },
+
+ getScaleLevel : function()
+ {
+ return this.baseScale * Math.pow(1.02, this.scale);
+ },
+
+ onTouchStart : function(e)
+ {
+ if(!this.canvasLoaded){
+ this.beforeSelectFile(e);
+ return;
+ }
+
+ var touches = e.browserEvent.touches;
+
+ if(!touches){
+ return;
+ }
+
+ if(touches.length == 1){
+ this.onMouseDown(e);
+ return;
+ }
+
+ if(touches.length != 2){
+ return;
+ }
+
+ var coords = [];
+
+ for(var i = 0, finger; finger = touches[i]; i++){
+ coords.push(finger.pageX, finger.pageY);
+ }
+
+ var x = Math.pow(coords[0] - coords[2], 2);
+ var y = Math.pow(coords[1] - coords[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 touches = e.browserEvent.touches;
+
+ if(!touches){
+ return;
+ }
+
+ if(this.dragable){
+ this.onMouseMove(e);
+ return;
+ }
+
+ var coords = [];
+
+ for(var i = 0, finger; finger = touches[i]; i++){
+ coords.push(finger.pageX, finger.pageY);
+ }
+
+ var x = Math.pow(coords[0] - coords[2], 2);
+ var y = Math.pow(coords[1] - coords[3], 2);
+
+ this.endDistance = Math.sqrt(x + y);
+
+ this.scale = this.startScale + Math.floor(Math.log(this.endDistance / this.startDistance) / Math.log(1.1));
+
+ if(!this.zoomable()){
+ this.scale = this.startScale;
+ return;
+ }
+
+ this.draw();
+
+ },
+
+ onTouchEnd : function(e)
+ {
+ this.pinching = false;
+ this.dragable = false;
+
+ },
+
+ process : function(file, crop)
+ {
+ if(this.loadMask){
+ this.maskEl.mask(this.loadingText);
+ }
+
+ this.xhr = new XMLHttpRequest();
+
+ file.xhr = this.xhr;
+
+ this.xhr.open(this.method, this.url, true);
+
+ var headers = {
+ "Accept": "application/json",
+ "Cache-Control": "no-cache",
+ "X-Requested-With": "XMLHttpRequest"
+ };
+
+ for (var headerName in headers) {
+ var headerValue = headers[headerName];
+ if (headerValue) {
+ this.xhr.setRequestHeader(headerName, headerValue);
+ }
+ }
+
+ var _this = this;
+
+ this.xhr.onload = function()
+ {
+ _this.xhrOnLoad(_this.xhr);
+ }
+
+ this.xhr.onerror = function()
+ {
+ _this.xhrOnError(_this.xhr);
+ }
+
+ var formData = new FormData();
+
+ formData.append('returnHTML', 'NO');
+
+ if(crop){
+ formData.append('crop', crop);
+ var blobBin = atob(crop.split(',')[1]);
+ var array = [];
+ for(var i = 0; i < blobBin.length; i++) {
+ array.push(blobBin.charCodeAt(i));
+ }
+ var croppedFile =new Blob([new Uint8Array(array)], {type: this.cropType});
+ formData.append(this.paramName, croppedFile, file.name);
+ }
+
+ if(typeof(file.filename) != 'undefined'){
+ formData.append('filename', file.filename);
+ }
+
+ if(typeof(file.mimetype) != 'undefined'){
+ formData.append('mimetype', file.mimetype);
+ }
+
+ if(this.fireEvent('arrange', this, formData) != false){
+ this.xhr.send(formData);
+ };
+ },
+
+ xhrOnLoad : function(xhr)
+ {
+ if(this.loadMask){
+ this.maskEl.unmask();
+ }
+
+ if (xhr.readyState !== 4) {
+ this.fireEvent('exception', this, xhr);
+ return;
+ }
+
+ var response = Roo.decode(xhr.responseText);
+
+ if(!response.success){
+ this.fireEvent('exception', this, xhr);
+ return;
+ }
+
+ var response = Roo.decode(xhr.responseText);
+
+ this.fireEvent('upload', this, response);
+
+ },
+
+ xhrOnError : function()
+ {
+ if(this.loadMask){
+ this.maskEl.unmask();
+ }
+
+ Roo.log('xhr on error');
+
+ var response = Roo.decode(xhr.responseText);
+
+ Roo.log(response);
+
+ },
+
+ prepare : function(file)
+ {
+ if(this.loadMask){
+ this.maskEl.mask(this.loadingText);
+ }
+
+ this.file = false;
+ this.exif = {};
+
+ if(typeof(file) === 'string'){
+ this.loadCanvas(file);
+ return;
+ }
+
+ if(!file || !this.urlAPI){
+ return;
+ }
+
+ this.file = file;
+ if(typeof(file.type) != 'undefined' && file.type.length != 0) {
+ this.cropType = file.type;
+ }
+
+ var _this = this;
+
+ if(this.fireEvent('prepare', this, this.file) != false){
+
+ var reader = new FileReader();
+
+ reader.onload = function (e) {
+ if (e.target.error) {
+ Roo.log(e.target.error);
+ return;
+ }
+
+ var buffer = e.target.result,
+ dataView = new DataView(buffer),
+ offset = 2,
+ maxOffset = dataView.byteLength - 4,
+ markerBytes,
+ markerLength;
+
+ if (dataView.getUint16(0) === 0xffd8) {
+ while (offset < maxOffset) {
+ markerBytes = dataView.getUint16(offset);
+
+ if ((markerBytes >= 0xffe0 && markerBytes <= 0xffef) || markerBytes === 0xfffe) {
+ markerLength = dataView.getUint16(offset + 2) + 2;
+ if (offset + markerLength > dataView.byteLength) {
+ Roo.log('Invalid meta data: Invalid segment size.');
+ break;
+ }
+
+ if(markerBytes == 0xffe1){
+ _this.parseExifData(
+ dataView,
+ offset,
+ markerLength
+ );
+ }
+
+ offset += markerLength;
+
+ continue;
+ }
+
+ break;
+ }
+
+ }
+
+ var url = _this.urlAPI.createObjectURL(_this.file);
+
+ _this.loadCanvas(url);
+
+ return;
+ }
+
+ reader.readAsArrayBuffer(this.file);
+
+ }
+
+ },
+
+ parseExifData : function(dataView, offset, length)
+ {
+ var tiffOffset = offset + 10,
+ littleEndian,
+ dirOffset;
+
+ if (dataView.getUint32(offset + 4) !== 0x45786966) {
+ // No Exif data, might be XMP data instead
+ return;
+ }
+
+ // Check for the ASCII code for "Exif" (0x45786966):
+ if (dataView.getUint32(offset + 4) !== 0x45786966) {
+ // No Exif data, might be XMP data instead
+ return;
+ }
+ if (tiffOffset + 8 > dataView.byteLength) {
+ Roo.log('Invalid Exif data: Invalid segment size.');
+ return;
+ }
+ // Check for the two null bytes:
+ if (dataView.getUint16(offset + 8) !== 0x0000) {
+ Roo.log('Invalid Exif data: Missing byte alignment offset.');
+ return;
+ }
+ // Check the byte alignment:
+ switch (dataView.getUint16(tiffOffset)) {
+ case 0x4949:
+ littleEndian = true;
+ break;
+ case 0x4D4D:
+ littleEndian = false;
+ break;
+ default:
+ Roo.log('Invalid Exif data: Invalid byte alignment marker.');
+ return;
+ }
+ // Check for the TIFF tag marker (0x002A):
+ if (dataView.getUint16(tiffOffset + 2, littleEndian) !== 0x002A) {
+ Roo.log('Invalid Exif data: Missing TIFF marker.');
+ return;
+ }
+ // Retrieve the directory offset bytes, usually 0x00000008 or 8 decimal:
+ dirOffset = dataView.getUint32(tiffOffset + 4, littleEndian);
+
+ this.parseExifTags(
+ dataView,
+ tiffOffset,
+ tiffOffset + dirOffset,
+ littleEndian
+ );
+ },
+
+ parseExifTags : function(dataView, tiffOffset, dirOffset, littleEndian)
+ {
+ var tagsNumber,
+ dirEndOffset,
+ i;
+ if (dirOffset + 6 > dataView.byteLength) {
+ Roo.log('Invalid Exif data: Invalid directory offset.');
+ return;
+ }
+ tagsNumber = dataView.getUint16(dirOffset, littleEndian);
+ dirEndOffset = dirOffset + 2 + 12 * tagsNumber;
+ if (dirEndOffset + 4 > dataView.byteLength) {
+ Roo.log('Invalid Exif data: Invalid directory size.');
+ return;
+ }
+ for (i = 0; i < tagsNumber; i += 1) {
+ this.parseExifTag(
+ dataView,
+ tiffOffset,
+ dirOffset + 2 + 12 * i, // tag offset
+ littleEndian
+ );
+ }
+ // Return the offset to the next directory:
+ return dataView.getUint32(dirEndOffset, littleEndian);
+ },
+
+ parseExifTag : function (dataView, tiffOffset, offset, littleEndian)
+ {
+ var tag = dataView.getUint16(offset, littleEndian);
+
+ this.exif[tag] = this.getExifValue(
+ dataView,
+ tiffOffset,
+ offset,
+ dataView.getUint16(offset + 2, littleEndian), // tag type
+ dataView.getUint32(offset + 4, littleEndian), // tag length
+ littleEndian
+ );
+ },
+
+ getExifValue : function (dataView, tiffOffset, offset, type, length, littleEndian)
+ {
+ var tagType = Roo.dialog.UploadCropbox.exifTagTypes[type],
+ tagSize,
+ dataOffset,
+ values,
+ i,
+ str,
+ c;
+
+ if (!tagType) {
+ Roo.log('Invalid Exif data: Invalid tag type.');
+ return;
+ }
+
+ tagSize = tagType.size * length;
+ // Determine if the value is contained in the dataOffset bytes,
+ // or if the value at the dataOffset is a pointer to the actual data:
+ dataOffset = tagSize > 4 ?
+ tiffOffset + dataView.getUint32(offset + 8, littleEndian) : (offset + 8);
+ if (dataOffset + tagSize > dataView.byteLength) {
+ Roo.log('Invalid Exif data: Invalid data offset.');
+ return;
+ }
+ if (length === 1) {
+ return tagType.getValue(dataView, dataOffset, littleEndian);
+ }
+ values = [];
+ for (i = 0; i < length; i += 1) {
+ values[i] = tagType.getValue(dataView, dataOffset + i * tagType.size, littleEndian);
+ }
+
+ if (tagType.ascii) {
+ str = '';
+ // Concatenate the chars:
+ for (i = 0; i < values.length; i += 1) {
+ c = values[i];
+ // Ignore the terminating NULL byte(s):
+ if (c === '\u0000') {
+ break;
+ }
+ str += c;
+ }
+ return str;
+ }
+ return values;
+ }
+
+});
+
+Roo.apply(Roo.dialog.UploadCropbox, {
+ tags : {
+ 'Orientation': 0x0112
+ },
+
+ Orientation: {
+ 1: 0, //'top-left',
+// 2: 'top-right',
+ 3: 180, //'bottom-right',
+// 4: 'bottom-left',
+// 5: 'left-top',
+ 6: 90, //'right-top',
+// 7: 'right-bottom',
+ 8: 270 //'left-bottom'
+ },
+
+ exifTagTypes : {
+ // byte, 8-bit unsigned int:
+ 1: {
+ getValue: function (dataView, dataOffset) {
+ return dataView.getUint8(dataOffset);
+ },
+ size: 1
+ },
+ // ascii, 8-bit byte:
+ 2: {
+ getValue: function (dataView, dataOffset) {
+ return String.fromCharCode(dataView.getUint8(dataOffset));
+ },
+ size: 1,
+ ascii: true
+ },
+ // short, 16 bit int:
+ 3: {
+ getValue: function (dataView, dataOffset, littleEndian) {
+ return dataView.getUint16(dataOffset, littleEndian);
+ },
+ size: 2
+ },
+ // long, 32 bit int:
+ 4: {
+ getValue: function (dataView, dataOffset, littleEndian) {
+ return dataView.getUint32(dataOffset, littleEndian);
+ },
+ size: 4
+ },
+ // rational = two long values, first is numerator, second is denominator:
+ 5: {
+ getValue: function (dataView, dataOffset, littleEndian) {
+ return dataView.getUint32(dataOffset, littleEndian) /
+ dataView.getUint32(dataOffset + 4, littleEndian);
+ },
+ size: 8
+ },
+ // slong, 32 bit signed int:
+ 9: {
+ getValue: function (dataView, dataOffset, littleEndian) {
+ return dataView.getInt32(dataOffset, littleEndian);
+ },
+ size: 4
+ },
+ // srational, two slongs, first is numerator, second is denominator:
+ 10: {
+ getValue: function (dataView, dataOffset, littleEndian) {
+ return dataView.getInt32(dataOffset, littleEndian) /
+ dataView.getInt32(dataOffset + 4, littleEndian);
+ },
+ 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 : ''
+ }
+ ]
+ },
+ {
+ tag : 'div',
+ cls : 'btn-group roo-upload-cropbox-picture',
+ action : 'picture',
+ cn : [
+ {
+ tag : 'button',
+ cls : 'btn btn-default',
+ html : ''
+ }
+ ]
+ },
+ {
+ tag : 'div',
+ cls : 'btn-group roo-upload-cropbox-rotate-right',
+ action : 'rotate-right',
+ cn : [
+ {
+ tag : 'button',
+ cls : 'btn btn-default',
+ html : ''
+ }
+ ]
+ }
+ ],
+ DOCUMENT : [
+ {
+ tag : 'div',
+ cls : 'btn-group roo-upload-cropbox-rotate-left',
+ action : 'rotate-left',
+ cn : [
+ {
+ tag : 'button',
+ cls : 'btn btn-default',
+ html : ''
+ }
+ ]
+ },
+ {
+ tag : 'div',
+ cls : 'btn-group roo-upload-cropbox-download',
+ action : 'download',
+ cn : [
+ {
+ tag : 'button',
+ cls : 'btn btn-default',
+ html : ''
+ }
+ ]
+ },
+ {
+ tag : 'div',
+ cls : 'btn-group roo-upload-cropbox-crop',
+ action : 'crop',
+ cn : [
+ {
+ tag : 'button',
+ cls : 'btn btn-default',
+ html : ''
+ }
+ ]
+ },
+ {
+ tag : 'div',
+ cls : 'btn-group roo-upload-cropbox-trash',
+ action : 'trash',
+ cn : [
+ {
+ tag : 'button',
+ cls : 'btn btn-default',
+ html : ''
+ }
+ ]
+ },
+ {
+ tag : 'div',
+ cls : 'btn-group roo-upload-cropbox-rotate-right',
+ action : 'rotate-right',
+ cn : [
+ {
+ tag : 'button',
+ cls : 'btn btn-default',
+ html : ''
+ }
+ ]
+ }
+ ],
+ ROTATOR : [
+ {
+ tag : 'div',
+ cls : 'btn-group roo-upload-cropbox-rotate-left',
+ action : 'rotate-left',
+ cn : [
+ {
+ tag : 'button',
+ cls : 'btn btn-default',
+ html : ''
+ }
+ ]
+ },
+ {
+ tag : 'div',
+ cls : 'btn-group roo-upload-cropbox-rotate-right',
+ action : 'rotate-right',
+ cn : [
+ {
+ tag : 'button',
+ cls : 'btn btn-default',
+ html : ''
+ }
+ ]
+ }
+ ]
+ }
+});
diff --git a/roojs-ui.js b/roojs-ui.js
index e36924adf0..eb99484de8 100644
--- a/roojs-ui.js
+++ b/roojs-ui.js
@@ -1605,9 +1605,9 @@ return this.el.getUpdateManager();},_handleRefresh:function(A,B,C){if(!C||!this.
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);
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);
}},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();
-}},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();
-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,'');
-this.view=B;return B;}return false;}});
+}},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);
+this.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"));
+var B=new Roo.factory(A);B.render&&B.render(false,'');this.view=B;return B;}return false;}});
// Roo/GridPanel.js
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);
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);
@@ -1936,3 +1936,104 @@ F.push("(typeof("+G+") == 'undefined')");});var H='(('+F.join(" || ")+") ? undef
}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 ['"];
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,{}
);},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);};
+// Roo/dialog/namespace.js
+Roo.dialog={};
+// Roo/dialog/UploadCropbox.js
+Roo.dialog.UploadCropbox=function(A){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}
+);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,outputMaxWidth:1200,file:false,exif:{}
+,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'}
+,{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}
+]},{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){Roo.dialog.UploadCropbox.superclass.onRender.call(this,ct,A);if(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;}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);C.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);this.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();this.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();this.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();this.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();});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);this.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);},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();this.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);break;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();if(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);},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;this.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();if(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);var 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.widthC){var E=A;A=C;C=E;}if(B>D){var F=B;B=D;D=F;}var x=Roo.isTouch?e.browserEvent.touches[0].pageX:e.getPageX();
+var y=Roo.isTouch?e.browserEvent.touches[0].pageY:e.getPageY();x=x-this.mouseX;y=y-this.mouseY;var G=Math.ceil(x+this.previewEl.getLeft(true));var H=Math.ceil(y+this.previewEl.getTop(true));G=(GC)?C:G);H=(HD)?D:H);this.previewEl.setLeft(G);
+this.previewEl.setTop(H);this.mouseX=Roo.isTouch?e.browserEvent.touches[0].pageX:e.getPageX();this.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);if(!this.zoomable()){this.scale=this.startScale;return;}this.draw();return;},zoomable:function(){var A=this.thumbEl.getWidth()/this.minWidth;if(this.minWidththis.imageEl.OriginWidth||C>this.imageEl.OriginHeight||(Bthis.imageEl.OriginWidth||C>this.imageEl.OriginHeight||(B=this.minWidth)&&B=this.minHeight)&&CD||C>E)){return false;
+}if(!this.isDocument&&(this.rotate==90||this.rotate==270)&&(Bthis.imageEl.OriginWidth||Cthis.imageEl.OriginHeight)){return false;}return true;},onRotateLeft:function(e){if(!this.isDocument&&(this.canvasEl.height180)?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();
+}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");
+var 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.OriginWidththis.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);
+break;}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();
+if(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);
+break;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);
+break;}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();
+},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;
+var 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");
+D.width=this.thumbEl.getWidth()/this.getScaleLevel();D.height=this.thumbEl.getHeight()/this.getScaleLevel();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());var 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());var sx=this.thumbEl.getLeft(true)-this.previewEl.getLeft(true);var sy=this.thumbEl.getTop(true)-this.previewEl.getTop(true);
+sx=sx<0?0:(sx/this.getScaleLevel());sy=sy<0?0:(sy/this.getScaleLevel());if(D.width>this.outputMaxWidth){var H=this.outputMaxWidth/D.width;D.width=D.width*H;D.height=D.height*H;E.scale(H,H);}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());
+var 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());
+var y=(this.thumbEl.getTop(true)>this.previewEl.getTop(true))?0:((this.previewEl.getTop(true)-this.thumbEl.getTop(true))/this.getScaleLevel());var I=this.minWidth-2*x;var J=this.minHeight-2*y;var H=1;if((x==0&&y==0)||(x==0&&y>0)){H=I/F;}if(x>0&&y==0){H=J/G;
+}if(x>0&&y>0){H=I/F;if(Fthis.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());
+var 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());
+var y=(this.thumbEl.getTop(true)>this.previewEl.getTop(true))?0:((this.previewEl.getTop(true)-this.thumbEl.getTop(true))/this.getScaleLevel());var I=this.minWidth-2*x;var J=this.minHeight-2*y;var H=1;if((x==0&&y==0)||(x==0&&y>0)){H=I/F;}if(x>0&&y==0){H=J/G;
+}if(x>0&&y>0){H=I/F;if(Fthis.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.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());
+var 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());
+var I=this.minWidth-2*x;var J=this.minHeight-2*y;var H=1;if((x==0&&y==0)||(x==0&&y>0)){H=I/F;}if(x>0&&y==0){H=J/G;}if(x>0&&y>0){H=I/F;if(Fthis.imageEl.OriginHeight)?0:Math.abs(this.imageEl.OriginWidth-this.imageEl.OriginHeight);
+E.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);
+B=(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);
+if(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);
+this.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']];
+}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();
+this.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;
+}return;}if(this.baseRotate==6||this.baseRotate==8){A=this.thumbEl.getHeight();this.baseScale=A/this.imageEl.OriginHeight;if(this.imageEl.OriginHeight*this.baseScalethis.imageEl.OriginHeight){B=this.thumbEl.getWidth();this.baseScale=B/this.imageEl.OriginHeight;if(this.imageEl.OriginWidth*this.baseScalethis.imageEl.OriginHeight){B=this.thumbEl.getHeight();
+this.baseScale=B/this.imageEl.OriginHeight;if(this.imageEl.OriginWidth*this.baseScale=0xffe0&&H<=0xffef)||H===0xfffe){I=E.getUint16(F+2)+2;if(F+I>E.byteLength){Roo.log('Invalid meta data: Invalid segment size.');break;}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;}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;default: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;if(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;i4?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'}]},{tag:'div',cls:'btn-group roo-upload-cropbox-picture',action:'picture',cn:[{tag:'button',cls:'btn btn-default',html:''}
+]},{tag:'div',cls:'btn-group roo-upload-cropbox-rotate-right',action:'rotate-right',cn:[{tag:'button',cls:'btn btn-default',html:''}]}],DOCUMENT:[{tag:'div',cls:'btn-group roo-upload-cropbox-rotate-left',action:'rotate-left',cn:[{tag:'button',cls:'btn btn-default',html:''}
+]},{tag:'div',cls:'btn-group roo-upload-cropbox-download',action:'download',cn:[{tag:'button',cls:'btn btn-default',html:''}]},{tag:'div',cls:'btn-group roo-upload-cropbox-crop',action:'crop',cn:[{tag:'button',cls:'btn btn-default',html:''}
+]},{tag:'div',cls:'btn-group roo-upload-cropbox-trash',action:'trash',cn:[{tag:'button',cls:'btn btn-default',html:''}]},{tag:'div',cls:'btn-group roo-upload-cropbox-rotate-right',action:'rotate-right',cn:[{tag:'button',cls:'btn btn-default',html:''}
+]}],ROTATOR:[{tag:'div',cls:'btn-group roo-upload-cropbox-rotate-left',action:'rotate-left',cn:[{tag:'button',cls:'btn btn-default',html:''}]},{tag:'div',cls:'btn-group roo-upload-cropbox-rotate-right',action:'rotate-right',cn:[{tag:'button',cls:'btn btn-default',html:''}
+]}]}});