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