*/
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, {
/**
* @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()
if(this.containerWidth < this.boxWidth){
boxWidth = this.containerWidth
}
-
+ alert(boxWidth);
var containerWidth = this.containerWidth;
var cols = Math.floor(containerWidth / boxWidth);
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;
},
getContainerWidth : function()
{
- this.containerWidth = this.el.getBox(true).width - 15; //maybe use getComputedWidth
+ this.containerWidth = this.el.getBox(true).width; //maybe use getComputedWidth
},
layoutItems : function( isInstant )
{
+ Roo.log(this.bricks);
+
var items = Roo.apply([], this.bricks);
if(this.isHorizontal){
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] ;
}
+
+
});