ng-focus-selector/fesm2015/ng-focus-selector.js

For device like `candy`, `qwerty`, `tv apps`, `stb` etc where element selection happens with keypad (or) remote, selection of element across the application will become complex.

import { Component, ElementRef, HostListener, NgModule } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';

class FocusSelectorComponent {
    constructor(el, router, route) {
        this.el = el;
        this.router = router;
        this.route = route;
    }
    onArrowLeftRight(event) {
        const keyCode = event.keyCode || event.which;
        const currentRow = parseInt(event.target.getAttribute('row'));
        let column = parseInt(event.target.getAttribute('column'));
        const currentElement = document.querySelector(`[row="${currentRow}"][column="${column}"]`);
        if (currentElement && currentElement.getAttribute('istabitem')) {
            const isNextElementTab = document.querySelector(`[tabfocus="true"]`);
            if (isNextElementTab) {
                let state = this.route.snapshot;
                while (!state.firstChild.paramMap.get('column')) {
                    state = state.firstChild;
                }
                const { paramMap, params, data } = state.firstChild;
                let column = parseInt(paramMap.get('column'));
                if (keyCode === 37) {
                    column = column - 1;
                }
                else if (keyCode === 39) {
                    column = column + 1;
                }
                const isElementTab = document.querySelectorAll(`[istabheader="true"]`);
                if (isElementTab.length && isElementTab[column]) {
                    if (isNextElementTab.getAttribute('tabfocus')) {
                        isNextElementTab.setAttribute('tabfocus', false);
                    }
                    isElementTab[column].setAttribute('tabfocus', true);
                    this.focusElement(isElementTab[column]);
                    const tabUrl = isElementTab[column].getAttribute('taburl');
                    if (tabUrl) {
                        this.router.navigateByUrl(tabUrl);
                    }
                }
                return;
            }
        }
        if (keyCode === 37) {
            column = column - 1;
        }
        else if (keyCode === 39) {
            column = column + 1;
        }
        let matchElement = document.querySelector(`[row="${currentRow}"][column="${column}"]`);
        if (matchElement) {
            if (currentElement.getAttribute('tabfocus')) {
                currentElement.setAttribute('tabfocus', false);
            }
            matchElement.setAttribute('tabfocus', true);
            this.focusElement(matchElement);
            const tabUrl = matchElement.getAttribute('taburl');
            if (tabUrl) {
                this.router.navigateByUrl(tabUrl);
            }
        }
    }
    onArrowDownUp(event) {
        const keyCode = event.keyCode || event.which;
        const isGrid = event.target.getAttribute('isgrid');
        let currentRow = parseInt(event.target.getAttribute('row'));
        let column = parseInt(event.target.getAttribute('column'));
        column = isGrid ? column : 0;
        if (keyCode === 40) {
            currentRow = currentRow + 1;
        }
        else if (keyCode === 38) {
            currentRow = currentRow - 1;
        }
        const isNextElementTab = document.querySelector(`[row="${currentRow}"][tabfocus="true"]`);
        if (isNextElementTab && !isGrid) {
            this.focusElement(isNextElementTab);
            return;
        }
        let matchElement = document.querySelector(`[row="${currentRow}"][column="${column}"]`);
        if (!matchElement) {
            return;
        }
        this.focusElement(matchElement);
    }
    ngOnInit() { }
    focusElement(el) {
        el.focus();
        el.scrollIntoView({
            block: 'end',
            inline: 'end'
        });
    }
    setActiveIndex(index) {
        const selector = this.el.nativeElement.getElementsByClassName('focus-selector');
        if (selector[index]) {
            this.focusElement(selector[index]);
        }
    }
}
FocusSelectorComponent.decorators = [
    { type: Component, args: [{
                selector: 'ng-focus-selector',
                template: '<ng-content></ng-content>'
            },] }
];
FocusSelectorComponent.ctorParameters = () => [
    { type: ElementRef },
    { type: Router },
    { type: ActivatedRoute }
];
FocusSelectorComponent.propDecorators = {
    onArrowLeftRight: [{ type: HostListener, args: ['document:keydown.ArrowLeft', ['$event'],] }, { type: HostListener, args: ['document:keydown.ArrowRight', ['$event'],] }],
    onArrowDownUp: [{ type: HostListener, args: ['document:keydown.ArrowDown', ['$event'],] }, { type: HostListener, args: ['document:keydown.ArrowUp', ['$event'],] }]
};

class NgFocusSelectorModule {
}
NgFocusSelectorModule.decorators = [
    { type: NgModule, args: [{
                declarations: [FocusSelectorComponent],
                imports: [],
                exports: [FocusSelectorComponent]
            },] }
];

/*
 * Public API Surface of ng-focus-selector
 */

/**
 * Generated bundle index. Do not edit.
 */

export { FocusSelectorComponent, NgFocusSelectorModule };
//# sourceMappingURL=ng-focus-selector.js.map