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

   1 <html><head><title>Roo/bootstrap/Popover.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  * - LGPL
   3  *
   4  * element
   5  *
   6  */
   7
   8 /**
   9  * @class Roo.bootstrap.Popover
  10  * @extends Roo.bootstrap.Component
  11  * @parent none builder
  12  * @children Roo.bootstrap.Component
  13  * Bootstrap Popover class
  14  * @cfg {String} html contents of the popover   (or false to use children..)
  15  * @cfg {String} title of popover (or false to hide)
  16  * @cfg {String|function} (right|top|bottom|left|auto) placement how it is placed
  17  * @cfg {String} trigger click || hover (or false to trigger manually)
  18  * @cfg {Boolean} modal - popovers that are modal will mask the screen, and must be closed with another event.
  19  * @cfg {String|Boolean|Roo.Element} add click hander to trigger show over what element
  20  *      - if false and it has a 'parent' then it will be automatically added to that element
  21  *      - if string - Roo.get  will be called
  22  * @cfg {Number} delay - delay before showing
  23
  24  * @constructor
  25  * Create a new Popover
  26  * @param {Object} config The config object
  27  */
  28
  29 </span><span class="jsdoc-var">Roo.bootstrap.Popover </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">){
  30     </span><span class="jsdoc-var">Roo.bootstrap.Popover.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">);
  31
  32     </span><span class="jsdoc-var">this.addEvents</span><span class="jsdoc-syntax">({
  33         </span><span class="jsdoc-comment">// raw events
  34          /**
  35          * @event show
  36          * After the popover show
  37          *
  38          * @param {Roo.bootstrap.Popover} this
  39          */
  40         </span><span class="jsdoc-string">&quot;show&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
  41         </span><span class="jsdoc-comment">/**
  42          * @event hide
  43          * After the popover hide
  44          *
  45          * @param {Roo.bootstrap.Popover} this
  46          */
  47         </span><span class="jsdoc-string">&quot;hide&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
  48     </span><span class="jsdoc-syntax">});
  49 };
  50
  51 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.bootstrap.Popover</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.bootstrap.Component</span><span class="jsdoc-syntax">,  {
  52
  53     </span><span class="jsdoc-var">title</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  54     </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  55
  56     </span><span class="jsdoc-var">placement </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'right'</span><span class="jsdoc-syntax">,
  57     </span><span class="jsdoc-var">trigger </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'hover'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-comment">// hover
  58     </span><span class="jsdoc-var">modal </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  59     </span><span class="jsdoc-var">delay </span><span class="jsdoc-syntax">: 0,
  60
  61     </span><span class="jsdoc-var">over</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  62
  63     </span><span class="jsdoc-var">can_build_overlaid </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  64
  65     </span><span class="jsdoc-var">maskEl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">, </span><span class="jsdoc-comment">// the mask element
  66     </span><span class="jsdoc-var">headerEl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  67     </span><span class="jsdoc-var">contentEl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  68     </span><span class="jsdoc-var">alignEl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">, </span><span class="jsdoc-comment">// when show is called with an element - this get's stored.
  69
  70     </span><span class="jsdoc-var">getChildContainer </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
  71     {
  72         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.contentEl</span><span class="jsdoc-syntax">;
  73
  74     },
  75     </span><span class="jsdoc-var">getPopoverHeader </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
  76     {
  77         </span><span class="jsdoc-var">this.title </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">; </span><span class="jsdoc-comment">// flag not to hide it..
  78         </span><span class="jsdoc-var">this.headerEl.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'p-0'</span><span class="jsdoc-syntax">);
  79         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.headerEl
  80     </span><span class="jsdoc-syntax">},
  81
  82
  83     </span><span class="jsdoc-var">getAutoCreate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
  84
  85         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cfg </span><span class="jsdoc-syntax">= {
  86            </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'popover roo-dynamic shadow roo-popover' </span><span class="jsdoc-syntax">+ (</span><span class="jsdoc-var">this.modal </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">'-modal' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">),
  87            </span><span class="jsdoc-var">style</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'display:block'</span><span class="jsdoc-syntax">,
  88            </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: [
  89                 {
  90                     </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'arrow'
  91                 </span><span class="jsdoc-syntax">},
  92                 {
  93                     </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'popover-inner '</span><span class="jsdoc-syntax">,
  94                     </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: [
  95                         {
  96                             </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'h3'</span><span class="jsdoc-syntax">,
  97                             </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'popover-title popover-header'</span><span class="jsdoc-syntax">,
  98                             </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.title </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-keyword">false </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">'' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.title
  99                         </span><span class="jsdoc-syntax">},
 100                         {
 101                             </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'popover-content popover-body '  </span><span class="jsdoc-syntax">+ (</span><span class="jsdoc-var">this.cls </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">),
 102                             </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.html </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-string">''
 103                         </span><span class="jsdoc-syntax">}
 104                     ]
 105
 106                 }
 107            ]
 108         };
 109
 110         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">;
 111     },
 112     </span><span class="jsdoc-comment">/**
 113      * @param {string} the title
 114      */
 115     </span><span class="jsdoc-var">setTitle</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">str</span><span class="jsdoc-syntax">)
 116     {
 117         </span><span class="jsdoc-var">this.title </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">str</span><span class="jsdoc-syntax">;
 118         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">) {
 119             </span><span class="jsdoc-var">this.headerEl.dom.innerHTML </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">str</span><span class="jsdoc-syntax">;
 120         }
 121
 122     },
 123     </span><span class="jsdoc-comment">/**
 124      * @param {string} the body content
 125      */
 126     </span><span class="jsdoc-var">setContent</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">str</span><span class="jsdoc-syntax">)
 127     {
 128         </span><span class="jsdoc-var">this.html </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">str</span><span class="jsdoc-syntax">;
 129         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.contentEl</span><span class="jsdoc-syntax">) {
 130             </span><span class="jsdoc-var">this.contentEl.dom.innerHTML </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">str</span><span class="jsdoc-syntax">;
 131         }
 132
 133     },
 134     </span><span class="jsdoc-comment">// as it get's added to the bottom of the page.
 135     </span><span class="jsdoc-var">onRender </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ct</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">)
 136     {
 137         </span><span class="jsdoc-var">Roo.bootstrap.Component.superclass.onRender.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ct</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">);
 138
 139
 140
 141         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">){
 142             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cfg </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.apply</span><span class="jsdoc-syntax">({},  </span><span class="jsdoc-var">this.getAutoCreate</span><span class="jsdoc-syntax">());
 143             </span><span class="jsdoc-var">cfg.id </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.id</span><span class="jsdoc-syntax">();
 144
 145             </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.cls</span><span class="jsdoc-syntax">) {
 146                 </span><span class="jsdoc-var">cfg.cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' ' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.cls</span><span class="jsdoc-syntax">;
 147             }
 148             </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.style</span><span class="jsdoc-syntax">) {
 149                 </span><span class="jsdoc-var">cfg.style </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.style</span><span class="jsdoc-syntax">;
 150             }
 151             </span><span class="jsdoc-comment">//Roo.log(&quot;adding to &quot;);
 152             </span><span class="jsdoc-var">this.el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">document.body</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.createChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">);
 153 </span><span class="jsdoc-comment">//            Roo.log(this.el);
 154         </span><span class="jsdoc-syntax">}
 155
 156         </span><span class="jsdoc-var">this.contentEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.popover-content'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">();
 157         </span><span class="jsdoc-var">this.headerEl </span><span class="jsdoc-syntax">=  </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.popover-title'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">();
 158
 159         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">nitems </span><span class="jsdoc-syntax">= [];
 160         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.items</span><span class="jsdoc-syntax">) != </span><span class="jsdoc-string">'undefined'</span><span class="jsdoc-syntax">){
 161             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">items </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.items</span><span class="jsdoc-syntax">;
 162             </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">this.items</span><span class="jsdoc-syntax">;
 163
 164             </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">items.length</span><span class="jsdoc-syntax">;</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++) {
 165                 </span><span class="jsdoc-var">nitems.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.addxtype</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.apply</span><span class="jsdoc-syntax">({}, </span><span class="jsdoc-var">items</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">])));
 166             }
 167         }
 168
 169         </span><span class="jsdoc-var">this.items </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">nitems</span><span class="jsdoc-syntax">;
 170
 171         </span><span class="jsdoc-var">this.maskEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.DomHelper.append</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">document.body</span><span class="jsdoc-syntax">, {</span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;div&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;x-dlg-mask&quot;</span><span class="jsdoc-syntax">}, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
 172         </span><span class="jsdoc-var">Roo.EventManager.onWindowResize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.resizeMask</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
 173
 174
 175
 176         </span><span class="jsdoc-var">this.initEvents</span><span class="jsdoc-syntax">();
 177     },
 178
 179     </span><span class="jsdoc-var">resizeMask </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 180     {
 181         </span><span class="jsdoc-var">this.maskEl.setSize</span><span class="jsdoc-syntax">(
 182             </span><span class="jsdoc-var">Roo.lib.Dom.getViewWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">),
 183             </span><span class="jsdoc-var">Roo.lib.Dom.getViewHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)
 184         );
 185     },
 186
 187     </span><span class="jsdoc-var">initEvents </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 188     {
 189
 190         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.modal</span><span class="jsdoc-syntax">) {
 191             </span><span class="jsdoc-var">Roo.bootstrap.Popover.register</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 192         }
 193
 194         </span><span class="jsdoc-var">this.arrowEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.arrow'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">();
 195         </span><span class="jsdoc-var">this.headerEl.setVisibilityMode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.Element.DISPLAY</span><span class="jsdoc-syntax">); </span><span class="jsdoc-comment">// probably not needed as it's default in BS4
 196         </span><span class="jsdoc-var">this.el.enableDisplayMode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'block'</span><span class="jsdoc-syntax">);
 197         </span><span class="jsdoc-var">this.el.hide</span><span class="jsdoc-syntax">();
 198
 199
 200         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.over </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-keyword">false </span><span class="jsdoc-syntax">&amp;&amp; !</span><span class="jsdoc-var">this.parent</span><span class="jsdoc-syntax">()) {
 201             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 202         }
 203         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.triggers </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">) {
 204             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 205         }
 206
 207         </span><span class="jsdoc-comment">// support parent
 208         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">on_el </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">this.over </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'parent' </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.over </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">) ? </span><span class="jsdoc-var">this.parent</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.el </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.over</span><span class="jsdoc-syntax">);
 209         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">triggers </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.trigger </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">this.trigger.split</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">' '</span><span class="jsdoc-syntax">) : [];
 210         </span><span class="jsdoc-var">Roo.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">triggers</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">trigger</span><span class="jsdoc-syntax">) {
 211
 212             </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">trigger </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'click'</span><span class="jsdoc-syntax">) {
 213                 </span><span class="jsdoc-var">on_el.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'click'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.toggle</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 214             } </span><span class="jsdoc-keyword">else if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">trigger </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-string">'manual'</span><span class="jsdoc-syntax">) {
 215                 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">eventIn  </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">trigger </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'hover' </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">'mouseenter' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'focusin'</span><span class="jsdoc-syntax">;
 216                 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">eventOut </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">trigger </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'hover' </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">'mouseleave' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'focusout'</span><span class="jsdoc-syntax">;
 217
 218                 </span><span class="jsdoc-var">on_el.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">eventIn  </span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">this.enter</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 219                 </span><span class="jsdoc-var">on_el.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">eventOut</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.leave</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 220             }
 221         }, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 222     },
 223
 224
 225     </span><span class="jsdoc-comment">// private
 226     </span><span class="jsdoc-var">timeout </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">,
 227     </span><span class="jsdoc-var">hoverState </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">,
 228
 229     </span><span class="jsdoc-var">toggle </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">() {
 230         </span><span class="jsdoc-var">this.hoverState </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'in' </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">this.leave</span><span class="jsdoc-syntax">() : </span><span class="jsdoc-var">this.enter</span><span class="jsdoc-syntax">();
 231     },
 232
 233     </span><span class="jsdoc-var">enter </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">() {
 234
 235         </span><span class="jsdoc-var">clearTimeout</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.timeout</span><span class="jsdoc-syntax">);
 236
 237         </span><span class="jsdoc-var">this.hoverState </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'in'</span><span class="jsdoc-syntax">;
 238
 239         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.delay </span><span class="jsdoc-syntax">|| !</span><span class="jsdoc-var">this.delay.show</span><span class="jsdoc-syntax">) {
 240             </span><span class="jsdoc-var">this.show</span><span class="jsdoc-syntax">();
 241             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 242         }
 243         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">_t </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
 244         </span><span class="jsdoc-var">this.timeout </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">setTimeout</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">() {
 245             </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">_t.hoverState </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'in'</span><span class="jsdoc-syntax">) {
 246                 </span><span class="jsdoc-var">_t.show</span><span class="jsdoc-syntax">();
 247             }
 248         }, </span><span class="jsdoc-var">this.delay.show</span><span class="jsdoc-syntax">)
 249     },
 250
 251     </span><span class="jsdoc-var">leave </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
 252         </span><span class="jsdoc-var">clearTimeout</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.timeout</span><span class="jsdoc-syntax">);
 253
 254         </span><span class="jsdoc-var">this.hoverState </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'out'</span><span class="jsdoc-syntax">;
 255
 256         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.delay </span><span class="jsdoc-syntax">|| !</span><span class="jsdoc-var">this.delay.hide</span><span class="jsdoc-syntax">) {
 257             </span><span class="jsdoc-var">this.hide</span><span class="jsdoc-syntax">();
 258             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 259         }
 260         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">_t </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
 261         </span><span class="jsdoc-var">this.timeout </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">setTimeout</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">() {
 262             </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">_t.hoverState </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'out'</span><span class="jsdoc-syntax">) {
 263                 </span><span class="jsdoc-var">_t.hide</span><span class="jsdoc-syntax">();
 264             }
 265         }, </span><span class="jsdoc-var">this.delay.hide</span><span class="jsdoc-syntax">)
 266     },
 267
 268     </span><span class="jsdoc-comment">/**
 269      * update the position of the dialog
 270      * normally this is needed if the popover get's bigger - due to a Table reload etc..
 271      *
 272      *
 273      */
 274
 275     </span><span class="jsdoc-var">doAlign </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 276     {
 277
 278         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.alignEl</span><span class="jsdoc-syntax">) {
 279             </span><span class="jsdoc-var">this.updatePosition</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.placement</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
 280
 281         } </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
 282             </span><span class="jsdoc-comment">// this is usually just done by the builder = to show the popoup in the middle of the scren.
 283             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">es </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.getSize</span><span class="jsdoc-syntax">();
 284             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.lib.Dom.getViewWidth</span><span class="jsdoc-syntax">()/2;
 285             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.lib.Dom.getViewHeight</span><span class="jsdoc-syntax">()/2;
 286             </span><span class="jsdoc-var">this.el.setXY</span><span class="jsdoc-syntax">([ </span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">-(</span><span class="jsdoc-var">es.width</span><span class="jsdoc-syntax">/2),  </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">-(</span><span class="jsdoc-var">es.height</span><span class="jsdoc-syntax">/2)] );
 287
 288         }
 289
 290
 291
 292
 293
 294     },
 295
 296     </span><span class="jsdoc-comment">/**
 297      * Show the popover
 298      * @param {Roo.Element|string|Boolean} - element to align and point to. (set align to [ pos, offset ])
 299      * @param {string} (left|right|top|bottom) position
 300      */
 301     </span><span class="jsdoc-var">show </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">on_el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">placement</span><span class="jsdoc-syntax">)
 302     {
 303         </span><span class="jsdoc-var">this.placement </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">placement</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-string">'undefined' </span><span class="jsdoc-syntax">?  </span><span class="jsdoc-var">this.placement   </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">placement</span><span class="jsdoc-syntax">;
 304         </span><span class="jsdoc-var">on_el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">on_el </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">; </span><span class="jsdoc-comment">// default to false
 305
 306         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">on_el</span><span class="jsdoc-syntax">) {
 307             </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.parent</span><span class="jsdoc-syntax">() &amp;&amp; (</span><span class="jsdoc-var">this.over </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'parent' </span><span class="jsdoc-syntax">|| (</span><span class="jsdoc-var">this.over </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">))) {
 308                 </span><span class="jsdoc-var">on_el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.parent</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.el</span><span class="jsdoc-syntax">;
 309             } </span><span class="jsdoc-keyword">else if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.over</span><span class="jsdoc-syntax">) {
 310                 </span><span class="jsdoc-var">on_el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.over</span><span class="jsdoc-syntax">);
 311             }
 312
 313         }
 314
 315         </span><span class="jsdoc-var">this.alignEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">on_el </span><span class="jsdoc-syntax">);
 316
 317         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">) {
 318             </span><span class="jsdoc-var">this.render</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">document.body</span><span class="jsdoc-syntax">);
 319         }
 320
 321
 322
 323
 324         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.title </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">) {
 325             </span><span class="jsdoc-var">this.headerEl.hide</span><span class="jsdoc-syntax">();
 326         }
 327
 328
 329         </span><span class="jsdoc-var">this.el.show</span><span class="jsdoc-syntax">();
 330         </span><span class="jsdoc-var">this.el.dom.style.display </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'block'</span><span class="jsdoc-syntax">;
 331
 332         </span><span class="jsdoc-var">this.doAlign</span><span class="jsdoc-syntax">();
 333
 334         </span><span class="jsdoc-comment">//var arrow = this.el.select('.arrow',true).first();
 335         //arrow.set(align[2],
 336
 337         </span><span class="jsdoc-var">this.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'in'</span><span class="jsdoc-syntax">);
 338
 339
 340
 341         </span><span class="jsdoc-var">this.hoverState </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'in'</span><span class="jsdoc-syntax">;
 342
 343         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.modal</span><span class="jsdoc-syntax">) {
 344             </span><span class="jsdoc-var">this.maskEl.setSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.lib.Dom.getViewWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">),   </span><span class="jsdoc-var">Roo.lib.Dom.getViewHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">));
 345             </span><span class="jsdoc-var">this.maskEl.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'z-index'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.bootstrap.Popover.zIndex</span><span class="jsdoc-syntax">++);
 346             </span><span class="jsdoc-var">this.maskEl.dom.style.display </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'block'</span><span class="jsdoc-syntax">;
 347             </span><span class="jsdoc-var">this.maskEl.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'show'</span><span class="jsdoc-syntax">);
 348         }
 349         </span><span class="jsdoc-var">this.el.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'z-index'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.bootstrap.Popover.zIndex</span><span class="jsdoc-syntax">++);
 350
 351         </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'show'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 352
 353     },
 354     </span><span class="jsdoc-comment">/**
 355      * fire this manually after loading a grid in the table for example
 356      * @param {string} (left|right|top|bottom) where to try and put it (use false to use the last one)
 357      * @param {Boolean} try and move it if we cant get right position.
 358      */
 359     </span><span class="jsdoc-var">updatePosition </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">placement</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">try_move</span><span class="jsdoc-syntax">)
 360     {
 361         </span><span class="jsdoc-comment">// allow for calling with no parameters
 362         </span><span class="jsdoc-var">placement </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">placement   </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">placement </span><span class="jsdoc-syntax">:  </span><span class="jsdoc-var">this.placement</span><span class="jsdoc-syntax">;
 363         </span><span class="jsdoc-var">try_move </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">try_move</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-string">'undefined' </span><span class="jsdoc-syntax">? </span><span class="jsdoc-keyword">true </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">try_move</span><span class="jsdoc-syntax">;
 364
 365         </span><span class="jsdoc-var">this.el.removeClass</span><span class="jsdoc-syntax">([
 366             </span><span class="jsdoc-string">'fade'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-string">'top'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-string">'bottom'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'left'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'right'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-string">'in'</span><span class="jsdoc-syntax">,
 367             </span><span class="jsdoc-string">'bs-popover-top'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-string">'bs-popover-bottom'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'bs-popover-left'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'bs-popover-right'
 368         </span><span class="jsdoc-syntax">]);
 369         </span><span class="jsdoc-var">this.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">placement </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">' bs-popover-' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">placement</span><span class="jsdoc-syntax">);
 370
 371         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.alignEl </span><span class="jsdoc-syntax">) {
 372             </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
 373         }
 374
 375         </span><span class="jsdoc-keyword">switch </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">placement</span><span class="jsdoc-syntax">) {
 376             </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'right'</span><span class="jsdoc-syntax">:
 377                 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">exact </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.getAlignToXY</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.alignEl</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'tl-tr'</span><span class="jsdoc-syntax">, [10,0]);
 378                 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">offset </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.getAlignToXY</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.alignEl</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'tl-tr?'</span><span class="jsdoc-syntax">,[10,0]);
 379                 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">try_move </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">exact.equals</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">offset</span><span class="jsdoc-syntax">) || </span><span class="jsdoc-var">exact</span><span class="jsdoc-syntax">[0] == </span><span class="jsdoc-var">offset</span><span class="jsdoc-syntax">[0] ) {
 380                     </span><span class="jsdoc-comment">//normal display... or moved up/down.
 381                     </span><span class="jsdoc-var">this.el.setXY</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">offset</span><span class="jsdoc-syntax">);
 382                     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">xy </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.alignEl.getAnchorXY</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'tr'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
 383                     </span><span class="jsdoc-var">xy</span><span class="jsdoc-syntax">[0]+=2;</span><span class="jsdoc-var">xy</span><span class="jsdoc-syntax">[1]+=5;
 384                     </span><span class="jsdoc-var">this.arrowEl.setXY</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">xy</span><span class="jsdoc-syntax">);
 385                     </span><span class="jsdoc-keyword">return true</span><span class="jsdoc-syntax">;
 386                 }
 387                 </span><span class="jsdoc-comment">// continue through...
 388                 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.updatePosition</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'left'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
 389
 390
 391             </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'left'</span><span class="jsdoc-syntax">:
 392                 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">exact </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.getAlignToXY</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.alignEl</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'tr-tl'</span><span class="jsdoc-syntax">, [-10,0]);
 393                 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">offset </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.getAlignToXY</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.alignEl</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'tr-tl?'</span><span class="jsdoc-syntax">,[-10,0]);
 394                 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">try_move </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">exact.equals</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">offset</span><span class="jsdoc-syntax">) || </span><span class="jsdoc-var">exact</span><span class="jsdoc-syntax">[0] == </span><span class="jsdoc-var">offset</span><span class="jsdoc-syntax">[0] ) {
 395                     </span><span class="jsdoc-comment">//normal display... or moved up/down.
 396                     </span><span class="jsdoc-var">this.el.setXY</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">offset</span><span class="jsdoc-syntax">);
 397                     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">xy </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.alignEl.getAnchorXY</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'tl'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
 398                     </span><span class="jsdoc-var">xy</span><span class="jsdoc-syntax">[0]-=10;</span><span class="jsdoc-var">xy</span><span class="jsdoc-syntax">[1]+=5; </span><span class="jsdoc-comment">// &lt;&lt; fix me
 399                     </span><span class="jsdoc-var">this.arrowEl.setXY</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">xy</span><span class="jsdoc-syntax">);
 400                     </span><span class="jsdoc-keyword">return true</span><span class="jsdoc-syntax">;
 401                 }
 402                 </span><span class="jsdoc-comment">// call self...
 403                 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.updatePosition</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'right'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
 404
 405             </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'top'</span><span class="jsdoc-syntax">:
 406                 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">exact </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.getAlignToXY</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.alignEl</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'b-t'</span><span class="jsdoc-syntax">, [0,-10]);
 407                 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">offset </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.getAlignToXY</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.alignEl</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'b-t?'</span><span class="jsdoc-syntax">,[0,-10]);
 408                 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">try_move </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">exact.equals</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">offset</span><span class="jsdoc-syntax">) || </span><span class="jsdoc-var">exact</span><span class="jsdoc-syntax">[1] == </span><span class="jsdoc-var">offset</span><span class="jsdoc-syntax">[1] ) {
 409                     </span><span class="jsdoc-comment">//normal display... or moved up/down.
 410                     </span><span class="jsdoc-var">this.el.setXY</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">offset</span><span class="jsdoc-syntax">);
 411                     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">xy </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.alignEl.getAnchorXY</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'t'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
 412                     </span><span class="jsdoc-var">xy</span><span class="jsdoc-syntax">[1]-=10; </span><span class="jsdoc-comment">// &lt;&lt; fix me
 413                     </span><span class="jsdoc-var">this.arrowEl.setXY</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">xy</span><span class="jsdoc-syntax">);
 414                     </span><span class="jsdoc-keyword">return true</span><span class="jsdoc-syntax">;
 415                 }
 416                 </span><span class="jsdoc-comment">// fall through
 417                </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.updatePosition</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'bottom'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
 418
 419             </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'bottom'</span><span class="jsdoc-syntax">:
 420                  </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">exact </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.getAlignToXY</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.alignEl</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'t-b'</span><span class="jsdoc-syntax">, [0,10]);
 421                 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">offset </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.getAlignToXY</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.alignEl</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'t-b?'</span><span class="jsdoc-syntax">,[0,10]);
 422                 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">try_move </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">exact.equals</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">offset</span><span class="jsdoc-syntax">) || </span><span class="jsdoc-var">exact</span><span class="jsdoc-syntax">[1] == </span><span class="jsdoc-var">offset</span><span class="jsdoc-syntax">[1] ) {
 423                     </span><span class="jsdoc-comment">//normal display... or moved up/down.
 424                     </span><span class="jsdoc-var">this.el.setXY</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">offset</span><span class="jsdoc-syntax">);
 425                     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">xy </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.alignEl.getAnchorXY</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'b'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
 426                      </span><span class="jsdoc-var">xy</span><span class="jsdoc-syntax">[1]+=2; </span><span class="jsdoc-comment">// &lt;&lt; fix me
 427                     </span><span class="jsdoc-var">this.arrowEl.setXY</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">xy</span><span class="jsdoc-syntax">);
 428                     </span><span class="jsdoc-keyword">return true</span><span class="jsdoc-syntax">;
 429                 }
 430                 </span><span class="jsdoc-comment">// fall through
 431                 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.updatePosition</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'top'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
 432
 433
 434         }
 435
 436
 437         </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
 438     },
 439
 440     </span><span class="jsdoc-var">hide </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 441     {
 442         </span><span class="jsdoc-var">this.el.setXY</span><span class="jsdoc-syntax">([0,0]);
 443         </span><span class="jsdoc-var">this.el.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'in'</span><span class="jsdoc-syntax">);
 444         </span><span class="jsdoc-var">this.el.hide</span><span class="jsdoc-syntax">();
 445         </span><span class="jsdoc-var">this.hoverState </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
 446         </span><span class="jsdoc-var">this.maskEl.hide</span><span class="jsdoc-syntax">(); </span><span class="jsdoc-comment">// always..
 447         </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'hide'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 448     }
 449
 450 });
 451
 452
 453 </span><span class="jsdoc-var">Roo.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.bootstrap.Popover</span><span class="jsdoc-syntax">, {
 454
 455     </span><span class="jsdoc-var">alignment </span><span class="jsdoc-syntax">: {
 456         </span><span class="jsdoc-string">'left' </span><span class="jsdoc-syntax">: [</span><span class="jsdoc-string">'r-l'</span><span class="jsdoc-syntax">, [-10,0], </span><span class="jsdoc-string">'left bs-popover-left'</span><span class="jsdoc-syntax">],
 457         </span><span class="jsdoc-string">'right' </span><span class="jsdoc-syntax">: [</span><span class="jsdoc-string">'l-br'</span><span class="jsdoc-syntax">, [10,0], </span><span class="jsdoc-string">'right bs-popover-right'</span><span class="jsdoc-syntax">],
 458         </span><span class="jsdoc-string">'bottom' </span><span class="jsdoc-syntax">: [</span><span class="jsdoc-string">'t-b'</span><span class="jsdoc-syntax">, [0,10], </span><span class="jsdoc-string">'top bs-popover-top'</span><span class="jsdoc-syntax">],
 459         </span><span class="jsdoc-string">'top' </span><span class="jsdoc-syntax">: [ </span><span class="jsdoc-string">'b-t'</span><span class="jsdoc-syntax">, [0,-10], </span><span class="jsdoc-string">'bottom bs-popover-bottom'</span><span class="jsdoc-syntax">]
 460     },
 461
 462     </span><span class="jsdoc-var">zIndex </span><span class="jsdoc-syntax">: 20001,
 463
 464     </span><span class="jsdoc-var">clickHander </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
 465
 466
 467
 468     </span><span class="jsdoc-var">onMouseDown </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)
 469     {
 470         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.popups.length </span><span class="jsdoc-syntax">&amp;&amp;  !</span><span class="jsdoc-var">e.getTarget</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;.roo-popover&quot;</span><span class="jsdoc-syntax">)) {
 471             </span><span class="jsdoc-comment">/// what is nothing is showing..
 472             </span><span class="jsdoc-var">this.hideAll</span><span class="jsdoc-syntax">();
 473         }
 474
 475     },
 476
 477
 478     </span><span class="jsdoc-var">popups </span><span class="jsdoc-syntax">: [],
 479
 480     </span><span class="jsdoc-var">register </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">popup</span><span class="jsdoc-syntax">)
 481     {
 482         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">Roo.bootstrap.Popover.clickHandler</span><span class="jsdoc-syntax">) {
 483             </span><span class="jsdoc-var">Roo.bootstrap.Popover.clickHandler </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">document</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;mousedown&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.bootstrap.Popover.onMouseDown</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.bootstrap.Popover</span><span class="jsdoc-syntax">);
 484         }
 485         </span><span class="jsdoc-comment">// hide other popups.
 486         </span><span class="jsdoc-var">popup.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'show'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.bootstrap.Popover.onShow</span><span class="jsdoc-syntax">,  </span><span class="jsdoc-var">popup</span><span class="jsdoc-syntax">);
 487         </span><span class="jsdoc-var">popup.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'hide'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.bootstrap.Popover.onHide</span><span class="jsdoc-syntax">,  </span><span class="jsdoc-var">popup</span><span class="jsdoc-syntax">);
 488         </span><span class="jsdoc-var">this.hideAll</span><span class="jsdoc-syntax">(); </span><span class="jsdoc-comment">//&lt;&lt; why?
 489         //this.popups.push(popup);
 490     </span><span class="jsdoc-syntax">},
 491     </span><span class="jsdoc-var">hideAll </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 492     {
 493         </span><span class="jsdoc-var">this.popups.forEach</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">p</span><span class="jsdoc-syntax">) {
 494             </span><span class="jsdoc-var">p.hide</span><span class="jsdoc-syntax">();
 495         });
 496     },
 497     </span><span class="jsdoc-var">onShow </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
 498         </span><span class="jsdoc-var">Roo.bootstrap.Popover.popups.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 499     },
 500     </span><span class="jsdoc-var">onHide </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
 501         </span><span class="jsdoc-var">Roo.bootstrap.Popover.popups.remove</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 502     }
 503
 504 });</span></code></body></html>