add docblock for password

[roojs1] / Roo / bootstrap / Img.js

diff --git a/Roo/bootstrap/Img.js b/Roo/bootstrap/Img.js
index bab4684..7ab4cb6 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
@@ -36,7 +37,13 @@ Roo.bootstrap.Img = function(config){
          * The img click event for the img.
          * @param {Roo.EventObject} e
          */
-        "click" : true
+        "click" : true,
+        /**
+         * @event load
+         * The when any image loads
+         * @param {Roo.EventObject} e
+         */
+        "load" : true
     });
 };
 
@@ -44,13 +51,14 @@ Roo.extend(Roo.bootstrap.Img, Roo.bootstrap.Component,  {
     
     imgResponsive: true,
     border: '',
-    src: '',
+    src: 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=',
     href: false,
     target: false,
     xsUrl: '',
     smUrl: '',
     mdUrl: '',
     lgUrl: '',
+    backgroundContain : false,
 
     getAutoCreate : function()
     {   
@@ -62,11 +70,12 @@ Roo.extend(Roo.bootstrap.Img, Roo.bootstrap.Component,  {
             tag: 'div',
             cls: 'roo-image-responsive-group',
             cn: []
-        }
+        };
         var _this = this;
         
-        Roo.each(['xsUrl', 'smUrl', 'mdUrl', 'lgUrl'], function(size){
-            if(!_this[size]){
+        Roo.each(['xs', 'sm', 'md', 'lg'], function(size){
+            
+            if(!_this[size + 'Url']){
                 return;
             }
             
@@ -74,11 +83,19 @@ Roo.extend(Roo.bootstrap.Img, Roo.bootstrap.Component,  {
                 tag: 'img',
                 cls: (_this.imgResponsive) ? 'img-responsive' : '',
                 html: _this.html || cfg.html,
-                src: _this[size]
-            }
+                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;
             }
@@ -94,7 +111,7 @@ Roo.extend(Roo.bootstrap.Img, Roo.bootstrap.Component,  {
                     cn: [
                         img
                     ]
-                }
+                };
 
                 if(this.target){
                     a.target = _this.target;
@@ -113,12 +130,21 @@ Roo.extend(Roo.bootstrap.Img, Roo.bootstrap.Component,  {
         var cfg = {
             tag: 'img',
             cls: (this.imgResponsive) ? 'img-responsive' : '',
-            html : null
+            html : null,
+            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;
@@ -133,9 +159,9 @@ Roo.extend(Roo.bootstrap.Img, Roo.bootstrap.Component,  {
                 tag: 'a',
                 href: this.href,
                 cn: [
-                   cfg
-               ]
-            }
+                    cfg
+                ]
+            };
             
             if(this.target){
                 a.target = this.target;
@@ -146,18 +172,53 @@ Roo.extend(Roo.bootstrap.Img, Roo.bootstrap.Component,  {
         return (this.href) ? a : cfg;
     },
     
-    initEvents: function() {
-        
+    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 {
+            // not sure if this works.. not tested
+            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);
+    },
+    
+    /**
+     * 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)){
+            if (this.backgroundContain) {
+                this.el.dom.style.backgroundImage =  'url(' + url + ')';
+            } else {
+                this.el.dom.src =  url;
+            }
+            return;
+        }
+        
+        this.el.select('img', true).first().dom.src =  url;
     }
+    
+    
    
 });