← Back to branch summary

~ubuntu-branches/ubuntu/raring/maas/raring-updates

« back to all changes in this revision

Viewing changes to src/maasserver/static/jslibs/yui/3.4.1/docs/event/key.html

  • Committer: Package Import Robot
  • Author(s): Andres Rodriguez
  • Date: 2012-07-03 17:42:37 UTC
  • mfrom: (1.1.13)
  • Revision ID: package-import@ubuntu.com-20120703174237-p8l0keuuznfg721k
Tags: 0.1+bzr709+dfsg-0ubuntu1
* New Upstream release
* debian/control:
  - Depends on python-celery, python-tempita, libjs-yui3-{full,min},
    libjs-raphael
* debian/maas.install:
  - Install apiclient, celeryconfig.py, maas-import-pxe-files, preseeds_v2.
  - Update to install various files from chroot, rather tha manually copy
    them from the source.
* debian/maas.links: symlink celeryconfig.py
* debian/maas.maas-celery.upstart: Add job.
* debian/rules:
  - Install celery upstart job.
  - Do not install jslibs as packages are now used.
  - Drop copying of maas_local_settings_sample.py as source now ships
    a maas_local_settings.py
* debian/patches:
  - 04-maas-http-fix.patch: Drop. Merged upstream.
  - 01-fix-database-settings.patch: Refreshed.
  - 99_enums_js.patch: Added until creation of enum.js / build process
    is fixed.
* debian/maas.postinst: Update bzr version to correctly handle upgrades.

Show diffs side-by-side

added added

removed removed

Lines of Context:
src/maasserver/static/jslibs/yui/3.4.1/docs/event/key.html
1
 
<!DOCTYPE html>
2
 
<html lang="en">
3
 
<head>
4
 
    <meta charset="utf-8">
5
 
    <title>The key Event</title>
6
 
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
7
 
    <link rel="stylesheet" href="../assets/css/main.css">
8
 
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
9
 
    <script src="../../build/yui/yui-min.js"></script>
10
 
</head>
11
 
<body>
12
 
 
13
 
<div id="doc">
14
 
    <h1>The key Event</h1>
15
 
 
16
 
    
17
 
        <a href="#toc" class="jump">Jump to Table of Contents</a>
18
 
    
19
 
 
20
 
    <div class="yui3-g">
21
 
        <div id="main" class="yui3-u">
22
 
            <div class="content"><div class="intro">
23
 
    <p>The <code>event-key</code> module adds the "key" event for subscribing to keyboard
24
 
    events triggered by users entering specific keys.  The subscription
25
 
    signature includes a filter configuration that can be used to limit event
26
 
    triggering based on key codes, shift, ctrl, alt, or meta keys pressed, as
27
 
    well as specifying the keyboard event (<code>keydown</code>, <code>keyup</code>, or
28
 
    <code>keypress</code>).</p>
29
 
</div>
30
 
 
31
 
<h2 id="the-filtering-spec">The filtering spec</h2>
32
 
 
33
 
<p>Example subscriptions might look like this:</p>
34
 
 
35
 
<pre class="code prettyprint">&#x2F;&#x2F; certain keys can be referenced by name
36
 
