@progress/kendo-angular-upload
Version:
Kendo UI Angular Upload Component
151 lines (150 loc) • 6.08 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { Injectable, EventEmitter, NgZone } from '@angular/core';
import { UploadService } from './upload.service';
import { Keys } from '@progress/kendo-angular-common';
import * as i0 from "@angular/core";
import * as i1 from "./upload.service";
/**
* @hidden
*/
export class NavigationService {
uploadService;
zone;
onActionButtonFocus = new EventEmitter();
onFileAction = new EventEmitter();
onFileFocus = new EventEmitter();
onTabOut = new EventEmitter();
onWrapperFocus = new EventEmitter();
onSelectButtonFocus = new EventEmitter();
actionButtonsVisible = false;
fileListVisible = false;
focused = false;
keyBindings;
focusedFileIndex = 0;
_focusedIndex = -1;
constructor(uploadService, zone) {
this.uploadService = uploadService;
this.zone = zone;
}
action(event) {
const key = event.keyCode;
return this.keyBindings[key];
}
process(event, component) {
const handler = this.action(event);
if (handler) {
handler(event, component);
}
}
computeKeys() {
this.keyBindings = {
[Keys.Space]: () => this.handleSpace(),
[Keys.Enter]: () => this.handleEnter(),
[Keys.Escape]: () => this.handleEscape(),
[Keys.Delete]: () => this.handleDelete(),
[Keys.Tab]: (event, component) => this.handleTab(event, component),
[Keys.ArrowUp]: (event) => this.handleUpDown(event, -1),
[Keys.ArrowDown]: (event) => this.handleUpDown(event, 1)
};
}
focusSelectButton() {
this.focused = true;
this._focusedIndex = -1;
this.onSelectButtonFocus.emit();
}
handleEnter() {
if (this.lastIndex >= 0 && this.focusedIndex >= 0 && this.focusedIndex <= this.lastFileIndex) {
this.zone.run(() => this.onFileAction.emit(Keys.Enter));
}
}
handleSpace() {
if (this.lastIndex >= 0 && this.focusedIndex >= 0 && this.focusedIndex <= this.lastFileIndex) {
this.zone.run(() => this.onFileAction.emit(Keys.Space));
}
}
handleDelete() {
if (this.focusedIndex >= 0 && this.focusedIndex <= this.lastFileIndex) {
this.zone.run(() => this.onFileAction.emit(Keys.Delete));
}
}
handleEscape() {
if (this.focusedIndex >= 0 && this.focusedIndex <= this.lastFileIndex) {
this.zone.run(() => this.onFileAction.emit(Keys.Escape));
}
}
handleTab(event, component) {
const shifted = event.shiftKey;
/* Select Files button is focused */
if (this.focusedIndex === -1 && this.fileListVisible && !shifted) {
this.focusedIndex = this.focusedFileIndex;
event.preventDefault();
this.onFileFocus.emit(this.focusedFileIndex);
return;
}
/* File in the list is focused */
if (this.focusedIndex > -1 && this.focusedIndex <= this.lastFileIndex) {
if (shifted) {
this.focusedIndex = -1;
}
else if (component !== 'fileselect' && this.actionButtonsVisible) {
this.focusedIndex = this.lastFileIndex + 1;
return;
}
}
/* Clear button is focused */
if (this.focusedIndex === this.lastFileIndex + 1) {
this.focusedIndex = shifted ? this.focusedFileIndex : this.lastIndex;
if (shifted) {
event.preventDefault();
this.onFileFocus.emit(this.focusedFileIndex);
}
return;
}
/* Upload button is focused */
if (this.focusedIndex === this.lastIndex && this.actionButtonsVisible && shifted) {
this.focusedIndex -= 1;
return;
}
this.onTabOut.emit();
}
handleUpDown(event, direction) {
const focusOnFileList = this.focusedIndex > -1 && this.uploadService.files.count >= 0;
const nextFocusableIndexInBoundaries = direction > 0 ? this.focusedFileIndex < this.lastFileIndex : this.focusedFileIndex > 0;
const focusNextFile = focusOnFileList && nextFocusableIndexInBoundaries;
if (focusNextFile) {
event.preventDefault();
this.zone.run(() => {
this.focusedIndex += direction;
this.focusedFileIndex += direction;
});
}
}
get focusedIndex() {
return this._focusedIndex;
}
set focusedIndex(index) {
if (!this.focused) {
this.onWrapperFocus.emit();
}
this._focusedIndex = index;
this.focused = true;
if (this._focusedIndex >= 0 && this._focusedIndex <= this.lastFileIndex) {
this.onFileFocus.emit(index);
}
}
get lastFileIndex() {
return this.actionButtonsVisible ? this.lastIndex - 2 : this.lastIndex;
}
get lastIndex() {
const fileCount = this.uploadService.files.count;
return this.actionButtonsVisible ? fileCount + 1 : fileCount - 1;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationService, deps: [{ token: i1.UploadService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationService });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationService, decorators: [{
type: Injectable
}], ctorParameters: function () { return [{ type: i1.UploadService }, { type: i0.NgZone }]; } });