git.roojs.org Git - roojs1/blob - Roo/bootstrap/Img.js

   1 /*
   2  * - LGPL
   3  *
   4  * image
   5  *
   6  */
   7
   8
   9 /**
  10  * @class Roo.bootstrap.Img
  11  * @extends Roo.bootstrap.Component
  12  * Bootstrap Img class
  13  * @cfg {Boolean} imgResponsive false | true
  14  * @cfg {String} border rounded | circle | thumbnail
  15  * @cfg {String} src image source
  16  * @cfg {String} alt image alternative text
  17  * @cfg {String} href a tag href
  18  * @cfg {String} target (_self|_blank|_parent|_top)target for a href.
  19  * @cfg {String} xsUrl xs image source
  20  * @cfg {String} smUrl sm image source
  21  * @cfg {String} mdUrl md image source
  22  * @cfg {String} lgUrl lg image source
  23  *
  24  * @constructor
  25  * Create a new Input
  26  * @param {Object} config The config object
  27  */
  28
  29 Roo.bootstrap.Img = function(config){
  30     Roo.bootstrap.Img.superclass.constructor.call(this, config);
  31
  32     this.addEvents({
  33         // img events
  34         /**
  35          * @event click
  36          * The img click event for the img.
  37          * @param {Roo.EventObject} e
  38          */
  39         "click" : true,
  40         /**
  41          * @event load
  42          * The when any image loads
  43          * @param {Roo.EventObject} e
  44          */
  45         "load" : true
  46     });
  47 };
  48
  49 Roo.extend(Roo.bootstrap.Img, Roo.bootstrap.Component,  {
  50
  51     imgResponsive: true,
  52     border: '',
  53     src: 'about:blank',
  54     href: false,
  55     target: false,
  56     xsUrl: '',
  57     smUrl: '',
  58     mdUrl: '',
  59     lgUrl: '',
  60
  61     getAutoCreate : function()
  62     {
  63         if(this.src || (!this.xsUrl && !this.smUrl && !this.mdUrl && !this.lgUrl)){
  64             return this.createSingleImg();
  65         }
  66
  67         var cfg = {
  68             tag: 'div',
  69             cls: 'roo-image-responsive-group',
  70             cn: []
  71         };
  72         var _this = this;
  73
  74         Roo.each(['xs', 'sm', 'md', 'lg'], function(size){
  75
  76             if(!_this[size + 'Url']){
  77                 return;
  78             }
  79
  80             var img = {
  81                 tag: 'img',
  82                 cls: (_this.imgResponsive) ? 'img-responsive' : '',
  83                 html: _this.html || cfg.html,
  84                 src: _this[size + 'Url']
  85             };
  86
  87             img.cls += ' roo-image-responsive-' + size;
  88
  89             var s = ['xs', 'sm', 'md', 'lg'];
  90
  91             s.splice(s.indexOf(size), 1);
  92
  93             Roo.each(s, function(ss){
  94                 img.cls += ' hidden-' + ss;
  95             });
  96
  97             if (['rounded','circle','thumbnail'].indexOf(_this.border)>-1) {
  98                 cfg.cls += ' img-' + _this.border;
  99             }
 100
 101             if(_this.alt){
 102                 cfg.alt = _this.alt;
 103             }
 104
 105             if(_this.href){
 106                 var a = {
 107                     tag: 'a',
 108                     href: _this.href,
 109                     cn: [
 110                         img
 111                     ]
 112                 };
 113
 114                 if(this.target){
 115                     a.target = _this.target;
 116                 }
 117             }
 118
 119             cfg.cn.push((_this.href) ? a : img);
 120
 121         });
 122
 123         return cfg;
 124     },
 125
 126     createSingleImg : function()
 127     {
 128         var cfg = {
 129             tag: 'img',
 130             cls: (this.imgResponsive) ? 'img-responsive' : '',
 131             html : null,
 132             src : 'about:blank'  // just incase src get's set to undefined?!?
 133         };
 134
 135         cfg.html = this.html || cfg.html;
 136
 137         cfg.src = this.src || cfg.src;
 138
 139         if (['rounded','circle','thumbnail'].indexOf(this.border)>-1) {
 140             cfg.cls += ' img-' + this.border;
 141         }
 142
 143         if(this.alt){
 144             cfg.alt = this.alt;
 145         }
 146
 147         if(this.href){
 148             var a = {
 149                 tag: 'a',
 150                 href: this.href,
 151                 cn: [
 152                     cfg
 153                 ]
 154             };
 155
 156             if(this.target){
 157                 a.target = this.target;
 158             }
 159
 160         }
 161
 162         return (this.href) ? a : cfg;
 163     },
 164
 165     initEvents: function()
 166     {
 167         if(!this.href){
 168             this.el.on('click', this.onClick, this);
 169         }
 170         this.el.select('img', true).on('load', this.onImageLoad, this);
 171     },
 172
 173     onClick : function(e)
 174     {
 175         Roo.log('img onclick');
 176         this.fireEvent('click', this, e);
 177     },
 178     onImageLoad: function(e)
 179     {
 180         Roo.log('img load');
 181         this.fireEvent('load', this, e);
 182     },
 183
 184     /**
 185      * Sets the url of the image - used to update it
 186      * @param {String} url the url of the image
 187      */
 188
 189     setSrc : function(url)
 190     {
 191         this.src =  url;
 192
 193         if(this.src || (!this.xsUrl && !this.smUrl && !this.mdUrl && !this.lgUrl)){
 194             this.el.dom.src =  url;
 195             return;
 196         }
 197
 198         this.el.select('img', true).first().dom.src =  url;
 199     }
 200
 201
 202
 203 });
 204
 205