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,
75 * @cfg {Boolean} preventDefault defalut false
77 preventDefault : false,
79 getAutoCreate : function()
81 if(!this.isFitContainer){
82 return this.getSplitAutoCreate();
85 var cls = 'masonry-brick masonry-brick-full';
88 cls += ' masonry-brick-link';
91 if(this.bgimage.length){
92 cls += ' masonry-brick-image';
95 if(!this.html.length){
96 cls += ' enable-mask';
100 cls += ' masonry-' + this.size + '-brick';
103 if(this.placetitle.length){
105 switch (this.placetitle) {
107 cls += ' masonry-center-title';
110 cls += ' masonry-bottom-title';
117 if(!this.html.length && !this.bgimage.length){
118 cls += ' masonry-center-title';
121 if(!this.html.length && this.bgimage.length){
122 cls += ' masonry-bottom-title';
127 cls += ' ' + this.cls;
131 tag: (this.href.length) ? 'a' : 'div',
136 cls: 'masonry-brick-paragraph',
142 if(this.href.length){
143 cfg.href = this.href;
146 var cn = cfg.cn[0].cn;
148 if(this.title.length){
151 cls: 'masonry-brick-title',
156 if(this.html.length){
159 cls: 'masonry-brick-text',
163 if (!this.title.length && !this.html.length) {
164 cfg.cn[0].cls += ' hide';
167 if(this.bgimage.length){
170 cls: 'masonry-brick-image-view',
175 if(this.videourl.length){
176 var vurl = this.videourl.replace(/https:\/\/youtu\.be/, 'https://www.youtube.com/embed/');
177 // youtube support only?
180 cls: 'masonry-brick-image-view',
183 allowfullscreen : true
191 cls: 'masonry-brick-mask'
198 getSplitAutoCreate : function()
200 var cls = 'masonry-brick masonry-brick-split';
202 if(this.href.length){
203 cls += ' masonry-brick-link';
206 if(this.bgimage.length){
207 cls += ' masonry-brick-image';
211 cls += ' masonry-' + this.size + '-brick';
214 switch (this.placetitle) {
216 cls += ' masonry-center-title';
219 cls += ' masonry-bottom-title';
222 if(!this.bgimage.length){
223 cls += ' masonry-center-title';
226 if(this.bgimage.length){
227 cls += ' masonry-bottom-title';
233 cls += ' ' + this.cls;
237 tag: (this.href.length) ? 'a' : 'div',
242 cls: 'masonry-brick-split-head',
246 cls: 'masonry-brick-paragraph',
253 cls: 'masonry-brick-split-body',
259 if(this.href.length){
260 cfg.href = this.href;
263 if(this.title.length){
264 cfg.cn[0].cn[0].cn.push({
266 cls: 'masonry-brick-title',
271 if(this.html.length){
274 cls: 'masonry-brick-text',
279 if(this.bgimage.length){
282 cls: 'masonry-brick-image-view',
287 if(this.videourl.length){
288 var vurl = this.videourl.replace(/https:\/\/youtu\.be/, 'https://www.youtube.com/embed/');
289 // youtube support only?
290 cfg.cn[0].cn.cn.push({
292 cls: 'masonry-brick-image-view',
295 allowfullscreen : true
302 initEvents: function()
337 this.el.on('touchstart', this.onTouchStart, this);
338 this.el.on('touchmove', this.onTouchMove, this);
339 this.el.on('touchend', this.onTouchEnd, this);
340 this.el.on('contextmenu', this.onContextMenu, this);
342 this.el.on('mouseenter' ,this.enter, this);
343 this.el.on('mouseleave', this.leave, this);
344 this.el.on('click', this.onClick, this);
347 if (typeof(this.parent().bricks) == 'object' && this.parent().bricks != null) {
348 this.parent().bricks.push(this);
353 onClick: function(e, el)
357 var time = this.endTimer - this.startTimer;
366 if(!this.preventDefault){
371 this.fireEvent('click', this);
374 enter: function(e, el)
378 if(!this.isFitContainer){
382 if(this.bgimage.length && this.html.length){
383 this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0.9, true);
387 leave: function(e, el)
391 if(!this.isFitContainer){
395 if(this.bgimage.length && this.html.length){
396 this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0, true);
400 onTouchStart: function(e, el)
402 // e.preventDefault();
404 this.touchmoved = false;
406 if(!this.isFitContainer){
410 if(!this.bgimage.length || !this.html.length){
414 this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0.9, true);
416 this.timer = new Date().getTime();
420 onTouchMove: function(e, el)
422 this.touchmoved = true;
425 onContextMenu : function(e,el)
432 onTouchEnd: function(e, el)
434 // e.preventDefault();
436 if((new Date().getTime() - this.timer > 1000) || !this.href.length || this.touchmoved){
443 if(!this.bgimage.length || !this.html.length){
445 if(this.href.length){
446 window.location.href = this.href;
452 if(!this.isFitContainer){
456 this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0, true);
458 window.location.href = this.href;