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