Roo/bootstrap/CardUploader.js

X-Git-Url: http://git.roojs.org/?p=roojs1;a=blobdiff_plain;f=docs%2Fsrc%2FRoo_bootstrap_CardUploader.js.html;fp=docs%2Fsrc%2FRoo_bootstrap_CardUploader.js.html;h=894365db7b71608614a90eb1a38985c48694cc1d;hp=0000000000000000000000000000000000000000;hb=464e48f1248874273052a1a1da7500b92f3944be;hpb=9494eac8a7a0653c25a69afd59578ba2ce87c173 diff --git a/docs/src/Roo_bootstrap_CardUploader.js.html b/docs/src/Roo_bootstrap_CardUploader.js.html new file mode 100644 index 0000000000..894365db7b --- /dev/null +++ b/docs/src/Roo_bootstrap_CardUploader.js.html @@ -0,0 +1,323 @@ +Roo/bootstrap/CardUploader.js

+/*
+* Licence: LGPL
+*/
+
+/**
+ * @class Roo.bootstrap.CardUploader
+ * @extends Roo.bootstrap.Button
+ * Bootstrap Card Uploader class - it's a button which when you add files to it, adds cards below with preview and the name...
+ * @cfg {Number} errorTimeout default 3000
+ * @cfg {Array}  images  an array of ?? Img objects ??? when loading existing files..
+ * @cfg {Array}  html The button text.
+
+ *
+ * @constructor
+ * Create a new CardUploader
+ * @param {Object} config The config object
+ */
+
+Roo.bootstrap.CardUploader = function(config){
+
+
+
+    Roo.bootstrap.CardUploader.superclass.constructor.call(this, config);
+
+
+    this.fileCollection   = new Roo.util.MixedCollection(false,function(r) {
+        return r.data.id
+        });
+
+
+};
+
+Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Input,  {
+
+
+    errorTimeout : 3000,
+
+    images : false,
+
+    fileCollection : false,
+    allowBlank : true,
+
+    getAutoCreate : function()
+    {
+
+        var cfg =  {
+            cls :'form-group' ,
+            cn : [
+
+                {
+                    tag: 'label',
+                   //cls : 'input-group-addon',
+                    html : this.fieldLabel
+
+                },
+
+                {
+                    tag: 'input',
+                    type : 'hidden',
+                    value : this.value,
+                    cls : 'd-none  form-control'
+                },
+
+                {
+                    tag: 'input',
+                    multiple : 'multiple',
+                    type : 'file',
+                    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;
+    },
+
+    getChildContainer : function() /// what children are added to.
+    {
+        return this.containerEl;
+    },
+
+    getButtonContainer : function() /// what children are added to.
+    {
+        return this.el.select(".roo-card-uploader-button-container").first();
+    },
+
+    initEvents : function()
+    {
+
+        Roo.bootstrap.Input.prototype.initEvents.call(this);
+
+        var t = this;
+        this.addxtype({
+            xns: Roo.bootstrap,
+
+            xtype : 'Button',
+            container_method : 'getButtonContainer' ,
+            html :  this.html, // 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);
+
+
+
+
+        this.selectorEl = this.el.select('.roo-card-upload-selector', true).first();
+
+        this.selectorEl.on('change', this.onFileSelected, this);
+        if (this.images) {
+            var t = this;
+            this.images.forEach(function(img) {
+                t.addCard(img)
+            });
+            this.images = false;
+        }
+        this.containerEl = this.el.select('.roo-card-uploader-container', true).first();
+
+
+    },
+
+
+    onClick : function(e)
+    {
+        e.preventDefault();
+
+        this.selectorEl.dom.click();
+
+    },
+
+    onFileSelected : function(e)
+    {
+        e.preventDefault();
+
+        if(typeof(this.selectorEl.dom.files) == 'undefined' || !this.selectorEl.dom.files.length){
+            return;
+        }
+
+        Roo.each(this.selectorEl.dom.files, function(file){
+            this.addFile(file);
+        }, this);
+
+    },
+
+
+
+
+
+    addFile : function(file)
+    {
+
+        if(typeof(file) === 'string'){
+            throw "Add file by name?"; // should not happen
+            return;
+        }
+
+        if(!file || !this.urlAPI){
+            return;
+        }
+
+        // file;
+        // file.type;
+
+        var _this = this;
+
+
+        var url = _this.urlAPI.createObjectURL( file);
+
+        this.addCard({
+            id : Roo.bootstrap.CardUploader.ID--,
+            is_uploaded : false,
+            src : url,
+            title : file.name,
+            mimetype : file.type,
+            preview : false,
+            is_deleted : 0
+        })
+
+    },
+
+    addCard : function (data)
+    {
+        // 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 = [
+            {
+                xns : Roo.bootstrap,
+                xtype : 'CardFooter',
+                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-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() {
+                                        t.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,
+                header_image_fit_square: true, // fixme  - we probably need to use the 'Img' element to do stuff like this.
+                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' : 'cursor' });
+
+                    }
+
+
+                }
+
+            }
+        );
+        // dont' really need ot update items.
+        // this.items.push(cn);
+        this.fileCollection.add(cn);
+        this.updateInput();
+
+    },
+    removeCard : function(id)
+    {
+
+        var card  = this.fileCollection.get(id);
+        card.data.is_deleted = 1;
+        card.data.src = ''; /// delete the source - so it reduces size of not uploaded images etc.
+        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.fileCollection.clear();
+        this.updateInput();
+    },
+
+    updateInput : function()
+    {
+        var data = [];
+        this.fileCollection.each(function(e) {
+            data.push(e.data);
+        });
+
+        this.inputEl().dom.value = JSON.stringify(data);
+    }
+
+
+});
+
+
+Roo.bootstrap.CardUploader.ID = -1;
\ No newline at end of file