9 * @class Roo.bootstrap.Brick
10 * @extends Roo.bootstrap.Component
11 * Bootstrap Brick class
15 * @param {Object} config The config object
18 Roo.bootstrap.Brick = function(config){
19 Roo.bootstrap.Brick.superclass.constructor.call(this, config);
25 * When a Brick is click
26 * @param {Roo.bootstrap.Brick} this
27 * @param {Roo.EventObject} e
33 Roo.extend(Roo.bootstrap.Brick, Roo.bootstrap.Component, {
44 * @cfg {String} bgimage
60 * @cfg {Boolean} square
64 getAutoCreate : function()
66 var cls = 'roo-brick';
69 cls += ' roo-brick-link';
72 if(this.bgimage.length){
73 cls += ' roo-brick-image';
76 if(!this.html.length && !this.bgimage.length){
77 cls += ' roo-brick-center-title';
80 if(!this.html.length && this.bgimage.length){
81 cls += ' roo-brick-bottom-title';
85 cls += ' ' + this.cls;
89 tag: (this.href.length) ? 'a' : 'div',
94 cls: 'roo-brick-paragraph',
100 if(this.href.length){
101 cfg.href = this.href;
104 var cn = cfg.cn[0].cn;
106 if(this.title.length){
109 cls: 'roo-brick-title',
114 if(this.html.length){
117 cls: 'roo-brick-text',
122 if(this.bgimage.length){
125 cls: 'roo-brick-image-view',
133 initEvents: function()
135 if(this.title.length || this.html.length){
136 this.el.on('mouseenter' ,this.enter, this);
137 this.el.on('mouseleave', this.leave, this);
141 Roo.EventManager.onWindowResize(this.resize, this);
148 var paragraph = this.el.select('.roo-brick-paragraph', true).first();
149 // paragraph.setHeight(paragraph.getWidth() + paragraph.getPadding('tb'));
150 paragraph.setHeight(paragraph.getWidth());
152 if(this.bgimage.length){
153 var image = this.el.select('.roo-brick-image-view', true).first();
154 image.setWidth(paragraph.getWidth());
155 image.setHeight(paragraph.getHeight());
160 enter: function(e, el)
164 if(this.bgimage.length){
165 this.el.select('.roo-brick-paragraph', true).first().setOpacity(0.9, true);
166 this.el.select('.roo-brick-image-view', true).first().setOpacity(0.1, true);
170 leave: function(e, el)
174 if(this.bgimage.length){
175 this.el.select('.roo-brick-paragraph', true).first().setOpacity(0, true);
176 this.el.select('.roo-brick-image-view', true).first().setOpacity(1, true);