import {AfterViewInit, ChangeDetectorRef, Component, Inject, OnChanges, OnInit} from '@angular/core'; import {BaseComponent} from '../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(); } }