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 };
  42
  43 Roo.extend(Roo.bootstrap.Img, Roo.bootstrap.Component,  {
  44
  45     imgResponsive: true,
  46     border: '',
  47     src: 'about:blank',
  48     href: false,
  49     target: false,
  50     xsUrl: '',
  51     smUrl: '',
  52     mdUrl: '',
  53     lgUrl: '',
  54
  55     getAutoCreate : function()
  56     {
  57         if(this.src || (!this.xsUrl && !this.smUrl && !this.mdUrl && !this.lgUrl)){
  58             return this.createSingleImg();
  59         }
  60
  61         var cfg = {
  62             tag: 'div',
  63             cls: 'roo-image-responsive-group',
  64             cn: []
  65         };
  66         var _this = this;
  67
  68         Roo.each(['xs', 'sm', 'md', 'lg'], function(size){
  69
  70             if(!_this[size + 'Url']){
  71                 return;
  72             }
  73
  74             var img = {
  75                 tag: 'img',
  76                 cls: (_this.imgResponsive) ? 'img-responsive' : '',
  77                 html: _this.html || cfg.html,
  78                 src: _this[size + 'Url']
  79             };
  80
  81             img.cls += ' roo-image-responsive-' + size;
  82
  83             var s = ['xs', 'sm', 'md', 'lg'];
  84
  85             s.splice(s.indexOf(size), 1);
  86
  87             Roo.each(s, function(ss){
  88                 img.cls += ' hidden-' + ss;
  89             });
  90
  91             if (['rounded','circle','thumbnail'].indexOf(_this.border)>-1) {
  92                 cfg.cls += ' img-' + _this.border;
  93             }
  94
  95             if(_this.alt){
  96                 cfg.alt = _this.alt;
  97             }
  98
  99             if(_this.href){
 100                 var a = {
 101                     tag: 'a',
 102                     href: _this.href,
 103                     cn: [
 104                         img
 105                     ]
 106                 };
 107
 108                 if(this.target){
 109                     a.target = _this.target;
 110                 }
 111             }
 112
 113             cfg.cn.push((_this.href) ? a : img);
 114
 115         });
 116
 117         return cfg;
 118     },
 119
 120     createSingleImg : function()
 121     {
 122         var cfg = {
 123             tag: 'img',
 124             cls: (this.imgResponsive) ? 'img-responsive' : '',
 125             html : null,
 126             src : 'about:blank'  // just incase src get's set to undefined?!?
 127         };
 128
 129         cfg.html = this.html || cfg.html;
 130
 131         cfg.src = this.src || cfg.src;
 132
 133         if (['rounded','circle','thumbnail'].indexOf(this.border)>-1) {
 134             cfg.cls += ' img-' + this.border;
 135         }
 136
 137         if(this.alt){
 138             cfg.alt = this.alt;
 139         }
 140
 141         if(this.href){
 142             var a = {
 143                 tag: 'a',
 144                 href: this.href,
 145                 cn: [
 146                     cfg
 147                 ]
 148             };
 149
 150             if(this.target){
 151                 a.target = this.target;
 152             }
 153
 154         }
 155
 156         return (this.href) ? a : cfg;
 157     },
 158
 159     initEvents: function()
 160     {
 161         if(!this.href){
 162             this.el.on('click', this.onClick, this);
 163         }
 164
 165     },
 166
 167     onClick : function(e)
 168     {
 169         Roo.log('img onclick');
 170         this.fireEvent('click', this, e);
 171     },
 172     /**
 173      * Sets the url of the image - used to update it
 174      * @param {String} url the url of the image
 175      */
 176
 177     setSrc : function(url)
 178     {
 179         this.src =  url;
 180
 181         if(this.src || (!this.xsUrl && !this.smUrl && !this.mdUrl && !this.lgUrl)){
 182             this.el.dom.src =  url;
 183             return;
 184         }
 185
 186         this.el.select('img', true).first().dom.src =  url;
 187     }
 188
 189
 190
 191 });
 192
 193