73 lines
2.0 KiB
TypeScript
73 lines
2.0 KiB
TypeScript
|
import {type Can_Upload_Detail, __} from "./globals";
|
||
|
|
|
||
|
|
export class DropContainer {
|
||
|
|
|
||
|
|
element: HTMLElement;
|
||
|
|
text_element: HTMLElement;
|
||
|
|
enabled: boolean;
|
||
|
|
|
||
|
|
constructor(element: HTMLElement, text_element: HTMLElement) {
|
||
|
|
|
||
|
|
this.element = element;
|
||
|
|
this.text_element = text_element;
|
||
|
|
this.enabled = true;
|
||
|
|
|
||
|
|
this.addEvents();
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
switch(){
|
||
|
|
|
||
|
|
this.enabled = !this.enabled;
|
||
|
|
if( !this.enabled )
|
||
|
|
this.text_element.innerHTML = __( "Please wait...", 'romhackplaza' );
|
||
|
|
else
|
||
|
|
this.text_element.innerHTML = __( "Drop files here or click to upload the file", 'romhackplaza' );
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
private addEvents(): void {
|
||
|
|
|
||
|
|
this.element.addEventListener( 'click', this.submitFile, false );
|
||
|
|
this.element.addEventListener( 'dragover', (e: Event) => e.preventDefault(), false );
|
||
|
|
this.element.addEventListener( 'dragenter', (e: Event) => this.element.classList.add( 'drag-active'), false );
|
||
|
|
this.element.addEventListener( 'dragleave', (e: Event) => this.element.classList.remove( 'drag-active'), false );
|
||
|
|
this.element.addEventListener( 'drop', this.dropElement );
|
||
|
|
}
|
||
|
|
|
||
|
|
submitFile( e: Event ): void {
|
||
|
|
|
||
|
|
if( this.enabled ) {
|
||
|
|
|
||
|
|
let input = document.createElement("input");
|
||
|
|
input.type = "file";
|
||
|
|
input.onchange = ( e: Event ) => {
|
||
|
|
// @ts-ignore
|
||
|
|
let files: Array<File> = Array.from( input.files );
|
||
|
|
this.dispatchEvent( files[0] as File );
|
||
|
|
}
|
||
|
|
input.click();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
dropElement( e: Event ): void {
|
||
|
|
|
||
|
|
e.preventDefault();
|
||
|
|
this.element.classList.remove( 'drag-active');
|
||
|
|
if( this.enabled )
|
||
|
|
// @ts-ignore
|
||
|
|
this.dispatchEvent( e.dataTransfer.files[0] );
|
||
|
|
}
|
||
|
|
|
||
|
|
dispatchEvent( file: File ) {
|
||
|
|
|
||
|
|
const evt = new CustomEvent<Can_Upload_Detail>( 'can_upload', {
|
||
|
|
detail: {
|
||
|
|
file
|
||
|
|
}
|
||
|
|
});
|
||
|
|
document.dispatchEvent(evt);
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|