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="bootstrap.html">                 bootstrap.coffee               </a>                                           <a class="source" href="chrome.html">                 chrome.coffee               </a>                                           <a class="source" href="console.html">                 console.coffee               </a>                                           <a class="source" href="unload.html">                 unload.coffee               </a>                                           <a class="source" href="window-utils.html">                 window-utils.coffee               </a>                                           <a class="source" href="button.html">                 button.coffee               </a>                                           <a class="source" href="commands.html">                 commands.coffee               </a>                                           <a class="source" href="events.html">                 events.coffee               </a>                                           <a class="source" href="help.html">                 help.coffee               </a>                                           <a class="source" href="hints.html">                 hints.coffee               </a>                                           <a class="source" href="marker.html">                 marker.coffee               </a>                                           <a class="source" href="prefs.html">                 prefs.coffee               </a>                                           <a class="source" href="utils.html">                 utils.coffee               </a>                                           <a class="source" href="vim.html">                 vim.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="p">{</span> <span class="nx">getPref</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">require</span> <span class="s">&#39;prefs&#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;VimFxReset VimFxHintMarker&#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>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.className = </span><span class="s">&#39;VimFxReset VimFxHintMarker&#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>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.className = </span><span class="s">&#39;VimFxReset VimFxHiddenHintMarker&#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">@enteredHintChars = </span><span class="s">&#39;&#39;</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="nv">fragment = </span><span class="nb">document</span><span class="p">.</span><span class="nx">createDocumentFragment</span><span class="p">()</span>
  37     <span class="k">for</span> <span class="nx">char</span> <span class="k">in</span> <span class="nx">@hintChars</span>
  38       <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>
  39       <span class="nv">span.className = </span><span class="s">&#39;VimFxReset&#39;</span>
  40       <span class="nv">span.textContent = </span><span class="nx">char</span><span class="p">.</span><span class="nx">toUpperCase</span><span class="p">()</span>
  41
  42       <span class="nx">fragment</span><span class="p">.</span><span class="nx">appendChild</span> <span class="nx">span</span>
  43
  44     <span class="nx">@markerElement</span><span class="p">.</span><span class="nx">appendChild</span> <span class="nx">fragment</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>Add another char to the <code>enteredHintString</code>,
  45 see if it still matches <code>hintString</code>, apply classes to
  46 the distinct hint characters and show/hide marker when
  47 the entered string partially (not) matches the hint string</p>             </td>             <td class="code">               <div class="highlight"><pre>  <span class="nv">matchHintChar: </span><span class="nf">(char) -&gt;</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>Handle backspace key by removing a previously entered hint char
  48 and resetting its class</p>             </td>             <td class="code">               <div class="highlight"><pre>    <span class="k">if</span> <span class="nx">char</span> <span class="o">==</span> <span class="s">&#39;backspace&#39;</span>
  49       <span class="k">if</span> <span class="nx">@enteredHintChars</span><span class="p">.</span><span class="nx">length</span> <span class="o">&gt;</span> <span class="mi">0</span>
  50         <span class="vi">@enteredHintChars = </span><span class="nx">@enteredHintChars</span><span class="p">.</span><span class="nx">slice</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="o">-</span><span class="mi">1</span><span class="p">)</span>
  51         <span class="nx">@markerElement</span><span class="p">.</span><span class="nx">children</span><span class="p">[</span><span class="nx">@enteredHintChars</span><span class="p">.</span><span class="nx">length</span><span class="p">]</span><span class="o">?</span><span class="p">.</span><span class="nv">className = </span><span class="s">&#39;VimFxReset&#39;</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>Otherwise append hint char and change hint class</p>             </td>             <td class="code">               <div class="highlight"><pre>    <span class="k">else</span>
  52       <span class="nx">@markerElement</span><span class="p">.</span><span class="nx">children</span><span class="p">[</span><span class="nx">@enteredHintChars</span><span class="p">.</span><span class="nx">length</span><span class="p">]</span><span class="o">?</span><span class="p">.</span><span class="nv">className = </span><span class="s">&#39;VimFxReset VimFxCharMatch&#39;</span>
  53       <span class="nx">@enteredHintChars</span> <span class="o">+=</span> <span class="nx">char</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>If entered hint chars no longer partially match the hint chars
  54 then hide the marker. Othersie show it back</p>             </td>             <td class="code">               <div class="highlight"><pre>    <span class="k">if</span> <span class="nx">@hintChars</span><span class="p">.</span><span class="nx">search</span><span class="p">(</span><span class="nx">@enteredHintChars</span><span class="p">)</span> <span class="o">==</span> <span class="mi">0</span> <span class="k">then</span> <span class="nx">@show</span><span class="p">()</span> <span class="k">else</span> <span class="nx">@hide</span><span class="p">()</span></pre></div>             </td>           </tr>                               <tr id="section-15">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-15">&#182;</a>               </div>               <p>Checks if enterd hint chars completely match the hint chars</p>             </td>             <td class="code">               <div class="highlight"><pre>  <span class="nv">isMatched: </span><span class="o">-&gt;</span>
  55     <span class="k">return</span> <span class="nx">@hintChars</span> <span class="o">==</span> <span class="nx">@enteredHintChars</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>Selects all markable elements on the page, creates markers
  56 for each of them The markers are then positioned on the page</p>
  57
  58 <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>
  59   <span class="nv">hintChars = </span><span class="nx">getPref</span> <span class="s">&#39;hint_chars&#39;</span>
  60
  61   <span class="nv">elementsSet = </span><span class="nx">getMarkableElements</span><span class="p">(</span><span class="nb">document</span><span class="p">)</span>
  62   <span class="nv">markers = </span><span class="p">[];</span>
  63   <span class="nv">j = </span><span class="mi">0</span>
  64   <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>
  65     <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>
  66     <span class="k">if</span> <span class="nv">rect = </span><span class="nx">getElementRect</span> <span class="nx">element</span>
  67       <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> <span class="nx">hintChars</span><span class="p">)</span>
  68       <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>
  69       <span class="nx">marker</span><span class="p">.</span><span class="nx">setPosition</span> <span class="nx">rect</span>
  70       <span class="nx">marker</span><span class="p">.</span><span class="nx">setHint</span> <span class="nx">hint</span>
  71       <span class="nx">markers</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">marker</span><span class="p">)</span>
  72
  73   <span class="k">return</span> <span class="nx">markers</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>Function generator that creates a function that
  74 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-18">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-18">&#182;</a>               </div>               <p>Helper function that returns a permutation number <code>i</code>
  75 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>
  76     <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>
  77
  78     <span class="nv">n = </span><span class="nx">chars</span><span class="p">.</span><span class="nx">length</span>
  79     <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>
  80
  81     <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>
  82
  83   <span class="k">return</span> <span class="nf">(i, chars) -&gt;</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>split the characters into two groups:</p>
  84
  85 <ul>
  86 <li>left chars are used for the head</li>
  87 <li>right chars are used to build the tail</li>
  88 </ul>             </td>             <td class="code">               <div class="highlight"><pre>    <span class="nv">left = </span><span class="nx">chars</span><span class="p">[...</span><span class="nx">chars</span><span class="p">.</span><span class="nx">length</span> <span class="o">/</span> <span class="mi">3</span><span class="p">]</span>
  89     <span class="nv">right = </span><span class="nx">chars</span><span class="p">[</span><span class="nx">chars</span><span class="p">.</span><span class="nx">length</span> <span class="o">/</span> <span class="mi">3</span><span class="p">...]</span>
  90
  91     <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>
  92     <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>
  93     <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>
  94       </pre></div>             </td>           </tr>                               <tr id="section-20">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-20">&#182;</a>               </div>               <p>Returns elements that qualify for hint markers in hints mode.
  95 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-21">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-21">&#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>
  96     <span class="nx">MARKABLE_ELEMENTS</span><span class="p">,</span>
  97     <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>
  98
  99   <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>
 100     <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>
 101   <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>
 102
 103   <span class="nv">namespaceResolver = </span><span class="nf">(namespace) -&gt;</span>
 104     <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-22">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-22">&#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>
 105     <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-23">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-23">&#182;</a>               </div>               <p>Checks if the given TextRectangle object qualifies
 106 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>
 107   <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>
 108   <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>
 109   <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>
 110   <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-24">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-24">&#182;</a>               </div>               <p>Will scan through <code>element.getClientRects()</code> and look for
 111 the first visible rectange. If there are no visible rectangles, then
 112 will look at the children of the markable node. </p>
 113
 114 <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>
 115   <span class="nb">document</span> <span class="o">=</span> <span class="nx">element</span><span class="p">.</span><span class="nx">ownerDocument</span>
 116   <span class="nb">window</span>   <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">defaultView</span>
 117   <span class="nv">docElem  = </span><span class="nb">document</span><span class="p">.</span><span class="nx">documentElement</span>
 118   <span class="nv">body     = </span><span class="nb">document</span><span class="p">.</span><span class="nx">body</span>
 119
 120   <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>
 121   <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>
 122   <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>
 123   <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>
 124
 125   <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>
 126   <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>
 127
 128   <span class="k">for</span> <span class="nx">rect</span> <span class="k">in</span> <span class="nx">rects</span>
 129     <span class="k">if</span> <span class="nx">isRectOk</span> <span class="nx">rect</span><span class="p">,</span> <span class="nb">window</span>
 130       <span class="k">return</span> <span class="p">{</span>
 131         <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>
 132         <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>
 133         <span class="nv">width: </span> <span class="nx">rect</span><span class="p">.</span><span class="nx">width</span>
 134         <span class="nv">height: </span><span class="nx">rect</span><span class="p">.</span><span class="nx">height</span>
 135       <span class="p">}</span></pre></div>             </td>           </tr>                               <tr id="section-25">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-25">&#182;</a>               </div>               <p>If the element has 0 dimentions then check what's inside.
 136 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>
 137     <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>
 138       <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>
 139         <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>
 140         <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>
 141            <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>
 142
 143           <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>
 144
 145   <span class="k">return</span> <span class="kc">undefined</span>
 146
 147 <span class="nv">exports.Marker              = </span><span class="nx">Marker</span>
 148
 149 </pre></div>             </td>           </tr>                </tbody>     </table>   </div> </body> </html>