personal-website/resources/sys/finder/finder.js

class Finder{
    appId = "Finder"
    fileView = undefined
    path = "/"
    homePath = "/home/user"
    windowElement
    // previousPath = "/"
    pathHistory = [] //FIXME Fixed length
    constructor(){
        // this.appElem = appElem
        // WebDesktopEnvironment.RegisterApp(this)
    }

    /**
    * @param {string[]} args
    */
    async NewWindow(args){
        this.path = args[0]
        if (args[1] == "desktop"){
            this.NewDesktop(args)
            return
        }
        const params = new URLSearchParams({isMobile: WebDesktopEnvironment.isMobile})
        fetch(`/app/${this.appId}/render?` + params) 
        .then((response) => response.text())
        .then((html) => {
            let newWindow = WebDesktopEnvironment.CreateNewWindow(this.appId, 500, 350 )    
            newWindow.innerHTML = html
            
            this.fileView = new FileView(newWindow.querySelector(".FileTileView"),
                (event) =>{ this.Click(event) },
                (event) =>{ this.RightClick(event) },
                (event) =>{ this.FileUploading(event) },
            )
            this.OpenDir(this.path)
            
            newWindow.querySelector("#RootButton").addEventListener('click', () =>{
                this.OpenDir('/')
            })

            newWindow.querySelector("#HomeButton").addEventListener('click', () =>{
                this.OpenDir('/home/user')
            })

            this.windowElement = newWindow

            if (!WebDesktopEnvironment.isMobile){
                let scrollBar = new WdeScrollBar(newWindow.querySelector(".ScrollbarPlace"), newWindow.querySelector(".FileTileView"))
                // console.log(newWindow.querySelector("#closeWindowButton"))

                newWindow.querySelector("#closeWindowButton").addEventListener('click', function (params) {
                    
                    WebDesktopEnvironment.CloseWindow(newWindow)
                    
                })
            }
        })
        .catch((error) => {
            WebDesktopEnvironment.Alert(error);
        })
    }

     /**
    * @param {DataTransferItemList} filesList
    */
    
    FileUploading(filesList){
        let formData = new FormData()
        console.log(this.path)
        for (let i = 0; i < filesList.length; i++) {
            const element = filesList[i];
            formData.append("file", element.getAsFile())
            // console.log(formData)
        }
        // console.log(formData)
        // formData.append("photo", photo);
        fetch('/fs/upload/?' + new URLSearchParams({
            parentPath: this.path,
        }), 
        {
            method: "POST", 
            body: formData
        })
        .catch((error) => {
            WebDesktopEnvironment.Alert(error);
        })   
    }

    /**
    * @param {string[]} args
    */
    NewDesktop(args){
        fetch(`${window.location.origin}/application/${this.appId}/renderDesktop?` + new URLSearchParams({
            isMobile: WebDesktopEnvironment.isMobile,
            path: args[0]
        }))
        .then((response) => response.text())
        .then((html) => {
            // console.log(args)
            args[2].innerHTML = html
            
            this.fileView = new FileView(args[2].querySelector(".FileTileView"), (event) =>{
                this.Click(event, true)
            })
            this.OpenDir(this.path)
        })
        .catch((error) => {
            WebDesktopEnvironment.Alert(error);
        })
    }

    // OpenPreviousDir(){
    //     if (this.pathHistory.length > 0){
    //         // console.log(this.pathHistory)
    //         let path = this.pathHistory[this.pathHistory.length - 1]
    //         // console.log(typeof( this.pathHistory))
    //         this.pathHistory.pop()
    //         this.OpenDir(this.path)
    //     }
    // }

    /**
    * @param {string} path
    */
    OpenDir(path){
        this.path = path
        this.fileView.OpenFolder(path)
    }


    // /**
    // */
    // OpenNewDir(){
    //     WebDesktopEnvironment.Open("finder", [this.path])
    // }
    
    /**
    * @param {MouseEvent} event
    */
    RightClick(event){
        this.CreateContextMenu(event.target, [event.clientY, event.clientX])
    }

