personal-website/resources/sys/wde/file-view.js

class FileView{
    path = ""
    parentElem = undefined
    selected = []
    /**
    * @param {HTMLElement} fileViewElem
    * @param {Function} doubleClickCallback
    * @param {Function} rightClickCallback
    * @param {Function} updateFileViewCallback
    */
    constructor(fileViewElem, doubleClickCallback, rightClickCallback, fileUploadCallback, updateFileViewCallback){
        //TODO check all params
        this.parentElem = fileViewElem

        fileViewElem.addEventListener('click', (event) => {
            if (event.target.classList[0] == 'FileTileView')
            {   
                this.DeselectAll()
                return
            }
            if (event.detail === 1){
                this.DeselectAll()
                this.Select([event.target])
            } else if (event.detail === 2) {
                doubleClickCallback(event)
            }
        })

        fileViewElem.addEventListener('contextmenu', (event) => {
            event.preventDefault();
            if (event.target.classList.contains("Tile")){
                this.DeselectAll()
                this.Select([event.target])
            }
            this.Select([event.target])
            rightClickCallback(event)
        })

        if (fileUploadCallback !== undefined) {
            let counter = 0
            let draggedElem = undefined
            
            fileViewElem.addEventListener('dragstart', (event) => {
                // console.log(event.target)
                // console.log(this.path)
                //  draggedElem = event.target
                event.dataTransfer.setData("fileName", event.target.getAttribute("name"))
                event.dataTransfer.setData("filePath", this.path + "/" + event.target.getAttribute("name"))
                event.dataTransfer.setData("dropType", "move")
                // console.log(updateFileViewCallback)
                // event.dataTransfer.setData("updateCallback", updateFileViewCallback)
                // event.dataTransfer.setData("fileName", )
                // console.log(draggedElem)
            })

            fileViewElem.addEventListener('dragenter', function(event) {
                event.preventDefault();
                counter++
                fileViewElem.classList.add("DragDropBorder")
            })
            
            fileViewElem.addEventListener('dragend', function(event) {
                // console.log(fileViewElem)
                event.preventDefault();
                counter--
                if (counter === 0){
                    fileViewElem.classList.remove("DragDropBorder")
                }
                // updateFileViewCallback()
                // draggedElem = undefined
            })
            
            fileViewElem.addEventListener('dragleave', function(event) {
                // console.log(fileViewElem)
                event.preventDefault();
                counter--
                if (counter === 0){
                    fileViewElem.classList.remove("DragDropBorder")
                }
                // draggedElem = undefined
            })

            fileViewElem.addEventListener('dragover', function(event) {
                event.preventDefault();
            })

            fileViewElem.addEventListener("drop", (event) => {
                event.preventDefault();
                fileUploadCallback(event)
                fileViewElem.classList.remove("DragDropBorder")
                // updateFileViewCallback()
                // this.OpenFolder(this.path)
                // draggedElem = undefined
            })
        }
    }

    /** 
    * @param {[]Element} elements
    */
    Select(elements){
        elements.forEach(element => {
            this.selected.push(element)
            element.classList.add("Selected")
        });
    }

    DeselectAll(){
        this.selected.forEach(element => {
            element.classList.remove("Selected")    
        });
        this.selected = []
    }

    /** Get html of folder by path
    * @param {string} path
    */
    OpenFolder(path){
        this.path = path
        fetch(`${window.location.origin}/system/wde/widgets/file-tile-view?path=${path}`) //TODO Move to wde func. Or Not?
        .then((response) => response.text())
        .then((html) => {
            //TODO
            // console.log(responseStatus)
            // if (responseStatus != 200) {
            //     WebDesktopEnvironment.Alert("Error")
            // }
            this.parentElem.innerHTML = html
        }).catch((error) => {
            WebDesktopEnvironment.Alert(error);
        })
    }
}