ng-focus-selector
Version:
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.
150 lines (142 loc) • 6.8 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/router')) :
typeof define === 'function' && define.amd ? define('ng-focus-selector', ['exports', '@angular/core', '@angular/router'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['ng-focus-selector'] = {}, global.ng.core, global.ng.router));
}(this, (function (exports, core, router) { 'use strict';
var FocusSelectorComponent = /** @class */ (function () {
function FocusSelectorComponent(el, router, route) {
this.el = el;
this.router = router;
this.route = route;
}
FocusSelectorComponent.prototype.onArrowLeftRight = function (event) {
var keyCode = event.keyCode || event.which;
var currentRow = parseInt(event.target.getAttribute('row'));
var column = parseInt(event.target.getAttribute('column'));
var currentElement = document.querySelector("[row=\"" + currentRow + "\"][column=\"" + column + "\"]");
if (currentElement && currentElement.getAttribute('istabitem')) {
var isNextElementTab = document.querySelector("[tabfocus=\"true\"]");
if (isNextElementTab) {
var state = this.route.snapshot;
while (!state.firstChild.paramMap.get('column')) {
state = state.firstChild;
}
var _a = state.firstChild, paramMap = _a.paramMap, params = _a.params, data = _a.data;
var column_1 = parseInt(paramMap.get('column'));
if (keyCode === 37) {
column_1 = column_1 - 1;
}
else if (keyCode === 39) {
column_1 = column_1 + 1;
}
var isElementTab = document.querySelectorAll("[istabheader=\"true\"]");
if (isElementTab.length && isElementTab[column_1]) {
if (isNextElementTab.getAttribute('tabfocus')) {
isNextElementTab.setAttribute('tabfocus', false);
}
isElementTab[column_1].setAttribute('tabfocus', true);
this.focusElement(isElementTab[column_1]);
var tabUrl = isElementTab[column_1].getAttribute('taburl');
if (tabUrl) {
this.router.navigateByUrl(tabUrl);
}
}
return;
}
}
if (keyCode === 37) {
column = column - 1;
}
else if (keyCode === 39) {
column = column + 1;
}
var matchElement = document.querySelector("[row=\"" + currentRow + "\"][column=\"" + column + "\"]");
if (matchElement) {
if (currentElement.getAttribute('tabfocus')) {
currentElement.setAttribute('tabfocus', false);
}
matchElement.setAttribute('tabfocus', true);
this.focusElement(matchElement);
var tabUrl = matchElement.getAttribute('taburl');
if (tabUrl) {
this.router.navigateByUrl(tabUrl);
}
}
};
FocusSelectorComponent.prototype.onArrowDownUp = function (event) {
var keyCode = event.keyCode || event.which;
var isGrid = event.target.getAttribute('isgrid');
var currentRow = parseInt(event.target.getAttribute('row'));
var column = parseInt(event.target.getAttribute('column'));
column = isGrid ? column : 0;
if (keyCode === 40) {
currentRow = currentRow + 1;
}
else if (keyCode === 38) {
currentRow = currentRow - 1;
}
var isNextElementTab = document.querySelector("[row=\"" + currentRow + "\"][tabfocus=\"true\"]");
if (isNextElementTab && !isGrid) {
this.focusElement(isNextElementTab);
return;
}
var matchElement = document.querySelector("[row=\"" + currentRow + "\"][column=\"" + column + "\"]");
if (!matchElement) {
return;
}
this.focusElement(matchElement);
};
FocusSelectorComponent.prototype.ngOnInit = function () { };
FocusSelectorComponent.prototype.focusElement = function (el) {
el.focus();
el.scrollIntoView({
block: 'end',
inline: 'end'
});
};
FocusSelectorComponent.prototype.setActiveIndex = function (index) {
var selector = this.el.nativeElement.getElementsByClassName('focus-selector');
if (selector[index]) {
this.focusElement(selector[index]);
}
};
return FocusSelectorComponent;
}());
FocusSelectorComponent.decorators = [
{ type: core.Component, args: [{
selector: 'ng-focus-selector',
template: '<ng-content></ng-content>'
},] }
];
FocusSelectorComponent.ctorParameters = function () { return [
{ type: core.ElementRef },
{ type: router.Router },
{ type: router.ActivatedRoute }
]; };
FocusSelectorComponent.propDecorators = {
onArrowLeftRight: [{ type: core.HostListener, args: ['document:keydown.ArrowLeft', ['$event'],] }, { type: core.HostListener, args: ['document:keydown.ArrowRight', ['$event'],] }],
onArrowDownUp: [{ type: core.HostListener, args: ['document:keydown.ArrowDown', ['$event'],] }, { type: core.HostListener, args: ['document:keydown.ArrowUp', ['$event'],] }]
};
var NgFocusSelectorModule = /** @class */ (function () {
function NgFocusSelectorModule() {
}
return NgFocusSelectorModule;
}());
NgFocusSelectorModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [FocusSelectorComponent],
imports: [],
exports: [FocusSelectorComponent]
},] }
];
/*
* Public API Surface of ng-focus-selector
*/
/**
* Generated bundle index. Do not edit.
*/
exports.FocusSelectorComponent = FocusSelectorComponent;
exports.NgFocusSelectorModule = NgFocusSelectorModule;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=ng-focus-selector.umd.js.map