New IDs, finish Submit Translation page and begin BIG TS.

ts/submissions/class-drop-container.ts

@@ -0,0 +1,73 @@
+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);
+
+    }
+
+}