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);
+
+    }
+
+}

ts/submissions/class-file-list.ts

@@ -0,0 +1,8 @@
+import { Server_File } from './class-server-file';
+
+export class FileList {
+
+    list: Server_File[] = [];
+
+
+}

ts/submissions/class-server-file.ts

@@ -0,0 +1,4 @@
+export class Server_File {
+
+    is_dirty: boolean = false;
+}

ts/submissions/class-upload.ts

@@ -0,0 +1,65 @@
+import {__, FORBIDDEN_CARS, romhackplaza_modal_submissions, during_upload, I } from "./globals";
+import {DropContainer} from "./class-drop-container";
+
+export class Upload {
+
+    file: File;
+
+    constructor( file: File ){
+
+        this.file = file;
+        this.beginUpload();
+
+    }
+
+    private beginUpload(){
+
+        if( this.checkForbiddenCars() ){
+            romhackplaza_manage_modal( romhackplaza_modal_submissions, "block", __( "Submit error", 'romhackplaza' ), __( "There is a forbidden character in the file name, please change it.", 'romhackplaza' ), "" );
+            return;
+        }
+        if( !this.file ) {
+            console.error("WTF at beginUpload method.");
+            return;
+        }
+        this.switchDuringUpload();
+        if( typeof I.drop_container !== 'undefined' && I.drop_container instanceof DropContainer )
+            I.drop_container.switch();
+
+    }
+
+    checkForbiddenCars() :boolean {
+
+        // @ts-ignore
+        for( let char: string of FORBIDDEN_CARS ){
+            if( this.file.name.includes(char) )
+                return true;
+        }
+        return false;
+
+    }
+
+    private switchDuringUpload(): void {
+
+        // @ts-ignore
+        during_upload = !during_upload;
+        this.switchSubmissionButton();
+
+    }
+
+    private switchSubmissionButton(): void {
+
+        let btn: HTMLElement|null = document.getElementById( 'submitTranslationButton' );
+        if( btn !== null ){
+            let conv_btn = btn as HTMLButtonElement;
+            if( conv_btn.disabled ){
+                conv_btn.disabled = false;
+                conv_btn.innerText = __( 'Submit Entry', 'romhackplaza' );
+            } else {
+                conv_btn.disabled = true;
+                conv_btn.innerText = __( 'Wait for upload...', 'romhackplaza' );
+            }
+        }
+
+    }
+}

ts/submissions/globals.ts

@@ -0,0 +1,19 @@
+export declare const _romhackplaza_script_uploader: any;
+export declare const romhackplaza_modal_submissions: any;
+declare const wp: any;
+export const { __, _x, _n, _nx } = wp.i18n;
+
+
+export const FORBIDDEN_CARS: Array<string> = [
+    "&", "+"
+];
+
+export let during_upload = false;
+export const I: any = {
+    upload: undefined,
+    drop_container: undefined,
+}
+
+export interface Can_Upload_Detail {
+    file: File;
+}

ts/submissions/index.ts

@@ -0,0 +1,20 @@
+import {type Can_Upload_Detail, during_upload, I} from "./globals";
+import {Upload} from "./class-upload";
+import {DropContainer} from "./class-drop-container";
+
+document.addEventListener('DOMContentLoaded', () => {
+
+    if( !document.getElementById( 'fileInput' ) ) // Check if exists.
+
+    // @ts-ignore
+    I.drop_container = new DropContainer( document.getElementById( 'file-container' ) as HTMLElement, document.getElementById( 'file-container-text' ) as HTMLElement );
+
+    // @ts-ignore
+    document.addEventListener( 'can_upload', (e: CustomEvent<Can_Upload_Detail> ) => {
+
+        const { file } = e.detail;
+        if( !during_upload ) // @ts-ignore
+            I.upload = new Upload( file );
+
+    });
+})