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

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