9 * @class Roo.bootstrap.MasonryBrick
10 * @extends Roo.bootstrap.Component
11 * Bootstrap MasonryBrick class
14 * Create a new MasonryBrick
15 * @param {Object} config The config object
18 Roo.bootstrap.MasonryBrick = function(config){
19 Roo.bootstrap.MasonryBrick.superclass.constructor.call(this, config);
25 * When a MasonryBrick is clcik
26 * @param {Roo.bootstrap.MasonryBrick} this
27 * @param {Roo.EventObject} e
33 Roo.extend(Roo.bootstrap.MasonryBrick, Roo.bootstrap.Component, {
44 * @cfg {String} bgimage
48 * @cfg {String} videourl
60 * @cfg {String} (xs|sm|md|md-left|md-right|tall|wide) size
65 * @cfg {String} (center|bottom) placetitle
70 * @cfg {Boolean} isFitContainer defalut true
72 isFitContainer : true,
74 getAutoCreate : function()
76 if(!this.isFitContainer){
77 return this.getSplitAutoCreate();
80 var cls = 'masonry-brick masonry-brick-full';
83 cls += ' masonry-brick-link';
86 if(this.bgimage.length){
87 cls += ' masonry-brick-image';
90 if(!this.html.length){
91 cls += ' enable-mask';
95 cls += ' masonry-' + this.size + '-brick';
98 if(this.placetitle.length){
100 switch (this.placetitle) {
102 cls += ' masonry-center-title';
105 cls += ' masonry-bottom-title';
112 if(!this.html.length && !this.bgimage.length){
113 cls += ' masonry-center-title';
116 if(!this.html.length && this.bgimage.length){
117 cls += ' masonry-bottom-title';
122 cls += ' ' + this.cls;
126 tag: (this.href.length) ? 'a' : 'div',
131 cls: 'masonry-brick-paragraph',
137 if(this.href.length){
138 cfg.href = this.href;
141 var cn = cfg.cn[0].cn;
143 if(this.title.length){
146 cls: 'masonry-brick-title',
151 if(this.html.length){
154 cls: 'masonry-brick-text',
158 if (!this.title.length && !this.html.length) {
159 cfg.cn[0].cls += ' hide';
162 if(this.bgimage.length){
165 cls: 'masonry-brick-image-view',
169 if(this.videourl.length){
170 var vurl = this.videourl.replace(/https:\/\/youtu\.be/, 'https://www.youtube.com/embed/');
171 // youtube support only?
174 cls: 'masonry-brick-image-view',
177 allowfullscreen : true
185 cls: 'masonry-brick-mask'
192 getSplitAutoCreate : function()
194 var cls = 'masonry-brick masonry-brick-split';
196 if(this.href.length){
197 cls += ' masonry-brick-link';
200 if(this.bgimage.length){
201 cls += ' masonry-brick-image';
205 cls += ' masonry-' + this.size + '-brick';
208 switch (this.placetitle) {
210 cls += ' masonry-center-title';
213 cls += ' masonry-bottom-title';
216 if(!this.bgimage.length){
217 cls += ' masonry-center-title';
220 if(this.bgimage.length){
221 cls += ' masonry-bottom-title';
227 cls += ' ' + this.cls;
231 tag: (this.href.length) ? 'a' : 'div',
236 cls: 'masonry-brick-split-head',
240 cls: 'masonry-brick-paragraph',
247 cls: 'masonry-brick-split-body',
253 if(this.href.length){
254 cfg.href = this.href;
257 if(this.title.length){
258 cfg.cn[0].cn[0].cn.push({
260 cls: 'masonry-brick-title',
265 if(this.html.length){
268 cls: 'masonry-brick-text',
273 if(this.bgimage.length){
276 cls: 'masonry-brick-image-view',
281 if(this.videourl.length){
282 var vurl = this.videourl.replace(/https:\/\/youtu\.be/, 'https://www.youtube.com/embed/');
283 // youtube support only?
284 cfg.cn[0].cn.cn.push({
286 cls: 'masonry-brick-image-view',
289 allowfullscreen : true
296 initEvents: function()
333 this.el.on('touchstart', this.onTouchStart, this);
334 this.el.on('touchmove', this.onTouchMove, this);
335 this.el.on('touchend', this.onTouchEnd, this);
336 this.el.on('contextmenu', this.onContextMenu, this);
338 this.el.on('mouseenter' ,this.enter, this);
339 this.el.on('mouseleave', this.leave, this);
342 if (typeof(this.parent().bricks) == 'object' && this.parent().bricks != null) {
343 this.parent().bricks.push(this);
348 onClick: function(e, el)
354 var time = this.endTimer - this.startTimer;
365 enter: function(e, el)
369 if(!this.isFitContainer){
373 if(this.bgimage.length && this.html.length){
374 this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0.9, true);
378 leave: function(e, el)
382 if(!this.isFitContainer){
386 if(this.bgimage.length && this.html.length){
387 this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0, true);
391 onTouchStart: function(e, el)
393 // e.preventDefault();
395 this.touchmoved = false;
397 if(!this.isFitContainer){
401 if(!this.bgimage.length || !this.html.length){
405 this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0.9, true);
407 this.timer = new Date().getTime();
411 onTouchMove: function(e, el)
413 this.touchmoved = true;
416 onContextMenu : function(e,el)
423 onTouchEnd: function(e, el)
425 // e.preventDefault();
427 if((new Date().getTime() - this.timer > 1000) || !this.href.length || this.touchmoved){
434 if(!this.bgimage.length || !this.html.length){
436 if(this.href.length){
437 window.location.href = this.href;
443 if(!this.isFitContainer){
447 this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0, true);
449 window.location.href = this.href;