input.on(&#x27;key&#x27;, saveAndClose, &#x27;enter&#x27;);
37
 
 
38
 
&#x2F;&#x2F; require modifier keys with +(modifier)
39
 
Y.one(&#x27;doc&#x27;).on(&#x27;key&#x27;, composeMail, &#x27;n+ctrl&#x27;);
40
 
 
41
 
&#x2F;&#x2F; specify the event and key codes
42
 
datatable.get(&#x27;contentBox&#x27;)
43
 
    .delegate(&#x27;key&#x27;, moveAround, &#x27;down:37,38,39,40&#x27;, &#x27;.yui3-datatable-liner&#x27;);</pre>
44
 
 
45
 
 
46
 
<p>The third argument is the filtering spec.  Similar to using the
47
 
<code>node.delegate()</code> method, the callback is only executed if the key event
48
 
matches the filter.  The supported filter syntax is a string defined like
49
 
this:</p>
50
 
 
51
 
<style>
52
 
.railroad {
53
 
    margin-top: 2em;
54
 
    border-top: 2px solid #555;
55
 
    padding: 0 3em;
56
 
    text-align: center;
57
 
}
58
 
 
59
 
.railroad p {
60
 
    display: inline-block;
61
 
    *display: inline; zoom:1;
62
 
    veritical-align: top;
63
 
    position: relative;
64
 
    margin: 0 1.2em;
65
 
    padding: .2em;
66
 
    background: #fff;
67
 
    top: -.85em;
68
 
    font-size: 1.2em;
69
 
    font-weight: bold;
70
 
    *font-weight: normal;
71
 
}
72
 
 
73
 
.branch {
74
 
    position: relative;
75
 
    margin: 10px 20px 0;
76
 
    *margin-top: 0;
77
 
    border: 2px solid #555;
78
 
    border-top-width: 0;
79
 
    border-bottom-right-radius: 10px;
80
 
    border-bottom-left-radius: 10px;
81
 
    text-align: center;
82
 
    height: 1.25em;
83
 
    *height: 2em;
84
 
    line-height: 1.25em;
85
 
    *width: 7em;
86
 
}
87
 
.branch:before {
88
 
    display: block;
89
 
    position: absolute;
90
 
    left: -12px;
91
 
    top: -12px;
92
 
    content: ' ';
93
 
    height: 10px;
94
 
    width: 10px;
95
 
    border-top-right-radius: 10px;
96
 
    border: 2px solid #555;
97
 
    border-width: 2px 2px 0 0;
98
 
}
99
 
.branch:after {
100
 
    display: block;
101
 
    position: absolute;
102
 
    right: -12px;
103
 
    top: -12px;
104
 
    content: ' ';
105
 
    height: 10px;
106
 
    width: 10px;
107
 
    border-top-left-radius: 10px;
108
 
    border: 2px solid #555;
109
 
    border-width: 2px 0 0 2px;
110
 
}
111
 
.branch p {
112
 
    top: 0;
113
 
    *top: .8em;
114
 
    _top: 1em;
115
 
    line-height: 1.6em;
116
 
    z-index: 5;
117
 
}
118
 
 
119
 
.loop {
120
 
    position: relative;
121
 
    top: -2px;
122
 
    border: 2px solid #555;
123
 
    *border-top-width: 0;
124
 
    *top: 0;
125
 
    border-radius: 10px;
126
 
    text-align: center;
127
 
    height: 2.25em;
128
 
    margin: 0 20px;
129
 
    z-index: 4;
130
 
}
131
 
.loop p {
132
 
    top: .85em;
133
 
    z-index: 5;
134
 
}
135
 
 
136
 
.token {
137
 
    padding: .15em .4em .25em;
138
 
    color: #fff;
139
 
    text-shadow: -1px -1px 1px #471F1F;
140
 
    border-radius: .5em;
141
 
 
142
 
    background-color: #733;
143
 
    background-image: -webkit-linear-gradient(top, #a55, #733); 
144
 
    background-image:    -moz-linear-gradient(top, #a55, #733); 
145
 
    background-image:     -ms-linear-gradient(top, #a55, #733); 
146
 
    background-image:      -o-linear-gradient(top, #a55, #733); 
147
 
    background-image:         linear-gradient(top, #a55, #733);
148
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#aa5555', EndColorStr='#773333'); 
149
 
}
150
 
 
151
 
#code-branch .branch, #code-branch .loop {
152
 
    width: 7em;
153
 
}
154
 
#mod-branch .branch, #mod-branch .loop {
155
 
    width: 10.5em;
156
 
}
157
 
</style>
158
 
 
159
 
 
160
 
<ol>
161
 
    <li>(0..1) <span class="token">type</span> followed by a colon</li>
162
 
    <li>(0..n) comma separated <span class="token">code</span>s</li>
163
 
    <li>(0..n) <span class="token">modifier</span>s, each preceded by "+"</li>
164
 
</ol>
165
 
 
166
 
<h4 id="choo-choo">Choo choo!</h4>
167
 
<p>If you're into railroad diagrams, the filter spec looks like this:</p>
168
 
 
169
 
<ul class="railroad yui3-g">
170
 
    <li class="yui3-u">
171
 
        <p>"</p>
172
 
    </li>
173
 
    <li class="yui3-u">
174
 
        <div class="branch">
175
 
            <p><span class="token">type</span> :</p>
176
 
        </div>
177
 
    </li>
178
 
    <li class="yui3-u" id="code-branch">
179
 
        <div class="branch">
180
 
            <p><span class="token">code</span></p>
181
 
        </div>
182
 
        <div class="loop">
183
 
            <p>,</p>
184
 
        </div>
185
 
    </li>
186
 
    <li class="yui3-u" id="mod-branch">
187
 
        <div class="branch">
188
 
            <p>+<span class="token">modifier</span></p>
189
 
        </div>
190
 
        <div class="loop"></div>
191
 
    </li>
192
 
    <li class="yui3-u">
193
 
        <p>"</p>
194
 
    </li>
195
 
</ul>
196
 
 
197
 
<h4 id="filter-tokens">Filter tokens</h4>
198
 
 
199
 
<dl>
200
 
    <dt><span class="token">type</span></dt>
201
 
        <dd>"down", "up", or "press" for <code>keydown</code>, <code>keyup</code>, and <code>keypress</code>.
202
 
        The default is <code>keypress</code>.</dd>
203
 
 
204
 
    <dt><span class="token">code</span><dt>
205
 
        <dd>Any numeric <code>keyCode</code>, unicode character, or <a
206
 
        href="#common">common key name</a>.</dd>
207
 
 
208
 
    <dt><span class="token">modifier</span></dt>
209
 
        <dd>"shift", "alt", "ctrl", or "meta". "meta" is the Windows key on
210
 
        Windows-friendly keyboards or the Command key on Apple keyboards.
211
 
        Remember each must be prefixed with "+".</dd>
212
 
</dl>
213
 
 
214
 
<h2 id="common">Common keys by name</h2>
215
 
 
216
 
<p>Certain keys are common enough that referring to them by name is just easier
217
 
and makes the code more readable.  The supported key names are:</p>
218
 
 
219
 
<table>
220
 
<thead>
221
 
    <tr>
222
 
        <th>Name</th>
223
 
        <th><code>e.keyCode</code></th>
224
 
    </tr>
225
 
</thead>
226
 
<tbody>
227
 
    <tr>
228
 
        <td>enter</td>
229
 
        <td>13</td>
230
 
    </tr>
231
 
    <tr>
232
 
        <td>esc</td>
233
 
        <td>27</td>
234
 
    </tr>
235
 
    <tr>
236
 
        <td>backspace</td>
237
 
        <td>8</td>
238
 
    </tr>
239
 
    <tr>
240
 
        <td>tab</td>
241
 
        <td>9</td>
242
 
    </tr>
243
 
    <tr>
244
 
        <td>pageup</td>
245
 
        <td>33</td>
246
 
    </tr>
247
 
    <tr>
248
 
        <td>pagedown</td>
249
 
        <td>34</td>
250
 
    </tr>
251
 
</tbody>
252
 
</table>
253
 
 
254
 
<p>If any of these are found in the spec, the default <span
255
 
class="token">type</span> becomes <code>keydown</code>.</p>
256
 
 
257
 
<p>If you have a mind to extend this map, it's stored in
258
 
<code>Y.Node.DOM_EVENTS.key.eventDef.KEY_MAP</code>.  For example, to add support for
259
 
<code>node.on(&#x27;key&#x27;, callback, &#x27;arrowup&#x27;)</code>, you'd do:</p>
260
 
 
261
 
<pre class="code prettyprint">Y.Node.DOM_EVENTS.key.eventDef.KEY_MAP.arrowup = 38;</pre>
262
 
 
263
 
 
264
 
<h2 id="caveats">Caveats</h2>
265
 
 
266
 
<ol>
267
 
    <li>
268
 
        You can't yet indicate that <span class="token">modifier</span>s must
269
 
        <em>not</em> be in effect or key combinations must <em>only</em>
270
 
        include those <span class="token">modifier</span>s.
271
 
    </li>
272
 
    <li>
273
 
        You can't yet specify <span class="token">type</span>s or <span
274
 
        class="token">modifier</span>s on a per-<span class="token">code</span>
275
 
        basis.
276
 
    </li>
277
 
    <li>
278
 
        Though you can specify keys by their common name, the event is not yet
279
 
        decorated in any way with that common name, so you still have to refer
280
 
        to the <code>keyCode</code> in callback code.
281
 
    </li>
282
 
</ol>
283
 
</div>
284
 
        </div>
285
 
 
286
 
        <div id="sidebar" class="yui3-u">
287
 
            
288
 
                <div id="toc" class="sidebox">
289
 
                    <div class="hd">
290
 
                        <h2 class="no-toc">Table of Contents</h2>
291
 
                    </div>
292
 
 
293
 
                    <div class="bd">
294
 
                        <ul class="toc">
295
 
<li>
296
 
<a href="#the-filtering-spec">The filtering spec</a>
297
 
<ul class="toc">
298
 
<li>
299
 
<a href="#choo-choo">Choo choo!</a>
300
 
</li>
301
 
<li>
302
 
<a href="#filter-tokens">Filter tokens</a>
303
 
</li>
304
 
</ul>
305
 
</li>
306
 
<li>
307
 
<a href="#common">Common keys by name</a>
308
 
</li>
309
 
<li>
310
 
<a href="#caveats">Caveats</a>
311
 
</li>
312
 
</ul>
313
 
                    </div>
314
 
                </div>
315
 
            
316
 
 
317
 
            
318
 
                <div class="sidebox">
319
 
                    <div class="hd">
320
 
                        <h2 class="no-toc">Examples</h2>
321
 
                    </div>
322
 
 
323
 
                    <div class="bd">
324
 
                        <ul class="examples">
325
 
                            
326
 
                                
327
 
                                    <li data-description="Use the Event Utility to attach simple DOM event handlers.">
328
 
                                        <a href="basic-example.html">Simple DOM Events</a>
329
 
                                    </li>
330
 
                                
331
 
                            
332
 
                                
333
 
                                    <li data-description="Using the synthetic event API to create a DOM event that fires in response to arrow keys being pressed.">
334
 
                                        <a href="synth-example.html">Creating an Arrow Event for DOM Subscription</a>
335
 
                                    </li>
336
 
                                
337
 
                            
338
 
                                
339
 
                                    <li data-description="Supporting cross-device swipe gestures, using the event-move gesture events">
340
 
                                        <a href="swipe-example.html">Supporting A Swipe Left Gesture</a>
341
 
                                    </li>
342
 
                                
343
 
                            
344
 
                                
345
 
                            
346
 
                                
347
 
                            
348
 
                                
349
 
                            
350
 
                                
351
 
                            
352
 
                                
353
 
                            
354
 
                        </ul>
355
 
                    </div>
356
 
                </div>
357
 
            
358
 
 
359
 
            
360
 
                <div class="sidebox">
361
 
                    <div class="hd">
362
 
                        <h2 class="no-toc">Examples That Use This Component</h2>
363
 
                    </div>
364
 
 
365
 
                    <div class="bd">
366
 
                        <ul class="examples">
367
 
                            
368
 
                                
369
 
                            
370
 
                                
371
 
                            
372
 
                                
373
 
                            
374
 
                                
375
 
                                    <li data-description="Shows how to extend the base widget class, to create your own Widgets.">
376
 
                                        <a href="../widget/widget-extend.html">Extending the Base Widget Class</a>
377
 
                                    </li>
378
 
                                
379
 
                            
380
 
                                
381
 
                                    <li data-description="Creating an accessible menu button using the Focus Manager Node Plugin, Event&#x27;s delegation support and mouseenter event, along with the Overlay widget and Node&#x27;s support for the WAI-ARIA Roles and States.">
382
 
                                        <a href="../node-focusmanager/node-focusmanager-3.html">Accessible Menu Button</a>
383
 
                                    </li>
384
 
                                
385
 
                            
386
 
                                
387
 
                                    <li data-description="Use IO to request data over HTTP.">
388
 
                                        <a href="../io/get.html">HTTP GET to request data</a>
389
 
                                    </li>
390
 
                                
391
 
                            
392
 
                                
393
 
                                    <li data-description="Example Photo Browser application.">
394
 
                                        <a href="../dd/photo-browser.html">Photo Browser</a>
395
 
                                    </li>
396
 
                                
397
 
                            
398
 
                                
399
 
                                    <li data-description="Portal style example using Drag &amp; Drop Event Bubbling and Animation.">
400
 
                                        <a href="../dd/portal-drag.html">Portal Style Example</a>
401
 
                                    </li>
402
 
                                
403
 
                            
404
 
                        </ul>
405
 
                    </div>
406
 
                </div>
407
 
            
408
 
        </div>
409
 
    </div>
410
 
</div>
411
 
 
412
 
<script src="../assets/vendor/prettify/prettify-min.js"></script>
413
 
<script>prettyPrint();</script>
414
 
 
415
 
</body>
416
 
</html>