fix typos
authorAlan Knowles <alan@roojs.com>
Wed, 25 Nov 2020 09:44:08 +0000 (17:44 +0800)
committerAlan Knowles <alan@roojs.com>
Wed, 25 Nov 2020 09:44:08 +0000 (17:44 +0800)
buildSDK/dependancy_bootstrap.txt
docs/src/Roo_bootstrap_Card.js.html
docs/src/Roo_bootstrap_Modal.js.html
roojs-bootstrap-debug.js
roojs-bootstrap.js

index 581c3fb..819e220 100644 (file)
@@ -18,7 +18,6 @@ Roo.bootstrap.Card
 Roo.bootstrap.CardHeader
 Roo.bootstrap.CardFooter
 Roo.bootstrap.CardImageTop
-Roo.bootstrap.CardUploader
 
 Roo.bootstrap.Img
 Roo.bootstrap.Link
@@ -61,6 +60,8 @@ Roo.form.VTypes
 Roo.bootstrap.Input
 Roo.bootstrap.TextArea
 Roo.bootstrap.TriggerField
+Roo.bootstrap.CardUploader
+
 
 Roo.data.SortTypes
 Roo.data.Record
index beff545..613bf45 100644 (file)
             </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'span'</span><span class="jsdoc-syntax">,
             </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'roo-card-header-ctr' </span><span class="jsdoc-syntax">+ ( </span><span class="jsdoc-var">this.header.length </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">'' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">' d-none'</span><span class="jsdoc-syntax">),
             </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.header
-        </span><span class="jsdoc-syntax">})
+        </span><span class="jsdoc-syntax">});
 
 
         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.header_image.length</span><span class="jsdoc-syntax">) {
             </span><span class="jsdoc-var">cards </span><span class="jsdoc-syntax">: [],
             </span><span class="jsdoc-var">card_n </span><span class="jsdoc-syntax">: -1,
             </span><span class="jsdoc-var">items_n </span><span class="jsdoc-syntax">: -1,
-            </span><span class="jsdoc-var">card </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
-        };
+            </span><span class="jsdoc-var">card </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false
+        </span><span class="jsdoc-syntax">};
 
         </span><span class="jsdoc-comment">//Roo.log([ 'target' , target ? target.id : '--nothing--']);
         // see if target is one of the 'cards'...
 
         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.items.length</span><span class="jsdoc-syntax">) {
             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">nitems </span><span class="jsdoc-syntax">= [];
-            </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">([</span><span class="jsdoc-var">info.items_n</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">info.position</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.items.length</span><span class="jsdoc-syntax">])
+            </span><span class="jsdoc-comment">//Roo.log([info.items_n, info.position, this.items.length]);
             </span><span class="jsdoc-keyword">for </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">=0; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">this.items.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++) {
                 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">info.items_n </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">info.position </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'above'</span><span class="jsdoc-syntax">) {
                     </span><span class="jsdoc-var">nitems.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">data.source</span><span class="jsdoc-syntax">);
index 655fd04..7bacd7e 100644 (file)
@@ -52,9 +52,9 @@
          * @param {Roo.bootstrap.Modal} this
          * @param {Roo.EventObject} value
          */
-        </span><span class="jsdoc-string">&quot;titlechanged&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-string">&quot;titlechanged&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
 
-    });
+    </span><span class="jsdoc-syntax">});
     </span><span class="jsdoc-var">this.buttons </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.buttons </span><span class="jsdoc-syntax">|| [];
 
     </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.tmpl</span><span class="jsdoc-syntax">) {
index 7433d5c..43aa293 100644 (file)
@@ -2679,329 +2679,199 @@ Roo.extend(Roo.bootstrap.CardImageTop, Roo.bootstrap.Element,  {
 
  
 
-/*
-* Licence: LGPL
-*/
+ /*
+ * - LGPL
+ *
+ * image
+ * 
+ */
 
-/**
- * @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.
 
- *
+/**
+ * @class Roo.bootstrap.Img
+ * @extends Roo.bootstrap.Component
+ * Bootstrap Img class
+ * @cfg {Boolean} imgResponsive false | true
+ * @cfg {String} border rounded | circle | thumbnail
+ * @cfg {String} src image source
+ * @cfg {String} alt image alternative text
+ * @cfg {String} href a tag href
+ * @cfg {String} target (_self|_blank|_parent|_top)target for a href.
+ * @cfg {String} xsUrl xs image source
+ * @cfg {String} smUrl sm image source
+ * @cfg {String} mdUrl md image source
+ * @cfg {String} lgUrl lg image source
+ * 
  * @constructor
- * Create a new CardUploader
+ * Create a new Input
  * @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.bootstrap.Img = function(config){
+    Roo.bootstrap.Img.superclass.constructor.call(this, config);
     
+    this.addEvents({
+        // img events
+        /**
+         * @event click
+         * The img click event for the img.
+         * @param {Roo.EventObject} e
+         */
+        "click" : true
+    });
 };
 
-Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Input,  {
-    
-     
-    errorTimeout : 3000,
-     
-    images : false,
-   
-    fileCollection : false,
-    allowBlank : true,
+Roo.extend(Roo.bootstrap.Img, Roo.bootstrap.Component,  {
     
+    imgResponsive: true,
+    border: '',
+    src: 'about:blank',
+    href: false,
+    target: false,
+    xsUrl: '',
+    smUrl: '',
+    mdUrl: '',
+    lgUrl: '',
+
     getAutoCreate : function()
-    {
+    {   
+        if(this.src || (!this.xsUrl && !this.smUrl && !this.mdUrl && !this.lgUrl)){
+            return this.createSingleImg();
+        }
         
-        var cfg =  {
-            cls :'form-group' ,
-            cn : [
-               
-                {
-                    tag: 'label',
-                   //cls : 'input-group-addon',
-                    html : this.fieldLabel
-
-                },
+        var cfg = {
+            tag: 'div',
+            cls: 'roo-image-responsive-group',
+            cn: []
+        };
+        var _this = this;
+        
+        Roo.each(['xs', 'sm', 'md', 'lg'], function(size){
+            
+            if(!_this[size + 'Url']){
+                return;
+            }
+            
+            var img = {
+                tag: 'img',
+                cls: (_this.imgResponsive) ? 'img-responsive' : '',
+                html: _this.html || cfg.html,
+                src: _this[size + 'Url']
+            };
+            
+            img.cls += ' roo-image-responsive-' + size;
+            
+            var s = ['xs', 'sm', 'md', 'lg'];
+            
+            s.splice(s.indexOf(size), 1);
+            
+            Roo.each(s, function(ss){
+                img.cls += ' hidden-' + ss;
+            });
+            
+            if (['rounded','circle','thumbnail'].indexOf(_this.border)>-1) {
+                cfg.cls += ' img-' + _this.border;
+            }
+            
+            if(_this.alt){
+                cfg.alt = _this.alt;
+            }
+            
+            if(_this.href){
+                var a = {
+                    tag: 'a',
+                    href: _this.href,
+                    cn: [
+                        img
+                    ]
+                };
 
-                {
-                    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'
+                if(this.target){
+                    a.target = _this.target;
                 }
-
-            ]
-        };
-           
-         
+            }
+            
+            cfg.cn.push((_this.href) ? a : img);
+            
+        });
+        
         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()
+    createSingleImg : function()
     {
+        var cfg = {
+            tag: 'img',
+            cls: (this.imgResponsive) ? 'img-responsive' : '',
+            html : null,
+            src : 'about:blank'  // just incase src get's set to undefined?!?
+        };
         
-        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);
-                }
-            }
-        });
+        cfg.html = this.html || cfg.html;
         
+        cfg.src = this.src || cfg.src;
         
+        if (['rounded','circle','thumbnail'].indexOf(this.border)>-1) {
+            cfg.cls += ' img-' + this.border;
+        }
         
+        if(this.alt){
+            cfg.alt = this.alt;
+        }
         
-        this.urlAPI = (window.createObjectURL && window) || 
-                                (window.URL && URL.revokeObjectURL && URL) || 
-                                (window.webkitURL && webkitURL);
-                        
-         
-         
-         
-        this.selectorEl = this.el.select('.roo-card-upload-selector', true).first();
+        if(this.href){
+            var a = {
+                tag: 'a',
+                href: this.href,
+                cn: [
+                    cfg
+                ]
+            };
+            
+            if(this.target){
+                a.target = this.target;
+            }
+            
+        }
         
-        this.selectorEl.on('change', this.onFileSelected, this);
-        if (this.images) {
-            var t = this;
-            this.images.forEach(function(img) {
-                t.addCard(img)
-            });
-            this.images = false;
+        return (this.href) ? a : cfg;
+    },
+    
+    initEvents: function() 
+    {
+        if(!this.href){
+            this.el.on('click', this.onClick, this);
         }
-        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);
-         
+        Roo.log('img onclick');
+        this.fireEvent('click', this, e);
     },
+    /**
+     * Sets the url of the image - used to update it
+     * @param {String} url the url of the image
+     */
     
-      
-    
-      
-    
-    addFile : function(file)
+    setSrc : function(url)
     {
-           
-        if(typeof(file) === 'string'){
-            throw "Add file by name?"; // should not happen
-            return;
-        }
+        this.src =  url;
         
-        if(!file || !this.urlAPI){
+        if(this.src || (!this.xsUrl && !this.smUrl && !this.mdUrl && !this.lgUrl)){
+            this.el.dom.src =  url;
             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);
+        this.el.select('img', true).first().dom.src =  url;
     }
     
     
+   
 });
 
