94 lines
2.6 KiB
TypeScript
94 lines
2.6 KiB
TypeScript
import { AfterViewInit, ChangeDetectorRef, Component, Inject, OnChanges, OnInit } from '@angular/core';
|
|
import { BaseComponent } from '../example/base-page/base.component';
|
|
import { ConfigService } from '../../services/config.service';
|
|
|
|
import { DOCUMENT } from '@angular/common';
|
|
|
|
@Component({
|
|
selector: 'framadate-answers',
|
|
templateUrl: './answers.component.html',
|
|
styleUrls: ['./answers.component.scss'],
|
|
})
|
|
export class AnswersComponent extends BaseComponent implements OnInit, AfterViewInit, OnChanges {
|
|
allAnswersAreValid = false;
|
|
|
|
answerList = [];
|
|
currentHeader: any = '';
|
|
display: boolean;
|
|
|
|
constructor(public config: ConfigService, @Inject(DOCUMENT) private document: any, private cd: ChangeDetectorRef) {
|
|
super(config);
|
|
this.answerList = this.config.answers;
|
|
}
|
|
|
|
// todo, manage validation of each page in a common way
|
|
ngOnInit() {}
|
|
|
|
ngOnChanges() {
|
|
this.checkValidAnswers();
|
|
}
|
|
|
|
checkValidAnswers() {
|
|
this.allAnswersAreValid = true;
|
|
this.config.answers.forEach((answer) => {
|
|
if (!answer.text.length) {
|
|
this.allAnswersAreValid = false;
|
|
return;
|
|
}
|
|
});
|
|
}
|
|
|
|
ngAfterViewInit() {
|
|
this.focusOnAnswer(0);
|
|
this.checkValidAnswers();
|
|
}
|
|
|
|
trackFunction(index: number, item: any): number {
|
|
return item.id;
|
|
}
|
|
|
|
addAnswer() {
|
|
this.config.answers.push({
|
|
id: this.config.answers.length + 1,
|
|
text: '',
|
|
url: '',
|
|
file: '',
|
|
literal: '',
|
|
date_object: null,
|
|
timeList: [],
|
|
});
|
|
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 dom = AnswersDomToFocus[i];
|
|
if (dom.focus) {
|
|
dom.focus();
|
|
}
|
|
if (dom.select) {
|
|
dom.select();
|
|
}
|
|
}
|
|
|
|
navigateOrDelete(event: KeyboardEvent, i) {
|
|
if (event.ctrlKey && event.key == 'd') {
|
|
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);
|
|
}
|
|
}
|
|
|
|
showModalForPictureOfAnswer(answer) {
|
|
// TODO
|
|
this.currentHeader = answer;
|
|
this.display = true;
|
|
// this.config.todo();
|
|
}
|
|
}
|