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

288 lines
11 KiB
JavaScript
Raw Normal View History

2023-03-20 11:20:37 +00:00
class Finder{
2023-05-09 03:17:34 +00:00
appId = "Finder"
2023-04-29 13:58:39 +00:00
fileView = undefined
path = "/"
homePath = "/home/user"
2023-05-04 00:38:24 +00:00
windowElement
2023-04-29 13:58:39 +00:00
// previousPath = "/"
pathHistory = [] //FIXME Fixed length
2023-04-12 17:04:25 +00:00
constructor(){
// this.appElem = appElem
2023-05-09 03:17:34 +00:00
// WebDesktopEnvironment.RegisterApp(this)
2023-03-17 01:16:51 +00:00
}
2023-03-22 21:53:06 +00:00
/**
2023-04-29 21:01:23 +00:00
* @param {string[]} args
2023-03-22 21:53:06 +00:00
*/
2023-05-09 03:17:34 +00:00
async NewWindow(args){
2023-04-29 13:58:39 +00:00
this.path = args[0]
2023-04-29 21:01:23 +00:00
if (args[1] == "desktop"){
this.NewDesktop(args)
return
}
2023-05-09 03:17:34 +00:00
const params = new URLSearchParams({isMobile: WebDesktopEnvironment.isMobile})
fetch(`/app/${this.appId}/render?` + params)
2023-03-17 01:16:51 +00:00
.then((response) => response.text())
.then((html) => {
2023-04-13 01:09:07 +00:00
let newWindow = WebDesktopEnvironment.CreateNewWindow(this.appId, 500, 350 )
2023-03-22 21:53:06 +00:00
newWindow.innerHTML = html
2023-04-13 01:09:07 +00:00
2023-05-04 00:38:24 +00:00
this.fileView = new FileView(newWindow.querySelector(".FileTileView"),
2023-05-04 22:11:11 +00:00
(event) =>{ this.Click(event) },
2023-05-04 19:49:22 +00:00
(event) =>{ this.RightClick(event) },
(event) =>{ this.FileUploading(event) },
)
2023-04-29 13:58:39 +00:00
this.OpenDir(this.path)
2023-05-05 22:50:57 +00:00
newWindow.querySelector("#RootButton").addEventListener('click', () =>{
this.OpenDir('/')
})
2023-04-29 13:58:39 +00:00
2023-05-07 19:56:40 +00:00
newWindow.querySelector("#HomeButton").addEventListener('click', () =>{
this.OpenDir('/home/user')
})
2023-04-29 13:58:39 +00:00
2023-05-04 00:38:24 +00:00
this.windowElement = newWindow
2023-04-13 01:09:07 +00:00
if (!WebDesktopEnvironment.isMobile){
2023-05-07 19:56:40 +00:00
let scrollBar = new WdeScrollBar(newWindow.querySelector(".ScrollbarPlace"), newWindow.querySelector(".FileTileView"))
2023-04-29 21:01:23 +00:00
// console.log(newWindow.querySelector("#closeWindowButton"))
2023-05-04 19:49:22 +00:00
2023-04-13 18:28:28 +00:00
newWindow.querySelector("#closeWindowButton").addEventListener('click', function (params) {
2023-04-29 15:34:25 +00:00
2023-04-13 01:09:07 +00:00
WebDesktopEnvironment.CloseWindow(newWindow)
2023-04-29 15:34:25 +00:00
2023-04-13 01:09:07 +00:00
})
}
2023-03-17 01:16:51 +00:00
})
.catch((error) => {
WebDesktopEnvironment.Alert(error);
2023-03-22 21:53:06 +00:00
})
2023-04-12 17:04:25 +00:00
}
2023-04-13 01:09:07 +00:00
2023-05-04 19:49:22 +00:00
/**
* @param {DataTransferItemList} filesList
*/
FileUploading(filesList){
let formData = new FormData()
2023-05-07 00:14:30 +00:00
console.log(this.path)
2023-05-04 19:49:22 +00:00
for (let i = 0; i < filesList.length; i++) {
const element = filesList[i];
formData.append("file", element.getAsFile())
2023-05-07 00:14:30 +00:00
// console.log(formData)
2023-05-04 19:49:22 +00:00
}
// console.log(formData)
// formData.append("photo", photo);
fetch('/fs/upload/?' + new URLSearchParams({
2023-05-07 00:14:30 +00:00
parentPath: this.path,
2023-05-04 19:49:22 +00:00
}),
{
method: "POST",
body: formData
})
.catch((error) => {
WebDesktopEnvironment.Alert(error);
})
}
2023-04-29 21:01:23 +00:00
/**
* @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) =>{
2023-05-04 22:11:11 +00:00
this.Click(event, true)
2023-04-29 21:01:23 +00:00
})
this.OpenDir(this.path)
})
.catch((error) => {
WebDesktopEnvironment.Alert(error);
})
}
2023-05-04 22:11:11 +00:00
// 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)
// }
// }
2023-04-29 13:58:39 +00:00
2023-04-12 17:04:25 +00:00
/**
* @param {string} path
*/
2023-04-29 13:58:39 +00:00
OpenDir(path){
2023-05-07 00:14:30 +00:00
this.path = path
2023-05-05 22:50:57 +00:00
this.fileView.OpenFolder(path)
2023-04-29 13:58:39 +00:00
}
2023-05-07 00:14:30 +00:00
// /**
// */
// OpenNewDir(){
// WebDesktopEnvironment.Open("finder", [this.path])
// }
2023-05-04 22:11:11 +00:00
2023-04-29 13:58:39 +00:00
/**
* @param {MouseEvent} event
*/
2023-05-04 22:11:11 +00:00
RightClick(event){
this.CreateContextMenu(event.target, [event.clientY, event.clientX])
}
/**
* @param {MouseEvent} event
*/
2023-05-04 22:11:11 +00:00
Click(event){
2023-04-13 01:09:07 +00:00
let fileType = event.target.getAttribute("fileType")
2023-04-29 13:58:39 +00:00
let fileName = event.target.getAttribute("name")
2023-05-09 03:17:34 +00:00
const fileExtension = fileName.split(".")[fileName.split(".").length - 1] //FIXME
2023-04-13 01:09:07 +00:00
switch (fileType) {
2023-04-29 13:58:39 +00:00
case "directory":
2023-05-09 03:17:34 +00:00
if (fileExtension == "app"){
WebDesktopEnvironment.Open(`${this.path}/${fileName}`, [])
} else{
WebDesktopEnvironment.Open(`/Applications/Finder.app`, [`${this.path}/${fileName}`])
}
2023-04-29 13:58:39 +00:00
break
case "blog":
2023-05-04 22:11:11 +00:00
WebDesktopEnvironment.Open("blog-viewer", [`${this.path}/${fileName}`])
2023-04-29 13:58:39 +00:00
break
case "personal-properties":
WebDesktopEnvironment.Open("personal-properties", [`${this.path}/${fileName}`])
break
2023-04-29 13:58:39 +00:00
// case "app":
// //TODO get real id
// WebDesktopEnvironment.Open("personal-properties", [])
// break;
2023-05-05 20:31:42 +00:00
case "jpeg":
case "png":
2023-04-29 16:47:12 +00:00
WebDesktopEnvironment.Open("img-viewer", [this.path + "/" + fileName])
break;
2023-04-12 21:05:23 +00:00
default:
2023-05-02 11:32:56 +00:00
// console.log("Unsupported file type")
WebDesktopEnvironment.Alert("Unsupported file type")
2023-04-12 17:04:25 +00:00
break;
}
2023-03-17 01:16:51 +00:00
}
2023-05-04 00:38:24 +00:00
CreateContextMenu(target, pos){
2023-05-04 19:49:22 +00:00
let context = ""
2023-05-09 03:17:34 +00:00
const fileName = target.getAttribute("name")
const fileType = target.getAttribute("fileType")
if (target.classList.contains("FileTileView"))
{
context = "FileTileView"
2023-05-09 03:17:34 +00:00
} else {
context = fileType
}
2023-05-09 03:17:34 +00:00
const params = new URLSearchParams({context: context, path: `${this.path}/${fileName}`})
fetch(`/app/${this.appId}/contextMenu?` + params)
2023-05-04 00:38:24 +00:00
.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%"
2023-05-04 00:38:24 +00:00
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
2023-05-04 00:38:24 +00:00
overlay.appendChild(menu)
document.body.appendChild(overlay)
2023-05-05 22:07:09 +00:00
overlay.addEventListener('click', (event) => {
if (event.target.classList.contains("Row")){ //TODO add uuid id to rows to more accurate checks??
2023-05-04 19:49:22 +00:00
switch (event.target.children[0].getAttribute("action")) {
2023-05-05 18:32:41 +00:00
case "createDir":
fetch(`/fs/createDir?` + new URLSearchParams({
path: `${this.path}/New Directory`
}))
.then((response) => {
console.log(response.status)
2023-05-05 20:31:42 +00:00
if (response.status == 200){
this.OpenDir(this.path)
}
2023-05-05 18:32:41 +00:00
})
.catch((error) => {
WebDesktopEnvironment.Alert(error);
})
break
case "deleteFile":
console.log(fileName)
// break
fetch(`/fs/delete?` + new URLSearchParams({
2023-05-05 22:07:09 +00:00
path: `${this.path}/${fileName}`
2023-05-05 18:32:41 +00:00
}))
.then((response) => {
console.log(response.status)
2023-05-05 20:31:42 +00:00
if (response.status == 200){
this.OpenDir(this.path)
2023-05-05 22:07:09 +00:00
2023-05-05 20:31:42 +00:00
}
2023-05-05 18:32:41 +00:00
})
2023-05-05 22:07:09 +00:00
2023-05-05 18:32:41 +00:00
.catch((error) => {
WebDesktopEnvironment.Alert(error);
})
break
2023-05-05 20:31:42 +00:00
case "getInfo":
2023-05-05 22:07:09 +00:00
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);
})
2023-05-09 03:17:34 +00:00
break
case "openAsDir":
WebDesktopEnvironment.Open(`/Applications/${this.appId}.app`,[`${this.path}/${fileName}`])
break
2023-05-04 19:49:22 +00:00
default:
break;
}
2023-05-04 00:38:24 +00:00
}
overlay.remove()
})
overlay.addEventListener('contextmenu', (event) => {
event.preventDefault();
overlay.remove()
})
})
.catch((error) => {
WebDesktopEnvironment.Alert(error);
})
2023-05-04 00:38:24 +00:00
}
2023-03-17 01:16:51 +00:00
}