-
-Roo.bootstrap.CardUploader.ID = -1;/*
+ /*
  * - LGPL
  *
  * image
@@ -3010,27 +2880,26 @@ Roo.bootstrap.CardUploader.ID = -1;/*
 
 
 /**
- * @class Roo.bootstrap.Img
+ * @class Roo.bootstrap.Link
  * @extends Roo.bootstrap.Component
- * Bootstrap Img class
- * @cfg {Boolean} imgResponsive false | true
- * @cfg {String} border rounded | circle | thumbnail
- * @cfg {String} src image source
+ * Bootstrap Link Class
  * @cfg {String} alt image alternative text
  * @cfg {String} href a tag href
- * @cfg {String} target (_self|_blank|_parent|_top)target for a href.
- * @cfg {String} xsUrl xs image source
- * @cfg {String} smUrl sm image source
- * @cfg {String} mdUrl md image source
- * @cfg {String} lgUrl lg image source
+ * @cfg {String} target (_self|_blank|_parent|_top) target for a href.
+ * @cfg {String} html the content of the link.
+ * @cfg {String} anchor name for the anchor link
+ * @cfg {String} fa - favicon
+
+ * @cfg {Boolean} preventDefault (true | false) default false
+
  * 
  * @constructor
  * Create a new Input
  * @param {Object} config The config object
  */
 
