File: adapter.native.html

package info (click to toggle)
node-opentip 2.4.6-3
  • links: PTS, VCS
  • area: main
  • in suites: bookworm, forky, sid, trixie
  • size: 2,592 kB
  • sloc: javascript: 22,701; makefile: 26
file content (182 lines) | stat: -rw-r--r-- 41,570 bytes parent folder | download | duplicates (2) 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
 
<!DOCTYPE html>  <html> <head>   <title>adapter.native.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="adapter.ender.html">                 adapter.ender.coffee               </a>                                           <a class="source" href="adapter.jquery.html">                 adapter.jquery.coffee               </a>                                           <a class="source" href="adapter.native.html">                 adapter.native.coffee               </a>                                           <a class="source" href="adapter.prototype.html">                 adapter.prototype.coffee               </a>                                           <a class="source" href="opentip.html">                 opentip.coffee               </a>                        </div>         </div>       </div>          <table cellpadding="0" cellspacing="0">       <thead>         <tr>           <th class="docs">             <h1>               adapter.native.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></pre></div>             </td>           </tr>                               <tr id="section-2">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-2">&#182;</a>               </div>               <h1>Native Opentip Adapter</h1>

<p>Use this adapter if you don't use a framework like jQuery and you don't
really care about oldschool browser compatibility.</p>             </td>             <td class="code">               <div class="highlight"><pre><span class="k">class</span> <span class="nx">Adapter</span>

  <span class="nv">name: </span><span class="s">&quot;native&quot;</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>Invoke callback as soon as dom is ready
