});
};
-Roo.extend(Roo.bootstrap.MasonryBrick, Roo.bootstrap.Component, {
+Roo.extend(Roo.bootstrap.Brick, Roo.bootstrap.Component, {
/**
* @cfg {String} title
cls += ' roo-brick-image';
}
+ if(!this.html.length && !this.bgimage.length){
+ cls += ' roo-brick-center-title';
+ }
+
+ if(!this.html.length && this.bgimage.length){
+ cls += ' roo-brick-bottom-title';
+ }
+
if(this.cls){
cls += ' ' + this.cls;
}
cls: 'roo-brick-text',
html: this.html
});
+ } else {
+ cn.cls += ' hide';
}
if(this.bgimage.length){
cfg.cn.push({
tag: 'img',
- cls: 'masonry-brick-image-view',
+ cls: 'roo-brick-image-view',
src: this.bgimage
});
}
initEvents: function()
{
- this.intSize = 1;
-
- switch (this.size) {
- case 'xs' :
- this.intSize = 1;
- break;
- case 'sm' :
- this.intSize = 2;
- break;
- case 'md' :
- this.intSize = 3;
- break;
- default :
- break;
+ if(this.title.length || this.html.length){
+ this.el.on('mouseenter' ,this.enter, this);
+ this.el.on('mouseleave', this.leave, this);
}
- this.el.on('mouseenter' ,this.enter, this);
- this.el.on('mouseleave', this.leave, this);
+ Roo.EventManager.onWindowResize(this.resize, this);
- this.parent().bricks.push(this);
+ if(this.bgimage.length){
+ this.imageEl = this.el.select('.roo-brick-image-view', true).first();
+ this.imageEl.on('load', this.onImageLoad, this);
+ return;
+ }
+ this.resize();
+ },
+
+ onImageLoad : function()
+ {
+ this.resize();
},
resize : function()
{
- var paragraph = this.el.select('.masonry-brick-paragraph', true).first();
+ var paragraph = this.el.select('.roo-brick-paragraph', true).first();
+
paragraph.setHeight(paragraph.getWidth() + paragraph.getPadding('tb'));
+
+ if(this.bgimage.length){
+ var image = this.el.select('.roo-brick-image-view', true).first();
+
+ image.setWidth(paragraph.getWidth());
+
+ if(this.square){
+ image.setHeight(paragraph.getWidth());
+ }
+
+ this.el.setHeight(image.getHeight());
+ paragraph.setHeight(image.getHeight());
+
+ }
+
},
enter: function(e, el)
e.preventDefault();
if(this.bgimage.length){
- this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0.9, true);
+ this.el.select('.roo-brick-paragraph', true).first().setOpacity(0.9, true);
+ this.el.select('.roo-brick-image-view', true).first().setOpacity(0.1, true);
}
},
e.preventDefault();
if(this.bgimage.length){
- this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0, true);
+ this.el.select('.roo-brick-paragraph', true).first().setOpacity(0, true);
+ this.el.select('.roo-brick-image-view', true).first().setOpacity(1, true);
}
}