tykayn/funky-framadate-front
1
1
Fork 1
mirror of https://framagit.org/framasoft/framadate/funky-framadate-front.git synced 2023-08-25 13:53:14 +02:00
Code Issues Projects Releases Wiki Activity

⚡ enhance keyboard navigation with answers

Browse Source
This commit is contained in:
Baptiste Lemoine 2019-11-23 16:05:44 +01:00
parent e179be812e
commit 9c02b1ae2b
2 changed files with 29 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/app/pages/answers/answers.component.html
View File

@ -1,7 +1,7 @@
<div class="answers"> <div class="answers">
<h1 i18n> <h1 i18n>
Choisir les propositions Choisir les propositions
</h1> </h1>
<p class="subtitle" i18n> <p class="subtitle" i18n>
Vous pouvez utiliser la syntaxe markdown Vous pouvez utiliser la syntaxe markdown
@ -14,9 +14,11 @@
type="text" type="text"
class="answer" class="answer"
[(ngModel)]="answer.text" [(ngModel)]="answer.text"
(keyup.enter)="addAnswer()"
(keyup)="navigateOrDelete($event,i)"
placeholder="réponse" placeholder="réponse"
> >
<button (click)="config.answers.splice(i,1)">X</button> <button class="btn btn--alert" (click)="config.answers.splice(i,1)">X</button>
</li> </li>
</ol> </ol>

31
src/app/pages/answers/answers.component.ts
View File

@ -1,4 +1,4 @@
import {ChangeDetectorRef, Component, Inject, OnInit} from '@angular/core'; import {AfterViewInit, ChangeDetectorRef, Component, Inject, OnInit} from '@angular/core';
import {BaseComponent} from '../base-page/base.component'; import {BaseComponent} from '../base-page/base.component';
import {ConfigService} from '../../config.service'; import {ConfigService} from '../../config.service';
@ -9,7 +9,7 @@ import {DOCUMENT} from '@angular/common';
templateUrl: './answers.component.html', templateUrl: './answers.component.html',
styleUrls: ['./answers.component.scss'] styleUrls: ['./answers.component.scss']
}) })
export class AnswersComponent extends BaseComponent implements OnInit { export class AnswersComponent extends BaseComponent implements OnInit, AfterViewInit {
private answerList = []; private answerList = [];
@ -24,6 +24,10 @@ export class AnswersComponent extends BaseComponent implements OnInit {
ngOnInit() { ngOnInit() {
} }
ngAfterViewInit() {
this.focusOnAnswer(0)
}
trackFunction(index: number, item: any): number { trackFunction(index: number, item: any): number {
return item.id; return item.id;
} }
@ -35,19 +39,30 @@ export class AnswersComponent extends BaseComponent implements OnInit {
text: '' text: ''
}); });
this.cd.detectChanges(); // to refresh the view before focusing on the new input this.cd.detectChanges(); // to refresh the view before focusing on the new input
this.focusOnAnswer(this.config.answers.length - 1)
}
focusOnAnswer(i) {
const AnswersDomToFocus = this.document.querySelectorAll('.answers .answer'); const AnswersDomToFocus = this.document.querySelectorAll('.answers .answer');
const dom = AnswersDomToFocus[AnswersDomToFocus.length - 1]; const dom = AnswersDomToFocus[i];
if (dom.focus) { if (dom.focus) {
dom.focus(); dom.focus();
} }
if (dom.select) {
dom.select();
}
} }
// add a new answer on the press of ENTER in an input navigateOrDelete(event: KeyboardEvent, i) {
addWhenEnterKey(event) {
console.log('event', event); console.log('event', event);
if (event.keyCode === 13) { if (event.ctrlKey && event.key == "d") {
this.addAnswer(); this.config.answers.splice(i, 1)
}
if (event.key == "ArrowUp" && i > 0) {
this.focusOnAnswer(i - 1);
}
if (event.key == "ArrowDown" && i < this.config.answers.length) {
this.focusOnAnswer(i + 1);
} }
return;
} }
} }