forked from bitovi/jquerypp
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathwithin.html
More file actions
39 lines (29 loc) · 16.7 KB
/
within.html
File metadata and controls
39 lines (29 loc) · 16.7 KB
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
<!DOCTYPE html> <html> <head> <title>within.js</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="jquerypp.html"> jquerypp.js </a> <a class="source" href="animate.html"> animate.js </a> <a class="source" href="compare.html"> compare.js </a> <a class="source" href="cookie.html"> cookie.js </a> <a class="source" href="dimensions.html"> dimensions.js </a> <a class="source" href="form_params.html"> form_params.js </a> <a class="source" href="range.html"> range.js </a> <a class="source" href="selection.html"> selection.js </a> <a class="source" href="styles.html"> styles.js </a> <a class="source" href="within.html"> within.js </a> <a class="source" href="default.html"> default.js </a> <a class="source" href="destroyed.html"> destroyed.js </a> <a class="source" href="drag.html"> drag.js </a> <a class="source" href="core.html"> core.js </a> <a class="source" href="limit.html"> limit.js </a> <a class="source" href="scroll.html"> scroll.js </a> <a class="source" href="step.html"> step.js </a> <a class="source" href="drop.html"> drop.js </a> <a class="source" href="fastfix.html"> fastfix.js </a> <a class="source" href="hover.html"> hover.js </a> <a class="source" href="key.html"> key.js </a> <a class="source" href="livehack.html"> livehack.js </a> <a class="source" href="pause.html"> pause.js </a> <a class="source" href="resize.html"> resize.js </a> <a class="source" href="reverse.html"> reverse.js </a> <a class="source" href="swipe.html"> swipe.js </a> <a class="source" href="json.html"> json.js </a> <a class="source" href="vector.html"> vector.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> within.js </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> </td> <td class="code"> <div class="highlight"><pre><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">$</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">¶</a> </div> <p>Checks if x and y coordinates are within a box with left, top, width and height</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">withinBox</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">,</span> <span class="nx">left</span><span class="p">,</span> <span class="nx">top</span><span class="p">,</span> <span class="nx">width</span><span class="p">,</span> <span class="nx">height</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="p">(</span><span class="nx">y</span> <span class="o">>=</span> <span class="nx">top</span> <span class="o">&&</span> <span class="nx">y</span> <span class="o"><</span> <span class="nx">top</span> <span class="o">+</span> <span class="nx">height</span> <span class="o">&&</span> <span class="nx">x</span> <span class="o">>=</span> <span class="nx">left</span> <span class="o">&&</span> <span class="nx">x</span> <span class="o"><</span> <span class="nx">left</span> <span class="o">+</span> <span class="nx">width</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">fn</span><span class="p">.</span><span class="nx">within</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">left</span><span class="p">,</span> <span class="nx">top</span><span class="p">,</span> <span class="nx">useOffsetCache</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">ret</span> <span class="o">=</span> <span class="p">[]</span>
<span class="k">this</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">q</span> <span class="o">=</span> <span class="nx">jQuery</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="k">this</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="p">{</span>
<span class="k">return</span> <span class="nx">ret</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-3"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3">¶</a> </div> <p>uses either the cached offset or .offset()</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">offset</span> <span class="o">=</span> <span class="nx">useOffsetCache</span> <span class="o">?</span> <span class="nx">$</span><span class="p">.</span><span class="nx">data</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="s2">"offsetCache"</span><span class="p">)</span> <span class="o">||</span> <span class="nx">$</span><span class="p">.</span><span class="nx">data</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="s2">"offsetCache"</span><span class="p">,</span> <span class="nx">q</span><span class="p">.</span><span class="nx">offset</span><span class="p">())</span> <span class="o">:</span> <span class="nx">q</span><span class="p">.</span><span class="nx">offset</span><span class="p">();</span></pre></div> </td> </tr> <tr id="section-4"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4">¶</a> </div> <p>Check if the given coordinates are within the area of the current element</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">res</span> <span class="o">=</span> <span class="nx">withinBox</span><span class="p">(</span><span class="nx">left</span><span class="p">,</span> <span class="nx">top</span><span class="p">,</span> <span class="nx">offset</span><span class="p">.</span><span class="nx">left</span><span class="p">,</span> <span class="nx">offset</span><span class="p">.</span><span class="nx">top</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">offsetWidth</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">offsetHeight</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">res</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-5"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5">¶</a> </div> <p>Add it to the results</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">ret</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">pushStack</span><span class="p">(</span><span class="nx">$</span><span class="p">.</span><span class="nx">unique</span><span class="p">(</span><span class="nx">ret</span><span class="p">),</span> <span class="s2">"within"</span><span class="p">,</span> <span class="nx">left</span> <span class="o">+</span> <span class="s2">","</span> <span class="o">+</span> <span class="nx">top</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">fn</span><span class="p">.</span><span class="nx">withinBox</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">left</span><span class="p">,</span> <span class="nx">top</span><span class="p">,</span> <span class="nx">width</span><span class="p">,</span> <span class="nx">height</span><span class="p">,</span> <span class="nx">useOffsetCache</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">ret</span> <span class="o">=</span> <span class="p">[]</span>
<span class="k">this</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">q</span> <span class="o">=</span> <span class="nx">jQuery</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="k">this</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="k">return</span> <span class="nx">ret</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="k">this</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">¶</a> </div> <p>use cached offset or .offset()</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">offset</span> <span class="o">=</span> <span class="nx">useOffsetCache</span> <span class="o">?</span> <span class="nx">$</span><span class="p">.</span><span class="nx">data</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="s2">"offset"</span><span class="p">)</span> <span class="o">||</span> <span class="nx">$</span><span class="p">.</span><span class="nx">data</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="s2">"offset"</span><span class="p">,</span> <span class="nx">q</span><span class="p">.</span><span class="nx">offset</span><span class="p">())</span> <span class="o">:</span> <span class="nx">q</span><span class="p">.</span><span class="nx">offset</span><span class="p">();</span>
<span class="kd">var</span> <span class="nx">ew</span> <span class="o">=</span> <span class="nx">q</span><span class="p">.</span><span class="nx">width</span><span class="p">(),</span>
<span class="nx">eh</span> <span class="o">=</span> <span class="nx">q</span><span class="p">.</span><span class="nx">height</span><span class="p">(),</span></pre></div> </td> </tr> <tr id="section-7"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7">¶</a> </div> <p>Checks if the element offset is within the given box</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">res</span> <span class="o">=</span> <span class="o">!</span><span class="p">((</span><span class="nx">offset</span><span class="p">.</span><span class="nx">top</span> <span class="o">></span> <span class="nx">top</span> <span class="o">+</span> <span class="nx">height</span><span class="p">)</span> <span class="o">||</span> <span class="p">(</span><span class="nx">offset</span><span class="p">.</span><span class="nx">top</span> <span class="o">+</span> <span class="nx">eh</span> <span class="o"><</span> <span class="nx">top</span><span class="p">)</span> <span class="o">||</span> <span class="p">(</span><span class="nx">offset</span><span class="p">.</span><span class="nx">left</span> <span class="o">></span> <span class="nx">left</span> <span class="o">+</span> <span class="nx">width</span><span class="p">)</span> <span class="o">||</span> <span class="p">(</span><span class="nx">offset</span><span class="p">.</span><span class="nx">left</span> <span class="o">+</span> <span class="nx">ew</span> <span class="o"><</span> <span class="nx">left</span><span class="p">));</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">res</span><span class="p">)</span> <span class="nx">ret</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
<span class="p">});</span>
<span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">pushStack</span><span class="p">(</span><span class="nx">$</span><span class="p">.</span><span class="nx">unique</span><span class="p">(</span><span class="nx">ret</span><span class="p">),</span> <span class="s2">"withinBox"</span><span class="p">,</span> <span class="nx">$</span><span class="p">.</span><span class="nx">makeArray</span><span class="p">(</span><span class="nx">arguments</span><span class="p">).</span><span class="nx">join</span><span class="p">(</span><span class="s2">","</span><span class="p">));</span>
<span class="p">}</span>
<span class="k">return</span> <span class="nx">$</span><span class="p">;</span>
<span class="p">})(</span><span class="nx">jQuery</span><span class="p">);</span>
</pre></div> </td> </tr> </tbody> </table> </div> </body> </html>