    /**
    * @param {MouseEvent} event
    */
    Click(event){
        let fileType = event.target.getAttribute("fileType")
        let fileName = event.target.getAttribute("name")
        const fileExtension = fileName.split(".")[fileName.split(".").length - 1] //FIXME
        switch (fileType) {
            case "directory":
                if (fileExtension == "app"){
                    WebDesktopEnvironment.Open(`${this.path}/${fileName}`, [])
                } else{
                    WebDesktopEnvironment.Open(`/Applications/Finder.app`, [`${this.path}/${fileName}`])
                }
                break
            case "blog":
                WebDesktopEnvironment.Open("blog-viewer", [`${this.path}/${fileName}`])
                break
            case "personal-properties":
                WebDesktopEnvironment.Open("personal-properties", [`${this.path}/${fileName}`])
                break
            // case "app":
            //     //TODO get real id
            //     WebDesktopEnvironment.Open("personal-properties", [])
            //     break;
            case "jpeg":
            case "png":
                WebDesktopEnvironment.Open("img-viewer", [this.path + "/" +  fileName])
                break;
            default:
                // console.log("Unsupported file type")
                WebDesktopEnvironment.Alert("Unsupported file type")
                break;
        }
    }

    CreateContextMenu(target, pos){
        let context = ""
        const fileName = target.getAttribute("name")
        const fileType = target.getAttribute("fileType")
        if (target.classList.contains("FileTileView"))
        {
            context = "FileTileView"
        } else {
            context = fileType
        }
        const params = new URLSearchParams({context: context, path: `${this.path}/${fileName}`})
        fetch(`/app/${this.appId}/contextMenu?` + params) 
        .then((response) => response.text())
        .then((html) => {
            let overlay = document.createElement("div") //TODO Move to WDE.CreateOverlay()
            overlay.setAttribute('id', 'finder-context-menu-overlay')
            overlay.style.position = 'absolute'
            overlay.style.width = "100%"
            overlay.style.height = "100%"

            let menu = document.createElement("div")
            menu.setAttribute('class', 'ContextMenu  WindowFrameShadow')
            menu.style.position = 'absolute';
            menu.style.top = pos[0] + "px";
            menu.style.left = pos[1] + "px";
            
            menu.innerHTML = html
            menu.children[0].lastElementChild.remove() //FIXME Can't ommit rendering of horLine in end of menu on backend
            
            overlay.appendChild(menu)
            document.body.appendChild(overlay)

            overlay.addEventListener('click', (event) => {
                if (event.target.classList.contains("Row")){ //TODO add uuid id to rows to more accurate checks??
                    switch (event.target.children[0].getAttribute("action")) {
                        case "createDir":
                            fetch(`/fs/createDir?` + new URLSearchParams({
                                path: `${this.path}/New Directory`
                            }))
                            .then((response) => {
                                console.log(response.status)
                                if (response.status == 200){
                                    this.OpenDir(this.path)
                                }
                            })
                            .catch((error) => {
                                WebDesktopEnvironment.Alert(error);
                            })
                            break
                            case "deleteFile":
                                console.log(fileName)
                                // break
                                fetch(`/fs/delete?` + new URLSearchParams({
                                    path: `${this.path}/${fileName}`
                                }))
                                .then((response) => {
                                    console.log(response.status)
                                    if (response.status == 200){
                                        this.OpenDir(this.path)
                                       
                                    }
                                })
                               
                                .catch((error) => {
                                    WebDesktopEnvironment.Alert(error);
                                })
                            break
                            case "getInfo":
                                fetch(`/application/${this.appId}/renderProps?` + new URLSearchParams({
                                    path: `${this.path}/${fileName}`
                                }))
                                .then((response) => {
                                    console.log(response)
                                    if (response.status == 200){
                                        console.log("Success")
                                        return response.text();
                                    }
                                })
                                .then((html) =>{
                                    let newWindow = WebDesktopEnvironment.CreateNewWindow(this.appId, 350, 500 )    
                                    newWindow.innerHTML = html
                                    newWindow.querySelector("#closeWindowButton").addEventListener('click', function (params) {
                                        WebDesktopEnvironment.CloseWindow(newWindow)
                                    })
                                })
                                .catch((error) => {
                                    WebDesktopEnvironment.Alert(error);
                                })
                                break
                            case "openAsDir":
                                WebDesktopEnvironment.Open(`/Applications/${this.appId}.app`,[`${this.path}/${fileName}`])
                                break
                        default:
                            break;
                    } 
                }
                overlay.remove()
            })
            overlay.addEventListener('contextmenu', (event) => {
                event.preventDefault();
                overlay.remove()
            })
        })
        .catch((error) => {
            WebDesktopEnvironment.Alert(error);
        })   
    }
}