80 lines
2.4 KiB
TypeScript
80 lines
2.4 KiB
TypeScript
/**
|
|
* @license
|
|
* Copyright Google Inc. All Rights Reserved.
|
|
*
|
|
* Use of this source code is governed by an MIT-style license that can be
|
|
* found in the LICENSE file at https://angular.io/license
|
|
*/
|
|
|
|
import {Component, NgModule} from '@angular/core';
|
|
import {BrowserModule} from '@angular/platform-browser';
|
|
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
|
|
|
|
@Component({
|
|
selector: 'key-events-app',
|
|
template: `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 = '(none)';
|
|
shiftEnter: boolean = false;
|
|
|
|
onKeyDown(event: KeyboardEvent): void {
|
|
this.lastKey = KeyEventsApp._getEventFullKey(event);
|
|
event.preventDefault();
|
|
}
|
|
|
|
onShiftEnter(event: KeyboardEvent): void {
|
|
this.shiftEnter = true;
|
|
event.preventDefault();
|
|
}
|
|
|
|
resetShiftEnter(): void { this.shiftEnter = false; }
|
|
|
|
/**
|
|
* Get a more readable version of current pressed keys.
|
|
* @see KeyEventsPlugin.getEventFullKey
|
|
*/
|
|
private static _getEventFullKey(event: KeyboardEvent): string {
|
|
const modifierKeys = ['alt', 'control', 'meta', 'shift'];
|
|
const modifierKeyGetters: {[key: string]: (event: KeyboardEvent) => boolean} = {
|
|
'alt': (event: KeyboardEvent) => event.altKey,
|
|
'control': (event: KeyboardEvent) => event.ctrlKey,
|
|
'meta': (event: KeyboardEvent) => event.metaKey,
|
|
'shift': (event: KeyboardEvent) => event.shiftKey
|
|
};
|
|
|
|
let fullKey = '';
|
|
let key = event.key.toLowerCase();
|
|
if (key === ' ') {
|
|
key = 'space'; // for readability
|
|
} else if (key === '.') {
|
|
key = 'dot'; // because '.' is used as a separator in event names
|
|
}
|
|
modifierKeys.forEach(modifierName => {
|
|
if (modifierName != key) {
|
|
const modifierGetter = modifierKeyGetters[modifierName];
|
|
if (modifierGetter(event)) {
|
|
fullKey += modifierName + '.';
|
|
}
|
|
}
|
|
});
|
|
return fullKey + key;
|
|
}
|
|
}
|
|
|
|
@NgModule({declarations: [KeyEventsApp], bootstrap: [KeyEventsApp], imports: [BrowserModule]})
|
|
class ExampleModule {
|
|
}
|
|
|
|
export function main() {
|
|
platformBrowserDynamic().bootstrapModule(ExampleModule);
|
|
}
|