git.roojs.org Git - roojs1/blob - docs/symbols/src/Roo_bootstrap_LayoutMasonry.js.html

   1 <html><head><title>../roojs1/Roo/bootstrap/LayoutMasonry.js</title><link rel="stylesheet" type="text/css" href="../../../css/highlight-js.css"/></head><body class="highlightpage"><code class="jsdoc-pretty"><span class="jsdoc-comment">/**
   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 </span><span class="jsdoc-var">Roo.bootstrap.LayoutMasonry </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">){
  24     </span><span class="jsdoc-var">Roo.bootstrap.LayoutMasonry.superclass.constructor.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
  25 };
  26
  27 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.bootstrap.LayoutMasonry</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.bootstrap.Component</span><span class="jsdoc-syntax">,  {
  28
  29       </span><span class="jsdoc-comment">/**
  30      * @cfg {Boolean} isFitWidth  - resize the width..
  31      */
  32     </span><span class="jsdoc-var">isFitWidth </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,  </span><span class="jsdoc-comment">// options..
  33     /**
  34      * @cfg {Boolean} isOriginLeft = left align?
  35      */
  36     </span><span class="jsdoc-var">isOriginLeft </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
  37     </span><span class="jsdoc-comment">/**
  38      * @cfg {Boolean} isOriginTop = top align?
  39      */
  40     </span><span class="jsdoc-var">isOriginTop </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  41     </span><span class="jsdoc-comment">/**
  42      * @cfg {Boolean} isLayoutInstant = no animation?
  43      */
  44     </span><span class="jsdoc-var">isLayoutInstant </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">, </span><span class="jsdoc-comment">// needed?
  45     /**
  46      * @cfg {Boolean} isResizingContainer = not sure if this is used..
  47      */
  48     </span><span class="jsdoc-var">isResizingContainer </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
  49     </span><span class="jsdoc-comment">/**
  50      * @cfg {Number} columnWidth  width of the columns
  51      */
  52
  53     </span><span class="jsdoc-var">columnWidth </span><span class="jsdoc-syntax">: 0,
  54     </span><span class="jsdoc-comment">/**
  55      * @cfg {Number} padHeight padding below box..
  56      */
  57
  58     </span><span class="jsdoc-var">padHeight </span><span class="jsdoc-syntax">: 10,
  59
  60     </span><span class="jsdoc-comment">// private?
  61     </span><span class="jsdoc-var">gutter </span><span class="jsdoc-syntax">: 0,
  62
  63     </span><span class="jsdoc-var">containerWidth</span><span class="jsdoc-syntax">: 0,
  64     </span><span class="jsdoc-var">currentSize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">,
  65
  66     </span><span class="jsdoc-var">colYs </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">, </span><span class="jsdoc-comment">// array.
  67     </span><span class="jsdoc-var">maxY </span><span class="jsdoc-syntax">: 0,
  68     </span><span class="jsdoc-var">padWidth</span><span class="jsdoc-syntax">: 0,
  69
  70
  71     </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
  72     </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
  73     </span><span class="jsdoc-var">bricks</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">, </span><span class="jsdoc-comment">//CompositeElement
  74     </span><span class="jsdoc-var">cols </span><span class="jsdoc-syntax">: 0, </span><span class="jsdoc-comment">// array?
  75     // element : null, // wrapped now this.el
  76     </span><span class="jsdoc-var">_isLayoutInited </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">,
  77
  78
  79     </span><span class="jsdoc-var">getAutoCreate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
  80
  81         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cfg </span><span class="jsdoc-syntax">= {
  82             </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.tag</span><span class="jsdoc-syntax">,
  83             </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'blog-masonary-wrapper ' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.cls</span><span class="jsdoc-syntax">,
  84             </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: {
  85                 </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'mas-boxes masonary'
  86             </span><span class="jsdoc-syntax">}
  87         };
  88
  89
  90         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">;
  91     },
  92     </span><span class="jsdoc-var">getChildContainer</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">( )
  93     {
  94         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.boxesEl</span><span class="jsdoc-syntax">) {
  95             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.boxesEl</span><span class="jsdoc-syntax">;
  96             </span><span class="jsdoc-comment">//code
  97         </span><span class="jsdoc-syntax">}
  98         </span><span class="jsdoc-var">this.boxesEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.mas-boxes'</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">();
  99         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.boxesEl</span><span class="jsdoc-syntax">;
 100     },
 101
 102
 103     </span><span class="jsdoc-var">initEvents </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 104     {
 105
 106
 107
 108
 109         </span><span class="jsdoc-var">this.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'childrenrendered'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
 110             </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;children rendered&quot;</span><span class="jsdoc-syntax">);
 111
 112             </span><span class="jsdoc-var">this.reloadItems</span><span class="jsdoc-syntax">();
 113             </span><span class="jsdoc-comment">// this.stamps = []; // wtf are stamps?
 114             // this.initStamp(); //???
 115             </span><span class="jsdoc-var">this.currentSize </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.getBox</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
 116
 117             </span><span class="jsdoc-comment">/// was window resize... - let's see if this works..
 118             </span><span class="jsdoc-var">Roo.EventManager.onWindowResize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.resize</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 119
 120
 121             </span><span class="jsdoc-var">this.layout.defer</span><span class="jsdoc-syntax">(500,</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);;
 122
 123
 124         } ,</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 125
 126
 127     },
 128
 129     </span><span class="jsdoc-var">reloadItems</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 130     {
 131         </span><span class="jsdoc-var">this.bricks </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.masonry-brick'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
 132
 133         </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.bricks.elements.length</span><span class="jsdoc-syntax">);
 134     },
 135
 136
 137     </span><span class="jsdoc-var">resize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 138     {
 139         </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'resize'</span><span class="jsdoc-syntax">);
 140         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cs </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.getBox</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
 141
 142
 143         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.currentSize.width </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">cs.width </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.currentSize.x </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">cs.x </span><span class="jsdoc-syntax">) {
 144             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 145         }
 146         </span><span class="jsdoc-var">this.currentSize </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cs</span><span class="jsdoc-syntax">;
 147         </span><span class="jsdoc-var">this.layout</span><span class="jsdoc-syntax">();
 148     },
 149     </span><span class="jsdoc-var">layout </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 150     {
 151         </span><span class="jsdoc-var">this._resetLayout</span><span class="jsdoc-syntax">();
 152         </span><span class="jsdoc-comment">//this._manageStamps();
 153
 154         // don't animate first layout
 155         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">isInstant </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.isLayoutInstant </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-var">undefined </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">this.isLayoutInstant </span><span class="jsdoc-syntax">: !</span><span class="jsdoc-var">this._isLayoutInited</span><span class="jsdoc-syntax">;
 156         </span><span class="jsdoc-var">this.layoutItems</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">isInstant </span><span class="jsdoc-syntax">);
 157
 158         </span><span class="jsdoc-comment">// flag for initalized
 159         </span><span class="jsdoc-var">this._isLayoutInited </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
 160     },
 161
 162     </span><span class="jsdoc-var">layoutItems </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">isInstant </span><span class="jsdoc-syntax">)
 163     {
 164         </span><span class="jsdoc-comment">//var items = this._getItemsForLayout( this.items );
 165         // original code supports filtering layout items.. we just ignore it..
 166
 167         </span><span class="jsdoc-var">this._layoutItems</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">this.bricks </span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">isInstant </span><span class="jsdoc-syntax">);
 168
 169         </span><span class="jsdoc-var">this._postLayout</span><span class="jsdoc-syntax">();
 170     },
 171     </span><span class="jsdoc-var">_layoutItems </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">items </span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">isInstant</span><span class="jsdoc-syntax">)
 172     {
 173        </span><span class="jsdoc-comment">//this.fireEvent( 'layout', this, items );
 174
 175
 176         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">( !</span><span class="jsdoc-var">items </span><span class="jsdoc-syntax">|| !</span><span class="jsdoc-var">items.elements.length </span><span class="jsdoc-syntax">) {
 177           </span><span class="jsdoc-comment">// no items, emit event with empty array
 178             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 179         }
 180
 181         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">queue </span><span class="jsdoc-syntax">= [];
 182         </span><span class="jsdoc-var">items.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">) {
 183             </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;layout item&quot;</span><span class="jsdoc-syntax">);
 184             </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">);
 185             </span><span class="jsdoc-comment">// get x/y object from method
 186             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">position </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this._getItemLayoutPosition</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">item </span><span class="jsdoc-syntax">);
 187             </span><span class="jsdoc-comment">// enqueue
 188             </span><span class="jsdoc-var">position.item </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">;
 189             </span><span class="jsdoc-var">position.isInstant </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">isInstant</span><span class="jsdoc-syntax">; </span><span class="jsdoc-comment">// || item.isLayoutInstant; &lt;&lt; not set yet...
 190             </span><span class="jsdoc-var">queue.push</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">position </span><span class="jsdoc-syntax">);
 191         }, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 192
 193         </span><span class="jsdoc-var">this._processLayoutQueue</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">queue </span><span class="jsdoc-syntax">);
 194     },
 195     </span><span class="jsdoc-comment">/** Sets position of item in DOM
 196     * @param {Element} item
 197     * @param {Number} x - horizontal position
 198     * @param {Number} y - vertical position
 199     * @param {Boolean} isInstant - disables transitions
 200     */
 201     </span><span class="jsdoc-var">_processLayoutQueue </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">queue </span><span class="jsdoc-syntax">)
 202     {
 203         </span><span class="jsdoc-keyword">for </span><span class="jsdoc-syntax">( </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">=0, </span><span class="jsdoc-var">len </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">queue.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++ ) {
 204             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">obj </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">queue</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">];
 205             </span><span class="jsdoc-var">obj.item.position</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'absolute'</span><span class="jsdoc-syntax">);
 206             </span><span class="jsdoc-var">obj.item.setXY</span><span class="jsdoc-syntax">([</span><span class="jsdoc-var">obj.x</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">obj.y</span><span class="jsdoc-syntax">], </span><span class="jsdoc-var">obj.isInstant </span><span class="jsdoc-syntax">? </span><span class="jsdoc-keyword">false </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
 207         }
 208     },
 209
 210
 211     </span><span class="jsdoc-comment">/**
 212     * Any logic you want to do after each layout,
 213     * i.e. size the container
 214     */
 215     </span><span class="jsdoc-var">_postLayout </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 216     {
 217         </span><span class="jsdoc-var">this.resizeContainer</span><span class="jsdoc-syntax">();
 218     },
 219
 220     </span><span class="jsdoc-var">resizeContainer </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 221     {
 222         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">( !</span><span class="jsdoc-var">this.isResizingContainer </span><span class="jsdoc-syntax">) {
 223             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 224         }
 225         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">size </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this._getContainerSize</span><span class="jsdoc-syntax">();
 226         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">size </span><span class="jsdoc-syntax">) {
 227             </span><span class="jsdoc-var">this.el.setSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">size.width</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">size.height</span><span class="jsdoc-syntax">);
 228             </span><span class="jsdoc-var">this.boxesEl.setSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">size.width</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">size.height</span><span class="jsdoc-syntax">);
 229         }
 230     },
 231
 232
 233
 234     </span><span class="jsdoc-var">_resetLayout </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 235     {
 236         </span><span class="jsdoc-comment">//this.getSize();  // -- does not really do anything.. it probably applies left/right etc. to obuject but not used
 237         </span><span class="jsdoc-var">this.colWidth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.getWidth</span><span class="jsdoc-syntax">();
 238         </span><span class="jsdoc-comment">//this.gutter = this.el.getWidth();
 239
 240         </span><span class="jsdoc-var">this.measureColumns</span><span class="jsdoc-syntax">();
 241
 242         </span><span class="jsdoc-comment">// reset column Y
 243         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.cols</span><span class="jsdoc-syntax">;
 244         </span><span class="jsdoc-var">this.colYs </span><span class="jsdoc-syntax">= [];
 245         </span><span class="jsdoc-keyword">while </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">--) {
 246             </span><span class="jsdoc-var">this.colYs.push</span><span class="jsdoc-syntax">( 0 );
 247         }
 248
 249         </span><span class="jsdoc-var">this.maxY </span><span class="jsdoc-syntax">= 0;
 250     },
 251
 252     </span><span class="jsdoc-var">measureColumns </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 253     {
 254         </span><span class="jsdoc-var">this.getContainerWidth</span><span class="jsdoc-syntax">();
 255       </span><span class="jsdoc-comment">// if columnWidth is 0, default to outerWidth of first item
 256         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">( !</span><span class="jsdoc-var">this.columnWidth </span><span class="jsdoc-syntax">) {
 257             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">firstItem </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.bricks.first</span><span class="jsdoc-syntax">();
 258
 259             </span><span class="jsdoc-comment">// columnWidth fall back to item of first element
 260             </span><span class="jsdoc-var">this.columnWidth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">firstItem </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">firstItem.getWidth</span><span class="jsdoc-syntax">() ||  </span><span class="jsdoc-var">this.containerWidth</span><span class="jsdoc-syntax">;
 261
 262               </span><span class="jsdoc-comment">// if first elem has no width, default to size of container
 263
 264         </span><span class="jsdoc-syntax">}
 265
 266         </span><span class="jsdoc-comment">// column width is fixed at the top - however if container width get's smaller we should
 267         // reduce it...
 268
 269         // this bit calcs how man columns..
 270
 271         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">columnWidth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.columnWidth </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">this.gutter</span><span class="jsdoc-syntax">;
 272
 273         </span><span class="jsdoc-comment">// calculate columns
 274         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">containerWidth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.containerWidth </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.gutter</span><span class="jsdoc-syntax">;
 275         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cols </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">containerWidth </span><span class="jsdoc-syntax">/ </span><span class="jsdoc-var">columnWidth</span><span class="jsdoc-syntax">;
 276         </span><span class="jsdoc-comment">// fix rounding errors, typically with gutters
 277         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">excess </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">columnWidth </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">containerWidth </span><span class="jsdoc-syntax">% </span><span class="jsdoc-var">columnWidth</span><span class="jsdoc-syntax">;
 278         </span><span class="jsdoc-comment">// if overshoot is less than a pixel, round up, otherwise floor it
 279         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">mathMethod </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">excess </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">excess </span><span class="jsdoc-syntax">&lt; 1 ? </span><span class="jsdoc-string">'round' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'floor'</span><span class="jsdoc-syntax">;
 280         </span><span class="jsdoc-var">cols </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math</span><span class="jsdoc-syntax">[ </span><span class="jsdoc-var">mathMethod </span><span class="jsdoc-syntax">]( </span><span class="jsdoc-var">cols </span><span class="jsdoc-syntax">);
 281         </span><span class="jsdoc-var">this.cols </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.max</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">cols</span><span class="jsdoc-syntax">, 1 );
 282
 283
 284          </span><span class="jsdoc-comment">// padding positioning..
 285         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">totalColWidth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.cols </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">this.columnWidth</span><span class="jsdoc-syntax">;
 286         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">padavail </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.containerWidth </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">totalColWidth</span><span class="jsdoc-syntax">;
 287         </span><span class="jsdoc-comment">// so for 2 columns - we need 3 'pads'
 288         </span><span class="jsdoc-var">this.padWidth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.floor</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">padavail </span><span class="jsdoc-syntax">/  ( </span><span class="jsdoc-var">this.cols</span><span class="jsdoc-syntax">));
 289
 290
 291     },
 292
 293     </span><span class="jsdoc-var">getContainerWidth </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 294     {
 295        </span><span class="jsdoc-comment">/* // container is parent if fit width
 296         var container = this.isFitWidth ? this.element.parentNode : this.element;
 297         // check that this.size and size are there
 298         // IE8 triggers resize on body size change, so they might not be
 299
 300         var size = getSize( container );  //FIXME
 301         this.containerWidth = size &amp;&amp; size.innerWidth; //FIXME
 302         */
 303
 304         </span><span class="jsdoc-var">this.containerWidth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.getBox</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.width</span><span class="jsdoc-syntax">;  </span><span class="jsdoc-comment">//maybe use getComputedWidth
 305
 306     </span><span class="jsdoc-syntax">},
 307
 308     </span><span class="jsdoc-var">_getItemLayoutPosition </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">item </span><span class="jsdoc-syntax">)  </span><span class="jsdoc-comment">// what is item?
 309     </span><span class="jsdoc-syntax">{
 310         </span><span class="jsdoc-comment">// we resize the item to our columnWidth..
 311         </span><span class="jsdoc-var">item.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.columnWidth</span><span class="jsdoc-syntax">);
 312         </span><span class="jsdoc-var">item.autoBoxAdjust  </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 313
 314         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">sz </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">item.getSize</span><span class="jsdoc-syntax">();
 315
 316         </span><span class="jsdoc-comment">// how many columns does this brick span
 317         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">remainder </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.containerWidth </span><span class="jsdoc-syntax">% </span><span class="jsdoc-var">this.columnWidth</span><span class="jsdoc-syntax">;
 318
 319         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">mathMethod </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">remainder </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">remainder </span><span class="jsdoc-syntax">&lt; 1 ? </span><span class="jsdoc-string">'round' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'ceil'</span><span class="jsdoc-syntax">;
 320         </span><span class="jsdoc-comment">// round if off by 1 pixel, otherwise use ceil
 321         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">colSpan </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math</span><span class="jsdoc-syntax">[ </span><span class="jsdoc-var">mathMethod </span><span class="jsdoc-syntax">]( </span><span class="jsdoc-var">sz.width  </span><span class="jsdoc-syntax">/ </span><span class="jsdoc-var">this.columnWidth </span><span class="jsdoc-syntax">);
 322         </span><span class="jsdoc-var">colSpan </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.min</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">colSpan</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.cols </span><span class="jsdoc-syntax">);
 323
 324         </span><span class="jsdoc-comment">// normally this should be '1' as we dont' currently allow multi width columns..
 325
 326         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">colGroup </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this._getColGroup</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">colSpan </span><span class="jsdoc-syntax">);
 327         </span><span class="jsdoc-comment">// get the minimum Y value from the columns
 328         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">minimumY </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.min.apply</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">Math</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">colGroup </span><span class="jsdoc-syntax">);
 329         </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">([ </span><span class="jsdoc-string">'setHeight'</span><span class="jsdoc-syntax">,  </span><span class="jsdoc-var">minimumY</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">sz.height</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">setHeight </span><span class="jsdoc-syntax">]);
 330
 331         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">shortColIndex </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">colGroup.indexOf</span><span class="jsdoc-syntax">(  </span><span class="jsdoc-var">minimumY </span><span class="jsdoc-syntax">); </span><span class="jsdoc-comment">// broken on ie8..?? probably...
 332
 333         // position the brick
 334         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">position </span><span class="jsdoc-syntax">= {
 335             </span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.currentSize.x </span><span class="jsdoc-syntax">+ (</span><span class="jsdoc-var">this.padWidth </span><span class="jsdoc-syntax">/2) + ((</span><span class="jsdoc-var">this.columnWidth </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.padWidth </span><span class="jsdoc-syntax">)* </span><span class="jsdoc-var">shortColIndex</span><span class="jsdoc-syntax">),
 336             </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.currentSize.y </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">minimumY </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.padHeight
 337         </span><span class="jsdoc-syntax">};
 338
 339         </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">);
 340         </span><span class="jsdoc-comment">// apply setHeight to necessary columns
 341         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">setHeight </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">minimumY </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">sz.height </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.padHeight</span><span class="jsdoc-syntax">;
 342         </span><span class="jsdoc-comment">//Roo.log([ 'setHeight',  minimumY, sz.height, setHeight ]);
 343
 344         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">setSpan </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.cols </span><span class="jsdoc-syntax">+ 1 - </span><span class="jsdoc-var">colGroup.length</span><span class="jsdoc-syntax">;
 345         </span><span class="jsdoc-keyword">for </span><span class="jsdoc-syntax">( </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= 0; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">setSpan</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++ ) {
 346           </span><span class="jsdoc-var">this.colYs</span><span class="jsdoc-syntax">[ </span><span class="jsdoc-var">shortColIndex </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">setHeight </span><span class="jsdoc-syntax">;
 347         }
 348
 349         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">;
 350     },
 351
 352     </span><span class="jsdoc-comment">/**
 353      * @param {Number} colSpan - number of columns the element spans
 354      * @returns {Array} colGroup
 355      */
 356     </span><span class="jsdoc-var">_getColGroup </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">colSpan </span><span class="jsdoc-syntax">)
 357     {
 358         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">colSpan </span><span class="jsdoc-syntax">&lt; 2 ) {
 359           </span><span class="jsdoc-comment">// if brick spans only one column, use all the column Ys
 360           </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.colYs</span><span class="jsdoc-syntax">;
 361         }
 362
 363         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">colGroup </span><span class="jsdoc-syntax">= [];
 364         </span><span class="jsdoc-comment">// how many different places could this brick fit horizontally
 365         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">groupCount </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.cols </span><span class="jsdoc-syntax">+ 1 - </span><span class="jsdoc-var">colSpan</span><span class="jsdoc-syntax">;
 366         </span><span class="jsdoc-comment">// for each group potential horizontal position
 367         </span><span class="jsdoc-keyword">for </span><span class="jsdoc-syntax">( </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= 0; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">groupCount</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++ ) {
 368           </span><span class="jsdoc-comment">// make an array of colY values for that one group
 369           </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">groupColYs </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.colYs.slice</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">colSpan </span><span class="jsdoc-syntax">);
 370           </span><span class="jsdoc-comment">// and get the max value of the array
 371           </span><span class="jsdoc-var">colGroup</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">Math.max.apply</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">Math</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">groupColYs </span><span class="jsdoc-syntax">);
 372         }
 373         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">colGroup</span><span class="jsdoc-syntax">;
 374     },
 375     </span><span class="jsdoc-comment">/*
 376     _manageStamp : function( stamp )
 377     {
 378         var stampSize =  stamp.getSize();
 379         var offset = stamp.getBox();
 380         // get the columns that this stamp affects
 381         var firstX = this.isOriginLeft ? offset.x : offset.right;
 382         var lastX = firstX + stampSize.width;
 383         var firstCol = Math.floor( firstX / this.columnWidth );
 384         firstCol = Math.max( 0, firstCol );
 385
 386         var lastCol = Math.floor( lastX / this.columnWidth );
 387         // lastCol should not go over if multiple of columnWidth #425
 388         lastCol -= lastX % this.columnWidth ? 0 : 1;
 389         lastCol = Math.min( this.cols - 1, lastCol );
 390
 391         // set colYs to bottom of the stamp
 392         var stampMaxY = ( this.isOriginTop ? offset.y : offset.bottom ) +
 393             stampSize.height;
 394
 395         for ( var i = firstCol; i &lt;= lastCol; i++ ) {
 396           this.colYs[i] = Math.max( stampMaxY, this.colYs[i] );
 397         }
 398     },
 399     */
 400
 401     </span><span class="jsdoc-var">_getContainerSize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 402     {
 403         </span><span class="jsdoc-var">this.maxY </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.max.apply</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">Math</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.colYs </span><span class="jsdoc-syntax">);
 404         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">size </span><span class="jsdoc-syntax">= {
 405             </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.maxY
 406         </span><span class="jsdoc-syntax">};
 407
 408         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">this.isFitWidth </span><span class="jsdoc-syntax">) {
 409             </span><span class="jsdoc-var">size.width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this._getContainerFitWidth</span><span class="jsdoc-syntax">();
 410         }
 411
 412         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">size</span><span class="jsdoc-syntax">;
 413     },
 414
 415     </span><span class="jsdoc-var">_getContainerFitWidth </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 416     {
 417         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">unusedCols </span><span class="jsdoc-syntax">= 0;
 418         </span><span class="jsdoc-comment">// count unused columns
 419         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.cols</span><span class="jsdoc-syntax">;
 420         </span><span class="jsdoc-keyword">while </span><span class="jsdoc-syntax">( --</span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">) {
 421           </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">this.colYs</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">] !== 0 ) {
 422             </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 423           }
 424           </span><span class="jsdoc-var">unusedCols</span><span class="jsdoc-syntax">++;
 425         }
 426         </span><span class="jsdoc-comment">// fit container to columns that have been used
 427         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">this.cols </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">unusedCols </span><span class="jsdoc-syntax">) * </span><span class="jsdoc-var">this.columnWidth </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.gutter</span><span class="jsdoc-syntax">;
 428     },
 429
 430     </span><span class="jsdoc-var">needsResizeLayout </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 431     {
 432         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">previousWidth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.containerWidth</span><span class="jsdoc-syntax">;
 433         </span><span class="jsdoc-var">this.getContainerWidth</span><span class="jsdoc-syntax">();
 434         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">previousWidth </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-var">this.containerWidth</span><span class="jsdoc-syntax">;
 435     }
 436
 437 });
 438
 439
 440
 441  </span></code></body></html>