This repository has been archived by the owner on Oct 16, 2018. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
75 lines (69 loc) · 15.8 KB
/
index.html
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
<!DOCTYPE html> <html> <head> <title>jquery.tapclick.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> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> jquery.tapclick.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> <p>A jQuery plugin that creates a new <code>tapclick</code> special event. <code>tapclick</code> is
like like a normal <code>click</code> event, but avoids the 300ms click delay on touch
devices. This plugin was based on Google's <a href="https://developers.google.com/mobile/articles/fast_buttons">Fast Buttons</a>, but with some
extra smarts to handle delegated events.</p>
<p>Elements listening for <code>tapclick</code> events will have the <code>tapclick</code> CSS class
applied to them; useful for avoiding the default tap highlight on the context
element for delegated events:</p>
<pre><code>.tapclick {
-webkit-tap-highlight-color: transparent;
}
</code></pre>
<p><a href="http://github.com/cabin/jquery-tapclick">jQuery tapclick</a> is copyright 2013 <a href="http://madebycabin.com/">Cabin</a> and released under an
MIT-style <a href="http://github.com/cabin/jquery-tapclick/blob/master/LICENSE.md">license</a>.</p> </td> <td class="code"> <div class="highlight"><pre><span class="p">(</span><span class="nf">($) -></span>
<span class="nv">EVENT_NAME = </span><span class="s">'tapclick'</span></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">¶</a> </div> <p>Save a reference to the <code>touchstart</code> coordinate and start listening to
<code>touchmove</code> and <code>touchend</code> events.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nv">onTouchStart = </span><span class="nf">(event) -></span>
<span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">)</span>
<span class="p">.</span><span class="kc">on</span><span class="p">(</span><span class="s">"touchend.</span><span class="si">#{</span><span class="nx">EVENT_NAME</span><span class="si">}</span><span class="s">"</span><span class="p">,</span> <span class="nx">onClick</span><span class="p">)</span>
<span class="p">.</span><span class="kc">on</span><span class="p">(</span><span class="s">"touchmove.</span><span class="si">#{</span><span class="nx">EVENT_NAME</span><span class="si">}</span><span class="s">"</span><span class="p">,</span> <span class="nx">onTouchMove</span><span class="p">)</span>
<span class="nv">touch = </span><span class="nx">event</span><span class="p">.</span><span class="nx">originalEvent</span><span class="p">.</span><span class="nx">touches</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span>
<span class="vi">@startX = </span><span class="nx">touch</span><span class="p">.</span><span class="nx">clientX</span>
<span class="vi">@startY = </span><span class="nx">touch</span><span class="p">.</span><span class="nx">clientY</span></pre></div> </td> </tr> <tr id="section-3"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3">¶</a> </div> <p>When a <code>touchmove</code> event is invoked, reset if the user has dragged past the
threshold of 10px.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nv">onTouchMove = </span><span class="nf">(event) -></span>
<span class="nv">touch = </span><span class="nx">event</span><span class="p">.</span><span class="nx">originalEvent</span><span class="p">.</span><span class="nx">touches</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span>
<span class="nv">movedX = </span><span class="nb">Math</span><span class="p">.</span><span class="nx">abs</span><span class="p">(</span><span class="nx">touch</span><span class="p">.</span><span class="nx">clientX</span> <span class="o">-</span> <span class="nx">@startX</span><span class="p">)</span>
<span class="nv">movedY = </span><span class="nb">Math</span><span class="p">.</span><span class="nx">abs</span><span class="p">(</span><span class="nx">touch</span><span class="p">.</span><span class="nx">clientY</span> <span class="o">-</span> <span class="nx">@startY</span><span class="p">)</span>
<span class="nx">reset</span><span class="p">(</span><span class="k">this</span><span class="p">)</span> <span class="k">if</span> <span class="nx">movedX</span> <span class="o">></span> <span class="mi">10</span> <span class="o">or</span> <span class="nx">movedY</span> <span class="o">></span> <span class="mi">10</span></pre></div> </td> </tr> <tr id="section-4"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4">¶</a> </div> <p>Invoke the actual click handler and prevent ghost clicks if this was a
<code>touchend</code> event on an element with a handler for the special event. The
latter check is necessary to handle event delegation; we don't want to
absorb clicks on children of the delegated context element that aren't
receiving the special event.
<code>jQuery.event.dispatch</code> will set <code>event.currentTarget</code> to each handled
element, so to detect whether any handler was called, set it to <code>null</code>
before dispatching.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nv">onClick = </span><span class="nf">(event) -></span>
<span class="nx">reset</span><span class="p">(</span><span class="k">this</span><span class="p">)</span>
<span class="nv">wasTouch = </span><span class="nx">event</span><span class="p">.</span><span class="nx">type</span> <span class="o">is</span> <span class="s">'touchend'</span>
<span class="nv">event.type = </span><span class="nx">EVENT_NAME</span>
<span class="nv">event.currentTarget = </span><span class="kc">null</span>
<span class="nx">jQuery</span><span class="p">.</span><span class="nx">event</span><span class="p">.</span><span class="nx">dispatch</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="nx">arguments</span><span class="p">)</span>
<span class="k">if</span> <span class="nx">wasTouch</span> <span class="o">and</span> <span class="nx">event</span><span class="p">.</span><span class="nx">currentTarget</span>
<span class="nx">event</span><span class="p">.</span><span class="nx">stopPropagation</span><span class="p">()</span>
<span class="nx">clickbuster</span><span class="p">.</span><span class="nx">preventGhostClick</span><span class="p">(</span><span class="nx">@startX</span><span class="p">,</span> <span class="nx">@startY</span><span class="p">)</span>
<span class="nv">reset = </span><span class="nf">(el) -></span>
<span class="nx">$</span><span class="p">(</span><span class="nx">el</span><span class="p">).</span><span class="kc">off</span><span class="p">(</span><span class="s">"touchend.</span><span class="si">#{</span><span class="nx">EVENT_NAME</span><span class="si">}</span><span class="s"> touchmove.</span><span class="si">#{</span><span class="nx">EVENT_NAME</span><span class="si">}</span><span class="s">"</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> <h1>Clickbuster</h1> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">¶</a> </div> <p>Tracks touched coordinates and consumes matching click events within a
distance/time threshold.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nv">clickbuster =</span>
<span class="nv">coordinates: </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>Call <code>preventGhostClick</code> to bust all click events that happen within 25px
of the provided (x, y) coordinates in the next 2.5s.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nv">preventGhostClick: </span><span class="nf">(x, y) -></span>
<span class="nx">clickbuster</span><span class="p">.</span><span class="nx">coordinates</span><span class="p">.</span><span class="nx">push</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">setTimeout</span><span class="p">(</span><span class="nx">clickbuster</span><span class="p">.</span><span class="nx">pop</span><span class="p">,</span> <span class="mi">2500</span><span class="p">)</span>
<span class="nv">pop: </span><span class="o">-></span>
<span class="nx">clickbuster</span><span class="p">.</span><span class="nx">coordinates</span><span class="p">.</span><span class="nx">shift</span><span class="p">()</span></pre></div> </td> </tr> <tr id="section-8"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8">¶</a> </div> <p>If we catch a click event inside the given radius and time threshold then
we call <code>stopPropagation</code> and <code>preventDefault</code>, which will stop links
from being activated.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nv">onClick: </span><span class="nf">(event) -></span>
<span class="k">for</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="k">in</span> <span class="nx">clickbuster</span><span class="p">.</span><span class="nx">coordinates</span>
<span class="nv">movedX = </span><span class="nb">Math</span><span class="p">.</span><span class="nx">abs</span><span class="p">(</span><span class="nx">event</span><span class="p">.</span><span class="nx">clientX</span> <span class="o">-</span> <span class="nx">x</span><span class="p">)</span>
<span class="nv">movedY = </span><span class="nb">Math</span><span class="p">.</span><span class="nx">abs</span><span class="p">(</span><span class="nx">event</span><span class="p">.</span><span class="nx">clientY</span> <span class="o">-</span> <span class="nx">y</span><span class="p">)</span>
<span class="k">if</span> <span class="nx">movedX</span> <span class="o"><</span> <span class="mi">25</span> <span class="o">and</span> <span class="nx">movedY</span> <span class="o"><</span> <span class="mi">25</span>
<span class="nx">event</span><span class="p">.</span><span class="nx">stopPropagation</span><span class="p">()</span>
<span class="nx">event</span><span class="p">.</span><span class="nx">preventDefault</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">¶</a> </div> <p>Ignore old browsers, since clickbusting is only necessary for touch events
and we need <code>useCapture</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="nb">document</span><span class="p">.</span><span class="nx">addEventListener</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s">'click'</span><span class="p">,</span> <span class="nx">clickbuster</span><span class="p">.</span><span class="nx">onClick</span><span class="p">,</span> <span class="kc">true</span><span class="p">)</span></pre></div> </td> </tr> <tr id="section-10"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10">¶</a> </div> <h1>Custom event</h1> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-11"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11">¶</a> </div> <p>Adds/removes listeners and <code>tapclick</code> class.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">jQuery</span><span class="p">.</span><span class="nx">event</span><span class="p">.</span><span class="nx">special</span><span class="p">[</span><span class="nx">EVENT_NAME</span><span class="p">]</span> <span class="o">=</span>
<span class="nv">setup: </span><span class="o">-></span>
<span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">addClass</span><span class="p">(</span><span class="nx">EVENT_NAME</span><span class="p">)</span>
<span class="p">.</span><span class="kc">on</span><span class="p">(</span><span class="s">"touchstart.</span><span class="si">#{</span><span class="nx">EVENT_NAME</span><span class="si">}</span><span class="s">"</span><span class="p">,</span> <span class="nx">onTouchStart</span><span class="p">)</span>
<span class="p">.</span><span class="kc">on</span><span class="p">(</span><span class="s">"click.</span><span class="si">#{</span><span class="nx">EVENT_NAME</span><span class="si">}</span><span class="s">"</span><span class="p">,</span> <span class="nx">onClick</span><span class="p">)</span>
<span class="nv">teardown: </span><span class="o">-></span>
<span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">removeClass</span><span class="p">(</span><span class="nx">EVENT_NAME</span><span class="p">)</span>
<span class="p">.</span><span class="kc">off</span><span class="p">(</span><span class="s">".</span><span class="si">#{</span><span class="nx">EVENT_NAME</span><span class="si">}</span><span class="s">"</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>