*/
Roo.bootstrap.LayoutMasonry = function(config){
+
Roo.bootstrap.LayoutMasonry.superclass.constructor.call(this, config);
this.bricks = [];
+ Roo.bootstrap.LayoutMasonry.register(this);
+
+ this.addEvents({
+ // raw events
+ /**
+ * @event layout
+ * Fire after layout the items
+ * @param {Roo.bootstrap.LayoutMasonry} this
+ * @param {Roo.EventObject} e
+ */
+ "layout" : true
+ });
+
};
Roo.extend(Roo.bootstrap.LayoutMasonry, Roo.bootstrap.Component, {
*/
boxWidth : 450,
+ /**
+ * @cfg {Number} boxHeight - 0 for square, or fix it at a certian height
+ */
+ boxHeight : 0,
+
/**
* @cfg {Number} padWidth padding below box..
*/
/**
* @cfg {Number} gutter gutter width..
*/
- gutter : 10,
+ gutter : 10,
+
+ /**
+ * @cfg {Number} maxCols maximum number of columns
+ */
+
+ maxCols: 0,
/**
* @cfg {Boolean} isAutoInitial defalut true
/**
* @cfg {Number} alternativePadWidth padding below box..
*/
- alternativePadWidth : 50,
+ alternativePadWidth : 50,
+
+ selectedBrick : [],
getAutoCreate : function(){
+ var cfg = Roo.apply({}, Roo.bootstrap.LayoutMasonry.superclass.getAutoCreate.call(this));
+
var cfg = {
tag: this.tag,
cls: 'blog-masonary-wrapper ' + this.cls,
initial : function()
{
+ this.selectedBrick = [];
+
this.currentSize = this.el.getBox(true);
Roo.EventManager.onWindowResize(this.resize, this);
resize : function()
{
- Roo.log('resize');
-
var cs = this.el.getBox(true);
- if (this.currentSize.width == cs.width && this.currentSize.x == cs.x ) {
- Roo.log("no change in with or X");
+ if (
+ this.currentSize.width == cs.width &&
+ this.currentSize.x == cs.x &&
+ this.currentSize.height == cs.height &&
+ this.currentSize.y == cs.y
+ ) {
+ Roo.log("no change in with or X or Y");
return;
}
this._isLayoutInited = true;
+ this.fireEvent('layout', this);
+
},
_resetLayout : function()
this.cols = Math.max( cols, 1 );
+ this.cols = this.maxCols > 0 ? Math.min( this.cols, this.maxCols ) : this.cols;
+
var totalBoxWidth = this.cols * boxWidth - this.padWidth;
var avail = Math.floor((containerWidth - totalBoxWidth) / this.cols);
this.colWidth = boxWidth + avail - this.padWidth;
- this.unitWidth = Math.floor((this.colWidth - (this.gutter * 2)) / 3);
+ this.unitWidth = Math.round((this.colWidth - (this.gutter * 2)) / 3);
+ this.unitHeight = this.boxHeight > 0 ? this.boxHeight : this.unitWidth;
},
horizontalMeasureColumns : function()
layoutItems : function( isInstant )
{
+ Roo.log(this.bricks);
+
var items = Roo.apply([], this.bricks);
if(this.isHorizontal){
['tall', 'xs', 'xs'],
['tall', 'xs'],
['tall']
+
];
var queue = [];
Roo.each(items, function(item, k){
switch (item.size) {
+ // these layouts take up a full box,
case 'md' :
case 'md-left' :
case 'md-right' :
['wide', 'xs', 'xs', 'xs'],
['wide', 'xs', 'xs'],
['wide', 'xs'],
- ['wide']
+ ['wide'],
+
+ ['wide-thin']
];
var queue = [];
case 'xs' :
case 'sm' :
case 'wide' :
+ case 'wide-thin' :
box.push(item);
b.el.position('absolute');
var width = Math.floor(this.unitWidth * b.x + (this.gutter * (b.x - 1)) + b.el.getPadding('lr'));
- var height = Math.floor(this.unitWidth * b.y + (this.gutter * (b.y - 1)) + b.el.getPadding('tb'));
+ var height = Math.floor(this.unitHeight * b.y + (this.gutter * (b.y - 1)) + b.el.getPadding('tb'));
if(b.size == 'md-left' || b.size == 'md-right'){
width = Math.floor(this.unitWidth * (b.x - 1) + (this.gutter * (b.x - 2)) + b.el.getPadding('lr'));
- height = Math.floor(this.unitWidth * (b.y - 1) + (this.gutter * (b.y - 2)) + b.el.getPadding('tb'));
+ height = Math.floor(this.unitHeight * (b.y - 1) + (this.gutter * (b.y - 2)) + b.el.getPadding('tb'));
}
b.el.setWidth(width);
b.el.setHeight(height);
+ b.el.select('iframe',true).set('width', width);
+ b.el.select('iframe',true).set(height)
+ // iframe?
+// b.el.select('iframe',true).setSize(width,height);
+
}, this);
for (var i = 0; i < this.cols; i++){
pos.push({
x : x,
- y : y + ((this.unitWidth + this.gutter) * Math.floor(Math.random() * box[1].y))
+ y : y + ((this.unitHeight + this.gutter) * Math.floor(Math.random() * box[1].y))
});
pos.push({
pos.push({
x : x + (this.unitWidth + this.gutter) * 2,
- y : y + ((this.unitWidth + this.gutter) * Math.floor(Math.random() * box[0].y))
+ y : y + ((this.unitHeight + this.gutter) * Math.floor(Math.random() * box[0].y))
});
return pos;
pos.push({
x : x,
- y : y + ((this.unitWidth + this.gutter) * (box[2].y - 1))
+ y : y + ((this.unitHeight + this.gutter) * (box[2].y - 1))
});
pos.push({
pos.push({
x : x + (this.unitWidth + this.gutter) * 2,
- y : y + (this.unitWidth + this.gutter) * (box[0].y - 1)
+ y : y + (this.unitHeight + this.gutter) * (box[0].y - 1)
});
return pos;
pos.push({
x : x,
- y : y + (this.unitWidth + this.gutter) * 1
+ y : y + (this.unitHeight + this.gutter) * 1
});
pos.push({
x : x,
- y : y + (this.unitWidth + this.gutter) * 2
+ y : y + (this.unitHeight + this.gutter) * 2
});
pos.push({
});
pos.push({
- x : x + (this.unitWidth + this.gutter) * 2,
- y : y + (this.unitWidth + this.gutter) * 1
+ x : x + (this.unitHeightunitWidth + this.gutter) * 2,
+ y : y + (this.unitHeight + this.gutter) * 1
});
pos.push({
if(box[0].size == 'md-left'){
pos.push({
- x : maxX - this.unitWidth * 3 - this.gutter * 2,
+ x : maxX - this.unitWidth * (box[0].x - 1) - this.gutter * (box[0].x - 2),
y : minY
});
{
var pos = [];
+ if(box[0].size == 'xs'){
+
+ pos.push({
+ x : maxX - this.unitWidth * box[0].x - this.gutter * (box[0].x - 1),
+ y : minY
+ });
+
+ pos.push({
+ x : maxX - this.unitWidth * box[1].x - this.gutter * (box[1].x - 1),
+ y : minY + (this.unitWidth + this.gutter) * (3 - box[1].y)
+ });
+
+ return pos;
+
+ }
+
pos.push({
x : maxX - this.unitWidth * box[0].x - this.gutter * (box[0].x - 1),
y : minY
pos.push({
x : maxX - this.unitWidth * box[1].x - this.gutter * (box[1].x - 1),
- y : minY + (this.unitWidth + this.gutter) * (3 - box[1].y)
+ y : minY + (this.unitWidth + this.gutter) * 2
});
return pos;
{
var pos = [];
+ if(box[0].size == 'xs' && box[1].size == 'xs' && box[2].size == 'xs'){
+
+ pos.push({
+ x : maxX - this.unitWidth * box[0].x - this.gutter * (box[0].x - 1),
+ y : minY
+ });
+
+ pos.push({
+ x : maxX - this.unitWidth * box[1].x - this.gutter * (box[1].x - 1),
+ y : minY + (this.unitWidth + this.gutter) * 1
+ });
+
+ pos.push({
+ x : maxX - this.unitWidth * box[2].x - this.gutter * (box[2].x - 1),
+ y : minY + (this.unitWidth + this.gutter) * 2
+ });
+
+ return pos;
+
+ }
+
+ if(box[0].size == 'xs' && box[1].size == 'xs'){
+
+ pos.push({
+ x : maxX - this.unitWidth * box[0].x - this.gutter * (box[0].x - 1),
+ y : minY
+ });
+
+ pos.push({
+ x : maxX - this.unitWidth * box[0].x - this.gutter * (box[0].x - 1) - this.unitWidth * box[1].x - this.gutter * (box[1].x - 1),
+ y : minY
+ });
+
+ pos.push({
+ x : maxX - this.unitWidth * box[2].x - this.gutter * (box[2].x - 1),
+ y : minY + (this.unitWidth + this.gutter) * 1
+ });
+
+ return pos;
+
+ }
+
pos.push({
- x : maxX - this.unitWidth,
+ x : maxX - this.unitWidth * box[0].x - this.gutter * (box[0].x - 1),
+ y : minY
+ });
+
+ pos.push({
+ x : maxX - this.unitWidth * box[1].x - this.gutter * (box[1].x - 1),
+ y : minY + (this.unitWidth + this.gutter) * 2
+ });
+
+ pos.push({
+ x : maxX - this.unitWidth * box[1].x - this.gutter * (box[1].x - 1) - this.unitWidth * box[2].x - this.gutter * (box[2].x - 1),
+ y : minY + (this.unitWidth + this.gutter) * 2
+ });
+
+ return pos;
+
+ },
+
+ getHorizontalFourBoxColPositions : function(maxX, minY, box)
+ {
+ var pos = [];
+
+ if(box[0].size == 'xs'){
+
+ pos.push({
+ x : maxX - this.unitWidth * box[0].x - this.gutter * (box[0].x - 1),
+ y : minY
+ });
+
+ pos.push({
+ x : maxX - this.unitWidth * box[0].x - this.gutter * (box[0].x - 1) - this.unitWidth * box[1].x - this.gutter * (box[1].x - 1),
+ y : minY
+ });
+
+ pos.push({
+ x : maxX - this.unitWidth * box[0].x - this.gutter * (box[0].x - 1) - this.unitWidth * box[1].x - this.gutter * (box[1].x - 1) - this.unitWidth * box[2].x - this.gutter * (box[2].x - 1),
+ y : minY
+ });
+
+ pos.push({
+ x : maxX - this.unitWidth * box[3].x - this.gutter * (box[3].x - 1),
+ y : minY + (this.unitWidth + this.gutter) * 1
+ });
+
+ return pos;
+
+ }
+
+ pos.push({
+ x : maxX - this.unitWidth * box[0].x - this.gutter * (box[0].x - 1),
y : minY
});
pos.push({
- x : maxX - this.unitWidth,
- y : minY - this.unitWidth - this.gutter
+ x : maxX - this.unitWidth * box[1].x - this.gutter * (box[1].x - 1),
+ y : minY + (this.unitWidth + this.gutter) * 2
});
pos.push({
- x : maxX - this.unitWidth,
- y : minY - (this.unitWidth + this.gutter) * 2
+ x : maxX - this.unitWidth * box[1].x - this.gutter * (box[1].x - 1) - this.unitWidth * box[2].x - this.gutter * (box[2].x - 1),
+ y : minY + (this.unitWidth + this.gutter) * 2
});
+ pos.push({
+ x : maxX - this.unitWidth * box[1].x - this.gutter * (box[1].x - 1) - this.unitWidth * box[2].x - this.gutter * (box[2].x - 1) - this.unitWidth * box[3].x - this.gutter * (box[3].x - 1),
+ y : minY + (this.unitWidth + this.gutter) * 2
+ });
+
return pos;
+ },
+
+ /**
+ * remove a Masonry Brick
+ * @param {Roo.bootstrap.MasonryBrick} the masonry brick to remove
+ */
+ removeBrick : function(brick_id)
+ {
+ if (!brick_id) {
+ return;
+ }
+
+ for (var i = 0; i<this.bricks.length; i++) {
+ if (this.bricks[i].id == brick_id) {
+ this.bricks.splice(i,1);
+ this.el.dom.removeChild(Roo.get(brick_id).dom);
+ this.initial();
+ }
+ }
+ },
+
+ /**
+ * adds a Masonry Brick
+ * @param {Roo.bootstrap.MasonryBrick} the masonry brick to add
+ */
+ addBrick : function(cfg)
+ {
+ var cn = new Roo.bootstrap.MasonryBrick(cfg);
+ //this.register(cn);
+ cn.parentId = this.id;
+ cn.render(this.el);
+ return cn;
+ },
+
+ /**
+ * register a Masonry Brick
+ * @param {Roo.bootstrap.MasonryBrick} the masonry brick to add
+ */
+
+ register : function(brick)
+ {
+ this.bricks.push(brick);
+ brick.masonryId = this.id;
+ },
+
+ /**
+ * clear all the Masonry Brick
+ */
+ clearAll : function()
+ {
+ this.bricks = [];
+ //this.getChildContainer().dom.innerHTML = "";
+ this.el.dom.innerHTML = '';
+ },
+
+ getSelected : function()
+ {
+ if (!this.selectedBrick) {
+ return false;
+ }
+
+ return this.selectedBrick;
}
+});
+
+Roo.apply(Roo.bootstrap.LayoutMasonry, {
+
+ groups: {},
+ /**
+ * register a Masonry Layout
+ * @param {Roo.bootstrap.LayoutMasonry} the masonry layout to add
+ */
+
+ register : function(layout)
+ {
+ this.groups[layout.id] = layout;
+ },
+ /**
+ * fetch a Masonry Layout based on the masonry layout ID
+ * @param {string} the masonry layout to add
+ * @returns {Roo.bootstrap.LayoutMasonry} the masonry layout
+ */
+
+ get: function(layout_id) {
+ if (typeof(this.groups[layout_id]) == 'undefined') {
+ return false;
+ }
+ return this.groups[layout_id] ;
+ }
+
+
});
projects / roojs1 / blobdiff