Source: https://github.com/dperini/ContentLoaded/blob/master/src/contentloaded.js</p>             </td>             <td class="code">               <div class="highlight"><pre>  <span class="nv">domReady: </span><span class="nf">(callback) -&gt;</span>
    <span class="nv">done = </span><span class="kc">no</span>
    <span class="nv">top = </span><span class="kc">true</span>
    <span class="nv">win = </span><span class="nb">window</span>
    <span class="nv">doc = </span><span class="nb">document</span>

    <span class="k">return</span> <span class="nx">callback</span><span class="p">()</span> <span class="k">if</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">readyState</span> <span class="k">in</span> <span class="p">[</span> <span class="s">&quot;complete&quot;</span><span class="p">,</span> <span class="s">&quot;loaded&quot;</span> <span class="p">]</span>

    <span class="nv">root = </span><span class="nx">doc</span><span class="p">.</span><span class="nx">documentElement</span>
    <span class="nv">add = </span><span class="p">(</span><span class="k">if</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">addEventListener</span> <span class="k">then</span> <span class="s">&quot;addEventListener&quot;</span> <span class="k">else</span> <span class="s">&quot;attachEvent&quot;</span><span class="p">)</span>
    <span class="nv">rem = </span><span class="p">(</span><span class="k">if</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">addEventListener</span> <span class="k">then</span> <span class="s">&quot;removeEventListener&quot;</span> <span class="k">else</span> <span class="s">&quot;detachEvent&quot;</span><span class="p">)</span>
    <span class="nv">pre = </span><span class="p">(</span><span class="k">if</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">addEventListener</span> <span class="k">then</span> <span class="s">&quot;&quot;</span> <span class="k">else</span> <span class="s">&quot;on&quot;</span><span class="p">)</span>

    <span class="nv">init = </span><span class="nf">(e) -&gt;</span>
      <span class="k">return</span>  <span class="k">if</span> <span class="nx">e</span><span class="p">.</span><span class="nx">type</span> <span class="o">is</span> <span class="s">&quot;readystatechange&quot;</span> <span class="o">and</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">readyState</span> <span class="o">isnt</span> <span class="s">&quot;complete&quot;</span>
      <span class="p">(</span><span class="k">if</span> <span class="nx">e</span><span class="p">.</span><span class="nx">type</span> <span class="o">is</span> <span class="s">&quot;load&quot;</span> <span class="k">then</span> <span class="nx">win</span> <span class="k">else</span> <span class="nx">doc</span><span class="p">)[</span><span class="nx">rem</span><span class="p">]</span> <span class="nx">pre</span> <span class="o">+</span> <span class="nx">e</span><span class="p">.</span><span class="nx">type</span><span class="p">,</span> <span class="nx">init</span><span class="p">,</span> <span class="kc">false</span>
      <span class="nx">unless</span> <span class="nx">done</span>
        <span class="nv">done = </span><span class="kc">yes</span>
        <span class="nx">callback</span><span class="p">()</span>

    <span class="nv">poll = </span><span class="o">-&gt;</span>
      <span class="k">try</span>
        <span class="nx">root</span><span class="p">.</span><span class="nx">doScroll</span> <span class="s">&quot;left&quot;</span>
      <span class="k">catch</span> <span class="nx">e</span>
        <span class="nx">setTimeout</span> <span class="nx">poll</span><span class="p">,</span> <span class="mi">50</span>
        <span class="k">return</span>
      <span class="nx">init</span> <span class="s">&quot;poll&quot;</span>

    <span class="nx">unless</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">readyState</span> <span class="o">is</span> <span class="s">&quot;complete&quot;</span>
      <span class="k">if</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">createEventObject</span> <span class="o">and</span> <span class="nx">root</span><span class="p">.</span><span class="nx">doScroll</span>
        <span class="k">try</span>
          <span class="nv">top = </span><span class="o">not</span> <span class="nx">win</span><span class="p">.</span><span class="nx">frameElement</span>
        <span class="nx">poll</span><span class="p">()</span>  <span class="k">if</span> <span class="nx">top</span>
      <span class="nx">doc</span><span class="p">[</span><span class="nx">add</span><span class="p">]</span> <span class="nx">pre</span> <span class="o">+</span> <span class="s">&quot;DOMContentLoaded&quot;</span><span class="p">,</span> <span class="nx">init</span><span class="p">,</span> <span class="kc">false</span>
      <span class="nx">doc</span><span class="p">[</span><span class="nx">add</span><span class="p">]</span> <span class="nx">pre</span> <span class="o">+</span> <span class="s">&quot;readystatechange&quot;</span><span class="p">,</span> <span class="nx">init</span><span class="p">,</span> <span class="kc">false</span>
      <span class="nx">win</span><span class="p">[</span><span class="nx">add</span><span class="p">]</span> <span class="nx">pre</span> <span class="o">+</span> <span class="s">&quot;load&quot;</span><span class="p">,</span> <span class="nx">init</span><span class="p">,</span> <span class="kc">false</span></pre></div>             </td>           </tr>                               <tr id="section-4">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-4">&#182;</a>               </div>               <h1>DOM</h1>             </td>             <td class="code">               <div class="highlight"><pre></pre></div>             </td>           </tr>                               <tr id="section-5">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-5">&#182;</a>               </div>               <p>Create the HTML passed as string</p>             </td>             <td class="code">               <div class="highlight"><pre>  <span class="nv">create: </span><span class="nf">(htmlString) -&gt;</span>
    <span class="nv">div = </span><span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span> <span class="s">&quot;div&quot;</span>
    <span class="nv">div.innerHTML = </span><span class="nx">htmlString</span>
    <span class="nx">@wrap</span> <span class="nx">div</span><span class="p">.</span><span class="nx">childNodes</span></pre></div>             </td>           </tr>                               <tr id="section-6">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-6">&#182;</a>               </div>               <h2>Element handling</h2>             </td>             <td class="code">               <div class="highlight"><pre></pre></div>             </td>           </tr>                               <tr id="section-7">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-7">&#182;</a>               </div>               <p>Wrap the element in the framework</p>             </td>             <td class="code">               <div class="highlight"><pre>  <span class="nv">wrap: </span><span class="nf">(element) -&gt;</span>
    <span class="k">if</span> <span class="nx">element</span> <span class="k">instanceof</span> <span class="nx">NodeList</span>
      <span class="nv">element = </span><span class="p">(</span><span class="nx">el</span> <span class="k">for</span> <span class="nx">el</span> <span class="k">in</span> <span class="nx">element</span><span class="p">)</span>
    <span class="k">else</span> <span class="k">if</span> <span class="nx">element</span> <span class="o">not</span> <span class="k">instanceof</span> <span class="nb">Array</span>
      <span class="nv">element = </span><span class="p">[</span> <span class="nx">element</span> <span class="p">]</span>
    <span class="nx">element</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>Returns the unwrapped element</p>             </td>             <td class="code">               <div class="highlight"><pre>  <span class="nv">unwrap: </span><span class="nf">(element) -&gt;</span> <span class="nx">@wrap</span><span class="p">(</span><span class="nx">element</span><span class="p">)[</span><span class="mi">0</span><span class="p">]</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>Returns the tag name of the element</p>             </td>             <td class="code">               <div class="highlight"><pre>  <span class="nv">tagName: </span><span class="nf">(element) -&gt;</span> <span class="nx">@unwrap</span><span class="p">(</span><span class="nx">element</span><span class="p">).</span><span class="nx">tagName</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>Returns or sets the given attribute of element</p>             </td>             <td class="code">               <div class="highlight"><pre>  <span class="nv">attr: </span><span class="nf">(element, attr, value) -&gt;</span>
    <span class="k">if</span> <span class="nx">arguments</span><span class="p">.</span><span class="nx">length</span> <span class="o">==</span> <span class="mi">3</span>
      <span class="nx">@unwrap</span><span class="p">(</span><span class="nx">element</span><span class="p">).</span><span class="nx">setAttribute</span> <span class="nx">attr</span><span class="p">,</span> <span class="nx">value</span>
    <span class="k">else</span>
      <span class="nx">@unwrap</span><span class="p">(</span><span class="nx">element</span><span class="p">).</span><span class="nx">getAttribute</span><span class="o">?</span> <span class="nx">attr</span>


  <span class="nv">lastDataId = </span><span class="mi">0</span>
  <span class="nv">dataValues = </span><span class="p">{</span> <span class="p">}</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>Returns or sets the given data of element</p>             </td>             <td class="code">               <div class="highlight"><pre>  <span class="nv">data: </span><span class="nf">(element, name, value) -&gt;</span>
    <span class="nv">dataId = </span><span class="nx">@attr</span> <span class="nx">element</span><span class="p">,</span> <span class="s">&quot;data-id&quot;</span>
    <span class="nx">unless</span> <span class="nx">dataId</span>
      <span class="nv">dataId = </span><span class="o">++</span><span class="nx">lastDataId</span>
      <span class="nx">@attr</span> <span class="nx">element</span><span class="p">,</span> <span class="s">&quot;data-id&quot;</span><span class="p">,</span> <span class="nx">dataId</span>
      <span class="nx">dataValues</span><span class="p">[</span><span class="nx">dataId</span><span class="p">]</span> <span class="o">=</span> <span class="p">{</span> <span class="p">}</span>

    <span class="k">if</span> <span class="nx">arguments</span><span class="p">.</span><span class="nx">length</span> <span class="o">==</span> <span class="mi">3</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>Setter</p>             </td>             <td class="code">               <div class="highlight"><pre>      <span class="nx">dataValues</span><span class="p">[</span><span class="nx">dataId</span><span class="p">][</span><span class="nx">name</span><span class="p">]</span> <span class="o">=</span> <span class="nx">value</span>
    <span class="k">else</span>
      <span class="nv">value = </span><span class="nx">dataValues</span><span class="p">[</span><span class="nx">dataId</span><span class="p">][</span><span class="nx">name</span><span class="p">]</span>
      <span class="k">return</span> <span class="nx">value</span> <span class="k">if</span> <span class="nx">value</span><span class="o">?</span>

      <span class="nv">value = </span><span class="nx">@attr</span> <span class="nx">element</span><span class="p">,</span> <span class="s">&quot;data-</span><span class="si">#{</span><span class="nx">Opentip</span><span class="o">::</span><span class="nx">dasherize</span> <span class="nx">name</span><span class="si">}</span><span class="s">&quot;</span>
      <span class="k">if</span> <span class="nx">value</span>
        <span class="nx">dataValues</span><span class="p">[</span><span class="nx">dataId</span><span class="p">][</span><span class="nx">name</span><span class="p">]</span> <span class="o">=</span> <span class="nx">value</span>
      <span class="k">return</span> <span class="nx">value</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>Finds elements by selector</p>             </td>             <td class="code">               <div class="highlight"><pre>  <span class="nv">find: </span><span class="nf">(element, selector) -&gt;</span> <span class="nx">@unwrap</span><span class="p">(</span><span class="nx">element</span><span class="p">).</span><span class="nx">querySelector</span> <span class="nx">selector</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>Finds all elements by selector</p>             </td>             <td class="code">               <div class="highlight"><pre>  <span class="nv">findAll: </span><span class="nf">(element, selector) -&gt;</span> <span class="nx">@unwrap</span><span class="p">(</span><span class="nx">element</span><span class="p">).</span><span class="nx">querySelectorAll</span> <span class="nx">selector</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>Updates the content of the element</p>             </td>             <td class="code">               <div class="highlight"><pre>  <span class="nv">update: </span><span class="nf">(element, content, escape) -&gt;</span>
    <span class="nv">element = </span><span class="nx">@unwrap</span> <span class="nx">element</span>
    <span class="k">if</span> <span class="nx">escape</span>
      <span class="nv">element.innerHTML = </span><span class="s">&quot;&quot;</span> <span class="c1"># Clearing the content</span>
      <span class="nx">element</span><span class="p">.</span><span class="nx">appendChild</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createTextNode</span> <span class="nx">content</span>
    <span class="k">else</span>
      <span class="nv">element.innerHTML = </span><span class="nx">content</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>Appends given child to element</p>             </td>             <td class="code">               <div class="highlight"><pre>  <span class="nv">append: </span><span class="nf">(element, child) -&gt;</span>
    <span class="nv">unwrappedChild = </span><span class="nx">@unwrap</span> <span class="nx">child</span>
    <span class="nv">unwrappedElement = </span><span class="nx">@unwrap</span> <span class="nx">element</span>
    <span class="nx">unwrappedElement</span><span class="p">.</span><span class="nx">appendChild</span> <span class="nx">unwrappedChild</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>Add a class</p>             </td>             <td class="code">               <div class="highlight"><pre>  <span class="nv">addClass: </span><span class="nf">(element, className) -&gt;</span> <span class="nx">@unwrap</span><span class="p">(</span><span class="nx">element</span><span class="p">).</span><span class="nx">classList</span><span class="p">.</span><span class="nx">add</span> <span class="nx">className</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>Remove a class</p>             </td>             <td class="code">               <div class="highlight"><pre>  <span class="nv">removeClass: </span><span class="nf">(element, className) -&gt;</span> <span class="nx">@unwrap</span><span class="p">(</span><span class="nx">element</span><span class="p">).</span><span class="nx">classList</span><span class="p">.</span><span class="nx">remove</span> <span class="nx">className</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>Set given css properties</p>             </td>             <td class="code">               <div class="highlight"><pre>  <span class="nv">css: </span><span class="nf">(element, properties) -&gt;</span>
    <span class="nv">element = </span><span class="nx">@unwrap</span> <span class="nx">@wrap</span> <span class="nx">element</span>
    <span class="k">for</span> <span class="nx">own</span> <span class="nx">key</span><span class="p">,</span> <span class="nx">value</span> <span class="k">of</span> <span class="nx">properties</span>
      <span class="nx">element</span><span class="p">.</span><span class="nx">style</span><span class="p">[</span><span class="nx">key</span><span class="p">]</span> <span class="o">=</span> <span class="nx">value</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>Returns an object with given dimensions</p>             </td>             <td class="code">               <div class="highlight"><pre>  <span class="nv">dimensions: </span><span class="nf">(element) -&gt;</span>
    <span class="nv">element = </span><span class="nx">@unwrap</span> <span class="nx">@wrap</span> <span class="nx">element</span>
    <span class="nv">dimensions =</span>
      <span class="nv">width: </span><span class="nx">element</span><span class="p">.</span><span class="nx">offsetWidth</span>
      <span class="nv">height: </span><span class="nx">element</span><span class="p">.</span><span class="nx">offsetHeight</span>

    <span class="nx">unless</span> <span class="nx">dimensions</span><span class="p">.</span><span class="nx">width</span> <span class="o">and</span> <span class="nx">dimensions</span><span class="p">.</span><span class="nx">height</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>The element is probably invisible. So make it visible</p>             </td>             <td class="code">               <div class="highlight"><pre>      <span class="nv">revert =</span>
        <span class="nv">position: </span><span class="nx">element</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">position</span> <span class="o">||</span> <span class="s">&#39;&#39;</span>
        <span class="nv">visibility: </span><span class="nx">element</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">visibility</span> <span class="o">||</span> <span class="s">&#39;&#39;</span>
        <span class="nv">display: </span><span class="nx">element</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o">||</span> <span class="s">&#39;&#39;</span>

      <span class="nx">@css</span> <span class="nx">element</span><span class="p">,</span>
        <span class="nv">position: </span><span class="s">&quot;absolute&quot;</span>
        <span class="nv">visibility: </span><span class="s">&quot;hidden&quot;</span>
        <span class="nv">display: </span><span class="s">&quot;block&quot;</span>

      <span class="nv">dimensions =</span>
        <span class="nv">width: </span><span class="nx">element</span><span class="p">.</span><span class="nx">offsetWidth</span>
        <span class="nv">height: </span><span class="nx">element</span><span class="p">.</span><span class="nx">offsetHeight</span>

      <span class="nx">@css</span> <span class="nx">element</span><span class="p">,</span> <span class="nx">revert</span>      

    <span class="nx">dimensions</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>Returns the scroll offsets of current document</p>             </td>             <td class="code">               <div class="highlight"><pre>  <span class="nv">scrollOffset: </span><span class="o">-&gt;</span>
    <span class="p">[</span>
      <span class="nb">window</span><span class="p">.</span><span class="nx">pageXOffset</span> <span class="o">or</span> <span class="nb">document</span><span class="p">.</span><span class="nx">documentElement</span><span class="p">.</span><span class="nx">scrollLeft</span> <span class="o">or</span> <span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">scrollLeft</span>
      <span class="nb">window</span><span class="p">.</span><span class="nx">pageYOffset</span> <span class="o">or</span> <span class="nb">document</span><span class="p">.</span><span class="nx">documentElement</span><span class="p">.</span><span class="nx">scrollTop</span> <span class="o">or</span> <span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">scrollTop</span>
    <span class="p">]</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>Returns the dimensions of the viewport (currently visible browser area)</p>             </td>             <td class="code">               <div class="highlight"><pre>  <span class="nv">viewportDimensions: </span><span class="o">-&gt;</span>
    <span class="p">{</span>
      <span class="nv">width: </span><span class="nb">document</span><span class="p">.</span><span class="nx">documentElement</span><span class="p">.</span><span class="nx">clientWidth</span>
      <span class="nv">height: </span><span class="nb">document</span><span class="p">.</span><span class="nx">documentElement</span><span class="p">.</span><span class="nx">clientHeight</span>
    <span class="p">}</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>Returns an object with x and y </p>             </td>             <td class="code">               <div class="highlight"><pre>  <span class="nv">mousePosition: </span><span class="nf">(e) -&gt;</span>
    <span class="nv">pos = x: </span><span class="mi">0</span><span class="p">,</span> <span class="nv">y: </span><span class="mi">0</span>

    <span class="nx">e</span> <span class="o">?=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">event</span>

    <span class="k">return</span> <span class="nx">unless</span> <span class="nx">e</span><span class="o">?</span>

    <span class="k">if</span> <span class="nx">e</span><span class="p">.</span><span class="nx">pageX</span> <span class="o">or</span> <span class="nx">e</span><span class="p">.</span><span class="nx">pageY</span>
      <span class="nv">pos.x = </span><span class="nx">e</span><span class="p">.</span><span class="nx">pageX</span>
      <span class="nv">pos.y = </span><span class="nx">e</span><span class="p">.</span><span class="nx">pageY</span>
    <span class="k">else</span> <span class="k">if</span> <span class="nx">e</span><span class="p">.</span><span class="nx">clientX</span> <span class="o">or</span> <span class="nx">e</span><span class="p">.</span><span class="nx">clientY</span>
      <span class="nv">pos.x = </span><span class="nx">e</span><span class="p">.</span><span class="nx">clientX</span> <span class="o">+</span> <span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">scrollLeft</span> <span class="o">+</span> <span class="nb">document</span><span class="p">.</span><span class="nx">documentElement</span><span class="p">.</span><span class="nx">scrollLeft</span>
      <span class="nv">pos.y = </span><span class="nx">e</span><span class="p">.</span><span class="nx">clientY</span> <span class="o">+</span> <span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">scrollTop</span> <span class="o">+</span> <span class="nb">document</span><span class="p">.</span><span class="nx">documentElement</span><span class="p">.</span><span class="nx">scrollTop</span>

    <span class="nx">pos</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>Returns the offset of the element</p>             </td>             <td class="code">               <div class="highlight"><pre>  <span class="nv">offset: </span><span class="nf">(element) -&gt;</span>
    <span class="nv">element = </span><span class="nx">@unwrap</span> <span class="nx">element</span>

    <span class="nv">offset = </span><span class="p">{</span>
      <span class="nv">top: </span><span class="nx">element</span><span class="p">.</span><span class="nx">offsetTop</span>
      <span class="nv">left: </span><span class="nx">element</span><span class="p">.</span><span class="nx">offsetLeft</span>
    <span class="p">}</span>

    <span class="k">while</span> <span class="nv">element = </span><span class="nx">element</span><span class="p">.</span><span class="nx">offsetParent</span>
      <span class="nx">offset</span><span class="p">.</span><span class="nx">top</span> <span class="o">+=</span> <span class="nx">element</span><span class="p">.</span><span class="nx">offsetTop</span>
      <span class="nx">offset</span><span class="p">.</span><span class="nx">left</span> <span class="o">+=</span> <span class="nx">element</span><span class="p">.</span><span class="nx">offsetLeft</span>

      <span class="k">if</span> <span class="nx">element</span> <span class="o">!=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">body</span>
        <span class="nx">offset</span><span class="p">.</span><span class="nx">top</span> <span class="o">-=</span> <span class="nx">element</span><span class="p">.</span><span class="nx">scrollTop</span>
        <span class="nx">offset</span><span class="p">.</span><span class="nx">left</span> <span class="o">-=</span> <span class="nx">element</span><span class="p">.</span><span class="nx">scrollLeft</span>

    <span class="nx">offset</span></pre></div>             </td>           </tr>                               <tr id="section-26">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-26">&#182;</a>               </div>               <p>Observe given eventName</p>             </td>             <td class="code">               <div class="highlight"><pre>  <span class="nv">observe: </span><span class="nf">(element, eventName, observer) -&gt;</span> <span class="nx">@unwrap</span><span class="p">(</span><span class="nx">element</span><span class="p">).</span><span class="nx">addEventListener</span> <span class="nx">eventName</span><span class="p">,</span> <span class="nx">observer</span></pre></div>             </td>           </tr>                               <tr id="section-27">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-27">&#182;</a>               </div>               <p>Stop observing event</p>             </td>             <td class="code">               <div class="highlight"><pre>  <span class="nv">stopObserving: </span><span class="nf">(element, eventName, observer) -&gt;</span> <span class="nx">@unwrap</span><span class="p">(</span><span class="nx">element</span><span class="p">).</span><span class="nx">removeEventListener</span> <span class="nx">eventName</span><span class="p">,</span> <span class="nx">observer</span></pre></div>             </td>           </tr>                               <tr id="section-28">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-28">&#182;</a>               </div>               <p>Perform an AJAX request and call the appropriate callbacks.</p>             </td>             <td class="code">               <div class="highlight"><pre>  <span class="nv">ajax: </span><span class="nf">(options) -&gt;</span>
    <span class="k">throw</span> <span class="k">new</span> <span class="nb">Error</span> <span class="s">&quot;No url provided&quot;</span> <span class="nx">unless</span> <span class="nx">options</span><span class="p">.</span><span class="nx">url</span><span class="o">?</span>

    <span class="k">if</span> <span class="nb">window</span><span class="p">.</span><span class="nx">XMLHttpRequest</span></pre></div>             </td>           </tr>                               <tr id="section-29">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-29">&#182;</a>               </div>               <p>Mozilla, Safari, ...</p>             </td>             <td class="code">               <div class="highlight"><pre>      <span class="nv">request = </span><span class="k">new</span> <span class="nx">XMLHttpRequest</span>
    <span class="k">else</span> <span class="k">if</span> <span class="nb">window</span><span class="p">.</span><span class="nx">ActiveXObject</span></pre></div>             </td>           </tr>                               <tr id="section-30">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-30">&#182;</a>               </div>               <p>IE</p>             </td>             <td class="code">               <div class="highlight"><pre>      <span class="k">try</span>
        <span class="nv">request = </span><span class="k">new</span> <span class="nx">ActiveXObject</span> <span class="s">&quot;Msxml2.XMLHTTP&quot;</span>
      <span class="k">catch</span> <span class="nx">e</span>
        <span class="k">try</span>
          <span class="nv">request = </span><span class="k">new</span> <span class="nx">ActiveXObject</span> <span class="s">&quot;Microsoft.XMLHTTP&quot;</span>
        <span class="k">catch</span> <span class="nx">e</span>

    <span class="k">throw</span> <span class="k">new</span> <span class="nb">Error</span> <span class="s">&quot;Can&#39;t create XMLHttpRequest&quot;</span> <span class="nx">unless</span> <span class="nx">request</span>

    <span class="nv">request.onreadystatechange = </span><span class="o">-&gt;</span>
      <span class="k">if</span> <span class="nx">request</span><span class="p">.</span><span class="nx">readyState</span> <span class="o">==</span> <span class="mi">4</span>
        <span class="k">try</span>
          <span class="k">if</span> <span class="nx">request</span><span class="p">.</span><span class="nx">status</span> <span class="o">==</span> <span class="mi">200</span>
            <span class="nx">options</span><span class="p">.</span><span class="nx">onSuccess</span><span class="o">?</span> <span class="nx">request</span><span class="p">.</span><span class="nx">responseText</span>
          <span class="k">else</span>
            <span class="nx">options</span><span class="p">.</span><span class="nx">onError</span><span class="o">?</span> <span class="s">&quot;Server responded with status </span><span class="si">#{</span><span class="nx">request</span><span class="p">.</span><span class="nx">status</span><span class="si">}</span><span class="s">&quot;</span>
        <span class="k">catch</span> <span class="nx">e</span>
          <span class="nx">options</span><span class="p">.</span><span class="nx">onError</span><span class="o">?</span> <span class="nx">e</span><span class="p">.</span><span class="nx">message</span>

        <span class="nx">options</span><span class="p">.</span><span class="nx">onComplete</span><span class="o">?</span><span class="p">()</span>


    <span class="nx">request</span><span class="p">.</span><span class="nx">open</span> <span class="nx">options</span><span class="p">.</span><span class="nx">method</span><span class="o">?</span><span class="p">.</span><span class="nx">toUpperCase</span><span class="p">()</span> <span class="o">?</span> <span class="s">&quot;GET&quot;</span><span class="p">,</span> <span class="nx">options</span><span class="p">.</span><span class="nx">url</span>
    <span class="nx">request</span><span class="p">.</span><span class="nx">send</span><span class="p">()</span></pre></div>             </td>           </tr>                               <tr id="section-31">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-31">&#182;</a>               </div>               <h1>Utility functions</h1>             </td>             <td class="code">               <div class="highlight"><pre></pre></div>             </td>           </tr>                               <tr id="section-32">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-32">&#182;</a>               </div>               <p>Creates a shallow copy of the object</p>             </td>             <td class="code">               <div class="highlight"><pre>  <span class="nv">clone: </span><span class="nf">(object) -&gt;</span>
    <span class="nv">newObject = </span><span class="p">{</span> <span class="p">}</span>
    <span class="k">for</span> <span class="nx">own</span> <span class="nx">key</span><span class="p">,</span> <span class="nx">val</span> <span class="k">of</span> <span class="nx">object</span>
      <span class="nx">newObject</span><span class="p">[</span><span class="nx">key</span><span class="p">]</span> <span class="o">=</span> <span class="nx">val</span>
    <span class="nx">newObject</span></pre></div>             </td>           </tr>                               <tr id="section-33">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-33">&#182;</a>               </div>               <p>Copies all properties from sources to target</p>             </td>             <td class="code">               <div class="highlight"><pre>  <span class="nv">extend: </span><span class="nf">(target, sources...) -&gt;</span>
    <span class="k">for</span> <span class="nx">source</span> <span class="k">in</span> <span class="nx">sources</span>
      <span class="k">for</span> <span class="nx">own</span> <span class="nx">key</span><span class="p">,</span> <span class="nx">val</span> <span class="k">of</span> <span class="nx">source</span>
        <span class="nx">target</span><span class="p">[</span><span class="nx">key</span><span class="p">]</span> <span class="o">=</span> <span class="nx">val</span>
    <span class="nx">target</span></pre></div>             </td>           </tr>                               <tr id="section-34">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-34">&#182;</a>               </div>               <p>Add the adapter to the list</p>             </td>             <td class="code">               <div class="highlight"><pre><span class="nx">Opentip</span><span class="p">.</span><span class="nx">addAdapter</span> <span class="k">new</span> <span class="nx">Adapter</span>

</pre></div>             </td>           </tr>                </tbody>     </table>   </div> </body> </html>