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: '',
  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         Roo.log('run?????????????????????');
  67         Roo.log(this.lgUrl);
  68
  69         Roo.each(['xsUrl', 'smUrl', 'mdUrl', 'lgUrl'], function(size){
  70             Roo.log(size);
  71             Roo.log(this[size]);
  72             if(!this[size]){
  73                 return;
  74             }
  75
  76             var img = {
  77                 tag: 'img',
  78                 cls: (this.imgResponsive) ? 'img-responsive' : '',
  79                 html: this.html || cfg.html,
  80                 src: this[size]
  81             }
  82
  83             img.cls += ' roo-image-responsive-' + size;
  84
  85             if (['rounded','circle','thumbnail'].indexOf(this.border)>-1) {
  86                 cfg.cls += ' img-' + this.border;
  87             }
  88
  89             if(this.alt){
  90                 cfg.alt = this.alt;
  91             }
  92
  93             if(this.href){
  94                 var a = {
  95                     tag: 'a',
  96                     href: this.href,
  97                     cn: [
  98                         img
  99                     ]
 100                 }
 101
 102                 if(this.target){
 103                     a.target = this.target;
 104                 }
 105             }
 106
 107             cfg.cn.push((this.href) ? a : img);
 108
 109         });
 110
 111         return cfg;
 112     },
 113
 114     createSingleImg : function()
 115     {
 116         var cfg = {
 117             tag: 'img',
 118             cls: (this.imgResponsive) ? 'img-responsive' : '',
 119             html : null
 120         }
 121
 122         cfg.html = this.html || cfg.html;
 123
 124         cfg.src = this.src || cfg.src;
 125
 126         if (['rounded','circle','thumbnail'].indexOf(this.border)>-1) {
 127             cfg.cls += ' img-' + this.border;
 128         }
 129
 130         if(this.alt){
 131             cfg.alt = this.alt;
 132         }
 133
 134         if(this.href){
 135             var a = {
 136                 tag: 'a',
 137                 href: this.href,
 138                 cn: [
 139                     cfg
 140                 ]
 141             }
 142
 143             if(this.target){
 144                 a.target = this.target;
 145             }
 146
 147         }
 148
 149         return (this.href) ? a : cfg;
 150     },
 151
 152     initEvents: function() {
 153
 154         if(!this.href){
 155             this.el.on('click', this.onClick, this);
 156         }
 157     },
 158
 159     onClick : function(e)
 160     {
 161         Roo.log('img onclick');
 162         this.fireEvent('click', this, e);
 163     }
 164
 165 });
 166
 167