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