sync

[roojs1] / Roo / bootstrap / Img.js

diff --git a/Roo/bootstrap/Img.js b/Roo/bootstrap/Img.js
index 317ef26..0226544 100644 (file)
--- a/Roo/bootstrap/Img.js
+++ b/Roo/bootstrap/Img.js
@@ -1,19 +1,25 @@
 /*
  * - LGPL
  *
- * page contgainer.
+ * image
  * 
  */
 
 
 /**
- * @class Roo.bootstrap.ButtonGroup
+ * @class Roo.bootstrap.Img
  * @extends Roo.bootstrap.Component
- * Bootstrap ButtonGroup class
- * @cfg {string} size lg | sm | xs (default empty normal)
- * @cfg {string} align vertical | justified  (default none)
- * @cfg {string} direction up | down (default down)
- * 
+ * 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 Input
@@ -22,26 +28,177 @@
 
 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,
+        /**
+         * @event load
+         * The when any image loads
+         * @param {Roo.EventObject} e
+         */
+        "load" : true
+    });
 };
 
 Roo.extend(Roo.bootstrap.Img, Roo.bootstrap.Component,  {
     
     imgResponsive: true,
     border: '',
-    
-    autoCreate : {
-        cls: 'img-responsive',
-        html : null
-    },
+    src: 'about:blank',
+    href: false,
+    target: false,
+    xsUrl: '',
+    smUrl: '',
+    mdUrl: '',
+    lgUrl: '',
 
-    getAutoCreate : function(){
+    getAutoCreate : function()
+    {   
+        if(this.src || (!this.xsUrl && !this.smUrl && !this.mdUrl && !this.lgUrl)){
+            return this.createSingleImg();
+        }
         
-        var cfg = Roo.apply({}, Roo.bootstrap.Img.superclass.getAutoCreate.call(this));
+        var cfg = {
+            tag: 'div',
+            cls: 'roo-image-responsive-group',
+            cn: []
+        };
+        var _this = this;
         
-        cfg.html = this.html || cfg.html;
+        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);
+        }
+        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)){
+            this.el.dom.src =  url;
+            return;
+        }
+        
+        this.el.select('img', true).first().dom.src =  url;
     }
+    
+    
    
 });