*/
Roo.bootstrap.MasonryBrick = function(config){
+
Roo.bootstrap.MasonryBrick.superclass.constructor.call(this, config);
+ Roo.bootstrap.MasonryBrick.register(this);
+
this.addEvents({
// raw events
/**
* @cfg {String} bgimage
*/
bgimage : '',
+ /**
+ * @cfg {String} videourl
+ */
+ videourl : '',
/**
* @cfg {String} cls
*/
*/
href : '',
/**
- * @cfg {String} (xs|sm|md|md-left|md-right|tall|wide) size
+ * @cfg {String} size (xs|sm|md|md-left|md-right|tall|wide)
*/
size : 'xs',
/**
- * @cfg {String} (center|bottom) placetitle
+ * @cfg {String} placetitle (center|bottom)
*/
placetitle : '',
+ /**
+ * @cfg {Boolean} isFitContainer defalut true
+ */
+ isFitContainer : true,
+
+ /**
+ * @cfg {Boolean} preventDefault defalut false
+ */
+ preventDefault : false,
+
+ /**
+ * @cfg {Boolean} inverse defalut false
+ */
+ maskInverse : false,
+
getAutoCreate : function()
{
- var cls = 'masonry-brick';
+ if(!this.isFitContainer){
+ return this.getSplitAutoCreate();
+ }
+
+ var cls = 'masonry-brick masonry-brick-full embed-responsive';
if(this.href.length){
cls += ' masonry-brick-link';
cls += ' masonry-brick-image';
}
- if(this.size){
- cls += ' masonry-' + this.size + '-brick';
+ if(this.maskInverse){
+ cls += ' mask-inverse';
}
- if(!this.html.length && !this.bgimage.length){
- cls += ' masonry-center-title';
+ if(!this.html.length && !this.maskInverse && !this.videourl.length){
+ cls += ' enable-mask';
}
- if(!this.html.length && this.bgimage.length){
- cls += ' masonry-bottom-title';
+ if(this.size){
+ cls += ' masonry-' + this.size + '-brick';
+ }
+
+ if(this.placetitle.length){
+
+ switch (this.placetitle) {
+ case 'center' :
+ cls += ' masonry-center-title';
+ break;
+ case 'bottom' :
+ cls += ' masonry-bottom-title';
+ break;
+ default:
+ break;
+ }
+
+ } else {
+ if(!this.html.length && !this.bgimage.length){
+ cls += ' masonry-center-title';
+ }
+
+ if(!this.html.length && this.bgimage.length){
+ cls += ' masonry-bottom-title';
+ }
}
if(this.cls){
tag: (this.href.length) ? 'a' : 'div',
cls: cls,
cn: [
+ {
+ tag: 'div',
+ cls: 'masonry-brick-mask'
+ },
{
tag: 'div',
cls: 'masonry-brick-paragraph',
cfg.href = this.href;
}
- var cn = cfg.cn[0].cn;
+ var cn = cfg.cn[1].cn;
if(this.title.length){
cn.push({
});
}
+ if (!this.title.length && !this.html.length) {
+ cfg.cn[1].cls += ' hide';
+ }
+
if(this.bgimage.length){
cfg.cn.push({
tag: 'img',
});
}
+ if(this.videourl.length){
+ var vurl = this.videourl.replace(/https:\/\/youtu\.be/, 'https://www.youtube.com/embed/');
+ // youtube support only?
+ cfg.cn.push({
+ tag: 'iframe',
+ cls: 'masonry-brick-image-view embed-responsive-item',
+ src: vurl,
+ frameborder : 0,
+ allowfullscreen : true
+ });
+ }
+
return cfg;
},
+ getSplitAutoCreate : function()
+ {
+ var cls = 'masonry-brick masonry-brick-split';
+
+ if(this.href.length){
+ cls += ' masonry-brick-link';
+ }
+
+ if(this.bgimage.length){
+ cls += ' masonry-brick-image';
+ }
+
+ if(this.size){
+ cls += ' masonry-' + this.size + '-brick';
+ }
+
+ switch (this.placetitle) {
+ case 'center' :
+ cls += ' masonry-center-title';
+ break;
+ case 'bottom' :
+ cls += ' masonry-bottom-title';
+ break;
+ default:
+ if(!this.bgimage.length){
+ cls += ' masonry-center-title';
+ }
+
+ if(this.bgimage.length){
+ cls += ' masonry-bottom-title';
+ }
+ break;
+ }
+
+ if(this.cls){
+ cls += ' ' + this.cls;
+ }
+
+ var cfg = {
+ tag: (this.href.length) ? 'a' : 'div',
+ cls: cls,
+ cn: [
+ {
+ tag: 'div',
+ cls: 'masonry-brick-split-head',
+ cn: [
+ {
+ tag: 'div',
+ cls: 'masonry-brick-paragraph',
+ cn: []
+ }
+ ]
+ },
+ {
+ tag: 'div',
+ cls: 'masonry-brick-split-body',
+ cn: []
+ }
+ ]
+ };
+
+ if(this.href.length){
+ cfg.href = this.href;
+ }
+
+ if(this.title.length){
+ cfg.cn[0].cn[0].cn.push({
+ tag: 'h4',
+ cls: 'masonry-brick-title',
+ html: this.title
+ });
+ }
+
+ if(this.html.length){
+ cfg.cn[1].cn.push({
+ tag: 'p',
+ cls: 'masonry-brick-text',
+ html: this.html
+ });
+ }
+
+ if(this.bgimage.length){
+ cfg.cn[0].cn.push({
+ tag: 'img',
+ cls: 'masonry-brick-image-view',
+ src: this.bgimage
+ });
+ }
+
+ if(this.videourl.length){
+ var vurl = this.videourl.replace(/https:\/\/youtu\.be/, 'https://www.youtube.com/embed/');
+ // youtube support only?
+ cfg.cn[0].cn.cn.push({
+ tag: 'iframe',
+ cls: 'masonry-brick-image-view',
+ src: vurl,
+ frameborder : 0,
+ allowfullscreen : true
+ });
+ }
+
+ return cfg;
+ },
+
initEvents: function()
{
switch (this.size) {
case 'xs' :
-// this.intSize = 1;
this.x = 1;
this.y = 1;
break;
case 'sm' :
-// this.intSize = 2;
this.x = 2;
this.y = 2;
break;
case 'md' :
case 'md-left' :
case 'md-right' :
-// this.intSize = 3;
this.x = 3;
this.y = 3;
break;
case 'tall' :
-// this.intSize = 3;
this.x = 2;
this.y = 3;
break;
case 'wide' :
-// this.intSize = 3;
this.x = 3;
this.y = 2;
break;
+ case 'wide-thin' :
+ this.x = 3;
+ this.y = 1;
+ break;
+
default :
break;
}
-
-
if(Roo.isTouch){
this.el.on('touchstart', this.onTouchStart, this);
+ this.el.on('touchmove', this.onTouchMove, this);
this.el.on('touchend', this.onTouchEnd, this);
+ this.el.on('contextmenu', this.onContextMenu, this);
} else {
this.el.on('mouseenter' ,this.enter, this);
this.el.on('mouseleave', this.leave, this);
+ this.el.on('click', this.onClick, this);
}
if (typeof(this.parent().bricks) == 'object' && this.parent().bricks != null) {
onClick: function(e, el)
{
- alert('click');
+ var time = this.endTimer - this.startTimer;
+ // Roo.log(e.preventDefault());
+ if(Roo.isTouch){
+ if(time > 1000){
+ e.preventDefault();
+ return;
+ }
+ }
- if(!Roo.isTouch){
+ if(!this.preventDefault){
return;
}
- var time = this.endTimer - this.startTimer;
-
- alert(time);
+ e.preventDefault();
- if(time < 1000){
- return;
+ if (this.activeClass != '') {
+ this.selectBrick();
}
- e.preventDefault();
+ this.fireEvent('click', this, e);
},
enter: function(e, el)
{
e.preventDefault();
+ if(!this.isFitContainer || this.maskInverse || this.videourl.length){
+ return;
+ }
+
if(this.bgimage.length && this.html.length){
this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0.9, true);
}
{
e.preventDefault();
+ if(!this.isFitContainer || this.maskInverse || this.videourl.length){
+ return;
+ }
+
if(this.bgimage.length && this.html.length){
this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0, true);
}
onTouchStart: function(e, el)
{
- e.preventDefault();
+// e.preventDefault();
+
+ this.touchmoved = false;
+
+ if(!this.isFitContainer){
+ return;
+ }
if(!this.bgimage.length || !this.html.length){
return;
this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0.9, true);
this.timer = new Date().getTime();
+
},
- onTouchEnd: function(e, el)
+ onTouchMove: function(e, el)
+ {
+ this.touchmoved = true;
+ },
+
+ onContextMenu : function(e,el)
{
e.preventDefault();
+ e.stopPropagation();
+ return false;
+ },
+
+ onTouchEnd: function(e, el)
+ {
+// e.preventDefault();
+
+ if((new Date().getTime() - this.timer > 1000) || !this.href.length || this.touchmoved){
+
+ this.leave(e,el);
+
+ return;
+ }
if(!this.bgimage.length || !this.html.length){
return;
}
+ if(!this.isFitContainer){
+ return;
+ }
+
this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0, true);
- if((new Date().getTime() - this.timer > 1000) || !this.href.length){
+ window.location.href = this.href;
+ },
+
+ //selection on single brick only
+ selectBrick : function() {
+
+ if (!this.parentId) {
return;
}
- window.location.href = this.href;
- }
+ var m = Roo.bootstrap.LayoutMasonry.get(this.parentId);
+ var index = m.selectedBrick.indexOf(this.id);
+
+ if ( index > -1) {
+ m.selectedBrick.splice(index,1);
+ this.el.removeClass(this.activeClass);
+ return;
+ }
+
+ for(var i = 0; i < m.selectedBrick.length; i++) {
+ var b = Roo.bootstrap.MasonryBrick.get(m.selectedBrick[i]);
+ b.el.removeClass(b.activeClass);
+ }
+
+ m.selectedBrick = [];
+
+ m.selectedBrick.push(this.id);
+ this.el.addClass(this.activeClass);
+ return;
+ },
+ isSelected : function(){
+ return this.el.hasClass(this.activeClass);
+
+ }
});
-
+Roo.apply(Roo.bootstrap.MasonryBrick, {
+
+ //groups: {},
+ groups : new Roo.util.MixedCollection(false, function(o) { return o.el.id; }),
+ /**
+ * register a Masonry Brick
+ * @param {Roo.bootstrap.MasonryBrick} the masonry brick to add
+ */
+
+ register : function(brick)
+ {
+ //this.groups[brick.id] = brick;
+ this.groups.add(brick.id, brick);
+ },
+ /**
+ * fetch a masonry brick based on the masonry brick ID
+ * @param {string} the masonry brick to add
+ * @returns {Roo.bootstrap.MasonryBrick} the masonry brick
+ */
+
+ get: function(brick_id)
+ {
+ // if (typeof(this.groups[brick_id]) == 'undefined') {
+ // return false;
+ // }
+ // return this.groups[brick_id] ;
+
+ if(this.groups.key(brick_id)) {
+ return this.groups.key(brick_id);
+ }
+
+ return false;
+ }
+
+
+
+});
\ No newline at end of file
projects / roojs1 / blobdiff