-Roo.bootstrap.Img = function(config){
-    Roo.bootstrap.Img.superclass.constructor.call(this, config);
+Roo.bootstrap.Link = function(config){
+    Roo.bootstrap.Link.superclass.constructor.call(this, config);
     
     this.addEvents({
         // img events
@@ -3043,225 +2912,34 @@ Roo.bootstrap.Img = function(config){
     });
 };
 
-Roo.extend(Roo.bootstrap.Img, Roo.bootstrap.Component,  {
+Roo.extend(Roo.bootstrap.Link, Roo.bootstrap.Component,  {
     
-    imgResponsive: true,
-    border: '',
-    src: 'about:blank',
     href: false,
     target: false,
-    xsUrl: '',
-    smUrl: '',
-    mdUrl: '',
-    lgUrl: '',
+    preventDefault: false,
+    anchor : false,
+    alt : false,
+    fa: false,
+
 
     getAutoCreate : function()
-    {   
-        if(this.src || (!this.xsUrl && !this.smUrl && !this.mdUrl && !this.lgUrl)){
-            return this.createSingleImg();
-        }
+    {
+        var html = this.html || '';
         
+        if (this.fa !== false) {
+            html = '<i class="fa fa-' + this.fa + '"></i>';
+        }
         var cfg = {
-            tag: 'div',
-            cls: 'roo-image-responsive-group',
-            cn: []
+            tag: 'a'
         };
-        var _this = this;
-        
-        Roo.each(['xs', 'sm', 'md', 'lg'], function(size){
-            
-            if(!_this[size + 'Url']){
-                return;
-            }
-            
-            var img = {
-                tag: 'img',
-                cls: (_this.imgResponsive) ? 'img-responsive' : '',
-                html: _this.html || cfg.html,
-                src: _this[size + 'Url']
-            };
-            
-            img.cls += ' roo-image-responsive-' + size;
-            
-            var s = ['xs', 'sm', 'md', 'lg'];
-            
-            s.splice(s.indexOf(size), 1);
-            
-            Roo.each(s, function(ss){
-                img.cls += ' hidden-' + ss;
-            });
-            
-            if (['rounded','circle','thumbnail'].indexOf(_this.border)>-1) {
-                cfg.cls += ' img-' + _this.border;
-            }
-            
-            if(_this.alt){
-                cfg.alt = _this.alt;
-            }
-            
-            if(_this.href){
-                var a = {
-                    tag: 'a',
-                    href: _this.href,
-                    cn: [
-                        img
-                    ]
-                };
-
-                if(this.target){
-                    a.target = _this.target;
-                }
-            }
-            
-            cfg.cn.push((_this.href) ? a : img);
-            
-        });
-        
-        return cfg;
-    },
-    
-    createSingleImg : function()
-    {
-        var cfg = {
-            tag: 'img',
-            cls: (this.imgResponsive) ? 'img-responsive' : '',
-            html : null,
-            src : 'about:blank'  // just incase src get's set to undefined?!?
-        };
-        
-        cfg.html = this.html || cfg.html;
-        
-        cfg.src = this.src || cfg.src;
-        
-        if (['rounded','circle','thumbnail'].indexOf(this.border)>-1) {
-            cfg.cls += ' img-' + this.border;
-        }
-        
-        if(this.alt){
-            cfg.alt = this.alt;
-        }
-        
-        if(this.href){
-            var a = {
-                tag: 'a',
-                href: this.href,
-                cn: [
-                    cfg
-                ]
-            };
-            
-            if(this.target){
-                a.target = this.target;
-            }
-            
-        }
-        
-        return (this.href) ? a : cfg;
-    },
-    
-    initEvents: function() 
-    {
-        if(!this.href){
-            this.el.on('click', this.onClick, this);
-        }
-        
-    },
-    
-    onClick : function(e)
-    {
-        Roo.log('img onclick');
-        this.fireEvent('click', this, e);
-    },
-    /**
-     * Sets the url of the image - used to update it
-     * @param {String} url the url of the image
-     */
-    
-    setSrc : function(url)
-    {
-        this.src =  url;
-        
-        if(this.src || (!this.xsUrl && !this.smUrl && !this.mdUrl && !this.lgUrl)){
-            this.el.dom.src =  url;
-            return;
-        }
-        
-        this.el.select('img', true).first().dom.src =  url;
-    }
-    
-    
-   
-});
-
- /*
- * - LGPL
- *
- * image
- * 
- */
-
-
-/**
- * @class Roo.bootstrap.Link
- * @extends Roo.bootstrap.Component
- * Bootstrap Link Class
- * @cfg {String} alt image alternative text
- * @cfg {String} href a tag href
- * @cfg {String} target (_self|_blank|_parent|_top) target for a href.
- * @cfg {String} html the content of the link.
- * @cfg {String} anchor name for the anchor link
- * @cfg {String} fa - favicon
-
- * @cfg {Boolean} preventDefault (true | false) default false
-
- * 
- * @constructor
- * Create a new Input
- * @param {Object} config The config object
- */
-
-Roo.bootstrap.Link = function(config){
-    Roo.bootstrap.Link.superclass.constructor.call(this, config);
-    
-    this.addEvents({
-        // img events
-        /**
-         * @event click
-         * The img click event for the img.
-         * @param {Roo.EventObject} e
-         */
-        "click" : true
-    });
-};
-
-Roo.extend(Roo.bootstrap.Link, Roo.bootstrap.Component,  {
-    
-    href: false,
-    target: false,
-    preventDefault: false,
-    anchor : false,
-    alt : false,
-    fa: false,
-
-
-    getAutoCreate : function()
-    {
-        var html = this.html || '';
-        
-        if (this.fa !== false) {
-            html = '<i class="fa fa-' + this.fa + '"></i>';
-        }
-        var cfg = {
-            tag: 'a'
-        };
-        // anchor's do not require html/href...
-        if (this.anchor === false) {
-            cfg.html = html;
-            cfg.href = this.href || '#';
-        } else {
-            cfg.name = this.anchor;
-            if (this.html !== false || this.fa !== false) {
-                cfg.html = html;
+        // anchor's do not require html/href...
+        if (this.anchor === false) {
+            cfg.html = html;
+            cfg.href = this.href || '#';
+        } else {
+            cfg.name = this.anchor;
+            if (this.html !== false || this.fa !== false) {
+                cfg.html = html;
             }
             if (this.href !== false) {
                 cfg.href = this.href;
@@ -12534,7 +12212,329 @@ Roo.extend(Roo.bootstrap.TriggerField, Roo.bootstrap.Input,  {
      */
     onTriggerClick : Roo.emptyFn
 });
- /*
+/*
+* 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;/*
  * Based on:
  * Ext JS Library 1.1.1
  * Copyright(c) 2006-2007, Ext JS, LLC.
index 696ffc8..6b61075 100644 (file)
@@ -114,19 +114,6 @@ Roo.bootstrap.CardHeader=function(A){Roo.bootstrap.CardHeader.superclass.constru
 Roo.bootstrap.CardFooter=function(A){Roo.bootstrap.CardFooter.superclass.constructor.call(this,A);};Roo.extend(Roo.bootstrap.CardFooter,Roo.bootstrap.Element,{container_method:'getCardFooter'});
 // Roo/bootstrap/CardImageTop.js
 Roo.bootstrap.CardImageTop=function(A){Roo.bootstrap.CardImageTop.superclass.constructor.call(this,A);};Roo.extend(Roo.bootstrap.CardImageTop,Roo.bootstrap.Element,{container_method:'getCardImageTop'});
-// Roo/bootstrap/CardUploader.js
-Roo.bootstrap.CardUploader=function(A){Roo.bootstrap.CardUploader.superclass.constructor.call(this,A);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 A={cls:'form-group',cn:[{tag:'label',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 A;},getChildContainer:function(){return this.containerEl;},getButtonContainer:function(){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,cls:'w-100 ',listeners:{'click':function(A,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(A){t.addCard(A)});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(A){this.addFile(A);
-},this);},addFile:function(A){if(typeof(A)==='string'){throw "Add file by name?";return;}if(!A||!this.urlAPI){return;}var B=this;var C=B.urlAPI.createObjectURL(A);this.addCard({id:Roo.bootstrap.CardUploader.ID--,is_uploaded:false,src:C,title:A.name,mimetype:A.type,preview:false,is_deleted:0}
-)},addCard:function(A){var t=this;var B=[{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>",A.title),cls:'col-11 text-left',size:'sm',weight:'link',fa:'download',listeners:{click:function(){this.downloadCard(A.id)}
-}},{xns:Roo.bootstrap,xtype:'Button',size:'sm',weight:'danger',cls:'col-1',fa:'times',listeners:{click:function(){t.removeCard(A.id)}}}]}]}];var cn=this.addxtype({xns:Roo.bootstrap,xtype:'Card',closeable:true,header:!A.mimetype.match(/image/)&&!A.preview?"Document":false,header_image:A.mimetype.match(/image/)?A.src:A.preview,header_image_fit_square:true,data:A,html:false,items:B,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(A.id);},this);this.imgEl.set({'pointer':'cursor'});}}});this.fileCollection.add(cn);this.updateInput();},removeCard:function(id){var A=this.fileCollection.get(id);
-A.data.is_deleted=1;A.data.src='';this.fileCollection.remove(A);A.el.dom.parentNode.removeChild(A.el.dom);},reset:function(){this.fileCollection.each(function(A){A.el.dom.parentNode.removeChild(A.el.dom);});this.fileCollection.clear();this.updateInput();}
-,updateInput:function(){var A=[];this.fileCollection.each(function(e){A.push(e.data);});this.inputEl().dom.value=JSON.stringify(A);}});Roo.bootstrap.CardUploader.ID=-1;
 // Roo/bootstrap/Img.js
 Roo.bootstrap.Img=function(A){Roo.bootstrap.Img.superclass.constructor.call(this,A);this.addEvents({"click":true});};Roo.extend(Roo.bootstrap.Img,Roo.bootstrap.Component,{imgResponsive:true,border:'',src:'about:blank',href:false,target:false,xsUrl:'',smUrl:'',mdUrl:'',lgUrl:'',getAutoCreate:function(){if(this.src||(!this.xsUrl&&!this.smUrl&&!this.mdUrl&&!this.lgUrl)){return this.createSingleImg();
 }var A={tag:'div',cls:'roo-image-responsive-group',cn:[]};var B=this;Roo.each(['xs','sm','md','lg'],function(C){if(!B[C+'Url']){return;}var D={tag:'img',cls:(B.imgResponsive)?'img-responsive':'',html:B.html||A.html,src:B[C+'Url']};D.cls+=' roo-image-responsive-'+C;
@@ -520,6 +507,19 @@ this.fireEvent("afterremove",this)}},createList:function(){this.list=Roo.get(doc
 }},onBlur:function(){},mimicBlur:function(e,t){},triggerBlur:function(){this.mimicing=false;Roo.get(Roo.isIE?document.body:document).un("mousedown",this.mimicBlur);if(this.monitorTab){this.el.un("keydown",this.checkTab,this);}Roo.bootstrap.TriggerField.superclass.onBlur.call(this);
 },validateBlur:function(e,t){return true;},onDisable:function(){this.inputEl().dom.disabled=true;},onEnable:function(){this.inputEl().dom.disabled=false;},onShow:function(){var ae=this.getActionEl();if(ae){ae.dom.style.display='';ae.dom.style.visibility='visible';
 }},onHide:function(){var ae=this.getActionEl();ae.dom.style.display='none';},onTriggerClick:Roo.emptyFn});
+// Roo/bootstrap/CardUploader.js
+Roo.bootstrap.CardUploader=function(A){Roo.bootstrap.CardUploader.superclass.constructor.call(this,A);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 A={cls:'form-group',cn:[{tag:'label',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 A;},getChildContainer:function(){return this.containerEl;},getButtonContainer:function(){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,cls:'w-100 ',listeners:{'click':function(A,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(A){t.addCard(A)});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(A){this.addFile(A);
+},this);},addFile:function(A){if(typeof(A)==='string'){throw "Add file by name?";return;}if(!A||!this.urlAPI){return;}var B=this;var C=B.urlAPI.createObjectURL(A);this.addCard({id:Roo.bootstrap.CardUploader.ID--,is_uploaded:false,src:C,title:A.name,mimetype:A.type,preview:false,is_deleted:0}
+)},addCard:function(A){var t=this;var B=[{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>",A.title),cls:'col-11 text-left',size:'sm',weight:'link',fa:'download',listeners:{click:function(){this.downloadCard(A.id)}
+}},{xns:Roo.bootstrap,xtype:'Button',size:'sm',weight:'danger',cls:'col-1',fa:'times',listeners:{click:function(){t.removeCard(A.id)}}}]}]}];var cn=this.addxtype({xns:Roo.bootstrap,xtype:'Card',closeable:true,header:!A.mimetype.match(/image/)&&!A.preview?"Document":false,header_image:A.mimetype.match(/image/)?A.src:A.preview,header_image_fit_square:true,data:A,html:false,items:B,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(A.id);},this);this.imgEl.set({'pointer':'cursor'});}}});this.fileCollection.add(cn);this.updateInput();},removeCard:function(id){var A=this.fileCollection.get(id);
+A.data.is_deleted=1;A.data.src='';this.fileCollection.remove(A);A.el.dom.parentNode.removeChild(A.el.dom);},reset:function(){this.fileCollection.each(function(A){A.el.dom.parentNode.removeChild(A.el.dom);});this.fileCollection.clear();this.updateInput();}
+,updateInput:function(){var A=[];this.fileCollection.each(function(e){A.push(e.data);});this.inputEl().dom.value=JSON.stringify(A);}});Roo.bootstrap.CardUploader.ID=-1;
 // Roo/data/SortTypes.js
 Roo.data.SortTypes={none:function(s){return s;},stripTagsRE:/<\/?[^>]+>/gi,asText:function(s){return String(s).replace(this.stripTagsRE,"");},asUCText:function(s){return String(s).toUpperCase().replace(this.stripTagsRE,"");},asUCString:function(s){return String(s).toUpperCase();
 },asDate:function(s){if(!s){return 0;}if(s instanceof Date){return s.getTime();}return Date.parse(String(s));},asFloat:function(s){var A=parseFloat(String(s).replace(/,/g,""));if(isNaN(A)){A=0;}return A;},asInt:function(s){var A=parseInt(String(s).replace(/,/g,""));