diff --git a/src/app/components/creator/room-creator-page/room-creator-page.component.html b/src/app/components/creator/room-creator-page/room-creator-page.component.html index ca67b1f7a7b192ea8df263a04a7499a35545ea24..b2a17a266532733a72e410ecbe40dbb52bbcbab0 100644 --- a/src/app/components/creator/room-creator-page/room-creator-page.component.html +++ b/src/app/components/creator/room-creator-page/room-creator-page.component.html @@ -83,7 +83,7 @@ <button id="question_answer-button" mat-icon-button [disableRipple]="true" - routerLink="/creator/room/{{ encodedShortId }}/comments" + routerLink="/creator/room/{{ room.shortId }}/comments" aria-labelledby="question_answer"> <mat-icon matBadge="{{commentCounter > 0 ? commentCounter : null}}" class="main-icon" @@ -97,7 +97,7 @@ <button id="gavel-button" mat-icon-button [disableRipple]="true" - routerLink="/moderator/room/{{ encodedShortId }}/moderator/comments" + routerLink="/moderator/room/{{ room.shortId }}/moderator/comments" aria-labelledby="gavel"> <mat-icon style="color: red" matBadge="{{moderatorCommentCounter > 0 ? moderatorCommentCounter : null}}" class="main-icon" @@ -115,7 +115,7 @@ <button id="question_answer-button2" mat-icon-button [disableRipple]="true" - routerLink="/creator/room/{{ encodedShortId }}/comments" + routerLink="/creator/room/{{ room.shortId }}/comments" aria-labelledby="question_answer"> <mat-icon matBadge="{{commentCounter > 0 ? commentCounter : null}}" class="main-icon">question_answer diff --git a/src/app/components/shared/comment-answer/comment-answer.component.html b/src/app/components/shared/comment-answer/comment-answer.component.html index c9d88e2484d16c748e8274ca2e104f6bcc8306cb..53664c508b793fdb010b47cc3ce49f5c02d3325a 100644 --- a/src/app/components/shared/comment-answer/comment-answer.component.html +++ b/src/app/components/shared/comment-answer/comment-answer.component.html @@ -1,6 +1,9 @@ <div fxLayout="column" fxLayoutAlign="center" - *ngIf="!isLoading"> + *ngIf="!isLoading" + #container + (document:keyup)="checkForEscape($event)" + (document:click)="checkForBackDropClick($event, container)"> <div fxLayout="row" fxLayoutAlign="center"> <app-comment [comment]="comment" diff --git a/src/app/components/shared/comment-answer/comment-answer.component.ts b/src/app/components/shared/comment-answer/comment-answer.component.ts index 86f1b64749f1fa9146aa5c9fba6c725b079173f9..7b9cc32a5e6b73c300b5150e8fbe5bb5f017af36 100644 --- a/src/app/components/shared/comment-answer/comment-answer.component.ts +++ b/src/app/components/shared/comment-answer/comment-answer.component.ts @@ -1,5 +1,5 @@ import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core'; -import { ActivatedRoute } from '@angular/router'; +import { ActivatedRoute, Router } from '@angular/router'; import { TranslateService } from '@ngx-translate/core'; import { LanguageService } from '../../../services/util/language.service'; import { WsCommentService } from '../../../services/websockets/ws-comment.service'; @@ -15,6 +15,8 @@ import { CorrectWrong } from '../../../models/correct-wrong.enum'; import { Message } from '@stomp/stompjs'; import { AuthenticationService } from '../../../services/http/authentication.service'; import { User } from '../../../models/user'; +import { KeyboardUtils } from '../../../utils/keyboard'; +import { KeyboardKey } from '../../../utils/keyboard/keys'; @Component({ selector: 'app-comment-answer', @@ -42,6 +44,7 @@ export class CommentAnswerComponent implements OnInit, OnDestroy { protected wsCommentService: WsCommentService, protected commentService: CommentService, public dialog: MatDialog, + private router: Router, public eventService: EventService) { } @@ -73,6 +76,29 @@ export class CommentAnswerComponent implements OnInit, OnDestroy { } } + checkForEscape(event: KeyboardEvent) { + if (KeyboardUtils.isKeyEvent(event, KeyboardKey.Escape)) { + if (this.eventService.focusOnInput) { + this.eventService.makeFocusOnInputFalse(); + (document.activeElement as HTMLElement).blur(); + return; + } + this.goBackToCommentList(); + } + } + + checkForBackDropClick(event: PointerEvent, element: HTMLElement) { + if (event.target && !element.contains(event.target as Node)) { + this.goBackToCommentList(); + } + } + + goBackToCommentList() { + const str = this.router.url; + const newUrl = str.substr(0, str.lastIndexOf('/', str.lastIndexOf('/') - 1)) + '/comments'; + this.router.navigate([newUrl]); + } + saveAnswer(): (string) => void { return (text: string) => { this.answer = text;