forked from documentcloud/visualsearch
-
Notifications
You must be signed in to change notification settings - Fork 0
/
hotkeys.html
70 lines (64 loc) · 18.4 KB
/
hotkeys.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
<!DOCTYPE html> <html> <head> <title>hotkeys.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="search_facets.html"> search_facets.js </a> <a class="source" href="search_query.html"> search_query.js </a> <a class="source" href="templates.html"> templates.js </a> <a class="source" href="backbone_extensions.html"> backbone_extensions.js </a> <a class="source" href="hotkeys.html"> hotkeys.js </a> <a class="source" href="inflector.html"> inflector.js </a> <a class="source" href="jquery_extensions.html"> jquery_extensions.js </a> <a class="source" href="search_parser.html"> search_parser.js </a> <a class="source" href="search_box.html"> search_box.js </a> <a class="source" href="search_facet.html"> search_facet.js </a> <a class="source" href="search_input.html"> search_input.js </a> <a class="source" href="visualsearch.html"> visualsearch.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> hotkeys.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="p">{</span>
<span class="kd">var</span> <span class="nx">$</span> <span class="o">=</span> <span class="nx">jQuery</span><span class="p">;</span> <span class="c1">// Handle namespaced jQuery</span></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">¶</a> </div> <p>DocumentCloud workspace hotkeys. To tell if a key is currently being pressed,
just ask <code>VS.app.hotkeys.[key]</code> on <code>keypress</code>, or ask <code>VS.app.hotkeys.key(e)</code>
on <code>keydown</code>.</p>
<p>For the most headache-free way to use this utility, check modifier keys,
like shift and command, with <code>VS.app.hotkeys.shift</code>, and check every other
key with <code>VS.app.hotkeys.key(e) == 'key_name'</code>.</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">VS</span><span class="p">.</span><span class="nx">app</span><span class="p">.</span><span class="nx">hotkeys</span> <span class="o">=</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>Keys that will be mapped to the <code>hotkeys</code> namespace.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">KEYS</span><span class="o">:</span> <span class="p">{</span>
<span class="s1">'16'</span><span class="o">:</span> <span class="s1">'shift'</span><span class="p">,</span>
<span class="s1">'17'</span><span class="o">:</span> <span class="s1">'command'</span><span class="p">,</span>
<span class="s1">'91'</span><span class="o">:</span> <span class="s1">'command'</span><span class="p">,</span>
<span class="s1">'93'</span><span class="o">:</span> <span class="s1">'command'</span><span class="p">,</span>
<span class="s1">'224'</span><span class="o">:</span> <span class="s1">'command'</span><span class="p">,</span>
<span class="s1">'13'</span><span class="o">:</span> <span class="s1">'enter'</span><span class="p">,</span>
<span class="s1">'37'</span><span class="o">:</span> <span class="s1">'left'</span><span class="p">,</span>
<span class="s1">'38'</span><span class="o">:</span> <span class="s1">'upArrow'</span><span class="p">,</span>
<span class="s1">'39'</span><span class="o">:</span> <span class="s1">'right'</span><span class="p">,</span>
<span class="s1">'40'</span><span class="o">:</span> <span class="s1">'downArrow'</span><span class="p">,</span>
<span class="s1">'46'</span><span class="o">:</span> <span class="s1">'delete'</span><span class="p">,</span>
<span class="s1">'8'</span><span class="o">:</span> <span class="s1">'backspace'</span><span class="p">,</span>
<span class="s1">'9'</span><span class="o">:</span> <span class="s1">'tab'</span><span class="p">,</span>
<span class="s1">'188'</span><span class="o">:</span> <span class="s1">'comma'</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>Binds global keydown and keyup events to listen for keys that match <code>this.KEYS</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">initialize</span> <span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">_</span><span class="p">.</span><span class="nx">bindAll</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="s1">'down'</span><span class="p">,</span> <span class="s1">'up'</span><span class="p">,</span> <span class="s1">'blur'</span><span class="p">);</span>
<span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'keydown'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">down</span><span class="p">);</span>
<span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'keyup'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">up</span><span class="p">);</span>
<span class="nx">$</span><span class="p">(</span><span class="nb">window</span><span class="p">).</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'blur'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">blur</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>On <code>keydown</code>, turn on all keys that match.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">down</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">key</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">KEYS</span><span class="p">[</span><span class="nx">e</span><span class="p">.</span><span class="nx">which</span><span class="p">];</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">key</span><span class="p">)</span> <span class="k">this</span><span class="p">[</span><span class="nx">key</span><span class="p">]</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</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>On <code>keyup</code>, turn off all keys that match.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">up</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">key</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">KEYS</span><span class="p">[</span><span class="nx">e</span><span class="p">.</span><span class="nx">which</span><span class="p">];</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">key</span><span class="p">)</span> <span class="k">this</span><span class="p">[</span><span class="nx">key</span><span class="p">]</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</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>If an input is blurred, all keys need to be turned off, since they are no longer
able to modify the document.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">blur</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">key</span> <span class="k">in</span> <span class="k">this</span><span class="p">.</span><span class="nx">KEYS</span><span class="p">)</span> <span class="k">this</span><span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">KEYS</span><span class="p">[</span><span class="nx">key</span><span class="p">]]</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</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>Check a key from an event and return the common english name.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">key</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</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">KEYS</span><span class="p">[</span><span class="nx">e</span><span class="p">.</span><span class="nx">which</span><span class="p">];</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>Colon is special, since the value is different between browsers.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">colon</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">charCode</span> <span class="o">=</span> <span class="nx">e</span><span class="p">.</span><span class="nx">which</span><span class="p">;</span>
<span class="k">return</span> <span class="nx">charCode</span> <span class="o">&&</span> <span class="nb">String</span><span class="p">.</span><span class="nx">fromCharCode</span><span class="p">(</span><span class="nx">charCode</span><span class="p">)</span> <span class="o">==</span> <span class="s2">":"</span><span class="p">;</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> <p>Check a key from an event and match it against any known characters.
The <code>keyCode</code> is different depending on the event type: <code>keydown</code> vs. <code>keypress</code>.</p>
<p>These were determined by looping through every <code>keyCode</code> and <code>charCode</code> that
resulted from <code>keydown</code> and <code>keypress</code> events and counting what was printable.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">printable</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">code</span> <span class="o">=</span> <span class="nx">e</span><span class="p">.</span><span class="nx">which</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">type</span> <span class="o">==</span> <span class="s1">'keydown'</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">code</span> <span class="o">==</span> <span class="mi">32</span> <span class="o">||</span> <span class="c1">// space</span>
<span class="p">(</span><span class="nx">code</span> <span class="o">>=</span> <span class="mi">48</span> <span class="o">&&</span> <span class="nx">code</span> <span class="o"><=</span> <span class="mi">90</span><span class="p">)</span> <span class="o">||</span> <span class="c1">// 0-1a-z</span>
<span class="p">(</span><span class="nx">code</span> <span class="o">>=</span> <span class="mi">96</span> <span class="o">&&</span> <span class="nx">code</span> <span class="o"><=</span> <span class="mi">111</span><span class="p">)</span> <span class="o">||</span> <span class="c1">// 0-9+-/*.</span>
<span class="p">(</span><span class="nx">code</span> <span class="o">>=</span> <span class="mi">186</span> <span class="o">&&</span> <span class="nx">code</span> <span class="o"><=</span> <span class="mi">192</span><span class="p">)</span> <span class="o">||</span> <span class="c1">// ;=,-./^</span>
<span class="p">(</span><span class="nx">code</span> <span class="o">>=</span> <span class="mi">219</span> <span class="o">&&</span> <span class="nx">code</span> <span class="o"><=</span> <span class="mi">222</span><span class="p">))</span> <span class="p">{</span> <span class="c1">// (\)'</span>
<span class="k">return</span> <span class="kc">true</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span> <span class="k">else</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>[space]!"#$%&'()*+,-.0-9:;<=>?@A-Z[]^_`a-z{|} and unicode characters</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">((</span><span class="nx">code</span> <span class="o">>=</span> <span class="mi">32</span> <span class="o">&&</span> <span class="nx">code</span> <span class="o"><=</span> <span class="mi">126</span><span class="p">)</span> <span class="o">||</span>
<span class="p">(</span><span class="nx">code</span> <span class="o">>=</span> <span class="mi">160</span> <span class="o">&&</span> <span class="nx">code</span> <span class="o"><=</span> <span class="mi">500</span><span class="p">)</span> <span class="o">||</span>
<span class="p">(</span><span class="nb">String</span><span class="p">.</span><span class="nx">fromCharCode</span><span class="p">(</span><span class="nx">code</span><span class="p">)</span> <span class="o">==</span> <span class="s2">":"</span><span class="p">))</span> <span class="p">{</span>
<span class="k">return</span> <span class="kc">true</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">};</span>
<span class="p">})();</span>
</pre></div> </td> </tr> </tbody> </table> </div> </body> </html>