Roo/bootstrap/CardUploader.js

[roojs1] / Roo / bootstrap / CardUploader.js

diff --git a/Roo/bootstrap/CardUploader.js b/Roo/bootstrap/CardUploader.js
index 907316e..74fd074 100644 (file)
--- a/Roo/bootstrap/CardUploader.js
+++ b/Roo/bootstrap/CardUploader.js
@@ -23,7 +23,7 @@ Roo.bootstrap.CardUploader = function(config){
     Roo.bootstrap.CardUploader.superclass.constructor.call(this, config);
     
     
-    this.imageCollection  = new Roo.util.MixedCollection(function(r) { return r.id });
+    this.imageCollection  = new Roo.util.MixedCollection(function(r) { return r.data.id });
     
     
 };
@@ -145,7 +145,8 @@ Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Button,  {
             is_uploaded : false,
             src : url,
             title : file.name,
-            mimetype : file.mimetype,
+            mimetype : file.type,
+            preview : false,
         })
         
     },
@@ -155,70 +156,79 @@ Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Button,  {
         // hidden input element?
         // if the file is not an image...
         //then we need to use something other that and header_image
-        
+        var t = this;
         //   remove.....
-        
-        var cn = this.addxtype(
+        var footer = [
             {
-                 
                 xns : Roo.bootstrap,
-                xtype : 'Card',
-                closeable : true,
-                header_image : data.src,
-                data : data,
-                html : false,
-                listeners : {
-                    click : function() {
-                        // view..
-                    }
-                },
-                items : [
+                xtype : 'CardFooter',
+                items: [
                     {
                         xns : Roo.bootstrap,
-                        xtype : 'CardFooter',
-                        items: [
+                        xtype : 'Element',
+                        cls : 'd-flex',
+                        items : [
+                            
                             {
                                 xns : Roo.bootstrap,
-                                xtype : 'Element',
-                                cls : 'd-flex',
-                                items : [
-                                    
-                                    {
-                                        xns : Roo.bootstrap,
-                                        xtype : 'Button',
-                                        html : String.format("<small>{0}</small>", data.title),
-                                        cls : 'col-8 text-left',
-                                        size: 'sm',
-                                        weight: 'link',
-                                        fa : 'download',
-                                        listeners : {
-                                            click : function() {
-                                                // download
-                                            }
-                                        }
-                                    },
-                                    {
-                                        xns : Roo.bootstrap,
-                                        xtype : 'Element',
-                                        cls : 'col-1'
-                                    },
-                                    {
-                                        xns : Roo.bootstrap,
-                                        xtype : 'Button',
-                                        html : 'Delete',
-                                        size : 'sm',
-                                        weight: 'danger',
-                                        cls : 'col-3',
-                                        fa : 'times'
+                                xtype : 'Button',
+                                html : String.format("<small>{0}</small>", data.title),
+                                cls : 'col-11 text-left',
+                                size: 'sm',
+                                weight: 'link',
+                                fa : 'download',
+                                listeners : {
+                                    click : function() {
+                                        this.downloadCard(data.id)
                                     }
-                                ]
+                                }
+                            },
+                          
+                            {
+                                xns : Roo.bootstrap,
+                                xtype : 'Button',
+                                
+                                size : 'sm',
+                                weight: 'danger',
+                                cls : 'col-1',
+                                fa : 'times',
+                                listeners : {
+                                    click : function() {
+                                        this.removeCard(data.id)
+                                    }
+                                }
                             }
-                            
-                        ],
+                        ]
+                    }
+                    
+                ],
+            }
+            
+        ];
+
+        var cn = this.addxtype(
+            {
+                 
+                xns : Roo.bootstrap,
+                xtype : 'Card',
+                closeable : true,
+                header : !data.mimetype.match(/image/) && !data.preview ? "Document": false,
+                header_image : data.mimetype.match(/image/) ? data.src  : data.preview,
+                data : data,
+                html : false,
+                 
+                items : footer,
+                initEvents : function() {
+                    Roo.bootstrap.Card.prototype.initEvents.call(this);
+                    this.imgEl = this.el.select('card-img-top').first();
+                    if (this.imgEl) {
+                        this.imgEl.on('click', function() { t.previewCard( data.id); }, this);
+                        this.imgEl.set('pointer','curspr');
+                                  
                     }
                     
-                ]
                   
+                }
                 
             }
         );