Roo/bootstrap/Img.js
[roojs1] / 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         Roo.log(this);
58         if(this.src || (!this.xsUrl && !this.smUrl && !this.mdUrl && !this.lgUrl)){
59             return this.createSingleImg();
60         }
61         
62         var cfg = {
63             tag: 'div',
64             cls: 'roo-image-responsive-group',
65             cn: []
66         }
67         var _this = this;
68         
69         Roo.each(['xs', 'sm', 'md', 'lg'], function(size){
70             
71             if(!_this[size + 'Url']){
72                 return;
73             }
74             
75             var img = {
76                 tag: 'img',
77                 cls: (_this.imgResponsive) ? 'img-responsive' : '',
78                 html: _this.html || cfg.html,
79                 src: _this[size + 'Url']
80             }
81             
82             img.cls += ' roo-image-responsive-' + size;
83             
84             var s = ['xs', 'sm', 'md', 'lg'];
85             
86             s.splice(s.indexOf(size), 1);
87             
88             Roo.each(s, function(ss){
89                 img.cls += ' hidden-' + ss;
90             });
91             
92             if (['rounded','circle','thumbnail'].indexOf(_this.border)>-1) {
93                 cfg.cls += ' img-' + _this.border;
94             }
95             
96             if(_this.alt){
97                 cfg.alt = _this.alt;
98             }
99             
100             if(_this.href){
101                 var a = {
102                     tag: 'a',
103                     href: _this.href,
104                     cn: [
105                         img
106                     ]
107                 }
108
109                 if(this.target){
110                     a.target = _this.target;
111                 }
112             }
113             
114             cfg.cn.push((_this.href) ? a : img);
115             
116         });
117         
118         return cfg;
119     },
120     
121     createSingleImg : function()
122     {
123         var cfg = {
124             tag: 'img',
125             cls: (this.imgResponsive) ? 'img-responsive' : '',
126             html : null
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 });
174
175