-
Notifications
You must be signed in to change notification settings - Fork 118
/
caps-lock.directive.ts
56 lines (45 loc) · 1.62 KB
/
caps-lock.directive.ts
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
import { AfterViewInit, Directive, Output, EventEmitter, HostListener, ElementRef, Renderer2 } from '@angular/core';
/**
* This directive is a helper for any situation where you need
* to find out if the caps lock key is active.
*
* @author Gunnar Hillert
*/
@Directive({
selector: '[dataflowCapsLock]'
})
export class CapsLockDirective implements AfterViewInit {
@Output() appCapsLock = new EventEmitter<boolean>();
constructor(private elem: ElementRef, private renderer: Renderer2) {
}
/**
* Initializes the state of the surrounding element. As there is no way
* to detect the state of the caps-lock key at startup (only when a key
* is pressed), we have to assume that it is off,
* therefore hiding the respective element.
*/
ngAfterViewInit() {
this.renderer.setStyle(this.elem.nativeElement, 'display', 'none');
}
@HostListener('window:keydown', ['$event'])
onKeyDown(event: KeyboardEvent): void {
const capsOn = this.getCapsLockState(event);
if (capsOn) {
this.renderer.setStyle(this.elem.nativeElement, 'display', 'inherit');
} else {
this.renderer.setStyle(this.elem.nativeElement, 'display', 'none');
}
this.appCapsLock.emit(capsOn);
}
@HostListener('window:keyup', ['$event'])
onKeyUp(event: KeyboardEvent): void {
const capsOn = this.getCapsLockState(event);
if (!capsOn) {
this.renderer.setStyle(this.elem.nativeElement, 'display', 'none');
}
this.appCapsLock.emit(capsOn);
}
private getCapsLockState(event: KeyboardEvent): boolean {
return (event && event.getModifierState && event.getModifierState('CapsLock'));
}
}