Roo/bootstrap/LayoutMasonry.js
[roojs1] / Roo / bootstrap / LayoutMasonry.js
index 4ee2419..45c0a24 100644 (file)
  */
 
 Roo.bootstrap.LayoutMasonry = function(config){
+    
     Roo.bootstrap.LayoutMasonry.superclass.constructor.call(this, config);
     
     this.bricks = [];
     
+    Roo.bootstrap.LayoutMasonry.register(this);
+    
     this.addEvents({
         // raw events
         /**
@@ -100,10 +103,14 @@ 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,
@@ -142,6 +149,8 @@ Roo.extend(Roo.bootstrap.LayoutMasonry, Roo.bootstrap.Component,  {
     
     initial : function()
     {
+        this.selectedBrick = [];
+        
         this.currentSize = this.el.getBox(true);
         
         Roo.EventManager.onWindowResize(this.resize, this); 
@@ -232,7 +241,7 @@ Roo.extend(Roo.bootstrap.LayoutMasonry, Roo.bootstrap.Component,  {
         
         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;
     },
     
@@ -654,8 +663,11 @@ Roo.extend(Roo.bootstrap.LayoutMasonry, Roo.bootstrap.Component,  {
                 
                 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);
+//                b.el.select('iframe',true).setSize(width,height);
                 
             }, this);
             
@@ -1227,16 +1239,35 @@ Roo.extend(Roo.bootstrap.LayoutMasonry, Roo.bootstrap.Component,  {
         
     },
     
+    /**
+    * 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
     */
-    addItem : function(cfg)
+    addBrick : function(cfg)
     {
         var cn = new Roo.bootstrap.MasonryBrick(cfg);
         //this.register(cn);
         cn.parentId = this.id;
-        cn.onRender(this.el, null);
+        cn.render(this.el);
         return cn;
     },
     
@@ -1244,6 +1275,7 @@ Roo.extend(Roo.bootstrap.LayoutMasonry, Roo.bootstrap.Component,  {
     * register a Masonry Brick
     * @param {Roo.bootstrap.MasonryBrick} the masonry brick to add
     */
+    
     register : function(brick)
     {
         this.bricks.push(brick);
@@ -1262,11 +1294,41 @@ Roo.extend(Roo.bootstrap.LayoutMasonry, Roo.bootstrap.Component,  {
     
     getSelected : function()
     {
-        for (var i=0; i<this.bricks.length; i++) {
-            Roo.log(this.bricks[i]);
+        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] ;
     }
     
+    
+    
 });