roojs-bootstrap.js

roojs-bootstrap-debug.js

diff --git a/roojs-bootstrap-debug.js b/roojs-bootstrap-debug.js
index 72b6b0d..86cf32b 100644 (file)
--- a/roojs-bootstrap-debug.js
+++ b/roojs-bootstrap-debug.js
@@ -2848,6 +2848,172 @@ Roo.extend(Roo.bootstrap.CardImageTop, Roo.bootstrap.Element,  {
 
  
 
+ 
+/*
+* Licence: LGPL
+*/
+
+/**
+ * @class Roo.bootstrap.ButtonUploader
+ * @extends Roo.bootstrap.Button
+ * Bootstrap Button Uploader class - it's a button which when you add files to it
+ *
+ * 
+ * @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.ButtonUploader = function(config){
+    
+ 
+    
+    Roo.bootstrap.ButtonUploader.superclass.constructor.call(this, config);
+    
+     
+     this.addEvents({
+         // raw events
+        /**
+         * @event beforeselect
+         * When button is pressed, before show upload files dialog is shown
+         * @param {Roo.bootstrap.UploaderButton} this
+         *
+         */
+        'beforeselect' : true,
+         /**
+         * @event fired when files have been selected, 
+         * When a the download link is clicked
+         * @param {Roo.bootstrap.Card} this
+         * @param {Object} The image information data  contains 
+         */
+        'uploaded' : true
+        
+    });
+};
+ 
+Roo.extend(Roo.bootstrap.ButtonUploader, Roo.bootstrap.Button,  {
+    
+     
+    errorTimeout : 3000,
+     
+    images : false,
+   
+    fileCollection : false,
+    allowBlank : true,
+    
+    getAutoCreate : function()
+    {
+        
+        
+        return  {
+            cls :'div' ,
+            cn : [
+                Roo.bootstrap.Button.prototype.getAutoCreate.call(this),
+                {
+                    tag: 'input',
+                    multiple : 'multiple',
+                    type : 'file',
+                    cls : 'd-none  roo-card-upload-selector' 
+                  
+                }
+                 
+
+            ]
+        };
+           
+         
+    },
+     
+   
+    initEvents : function()
+    {
+        
+        Roo.bootstrap.Button.prototype.initEvents.call(this);
+        
+        
+        
+        
+        
+        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);
+         
+         
+       
+    },
+    
+   
+    onClick : function(e)
+    {
+        e.preventDefault();
+        
+        if ( this.fireEvent('beforeselect', this) === false) {
+            return;
+        }
+         
+        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){
+            var url = this.urlAPI.createObjectURL(file); // not sure...
+            this.fireEvent('uploaded', this, [file, url]);
+        }, this);
+         
+    },
+    
+       
+   
+    
+    /**
+     * addCard - add an Attachment to the uploader
+     * @param data - the data about the image to upload
+     *
+     * {
+          id : 123
+          title : "Title of file",
+          is_uploaded : false,
+          src : "http://.....",
+          srcfile : { the File upload object },
+          mimetype : file.type,
+          preview : false,
+          is_deleted : 0
+          .. any other data...
+        }
+     *
+     * 
+    */
+     
+    reset: function()
+    {
+         
+         this.selectorEl
+    } 
+    
+    
+    
+    
+});
  /*
  * - LGPL
  *

diff --git a/roojs-bootstrap.js b/roojs-bootstrap.js
index 2f3837c..0e3ecf0 100644 (file)
--- a/roojs-bootstrap.js
+++ b/roojs-bootstrap.js
@@ -120,6 +120,11 @@ 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/ButtonUploader.js
+Roo.bootstrap.ButtonUploader=function(A){Roo.bootstrap.ButtonUploader.superclass.constructor.call(this,A);this.addEvents({'beforeselect':true,'uploaded':true});};Roo.extend(Roo.bootstrap.ButtonUploader,Roo.bootstrap.Button,{errorTimeout:3000,images:false,fileCollection:false,allowBlank:true,getAutoCreate:function(){return {cls:'div',cn:[Roo.bootstrap.Button.prototype.getAutoCreate.call(this),{tag:'input',multiple:'multiple',type:'file',cls:'d-none  roo-card-upload-selector'}
+]};},initEvents:function(){Roo.bootstrap.Button.prototype.initEvents.call(this);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);},onClick:function(e){e.preventDefault();if(this.fireEvent('beforeselect',this)===false){return;}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){var B=this.urlAPI.createObjectURL(A);this.fireEvent('uploaded',this,[A,B]);},this);},reset:function(){this.selectorEl}});
 // 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;