Roo/bootstrap/UploadCropbox.js

[roojs1] / Roo / bootstrap / UploadCropbox.js

diff --git a/Roo/bootstrap/UploadCropbox.js b/Roo/bootstrap/UploadCropbox.js
index d7d4ef3..fd98293 100644 (file)
--- a/Roo/bootstrap/UploadCropbox.js
+++ b/Roo/bootstrap/UploadCropbox.js
@@ -17,6 +17,8 @@
  * @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
@@ -24,6 +26,7 @@
  */
 
 Roo.bootstrap.UploadCropbox = function(config){
+    console.log("BOOTSTRAP UPLOAD CROPBOX CONSTRUCTOR");
     Roo.bootstrap.UploadCropbox.superclass.constructor.call(this, config);
     
     this.addEvents({
@@ -149,6 +152,9 @@ Roo.extend(Roo.bootstrap.UploadCropbox, Roo.bootstrap.Component,  {
     isDocument : false,
     method : 'POST',
     paramName : 'imageUpload',
+    loadMask : true,
+    loadingText : 'Loading...',
+    maskEl : false,
     
     getAutoCreate : function()
     {
@@ -215,6 +221,10 @@ Roo.extend(Roo.bootstrap.UploadCropbox, Roo.bootstrap.Component,  {
                 
             }, this);
         }
+        
+        if(this.loadMask){
+            this.maskEl = this.el;
+        }
     },
     
     initEvents : function()
@@ -227,7 +237,6 @@ Roo.extend(Roo.bootstrap.UploadCropbox, Roo.bootstrap.Component,  {
         this.bodyEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
         
         this.selectorEl = this.el.select('.roo-upload-cropbox-selector', true).first();
-        this.selectorEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
         this.selectorEl.hide();
         
         this.previewEl = this.el.select('.roo-upload-cropbox-preview', true).first();
@@ -413,6 +422,10 @@ Roo.extend(Roo.bootstrap.UploadCropbox, Roo.bootstrap.Component,  {
         
         this.canvasLoaded = true;
         
+        if(this.loadMask){
+            this.maskEl.unmask();
+        }
+        
     },
     
     setCanvasPosition : function()
@@ -1214,6 +1227,10 @@ Roo.extend(Roo.bootstrap.UploadCropbox, Roo.bootstrap.Component,  {
     
     process : function(file, crop)
     {
+        if(this.loadMask){
+            this.maskEl.mask(this.loadingText);
+        }
+        
         this.xhr = new XMLHttpRequest();
         
         file.xhr = this.xhr;
@@ -1272,6 +1289,10 @@ Roo.extend(Roo.bootstrap.UploadCropbox, Roo.bootstrap.Component,  {
     
     xhrOnLoad : function(xhr)
     {
+        if(this.loadMask){
+            this.maskEl.unmask();
+        }
+        
         if (xhr.readyState !== 4) {
             this.fireEvent('exception', this, xhr);
             return;
@@ -1292,6 +1313,10 @@ Roo.extend(Roo.bootstrap.UploadCropbox, Roo.bootstrap.Component,  {
     
     xhrOnError : function()
     {
+        if(this.loadMask){
+            this.maskEl.unmask();
+        }
+        
         Roo.log('xhr on error');
         
         var response = Roo.decode(xhr.responseText);
@@ -1302,6 +1327,10 @@ Roo.extend(Roo.bootstrap.UploadCropbox, Roo.bootstrap.Component,  {
     
     prepare : function(file)
     {   
+        if(this.loadMask){
+            this.maskEl.mask(this.loadingText);
+        }
+        
         this.file = false;
         this.exif = {};