ngx-dynamic-tabindex
Version:
56 lines • 6.52 kB
JavaScript
import { Directive, ElementRef } from '@angular/core';
export class NgxDynamicTabindexDirective {
constructor(hostEl) {
this.hostEl = hostEl;
this.attributeName = 'tabindex';
}
ngAfterViewInit() {
this.applyIndexes();
this.mutationObserver = new MutationObserver(() => this.applyIndexes());
this.mutationObserver.observe(this.hostEl.nativeElement, {
childList: true,
subtree: true,
});
}
ngOnDestroy() {
this.mutationObserver.disconnect();
}
applyIndexes() {
const isTabAheadOffset = !!this.hostEl.nativeElement.querySelector('[tabIndexAheadOffset]');
const elements = this.hostEl.nativeElement.querySelectorAll(`[${this.attributeName}]`);
let globalOffset;
let tabIndex;
elements.forEach((el, index) => {
if (isTabAheadOffset) {
const offsetValue = parseInt(el.getAttribute('tabIndexAheadOffset'), 10);
if (offsetValue) {
globalOffset = offsetValue;
tabIndex = this.getTabIndex(index + offsetValue + 1);
}
else if (globalOffset >= 1) {
tabIndex = this.getTabIndex(index);
globalOffset--;
}
else {
tabIndex = this.getTabIndex(index + 1);
}
}
else {
tabIndex = this.getTabIndex(index + 1);
}
el.setAttribute(this.attributeName, tabIndex);
});
}
getTabIndex(index) {
return index.toString();
}
}
NgxDynamicTabindexDirective.decorators = [
{ type: Directive, args: [{
selector: '[applyTabIndexes]'
},] }
];
NgxDynamicTabindexDirective.ctorParameters = () => [
{ type: ElementRef }
];
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LWR5bmFtaWMtdGFiaW5kZXguZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWR5bmFtaWMtdGFiaW5kZXgvc3JjL2xpYi9uZ3gtZHluYW1pYy10YWJpbmRleC5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFpQixTQUFTLEVBQUUsVUFBVSxFQUFhLE1BQU0sZUFBZSxDQUFDO0FBS2hGLE1BQU0sT0FBTywyQkFBMkI7SUFJdEMsWUFBb0IsTUFBa0I7UUFBbEIsV0FBTSxHQUFOLE1BQU0sQ0FBWTtRQUY5QixrQkFBYSxHQUFHLFVBQVUsQ0FBQztJQUduQyxDQUFDO0lBRUQsZUFBZTtRQUNiLElBQUksQ0FBQyxZQUFZLEVBQUUsQ0FBQztRQUNwQixJQUFJLENBQUMsZ0JBQWdCLEdBQUcsSUFBSSxnQkFBZ0IsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUMsWUFBWSxFQUFFLENBQUMsQ0FBQztRQUN4RSxJQUFJLENBQUMsZ0JBQWdCLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsYUFBYSxFQUFFO1lBQ3ZELFNBQVMsRUFBRSxJQUFJO1lBQ2YsT0FBTyxFQUFFLElBQUk7U0FDZCxDQUFDLENBQUM7SUFDTCxDQUFDO0lBRUQsV0FBVztRQUNULElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxVQUFVLEVBQUUsQ0FBQztJQUNyQyxDQUFDO0lBRU8sWUFBWTtRQUNsQixNQUFNLGdCQUFnQixHQUFHLENBQUMsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLGFBQWEsQ0FBQyxhQUFhLENBQUMsdUJBQXVCLENBQUMsQ0FBQztRQUM1RixNQUFNLFFBQVEsR0FBRyxJQUFJLENBQUMsTUFBTSxDQUFDLGFBQWEsQ0FBQyxnQkFBZ0IsQ0FBQyxJQUFJLElBQUksQ0FBQyxhQUFhLEdBQUcsQ0FBQyxDQUFDO1FBQ3ZGLElBQUksWUFBb0IsQ0FBQztRQUN6QixJQUFJLFFBQWdCLENBQUM7UUFFckIsUUFBUSxDQUFDLE9BQU8sQ0FBQyxDQUFDLEVBQUUsRUFBRSxLQUFLLEVBQUUsRUFBRTtZQUM3QixJQUFJLGdCQUFnQixFQUFFO2dCQUNwQixNQUFNLFdBQVcsR0FBRyxRQUFRLENBQUMsRUFBRSxDQUFDLFlBQVksQ0FBQyxxQkFBcUIsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxDQUFDO2dCQUN6RSxJQUFJLFdBQVcsRUFBRTtvQkFDZixZQUFZLEdBQUcsV0FBVyxDQUFDO29CQUMzQixRQUFRLEdBQUcsSUFBSSxDQUFDLFdBQVcsQ0FBQyxLQUFLLEdBQUcsV0FBVyxHQUFHLENBQUMsQ0FBQyxDQUFDO2lCQUN0RDtxQkFBTSxJQUFJLFlBQVksSUFBSSxDQUFDLEVBQUU7b0JBQzVCLFFBQVEsR0FBRyxJQUFJLENBQUMsV0FBVyxDQUFDLEtBQUssQ0FBQyxDQUFDO29CQUNuQyxZQUFZLEVBQUUsQ0FBQztpQkFDaEI7cUJBQU07b0JBQ0wsUUFBUSxHQUFHLElBQUksQ0FBQyxXQUFXLENBQUMsS0FBSyxHQUFHLENBQUMsQ0FBQyxDQUFDO2lCQUN4QzthQUNGO2lCQUFNO2dCQUNMLFFBQVEsR0FBRyxJQUFJLENBQUMsV0FBVyxDQUFDLEtBQUssR0FBRyxDQUFDLENBQUMsQ0FBQzthQUN4QztZQUVELEVBQUUsQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLGFBQWEsRUFBRSxRQUFRLENBQUMsQ0FBQztRQUNoRCxDQUFDLENBQUMsQ0FBQztJQUNMLENBQUM7SUFFTyxXQUFXLENBQUMsS0FBYTtRQUMvQixPQUFPLEtBQUssQ0FBQyxRQUFRLEVBQUUsQ0FBQztJQUMxQixDQUFDOzs7WUFuREYsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxtQkFBbUI7YUFDOUI7OztZQUprQyxVQUFVIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQWZ0ZXJWaWV3SW5pdCwgRGlyZWN0aXZlLCBFbGVtZW50UmVmLCBPbkRlc3Ryb3kgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQERpcmVjdGl2ZSh7XG4gIHNlbGVjdG9yOiAnW2FwcGx5VGFiSW5kZXhlc10nXG59KVxuZXhwb3J0IGNsYXNzIE5neER5bmFtaWNUYWJpbmRleERpcmVjdGl2ZSBpbXBsZW1lbnRzIEFmdGVyVmlld0luaXQsIE9uRGVzdHJveSB7XG4gIHByaXZhdGUgbXV0YXRpb25PYnNlcnZlcjogTXV0YXRpb25PYnNlcnZlcjtcbiAgcHJpdmF0ZSBhdHRyaWJ1dGVOYW1lID0gJ3RhYmluZGV4JztcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGhvc3RFbDogRWxlbWVudFJlZikge1xuICB9XG5cbiAgbmdBZnRlclZpZXdJbml0KCk6IHZvaWQge1xuICAgIHRoaXMuYXBwbHlJbmRleGVzKCk7XG4gICAgdGhpcy5tdXRhdGlvbk9ic2VydmVyID0gbmV3IE11dGF0aW9uT2JzZXJ2ZXIoKCkgPT4gdGhpcy5hcHBseUluZGV4ZXMoKSk7XG4gICAgdGhpcy5tdXRhdGlvbk9ic2VydmVyLm9ic2VydmUodGhpcy5ob3N0RWwubmF0aXZlRWxlbWVudCwge1xuICAgICAgY2hpbGRMaXN0OiB0cnVlLFxuICAgICAgc3VidHJlZTogdHJ1ZSxcbiAgICB9KTtcbiAgfVxuXG4gIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgIHRoaXMubXV0YXRpb25PYnNlcnZlci5kaXNjb25uZWN0KCk7XG4gIH1cblxuICBwcml2YXRlIGFwcGx5SW5kZXhlcygpOiB2b2lkIHtcbiAgICBjb25zdCBpc1RhYkFoZWFkT2Zmc2V0ID0gISF0aGlzLmhvc3RFbC5uYXRpdmVFbGVtZW50LnF1ZXJ5U2VsZWN0b3IoJ1t0YWJJbmRleEFoZWFkT2Zmc2V0XScpO1xuICAgIGNvbnN0IGVsZW1lbnRzID0gdGhpcy5ob3N0RWwubmF0aXZlRWxlbWVudC5xdWVyeVNlbGVjdG9yQWxsKGBbJHt0aGlzLmF0dHJpYnV0ZU5hbWV9XWApO1xuICAgIGxldCBnbG9iYWxPZmZzZXQ6IG51bWJlcjtcbiAgICBsZXQgdGFiSW5kZXg6IHN0cmluZztcblxuICAgIGVsZW1lbnRzLmZvckVhY2goKGVsLCBpbmRleCkgPT4ge1xuICAgICAgaWYgKGlzVGFiQWhlYWRPZmZzZXQpIHtcbiAgICAgICAgY29uc3Qgb2Zmc2V0VmFsdWUgPSBwYXJzZUludChlbC5nZXRBdHRyaWJ1dGUoJ3RhYkluZGV4QWhlYWRPZmZzZXQnKSwgMTApO1xuICAgICAgICBpZiAob2Zmc2V0VmFsdWUpIHtcbiAgICAgICAgICBnbG9iYWxPZmZzZXQgPSBvZmZzZXRWYWx1ZTtcbiAgICAgICAgICB0YWJJbmRleCA9IHRoaXMuZ2V0VGFiSW5kZXgoaW5kZXggKyBvZmZzZXRWYWx1ZSArIDEpO1xuICAgICAgICB9IGVsc2UgaWYgKGdsb2JhbE9mZnNldCA+PSAxKSB7XG4gICAgICAgICAgdGFiSW5kZXggPSB0aGlzLmdldFRhYkluZGV4KGluZGV4KTtcbiAgICAgICAgICBnbG9iYWxPZmZzZXQtLTtcbiAgICAgICAgfSBlbHNlIHtcbiAgICAgICAgICB0YWJJbmRleCA9IHRoaXMuZ2V0VGFiSW5kZXgoaW5kZXggKyAxKTtcbiAgICAgICAgfVxuICAgICAgfSBlbHNlIHtcbiAgICAgICAgdGFiSW5kZXggPSB0aGlzLmdldFRhYkluZGV4KGluZGV4ICsgMSk7XG4gICAgICB9XG5cbiAgICAgIGVsLnNldEF0dHJpYnV0ZSh0aGlzLmF0dHJpYnV0ZU5hbWUsIHRhYkluZGV4KTtcbiAgICB9KTtcbiAgfVxuXG4gIHByaXZhdGUgZ2V0VGFiSW5kZXgoaW5kZXg6IG51bWJlcik6IHN0cmluZyB7XG4gICAgcmV0dXJuIGluZGV4LnRvU3RyaW5nKCk7XG4gIH1cblxufVxuIl19