feat(keyEvents): support for <div (keyup.enter)="callback()">

This commit adds a plugin for the event manager, to allow a key name to be appended to the event name (for keyup and keydown events), so that the callback is only called for that key. Here are some examples: (keydown.shift.enter) (keyup.space) (keydown.control.shift.a) (keyup.f1) Key names mostly follow the DOM Level 3 event key values: http://www.w3.org/TR/DOM-Level-3-Events-key/#key-value-tables There are some limitations to be worked on (cf details in https://github.com/angular/angular/pull/1136) but for now, this implementation is reliable for the following keys (by "reliable" I mean compatible with Chrome and Firefox and not depending on the keyboard layout): - alt, control, shift, meta (those keys can be combined with other keys) - tab, enter, backspace, pause, scrolllock, capslock, numlock - insert, delete, home, end, pageup, pagedown - arrowup, arrowdown, arrowleft, arrowright - latin letters (a-z), function keys (f1-f12) - numbers on the numeric keypad (but those keys are not correctly simulated by Chromedriver) There is a sample to play with in examples/src/key_events/. close #523 close #1136
2015-04-10 13:22:00 +02:00
parent f45281a10a
commit 8fa1539bac
9 changed files with 465 additions and 2 deletions
--- a/modules/examples/src/key_events/index.html
+++ b/modules/examples/src/key_events/index.html
@ -0,0 +1,26 @@
+<!doctype html>
+<html>
+  <title>Key events</title>
+  <style>
+    .sample-area {
+      text-align: center;
+      margin: 5px;
+      height: 50px;
+      line-height: 50px;
+      border-radius: 5px;
+      border: 1px solid #d0d0d0;
+    }
+    .sample-area:focus {
+      border: 1px solid blue;
+      color: blue;
+      font-weight: bold;
+    }
+  </style>
+<body>
+  <key-events-app>
+    Loading...
+  </key-events-app>
+
+  $SCRIPTS$
+</body>
+</html>
--- a/modules/examples/src/key_events/index.js
+++ b/modules/examples/src/key_events/index.js
@ -0,0 +1,50 @@
+import {bootstrap, Component, Template} from 'angular2/angular2';
+import {KeyEventsPlugin} from 'angular2/src/render/dom/events/key_events';
+
+// 2 imports for the Dart version:
+import {reflector} from 'angular2/src/reflection/reflection';
+import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabilities';
+
+@Component({
+  selector: 'key-events-app',
+})
+@Template({
+  inline: `Click in the following area and press a key to display its name:<br>
+  <div (keydown)="onKeyDown($event)" class="sample-area" tabindex="0">{{lastKey}}</div><br>
+  Click in the following area and press shift.enter:<br>
+  <div
+    (keydown.shift.enter)="onShiftEnter($event)"
+    (click)="resetShiftEnter()"
+    class="sample-area"
+    tabindex="0"
+  >{{shiftEnter ? 'You pressed shift.enter!' : ''}}</div>`
+})
+class KeyEventsApp {
+  lastKey: string;
+  shiftEnter: boolean;
+
+  constructor() {
+    this.lastKey = '(none)';
+    this.shiftEnter = false;
+  }
+
+  onKeyDown(event) {
+    this.lastKey = KeyEventsPlugin.getEventFullKey(event);
+    event.preventDefault();
+  }
+
+  onShiftEnter(event) {
+    this.shiftEnter = true;
+    event.preventDefault();
+  }
+
+  resetShiftEnter() {
+    this.shiftEnter = false;
+  }
+
+}
+
+export function main() {
+  reflector.reflectionCapabilities = new ReflectionCapabilities(); // for the Dart version
+  bootstrap(KeyEventsApp);
+}