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
|
<!DOCTYPE html> <html> <head> <title>adapter.jquery.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 … <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.jquery.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">¶</a> </div> <h1>jQuery Opentip Adapter</h1>
<p>Uses jQuery</p> </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">¶</a> </div> <p>Because $ is my favorite character</p> </td> <td class="code"> <div class="highlight"><pre><span class="p">(</span><span class="nf">($) -></span></pre></div> </td> </tr> <tr id="section-3"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3">¶</a> </div> <p>Augment jQuery</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nv">$.fn.opentip = </span><span class="nf">(content, title, options) -></span>
<span class="k">new</span> <span class="nx">Opentip</span> <span class="k">this</span><span class="p">,</span> <span class="nx">content</span><span class="p">,</span> <span class="nx">title</span><span class="p">,</span> <span class="nx">options</span></pre></div> </td> </tr> <tr id="section-4"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4">¶</a> </div> <p>And now the class</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">"jquery"</span></pre></div> </td> </tr> <tr id="section-5"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5">¶</a> </div> <p>Simply using $.domReady</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nv">domReady: </span><span class="nf">(callback) -></span> <span class="nx">$</span> <span class="nx">callback</span></pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">¶</a> </div> <h1>DOM</h1> </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">¶</a> </div> <p>Using bonzo to create html</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nv">create: </span><span class="nf">(html) -></span> <span class="nx">$</span> <span class="nx">html</span></pre></div> </td> </tr> <tr id="section-8"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8">¶</a> </div> <h2>Element handling</h2> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-9"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9">¶</a> </div> <p>Wraps the element in ender</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nv">wrap: </span><span class="nf">(element) -></span>
<span class="nv">element = </span><span class="nx">$</span> <span class="nx">element</span>
<span class="k">throw</span> <span class="k">new</span> <span class="nb">Error</span> <span class="s">"Multiple elements provided."</span> <span class="k">if</span> <span class="nx">element</span><span class="p">.</span><span class="nx">length</span> <span class="o">></span> <span class="mi">1</span>
<span class="nx">element</span></pre></div> </td> </tr> <tr id="section-10"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10">¶</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) -></span> <span class="nx">$</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-11"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11">¶</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) -></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-12"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-12">¶</a> </div> <p>Returns or sets the given attribute of element</p>
<p>It's important not to simply forward name and value because the value
is set whether or not the value argument is present</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nv">attr: </span><span class="nf">(element, args...) -></span> <span class="nx">$</span><span class="p">(</span><span class="nx">element</span><span class="p">).</span><span class="nx">attr</span> <span class="nx">args</span><span class="p">...</span></pre></div> </td> </tr> <tr id="section-13"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-13">¶</a> </div> <p>Returns or sets the given data of element
It's important not to simply forward name and value because the value
is set whether or not the value argument is present</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nv">data: </span><span class="nf">(element, args...) -></span> <span class="nx">$</span><span class="p">(</span><span class="nx">element</span><span class="p">).</span><span class="nx">data</span> <span class="nx">args</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">¶</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) -></span> <span class="nx">$</span><span class="p">(</span><span class="nx">element</span><span class="p">).</span><span class="nx">find</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">¶</a> </div> <p>Finds all elements by selector</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nv">findAll: </span><span class="o">-></span> <span class="nx">@find</span><span class="p">.</span><span class="nx">apply</span> <span class="nx">@</span><span class="p">,</span> <span class="nx">arguments</span></pre></div> </td> </tr> <tr id="section-16"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-16">¶</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) -></span>
<span class="nv">element = </span><span class="nx">$</span> <span class="nx">element</span>
<span class="k">if</span> <span class="nx">escape</span>
<span class="nx">element</span><span class="p">.</span><span class="nx">text</span> <span class="nx">content</span>
<span class="k">else</span>
<span class="nx">element</span><span class="p">.</span><span class="nx">html</span> <span class="nx">content</span></pre></div> </td> </tr> <tr id="section-17"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-17">¶</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) -></span> <span class="nx">$</span><span class="p">(</span><span class="nx">element</span><span class="p">).</span><span class="nx">append</span> <span class="nx">child</span></pre></div> </td> </tr> <tr id="section-18"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-18">¶</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) -></span> <span class="nx">$</span><span class="p">(</span><span class="nx">element</span><span class="p">).</span><span class="nx">addClass</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">¶</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) -></span> <span class="nx">$</span><span class="p">(</span><span class="nx">element</span><span class="p">).</span><span class="nx">removeClass</span> <span class="nx">className</span></pre></div> </td> </tr> <tr id="section-20"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-20">¶</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) -></span> <span class="nx">$</span><span class="p">(</span><span class="nx">element</span><span class="p">).</span><span class="nx">css</span> <span class="nx">properties</span></pre></div> </td> </tr> <tr id="section-21"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-21">¶</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) -></span>
<span class="p">{</span>
<span class="nv">width: </span><span class="nx">$</span><span class="p">(</span><span class="nx">element</span><span class="p">).</span><span class="nx">outerWidth</span><span class="p">()</span>
<span class="nv">height: </span><span class="nx">$</span><span class="p">(</span><span class="nx">element</span><span class="p">).</span><span class="nx">outerHeight</span><span class="p">()</span>
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-22"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-22">¶</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">-></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">¶</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">-></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">¶</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) -></span>
<span class="k">return</span> <span class="kc">null</span> <span class="nx">unless</span> <span class="nx">e</span><span class="o">?</span>
<span class="nv">x: </span><span class="nx">e</span><span class="p">.</span><span class="nx">pageX</span><span class="p">,</span> <span class="nv">y: </span><span class="nx">e</span><span class="p">.</span><span class="nx">pageY</span></pre></div> </td> </tr> <tr id="section-25"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-25">¶</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) -></span>
<span class="nv">offset = </span><span class="nx">$</span><span class="p">(</span><span class="nx">element</span><span class="p">).</span><span class="nx">offset</span><span class="p">()</span>
<span class="p">{</span>
<span class="nv">left: </span><span class="nx">offset</span><span class="p">.</span><span class="nx">left</span>
<span class="nv">top: </span><span class="nx">offset</span><span class="p">.</span><span class="nx">top</span>
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-26"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-26">¶</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) -></span> <span class="nx">$</span><span class="p">(</span><span class="nx">element</span><span class="p">).</span><span class="nx">bind</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">¶</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) -></span> <span class="nx">$</span><span class="p">(</span><span class="nx">element</span><span class="p">).</span><span class="nx">unbind</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">¶</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) -></span>
<span class="k">throw</span> <span class="k">new</span> <span class="nb">Error</span> <span class="s">"No url provided"</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="nx">$</span><span class="p">.</span><span class="nx">ajax</span><span class="p">(</span>
<span class="nv">url: </span><span class="nx">options</span><span class="p">.</span><span class="nx">url</span>
<span class="nv">type: </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">"GET"</span>
<span class="p">)</span>
<span class="p">.</span><span class="nx">done</span><span class="p">(</span><span class="nf">(content) -></span> <span class="nx">options</span><span class="p">.</span><span class="nx">onSuccess</span><span class="o">?</span> <span class="nx">content</span><span class="p">)</span>
<span class="p">.</span><span class="nx">fail</span><span class="p">(</span><span class="nf">(request) -></span> <span class="nx">options</span><span class="p">.</span><span class="nx">onError</span><span class="o">?</span> <span class="s">"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">"</span><span class="p">)</span>
<span class="p">.</span><span class="nx">always</span><span class="p">(</span><span class="o">-></span> <span class="nx">options</span><span class="p">.</span><span class="nx">onComplete</span><span class="o">?</span><span class="p">())</span></pre></div> </td> </tr> <tr id="section-29"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-29">¶</a> </div> <h1>Utility functions</h1> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-30"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-30">¶</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) -></span> <span class="nx">$</span><span class="p">.</span><span class="nx">extend</span> <span class="p">{</span> <span class="p">},</span> <span class="nx">object</span></pre></div> </td> </tr> <tr id="section-31"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-31">¶</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...) -></span> <span class="nx">$</span><span class="p">.</span><span class="nx">extend</span> <span class="nx">target</span><span class="p">,</span> <span class="nx">sources</span><span class="p">...</span></pre></div> </td> </tr> <tr id="section-32"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-32">¶</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>
<span class="p">)(</span><span class="nx">jQuery</span><span class="p">)</span>
</pre></div> </td> </tr> </tbody> </table> </div> </body> </html>
|
