docs/marker.html

   1 <!DOCTYPE html>  <html> <head>   <title>marker.coffee</title>   <meta http-equiv="content-type" content="text/html; charset=UTF-8">   <link rel="stylesheet" media="all" href="docco.css" /> </head> <body>   <div id="container">     <div id="background"></div>            <div id="jump_to">         Jump To &hellip;         <div id="jump_wrapper">           <div id="jump_page">                                           <a class="source" href="commands.html">                 commands.coffee               </a>                                           <a class="source" href="console.html">                 console.coffee               </a>                                           <a class="source" href="event-handlers.html">                 event-handlers.coffee               </a>                                           <a class="source" href="hints.html">                 hints.coffee               </a>                                           <a class="source" href="marker.html">                 marker.coffee               </a>                                           <a class="source" href="utils.html">                 utils.coffee               </a>                                           <a class="source" href="vim.html">                 vim.coffee               </a>                                           <a class="source" href="window-utils.html">                 window-utils.coffee               </a>                        </div>         </div>       </div>          <table cellpadding="0" cellspacing="0">       <thead>         <tr>           <th class="docs">             <h1>               marker.coffee             </h1>           </th>           <th class="code">           </th>         </tr>       </thead>       <tbody>                               <tr id="section-1">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-1">&#182;</a>               </div>                            </td>             <td class="code">               <div class="highlight"><pre><span class="p">{</span> <span class="nv">interfaces: </span><span class="nx">Ci</span> <span class="p">}</span>      <span class="o">=</span> <span class="nx">Components</span>
   2 <span class="nv">XPathResult             = </span><span class="nx">Ci</span><span class="p">.</span><span class="nx">nsIDOMXPathResult</span>
   3
   4 <span class="nv">HINTCHARS     = </span><span class="s">&#39;asdfgercvhjkl;uinm&#39;</span></pre></div>             </td>           </tr>                               <tr id="section-2">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-2">&#182;</a>               </div>               <p>All elements that have one or more of the following properties
   5 qualify for their own marker in hints mode</p>             </td>             <td class="code">               <div class="highlight"><pre><span class="nv">MARKABLE_ELEMENT_PROPERTIES = </span><span class="p">[</span>
   6   <span class="s">&quot;@tabindex&quot;</span>
   7   <span class="s">&quot;@onclick&quot;</span>
   8   <span class="s">&quot;@onmousedown&quot;</span>
   9   <span class="s">&quot;@onmouseup&quot;</span>
  10   <span class="s">&quot;@oncommand&quot;</span>
  11   <span class="s">&quot;@role=&#39;link&#39;&quot;</span>
  12   <span class="s">&quot;@role=&#39;button&#39;&quot;</span>
  13   <span class="s">&quot;contains(@class, &#39;button&#39;)&quot;</span>
  14   <span class="s">&quot;@contenteditable=&#39;&#39; or translate(@contenteditable, &#39;TRUE&#39;, &#39;true&#39;)=&#39;true&#39;&quot;</span>
  15 <span class="p">]</span></pre></div>             </td>           </tr>                               <tr id="section-3">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-3">&#182;</a>               </div>               <p>All the following elements qualify for their own marker in hints mode</p>             </td>             <td class="code">               <div class="highlight"><pre><span class="nv">MARKABLE_ELEMENTS = </span><span class="p">[</span>
  16   <span class="s">&quot;a&quot;</span>
  17   <span class="s">&quot;area[@href]&quot;</span>
  18   <span class="s">&quot;textarea&quot;</span>
  19   <span class="s">&quot;button&quot;</span>
  20   <span class="s">&quot;select&quot;</span>
  21   <span class="s">&quot;input[not(@type=&#39;hidden&#39; or @disabled or @readonly)]&quot;</span>
  22 <span class="p">]</span></pre></div>             </td>           </tr>                               <tr id="section-4">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-4">&#182;</a>               </div>               <p>Marker class wraps the markable element and provides
  23 methods to manipulate the markers</p>             </td>             <td class="code">               <div class="highlight"><pre><span class="k">class</span> <span class="nx">Marker</span></pre></div>             </td>           </tr>                               <tr id="section-5">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-5">&#182;</a>               </div>               <p>Creates the marker DOM node</p>             </td>             <td class="code">               <div class="highlight"><pre>  <span class="nv">constructor: </span><span class="nf">(@element) -&gt;</span>
  24     <span class="nb">document</span> <span class="o">=</span> <span class="nx">@element</span><span class="p">.</span><span class="nx">ownerDocument</span>
  25     <span class="nb">window</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">defaultView</span>
  26     <span class="vi">@markerElement = </span><span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span> <span class="s">&#39;div&#39;</span>
  27     <span class="vi">@markerElement.className = </span><span class="s">&#39;vimffReset vimffHintMarker&#39;</span></pre></div>             </td>           </tr>                               <tr id="section-6">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-6">&#182;</a>               </div>               <p>Hides the marker</p>             </td>             <td class="code">               <div class="highlight"><pre>  <span class="nv">hide: </span><span class="o">-&gt;</span> <span class="vi">@markerElement.style.display = </span><span class="s">&#39;none&#39;</span></pre></div>             </td>           </tr>                               <tr id="section-7">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-7">&#182;</a>               </div>               <p>Shows the marker</p>             </td>             <td class="code">               <div class="highlight"><pre>  <span class="nv">show: </span><span class="o">-&gt;</span> <span class="vi">@markerElement.style.display = </span><span class="s">&#39;block&#39;</span></pre></div>             </td>           </tr>                               <tr id="section-8">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-8">&#182;</a>               </div>               <p>Positions the marker on the page. The positioning is absulute</p>             </td>             <td class="code">               <div class="highlight"><pre>  <span class="nv">setPosition: </span><span class="nf">(rect) -&gt;</span>
  28     <span class="vi">@markerElement.style.left = </span><span class="nx">rect</span><span class="p">.</span><span class="nx">left</span> <span class="o">+</span> <span class="s">&#39;px&#39;</span>
  29     <span class="vi">@markerElement.style.top  = </span><span class="nx">rect</span><span class="p">.</span><span class="nx">top</span>  <span class="o">+</span> <span class="s">&#39;px&#39;</span></pre></div>             </td>           </tr>                               <tr id="section-9">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-9">&#182;</a>               </div>               <p>Assigns hint string to the marker</p>             </td>             <td class="code">               <div class="highlight"><pre>  <span class="nv">setHint: </span><span class="nf">(@hintChars) -&gt;</span></pre></div>             </td>           </tr>                               <tr id="section-10">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-10">&#182;</a>               </div>               <p>number of hint chars that have been matched so far</p>             </td>             <td class="code">               <div class="highlight"><pre>    <span class="vi">@matchedHintCharCount = </span><span class="mi">0</span>
  30
  31     <span class="nb">document</span> <span class="o">=</span> <span class="nx">@element</span><span class="p">.</span><span class="nx">ownerDocument</span>
  32
  33     <span class="k">while</span> <span class="nx">@markerElement</span><span class="p">.</span><span class="nx">hasChildNodes</span><span class="p">()</span>
  34       <span class="nx">@markerElement</span><span class="p">.</span><span class="nx">removeChild</span> <span class="nx">@markedElement</span><span class="p">.</span><span class="nx">firstChild</span>
  35
  36     <span class="k">for</span> <span class="nx">char</span> <span class="k">in</span> <span class="nx">@hintChars</span>
  37       <span class="nv">span = </span><span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span> <span class="s">&#39;span&#39;</span>
  38       <span class="nv">span.className = </span><span class="s">&#39;vimffReset&#39;</span>
  39       <span class="nv">span.textContent = </span><span class="nx">char</span><span class="p">.</span><span class="nx">toUpperCase</span><span class="p">()</span>
  40
  41       <span class="nx">@markerElement</span><span class="p">.</span><span class="nx">appendChild</span> <span class="nx">span</span>
  42
  43   <span class="nv">matchHintChar: </span><span class="nf">(char) -&gt;</span>
  44     <span class="k">if</span> <span class="nx">char</span> <span class="o">==</span> <span class="s">&#39;backspace&#39;</span>
  45       <span class="k">if</span> <span class="nx">@matchedHintCharCount</span> <span class="o">&gt;</span> <span class="mi">0</span>
  46         <span class="nx">@matchedHintCharCount</span> <span class="o">-=</span> <span class="mi">1</span>
  47         <span class="nx">@markerElement</span><span class="p">.</span><span class="nx">children</span><span class="p">[</span><span class="nx">@matchedHintCharCount</span><span class="p">].</span><span class="nv">className = </span><span class="s">&#39;vimffReset&#39;</span>
  48     <span class="k">else</span>
  49       <span class="k">if</span> <span class="nx">@hintChars</span><span class="p">[</span><span class="nx">@matchedHintCharCount</span><span class="p">]</span> <span class="o">==</span> <span class="nx">char</span>
  50         <span class="nx">@markerElement</span><span class="p">.</span><span class="nx">children</span><span class="p">[</span><span class="nx">@matchedHintCharCount</span><span class="p">].</span><span class="nv">className = </span><span class="s">&#39;vimffReset vimffCharMatch&#39;</span>
  51         <span class="nx">@matchedHintCharCount</span> <span class="o">+=</span> <span class="mi">1</span>
  52
  53     <span class="k">return</span> <span class="nx">@matchedHintCharCount</span>
  54
  55   <span class="nv">isComplete: </span><span class="o">-&gt;</span>
  56     <span class="k">return</span> <span class="nx">@hintChars</span><span class="p">.</span><span class="nx">length</span> <span class="o">==</span> <span class="nx">@hintCompletion</span></pre></div>             </td>           </tr>                               <tr id="section-11">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-11">&#182;</a>               </div>               <p>Selects all markable elements on the page, creates markers
  57 for each of them The markers are then positioned on the page</p>
  58
  59 <p>The array of markers is returned</p>             </td>             <td class="code">               <div class="highlight"><pre><span class="nv">Marker.createMarkers = </span><span class="nf">(document) -&gt;</span>
  60   <span class="nv">elementsSet = </span><span class="nx">getMarkableElements</span><span class="p">(</span><span class="nb">document</span><span class="p">)</span>
  61   <span class="nv">markers = </span><span class="p">{};</span>
  62   <span class="nv">j = </span><span class="mi">0</span>
  63   <span class="k">for</span> <span class="nx">i</span> <span class="k">in</span> <span class="p">[</span><span class="mi">0</span><span class="p">...</span><span class="nx">elementsSet</span><span class="p">.</span><span class="nx">snapshotLength</span><span class="p">]</span> <span class="k">by</span> <span class="mi">1</span>
  64     <span class="nv">element = </span><span class="nx">elementsSet</span><span class="p">.</span><span class="nx">snapshotItem</span><span class="p">(</span><span class="nx">i</span><span class="p">)</span>
  65     <span class="k">if</span> <span class="nv">rect = </span><span class="nx">getElementRect</span> <span class="nx">element</span>
  66       <span class="nv">hint = </span><span class="nx">indexToHint</span><span class="p">(</span><span class="nx">j</span><span class="o">++</span><span class="p">)</span>
  67       <span class="nv">marker = </span><span class="k">new</span> <span class="nx">Marker</span><span class="p">(</span><span class="nx">element</span><span class="p">)</span>
  68       <span class="nx">marker</span><span class="p">.</span><span class="nx">setPosition</span> <span class="nx">rect</span>
  69       <span class="nx">marker</span><span class="p">.</span><span class="nx">setHint</span> <span class="nx">hint</span>
  70       <span class="nx">markers</span><span class="p">[</span><span class="nx">hint</span><span class="p">]</span> <span class="o">=</span> <span class="nx">marker</span>
  71
  72   <span class="k">return</span> <span class="nx">markers</span></pre></div>             </td>           </tr>                               <tr id="section-12">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-12">&#182;</a>               </div>               <p>Function generator that creates a function that
  73 returns hint string for supplied numeric index.</p>             </td>             <td class="code">               <div class="highlight"><pre><span class="nv">indexToHint = </span><span class="nx">do</span> <span class="o">-&gt;</span></pre></div>             </td>           </tr>                               <tr id="section-13">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-13">&#182;</a>               </div>               <p>split the characters into two groups:</p>
  74
  75 <ul>
  76 <li>left chars are used for the head</li>
  77 <li>right chars are used to build the tail</li>
  78 </ul>             </td>             <td class="code">               <div class="highlight"><pre>  <span class="nv">left = </span><span class="nx">HINTCHARS</span><span class="p">[...</span><span class="nx">HINTCHARS</span><span class="p">.</span><span class="nx">length</span> <span class="o">/</span> <span class="mi">3</span><span class="p">]</span>
  79   <span class="nv">right = </span><span class="nx">HINTCHARS</span><span class="p">[</span><span class="nx">HINTCHARS</span><span class="p">.</span><span class="nx">length</span> <span class="o">/</span> <span class="mi">3</span><span class="p">...]</span></pre></div>             </td>           </tr>                               <tr id="section-14">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-14">&#182;</a>               </div>               <p>Helper function that returns a permutation number <code>i</code>
  80 of some of the characters in the <code>chars</code> agrument</p>             </td>             <td class="code">               <div class="highlight"><pre>  <span class="nv">f = </span><span class="nf">(i, chars) -&gt;</span>
  81     <span class="k">return</span> <span class="s">&#39;&#39;</span> <span class="k">if</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="mi">0</span>
  82
  83     <span class="nv">n = </span><span class="nx">chars</span><span class="p">.</span><span class="nx">length</span>
  84     <span class="nv">l = </span><span class="nb">Math</span><span class="p">.</span><span class="nx">floor</span><span class="p">(</span><span class="nx">i</span> <span class="o">/</span> <span class="nx">n</span><span class="p">);</span> <span class="nv">k = </span><span class="nx">i</span> <span class="o">%</span> <span class="nx">n</span><span class="p">;</span>
  85
  86     <span class="k">return</span> <span class="nx">f</span><span class="p">(</span><span class="nx">l</span> <span class="o">-</span> <span class="mi">1</span><span class="p">,</span> <span class="nx">chars</span><span class="p">)</span> <span class="o">+</span> <span class="nx">chars</span><span class="p">[</span><span class="nx">k</span><span class="p">]</span>
  87
  88   <span class="k">return</span> <span class="nf">(i) -&gt;</span>
  89     <span class="nv">n = </span><span class="nb">Math</span><span class="p">.</span><span class="nx">floor</span><span class="p">(</span><span class="nx">i</span> <span class="o">/</span> <span class="nx">left</span><span class="p">.</span><span class="nx">length</span><span class="p">)</span>
  90     <span class="nv">m = </span><span class="nx">i</span> <span class="o">%</span> <span class="nx">left</span><span class="p">.</span><span class="nx">length</span>
  91     <span class="k">return</span> <span class="nx">f</span><span class="p">(</span><span class="nx">n</span> <span class="o">-</span> <span class="mi">1</span><span class="p">,</span> <span class="nx">right</span><span class="p">)</span> <span class="o">+</span> <span class="nx">left</span><span class="p">[</span><span class="nx">m</span><span class="p">]</span>
  92       </pre></div>             </td>           </tr>                               <tr id="section-15">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-15">&#182;</a>               </div>               <p>Returns elements that qualify for hint markers in hints mode.
  93 Generates and memoizes an XPath query internally</p>             </td>             <td class="code">               <div class="highlight"><pre><span class="nv">getMarkableElements = </span><span class="nx">do</span> <span class="o">-&gt;</span></pre></div>             </td>           </tr>                               <tr id="section-16">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-16">&#182;</a>               </div>               <p>Some preparations done on startup</p>             </td>             <td class="code">               <div class="highlight"><pre>  <span class="nv">elements = </span><span class="nb">Array</span><span class="p">.</span><span class="nx">concat</span> <span class="o">\</span>
  94     <span class="nx">MARKABLE_ELEMENTS</span><span class="p">,</span>
  95     <span class="p">[</span><span class="s">&quot;*[</span><span class="si">#{</span> <span class="nx">MARKABLE_ELEMENT_PROPERTIES</span><span class="p">.</span><span class="nx">join</span><span class="p">(</span><span class="s">&quot; or &quot;</span><span class="p">)</span> <span class="si">}</span><span class="s">]&quot;</span><span class="p">]</span>
  96
  97   <span class="nv">xpath = </span><span class="nx">elements</span><span class="p">.</span><span class="nx">reduce</span><span class="p">(</span><span class="nf">(m, rule) -&gt;</span>
  98     <span class="nx">m</span><span class="p">.</span><span class="nx">concat</span><span class="p">([</span><span class="s">&quot;//</span><span class="si">#{</span> <span class="nx">rule</span> <span class="si">}</span><span class="s">&quot;</span><span class="p">,</span> <span class="s">&quot;//xhtml:</span><span class="si">#{</span> <span class="nx">rule</span> <span class="si">}</span><span class="s">&quot;</span><span class="p">])</span>
  99   <span class="p">,</span> <span class="p">[]).</span><span class="nx">join</span><span class="p">(</span><span class="s">&#39; | &#39;</span><span class="p">)</span>
 100
 101   <span class="nv">namespaceResolver = </span><span class="nf">(namespace) -&gt;</span>
 102     <span class="k">if</span> <span class="p">(</span><span class="nx">namespace</span> <span class="o">==</span> <span class="s">&quot;xhtml&quot;</span><span class="p">)</span> <span class="k">then</span> <span class="s">&quot;http://www.w3.org/1999/xhtml&quot;</span> <span class="k">else</span> <span class="kc">null</span></pre></div>             </td>           </tr>                               <tr id="section-17">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-17">&#182;</a>               </div>               <p>The actual function that will return the desired elements </p>             </td>             <td class="code">               <div class="highlight"><pre>  <span class="k">return</span> <span class="nf">(document, resultType = XPathResult.ORDERED_NODE_SNAPSHOT_TYPE) -&gt;</span>
 103     <span class="nb">document</span><span class="p">.</span><span class="nx">evaluate</span> <span class="nx">xpath</span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">documentElement</span><span class="p">,</span> <span class="nx">namespaceResolver</span><span class="p">,</span> <span class="nx">resultType</span><span class="p">,</span> <span class="kc">null</span></pre></div>             </td>           </tr>                               <tr id="section-18">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-18">&#182;</a>               </div>               <p>Checks if the given TextRectangle object qualifies
 104 for its own Marker with respect to the <code>window</code> object</p>             </td>             <td class="code">               <div class="highlight"><pre><span class="nv">isRectOk = </span><span class="nf">(rect, window) -&gt;</span>
 105   <span class="nx">rect</span><span class="p">.</span><span class="nx">width</span> <span class="o">&gt;</span> <span class="mi">2</span> <span class="o">and</span> <span class="nx">rect</span><span class="p">.</span><span class="nx">height</span> <span class="o">&gt;</span> <span class="mi">2</span> <span class="o">and</span> <span class="o">\</span>
 106   <span class="nx">rect</span><span class="p">.</span><span class="nx">top</span> <span class="o">&gt;</span> <span class="o">-</span><span class="mi">2</span> <span class="o">and</span> <span class="nx">rect</span><span class="p">.</span><span class="nx">left</span> <span class="o">&gt;</span> <span class="o">-</span><span class="mi">2</span> <span class="o">and</span> <span class="o">\</span>
 107   <span class="nx">rect</span><span class="p">.</span><span class="nx">top</span> <span class="o">&lt;</span> <span class="nb">window</span><span class="p">.</span><span class="nx">innerHeight</span> <span class="o">-</span> <span class="mi">2</span> <span class="o">and</span> <span class="o">\</span>
 108   <span class="nx">rect</span><span class="p">.</span><span class="nx">left</span> <span class="o">&lt;</span> <span class="nb">window</span><span class="p">.</span><span class="nx">innerWidth</span> <span class="o">-</span> <span class="mi">2</span></pre></div>             </td>           </tr>                               <tr id="section-19">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-19">&#182;</a>               </div>               <p>Will scan through <code>element.getClientRects()</code> and look for
 109 the first visible rectange. If there are no visible rectangles, then
 110 will look at the children of the markable node. </p>
 111
 112 <p>The logic has been copied over from Vimiun</p>             </td>             <td class="code">               <div class="highlight"><pre><span class="nv">getElementRect = </span><span class="nf">(element) -&gt;</span>
 113   <span class="nb">document</span> <span class="o">=</span> <span class="nx">element</span><span class="p">.</span><span class="nx">ownerDocument</span>
 114   <span class="nb">window</span>   <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">defaultView</span>
 115   <span class="nv">docElem  = </span><span class="nb">document</span><span class="p">.</span><span class="nx">documentElement</span>
 116   <span class="nv">body     = </span><span class="nb">document</span><span class="p">.</span><span class="nx">body</span>
 117
 118   <span class="nv">clientTop  = </span><span class="nx">docElem</span><span class="p">.</span><span class="nx">clientTop</span>  <span class="o">||</span> <span class="nx">body</span><span class="p">.</span><span class="nx">clientTop</span>  <span class="o">||</span> <span class="mi">0</span><span class="p">;</span>
 119   <span class="nv">clientLeft = </span><span class="nx">docElem</span><span class="p">.</span><span class="nx">clientLeft</span> <span class="o">||</span> <span class="nx">body</span><span class="p">.</span><span class="nx">clientLeft</span> <span class="o">||</span> <span class="mi">0</span><span class="p">;</span>
 120   <span class="nv">scrollTop  = </span><span class="nb">window</span><span class="p">.</span><span class="nx">pageYOffset</span> <span class="o">||</span> <span class="nx">docElem</span><span class="p">.</span><span class="nx">scrollTop</span><span class="p">;</span>
 121   <span class="nv">scrollLeft = </span><span class="nb">window</span><span class="p">.</span><span class="nx">pageXOffset</span> <span class="o">||</span> <span class="nx">docElem</span><span class="p">.</span><span class="nx">scrollLeft</span><span class="p">;</span>
 122
 123   <span class="nv">rects = </span><span class="p">[</span><span class="nx">rect</span> <span class="k">for</span> <span class="nx">rect</span> <span class="k">in</span> <span class="nx">element</span><span class="p">.</span><span class="nx">getClientRects</span><span class="p">()]</span>
 124   <span class="nx">rects</span><span class="p">.</span><span class="nx">push</span> <span class="nx">element</span><span class="p">.</span><span class="nx">getBoundingClientRect</span><span class="p">()</span>
 125
 126   <span class="k">for</span> <span class="nx">rect</span> <span class="k">in</span> <span class="nx">rects</span>
 127     <span class="k">if</span> <span class="nx">isRectOk</span> <span class="nx">rect</span><span class="p">,</span> <span class="nb">window</span>
 128       <span class="k">return</span> <span class="p">{</span>
 129         <span class="nv">top: </span>   <span class="nx">rect</span><span class="p">.</span><span class="nx">top</span>  <span class="o">+</span> <span class="nx">scrollTop</span>  <span class="o">-</span> <span class="nx">clientTop</span>
 130         <span class="nv">left: </span>  <span class="nx">rect</span><span class="p">.</span><span class="nx">left</span> <span class="o">+</span> <span class="nx">scrollLeft</span> <span class="o">-</span> <span class="nx">clientLeft</span>
 131         <span class="nv">width: </span> <span class="nx">rect</span><span class="p">.</span><span class="nx">width</span>
 132         <span class="nv">height: </span><span class="nx">rect</span><span class="p">.</span><span class="nx">height</span>
 133       <span class="p">}</span></pre></div>             </td>           </tr>                               <tr id="section-20">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-20">&#182;</a>               </div>               <p>If the element has 0 dimentions then check what's inside.
 134 Floated or absolutely positioned elements are of particular interest</p>             </td>             <td class="code">               <div class="highlight"><pre>  <span class="k">for</span> <span class="nx">rect</span> <span class="k">in</span> <span class="nx">rects</span>
 135     <span class="k">if</span> <span class="nx">rect</span><span class="p">.</span><span class="nx">width</span> <span class="o">==</span> <span class="mi">0</span> <span class="o">or</span> <span class="nx">rect</span><span class="p">.</span><span class="nx">height</span> <span class="o">==</span> <span class="mi">0</span>
 136       <span class="k">for</span> <span class="nx">childElement</span> <span class="k">in</span> <span class="nx">element</span><span class="p">.</span><span class="nx">children</span>
 137         <span class="nv">computedStyle = </span><span class="nb">window</span><span class="p">.</span><span class="nx">getComputedStyle</span> <span class="nx">childElement</span><span class="p">,</span> <span class="kc">null</span>
 138         <span class="k">if</span> <span class="nx">computedStyle</span><span class="p">.</span><span class="nx">getPropertyValue</span> <span class="s">&#39;float&#39;</span> <span class="o">!=</span> <span class="s">&#39;none&#39;</span> <span class="o">or</span> <span class="o">\</span>
 139            <span class="nx">computedStyle</span><span class="p">.</span><span class="nx">getPropertyValue</span> <span class="s">&#39;position&#39;</span> <span class="o">==</span> <span class="s">&#39;absolute&#39;</span>
 140
 141           <span class="nx">childRect</span> <span class="k">if</span> <span class="nv">childRect = </span><span class="nx">getElementRect</span> <span class="nx">childElement</span>
 142
 143   <span class="k">return</span> <span class="kc">undefined</span>
 144
 145 <span class="nv">exports.Marker              = </span><span class="nx">Marker</span>
 146
 147 </pre></div>             </td>           </tr>                </tbody>     </table>   </div> </body> </html>