git.roojs.org Git - roojs1/blob - Roo/bootstrap/LayoutMasonry.js

   1 /**
   2  *
   3  * This is based on
   4  * http://masonry.desandro.com
   5  *
   6  * The idea is to render all the bricks based on vertical width...
   7  *
   8  * The original code extends 'outlayer' - we might need to use that....
   9  *
  10  */
  11
  12
  13 /**
  14  * @class Roo.bootstrap.LayoutMasonry
  15  * @extends Roo.bootstrap.Component
  16  * Bootstrap Layout Masonry class
  17  *
  18  * @constructor
  19  * Create a new Element
  20  * @param {Object} config The config object
  21  */
  22
  23 Roo.bootstrap.LayoutMasonry = function(config){
  24     Roo.bootstrap.LayoutMasonry.superclass.constructor.call(this, config);
  25
  26     this.bricks = [];
  27
  28     this.addEvents({
  29         // raw events
  30         /**
  31          * @event layout
  32          * Fire after layout the items
  33          * @param {Roo.bootstrap.LayoutMasonry} this
  34          * @param {Roo.EventObject} e
  35          */
  36         "layout" : true
  37     });
  38
  39 };
  40
  41 Roo.extend(Roo.bootstrap.LayoutMasonry, Roo.bootstrap.Component,  {
  42
  43     /**
  44      * @cfg {Boolean} isLayoutInstant = no animation?
  45      */
  46     isLayoutInstant : false, // needed?
  47
  48     /**
  49      * @cfg {Number} boxWidth  width of the columns
  50      */
  51     boxWidth : 450,
  52
  53       /**
  54      * @cfg {Number} boxHeight  - 0 for square, or fix it at a certian height
  55      */
  56     boxHeight : 0,
  57
  58     /**
  59      * @cfg {Number} padWidth padding below box..
  60      */
  61     padWidth : 10,
  62
  63     /**
  64      * @cfg {Number} gutter gutter width..
  65      */
  66     gutter : 10,
  67
  68      /**
  69      * @cfg {Number} maxCols maximum number of columns
  70      */
  71
  72     maxCols: 0,
  73
  74     /**
  75      * @cfg {Boolean} isAutoInitial defalut true
  76      */
  77     isAutoInitial : true,
  78
  79     containerWidth: 0,
  80
  81     /**
  82      * @cfg {Boolean} isHorizontal defalut false
  83      */
  84     isHorizontal : false,
  85
  86     currentSize : null,
  87
  88     tag: 'div',
  89
  90     cls: '',
  91
  92     bricks: null, //CompositeElement
  93
  94     cols : 1,
  95
  96     _isLayoutInited : false,
  97
  98 //    isAlternative : false, // only use for vertical layout...
  99
 100     /**
 101      * @cfg {Number} alternativePadWidth padding below box..
 102      */
 103     alternativePadWidth : 50,
 104
 105     getAutoCreate : function(){
 106
 107         var cfg = {
 108             tag: this.tag,
 109             cls: 'blog-masonary-wrapper ' + this.cls,
 110             cn : {
 111                 cls : 'mas-boxes masonary'
 112             }
 113         };
 114
 115         return cfg;
 116     },
 117
 118     getChildContainer: function( )
 119     {
 120         if (this.boxesEl) {
 121             return this.boxesEl;
 122         }
 123
 124         this.boxesEl = this.el.select('.mas-boxes').first();
 125
 126         return this.boxesEl;
 127     },
 128
 129
 130     initEvents : function()
 131     {
 132         var _this = this;
 133
 134         if(this.isAutoInitial){
 135             Roo.log('hook children rendered');
 136             this.on('childrenrendered', function() {
 137                 Roo.log('children rendered');
 138                 _this.initial();
 139             } ,this);
 140         }
 141     },
 142
 143     initial : function()
 144     {
 145         this.currentSize = this.el.getBox(true);
 146
 147         Roo.EventManager.onWindowResize(this.resize, this);
 148
 149         if(!this.isAutoInitial){
 150             this.layout();
 151             return;
 152         }
 153
 154         this.layout();
 155
 156         return;
 157         //this.layout.defer(500,this);
 158
 159     },
 160
 161     resize : function()
 162     {
 163         var cs = this.el.getBox(true);
 164
 165         if (
 166                 this.currentSize.width == cs.width &&
 167                 this.currentSize.x == cs.x &&
 168                 this.currentSize.height == cs.height &&
 169                 this.currentSize.y == cs.y
 170         ) {
 171             Roo.log("no change in with or X or Y");
 172             return;
 173         }
 174
 175         this.currentSize = cs;
 176
 177         this.layout();
 178
 179     },
 180
 181     layout : function()
 182     {
 183         this._resetLayout();
 184
 185         var isInstant = this.isLayoutInstant !== undefined ? this.isLayoutInstant : !this._isLayoutInited;
 186
 187         this.layoutItems( isInstant );
 188
 189         this._isLayoutInited = true;
 190
 191         this.fireEvent('layout', this);
 192
 193     },
 194
 195     _resetLayout : function()
 196     {
 197         if(this.isHorizontal){
 198             this.horizontalMeasureColumns();
 199             return;
 200         }
 201
 202         this.verticalMeasureColumns();
 203
 204     },
 205
 206     verticalMeasureColumns : function()
 207     {
 208         this.getContainerWidth();
 209
 210 //        if(Roo.lib.Dom.getViewWidth() < 768 && this.isAlternative){
 211 //            this.colWidth = Math.floor(this.containerWidth * 0.8);
 212 //            return;
 213 //        }
 214
 215         var boxWidth = this.boxWidth + this.padWidth;
 216
 217         if(this.containerWidth < this.boxWidth){
 218             boxWidth = this.containerWidth
 219         }
 220
 221         var containerWidth = this.containerWidth;
 222
 223         var cols = Math.floor(containerWidth / boxWidth);
 224
 225         this.cols = Math.max( cols, 1 );
 226
 227         this.cols = this.maxCols > 0 ? Math.min( this.cols, this.maxCols ) : this.cols;
 228
 229         var totalBoxWidth = this.cols * boxWidth - this.padWidth;
 230
 231         var avail = Math.floor((containerWidth - totalBoxWidth) / this.cols);
 232
 233         this.colWidth = boxWidth + avail - this.padWidth;
 234
 235         this.unitWidth = Math.floor((this.colWidth - (this.gutter * 2)) / 3);
 236         this.unitHeight = this.boxHeight > 0 ? this.boxHeight  : this.unitWidth;
 237     },
 238
 239     horizontalMeasureColumns : function()
 240     {
 241         this.getContainerWidth();
 242
 243         var boxWidth = this.boxWidth;
 244
 245         if(this.containerWidth < boxWidth){
 246             boxWidth = this.containerWidth;
 247         }
 248
 249         this.unitWidth = Math.floor((boxWidth - (this.gutter * 2)) / 3);
 250
 251         this.el.setHeight(boxWidth);
 252
 253     },
 254
 255     getContainerWidth : function()
 256     {
 257         this.containerWidth = this.el.getBox(true).width;  //maybe use getComputedWidth
 258     },
 259
 260     layoutItems : function( isInstant )
 261     {
 262         Roo.log(this.bricks);
 263
 264         var items = Roo.apply([], this.bricks);
 265
 266         if(this.isHorizontal){
 267             this._horizontalLayoutItems( items , isInstant );
 268             return;
 269         }
 270
 271 //        if(Roo.lib.Dom.getViewWidth() < 768 && this.isAlternative){
 272 //            this._verticalAlternativeLayoutItems( items , isInstant );
 273 //            return;
 274 //        }
 275
 276         this._verticalLayoutItems( items , isInstant );
 277
 278     },
 279
 280     _verticalLayoutItems : function ( items , isInstant)
 281     {
 282         if ( !items || !items.length ) {
 283             return;
 284         }
 285
 286         var standard = [
 287             ['xs', 'xs', 'xs', 'tall'],
 288             ['xs', 'xs', 'tall'],
 289             ['xs', 'xs', 'sm'],
 290             ['xs', 'xs', 'xs'],
 291             ['xs', 'tall'],
 292             ['xs', 'sm'],
 293             ['xs', 'xs'],
 294             ['xs'],
 295
 296             ['sm', 'xs', 'xs'],
 297             ['sm', 'xs'],
 298             ['sm'],
 299
 300             ['tall', 'xs', 'xs', 'xs'],
 301             ['tall', 'xs', 'xs'],
 302             ['tall', 'xs'],
 303             ['tall']
 304
 305         ];
 306
 307         var queue = [];
 308
 309         var boxes = [];
 310
 311         var box = [];
 312
 313         Roo.each(items, function(item, k){
 314
 315             switch (item.size) {
 316                 // these layouts take up a full box,
 317                 case 'md' :
 318                 case 'md-left' :
 319                 case 'md-right' :
 320                 case 'wide' :
 321
 322                     if(box.length){
 323                         boxes.push(box);
 324                         box = [];
 325                     }
 326
 327                     boxes.push([item]);
 328
 329                     break;
 330
 331                 case 'xs' :
 332                 case 'sm' :
 333                 case 'tall' :
 334
 335                     box.push(item);
 336
 337                     break;
 338                 default :
 339                     break;
 340
 341             }
 342
 343         }, this);
 344
 345         if(box.length){
 346             boxes.push(box);
 347             box = [];
 348         }
 349
 350         var filterPattern = function(box, length)
 351         {
 352             if(!box.length){
 353                 return;
 354             }
 355
 356             var match = false;
 357
 358             var pattern = box.slice(0, length);
 359
 360             var format = [];
 361
 362             Roo.each(pattern, function(i){
 363                 format.push(i.size);
 364             }, this);
 365
 366             Roo.each(standard, function(s){
 367
 368                 if(String(s) != String(format)){
 369                     return;
 370                 }
 371
 372                 match = true;
 373                 return false;
 374
 375             }, this);
 376
 377             if(!match && length == 1){
 378                 return;
 379             }
 380
 381             if(!match){
 382                 filterPattern(box, length - 1);
 383                 return;
 384             }
 385
 386             queue.push(pattern);
 387
 388             box = box.slice(length, box.length);
 389
 390             filterPattern(box, 4);
 391
 392             return;
 393
 394         }
 395
 396         Roo.each(boxes, function(box, k){
 397
 398             if(!box.length){
 399                 return;
 400             }
 401
 402             if(box.length == 1){
 403                 queue.push(box);
 404                 return;
 405             }
 406
 407             filterPattern(box, 4);
 408
 409         }, this);
 410
 411         this._processVerticalLayoutQueue( queue, isInstant );
 412
 413     },
 414
 415 //    _verticalAlternativeLayoutItems : function( items , isInstant )
 416 //    {
 417 //        if ( !items || !items.length ) {
 418 //            return;
 419 //        }
 420 //
 421 //        this._processVerticalAlternativeLayoutQueue( items, isInstant );
 422 //
 423 //    },
 424
 425     _horizontalLayoutItems : function ( items , isInstant)
 426     {
 427         if ( !items || !items.length || items.length < 3) {
 428             return;
 429         }
 430
 431         items.reverse();
 432
 433         var eItems = items.slice(0, 3);
 434
 435         items = items.slice(3, items.length);
 436
 437         var standard = [
 438             ['xs', 'xs', 'xs', 'wide'],
 439             ['xs', 'xs', 'wide'],
 440             ['xs', 'xs', 'sm'],
 441             ['xs', 'xs', 'xs'],
 442             ['xs', 'wide'],
 443             ['xs', 'sm'],
 444             ['xs', 'xs'],
 445             ['xs'],
 446
 447             ['sm', 'xs', 'xs'],
 448             ['sm', 'xs'],
 449             ['sm'],
 450
 451             ['wide', 'xs', 'xs', 'xs'],
 452             ['wide', 'xs', 'xs'],
 453             ['wide', 'xs'],
 454             ['wide'],
 455
 456             ['wide-thin']
 457         ];
 458
 459         var queue = [];
 460
 461         var boxes = [];
 462
 463         var box = [];
 464
 465         Roo.each(items, function(item, k){
 466
 467             switch (item.size) {
 468                 case 'md' :
 469                 case 'md-left' :
 470                 case 'md-right' :
 471                 case 'tall' :
 472
 473                     if(box.length){
 474                         boxes.push(box);
 475                         box = [];
 476                     }
 477
 478                     boxes.push([item]);
 479
 480                     break;
 481
 482                 case 'xs' :
 483                 case 'sm' :
 484                 case 'wide' :
 485                 case 'wide-thin' :
 486
 487                     box.push(item);
 488
 489                     break;
 490                 default :
 491                     break;
 492
 493             }
 494
 495         }, this);
 496
 497         if(box.length){
 498             boxes.push(box);
 499             box = [];
 500         }
 501
 502         var filterPattern = function(box, length)
 503         {
 504             if(!box.length){
 505                 return;
 506             }
 507
 508             var match = false;
 509
 510             var pattern = box.slice(0, length);
 511
 512             var format = [];
 513
 514             Roo.each(pattern, function(i){
 515                 format.push(i.size);
 516             }, this);
 517
 518             Roo.each(standard, function(s){
 519
 520                 if(String(s) != String(format)){
 521                     return;
 522                 }
 523
 524                 match = true;
 525                 return false;
 526
 527             }, this);
 528
 529             if(!match && length == 1){
 530                 return;
 531             }
 532
 533             if(!match){
 534                 filterPattern(box, length - 1);
 535                 return;
 536             }
 537
 538             queue.push(pattern);
 539
 540             box = box.slice(length, box.length);
 541
 542             filterPattern(box, 4);
 543
 544             return;
 545
 546         }
 547
 548         Roo.each(boxes, function(box, k){
 549
 550             if(!box.length){
 551                 return;
 552             }
 553
 554             if(box.length == 1){
 555                 queue.push(box);
 556                 return;
 557             }
 558
 559             filterPattern(box, 4);
 560
 561         }, this);
 562
 563
 564         var prune = [];
 565
 566         var pos = this.el.getBox(true);
 567
 568         var minX = pos.x;
 569
 570         var maxX = pos.right - this.unitWidth * 3 - this.gutter * 2 - this.padWidth;
 571
 572         var hit_end = false;
 573
 574         Roo.each(queue, function(box){
 575
 576             if(hit_end){
 577
 578                 Roo.each(box, function(b){
 579
 580                     b.el.setVisibilityMode(Roo.Element.DISPLAY);
 581                     b.el.hide();
 582
 583                 }, this);
 584
 585                 return;
 586             }
 587
 588             var mx = 0;
 589
 590             Roo.each(box, function(b){
 591
 592                 b.el.setVisibilityMode(Roo.Element.DISPLAY);
 593                 b.el.show();
 594
 595                 mx = Math.max(mx, b.x);
 596
 597             }, this);
 598
 599             maxX = maxX - this.unitWidth * mx - this.gutter * (mx - 1) - this.padWidth;
 600
 601             if(maxX < minX){
 602
 603                 Roo.each(box, function(b){
 604
 605                     b.el.setVisibilityMode(Roo.Element.DISPLAY);
 606                     b.el.hide();
 607
 608                 }, this);
 609
 610                 hit_end = true;
 611
 612                 return;
 613             }
 614
 615             prune.push(box);
 616
 617         }, this);
 618
 619         this._processHorizontalLayoutQueue( prune, eItems, isInstant );
 620     },
 621
 622     /** Sets position of item in DOM
 623     * @param {Element} item
 624     * @param {Number} x - horizontal position
 625     * @param {Number} y - vertical position
 626     * @param {Boolean} isInstant - disables transitions
 627     */
 628     _processVerticalLayoutQueue : function( queue, isInstant )
 629     {
 630         var pos = this.el.getBox(true);
 631         var x = pos.x;
 632         var y = pos.y;
 633         var maxY = [];
 634
 635         for (var i = 0; i < this.cols; i++){
 636             maxY[i] = pos.y;
 637         }
 638
 639         Roo.each(queue, function(box, k){
 640
 641             var col = k % this.cols;
 642
 643             Roo.each(box, function(b,kk){
 644
 645                 b.el.position('absolute');
 646
 647                 var width = Math.floor(this.unitWidth * b.x + (this.gutter * (b.x - 1)) + b.el.getPadding('lr'));
 648                 var height = Math.floor(this.unitHeight * b.y + (this.gutter * (b.y - 1)) + b.el.getPadding('tb'));
 649
 650                 if(b.size == 'md-left' || b.size == 'md-right'){
 651                     width = Math.floor(this.unitWidth * (b.x - 1) + (this.gutter * (b.x - 2)) + b.el.getPadding('lr'));
 652                     height = Math.floor(this.unitHeight * (b.y - 1) + (this.gutter * (b.y - 2)) + b.el.getPadding('tb'));
 653                 }
 654
 655                 b.el.setWidth(width);
 656                 b.el.setHeight(height);
 657                 // iframe?
 658                 b.el.select('iframe',true).setSize(width,height);
 659
 660             }, this);
 661
 662             for (var i = 0; i < this.cols; i++){
 663
 664                 if(maxY[i] < maxY[col]){
 665                     col = i;
 666                     continue;
 667                 }
 668
 669                 col = Math.min(col, i);
 670
 671             }
 672
 673             x = pos.x + col * (this.colWidth + this.padWidth);
 674
 675             y = maxY[col];
 676
 677             var positions = [];
 678
 679             switch (box.length){
 680                 case 1 :
 681                     positions = this.getVerticalOneBoxColPositions(x, y, box);
 682                     break;
 683                 case 2 :
 684                     positions = this.getVerticalTwoBoxColPositions(x, y, box);
 685                     break;
 686                 case 3 :
 687                     positions = this.getVerticalThreeBoxColPositions(x, y, box);
 688                     break;
 689                 case 4 :
 690                     positions = this.getVerticalFourBoxColPositions(x, y, box);
 691                     break;
 692                 default :
 693                     break;
 694             }
 695
 696             Roo.each(box, function(b,kk){
 697
 698                 b.el.setXY([positions[kk].x, positions[kk].y], isInstant ? false : true);
 699
 700                 var sz = b.el.getSize();
 701
 702                 maxY[col] = Math.max(maxY[col], positions[kk].y + sz.height + this.padWidth);
 703
 704             }, this);
 705
 706         }, this);
 707
 708         var mY = 0;
 709
 710         for (var i = 0; i < this.cols; i++){
 711             mY = Math.max(mY, maxY[i]);
 712         }
 713
 714         this.el.setHeight(mY - pos.y);
 715
 716     },
 717
 718 //    _processVerticalAlternativeLayoutQueue : function( items, isInstant )
 719 //    {
 720 //        var pos = this.el.getBox(true);
 721 //        var x = pos.x;
 722 //        var y = pos.y;
 723 //        var maxX = pos.right;
 724 //
 725 //        var maxHeight = 0;
 726 //
 727 //        Roo.each(items, function(item, k){
 728 //
 729 //            var c = k % 2;
 730 //
 731 //            item.el.position('absolute');
 732 //
 733 //            var width = Math.floor(this.colWidth + item.el.getPadding('lr'));
 734 //
 735 //            item.el.setWidth(width);
 736 //
 737 //            var height = Math.floor(this.colWidth * item.y / item.x + item.el.getPadding('tb'));
 738 //
 739 //            item.el.setHeight(height);
 740 //
 741 //            if(c == 0){
 742 //                item.el.setXY([x, y], isInstant ? false : true);
 743 //            } else {
 744 //                item.el.setXY([maxX - width, y], isInstant ? false : true);
 745 //            }
 746 //
 747 //            y = y + height + this.alternativePadWidth;
 748 //
 749 //            maxHeight = maxHeight + height + this.alternativePadWidth;
 750 //
 751 //        }, this);
 752 //
 753 //        this.el.setHeight(maxHeight);
 754 //
 755 //    },
 756
 757     _processHorizontalLayoutQueue : function( queue, eItems, isInstant )
 758     {
 759         var pos = this.el.getBox(true);
 760
 761         var minX = pos.x;
 762         var minY = pos.y;
 763
 764         var maxX = pos.right;
 765
 766         this._processHorizontalEndItem(eItems, maxX, minX, minY, isInstant);
 767
 768         var maxX = maxX - this.unitWidth * 3 - this.gutter * 2 - this.padWidth;
 769
 770         Roo.each(queue, function(box, k){
 771
 772             Roo.each(box, function(b, kk){
 773
 774                 b.el.position('absolute');
 775
 776                 var width = Math.floor(this.unitWidth * b.x + (this.gutter * (b.x - 1)) + b.el.getPadding('lr'));
 777                 var height = Math.floor(this.unitWidth * b.y + (this.gutter * (b.y - 1)) + b.el.getPadding('tb'));
 778
 779                 if(b.size == 'md-left' || b.size == 'md-right'){
 780                     width = Math.floor(this.unitWidth * (b.x - 1) + (this.gutter * (b.x - 2)) + b.el.getPadding('lr'));
 781                     height = Math.floor(this.unitWidth * (b.y - 1) + (this.gutter * (b.y - 2)) + b.el.getPadding('tb'));
 782                 }
 783
 784                 b.el.setWidth(width);
 785                 b.el.setHeight(height);
 786
 787             }, this);
 788
 789             if(!box.length){
 790                 return;
 791             }
 792
 793             var positions = [];
 794
 795             switch (box.length){
 796                 case 1 :
 797                     positions = this.getHorizontalOneBoxColPositions(maxX, minY, box);
 798                     break;
 799                 case 2 :
 800                     positions = this.getHorizontalTwoBoxColPositions(maxX, minY, box);
 801                     break;
 802                 case 3 :
 803                     positions = this.getHorizontalThreeBoxColPositions(maxX, minY, box);
 804                     break;
 805                 case 4 :
 806                     positions = this.getHorizontalFourBoxColPositions(maxX, minY, box);
 807                     break;
 808                 default :
 809                     break;
 810             }
 811
 812             Roo.each(box, function(b,kk){
 813
 814                 b.el.setXY([positions[kk].x, positions[kk].y], isInstant ? false : true);
 815
 816                 maxX = Math.min(maxX, positions[kk].x - this.padWidth);
 817
 818             }, this);
 819
 820         }, this);
 821
 822     },
 823
 824     _processHorizontalEndItem : function(eItems, maxX, minX, minY, isInstant)
 825     {
 826         Roo.each(eItems, function(b,k){
 827
 828             b.size = (k == 0) ? 'sm' : 'xs';
 829             b.x = (k == 0) ? 2 : 1;
 830             b.y = (k == 0) ? 2 : 1;
 831
 832             b.el.position('absolute');
 833
 834             var width = Math.floor(this.unitWidth * b.x + (this.gutter * (b.x - 1)) + b.el.getPadding('lr'));
 835
 836             b.el.setWidth(width);
 837
 838             var height = Math.floor(this.unitWidth * b.y + (this.gutter * (b.y - 1)) + b.el.getPadding('tb'));
 839
 840             b.el.setHeight(height);
 841
 842         }, this);
 843
 844         var positions = [];
 845
 846         positions.push({
 847             x : maxX - this.unitWidth * 2 - this.gutter,
 848             y : minY
 849         });
 850
 851         positions.push({
 852             x : maxX - this.unitWidth,
 853             y : minY + (this.unitWidth + this.gutter) * 2
 854         });
 855
 856         positions.push({
 857             x : maxX - this.unitWidth * 3 - this.gutter * 2,
 858             y : minY
 859         });
 860
 861         Roo.each(eItems, function(b,k){
 862
 863             b.el.setXY([positions[k].x, positions[k].y], isInstant ? false : true);
 864
 865         }, this);
 866
 867     },
 868
 869     getVerticalOneBoxColPositions : function(x, y, box)
 870     {
 871         var pos = [];
 872
 873         var rand = Math.floor(Math.random() * ((4 - box[0].x)));
 874
 875         if(box[0].size == 'md-left'){
 876             rand = 0;
 877         }
 878
 879         if(box[0].size == 'md-right'){
 880             rand = 1;
 881         }
 882
 883         pos.push({
 884             x : x + (this.unitWidth + this.gutter) * rand,
 885             y : y
 886         });
 887
 888         return pos;
 889     },
 890
 891     getVerticalTwoBoxColPositions : function(x, y, box)
 892     {
 893         var pos = [];
 894
 895         if(box[0].size == 'xs'){
 896
 897             pos.push({
 898                 x : x,
 899                 y : y + ((this.unitHeight + this.gutter) * Math.floor(Math.random() * box[1].y))
 900             });
 901
 902             pos.push({
 903                 x : x + (this.unitWidth + this.gutter) * (3 - box[1].x),
 904                 y : y
 905             });
 906
 907             return pos;
 908
 909         }
 910
 911         pos.push({
 912             x : x,
 913             y : y
 914         });
 915
 916         pos.push({
 917             x : x + (this.unitWidth + this.gutter) * 2,
 918             y : y + ((this.unitHeight + this.gutter) * Math.floor(Math.random() * box[0].y))
 919         });
 920
 921         return pos;
 922
 923     },
 924
 925     getVerticalThreeBoxColPositions : function(x, y, box)
 926     {
 927         var pos = [];
 928
 929         if(box[0].size == 'xs' && box[1].size == 'xs' && box[2].size == 'xs'){
 930
 931             pos.push({
 932                 x : x,
 933                 y : y
 934             });
 935
 936             pos.push({
 937                 x : x + (this.unitWidth + this.gutter) * 1,
 938                 y : y
 939             });
 940
 941             pos.push({
 942                 x : x + (this.unitWidth + this.gutter) * 2,
 943                 y : y
 944             });
 945
 946             return pos;
 947
 948         }
 949
 950         if(box[0].size == 'xs' && box[1].size == 'xs'){
 951
 952             pos.push({
 953                 x : x,
 954                 y : y
 955             });
 956
 957             pos.push({
 958                 x : x,
 959                 y : y + ((this.unitHeight + this.gutter) * (box[2].y - 1))
 960             });
 961
 962             pos.push({
 963                 x : x + (this.unitWidth + this.gutter) * 1,
 964                 y : y
 965             });
 966
 967             return pos;
 968
 969         }
 970
 971         pos.push({
 972             x : x,
 973             y : y
 974         });
 975
 976         pos.push({
 977             x : x + (this.unitWidth + this.gutter) * 2,
 978             y : y
 979         });
 980
 981         pos.push({
 982             x : x + (this.unitWidth + this.gutter) * 2,
 983             y : y + (this.unitHeight + this.gutter) * (box[0].y - 1)
 984         });
 985
 986         return pos;
 987
 988     },
 989
 990     getVerticalFourBoxColPositions : function(x, y, box)
 991     {
 992         var pos = [];
 993
 994         if(box[0].size == 'xs'){
 995
 996             pos.push({
 997                 x : x,
 998                 y : y
 999             });
1000
1001             pos.push({
1002                 x : x,
1003                 y : y + (this.unitHeight + this.gutter) * 1
1004             });
1005
1006             pos.push({
1007                 x : x,
1008                 y : y + (this.unitHeight + this.gutter) * 2
1009             });
1010
1011             pos.push({
1012                 x : x + (this.unitWidth + this.gutter) * 1,
1013                 y : y
1014             });
1015
1016             return pos;
1017
1018         }
1019
1020         pos.push({
1021             x : x,
1022             y : y
1023         });
1024
1025         pos.push({
1026             x : x + (this.unitWidth + this.gutter) * 2,
1027             y : y
1028         });
1029
1030         pos.push({
1031             x : x + (this.unitHeightunitWidth + this.gutter) * 2,
1032             y : y + (this.unitHeight + this.gutter) * 1
1033         });
1034
1035         pos.push({
1036             x : x + (this.unitWidth + this.gutter) * 2,
1037             y : y + (this.unitWidth + this.gutter) * 2
1038         });
1039
1040         return pos;
1041
1042     },
1043
1044     getHorizontalOneBoxColPositions : function(maxX, minY, box)
1045     {
1046         var pos = [];
1047
1048         if(box[0].size == 'md-left'){
1049             pos.push({
1050                 x : maxX - this.unitWidth * (box[0].x - 1) - this.gutter * (box[0].x - 2),
1051                 y : minY
1052             });
1053
1054             return pos;
1055         }
1056
1057         if(box[0].size == 'md-right'){
1058             pos.push({
1059                 x : maxX - this.unitWidth * (box[0].x - 1) - this.gutter * (box[0].x - 2),
1060                 y : minY + (this.unitWidth + this.gutter) * 1
1061             });
1062
1063             return pos;
1064         }
1065
1066         var rand = Math.floor(Math.random() * (4 - box[0].y));
1067
1068         pos.push({
1069             x : maxX - this.unitWidth * box[0].x - this.gutter * (box[0].x - 1),
1070             y : minY + (this.unitWidth + this.gutter) * rand
1071         });
1072
1073         return pos;
1074
1075     },
1076
1077     getHorizontalTwoBoxColPositions : function(maxX, minY, box)
1078     {
1079         var pos = [];
1080
1081         if(box[0].size == 'xs'){
1082
1083             pos.push({
1084                 x : maxX - this.unitWidth * box[0].x - this.gutter * (box[0].x - 1),
1085                 y : minY
1086             });
1087
1088             pos.push({
1089                 x : maxX - this.unitWidth * box[1].x - this.gutter * (box[1].x - 1),
1090                 y : minY + (this.unitWidth + this.gutter) * (3 - box[1].y)
1091             });
1092
1093             return pos;
1094
1095         }
1096
1097         pos.push({
1098             x : maxX - this.unitWidth * box[0].x - this.gutter * (box[0].x - 1),
1099             y : minY
1100         });
1101
1102         pos.push({
1103             x : maxX - this.unitWidth * box[1].x - this.gutter * (box[1].x - 1),
1104             y : minY + (this.unitWidth + this.gutter) * 2
1105         });
1106
1107         return pos;
1108
1109     },
1110
1111     getHorizontalThreeBoxColPositions : function(maxX, minY, box)
1112     {
1113         var pos = [];
1114
1115         if(box[0].size == 'xs' && box[1].size == 'xs' && box[2].size == 'xs'){
1116
1117             pos.push({
1118                 x : maxX - this.unitWidth * box[0].x - this.gutter * (box[0].x - 1),
1119                 y : minY
1120             });
1121
1122             pos.push({
1123                 x : maxX - this.unitWidth * box[1].x - this.gutter * (box[1].x - 1),
1124                 y : minY + (this.unitWidth + this.gutter) * 1
1125             });
1126
1127             pos.push({
1128                 x : maxX - this.unitWidth * box[2].x - this.gutter * (box[2].x - 1),
1129                 y : minY + (this.unitWidth + this.gutter) * 2
1130             });
1131
1132             return pos;
1133
1134         }
1135
1136         if(box[0].size == 'xs' && box[1].size == 'xs'){
1137
1138             pos.push({
1139                 x : maxX - this.unitWidth * box[0].x - this.gutter * (box[0].x - 1),
1140                 y : minY
1141             });
1142
1143             pos.push({
1144                 x : maxX - this.unitWidth * box[0].x - this.gutter * (box[0].x - 1) - this.unitWidth * box[1].x - this.gutter * (box[1].x - 1),
1145                 y : minY
1146             });
1147
1148             pos.push({
1149                 x : maxX - this.unitWidth * box[2].x - this.gutter * (box[2].x - 1),
1150                 y : minY + (this.unitWidth + this.gutter) * 1
1151             });
1152
1153             return pos;
1154
1155         }
1156
1157         pos.push({
1158             x : maxX - this.unitWidth * box[0].x - this.gutter * (box[0].x - 1),
1159             y : minY
1160         });
1161
1162         pos.push({
1163             x : maxX - this.unitWidth * box[1].x - this.gutter * (box[1].x - 1),
1164             y : minY + (this.unitWidth + this.gutter) * 2
1165         });
1166
1167         pos.push({
1168             x : maxX - this.unitWidth * box[1].x - this.gutter * (box[1].x - 1) - this.unitWidth * box[2].x - this.gutter * (box[2].x - 1),
1169             y : minY + (this.unitWidth + this.gutter) * 2
1170         });
1171
1172         return pos;
1173
1174     },
1175
1176     getHorizontalFourBoxColPositions : function(maxX, minY, box)
1177     {
1178         var pos = [];
1179
1180         if(box[0].size == 'xs'){
1181
1182             pos.push({
1183                 x : maxX - this.unitWidth * box[0].x - this.gutter * (box[0].x - 1),
1184                 y : minY
1185             });
1186
1187             pos.push({
1188                 x : maxX - this.unitWidth * box[0].x - this.gutter * (box[0].x - 1) - this.unitWidth * box[1].x - this.gutter * (box[1].x - 1),
1189                 y : minY
1190             });
1191
1192             pos.push({
1193                 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),
1194                 y : minY
1195             });
1196
1197             pos.push({
1198                 x : maxX - this.unitWidth * box[3].x - this.gutter * (box[3].x - 1),
1199                 y : minY + (this.unitWidth + this.gutter) * 1
1200             });
1201
1202             return pos;
1203
1204         }
1205
1206         pos.push({
1207             x : maxX - this.unitWidth * box[0].x - this.gutter * (box[0].x - 1),
1208             y : minY
1209         });
1210
1211         pos.push({
1212             x : maxX - this.unitWidth * box[1].x - this.gutter * (box[1].x - 1),
1213             y : minY + (this.unitWidth + this.gutter) * 2
1214         });
1215
1216         pos.push({
1217             x : maxX - this.unitWidth * box[1].x - this.gutter * (box[1].x - 1) - this.unitWidth * box[2].x - this.gutter * (box[2].x - 1),
1218             y : minY + (this.unitWidth + this.gutter) * 2
1219         });
1220
1221         pos.push({
1222             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),
1223             y : minY + (this.unitWidth + this.gutter) * 2
1224         });
1225
1226         return pos;
1227
1228     },
1229
1230     /**
1231     * adds a Masonry Brick
1232     * @param {Roo.bootstrap.MasonryBrick} the masonry brick to add
1233     */
1234     addBrick : function(cfg)
1235     {
1236         var cn = new Roo.bootstrap.MasonryBrick(cfg);
1237         //this.register(cn);
1238         cn.parentId = this.id;
1239         cn.onRender(this.el, null);
1240         return cn;
1241     },
1242
1243     /**
1244     * register a Masonry Brick
1245     * @param {Roo.bootstrap.MasonryBrick} the masonry brick to add
1246     */
1247     register : function(brick)
1248     {
1249         this.bricks.push(brick);
1250         brick.masonryId = this.id;
1251     },
1252
1253     /**
1254     * clear all the Masonry Brick
1255     */
1256     clearAll : function()
1257     {
1258         this.bricks = [];
1259         //this.getChildContainer().dom.innerHTML = "";
1260         this.el.dom.innerHTML = '';
1261     },
1262
1263     getSelected : function()
1264     {
1265         for (var i=0; i<this.bricks.length; i++) {
1266             Roo.log(this.bricks[i]);
1267         }
1268     }
1269 });
1270
1271
1272
1273