From 4f2594642d4311eaf734e6ab94d54f8f4a24a0d9 Mon Sep 17 00:00:00 2001
From: Lukas Haase <lukas.haase@mni.thm.de>
Date: Fri, 3 Apr 2020 16:20:26 +0200
Subject: [PATCH] questionwall/quizwall keysupport, space or right-arrow for
next comment, left-arrow for prev comment
---
.../QuestionWallKeyEventSupport.ts | 24 +++++++++++++++++++
.../question-wall/question-wall.component.ts | 13 ++++++++++
2 files changed, 37 insertions(+)
create mode 100644 src/app/components/shared/questionwall/QuestionWallKeyEventSupport.ts
diff --git a/src/app/components/shared/questionwall/QuestionWallKeyEventSupport.ts b/src/app/components/shared/questionwall/QuestionWallKeyEventSupport.ts
new file mode 100644
index 000000000..2603200ed
--- /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 378ee10f5..385c77a63 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';
--
GitLab