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){
20 Roo.bootstrap.MasonryBrick.superclass.constructor.call(this, config);
26 * When a MasonryBrick is clcik
27 * @param {Roo.bootstrap.MasonryBrick} this
28 * @param {Roo.EventObject} e
34 Roo.extend(Roo.bootstrap.MasonryBrick, Roo.bootstrap.Component, {
45 * @cfg {String} bgimage
49 * @cfg {String} videourl
61 * @cfg {String} size (xs|sm|md|md-left|md-right|tall|wide)
66 * @cfg {String} placetitle (center|bottom)
71 * @cfg {Boolean} isFitContainer defalut true
73 isFitContainer : true,
76 * @cfg {Boolean} preventDefault defalut false
78 preventDefault : false,
81 * @cfg {Boolean} inverse defalut false
85 getAutoCreate : function()
87 if(!this.isFitContainer){
88 return this.getSplitAutoCreate();
91 var cls = 'masonry-brick masonry-brick-full';
94 cls += ' masonry-brick-link';
97 if(this.bgimage.length){
98 cls += ' masonry-brick-image';
101 if(this.maskInverse){
102 cls += ' mask-inverse';
105 if(!this.html.length && !this.maskInverse){
106 cls += ' enable-mask';
110 cls += ' masonry-' + this.size + '-brick';
113 if(this.placetitle.length){
115 switch (this.placetitle) {
117 cls += ' masonry-center-title';
120 cls += ' masonry-bottom-title';
127 if(!this.html.length && !this.bgimage.length){
128 cls += ' masonry-center-title';
131 if(!this.html.length && this.bgimage.length){
132 cls += ' masonry-bottom-title';
137 cls += ' ' + this.cls;
141 tag: (this.href.length) ? 'a' : 'div',
146 cls: 'masonry-brick-paragraph',
152 if(this.href.length){
153 cfg.href = this.href;
156 var cn = cfg.cn[0].cn;
158 if(this.title.length){
161 cls: 'masonry-brick-title',
166 if(this.html.length){
169 cls: 'masonry-brick-text',
173 if (!this.title.length && !this.html.length) {
174 cfg.cn[0].cls += ' hide';
177 if(this.bgimage.length){
180 cls: 'masonry-brick-image-view',
185 if(this.videourl.length){
186 var vurl = this.videourl.replace(/https:\/\/youtu\.be/, 'https://www.youtube.com/embed/');
187 // youtube support only?
190 cls: 'masonry-brick-image-view',
193 allowfullscreen : true
201 cls: 'masonry-brick-mask'
208 getSplitAutoCreate : function()
210 var cls = 'masonry-brick masonry-brick-split';
212 if(this.href.length){
213 cls += ' masonry-brick-link';
216 if(this.bgimage.length){
217 cls += ' masonry-brick-image';
221 cls += ' masonry-' + this.size + '-brick';
224 switch (this.placetitle) {
226 cls += ' masonry-center-title';
229 cls += ' masonry-bottom-title';
232 if(!this.bgimage.length){
233 cls += ' masonry-center-title';
236 if(this.bgimage.length){
237 cls += ' masonry-bottom-title';
243 cls += ' ' + this.cls;
247 tag: (this.href.length) ? 'a' : 'div',
252 cls: 'masonry-brick-split-head',
256 cls: 'masonry-brick-paragraph',
263 cls: 'masonry-brick-split-body',
269 if(this.href.length){
270 cfg.href = this.href;
273 if(this.title.length){
274 cfg.cn[0].cn[0].cn.push({
276 cls: 'masonry-brick-title',
281 if(this.html.length){
284 cls: 'masonry-brick-text',
289 if(this.bgimage.length){
292 cls: 'masonry-brick-image-view',
297 if(this.videourl.length){
298 var vurl = this.videourl.replace(/https:\/\/youtu\.be/, 'https://www.youtube.com/embed/');
299 // youtube support only?
300 cfg.cn[0].cn.cn.push({
302 cls: 'masonry-brick-image-view',
305 allowfullscreen : true
312 initEvents: function()
347 this.el.on('touchstart', this.onTouchStart, this);
348 this.el.on('touchmove', this.onTouchMove, this);
349 this.el.on('touchend', this.onTouchEnd, this);
350 this.el.on('contextmenu', this.onContextMenu, this);
352 this.el.on('mouseenter' ,this.enter, this);
353 this.el.on('mouseleave', this.leave, this);
354 this.el.on('click', this.onClick, this);
357 if (typeof(this.parent().bricks) == 'object' && this.parent().bricks != null) {
358 this.parent().bricks.push(this);
363 onClick: function(e, el)
365 var time = this.endTimer - this.startTimer;
366 // Roo.log(e.preventDefault());
374 if(!this.preventDefault){
380 if (this.activcClass != '') {
384 this.fireEvent('click', this);
387 enter: function(e, el)
391 if(!this.isFitContainer || this.maskInverse){
395 if(this.bgimage.length && this.html.length){
396 this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0.9, true);
400 leave: function(e, el)
404 if(!this.isFitContainer || this.maskInverse){
408 if(this.bgimage.length && this.html.length){
409 this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0, true);
413 onTouchStart: function(e, el)
415 // e.preventDefault();
417 this.touchmoved = false;
419 if(!this.isFitContainer){
423 if(!this.bgimage.length || !this.html.length){
427 this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0.9, true);
429 this.timer = new Date().getTime();
433 onTouchMove: function(e, el)
435 this.touchmoved = true;
438 onContextMenu : function(e,el)
445 onTouchEnd: function(e, el)
447 // e.preventDefault();
449 if((new Date().getTime() - this.timer > 1000) || !this.href.length || this.touchmoved){
456 if(!this.bgimage.length || !this.html.length){
458 if(this.href.length){
459 window.location.href = this.href;
465 if(!this.isFitContainer){
469 this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0, true);
471 window.location.href = this.href;
474 selectBrick : function() {
476 if (!this.parentId) {
480 var m = Roo.bootstrap.LayoutMasonry.get(this.parentId);
481 var index = m.selectedBrick.indexOf(this.id);
484 m.selectedBrick.splice(index,1);
485 this.el.removeClass(this.activeClass);
489 m.selectedBrick.push(this.id);
490 this.el.addClass(this.activeClass);