roojs-bootstrap.js

roojs-bootstrap-debug.js
Roo/bootstrap/Img.js

diff --git a/Roo/bootstrap/Img.js b/Roo/bootstrap/Img.js
index 598e3f5..7370168 100644 (file)
--- a/Roo/bootstrap/Img.js
+++ b/Roo/bootstrap/Img.js
@@ -20,6 +20,7 @@
  * @cfg {String} smUrl sm image source
  * @cfg {String} mdUrl md image source
  * @cfg {String} lgUrl lg image source
+ * @cfg {Boolean} backgroundContain (use style background and contain image in content)
  * 
  * @constructor
  * Create a new Input

diff --git a/roojs-bootstrap-debug.js b/roojs-bootstrap-debug.js
index 70b9e9d..6572bff 100644 (file)
--- a/roojs-bootstrap-debug.js
+++ b/roojs-bootstrap-debug.js
@@ -3080,6 +3080,7 @@ Roo.extend(Roo.bootstrap.Img, Roo.bootstrap.Component,  {
     smUrl: '',
     mdUrl: '',
     lgUrl: '',
+    backgroundContain : false,
 
     getAutoCreate : function()
     {   
@@ -3152,12 +3153,20 @@ Roo.extend(Roo.bootstrap.Img, Roo.bootstrap.Component,  {
             tag: 'img',
             cls: (this.imgResponsive) ? 'img-responsive' : '',
             html : null,
-            src : 'about:blank'  // just incase src get's set to undefined?!?
+            src : Roo.BLANK_IMAGE_URL  // just incase src get's set to undefined?!?
         };
         
+        if (this.backgroundContain) {
+            cfg.cls += ' background-contain';
+        }
+        
         cfg.html = this.html || cfg.html;
         
-        cfg.src = this.src || cfg.src;
+        if (this.backgroundContain) {
+            cfg.style="background-image: url(" + this.src + ')';
+        } else {
+            cfg.src = this.src || cfg.src;
+        }
         
         if (['rounded','circle','thumbnail'].indexOf(this.border)>-1) {
             cfg.cls += ' img-' + this.border;

diff --git a/roojs-bootstrap.js b/roojs-bootstrap.js
index e6afdb0..4a25deb 100644 (file)
--- a/roojs-bootstrap.js
+++ b/roojs-bootstrap.js
@@ -128,13 +128,14 @@ this.selectorEl=this.el.select('.roo-card-upload-selector',true).first();this.se
 if(typeof(this.selectorEl.dom.files)=='undefined'||!this.selectorEl.dom.files.length){return;}var A=Array.prototype.slice.call(this.selectorEl.dom.files);this.selectorEl.dom.value='';this.fireEvent('uploaded',this,A);},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,"load":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();
+Roo.bootstrap.Img=function(A){Roo.bootstrap.Img.superclass.constructor.call(this,A);this.addEvents({"click":true,"load":true});};Roo.extend(Roo.bootstrap.Img,Roo.bootstrap.Component,{imgResponsive:true,border:'',src:'about:blank',href:false,target:false,xsUrl:'',smUrl:'',mdUrl:'',lgUrl:'',backgroundContain:false,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;
 var s=['xs','sm','md','lg'];s.splice(s.indexOf(C),1);Roo.each(s,function(ss){D.cls+=' hidden-'+ss;});if(['rounded','circle','thumbnail'].indexOf(B.border)>-1){A.cls+=' img-'+B.border;}if(B.alt){A.alt=B.alt;}if(B.href){var a={tag:'a',href:B.href,cn:[D]};if(this.target){a.target=B.target;
-}}A.cn.push((B.href)?a:D);});return A;},createSingleImg:function(){var A={tag:'img',cls:(this.imgResponsive)?'img-responsive':'',html:null,src:'about:blank'};A.html=this.html||A.html;A.src=this.src||A.src;if(['rounded','circle','thumbnail'].indexOf(this.border)>-1){A.cls+=' img-'+this.border;
-}if(this.alt){A.alt=this.alt;}if(this.href){var a={tag:'a',href:this.href,cn:[A]};if(this.target){a.target=this.target;}}return (this.href)?a:A;},initEvents:function(){if(!this.href){this.el.on('click',this.onClick,this);}if(this.src||(!this.xsUrl&&!this.smUrl&&!this.mdUrl&&!this.lgUrl)){this.el.on('load',this.onImageLoad,this);
-}else{this.el.select('img',true).on('load',this.onImageLoad,this);}},onClick:function(e){Roo.log('img onclick');this.fireEvent('click',this,e);},onImageLoad:function(e){Roo.log('img load');this.fireEvent('load',this,e);},setSrc:function(A){this.src=A;if(this.src||(!this.xsUrl&&!this.smUrl&&!this.mdUrl&&!this.lgUrl)){this.el.dom.src=A;
-return;}this.el.select('img',true).first().dom.src=A;}});
+}}A.cn.push((B.href)?a:D);});return A;},createSingleImg:function(){var A={tag:'img',cls:(this.imgResponsive)?'img-responsive':'',html:null,src:Roo.BLANK_IMAGE_URL};if(this.backgroundContain){A.cls+=' background-contain';}A.html=this.html||A.html;if(this.backgroundContain){A.style="background-image: url("+this.src+')';
+}else{A.src=this.src||A.src;}if(['rounded','circle','thumbnail'].indexOf(this.border)>-1){A.cls+=' img-'+this.border;}if(this.alt){A.alt=this.alt;}if(this.href){var a={tag:'a',href:this.href,cn:[A]};if(this.target){a.target=this.target;}}return (this.href)?a:A;
+},initEvents:function(){if(!this.href){this.el.on('click',this.onClick,this);}if(this.src||(!this.xsUrl&&!this.smUrl&&!this.mdUrl&&!this.lgUrl)){this.el.on('load',this.onImageLoad,this);}else{this.el.select('img',true).on('load',this.onImageLoad,this);}},onClick:function(e){Roo.log('img onclick');
+this.fireEvent('click',this,e);},onImageLoad:function(e){Roo.log('img load');this.fireEvent('load',this,e);},setSrc:function(A){this.src=A;if(this.src||(!this.xsUrl&&!this.smUrl&&!this.mdUrl&&!this.lgUrl)){this.el.dom.src=A;return;}this.el.select('img',true).first().dom.src=A;
+}});
 // Roo/bootstrap/Link.js
 Roo.bootstrap.Link=function(A){Roo.bootstrap.Link.superclass.constructor.call(this,A);this.addEvents({"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 A=this.html||'';
 if(this.fa!==false){A='<i class="fa fa-'+this.fa+'"></i>';}var B={tag:'a'};if(this.anchor===false){B.html=A;B.href=this.href||'#';}else{B.name=this.anchor;if(this.html!==false||this.fa!==false){B.html=A;}if(this.href!==false){B.href=this.href;}}if(this.alt!==false){B.alt=this.alt;