framadate-responsive/src/app/pages/answers/answers.component.ts

import {AfterViewInit, ChangeDetectorRef, Component, Inject, 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 {

    private answerList = [];

    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() {
    }

    ngAfterViewInit() {
        this.focusOnAnswer(0)
    }

    trackFunction(index: number, item: any): number {
        return item.id;
    }

    addAnswer() {
        this.config.answers.push(
            {
                id: this.config.answers.length + 1,
                text: ''
            });
        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);
        }
    }
}