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.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") switch (fileType) { case "directory": WebDesktopEnvironment.Open("finder", [`${this.path}/${fileName}`]) //FIXME this.path is shared for all windows 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 = "" 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?? let fileType = target.getAttribute("fileType") let fileName = target.getAttribute("name") 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); }) default: break; } } overlay.remove() }) overlay.addEventListener('contextmenu', (event) => { event.preventDefault(); overlay.remove() }) }) .catch((error) => { WebDesktopEnvironment.Alert(error); }) } }