* @cfg {String} smUrl sm image source
* @cfg {String} mdUrl md image source
* @cfg {String} lgUrl lg image source
+ * @cfg {Boolean} backgroundContain (use style background and contain image in content)
*
* @constructor
* Create a new Input
* The img click event for the img.
* @param {Roo.EventObject} e
*/
- "click" : true
+ "click" : true,
+ /**
+ * @event load
+ * The when any image loads
+ * @param {Roo.EventObject} e
+ */
+ "load" : true
});
};
imgResponsive: true,
border: '',
- src: '',
+ src: 'about:blank',
href: false,
target: false,
xsUrl: '',
smUrl: '',
mdUrl: '',
lgUrl: '',
+ backgroundContain : false,
getAutoCreate : function()
{
tag: 'div',
cls: 'roo-image-responsive-group',
cn: []
- }
- Roo.log('run?????????????????????');
- Roo.log(this.lgUrl);
+ };
+ var _this = this;
- Roo.each(['xsUrl', 'smUrl', 'mdUrl', 'lgUrl'], function(size){
- Roo.log(size);
- Roo.log(this[size]);
- if(!this[size]){
+ 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]
- }
+ cls: (_this.imgResponsive) ? 'img-responsive' : '',
+ html: _this.html || cfg.html,
+ src: _this[size + 'Url']
+ };
img.cls += ' roo-image-responsive-' + size;
- if (['rounded','circle','thumbnail'].indexOf(this.border)>-1) {
- cfg.cls += ' img-' + this.border;
+ 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.alt){
+ cfg.alt = _this.alt;
}
- if(this.href){
+ if(_this.href){
var a = {
tag: 'a',
- href: this.href,
+ href: _this.href,
cn: [
img
]
- }
+ };
if(this.target){
- a.target = this.target;
+ a.target = _this.target;
}
}
- cfg.cn.push((this.href) ? a : img);
+ cfg.cn.push((_this.href) ? a : img);
});
var cfg = {
tag: 'img',
cls: (this.imgResponsive) ? 'img-responsive' : '',
- html : null
+ html : null,
+ src : Roo.BLANK_IMAGE_URL // just incase src get's set to undefined?!?
+ };
+
+ if (this.backgroundContain) {
+ cfg.cls += ' background-contain';
}
cfg.html = this.html || cfg.html;
- cfg.src = this.src || cfg.src;
+ if (this.backgroundContain) {
+ cfg.style="background-image: url(" + this.src + ')';
+ } else {
+ cfg.src = this.src || cfg.src;
+ }
if (['rounded','circle','thumbnail'].indexOf(this.border)>-1) {
cfg.cls += ' img-' + this.border;
tag: 'a',
href: this.href,
cn: [
- cfg
- ]
- }
+ cfg
+ ]
+ };
if(this.target){
a.target = this.target;
return (this.href) ? a : cfg;
},
- initEvents: function() {
-
+ initEvents: function()
+ {
if(!this.href){
this.el.on('click', this.onClick, this);
}
+ if(this.src || (!this.xsUrl && !this.smUrl && !this.mdUrl && !this.lgUrl)){
+ this.el.on('load', this.onImageLoad, this);
+ } else {
+ // not sure if this works.. not tested
+ 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)){
+ if (this.backgroundContain) {
+ this.el.dom.style.backgroundImage = 'url(' + url + ')';
+ } else {
+ this.el.dom.src = url;
+ }
+ return;
+ }
+
+ this.el.select('img', true).first().dom.src = url;
}
+
+
});