Roo/bootstrap/LayoutMasonryAuto.js

/**
 *
 * This is based on 
 * http://masonry.desandro.com
 *
 * The idea is to render all the bricks based on vertical width...
 *
 * The original code extends 'outlayer' - we might need to use that....
 * 
 */


/**
 * @class Roo.bootstrap.LayoutMasonryAuto
 * @extends Roo.bootstrap.Component
 * Bootstrap Layout Masonry class
 * 
 * @constructor
 * Create a new Element
 * @param {Object} config The config object
 */

Roo.bootstrap.LayoutMasonryAuto = function(config){
    Roo.bootstrap.LayoutMasonryAuto.superclass.constructor.call(this, config);
};

Roo.extend(Roo.bootstrap.LayoutMasonryAuto, Roo.bootstrap.Component,  {

      /**
     * @cfg {Boolean} isFitWidth  - resize the width..
     */
    isFitWidth : false,  // options..
    /**
     * @cfg {Boolean} isOriginLeft = left align?
     */
    isOriginLeft : true,
    /**
     * @cfg {Boolean} isOriginTop = top align?
     */
    isOriginTop : false,
    /**
     * @cfg {Boolean} isLayoutInstant = no animation?
     */
    isLayoutInstant : false, // needed?
    /**
     * @cfg {Boolean} isResizingContainer = not sure if this is used..
     */
    isResizingContainer : true,
    /**
     * @cfg {Number} columnWidth  width of the columns 
     */

    columnWidth : 0,

    /**
     * @cfg {Number} maxCols maximum number of columns
     */

    maxCols: 0,
    /**
     * @cfg {Number} padHeight padding below box..
     */

    padHeight : 10,

    /**
     * @cfg {Boolean} isAutoInitial defalut true
     */

    isAutoInitial : true,

    // private?
    gutter : 0,

    containerWidth: 0,
    initialColumnWidth : 0,
    currentSize : null,

    colYs : null, // array.
    maxY : 0,
    padWidth: 10,


    tag: 'div',
    cls: '',
    bricks: null, //CompositeElement
    cols : 0, // array?
    // element : null, // wrapped now this.el
    _isLayoutInited : null,


    getAutoCreate : function(){

        var cfg = {
            tag: this.tag,
            cls: 'blog-masonary-wrapper ' + this.cls,
            cn : {
                cls : 'mas-boxes masonary'
            }
        };

        return cfg;
    },

    getChildContainer: function( )
    {
        if (this.boxesEl) {
            return this.boxesEl;
        }

        this.boxesEl = this.el.select('.mas-boxes').first();

        return this.boxesEl;
    },


    initEvents : function()
    {
        var _this = this;

        if(this.isAutoInitial){
            Roo.log('hook children rendered');
            this.on('childrenrendered', function() {
                Roo.log('children rendered');
                _this.initial();
            } ,this);
        }

    },

    initial : function()
    {
        this.reloadItems();

        this.currentSize = this.el.getBox(true);

        /// was window resize... - let's see if this works..
        Roo.EventManager.onWindowResize(this.resize, this);

        if(!this.isAutoInitial){
            this.layout();
            return;
        }

        this.layout.defer(500,this);
    },

    reloadItems: function()
    {
        this.bricks = this.el.select('.masonry-brick', true);

        this.bricks.each(function(b) {
            //Roo.log(b.getSize());
            if (!b.attr('originalwidth')) {
                b.attr('originalwidth',  b.getSize().width);
            }

        });

        Roo.log(this.bricks.elements.length);
    },

    resize : function()
    {
        Roo.log('resize');
        var cs = this.el.getBox(true);

        if (this.currentSize.width == cs.width && this.currentSize.x == cs.x ) {
            Roo.log("no change in with or X");
            return;
        }
        this.currentSize = cs;
        this.layout();
    },

    layout : function()
    {
         Roo.log('layout');
        this._resetLayout();
        //this._manageStamps();

        // don't animate first layout
        var isInstant = this.isLayoutInstant !== undefined ? this.isLayoutInstant : !this._isLayoutInited;
        this.layoutItems( isInstant );

        // flag for initalized
        this._isLayoutInited = true;
    },

    layoutItems : function( isInstant )
    {
        //var items = this._getItemsForLayout( this.items );
        // original code supports filtering layout items.. we just ignore it..

        this._layoutItems( this.bricks , isInstant );

        this._postLayout();
    },
    _layoutItems : function ( items , isInstant)
    {
       //this.fireEvent( 'layout', this, items );


        if ( !items || !items.elements.length ) {
          // no items, emit event with empty array
            return;
        }

        var queue = [];
        items.each(function(item) {
            Roo.log("layout item");
            Roo.log(item);
            // get x/y object from method
            var position = this._getItemLayoutPosition( item );
            // enqueue
            position.item = item;
            position.isInstant = isInstant; // || item.isLayoutInstant; << not set yet...
            queue.push( position );
        }, this);

        this._processLayoutQueue( queue );
    },
    /** Sets position of item in DOM
    * @param {Element} item
    * @param {Number} x - horizontal position
    * @param {Number} y - vertical position
    * @param {Boolean} isInstant - disables transitions
    */
    _processLayoutQueue : function( queue )
    {
        for ( var i=0, len = queue.length; i < len; i++ ) {
            var obj = queue[i];
            obj.item.position('absolute');
            obj.item.setXY([obj.x,obj.y], obj.isInstant ? false : true);
        }
    },


    /**
    * Any logic you want to do after each layout,
    * i.e. size the container
    */
    _postLayout : function()
    {
        this.resizeContainer();
    },

    resizeContainer : function()
    {
        if ( !this.isResizingContainer ) {
            return;
        }
        var size = this._getContainerSize();
        if ( size ) {
            this.el.setSize(size.width,size.height);
            this.boxesEl.setSize(size.width,size.height);
        }
    },



    _resetLayout : function()
    {
        //this.getSize();  // -- does not really do anything.. it probably applies left/right etc. to obuject but not used
        this.colWidth = this.el.getWidth();
        //this.gutter = this.el.getWidth(); 

        this.measureColumns();

        // reset column Y
        var i = this.cols;
        this.colYs = [];
        while (i--) {
            this.colYs.push( 0 );
        }

        this.maxY = 0;
    },

    measureColumns : function()
    {
        this.getContainerWidth();
      // if columnWidth is 0, default to outerWidth of first item
        if ( !this.columnWidth ) {
            var firstItem = this.bricks.first();
            Roo.log(firstItem);
            this.columnWidth  = this.containerWidth;
            if (firstItem && firstItem.attr('originalwidth') ) {
                this.columnWidth = 1* (firstItem.attr('originalwidth') || firstItem.getWidth());
            }
            // columnWidth fall back to item of first element
            Roo.log("set column width?");
                        this.initialColumnWidth = this.columnWidth  ;

            // if first elem has no width, default to size of container

        }


        if (this.initialColumnWidth) {
            this.columnWidth = this.initialColumnWidth;
        }



        // column width is fixed at the top - however if container width get's smaller we should
        // reduce it...

        // this bit calcs how man columns..

        var columnWidth = this.columnWidth += this.gutter;

        // calculate columns
        var containerWidth = this.containerWidth + this.gutter;

        var cols = (containerWidth - this.padWidth) / (columnWidth - this.padWidth);
        // fix rounding errors, typically with gutters
        var excess = columnWidth - containerWidth % columnWidth;


        // if overshoot is less than a pixel, round up, otherwise floor it
        var mathMethod = excess && excess < 1 ? 'round' : 'floor';
        cols = Math[ mathMethod ]( cols );
        this.cols = Math.max( cols, 1 );
        this.cols = this.maxCols > 0 ? Math.min( this.cols, this.maxCols ) : this.cols;

         // padding positioning..
        var totalColWidth = this.cols * this.columnWidth;
        var padavail = this.containerWidth - totalColWidth;
        // so for 2 columns - we need 3 'pads'

        var padNeeded = (1+this.cols) * this.padWidth;

        var padExtra = Math.floor((padavail - padNeeded) / this.cols);

        this.columnWidth += padExtra
        //this.padWidth = Math.floor(padavail /  ( this.cols));

        // adjust colum width so that padding is fixed??

        // we have 3 columns ... total = width * 3
        // we have X left over... that should be used by 

        //if (this.expandC) {

        //}



    },

    getContainerWidth : function()
    {
       /* // container is parent if fit width
        var container = this.isFitWidth ? this.element.parentNode : this.element;
        // check that this.size and size are there
        // IE8 triggers resize on body size change, so they might not be
        
        var size = getSize( container );  //FIXME
        this.containerWidth = size && size.innerWidth; //FIXME
        */

        this.containerWidth = this.el.getBox(true).width;  //maybe use getComputedWidth

    },

    _getItemLayoutPosition : function( item )  // what is item?
    {
        // we resize the item to our columnWidth..

        item.setWidth(this.columnWidth);
        item.autoBoxAdjust  = false;

        var sz = item.getSize();

        // how many columns does this brick span
        var remainder = this.containerWidth % this.columnWidth;

        var mathMethod = remainder && remainder < 1 ? 'round' : 'ceil';
        // round if off by 1 pixel, otherwise use ceil
        var colSpan = Math[ mathMethod ]( sz.width  / this.columnWidth );
        colSpan = Math.min( colSpan, this.cols );

        // normally this should be '1' as we dont' currently allow multi width columns..

        var colGroup = this._getColGroup( colSpan );
        // get the minimum Y value from the columns
        var minimumY = Math.min.apply( Math, colGroup );
        Roo.log([ 'setHeight',  minimumY, sz.height, setHeight ]);

        var shortColIndex = colGroup.indexOf(  minimumY ); // broken on ie8..?? probably...

        // position the brick
        var position = {
            x: this.currentSize.x + (this.padWidth /2) + ((this.columnWidth + this.padWidth )* shortColIndex),
            y: this.currentSize.y + minimumY + this.padHeight
        };

        Roo.log(position);
        // apply setHeight to necessary columns
        var setHeight = minimumY + sz.height + this.padHeight;
        //Roo.log([ 'setHeight',  minimumY, sz.height, setHeight ]);

        var setSpan = this.cols + 1 - colGroup.length;
        for ( var i = 0; i < setSpan; i++ ) {
          this.colYs[ shortColIndex + i ] = setHeight ;
        }

        return position;
    },

    /**
     * @param {Number} colSpan - number of columns the element spans
     * @returns {Array} colGroup
     */
    _getColGroup : function( colSpan )
    {
        if ( colSpan < 2 ) {
          // if brick spans only one column, use all the column Ys
          return this.colYs;
        }

        var colGroup = [];
        // how many different places could this brick fit horizontally
        var groupCount = this.cols + 1 - colSpan;
        // for each group potential horizontal position
        for ( var i = 0; i < groupCount; i++ ) {
          // make an array of colY values for that one group
          var groupColYs = this.colYs.slice( i, i + colSpan );
          // and get the max value of the array
          colGroup[i] = Math.max.apply( Math, groupColYs );
        }
        return colGroup;
    },
    /*
    _manageStamp : function( stamp )
    {
        var stampSize =  stamp.getSize();
        var offset = stamp.getBox();
        // get the columns that this stamp affects
        var firstX = this.isOriginLeft ? offset.x : offset.right;
        var lastX = firstX + stampSize.width;
        var firstCol = Math.floor( firstX / this.columnWidth );
        firstCol = Math.max( 0, firstCol );
        
        var lastCol = Math.floor( lastX / this.columnWidth );
        // lastCol should not go over if multiple of columnWidth #425
        lastCol -= lastX % this.columnWidth ? 0 : 1;
        lastCol = Math.min( this.cols - 1, lastCol );
        
        // set colYs to bottom of the stamp
        var stampMaxY = ( this.isOriginTop ? offset.y : offset.bottom ) +
            stampSize.height;
            
        for ( var i = firstCol; i <= lastCol; i++ ) {
          this.colYs[i] = Math.max( stampMaxY, this.colYs[i] );
        }
    },
    */

    _getContainerSize : function()
    {
        this.maxY = Math.max.apply( Math, this.colYs );
        var size = {
            height: this.maxY
        };

        if ( this.isFitWidth ) {
            size.width = this._getContainerFitWidth();
        }

        return size;
    },

    _getContainerFitWidth : function()
    {
        var unusedCols = 0;
        // count unused columns
        var i = this.cols;
        while ( --i ) {
          if ( this.colYs[i] !== 0 ) {
            break;
          }
          unusedCols++;
        }
        // fit container to columns that have been used
        return ( this.cols - unusedCols ) * this.columnWidth - this.gutter;
    },

    needsResizeLayout : function()
    {
        var previousWidth = this.containerWidth;
        this.getContainerWidth();
        return previousWidth !== this.containerWidth;
    }

});