118 lines
3.0 KiB
TypeScript
118 lines
3.0 KiB
TypeScript
import {
|
|
Component,
|
|
OnInit,
|
|
Input,
|
|
ElementRef,
|
|
AfterViewInit
|
|
} from '@angular/core';
|
|
|
|
import { NGXLogger } from 'ngx-logger';
|
|
import { FileUploadItem } from '@ucap-webmessenger/api';
|
|
|
|
@Component({
|
|
selector: 'ucap-file-upload-queue',
|
|
templateUrl: './file-upload-queue.component.html',
|
|
styleUrls: ['./file-upload-queue.component.scss']
|
|
})
|
|
export class FileUploadQueueComponent implements OnInit, AfterViewInit {
|
|
@Input()
|
|
dropZoneIncludeParent = false;
|
|
|
|
fileUploadItems: FileUploadItem[];
|
|
uploadItems: DataTransferItem[];
|
|
|
|
constructor(
|
|
private elementRef: ElementRef<HTMLElement>,
|
|
private logger: NGXLogger
|
|
) {}
|
|
|
|
ngOnInit() {}
|
|
|
|
ngAfterViewInit(): void {
|
|
this.changeStyleDisplay(false);
|
|
}
|
|
|
|
onDragEnter(items: DataTransferItemList): void {
|
|
if (!items || 0 === items.length) {
|
|
return;
|
|
}
|
|
|
|
const uploadItems: DataTransferItem[] = [];
|
|
// tslint:disable-next-line: prefer-for-of
|
|
for (let i = 0; i < items.length; i++) {
|
|
uploadItems.push(items[i]);
|
|
}
|
|
this.uploadItems = [...uploadItems];
|
|
this.changeStyleDisplay(true);
|
|
}
|
|
|
|
onDragLeave(): void {
|
|
this.changeStyleDisplay(false);
|
|
}
|
|
|
|
onDrop(fileUploadItems: FileUploadItem[]) {
|
|
if (!fileUploadItems || 0 === fileUploadItems.length) {
|
|
return;
|
|
}
|
|
this.fileUploadItems = fileUploadItems;
|
|
this.uploadItems = undefined;
|
|
}
|
|
|
|
onFileSelected(fileUploadItems: FileUploadItem[]): void {
|
|
if (!fileUploadItems || 0 === fileUploadItems.length) {
|
|
return;
|
|
}
|
|
this.fileUploadItems = fileUploadItems;
|
|
this.uploadItems = undefined;
|
|
this.changeStyleDisplay(true);
|
|
}
|
|
|
|
onUploadComplete(): void {
|
|
setTimeout(() => {
|
|
this.fileUploadItems = undefined;
|
|
this.changeStyleDisplay(false);
|
|
}, 1000);
|
|
}
|
|
|
|
isEventInElement(event: DragEvent): boolean {
|
|
const rect = this.elementRef.nativeElement.getBoundingClientRect();
|
|
// const rect: DOMRect = this.elementRef.nativeElement.getBoundingClientRect();
|
|
|
|
if (
|
|
event.pageX >= rect.left &&
|
|
event.pageX <= rect.left + rect.width &&
|
|
event.pageY >= rect.top &&
|
|
event.pageY <= rect.top + rect.height
|
|
) {
|
|
return true;
|
|
}
|
|
return false;
|
|
}
|
|
|
|
private changeStyleDisplay(show: boolean): void {
|
|
if (show || (!!this.fileUploadItems && 0 < this.fileUploadItems.length)) {
|
|
if (this.dropZoneIncludeParent) {
|
|
this.elementRef.nativeElement.parentElement.style.display = '';
|
|
} else {
|
|
this.elementRef.nativeElement.style.display = '';
|
|
}
|
|
} else {
|
|
if (this.dropZoneIncludeParent) {
|
|
this.elementRef.nativeElement.parentElement.style.display = 'none';
|
|
} else {
|
|
this.elementRef.nativeElement.style.display = 'none';
|
|
}
|
|
}
|
|
}
|
|
|
|
// onClickClear(fileUploadItem: FileUploadItem) {
|
|
// this.fileUploadItems = this.fileUploadItems.filter(f => {
|
|
// return (
|
|
// f.file.name !== fileUploadItem.file.name &&
|
|
// f.file.path !== fileUploadItem.file.path
|
|
// );
|
|
// });
|
|
// this.filesChange.emit(this.fileUploadItems);
|
|
// }
|
|
}
|