Roo/bootstrap/DocumentManager.js

[roojs1] / Roo / bootstrap / DocumentManager.js

diff --git a/Roo/bootstrap/DocumentManager.js b/Roo/bootstrap/DocumentManager.js
index af6cf58..2032bd1 100644 (file)
--- a/Roo/bootstrap/DocumentManager.js
+++ b/Roo/bootstrap/DocumentManager.js
@@ -203,23 +203,32 @@ Roo.extend(Roo.bootstrap.DocumentManager, Roo.bootstrap.Component,  {
         
         this.renderProgressDialog();
         
-//        var _this = this;
+        var _this = this;
         
-//        window.addEventListener("resize", function() { _this.refresh(); } );
+        window.addEventListener("resize", function() { _this.refresh(); } );
         
         this.fireEvent('initial', this);
     },
     
     renderProgressDialog : function()
     {
+        var _this = this;
+        
         this.progressDialog = new Roo.bootstrap.Modal({
             cls : 'roo-document-manager-progress-dialog',
             allow_close : false,
             title : '',
-            buttons : Roo.bootstrap.Modal.OK, 
+            buttons : [
+                {
+                    name  :'cancel',
+                    weight : 'danger',
+                    html : 'Cancel'
+                }
+            ], 
             listeners : { 
-                btnclick : function() { 
-                     this.hide();
+                btnclick : function() {
+                    _this.uploadCancel();
+                    this.hide();
                 }
             }
         });
@@ -229,7 +238,7 @@ Roo.extend(Roo.bootstrap.DocumentManager, Roo.bootstrap.Component,  {
         this.progress = new Roo.bootstrap.Progress({
             cls : 'roo-document-manager-progress',
             active : true,
-            striped : true,
+            striped : true
         });
         
         this.progress.render(this.progressDialog.getChildContainer());
@@ -245,11 +254,6 @@ Roo.extend(Roo.bootstrap.DocumentManager, Roo.bootstrap.Component,  {
         this.progressBar.render(this.progress.getChildContainer());
     },
     
-    updateProgressDialog : function()
-    {
-        
-    },
-    
     onUploaderClick : function(e)
     {
         e.preventDefault();
@@ -299,7 +303,8 @@ Roo.extend(Roo.bootstrap.DocumentManager, Roo.bootstrap.Component,  {
         Roo.each(this.files, function(file){
             
             if(typeof(file.id) != 'undefined' && file.id * 1 > 0){
-                files.push(file);
+                var f = this.renderPreview(file);
+                files.push(f);
                 return;
             }
             
@@ -428,35 +433,9 @@ Roo.extend(Roo.bootstrap.DocumentManager, Roo.bootstrap.Component,  {
             return;
         }
         
-        var previewEl = this.managerEl.createChild({
-            tag : 'div',
-            cls : 'roo-document-manager-preview',
-            cn : [
-                {
-                    tag : 'div',
-                    tooltip : response.data.filename,
-                    cls : 'roo-document-manager-thumb',
-                    html : '<img src="' + baseURL +'/Images/Thumb/' + this.thumbSize + '/' + response.data.id + '/' + response.data.filename + '">'
-                },
-                {
-                    tag : 'button',
-                    cls : 'close',
-                    html : 'x'
-                }
-            ]
-        });
-
-        var close = previewEl.select('button.close', true).first();
-
-        close.on('click', this.onRemove, this, response.data);
-
-        response.data.target = previewEl;
-
-        var image = previewEl.select('img', true).first();
-
-        image.on('click', this.onClick, this, response.data);
+        var file = this.renderPreview(response.data);
         
-        this.files.push(response.data);
+        this.files.push(file);
         
         this.arrange();
         
@@ -550,6 +529,79 @@ Roo.extend(Roo.bootstrap.DocumentManager, Roo.bootstrap.Component,  {
         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 : '<img src="' + baseURL +'/Images/Thumb/' + this.thumbSize + '/' + file.id + '/' + file.filename + '">'
+                },
+                {
+                    tag : 'button',
+                    cls : 'close',
+                    html : '<i class="fa fa-times-circle"></i>'
+                }
+            ]
+        });
+
+        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;
+        
+    }
 });