Roo/bootstrap/CardUploader.js

[roojs1] / Roo / bootstrap / CardUploader.js

diff --git a/Roo/bootstrap/CardUploader.js b/Roo/bootstrap/CardUploader.js
index 11f5a33..21dee55 100644 (file)
--- a/Roo/bootstrap/CardUploader.js
+++ b/Roo/bootstrap/CardUploader.js
@@ -23,41 +23,63 @@ 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.fileCollection   = new Roo.util.MixedCollection(false,function(r) {
+        return r.data.id
+        });
     
     
 };
 
-Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Button,  {
+Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Input,  {
     
      
     errorTimeout : 3000,
      
     images : false,
    
-    imageCollection : false,
+    fileCollection : false,
+    allowBlank : true,
     
     getAutoCreate : function()
     {
-        var btn = Roo.bootstrap.Button.prototype.getAutoCreate.call(this);
-        btn.cls += ' w-100 mb-2';
-        var cfg = {
-            cls : 'roo-card-uploader-wrap',
+        
+        var cfg =  {
+            cls :'form-group' ,
             cn : [
-                btn,
+               
+                {
+                    tag: 'label',
+                   //cls : 'input-group-addon',
+                    html : this.fieldLabel
+
+                },
+
+                {
+                    tag: 'input',
+                    type : 'hidden',
+                    value : this.value,
+                    cls : 'd-none  form-control'
+                },
+                
                 {
-                    tag : 'input',
-                    cls : 'd-none roo-card-upload-selector',
+                    tag: 'input',
+                    multiple : 'multiple',
                     type : 'file',
-                    multiple : 'multiple'
+                    cls : 'd-none  roo-card-upload-selector'
+                },
+                
+                {
+                    cls : 'roo-card-uploader-button-container w-100 mb-2'
                 },
                 {
                     cls : 'card-columns roo-card-uploader-container'
                 }
+
             ]
-            
-        }
+        };
+           
         
+         
         
         return cfg;
     },
@@ -67,10 +89,34 @@ Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Button,  {
         return this.containerEl;
     },
    
-    
+    getButtonContainer : function() /// what children are added to.
+    {
+        return this.el.select(".roo-card-uploader-button-container").first();
+    },
+   
     initEvents : function()
     {
-        Roo.bootstrap.Button.prototype.initEvents.call(this);
+        
+        Roo.bootstrap.Input.prototype.initEvents.call(this);
+        
+        var t = this;
+        this.addxtype({
+            xns: Roo.bootstrap,
+
+            xtype : 'Button',
+            container_method : 'getButtonContainer' ,            
+            html : 'Upload File / Images', // fix changable?
+            cls : 'w-100 ',
+            listeners : {
+                'click' : function(btn, e) {
+                    t.onClick(e);
+                }
+            }
+        })
+        
+        
+        
+        
         this.urlAPI = (window.createObjectURL && window) || 
                                 (window.URL && URL.revokeObjectURL && URL) || 
                                 (window.webkitURL && webkitURL);
@@ -80,7 +126,7 @@ Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Button,  {
          
         this.selectorEl = this.el.select('.roo-card-upload-selector', true).first();
         
-         this.selectorEl.on('change', this.onFileSelected, this);
+        this.selectorEl.on('change', this.onFileSelected, this);
         if (this.images) {
             var t = this;
             this.images.forEach(function(img) {
@@ -146,6 +192,7 @@ Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Button,  {
             src : url,
             title : file.name,
             mimetype : file.type,
+            preview : false,
         })
         
     },
@@ -155,7 +202,7 @@ 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 footer = [
             {
@@ -178,7 +225,7 @@ Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Button,  {
                                 fa : 'download',
                                 listeners : {
                                     click : function() {
-                                        // download
+                                        this.downloadCard(data.id)
                                     }
                                 }
                             },
@@ -190,7 +237,12 @@ Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Button,  {
                                 size : 'sm',
                                 weight: 'danger',
                                 cls : 'col-1',
-                                fa : 'times'
+                                fa : 'times',
+                                listeners : {
+                                    click : function() {
+                                        t.removeCard(data.id)
+                                    }
+                                }
                             }
                         ]
                     }
@@ -206,23 +258,57 @@ Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Button,  {
                 xns : Roo.bootstrap,
                 xtype : 'Card',
                 closeable : true,
-                header : !data.mimetype.match('/image/') ? "Document": false,
-                header_image : data.mimetype.match('/image/') ? data.src  : false,
+                header : !data.mimetype.match(/image/) && !data.preview ? "Document": false,
+                header_image : data.mimetype.match(/image/) ? data.src  : data.preview,
+                header_image_fit_square: true,
                 data : data,
                 html : false,
-                listeners : {
-                    click : function() {
-                        // view..
+                 
+                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' : 'cursor' });
+                                  
                     }
-                },
-                items : footer
+                    
                   
+                }
                 
             }
         );
-        this.items.push(cn);
+        // dont' really need ot update items.
+        // this.items.push(cn);
+        this.fileCollection.add(cn);
+        
+    },
+    removeCard : function(id)
+    {
         
+        var card  = this.fileCollection.get(id);
+        this.fileCollection.remove(card);
+        //this.items = this.items.filter(function(e) { return e != card });
+        // dont' really need ot update items.
+        card.el.dom.parentNode.removeChild(card.el.dom);
         
+    },
+    reset: function()
+    {
+        this.fileCollection.each(function(card) {
+            card.el.dom.parentNode.removeChild(card.el.dom);    
+        });
+        this.inputEl().dom.value = '[]';
+    },
+    
+    updateInput : function()
+    {
+        var data = [];
+        this.fileCollection.each(function(e) {
+            data.push(e.data);
+        });
+        this.inputEl().dom.value = JSON.stringify(data);
     }