Roo/bootstrap/DocumentManager.js

[roojs1] / Roo / bootstrap / DocumentManager.js

diff --git a/Roo/bootstrap/DocumentManager.js b/Roo/bootstrap/DocumentManager.js
index 6c2d3a6..2032bd1 100644 (file)
--- a/Roo/bootstrap/DocumentManager.js
+++ b/Roo/bootstrap/DocumentManager.js
@@ -238,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());
@@ -303,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;
             }
             
@@ -432,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();
         
@@ -567,6 +542,66 @@ Roo.extend(Roo.bootstrap.DocumentManager, Roo.bootstrap.Component,  {
         }, 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;
+        
+    }
 });