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);
22 Roo.bootstrap.MasonryBrick.register(this);
28 * When a MasonryBrick is clcik
29 * @param {Roo.bootstrap.MasonryBrick} this
30 * @param {Roo.EventObject} e
36 Roo.extend(Roo.bootstrap.MasonryBrick, Roo.bootstrap.Component, {
47 * @cfg {String} bgimage
51 * @cfg {String} videourl
63 * @cfg {String} size (xs|sm|md|md-left|md-right|tall|wide)
68 * @cfg {String} placetitle (center|bottom)
73 * @cfg {Boolean} isFitContainer defalut true
75 isFitContainer : true,
78 * @cfg {Boolean} preventDefault defalut false
80 preventDefault : false,
83 * @cfg {Boolean} inverse defalut false
87 getAutoCreate : function()
89 if(!this.isFitContainer){
90 return this.getSplitAutoCreate();
93 var cls = 'masonry-brick masonry-brick-full';
96 cls += ' masonry-brick-link';
99 if(this.bgimage.length){
100 cls += ' masonry-brick-image';
103 if(this.maskInverse){
104 cls += ' mask-inverse';
107 if(!this.html.length && !this.maskInverse && !this.videourl.length){
108 cls += ' enable-mask';
112 cls += ' masonry-' + this.size + '-brick';
115 if(this.placetitle.length){
117 switch (this.placetitle) {
119 cls += ' masonry-center-title';
122 cls += ' masonry-bottom-title';
129 if(!this.html.length && !this.bgimage.length){
130 cls += ' masonry-center-title';
133 if(!this.html.length && this.bgimage.length){
134 cls += ' masonry-bottom-title';
139 cls += ' ' + this.cls;
143 tag: (this.href.length) ? 'a' : 'div',
148 cls: 'masonry-brick-mask'
152 cls: 'masonry-brick-paragraph',
158 if(this.href.length){
159 cfg.href = this.href;
162 var cn = cfg.cn[1].cn;
164 if(this.title.length){
167 cls: 'masonry-brick-title',
172 if(this.html.length){
175 cls: 'masonry-brick-text',
180 if (!this.title.length && !this.html.length) {
181 cfg.cn[1].cls += ' hide';
184 if(this.bgimage.length){
187 cls: 'masonry-brick-image-view',
192 if(this.videourl.length){
193 var vurl = this.videourl.replace(/https:\/\/youtu\.be/, 'https://www.youtube.com/embed/');
194 // youtube support only?
197 cls: 'masonry-brick-image-view iframe',
200 allowfullscreen : true,
201 style: 'order: 5px dotted green;'
209 getSplitAutoCreate : function()
211 var cls = 'masonry-brick masonry-brick-split';
213 if(this.href.length){
214 cls += ' masonry-brick-link';
217 if(this.bgimage.length){
218 cls += ' masonry-brick-image';
222 cls += ' masonry-' + this.size + '-brick';
225 switch (this.placetitle) {
227 cls += ' masonry-center-title';
230 cls += ' masonry-bottom-title';
233 if(!this.bgimage.length){
234 cls += ' masonry-center-title';
237 if(this.bgimage.length){
238 cls += ' masonry-bottom-title';
244 cls += ' ' + this.cls;
248 tag: (this.href.length) ? 'a' : 'div',
253 cls: 'masonry-brick-split-head',
257 cls: 'masonry-brick-paragraph',
264 cls: 'masonry-brick-split-body',
270 if(this.href.length){
271 cfg.href = this.href;
274 if(this.title.length){
275 cfg.cn[0].cn[0].cn.push({
277 cls: 'masonry-brick-title',
282 if(this.html.length){
285 cls: 'masonry-brick-text',
290 if(this.bgimage.length){
293 cls: 'masonry-brick-image-view',
298 if(this.videourl.length){
299 var vurl = this.videourl.replace(/https:\/\/youtu\.be/, 'https://www.youtube.com/embed/');
300 // youtube support only?
301 cfg.cn[0].cn.cn.push({
303 cls: 'masonry-brick-image-view',
306 allowfullscreen : true
315 initEvents: function()
350 this.el.on('touchstart', this.onTouchStart, this);
351 this.el.on('touchmove', this.onTouchMove, this);
352 this.el.on('touchend', this.onTouchEnd, this);
353 this.el.on('contextmenu', this.onContextMenu, this);
355 this.el.on('mouseenter' ,this.enter, this);
356 this.el.on('mouseleave', this.leave, this);
357 this.el.on('click', this.onClick, this);
360 if (typeof(this.parent().bricks) == 'object' && this.parent().bricks != null) {
361 this.parent().bricks.push(this);
366 onClick: function(e, el)
368 var time = this.endTimer - this.startTimer;
369 // Roo.log(e.preventDefault());
377 if(!this.preventDefault){
383 if (this.activeClass != '') {
387 this.fireEvent('click', this, e);
390 enter: function(e, el)
394 if(!this.isFitContainer || this.maskInverse || this.videourl.length){
398 if(this.bgimage.length && this.html.length){
399 this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0.9, true);
403 leave: function(e, el)
407 if(!this.isFitContainer || this.maskInverse || this.videourl.length){
411 if(this.bgimage.length && this.html.length){
412 this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0, true);
416 onTouchStart: function(e, el)
418 // e.preventDefault();
420 this.touchmoved = false;
422 if(!this.isFitContainer){
426 if(!this.bgimage.length || !this.html.length){
430 this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0.9, true);
432 this.timer = new Date().getTime();
436 onTouchMove: function(e, el)
438 this.touchmoved = true;
441 onContextMenu : function(e,el)
448 onTouchEnd: function(e, el)
450 // e.preventDefault();
452 if((new Date().getTime() - this.timer > 1000) || !this.href.length || this.touchmoved){
459 if(!this.bgimage.length || !this.html.length){
461 if(this.href.length){
462 window.location.href = this.href;
468 if(!this.isFitContainer){
472 this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0, true);
474 window.location.href = this.href;
477 //selection on single brick only
478 selectBrick : function() {
480 if (!this.parentId) {
484 var m = Roo.bootstrap.LayoutMasonry.get(this.parentId);
485 var index = m.selectedBrick.indexOf(this.id);
488 m.selectedBrick.splice(index,1);
489 this.el.removeClass(this.activeClass);
493 for(var i = 0; i < m.selectedBrick.length; i++) {
494 var b = Roo.bootstrap.MasonryBrick.get(m.selectedBrick[i]);
495 b.el.removeClass(b.activeClass);
498 m.selectedBrick = [];
500 m.selectedBrick.push(this.id);
501 this.el.addClass(this.activeClass);
505 isSelected : function(){
506 return this.el.hasClass(this.activeClass);
511 Roo.apply(Roo.bootstrap.MasonryBrick, {
514 groups : new Roo.util.MixedCollection(false, function(o) { return o.el.id; }),
516 * register a Masonry Brick
517 * @param {Roo.bootstrap.MasonryBrick} the masonry brick to add
520 register : function(brick)
522 //this.groups[brick.id] = brick;
523 this.groups.add(brick.id, brick);
526 * fetch a masonry brick based on the masonry brick ID
527 * @param {string} the masonry brick to add
528 * @returns {Roo.bootstrap.MasonryBrick} the masonry brick
531 get: function(brick_id)
533 // if (typeof(this.groups[brick_id]) == 'undefined') {
536 // return this.groups[brick_id] ;
538 if(this.groups.key(brick_id)) {
539 return this.groups.key(brick_id);