diff --git a/src/app/components/shared/questionwall/QuestionWallKeyEventSupport.ts b/src/app/components/shared/questionwall/QuestionWallKeyEventSupport.ts new file mode 100644 index 0000000000000000000000000000000000000000..2603200ed09e8034657ee33a8c0c45bd6a90c49b --- /dev/null +++ b/src/app/components/shared/questionwall/QuestionWallKeyEventSupport.ts @@ -0,0 +1,24 @@ + +export class QuestionWallKeyEventSupport { + + private keyMap: Map<string, () => void> = new Map<string, () => void>(); + private readonly windowEvent; + + constructor() { + window.addEventListener('keyup', this.windowEvent = e => { + if (this.keyMap.has(e.key)) { + this.keyMap.get(e.key)(); + e.cancelBubble = true; + } + }); + } + + public addKeyEvent(key: string, evt: () => void) { + this.keyMap.set(key, evt); + } + + public destroy() { + window.removeEventListener('keyup', this.windowEvent); + } + +} diff --git a/src/app/components/shared/questionwall/question-wall/question-wall.component.ts b/src/app/components/shared/questionwall/question-wall/question-wall.component.ts index 378ee10f5f473515c65881801040c7f977d72ace..385c77a639848f5c12a9db42f2200d92889ab2eb 100644 --- a/src/app/components/shared/questionwall/question-wall/question-wall.component.ts +++ b/src/app/components/shared/questionwall/question-wall/question-wall.component.ts @@ -12,6 +12,7 @@ import { AuthenticationService } from '../../../../services/http/authentication. import { LanguageService } from '../../../../services/util/language.service'; import { TranslateService } from '@ngx-translate/core'; import { Rescale } from '../../../../models/rescale'; +import { QuestionWallKeyEventSupport } from '../QuestionWallKeyEventSupport'; @Component({ selector: 'app-question-wall', @@ -29,6 +30,7 @@ export class QuestionWallComponent implements OnInit, AfterViewInit, OnDestroy { unreadComments = 0; focusIncommingComments = false; timeUpdateInterval; + keySupport: QuestionWallKeyEventSupport; public wrap<E>(e: E, action: (e: E) => void) { action(e); @@ -47,6 +49,7 @@ export class QuestionWallComponent implements OnInit, AfterViewInit, OnDestroy { private langService: LanguageService, private translateService: TranslateService ) { + this.keySupport = new QuestionWallKeyEventSupport(); this.roomId = localStorage.getItem('roomId'); this.timeUpdateInterval = setInterval(() => { this.comments.forEach(e => e.updateTimeAgo()); @@ -77,6 +80,15 @@ export class QuestionWallComponent implements OnInit, AfterViewInit, OnDestroy { }); }); }); + this.initKeySupport(); + } + + initKeySupport() { + this.wrap(this.keySupport, key => { + key.addKeyEvent('ArrowRight', () => this.nextComment()); + key.addKeyEvent('ArrowLeft', () => this.prevComment()); + key.addKeyEvent(' ', () => this.nextComment()); + }); } ngAfterViewInit(): void { @@ -88,6 +100,7 @@ export class QuestionWallComponent implements OnInit, AfterViewInit, OnDestroy { } ngOnDestroy(): void { + this.keySupport.destroy(); window.clearInterval(this.timeUpdateInterval); document.getElementById('header_rescale').style.display = 'block'; document.getElementById('footer_rescale').style.display = 'block';