RomhackPlaza/resources/js/SubmissionsClass/GalleryManager.js

import { MainImageManager as GalleryImage } from "./MainImageManager.js";

const MAX_GALLERY = 20;

export function GalleryManager() {

    return {

        /**
         * All images uploaded.
         * @type {Array<GalleryImage>}
         */
        images: [],

        dragSrcI: null,

        /**
         * Forward to this.images.length
         * @returns {number}
         */
        get number(){
            return this.images.length;
        },

        /**
         * Verify if all images has been uploaded or not.
         * @return {boolean}
         */
        get allUploaded(){
            for(const IMG of this.images){
                if( IMG.serverFilePath == null ){
                    return false;
                }
            }
            return true;
        },

        /**
         * Return if there is an error on an image or not.
         *
         * @returns {null|Array<string>}
         */
        get error(){
            const RESPONSE = [];
            for( const IMG of this.images ){
                if( IMG.error !== null )
                    RESPONSE.push( IMG.error );
            }
            if( RESPONSE.length === 0 )
                return null;
            return RESPONSE;
        },

        /**
         * Superior or equal than 20.
         * @returns {boolean}
         */
        get isFull(){
            return this.images.length >= MAX_GALLERY;
        },

        /**
         * Reload image if there is an error or edition.
         *
         * @param {Array<string>} oldPaths
         */
        init( oldPaths = null ){
            if( oldPaths === null || oldPaths.length <= 0 )
                return;

            for( const PATH of oldPaths ){

                if( this.isFull )
                    break;

                const IMG = GalleryImage();
                IMG.serverFilePath = PATH;
                this.images.push(IMG);
                this.images[this.images.length - 1].getOldImage( PATH );
            }
        },

        /**
         * Upload images, refresh the preview and store images if there is a problem.
         *
         * @param {Event} e
         * @returns {Promise<void>}
         */
        async handleSubmitFiles(e){
            const FILES = e.target.files;
            if( !FILES || FILES.length <= 0 )
                return; // No file uploaded.

            for( const FILE of FILES ){

                if( this.isFull )
                    break;

                const IMG = GalleryImage();
                IMG.name = FILE.name;
                IMG.type = FILE.type;
                this.images.push(IMG);

                const IMG_FROM_LIST = this.images[this.images.length - 1];

                await IMG_FROM_LIST.uploadImageToTemporary( FILE );

                await new Promise( resolve => {
                    const READER = new FileReader();
                    READER.onload = (e2) => {
                        IMG_FROM_LIST.preview = e2.target.result;
                        resolve();
                    }
                    READER.onerror = () => resolve();
                    READER.readAsDataURL(FILE);
                });

            }
        },

        /**
         * Remove specific file.
         * @param {number} index
         */
        handleRemoveFile(index){
            this.images[index].handleRemoveFile(null);
            this.images.splice(index, 1);
        },

        dragStart(index){
            this.dragSrcI = index;
        },

        dragOver(e, index){
            e.preventDefault();

            if( this.dragSrcI === null || this.dragSrcI === index )
                return;

            const moved = this.images.splice(this.dragSrcI, 1)[0];
            this.images.splice(index, 0, moved);
            this.dragSrcI = index;
        },

        dragEnd(){
            this.dragSrcI = null;
        }
    }
}