--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/cm/media/js/lib/yui/yui_3.10.3/docs/event/key.html Tue Jul 16 14:29:46 2013 +0200
@@ -0,0 +1,451 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>The key Event</title>
+ <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic">
+ <link rel="stylesheet" href="../../build/cssgrids/cssgrids-min.css">
+ <link rel="stylesheet" href="../assets/css/main.css">
+ <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
+ <link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
+ <script src="../../build/yui/yui-min.js"></script>
+
+</head>
+<body>
+<!--
+<a href="https://github.com/yui/yui3"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
+-->
+<div id="doc">
+ <div id="hd">
+ <h1><img src="http://yuilibrary.com/img/yui-logo.png"></h1>
+ </div>
+
+ <a href="#toc" class="jump">Jump to Table of Contents</a>
+
+
+ <h1>The key Event</h1>
+ <div class="yui3-g">
+ <div class="yui3-u-3-4">
+ <div id="main">
+ <div class="content"><div class="intro">
+ <p>The <code>event-key</code> module adds the "key" event for subscribing to keyboard
+ events triggered by users entering specific keys. The subscription
+ signature includes a filter configuration that can be used to limit event
+ triggering based on key codes, shift, ctrl, alt, or meta keys pressed, as
+ well as specifying the keyboard event (<code>keydown</code>, <code>keyup</code>, or
+ <code>keypress</code>).</p>
+</div>
+
+<h2 id="the-filtering-spec">The filtering spec</h2>
+
+<p>Example subscriptions might look like this:</p>
+
+<pre class="code prettyprint">// certain keys can be referenced by name
+input.on('key', saveAndClose, 'enter');
+
+// require modifier keys with +(modifier)
+Y.one('doc').on('key', composeMail, 'n+ctrl');
+
+// specify the event and key codes
+datatable.get('contentBox')
+ .delegate('key', moveAround, 'down:37,38,39,40', '.yui3-datatable-liner');</pre>
+
+
+<p>The third argument is the filtering spec. Similar to using the
+<code>node.delegate()</code> method, the callback is only executed if the key event
+matches the filter. The supported filter syntax is a string defined like
+this:</p>
+
+<style>
+.railroad {
+ margin-top: 2em;
+ border-top: 2px solid #555;
+ padding: 0 3em;
+ text-align: center;
+}
+
+.railroad p {
+ display: inline-block;
+ *display: inline; zoom:1;
+ veritical-align: top;
+ position: relative;
+ margin: 0 1.2em;
+ padding: .2em;
+ background: #fff;
+ top: -.85em;
+ font-size: 1.2em;
+ font-weight: bold;
+ *font-weight: normal;
+}
+
+.branch {
+ position: relative;
+ margin: 10px 20px 0;
+ *margin-top: 0;
+ border: 2px solid #555;
+ border-top-width: 0;
+ border-bottom-right-radius: 10px;
+ border-bottom-left-radius: 10px;
+ text-align: center;
+ height: 1.25em;
+ *height: 2em;
+ line-height: 1.25em;
+ *width: 7em;
+}
+.branch:before {
+ display: block;
+ position: absolute;
+ left: -12px;
+ top: -12px;
+ content: ' ';
+ height: 10px;
+ width: 10px;
+ border-top-right-radius: 10px;
+ border: 2px solid #555;
+ border-width: 2px 2px 0 0;
+}
+.branch:after {
+ display: block;
+ position: absolute;
+ right: -12px;
+ top: -12px;
+ content: ' ';
+ height: 10px;
+ width: 10px;
+ border-top-left-radius: 10px;
+ border: 2px solid #555;
+ border-width: 2px 0 0 2px;
+}
+.branch p {
+ top: 0;
+ *top: .8em;
+ _top: 1em;
+ line-height: 1.6em;
+ z-index: 5;
+}
+
+.loop {
+ position: relative;
+ top: -2px;
+ border: 2px solid #555;
+ *border-top-width: 0;
+ *top: 0;
+ border-radius: 10px;
+ text-align: center;
+ height: 2.25em;
+ margin: 0 20px;
+ z-index: 4;
+}
+.loop p {
+ top: .85em;
+ z-index: 5;
+}
+
+.token {
+ padding: .15em .4em .25em;
+ color: #fff;
+ text-shadow: -1px -1px 1px #471F1F;
+ border-radius: .5em;
+
+ background-color: #733;
+ background-image: -webkit-linear-gradient(top, #a55, #733);
+ background-image: -moz-linear-gradient(top, #a55, #733);
+ background-image: -ms-linear-gradient(top, #a55, #733);
+ background-image: -o-linear-gradient(top, #a55, #733);
+ background-image: linear-gradient(top, #a55, #733);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#aa5555', EndColorStr='#773333');
+}
+
+#code-branch .branch, #code-branch .loop {
+ width: 7em;
+}
+#mod-branch .branch, #mod-branch .loop {
+ width: 10.5em;
+}
+</style>
+
+
+<ol>
+ <li>(0..1) <span class="token">type</span> followed by a colon</li>
+ <li>(0..n) comma separated <span class="token">code</span>s</li>
+ <li>(0..n) <span class="token">modifier</span>s, each preceded by "+"</li>
+</ol>
+
+<h4 id="choo-choo">Choo choo!</h4>
+<p>If you're into railroad diagrams, the filter spec looks like this:</p>
+
+<ul class="railroad yui3-g">
+ <li class="yui3-u">
+ <p>"</p>
+ </li>
+ <li class="yui3-u">
+ <div class="branch">
+ <p><span class="token">type</span> :</p>
+ </div>
+ </li>
+ <li class="yui3-u" id="code-branch">
+ <div class="branch">
+ <p><span class="token">code</span></p>
+ </div>
+ <div class="loop">
+ <p>,</p>
+ </div>
+ </li>
+ <li class="yui3-u" id="mod-branch">
+ <div class="branch">
+ <p>+<span class="token">modifier</span></p>
+ </div>
+ <div class="loop"></div>
+ </li>
+ <li class="yui3-u">
+ <p>"</p>
+ </li>
+</ul>
+
+<h4 id="filter-tokens">Filter tokens</h4>
+
+<dl>
+ <dt><span class="token">type</span></dt>
+ <dd>"down", "up", or "press" for <code>keydown</code>, <code>keyup</code>, and <code>keypress</code>.
+ The default is <code>keypress</code>.</dd>
+
+ <dt><span class="token">code</span><dt>
+ <dd>Any numeric <code>keyCode</code>, unicode character, or <a
+ href="#common">common key name</a>.</dd>
+
+ <dt><span class="token">modifier</span></dt>
+ <dd>"shift", "alt", "ctrl", or "meta". "meta" is the Windows key on
+ Windows-friendly keyboards or the Command key on Apple keyboards.
+ Remember each must be prefixed with "+".</dd>
+</dl>
+
+<h2 id="common">Common keys by name</h2>
+
+<p>Certain keys are common enough that referring to them by name is just easier
+and makes the code more readable. The supported key names are:</p>
+
+<table>
+<thead>
+ <tr>
+ <th>Name</th>
+ <th><code>e.keyCode</code></th>
+ </tr>
+</thead>
+<tbody>
+ <tr>
+ <td>enter</td>
+ <td>13</td>
+ </tr>
+ <tr>
+ <td>esc</td>
+ <td>27</td>
+ </tr>
+ <tr>
+ <td>backspace</td>
+ <td>8</td>
+ </tr>
+ <tr>
+ <td>tab</td>
+ <td>9</td>
+ </tr>
+ <tr>
+ <td>pageup</td>
+ <td>33</td>
+ </tr>
+ <tr>
+ <td>pagedown</td>
+ <td>34</td>
+ </tr>
+</tbody>
+</table>
+
+<p>If any of these are found in the spec, the default <span
+class="token">type</span> becomes <code>keydown</code>.</p>
+
+<p>If you have a mind to extend this map, it's stored in
+<code>Y.Node.DOM_EVENTS.key.eventDef.KEY_MAP</code>. For example, to add support for
+<code>node.on('key', callback, 'arrowup')</code>, you'd do:</p>
+
+<pre class="code prettyprint">Y.Node.DOM_EVENTS.key.eventDef.KEY_MAP.arrowup = 38;</pre>
+
+
+<h2 id="caveats">Caveats</h2>
+
+<ol>
+ <li>
+ You can't yet indicate that <span class="token">modifier</span>s must
+ <em>not</em> be in effect or key combinations must <em>only</em>
+ include those <span class="token">modifier</span>s.
+ </li>
+ <li>
+ You can't yet specify <span class="token">type</span>s or <span
+ class="token">modifier</span>s on a per-<span class="token">code</span>
+ basis.
+ </li>
+ <li>
+ Though you can specify keys by their common name, the event is not yet
+ decorated in any way with that common name, so you still have to refer
+ to the <code>keyCode</code> in callback code.
+ </li>
+</ol>
+</div>
+ </div>
+ </div>
+
+ <div class="yui3-u-1-4">
+ <div class="sidebar">
+
+ <div id="toc" class="sidebox">
+ <div class="hd">
+ <h2 class="no-toc">Table of Contents</h2>
+ </div>
+
+ <div class="bd">
+ <ul class="toc">
+<li>
+<a href="#the-filtering-spec">The filtering spec</a>
+<ul class="toc">
+<li>
+<a href="#choo-choo">Choo choo!</a>
+</li>
+<li>
+<a href="#filter-tokens">Filter tokens</a>
+</li>
+</ul>
+</li>
+<li>
+<a href="#common">Common keys by name</a>
+</li>
+<li>
+<a href="#caveats">Caveats</a>
+</li>
+</ul>
+ </div>
+ </div>
+
+
+
+ <div class="sidebox">
+ <div class="hd">
+ <h2 class="no-toc">Examples</h2>
+ </div>
+
+ <div class="bd">
+ <ul class="examples">
+
+
+ <li data-description="Use the Event Utility to attach simple DOM event handlers.">
+ <a href="basic-example.html">Simple DOM Events</a>
+ </li>
+
+
+
+ <li data-description="Using the synthetic event API to create a DOM event that fires in response to arrow keys being pressed.">
+ <a href="synth-example.html">Creating an Arrow Event for DOM Subscription</a>
+ </li>
+
+
+
+ <li data-description="Supporting cross-device swipe gestures, using the event-move gesture events">
+ <a href="swipe-example.html">Supporting A Swipe Left Gesture</a>
+ </li>
+
+
+
+
+
+
+
+
+
+
+
+
+ </ul>
+ </div>
+ </div>
+
+
+
+ <div class="sidebox">
+ <div class="hd">
+ <h2 class="no-toc">Examples That Use This Component</h2>
+ </div>
+
+ <div class="bd">
+ <ul class="examples">
+
+
+
+
+
+
+
+
+ <li data-description="Creating an accessible menu button using the Focus Manager Node Plugin, Event's delegation support and mouseenter event, along with the Overlay widget and Node's support for the WAI-ARIA Roles and States.">
+ <a href="../node-focusmanager/node-focusmanager-button.html">Accessible Menu Button</a>
+ </li>
+
+
+
+ <li data-description="Shows how to extend the base widget class, to create your own Widgets.">
+ <a href="../widget/widget-extend.html">Extending the Base Widget Class</a>
+ </li>
+
+
+
+ <li data-description="Example Photo Browser application.">
+ <a href="../dd/photo-browser.html">Photo Browser</a>
+ </li>
+
+
+
+ <li data-description="Portal style example using Drag & Drop Event Bubbling and Animation.">
+ <a href="../dd/portal-drag.html">Portal Style Example</a>
+ </li>
+
+
+
+ <li data-description="Use IO to request data over HTTP.">
+ <a href="../io/get.html">HTTP GET to request data</a>
+ </li>
+
+
+ </ul>
+ </div>
+ </div>
+
+ </div>
+ </div>
+ </div>
+</div>
+
+<script src="../assets/vendor/prettify/prettify-min.js"></script>
+<script>prettyPrint();</script>
+
+<script>
+YUI.Env.Tests = {
+ examples: [],
+ project: '../assets',
+ assets: '../assets/event',
+ name: 'event',
+ title: 'The key Event',
+ newWindow: '',
+ auto: false
+};
+YUI.Env.Tests.examples.push('basic-example');
+YUI.Env.Tests.examples.push('synth-example');
+YUI.Env.Tests.examples.push('swipe-example');
+YUI.Env.Tests.examples.push('node-focusmanager-button');
+YUI.Env.Tests.examples.push('widget-extend');
+YUI.Env.Tests.examples.push('photo-browser');
+YUI.Env.Tests.examples.push('portal-drag');
+YUI.Env.Tests.examples.push('get');
+
+</script>
+<script src="../assets/yui/test-runner.js"></script>
+
+
+
+</body>
+</html>