From ce8ad37f89f19c4bcef486026a984a7c00c96429 Mon Sep 17 00:00:00 2001 From: edward Date: Thu, 3 Mar 2016 16:15:54 +0800 Subject: [PATCH] roojs-bootstrap.js roojs-bootstrap-debug.js --- roojs-bootstrap-debug.js | 814 +++++++++++++++++++++++++++++---------- roojs-bootstrap.js | 118 +++--- 2 files changed, 690 insertions(+), 242 deletions(-) diff --git a/roojs-bootstrap-debug.js b/roojs-bootstrap-debug.js index d3487d9c21..5b57b6d6a8 100644 --- a/roojs-bootstrap-debug.js +++ b/roojs-bootstrap-debug.js @@ -5798,7 +5798,7 @@ Roo.extend(Roo.bootstrap.Table, Roo.bootstrap.Component, { for(var i = 0, len = cm.getColumnCount(); i < len; i++){ var config = cm.config[i]; - + var c = { tag: 'th', style : '', @@ -24019,6 +24019,7 @@ Roo.extend(Roo.bootstrap.Alert, Roo.bootstrap.Component, { * @cfg {Number} minWidth default 300 * @cfg {Number} minHeight default 300 * @cfg {Array} buttons default ['rotateLeft', 'pictureBtn', 'rotateRight'] + * @cfg {Boolean} isDocument (true|false) default false * * @constructor * Create a new UploadCropbox @@ -24093,8 +24094,14 @@ Roo.bootstrap.UploadCropbox = function(config){ * Fire when resize * @param {Roo.bootstrap.UploadCropbox} this */ - "resize" : true - + "resize" : true, + /** + * @event rotate + * Fire when rotate the image + * @param {Roo.bootstrap.UploadCropbox} this + * @param {String} pos + */ + "rotate" : true }); this.buttons = this.buttons || Roo.bootstrap.UploadCropbox.footer.STANDARD; @@ -24121,6 +24128,7 @@ Roo.extend(Roo.bootstrap.UploadCropbox, Roo.bootstrap.Component, { cropType : 'image/jpeg', buttons : false, canvasLoaded : false, + isDocument : false, getAutoCreate : function() { @@ -24336,8 +24344,14 @@ Roo.extend(Roo.bootstrap.UploadCropbox, Roo.bootstrap.Component, { this.imageEl.OriginWidth = this.imageEl.naturalWidth || this.imageEl.width; this.imageEl.OriginHeight = this.imageEl.naturalHeight || this.imageEl.height; - this.setThumbBoxPosition(); this.baseRotateLevel(); + + if(this.isDocument){ + this.setThumbBoxSize(); + } + + this.setThumbBoxPosition(); + this.baseScaleLevel(); this.draw(); @@ -24369,6 +24383,11 @@ Roo.extend(Roo.bootstrap.UploadCropbox, Roo.bootstrap.Component, { 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(); @@ -24440,28 +24459,58 @@ Roo.extend(Roo.bootstrap.UploadCropbox, Roo.bootstrap.Component, { { var minScale = this.thumbEl.getWidth() / this.minWidth; - var width = Math.ceil(this.imageEl.OriginWidth * this.getScaleLevel()); - var height = Math.ceil(this.imageEl.OriginHeight * this.getScaleLevel()); + 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); + + 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) && ( - width / minScale < this.minWidth || - width / minScale > this.imageEl.OriginWidth || - height / minScale < this.minHeight || - height / minScale > this.imageEl.OriginHeight + width < this.minWidth || + width > this.imageEl.OriginWidth || + height < this.minHeight || + height > this.imageEl.OriginHeight ) ){ return false; } if( + !this.isDocument && (this.rotate == 90 || this.rotate == 270) && ( - width / minScale < this.minHeight || - width / minScale > this.imageEl.OriginWidth || - height / minScale < this.minWidth || - height / minScale > this.imageEl.OriginHeight + width < this.minHeight || + width > this.imageEl.OriginWidth || + height < this.minWidth || + height > this.imageEl.OriginHeight ) ){ return false; @@ -24473,12 +24522,12 @@ Roo.extend(Roo.bootstrap.UploadCropbox, Roo.bootstrap.Component, { onRotateLeft : function(e) { - var minScale = this.thumbEl.getWidth() / this.minWidth; - - if(this.canvasEl.height < this.thumbEl.getWidth() || this.canvasEl.width < this.thumbEl.getHeight()){ + if(!this.isDocument && (this.canvasEl.height < this.thumbEl.getWidth() || this.canvasEl.width < this.thumbEl.getHeight())){ - var bw = this.canvasEl.width / this.getScaleLevel(); - var bh = this.canvasEl.height / this.getScaleLevel(); + 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; @@ -24491,8 +24540,8 @@ Roo.extend(Roo.bootstrap.UploadCropbox, Roo.bootstrap.Component, { } if( - bw * this.getScaleLevel() < this.thumbEl.getHeight() || - bh * this.getScaleLevel() < this.thumbEl.getWidth() + Math.ceil(bw * this.getScaleLevel()) < this.thumbEl.getHeight() || + Math.ceil(bh * this.getScaleLevel()) < this.thumbEl.getWidth() ){ continue; } @@ -24513,18 +24562,26 @@ Roo.extend(Roo.bootstrap.UploadCropbox, Roo.bootstrap.Component, { 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) { - var minScale = this.thumbEl.getWidth() / this.minWidth; - - if(this.canvasEl.height < this.thumbEl.getWidth() || this.canvasEl.width < this.thumbEl.getHeight()){ + if(!this.isDocument && (this.canvasEl.height < this.thumbEl.getWidth() || this.canvasEl.width < this.thumbEl.getHeight())){ - var bw = this.canvasEl.width / this.getScaleLevel(); - var bh = this.canvasEl.height / this.getScaleLevel(); + 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; @@ -24537,8 +24594,8 @@ Roo.extend(Roo.bootstrap.UploadCropbox, Roo.bootstrap.Component, { } if( - bw * this.getScaleLevel() < this.thumbEl.getHeight() || - bh * this.getScaleLevel() < this.thumbEl.getWidth() + Math.ceil(bw * this.getScaleLevel()) < this.thumbEl.getHeight() || + Math.ceil(bh * this.getScaleLevel()) < this.thumbEl.getWidth() ){ continue; } @@ -24559,7 +24616,15 @@ Roo.extend(Roo.bootstrap.UploadCropbox, Roo.bootstrap.Component, { 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() @@ -24662,31 +24727,200 @@ Roo.extend(Roo.bootstrap.UploadCropbox, Roo.bootstrap.Component, { if(!this.canvasLoaded){ return; } - var canvas = document.createElement("canvas"); - var context = canvas.getContext("2d"); + var imageCanvas = document.createElement("canvas"); - canvas.width = this.minWidth; - canvas.height = this.minHeight; + var imageContext = imageCanvas.getContext("2d"); - var cropWidth = this.thumbEl.getWidth(); - var cropHeight = this.thumbEl.getHeight(); + 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 x = this.thumbEl.getLeft(true) - this.previewEl.getLeft(true); - var y = this.thumbEl.getTop(true) - this.previewEl.getTop(true); + var center = imageCanvas.width / 2; - if(this.canvasEl.width - cropWidth < x){ - x = this.canvasEl.width - cropWidth; - } + imageContext.translate(center, center); - if(this.canvasEl.height - cropHeight < y){ - y = this.canvasEl.height - cropHeight; - } + imageContext.rotate(this.rotate * Math.PI / 180); - x = x < 0 ? 0 : x; - y = y < 0 ? 0 : y; + imageContext.drawImage(this.imageEl, 0, 0, this.imageEl.OriginWidth, this.imageEl.OriginHeight, center * -1, center * -1, this.imageEl.OriginWidth, this.imageEl.OriginHeight); - context.drawImage(this.canvasEl, x, y, cropWidth, cropHeight, 0, 0, canvas.width, canvas.height); + var canvas = document.createElement("canvas"); + + var context = canvas.getContext("2d"); + + canvas.width = this.minWidth; + canvas.height = this.minHeight; + + 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 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()); + + 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); @@ -24696,8 +24930,23 @@ Roo.extend(Roo.bootstrap.UploadCropbox, Roo.bootstrap.Component, { setThumbBoxSize : function() { - var height = 300; - var width = Math.ceil(this.minWidth * height / this.minHeight); + 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; @@ -24743,10 +24992,36 @@ Roo.extend(Roo.bootstrap.UploadCropbox, Roo.bootstrap.Component, { { 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 = height / this.imageEl.OriginHeight; + this.baseScale = width / this.imageEl.OriginHeight; if(this.imageEl.OriginHeight * this.baseScale < this.thumbEl.getWidth()){ height = this.thumbEl.getWidth(); @@ -24774,7 +25049,6 @@ Roo.extend(Roo.bootstrap.UploadCropbox, Roo.bootstrap.Component, { this.baseScale = height / this.imageEl.OriginHeight; } - if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){ height = this.thumbEl.getHeight(); @@ -24881,22 +25155,22 @@ Roo.extend(Roo.bootstrap.UploadCropbox, Roo.bootstrap.Component, { }, - prepare : function(input) - { + prepare : function(file) + { this.file = false; this.exif = {}; - if(typeof(input) === 'string'){ - this.loadCanvas(input); + if(typeof(file) === 'string'){ + this.loadCanvas(file); return; } - if(!input.files || !input.files[0] || !this.urlAPI){ + if(!file || !this.urlAPI){ return; } - this.file = input.files[0]; - this.cropType = this.file.type; + this.file = file; + this.cropType = file.type; var _this = this; @@ -25274,6 +25548,32 @@ Roo.apply(Roo.bootstrap.UploadCropbox, { } ] } + ], + 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 : '' + } + ] + } ] } }); @@ -25297,6 +25597,7 @@ Roo.apply(Roo.bootstrap.UploadCropbox, { * @cfg {String} fieldLabel * @cfg {Number} labelWidth default 4 * @cfg {String} labelAlign (left|top) default left + * @cfg {Boolean} editable (true|false) allow edit when upload a image default true * * @constructor * Create a new DocumentManager @@ -25353,7 +25654,14 @@ Roo.bootstrap.DocumentManager = function(config){ * @param {Roo.bootstrap.DocumentManager} this * @param {Object} file */ - "click" : true + "click" : true, + /** + * @event edit + * Fire when upload a image and editable set to true + * @param {Roo.bootstrap.DocumentManager} this + * @param {Object} file + */ + "edit" : true }); }; @@ -25373,6 +25681,8 @@ Roo.extend(Roo.bootstrap.DocumentManager, Roo.bootstrap.Component, { fieldLabel : '', labelWidth : 4, labelAlign : 'left', + editable : true, + delegates : [], getAutoCreate : function() { @@ -25463,12 +25773,14 @@ Roo.extend(Roo.bootstrap.DocumentManager, Roo.bootstrap.Component, { this.selectorEl.attr('multiple', 'multiple'); } - this.selectorEl.on('change', this.onSelect, this); + this.selectorEl.on('change', this.onFileSelected, this); this.uploader = this.el.select('.roo-document-manager-uploader', true).first(); this.uploader.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block'; - this.uploader.on('click', this.onUpload, this); + this.uploader.on('click', this.onUploaderClick, this); + + this.renderProgressDialog(); var _this = this; @@ -25477,15 +25789,57 @@ Roo.extend(Roo.bootstrap.DocumentManager, Roo.bootstrap.Component, { this.fireEvent('initial', this); }, - onUpload : function(e) + renderProgressDialog : function() { - e.preventDefault(); + var _this = this; - this.selectorEl.dom.click(); + this.progressDialog = new Roo.bootstrap.Modal({ + cls : 'roo-document-manager-progress-dialog', + allow_close : false, + title : '', + buttons : [ + { + name :'cancel', + weight : 'danger', + html : 'Cancel' + } + ], + listeners : { + btnclick : function() { + _this.uploadCancel(); + this.hide(); + } + } + }); + + this.progressDialog.render(Roo.get(document.body)); + + this.progress = new Roo.bootstrap.Progress({ + cls : 'roo-document-manager-progress', + active : true, + striped : true + }); + + this.progress.render(this.progressDialog.getChildContainer()); + + this.progressBar = new Roo.bootstrap.ProgressBar({ + cls : 'roo-document-manager-progress-bar', + aria_valuenow : 0, + aria_valuemin : 0, + aria_valuemax : 12, + panel : 'success' + }); + this.progressBar.render(this.progress.getChildContainer()); }, - onSelect : function(e) + onUploaderClick : function(e) + { + e.preventDefault(); + this.selectorEl.dom.click(); + }, + + onFileSelected : function(e) { e.preventDefault(); @@ -25499,11 +25853,11 @@ Roo.extend(Roo.bootstrap.DocumentManager, Roo.bootstrap.Component, { } }, this); - this.process(); + this.queue(); }, - process : function() + queue : function() { this.selectorEl.dom.value = ''; @@ -25515,147 +25869,67 @@ Roo.extend(Roo.bootstrap.DocumentManager, Roo.bootstrap.Component, { this.files = this.files.slice(0, this.boxes); } - var xhr = new XMLHttpRequest(); - - Roo.each(this.files, function(file, index){ - if(typeof(file.id) != 'undefined' && file.id * 1 > 0){ - return; - } - - file.xhr = xhr; - - this.managerEl.createChild({ - tag : 'div', - cls : 'roo-document-manager-loading', - cn : [ - { - tag : 'div', - tooltip : file.name, - cls : 'roo-document-manager-thumb', - html : '' - } - ] - - }); - - }, this); + this.uploader.show(); - if(this.files.length > this.boxes - 1 ){ + if(this.files.length > this.boxes - 1){ this.uploader.hide(); } - var headers = { - "Accept": "application/json", - "Cache-Control": "no-cache", - "X-Requested-With": "XMLHttpRequest" - }; - - xhr.open(this.method, this.url, true); - - for (var headerName in headers) { - var headerValue = headers[headerName]; - if (headerValue) { - xhr.setRequestHeader(headerName, headerValue); - } - } - var _this = this; - xhr.onload = function() - { - _this.xhrOnLoad(xhr); - } - - xhr.onerror = function() - { - _this.xhrOnError(xhr); - } - - var formData = new FormData(); - - formData.append('returnHTML', 'NO'); + var files = []; - Roo.each(this.files, function(file, index){ + Roo.each(this.files, function(file){ if(typeof(file.id) != 'undefined' && file.id * 1 > 0){ + var f = this.renderPreview(file); + files.push(f); return; } - formData.append(this.getParamName(index), file, file.name); + this.delegates.push( + (function(){ + _this.process(file); + }).createDelegate(this) + ); }, this); - if(this.fireEvent('prepare', this, formData) != false){ - xhr.send(formData); - }; + this.files = files; - }, - - getParamName : function(i) - { - if(!this.multiple){ - return this.paramName; + if(!this.delegates.length){ + this.refresh(); + return; } - return this.paramName + "_" + i; + this.progressBar.aria_valuemax = this.delegates.length; + + this.arrange(); + + return; }, - refresh : function() + arrange : function() { - Roo.each(this.managerEl.select('.roo-document-manager-loading', true).elements, function(el){ - el.remove(); - }, this); + if(!this.delegates.length){ + this.progressDialog.hide(); + this.refresh(); + return; + } + var delegate = this.delegates.shift(); - var files = []; + this.progressDialog.show(); - Roo.each(this.files, function(file){ - - if(typeof(file.id) == 'undefined' || file.id * 1 < 1){ - return; - } - - if(file.target){ - files.push(file); - return; - } - - var previewEl = this.managerEl.createChild({ - tag : 'div', - cls : 'roo-document-manager-preview', - cn : [ - { - tag : 'div', - tooltip : file.filename, - cls : 'roo-document-manager-thumb', - html : '' - }, - { - tag : 'button', - cls : 'close', - html : 'x' - } - ] - }); - - var close = previewEl.select('button.close', true).first(); - - close.on('click', this.onRemove, this, file); - - file.target = previewEl; - - var image = previewEl.select('img', true).first(); - - image.on('click', this.onClick, this, file); - - files.push(file); - - return; - - }, this); + this.progressDialog.setTitle((this.progressBar.aria_valuemax - this.delegates.length) + ' / ' + this.progressBar.aria_valuemax); - this.files = files; + this.progressBar.update(this.progressBar.aria_valuemax - this.delegates.length); + delegate(); + }, + + refresh : function() + { this.uploader.show(); if(this.files.length > this.boxes - 1){ @@ -25720,8 +25994,12 @@ Roo.extend(Roo.bootstrap.DocumentManager, Roo.bootstrap.Component, { xhrOnLoad : function(xhr) { + Roo.each(this.managerEl.select('.roo-document-manager-loading', true).elements, function(el){ + el.remove(); + }, this); + if (xhr.readyState !== 4) { - this.refresh(); + this.arrange(); this.fireEvent('exception', this, xhr); return; } @@ -25729,27 +26007,16 @@ Roo.extend(Roo.bootstrap.DocumentManager, Roo.bootstrap.Component, { var response = Roo.decode(xhr.responseText); if(!response.success){ - this.refresh(); + this.arrange(); this.fireEvent('exception', this, xhr); return; } - var i = 0; + var file = this.renderPreview(response.data); - Roo.each(this.files, function(file, index){ - - if(typeof(file.id) != 'undefined' && file.id * 1 > 0){ - return; - } - - this.files[index] = response.data[i]; - i++; - - return; - - }, this); + this.files.push(file); - this.refresh(); + this.arrange(); }, @@ -25760,11 +26027,164 @@ Roo.extend(Roo.bootstrap.DocumentManager, Roo.bootstrap.Component, { var response = Roo.decode(xhr.responseText); Roo.log(response); - } + + this.arrange(); + }, + process : function(file) + { + if(this.editable && file.type.indexOf('image') != -1){ + this.fireEvent('edit', this, file); + return; + } + + this.uploadStart(file, false); + + return; + }, + uploadStart : function(file, crop) + { + this.xhr = new XMLHttpRequest(); + + if(typeof(file.id) != 'undefined' && file.id * 1 > 0){ + this.arrange(); + return; + } + + file.xhr = this.xhr; + + this.managerEl.createChild({ + tag : 'div', + cls : 'roo-document-manager-loading', + cn : [ + { + tag : 'div', + tooltip : file.name, + cls : 'roo-document-manager-thumb', + html : '' + } + ] + + }); + + 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); + } + + formData.append(this.paramName, file, file.name); + + if(this.fireEvent('prepare', this, formData) != false){ + this.xhr.send(formData); + }; + }, + + uploadCancel : function() + { + this.xhr.abort(); + + this.delegates = []; + + Roo.each(this.managerEl.select('.roo-document-manager-loading', true).elements, function(el){ + el.remove(); + }, this); + + this.arrange(); + }, + renderPreview : function(file) + { + if(typeof(file.target) != 'undefined' && file.target){ + return file; + } + + var previewEl = this.managerEl.createChild({ + tag : 'div', + cls : 'roo-document-manager-preview', + cn : [ + { + tag : 'div', + tooltip : file.filename, + cls : 'roo-document-manager-thumb', + html : '' + }, + { + tag : 'button', + cls : 'close', + html : '' + } + ] + }); + + var close = previewEl.select('button.close', true).first(); + + close.on('click', this.onRemove, this, file); + + file.target = previewEl; + + var image = previewEl.select('img', true).first(); + + var _this = this; + + image.dom.addEventListener("load", function(){ _this.onPreviewLoad(file, image); }); + + image.on('click', this.onClick, this, file); + + return file; + + }, + + onPreviewLoad : function(file, image) + { + if(typeof(file.target) == 'undefined' || !file.target){ + return; + } + + var width = image.dom.naturalWidth || image.dom.width; + var height = image.dom.naturalHeight || image.dom.height; + + if(width > height){ + file.target.addClass('wide'); + return; + } + + file.target.addClass('tall'); + return; + + } }); + /* * Licence: LGPL */ diff --git a/roojs-bootstrap.js b/roojs-bootstrap.js index 27938242ba..2ef68c6aba 100644 --- a/roojs-bootstrap.js +++ b/roojs-bootstrap.js @@ -984,8 +984,8 @@ if(this.faicon){A.cn[0].cls+=' fa '+this.faicon;}if(this.weight){A.cls+=' alert- },setIcon:function(A){if(this.faicon){this.el.select('.roo-alert-icon',true).first().removeClass(['fa','fa-'+this.faicon]);}this.faicon=Athis.el.select('.roo-alert-icon',true).first().addClass(['fa','fa-'+this.faicon]);},hide:function(){this.el.hide();},show:function(){this.el.show(); }}); // Roo/bootstrap/UploadCropbox.js -Roo.bootstrap.UploadCropbox=function(A){Roo.bootstrap.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}); -this.buttons=this.buttons||Roo.bootstrap.UploadCropbox.footer.STANDARD;};Roo.extend(Roo.bootstrap.UploadCropbox,Roo.bootstrap.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:{},baseRotate:1,cropType:'image/jpeg',buttons:false,canvasLoaded:false,getAutoCreate:function(){var A={tag:'div',cls:'roo-upload-cropbox',cn:[{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:[]}}]}; +Roo.bootstrap.UploadCropbox=function(A){Roo.bootstrap.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}); +this.buttons=this.buttons||Roo.bootstrap.UploadCropbox.footer.STANDARD;};Roo.extend(Roo.bootstrap.UploadCropbox,Roo.bootstrap.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:{},baseRotate:1,cropType:'image/jpeg',buttons:false,canvasLoaded:false,isDocument:false,getAutoCreate:function(){var A={tag:'div',cls:'roo-upload-cropbox',cn:[{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.bootstrap.UploadCropbox.superclass.onRender.call(this,ct,A);if(this.buttons.length){Roo.each(this.buttons,function(bb){var B=this.el.select('.roo-upload-cropbox-footer div.roo-upload-cropbox-btn-group').first().createChild(bb); B.on('click',this.onFooterButtonClick.createDelegate(this,[bb.action],true));},this);}},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.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(); @@ -998,19 +998,22 @@ this.notifyEl.dom.innerHTML=this.emptyText;},resize:function(){if(this.fireEvent 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){this.fireEvent('beforeselectfile',this); },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.bodyEl.un('click',this.beforeSelectFile,this);this.notifyEl.hide();this.thumbEl.show();this.footerEl.show();this.imageEl.OriginWidth=this.imageEl.naturalWidth||this.imageEl.width;this.imageEl.OriginHeight=this.imageEl.naturalHeight||this.imageEl.height; -this.setThumbBoxPosition();this.baseRotateLevel();this.baseScaleLevel();this.draw();this.resize();this.canvasLoaded=true;},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;this.mouseX=Roo.isTouch?e.browserEvent.touches[0].pageX:e.getPageX();this.mouseY=Roo.isTouch?e.browserEvent.touches[0].pageY:e.getPageY(); -},onMouseMove:function(e){e.stopEvent();if(!this.canvasLoaded){return;}if(!this.dragable){return;}var A=Math.ceil(this.thumbEl.getLeft(true));var B=Math.ceil(this.thumbEl.getTop(true));var C=Math.ceil(A+this.thumbEl.getWidth()-this.canvasEl.width);var D=Math.ceil(B+this.thumbEl.getHeight()-this.canvasEl.height); -var x=Roo.isTouch?e.browserEvent.touches[0].pageX:e.getPageX();var y=Roo.isTouch?e.browserEvent.touches[0].pageY:e.getPageY();x=x-this.mouseX;y=y-this.mouseY;var E=Math.ceil(x+this.previewEl.getLeft(true));var F=Math.ceil(y+this.previewEl.getTop(true));E=(AE)?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();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; -var B=Math.ceil(this.imageEl.OriginWidth*this.getScaleLevel());var C=Math.ceil(this.imageEl.OriginHeight*this.getScaleLevel());if((this.rotate==0||this.rotate==180)&&(B/Athis.imageEl.OriginWidth||C/Athis.imageEl.OriginHeight)){return false; -}if((this.rotate==90||this.rotate==270)&&(B/Athis.imageEl.OriginWidth||C/Athis.imageEl.OriginHeight)){return false;}return true;},onRotateLeft:function(e){var A=this.thumbEl.getWidth()/this.minWidth;if(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;this.draw();},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"); +this.baseRotateLevel();if(this.isDocument){this.setThumbBoxSize();}this.setThumbBoxPosition();this.baseScaleLevel();this.draw();this.resize();this.canvasLoaded=true;},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.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(); +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||(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; +}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,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.minWidth;A.height=this.minHeight;var C=this.thumbEl.getWidth();var D=this.thumbEl.getHeight();var x=this.thumbEl.getLeft(true)-this.previewEl.getLeft(true); -var y=this.thumbEl.getTop(true)-this.previewEl.getTop(true);if(this.canvasEl.width-Cthis.minHeight){B=300;A=Math.ceil(this.minHeight*B/this.minWidth);}this.thumbEl.setStyle({width:B+'px',height:A+'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.bootstrap.UploadCropbox['tags']['Orientation']])!='undefined'&&[1,3,6,8].indexOf(this.exif[Roo.bootstrap.UploadCropbox['tags']['Orientation']])!=-1){this.baseRotate=this.exif[Roo.bootstrap.UploadCropbox['tags']['Orientation']]; -}this.rotate=Roo.bootstrap.UploadCropbox['Orientation'][this.baseRotate];},baseScaleLevel:function(){var A,B;if(this.baseRotate==6||this.baseRotate==8){A=this.thumbEl.getHeight();this.baseScale=B/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.baseScalethis.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.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()); +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 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()); +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 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)?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 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);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 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); +E.drawImage(A,sx,sy,F,G,x,y,F,G);break;default:break;}this.cropData=D.toDataURL(this.cropType);this.fireEvent('crop',this,this.cropData);},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.bootstrap.UploadCropbox['tags']['Orientation']])!='undefined'&&[1,3,6,8].indexOf(this.exif[Roo.bootstrap.UploadCropbox['tags']['Orientation']])!=-1){this.baseRotate=this.exif[Roo.bootstrap.UploadCropbox['tags']['Orientation']]; +}this.rotate=Roo.bootstrap.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; @@ -1042,26 +1064,32 @@ return;}E=A.getUint16(C,D);F=C+2+12*E;if(F+4>A.byteLength){Roo.log('Invalid Exif 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:''}]}]}}); +},size:8},9:{getValue:function(A,B,C){return A.getInt32(B,C);},size:4},10:{getValue:function(A,B,C){return A.getInt32(B,C)/A.getInt32(B+4,C);},size:8}},footer:{STANDARD:[{tag:'div',cls:'btn-group roo-upload-cropbox-rotate-left',action:'rotate-left',cn:[{tag:'button',cls:'btn btn-default',html:''}]},{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:''}]}]}}); // Roo/bootstrap/DocumentManager.js -Roo.bootstrap.DocumentManager=function(A){Roo.bootstrap.DocumentManager.superclass.constructor.call(this,A);this.addEvents({"initial":true,"inspect":true,"exception":true,"prepare":true,"remove":true,"refresh":true,"click":true});};Roo.extend(Roo.bootstrap.DocumentManager,Roo.bootstrap.Component,{boxes:12,inputName:'',minWidth:300,minHeight:300,thumbSize:300,multiple:true,files:[],method:'POST',url:'',paramName:'imageUpload',fieldLabel:'',labelWidth:4,labelAlign:'left',getAutoCreate:function(){var A={tag:'div',cls:'roo-document-manager',cn:[{tag:'input',cls:'roo-document-manager-selector',type:'file'},{tag:'div',cls:'roo-document-manager-uploader',cn:[{tag:'div',cls:'roo-document-manager-upload-btn',html:''}]}]}; +Roo.bootstrap.DocumentManager=function(A){Roo.bootstrap.DocumentManager.superclass.constructor.call(this,A);this.addEvents({"initial":true,"inspect":true,"exception":true,"prepare":true,"remove":true,"refresh":true,"click":true,"edit":true});};Roo.extend(Roo.bootstrap.DocumentManager,Roo.bootstrap.Component,{boxes:12,inputName:'',minWidth:300,minHeight:300,thumbSize:300,multiple:true,files:[],method:'POST',url:'',paramName:'imageUpload',fieldLabel:'',labelWidth:4,labelAlign:'left',editable:true,delegates:[],getAutoCreate:function(){var A={tag:'div',cls:'roo-document-manager',cn:[{tag:'input',cls:'roo-document-manager-selector',type:'file'},{tag:'div',cls:'roo-document-manager-uploader',cn:[{tag:'div',cls:'roo-document-manager-upload-btn',html:''}]}]}; var B=[{tag:'div',cls:'column col-md-12',cn:A}];if(this.fieldLabel.length){B=[{tag:'div',cls:'column col-md-12',html:this.fieldLabel},{tag:'div',cls:'column col-md-12',cn:A}];if(this.labelAlign=='left'){B=[{tag:'div',cls:'column col-md-'+this.labelWidth,html:this.fieldLabel},{tag:'div',cls:'column col-md-'+(12-this.labelWidth),cn:A}]; }}var C={tag:'div',cls:'row clearfix',cn:B};return C;},initEvents:function(){this.managerEl=this.el.select('.roo-document-manager',true).first();this.managerEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';this.selectorEl=this.el.select('.roo-document-manager-selector',true).first(); -this.selectorEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';this.selectorEl.hide();if(this.multiple){this.selectorEl.attr('multiple','multiple');}this.selectorEl.on('change',this.onSelect,this);this.uploader=this.el.select('.roo-document-manager-uploader',true).first(); -this.uploader.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';this.uploader.on('click',this.onUpload,this);var A=this;window.addEventListener("resize",function(){A.refresh();});this.fireEvent('initial',this);},onUpload:function(e){e.preventDefault(); -this.selectorEl.dom.click();},onSelect:function(e){e.preventDefault();if(typeof(this.selectorEl.dom.files)=='undefined'||!this.selectorEl.dom.files.length){return;}Roo.each(this.selectorEl.dom.files,function(A){if(this.fireEvent('inspect',this,A)!=false){this.files.push(A); -}},this);this.process();},process:function(){this.selectorEl.dom.value='';if(!this.files.length){return;}if(this.files.length>this.boxes){this.files=this.files.slice(0,this.boxes);}var A=new XMLHttpRequest();Roo.each(this.files,function(G,H){if(typeof(G.id)!='undefined'&&G.id*1>0){return; -}G.xhr=A;this.managerEl.createChild({tag:'div',cls:'roo-document-manager-loading',cn:[{tag:'div',tooltip:G.name,cls:'roo-document-manager-thumb',html:''}]});},this);if(this.files.length>this.boxes-1){this.uploader.hide(); -}var B={"Accept":"application/json","Cache-Control":"no-cache","X-Requested-With":"XMLHttpRequest"};A.open(this.method,this.url,true);for(var C in B){var D=B[C];if(D){A.setRequestHeader(C,D);}}var E=this;A.onload=function(){E.xhrOnLoad(A);};A.onerror=function(){E.xhrOnError(A); -};var F=new FormData();F.append('returnHTML','NO');Roo.each(this.files,function(G,H){if(typeof(G.id)!='undefined'&&G.id*1>0){return;}F.append(this.getParamName(H),G,G.name);},this);if(this.fireEvent('prepare',this,F)!=false){A.send(F);};},getParamName:function(i){if(!this.multiple){return this.paramName; -}return this.paramName+"_"+i;},refresh:function(){Roo.each(this.managerEl.select('.roo-document-manager-loading',true).elements,function(el){el.remove();},this);var A=[];Roo.each(this.files,function(B){if(typeof(B.id)=='undefined'||B.id*1<1){return;}if(B.target){A.push(B); -return;}var C=this.managerEl.createChild({tag:'div',cls:'roo-document-manager-preview',cn:[{tag:'div',tooltip:B.filename,cls:'roo-document-manager-thumb',html:''},{tag:'button',cls:'close',html:'x'}]}); -var D=C.select('button.close',true).first();D.on('click',this.onRemove,this,B);B.target=C;var E=C.select('img',true).first();E.on('click',this.onClick,this,B);A.push(B);return;},this);this.files=A;this.uploader.show();if(this.files.length>this.boxes-1){this.uploader.hide(); -}Roo.isTouch?this.closable(false):this.closable(true);this.fireEvent('refresh',this);},onRemove:function(e,el,o){e.preventDefault();this.fireEvent('remove',this,o);},remove:function(o){var A=[];Roo.each(this.files,function(B){if(typeof(B.id)=='undefined'||B.id*1<1||B.id!=o.id){A.push(B); -return;}o.target.remove();},this);this.files=A;this.refresh();},onClick:function(e,el,o){e.preventDefault();this.fireEvent('click',this,o);},closable:function(A){Roo.each(this.managerEl.select('.roo-document-manager-preview > button.close',true).elements,function(el){el.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block'; -if(A){el.show();return;}el.hide();},this);},xhrOnLoad:function(A){if(A.readyState!==4){this.refresh();this.fireEvent('exception',this,A);return;}var B=Roo.decode(A.responseText);if(!B.success){this.refresh();this.fireEvent('exception',this,A);return;}var i=0; -Roo.each(this.files,function(C,D){if(typeof(C.id)!='undefined'&&C.id*1>0){return;}this.files[D]=B.data[i];i++;return;},this);this.refresh();},xhrOnError:function(){Roo.log('xhr on error');var A=Roo.decode(xhr.responseText);Roo.log(A);}}); +this.selectorEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';this.selectorEl.hide();if(this.multiple){this.selectorEl.attr('multiple','multiple');}this.selectorEl.on('change',this.onFileSelected,this);this.uploader=this.el.select('.roo-document-manager-uploader',true).first(); +this.uploader.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';this.uploader.on('click',this.onUploaderClick,this);this.renderProgressDialog();var A=this;window.addEventListener("resize",function(){A.refresh();});this.fireEvent('initial',this); +},renderProgressDialog:function(){var A=this;this.progressDialog=new Roo.bootstrap.Modal({cls:'roo-document-manager-progress-dialog',allow_close:false,title:'',buttons:[{name:'cancel',weight:'danger',html:'Cancel'}],listeners:{btnclick:function(){A.uploadCancel(); +this.hide();}}});this.progressDialog.render(Roo.get(document.body));this.progress=new Roo.bootstrap.Progress({cls:'roo-document-manager-progress',active:true,striped:true});this.progress.render(this.progressDialog.getChildContainer());this.progressBar=new Roo.bootstrap.ProgressBar({cls:'roo-document-manager-progress-bar',aria_valuenow:0,aria_valuemin:0,aria_valuemax:12,panel:'success'}); +this.progressBar.render(this.progress.getChildContainer());},onUploaderClick:function(e){e.preventDefault();this.selectorEl.dom.click();},onFileSelected:function(e){e.preventDefault();if(typeof(this.selectorEl.dom.files)=='undefined'||!this.selectorEl.dom.files.length){return; +}Roo.each(this.selectorEl.dom.files,function(A){if(this.fireEvent('inspect',this,A)!=false){this.files.push(A);}},this);this.queue();},queue:function(){this.selectorEl.dom.value='';if(!this.files.length){return;}if(this.files.length>this.boxes){this.files=this.files.slice(0,this.boxes); +}this.uploader.show();if(this.files.length>this.boxes-1){this.uploader.hide();}var A=this;var B=[];Roo.each(this.files,function(C){if(typeof(C.id)!='undefined'&&C.id*1>0){var f=this.renderPreview(C);B.push(f);return;}this.delegates.push((function(){A.process(C); +}).createDelegate(this));},this);this.files=B;if(!this.delegates.length){this.refresh();return;}this.progressBar.aria_valuemax=this.delegates.length;this.arrange();return;},arrange:function(){if(!this.delegates.length){this.progressDialog.hide();this.refresh(); +return;}var A=this.delegates.shift();this.progressDialog.show();this.progressDialog.setTitle((this.progressBar.aria_valuemax-this.delegates.length)+' / '+this.progressBar.aria_valuemax);this.progressBar.update(this.progressBar.aria_valuemax-this.delegates.length); +A();},refresh:function(){this.uploader.show();if(this.files.length>this.boxes-1){this.uploader.hide();}Roo.isTouch?this.closable(false):this.closable(true);this.fireEvent('refresh',this);},onRemove:function(e,el,o){e.preventDefault();this.fireEvent('remove',this,o); +},remove:function(o){var A=[];Roo.each(this.files,function(B){if(typeof(B.id)=='undefined'||B.id*1<1||B.id!=o.id){A.push(B);return;}o.target.remove();},this);this.files=A;this.refresh();},onClick:function(e,el,o){e.preventDefault();this.fireEvent('click',this,o); +},closable:function(A){Roo.each(this.managerEl.select('.roo-document-manager-preview > button.close',true).elements,function(el){el.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';if(A){el.show();return;}el.hide();},this);},xhrOnLoad:function(A){Roo.each(this.managerEl.select('.roo-document-manager-loading',true).elements,function(el){el.remove(); +},this);if(A.readyState!==4){this.arrange();this.fireEvent('exception',this,A);return;}var B=Roo.decode(A.responseText);if(!B.success){this.arrange();this.fireEvent('exception',this,A);return;}var C=this.renderPreview(B.data);this.files.push(C);this.arrange(); +},xhrOnError:function(){Roo.log('xhr on error');var A=Roo.decode(xhr.responseText);Roo.log(A);this.arrange();},process:function(A){if(this.editable&&A.type.indexOf('image')!=-1){this.fireEvent('edit',this,A);return;}this.uploadStart(A,false);return;},uploadStart:function(A,B){this.xhr=new XMLHttpRequest(); +if(typeof(A.id)!='undefined'&&A.id*1>0){this.arrange();return;}A.xhr=this.xhr;this.managerEl.createChild({tag:'div',cls:'roo-document-manager-loading',cn:[{tag:'div',tooltip:A.name,cls:'roo-document-manager-thumb',html:''}]}); +this.xhr.open(this.method,this.url,true);var C={"Accept":"application/json","Cache-Control":"no-cache","X-Requested-With":"XMLHttpRequest"};for(var D in C){var E=C[D];if(E){this.xhr.setRequestHeader(D,E);}}var F=this;this.xhr.onload=function(){F.xhrOnLoad(F.xhr); +};this.xhr.onerror=function(){F.xhrOnError(F.xhr);};var G=new FormData();G.append('returnHTML','NO');if(B){G.append('crop',B);}G.append(this.paramName,A,A.name);if(this.fireEvent('prepare',this,G)!=false){this.xhr.send(G);};},uploadCancel:function(){this.xhr.abort(); +this.delegates=[];Roo.each(this.managerEl.select('.roo-document-manager-loading',true).elements,function(el){el.remove();},this);this.arrange();},renderPreview:function(A){if(typeof(A.target)!='undefined'&&A.target){return A;}var B=this.managerEl.createChild({tag:'div',cls:'roo-document-manager-preview',cn:[{tag:'div',tooltip:A.filename,cls:'roo-document-manager-thumb',html:''},{tag:'button',cls:'close',html:''}]}); +var C=B.select('button.close',true).first();C.on('click',this.onRemove,this,A);A.target=B;var D=B.select('img',true).first();var E=this;D.dom.addEventListener("load",function(){E.onPreviewLoad(A,D);});D.on('click',this.onClick,this,A);return A;},onPreviewLoad:function(A,B){if(typeof(A.target)=='undefined'||!A.target){return; +}var C=B.dom.naturalWidth||B.dom.width;var D=B.dom.naturalHeight||B.dom.height;if(C>D){A.target.addClass('wide');return;}A.target.addClass('tall');return;}}); // Roo/bootstrap/DocumentViewer.js Roo.bootstrap.DocumentViewer=function(A){Roo.bootstrap.DocumentViewer.superclass.constructor.call(this,A);this.addEvents({"initial":true,"click":true,"trash":true});};Roo.extend(Roo.bootstrap.DocumentViewer,Roo.bootstrap.Component,{getAutoCreate:function(){var A={tag:'div',cls:'roo-document-viewer',cn:[{tag:'div',cls:'roo-document-viewer-body',cn:[{tag:'div',cls:'roo-document-viewer-thumb',cn:[{tag:'img',cls:'roo-document-viewer-image'}]}]},{tag:'div',cls:'roo-document-viewer-footer',cn:{tag:'div',cls:'btn-group btn-group-justified roo-document-viewer-btn-group',cn:[{tag:'div',cls:'btn-group',cn:[{tag:'button',cls:'btn btn-default roo-document-viewer-trash',html:''}]}]}}]}; return A;},initEvents:function(){this.bodyEl=this.el.select('.roo-document-viewer-body',true).first();this.bodyEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';this.thumbEl=this.el.select('.roo-document-viewer-thumb',true).first();this.thumbEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block'; -- 2.39.2