Begin XenForo Sync and continue Uploader

ts/submissions/class-drop-container.ts

@@ -28,11 +28,11 @@ export class DropContainer {
 
     private addEvents(): void {
 
-        this.element.addEventListener( 'click', this.submitFile, false );
+        this.element.addEventListener( 'click', (e: Event) => { this.submitFile(e) }, 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 );
+        this.element.addEventListener( 'drop', (e: Event) => { this.dropElement( e ); } );
     }
 
     submitFile( e: Event ): void {

ts/submissions/class-reserve-post-id.ts

@@ -0,0 +1,18 @@
+import {__, I } from "./globals";
+declare const _romhackplaza_script_uploader: any;
+declare const romhackplaza_modal_submissions: any;
+
+export class Reserve_Post_ID {
+
+    /**
+     *
+     * @param callback - MUST BE FROM A Upload child.
+     */
+    constructor( callback: () => any ){
+
+        if( I.is_edit ) {
+            callback();
+            return;
+        }
+    }
+}

ts/submissions/class-upload.ts

@@ -1,9 +1,12 @@
-import {__, FORBIDDEN_CARS, romhackplaza_modal_submissions, during_upload, I } from "./globals";
+import {__, FORBIDDEN_CARS, I } from "./globals";
 import {DropContainer} from "./class-drop-container";
+declare const _romhackplaza_script_uploader: any;
+declare const romhackplaza_modal_submissions: any;
 
 export class Upload {
 
     file: File;
+    progress_bar: HTMLElement|undefined;
 
     constructor( file: File ){
 
@@ -22,10 +25,20 @@ export class Upload {
             console.error("WTF at beginUpload method.");
             return;
         }
+
         this.switchDuringUpload();
         if( typeof I.drop_container !== 'undefined' && I.drop_container instanceof DropContainer )
             I.drop_container.switch();
 
+        let progress = document.getElementById( 'progress' );
+        if( progress !== null ) {
+            progress.style.display = 'block';
+            this.progress_bar = progress.querySelector('.bar') as HTMLElement;
+        }
+
+        if( I.reserved_post_id === undefined || I.reserved_post_id === null )
+            console.log( "ok" );
+
     }
 
     checkForbiddenCars() :boolean {
@@ -42,11 +55,20 @@ export class Upload {
     private switchDuringUpload(): void {
 
         // @ts-ignore
-        during_upload = !during_upload;
+        I.during_upload = !I.during_upload;
+        this.changeStatus( __( "Preparing upload...", 'romhackplaza' ) );
         this.switchSubmissionButton();
 
     }
 
+    private changeStatus( str: string ){
+
+        let sts: HTMLElement|null = document.getElementById( 'status' );
+        if( sts !== null )
+            sts.textContent = str;
+
+    }
+
     private switchSubmissionButton(): void {
 
         let btn: HTMLElement|null = document.getElementById( 'submitTranslationButton' );

ts/submissions/class-uploader-data.ts

@@ -0,0 +1,52 @@
+export class Uploader_Data {
+
+    private data: object;
+
+    constructor() {
+        this.data = {};
+
+        return new Proxy( this, {
+            get: ( target, p ) => {
+                return target.get( p as string );
+            },
+            set: ( target, p, v ) => {
+                target.set( p as string, v );
+                return true
+            }
+        });
+    }
+
+    add_field( field_name: string, field_value: any, readonly: boolean ){
+
+        // @ts-ignore
+        if( !this.data[field_name] )
+            // @ts-ignore
+            this.data[field_name] = { "data": field_value, can_write: ( readonly ? 1 : -1 ) };
+
+    }
+
+    get( field_name : string ): any {
+
+        // @ts-ignore
+        if( this.data[field_name] )
+            // @ts-ignore
+            return this.data[field_name]['data'];
+
+        return undefined;
+
+    }
+
+    set( field_name: string, field_value: any ){
+
+        // @ts-ignore
+        if( this.data[field_name] && this.data[field_name]['can_write'] != 0 ){
+            // @ts-ignore
+            this.data[field_name]['data'] = field_value;
+            // @ts-ignore
+            if( this.data[field_name]['can_write'] == 1 )
+                // @ts-ignore
+                this.data[field_name]['can_write'] = 0;
+        }
+
+    }
+}

ts/submissions/globals.ts

@@ -1,18 +1,17 @@
-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;
+import {Uploader_Data} from "./class-uploader-data";
 
+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 const I : Uploader_Data = new Uploader_Data();
+I.add_field( 'is_edit', false, true );
+I.add_field( 'reserved_post_id', undefined, false );
+I.add_field( 'during_upload', false, false );
+I.add_field( 'upload', undefined, false );
+I.add_field( 'drop_container', undefined, true );
 
 export interface Can_Upload_Detail {
     file: File;

ts/submissions/index.ts

@@ -1,10 +1,16 @@
-import {type Can_Upload_Detail, during_upload, I} from "./globals";
+import {type Can_Upload_Detail, I} from "./globals";
 import {Upload} from "./class-upload";
 import {DropContainer} from "./class-drop-container";
 
 document.addEventListener('DOMContentLoaded', () => {
 
-    if( !document.getElementById( 'fileInput' ) ) // Check if exists.
+    if( !document.getElementById( 'file-container' ) ) // Check if exists.
+        return;
+
+    // Add PostID if edit.
+    let url_params = new URLSearchParams(window.location.search);
+    I.is_edit = url_params.has( 'edit_entry' );
+    I.reserved_post_id = url_params.get('edit_entry' ) || null;
 
     // @ts-ignore
     I.drop_container = new DropContainer( document.getElementById( 'file-container' ) as HTMLElement, document.getElementById( 'file-container-text' ) as HTMLElement );
@@ -13,7 +19,7 @@ document.addEventListener('DOMContentLoaded', () => {
     document.addEventListener( 'can_upload', (e: CustomEvent<Can_Upload_Detail> ) => {
 
         const { file } = e.detail;
-        if( !during_upload ) // @ts-ignore
+        if( !I.during_upload ) // @ts-ignore
             I.upload = new Upload( file );
 
     });