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
    }

    /**
    * @param {string[]} args
    */
    NewWindow(args){
        this.path = args[0]
        if (args[1] == "desktop"){
            this.NewDesktop(args)
            return
        }
        fetch(`${window.location.origin}/application/${this.appId}/render?` + new URLSearchParams({
            isMobile: WebDesktopEnvironment.isMobile,
            // path: this.path,
            // bar: true,
        })) //TODO Move to wde func. Or Not?
        .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.Open(event, false) },
                (event) =>{ this.RightClick(event) },
                (event) =>{ this.FileUploading(event) },
            )
            this.OpenDir(this.path)
            
            newWindow.querySelector("#BackButton").addEventListener('click', () =>{
                this.OpenPreviousDir()
            })

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

            this.windowElement = newWindow

            if (!WebDesktopEnvironment.isMobile){
                // let scrollBar = new WdeScrollBar(newWindow.children[1].children[1], newWindow.children[1].children[0])// TODO to querry selector
                // 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(filesList)
        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({
            path: '/home/user/',
        }), 
        {
            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.Open(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.pathHistory += this.path
        this.path = path
        this.fileView.OpenFolder(this.path)
    }


    /**
    * @param {MouseEvent} event
    * @param {boolean} inNewWindow
    */
    Click(event, inNewWindow){

    }

    /**
    * @param {MouseEvent} event
    * @param {boolean} inNewWindow
    */
    Open(event, inNewWindow){
        let fileType = event.target.getAttribute("fileType")
        let fileName = event.target.getAttribute("name")
        switch (fileType) {
            case "directory":
                if (inNewWindow){
                    WebDesktopEnvironment.Open("finder", ["/home/user/" + fileName]) //FIXME this.path is shared for all windows
                    break
                }
                this.OpenDir(this.path +"/" + fileName)
                break
            case "blog-page":
                WebDesktopEnvironment.Open("blog-viewer", [this.path + "/" +  fileName])
                break
            case "deleteFile":
                fetch(`/fs/delete` + new URLSearchParams({
                    path: "/home/user/" + fileName //FIXME
                }))
                .then((response) => {
                    console.log(response.status)
                })
                .catch((error) => {
                    WebDesktopEnvironment.Alert(error);
                })
                break
            // case "app":
            //     //TODO get real id
            //     WebDesktopEnvironment.Open("personal-properties", [])
            //     break;
            case "base64img":
                WebDesktopEnvironment.Open("img-viewer", [this.path + "/" +  fileName])
                break;
            default:
                // console.log("Unsupported file type")
                WebDesktopEnvironment.Alert("Unsupported file type")
                break;
        }
    }
    
    RightClick(event){
        this.CreateContextMenu(event.target, [event.clientY, event.clientX])
    }

    CreateContextMenu(target, pos){
        let context = ""
        if (target.classList.contains("FileTileView"))
        {
            context = "FileTileView"

        }
        fetch(`${window.location.origin}/application/${this.appId}/contextMenu?` + new URLSearchParams({
            context: context
            
        })) 
        .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")) {
                        default:
                            break;
                    } 
                }
                overlay.remove()
            })
            overlay.addEventListener('contextmenu', (event) => {
                event.preventDefault();
                overlay.remove()
            })
        })
        .catch((error) => {
            WebDesktopEnvironment.Alert(error);
        })   
    }
}