delete duplicates
This commit is contained in:
parent
71431790b5
commit
ec9ef532f6
|
|
@ -1,339 +0,0 @@
|
|||
import AbstractWebDesktopEnvironment from "../../wde/wde.js"
|
||||
import Finder from "./finder.js"
|
||||
|
||||
|
||||
export default class FinderWindow{
|
||||
#appId = "Finder" //FIXME
|
||||
curPath = ""
|
||||
fileView = undefined
|
||||
windowElem = undefined
|
||||
/** @type {Finder} */
|
||||
#finder
|
||||
/** @type {AbstractWebDesktopEnvironment} */
|
||||
#wde
|
||||
|
||||
/**
|
||||
* @constructor
|
||||
* @param {Finder}
|
||||
* @param {AbstractWebDesktopEnvironment} wde
|
||||
*/
|
||||
constructor(finder, wde){
|
||||
this.#finder = finder
|
||||
this.#wde = wde
|
||||
}
|
||||
/**
|
||||
* @param {Finder} finder
|
||||
* @param {*} args
|
||||
* @param {import("../../wde/wde.js").runContext} runContext
|
||||
* @returns
|
||||
*/
|
||||
async Init(finder, args, runContext){
|
||||
this.#finder = finder
|
||||
if (runContext.isMobile){
|
||||
console.log("Mobile Finder!")
|
||||
this.CreateMobileView(args, runContext)
|
||||
return
|
||||
}
|
||||
if (args[1] == "--desktop"){
|
||||
let desktopNode = document.body.querySelector(`#${args[2]}`)
|
||||
if (desktopNode == null){
|
||||
this.#wde.Alert("Desktop node not found")
|
||||
return
|
||||
}
|
||||
|
||||
const params = new URLSearchParams({
|
||||
path: args[0]
|
||||
})
|
||||
const response = await fetch(`/app/${this.#appId}/renderDesktop?` + params,
|
||||
{
|
||||
method: "POST",
|
||||
body: JSON.stringify(runContext)
|
||||
})
|
||||
if (response.status != 200){
|
||||
console.log(response.status)
|
||||
// this.#wde.Alert("Error in render desktop") //TODO
|
||||
return
|
||||
}
|
||||
const html = await response.text()
|
||||
desktopNode.innerHTML = html
|
||||
|
||||
// console.log(this.#wde)
|
||||
|
||||
this.fileView = new this.#wde.FileView(
|
||||
desktopNode.querySelector(".FileTileView"), (event) =>{this.Click(event)},
|
||||
(event) => { this.RightClick(event) },
|
||||
(event, draggedElem) => { this.DropEvent(event, draggedElem)},
|
||||
() => { this.ReRenderDir() }
|
||||
)
|
||||
this.RenderDir(args[0])
|
||||
return
|
||||
}
|
||||
const params = new URLSearchParams({isMobile: false}) //FIXME
|
||||
const response = await fetch(`/app/${this.#appId}/render?` + params,
|
||||
{
|
||||
method: "POST",
|
||||
body: JSON.stringify(runContext)
|
||||
})
|
||||
if (response.status != 200){
|
||||
const error = await response.json()
|
||||
this.#wde.Alert(error.message)
|
||||
return
|
||||
}
|
||||
const html = await response.text()
|
||||
|
||||
let newWindow = this.#wde.Decorat.CreateNewWindow(this.#appId, 500, 350 )
|
||||
newWindow.innerHTML = html
|
||||
|
||||
// console.log(this.#wde)
|
||||
|
||||
this.fileView = new this.#wde.FileView(
|
||||
newWindow.querySelector(".FileTileView"),
|
||||
(event) => { this.Click(event) },
|
||||
(event) => { this.RightClick(event) },
|
||||
(event, draggedElem) => { this.DropEvent(event, draggedElem)},
|
||||
() => { this.ReRenderDir() }
|
||||
)
|
||||
|
||||
newWindow.querySelector("#closeWindowButton").addEventListener('click', () => {
|
||||
this.#wde.Decorat.CloseWindow(newWindow)
|
||||
})
|
||||
|
||||
newWindow.querySelector("#RootButton").addEventListener('click', () =>{
|
||||
this.RenderDir('/')
|
||||
})
|
||||
|
||||
newWindow.querySelector("#HomeButton").addEventListener('click', () =>{
|
||||
this.RenderDir('/home/user')
|
||||
})
|
||||
|
||||
let scrollBar = new this.#wde.ScrollBar(newWindow.querySelector(".ScrollbarPlace"), newWindow.querySelector(".FileTileView"))
|
||||
|
||||
this.windowElem = newWindow
|
||||
this.RenderDir(args[0])
|
||||
}
|
||||
|
||||
CreateDesktopWindow(){
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {*} args
|
||||
* @param {import("../../wde/wde-desktop.js").runContext} runContext
|
||||
* @returns
|
||||
*/
|
||||
async CreateMobileView(args, runContext){
|
||||
|
||||
const params = new URLSearchParams({isMobile: false}) //FIXME
|
||||
const response = await fetch(`/app/${this.#appId}/render?` + params,
|
||||
{
|
||||
method: "POST",
|
||||
body: JSON.stringify(runContext)
|
||||
})
|
||||
if (response.status != 200){
|
||||
const error = await response.json()
|
||||
this.#wde.Alert(error.message)
|
||||
return
|
||||
}
|
||||
const html = await response.text()
|
||||
console.log(this.#wde)
|
||||
let newView = this.#wde.Decorat.CreateNewView(this.#appId,)
|
||||
newView.innerHTML = html
|
||||
}
|
||||
/**
|
||||
* @param {string} path
|
||||
*/
|
||||
RenderDir(path){
|
||||
this.curPath = path
|
||||
this.fileView.OpenFolder(path)
|
||||
}
|
||||
|
||||
ReRenderDir(){
|
||||
this.RenderDir(this.curPath)
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {DragEvent} event
|
||||
* @param {HTMLElement} draggedElem
|
||||
*/
|
||||
async DropEvent(event){
|
||||
// console.log(event.dataTransfer.getData("dropType"))
|
||||
if (event.dataTransfer.getData("dropType") == "move"){
|
||||
const sourcePath= event.dataTransfer.getData("filePath")
|
||||
const targetPath = this.curPath + "/" + event.dataTransfer.getData("fileName")
|
||||
const res = await WebFS.MoveFile(sourcePath, targetPath)
|
||||
if (res){
|
||||
this.ReRenderDir()
|
||||
} else {
|
||||
this.#wde.Alert("UWAGA TODO MOVE FILE ERROR") //TODO
|
||||
}
|
||||
} else {
|
||||
console.log(event, this.curPath)
|
||||
let files = event.dataTransfer.files
|
||||
for (let i = 0; i < files.length; i++) {
|
||||
const file = files[i];
|
||||
console.log("file:" + file.name)
|
||||
|
||||
const res = await WebFS.UploadFile(file, this.curPath)
|
||||
if (res){
|
||||
this.ReRenderDir()
|
||||
}
|
||||
}
|
||||
|
||||
const params = new URLSearchParams({
|
||||
parentPath: this.curPath,
|
||||
})
|
||||
const response = await fetch('/fs/upload/?' + params,
|
||||
{
|
||||
method: "POST", //TODO Change to PUT?
|
||||
body: formData
|
||||
})
|
||||
if (response.status != 200){
|
||||
this.#wde.Alert("ERROR IN UPLOADING FILE")//TODO
|
||||
} else {
|
||||
this.ReRenderDir()
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {MouseEvent} event
|
||||
*/
|
||||
Click(event){
|
||||
this.OpenFile(this.curPath, event.target.getAttribute("name"), event.target.getAttribute("filetype"))
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} filePath
|
||||
*/
|
||||
async OpenFile(parentPath, fileName, fileType){
|
||||
// console.log(parentPath, fileName, fileType)
|
||||
// const splittedPath = filePath.split("/")
|
||||
// const fileName = splittedPath[splittedPath.length - 1]
|
||||
const fileExtension = fileName.split(".")[fileName.split(".").length - 1] //FIXME
|
||||
|
||||
switch (true) {
|
||||
case fileType == "objectlink":
|
||||
this.#wde.Alert("Links not supported yet")
|
||||
break
|
||||
case fileType == "pathlink":
|
||||
let res = await WebFS.ReadPathLink(`${parentPath}/${fileName}`)
|
||||
console.log(res)
|
||||
this.OpenFile(res.parentPath, res.name, res.filetype)
|
||||
break
|
||||
case fileExtension == "app":
|
||||
this.#wde.Open(`${parentPath}/${fileName}`, [])
|
||||
break
|
||||
case fileExtension == "blog":
|
||||
this.#wde.Open(`/Applications/BlogViewer.app`, [`${parentPath}/${fileName}`])
|
||||
break
|
||||
case fileType == "directory":
|
||||
this.#wde.Open(`/Applications/Finder.app`, [`${parentPath}/${fileName}`])
|
||||
break
|
||||
case fileExtension == "blog":
|
||||
this.#wde.Open("/Applications/BlogViewer.app", [`${parentPath}/${fileName}`])
|
||||
break
|
||||
case fileExtension == "jpeg" | fileExtension == "png":
|
||||
this.#wde.Open("img-viewer", [`${parentPath}/${fileName}`])
|
||||
break;
|
||||
default:
|
||||
this.#wde.Alert("Unsupported file type")
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {MouseEvent} event
|
||||
*/
|
||||
RightClick(event){
|
||||
this.CreateContextMenu(event.target, [event.clientY, event.clientX])
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {HTMLElement} target
|
||||
* @param {string[]} pos
|
||||
*/
|
||||
async CreateContextMenu(target, pos){
|
||||
let context = ""
|
||||
const fileName = target.getAttribute("name") //TODO check for null
|
||||
const fileType = target.getAttribute("fileType")
|
||||
if (target.classList.contains("FileTileView"))
|
||||
{
|
||||
context = "FileTileView"
|
||||
} else {
|
||||
context = fileType
|
||||
}
|
||||
let path = ""
|
||||
if (fileName === null){
|
||||
path = this.curPath
|
||||
} else {
|
||||
path = `${this.curPath}/${fileName}`
|
||||
}
|
||||
const params = new URLSearchParams({context: context, path: path})
|
||||
const response = await fetch(`/app/${this.#appId}/contextMenu?` + params)
|
||||
if (response.status != 200){
|
||||
this.#wde.Alert("ERROR in Context menu TODO"); //TODO
|
||||
return
|
||||
}
|
||||
const html = await response.text()
|
||||
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].firstElementChild.remove()
|
||||
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', async (event) => {
|
||||
if (event.target.classList.contains("Row")){ //TODO add uuid id to rows to more accurate checks??
|
||||
let res = false
|
||||
switch (event.target.children[0].getAttribute("action")) {
|
||||
case "createPathLink":
|
||||
res = await WebFS.CreatePathLink(`${this.curPath}/${fileName}`, `${this.curPath}/Link to ${fileName}` )
|
||||
if (res){
|
||||
this.ReRenderDir()
|
||||
}
|
||||
break
|
||||
case "createDir":
|
||||
res = await WebFS.CreateDirectory(`${this.curPath}`)
|
||||
console.log(res)
|
||||
if (res){
|
||||
this.ReRenderDir()
|
||||
}
|
||||
break
|
||||
case "deleteFile":
|
||||
res = await WebFS.DeleteFile(`${this.curPath}/${fileName}`)
|
||||
console.log(res)
|
||||
if (res){
|
||||
this.ReRenderDir()
|
||||
}
|
||||
break
|
||||
case "getInfo":
|
||||
Finder.RenderProperites(path)
|
||||
break
|
||||
case "openAsDir":
|
||||
this.#wde.Open(`/Applications/${this.#appId}.app`,[`${this.curPath}/${fileName}`])
|
||||
break
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
overlay.remove()
|
||||
})
|
||||
overlay.addEventListener('contextmenu', (event) => {
|
||||
event.preventDefault();
|
||||
overlay.remove()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
// require("./finder.less")
|
||||
|
||||
import WDEApplication from "../../wde/application.js"
|
||||
import AbstractWebDesktopEnvironment from "../../wde/wde.js"
|
||||
import FinderWindow from "./finder-window.js"
|
||||
|
||||
export default class Finder extends WDEApplication{
|
||||
/** @deprecated */
|
||||
static AppId = "Finder"
|
||||
|
||||
/**
|
||||
* @constructor
|
||||
* @param {AbstractWebDesktopEnvironment} wde
|
||||
*/
|
||||
constructor(wde){
|
||||
super(wde, "Finder")
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string[]} args
|
||||
* @param {import("../../wde/wde.js").runContext} runContext
|
||||
*/
|
||||
async NewWindow(args, runContext){
|
||||
|
||||
let newFinder = new FinderWindow(this, super.WDE())
|
||||
await newFinder.Init(this, args, runContext)
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string[]} args
|
||||
* @param {import("../../wde/wde.js").runContext} runContext
|
||||
*/
|
||||
async NewView(args, runContext){
|
||||
// console.log(super.WDE())
|
||||
let newFinderView = new FinderWindow(this, super.WDE())
|
||||
await newFinderView.Init(this, args, runContext)
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} path
|
||||
* @returns {boolean}
|
||||
*/
|
||||
async RenderProperites(path){
|
||||
// return
|
||||
if (path == null || path ==""){
|
||||
return
|
||||
}
|
||||
const params = new URLSearchParams({
|
||||
path: path
|
||||
})
|
||||
const response = await fetch(`/app/${Finder.AppId}/renderProps?` + params)
|
||||
if (response.status != 200){
|
||||
// WebDesktopEnvironment.Alert("Error in properties render") //TODO
|
||||
return false
|
||||
}
|
||||
const html = await response.text()
|
||||
|
||||
let newWindow = super.WDE().Decorat.CreateNewWindow(Finder.AppId, 350, 500 )
|
||||
newWindow.innerHTML = html
|
||||
newWindow.querySelector("#closeWindowButton").addEventListener('click', function (params) {
|
||||
// WebDesktopEnvironment.CloseWindow(newWindow)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
.FinderContent {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
/* Auto layout */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.FinderContent .ToolBar{
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
border-bottom: 1px solid #555555;
|
||||
background-color: #EEEEEE;
|
||||
}
|
||||
|
||||
.Focused .FinderContent .ToolBar{
|
||||
border-bottom: 1px solid #000000;
|
||||
background-color: #DDDDDD;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.FinderContent .FinderFileView{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
background-color: #FFFFFF;
|
||||
|
||||
/* Auto layout */
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
padding: 0px;
|
||||
}
|
||||
|
|
@ -1,79 +0,0 @@
|
|||
@import "./wde/primitives.less";
|
||||
@import "./wde/widgets/file-view/file-view.less";
|
||||
@import "./wde/legacy-ui.less";
|
||||
@import "./wde/widgets/basic-widgets.less";
|
||||
@import "./theme.less";
|
||||
|
||||
// @font-face{
|
||||
// font-family: "Virtue";
|
||||
// src:url("/res/dev-fs/fonts/virtue.ttf");
|
||||
// }
|
||||
|
||||
/* @font-face{
|
||||
font-family: "Virtue";
|
||||
src:url("/res/dev-fs/fonts/virtue.ttf")
|
||||
} */
|
||||
|
||||
/* @media screen and (max-device-width: 2048px) and (max-device-height: 2048px) {
|
||||
html {
|
||||
zoom: 3
|
||||
}
|
||||
} */
|
||||
|
||||
.NoClick {
|
||||
pointer-events: none;
|
||||
}
|
||||
.Click {
|
||||
pointer-events: all;
|
||||
}
|
||||
*{
|
||||
font-family: Verdana, Geneva, sans-serif;
|
||||
font-size: 11px;
|
||||
font-style: normal;
|
||||
font-weight:initial;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar { /* WebKit */
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
body{
|
||||
zoom: var(--zoom);
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
|
||||
/* font: normal 14px Summer Pixel 22, "res/SummerPixel22Regular.ttf"; */
|
||||
-webkit-touch-callout: none; /* iOS Safari */
|
||||
-webkit-user-select: none; /* Safari */
|
||||
-khtml-user-select: none; /* Konqueror HTML */
|
||||
-moz-user-select: none; /* Old versions of Firefox */
|
||||
-ms-user-select: none; /* Internet Explorer/Edge */
|
||||
user-select: none; /* Non-prefixed version, currently
|
||||
supported by Chrome, Edge, Opera and Firefox */
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
#applications{
|
||||
position: static;
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
#windows-layer {
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
/* position: fixed; */
|
||||
position: static;
|
||||
}
|
||||
|
||||
#desktop-layer{
|
||||
position: fixed;
|
||||
/* margin: 0px; */
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: @col-ceil;
|
||||
}
|
||||
|
|
@ -1,339 +0,0 @@
|
|||
import AbstractWebDesktopEnvironment from "../../wde/wde.js"
|
||||
import Finder from "./finder.js"
|
||||
|
||||
|
||||
export default class FinderWindow{
|
||||
#appId = "Finder" //FIXME
|
||||
curPath = ""
|
||||
fileView = undefined
|
||||
windowElem = undefined
|
||||
/** @type {Finder} */
|
||||
#finder
|
||||
/** @type {AbstractWebDesktopEnvironment} */
|
||||
#wde
|
||||
|
||||
/**
|
||||
* @constructor
|
||||
* @param {Finder}
|
||||
* @param {AbstractWebDesktopEnvironment} wde
|
||||
*/
|
||||
constructor(finder, wde){
|
||||
this.#finder = finder
|
||||
this.#wde = wde
|
||||
}
|
||||
/**
|
||||
* @param {Finder} finder
|
||||
* @param {*} args
|
||||
* @param {import("../../wde/wde.js").runContext} runContext
|
||||
* @returns
|
||||
*/
|
||||
async Init(finder, args, runContext){
|
||||
this.#finder = finder
|
||||
if (runContext.isMobile){
|
||||
console.log("Mobile Finder!")
|
||||
this.CreateMobileView(args, runContext)
|
||||
return
|
||||
}
|
||||
if (args[1] == "--desktop"){
|
||||
let desktopNode = document.body.querySelector(`#${args[2]}`)
|
||||
if (desktopNode == null){
|
||||
this.#wde.Alert("Desktop node not found")
|
||||
return
|
||||
}
|
||||
|
||||
const params = new URLSearchParams({
|
||||
path: args[0]
|
||||
})
|
||||
const response = await fetch(`/app/${this.#appId}/renderDesktop?` + params,
|
||||
{
|
||||
method: "POST",
|
||||
body: JSON.stringify(runContext)
|
||||
})
|
||||
if (response.status != 200){
|
||||
console.log(response.status)
|
||||
// this.#wde.Alert("Error in render desktop") //TODO
|
||||
return
|
||||
}
|
||||
const html = await response.text()
|
||||
desktopNode.innerHTML = html
|
||||
|
||||
// console.log(this.#wde)
|
||||
|
||||
this.fileView = new this.#wde.FileView(
|
||||
desktopNode.querySelector(".FileTileView"), (event) =>{this.Click(event)},
|
||||
(event) => { this.RightClick(event) },
|
||||
(event, draggedElem) => { this.DropEvent(event, draggedElem)},
|
||||
() => { this.ReRenderDir() }
|
||||
)
|
||||
this.RenderDir(args[0])
|
||||
return
|
||||
}
|
||||
const params = new URLSearchParams({isMobile: false}) //FIXME
|
||||
const response = await fetch(`/app/${this.#appId}/render?` + params,
|
||||
{
|
||||
method: "POST",
|
||||
body: JSON.stringify(runContext)
|
||||
})
|
||||
if (response.status != 200){
|
||||
const error = await response.json()
|
||||
this.#wde.Alert(error.message)
|
||||
return
|
||||
}
|
||||
const html = await response.text()
|
||||
|
||||
let newWindow = this.#wde.Decorat.CreateNewWindow(this.#appId, 500, 350 )
|
||||
newWindow.innerHTML = html
|
||||
|
||||
// console.log(this.#wde)
|
||||
|
||||
this.fileView = new this.#wde.FileView(
|
||||
newWindow.querySelector(".FileTileView"),
|
||||
(event) => { this.Click(event) },
|
||||
(event) => { this.RightClick(event) },
|
||||
(event, draggedElem) => { this.DropEvent(event, draggedElem)},
|
||||
() => { this.ReRenderDir() }
|
||||
)
|
||||
|
||||
newWindow.querySelector("#closeWindowButton").addEventListener('click', () => {
|
||||
this.#wde.Decorat.CloseWindow(newWindow)
|
||||
})
|
||||
|
||||
newWindow.querySelector("#RootButton").addEventListener('click', () =>{
|
||||
this.RenderDir('/')
|
||||
})
|
||||
|
||||
newWindow.querySelector("#HomeButton").addEventListener('click', () =>{
|
||||
this.RenderDir('/home/user')
|
||||
})
|
||||
|
||||
let scrollBar = new this.#wde.ScrollBar(newWindow.querySelector(".ScrollbarPlace"), newWindow.querySelector(".FileTileView"))
|
||||
|
||||
this.windowElem = newWindow
|
||||
this.RenderDir(args[0])
|
||||
}
|
||||
|
||||
CreateDesktopWindow(){
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {*} args
|
||||
* @param {import("../../wde/wde-desktop").runContext} runContext
|
||||
* @returns
|
||||
*/
|
||||
async CreateMobileView(args, runContext){
|
||||
|
||||
const params = new URLSearchParams({isMobile: false}) //FIXME
|
||||
const response = await fetch(`/app/${this.#appId}/render?` + params,
|
||||
{
|
||||
method: "POST",
|
||||
body: JSON.stringify(runContext)
|
||||
})
|
||||
if (response.status != 200){
|
||||
const error = await response.json()
|
||||
this.#wde.Alert(error.message)
|
||||
return
|
||||
}
|
||||
const html = await response.text()
|
||||
console.log(this.#wde)
|
||||
let newView = this.#wde.Decorat.CreateNewView(this.#appId,)
|
||||
newView.innerHTML = html
|
||||
}
|
||||
/**
|
||||
* @param {string} path
|
||||
*/
|
||||
RenderDir(path){
|
||||
this.curPath = path
|
||||
this.fileView.OpenFolder(path)
|
||||
}
|
||||
|
||||
ReRenderDir(){
|
||||
this.RenderDir(this.curPath)
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {DragEvent} event
|
||||
* @param {HTMLElement} draggedElem
|
||||
*/
|
||||
async DropEvent(event){
|
||||
// console.log(event.dataTransfer.getData("dropType"))
|
||||
if (event.dataTransfer.getData("dropType") == "move"){
|
||||
const sourcePath= event.dataTransfer.getData("filePath")
|
||||
const targetPath = this.curPath + "/" + event.dataTransfer.getData("fileName")
|
||||
const res = await WebFS.MoveFile(sourcePath, targetPath)
|
||||
if (res){
|
||||
this.ReRenderDir()
|
||||
} else {
|
||||
this.#wde.Alert("UWAGA TODO MOVE FILE ERROR") //TODO
|
||||
}
|
||||
} else {
|
||||
console.log(event, this.curPath)
|
||||
let files = event.dataTransfer.files
|
||||
for (let i = 0; i < files.length; i++) {
|
||||
const file = files[i];
|
||||
console.log("file:" + file.name)
|
||||
|
||||
const res = await WebFS.UploadFile(file, this.curPath)
|
||||
if (res){
|
||||
this.ReRenderDir()
|
||||
}
|
||||
}
|
||||
|
||||
const params = new URLSearchParams({
|
||||
parentPath: this.curPath,
|
||||
})
|
||||
const response = await fetch('/fs/upload/?' + params,
|
||||
{
|
||||
method: "POST", //TODO Change to PUT?
|
||||
body: formData
|
||||
})
|
||||
if (response.status != 200){
|
||||
this.#wde.Alert("ERROR IN UPLOADING FILE")//TODO
|
||||
} else {
|
||||
this.ReRenderDir()
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {MouseEvent} event
|
||||
*/
|
||||
Click(event){
|
||||
this.OpenFile(this.curPath, event.target.getAttribute("name"), event.target.getAttribute("filetype"))
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} filePath
|
||||
*/
|
||||
async OpenFile(parentPath, fileName, fileType){
|
||||
// console.log(parentPath, fileName, fileType)
|
||||
// const splittedPath = filePath.split("/")
|
||||
// const fileName = splittedPath[splittedPath.length - 1]
|
||||
const fileExtension = fileName.split(".")[fileName.split(".").length - 1] //FIXME
|
||||
|
||||
switch (true) {
|
||||
case fileType == "objectlink":
|
||||
this.#wde.Alert("Links not supported yet")
|
||||
break
|
||||
case fileType == "pathlink":
|
||||
let res = await WebFS.ReadPathLink(`${parentPath}/${fileName}`)
|
||||
console.log(res)
|
||||
this.OpenFile(res.parentPath, res.name, res.filetype)
|
||||
break
|
||||
case fileExtension == "app":
|
||||
this.#wde.Open(`${parentPath}/${fileName}`, [])
|
||||
break
|
||||
case fileExtension == "blog":
|
||||
this.#wde.Open(`/Applications/BlogViewer.app`, [`${parentPath}/${fileName}`])
|
||||
break
|
||||
case fileType == "directory":
|
||||
this.#wde.Open(`/Applications/Finder.app`, [`${parentPath}/${fileName}`])
|
||||
break
|
||||
case fileExtension == "blog":
|
||||
this.#wde.Open("/Applications/BlogViewer.app", [`${parentPath}/${fileName}`])
|
||||
break
|
||||
case fileExtension == "jpeg" | fileExtension == "png":
|
||||
this.#wde.Open("img-viewer", [`${parentPath}/${fileName}`])
|
||||
break;
|
||||
default:
|
||||
this.#wde.Alert("Unsupported file type")
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {MouseEvent} event
|
||||
*/
|
||||
RightClick(event){
|
||||
this.CreateContextMenu(event.target, [event.clientY, event.clientX])
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {HTMLElement} target
|
||||
* @param {string[]} pos
|
||||
*/
|
||||
async CreateContextMenu(target, pos){
|
||||
let context = ""
|
||||
const fileName = target.getAttribute("name") //TODO check for null
|
||||
const fileType = target.getAttribute("fileType")
|
||||
if (target.classList.contains("FileTileView"))
|
||||
{
|
||||
context = "FileTileView"
|
||||
} else {
|
||||
context = fileType
|
||||
}
|
||||
let path = ""
|
||||
if (fileName === null){
|
||||
path = this.curPath
|
||||
} else {
|
||||
path = `${this.curPath}/${fileName}`
|
||||
}
|
||||
const params = new URLSearchParams({context: context, path: path})
|
||||
const response = await fetch(`/app/${this.#appId}/contextMenu?` + params)
|
||||
if (response.status != 200){
|
||||
this.#wde.Alert("ERROR in Context menu TODO"); //TODO
|
||||
return
|
||||
}
|
||||
const html = await response.text()
|
||||
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].firstElementChild.remove()
|
||||
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', async (event) => {
|
||||
if (event.target.classList.contains("Row")){ //TODO add uuid id to rows to more accurate checks??
|
||||
let res = false
|
||||
switch (event.target.children[0].getAttribute("action")) {
|
||||
case "createPathLink":
|
||||
res = await WebFS.CreatePathLink(`${this.curPath}/${fileName}`, `${this.curPath}/Link to ${fileName}` )
|
||||
if (res){
|
||||
this.ReRenderDir()
|
||||
}
|
||||
break
|
||||
case "createDir":
|
||||
res = await WebFS.CreateDirectory(`${this.curPath}`)
|
||||
console.log(res)
|
||||
if (res){
|
||||
this.ReRenderDir()
|
||||
}
|
||||
break
|
||||
case "deleteFile":
|
||||
res = await WebFS.DeleteFile(`${this.curPath}/${fileName}`)
|
||||
console.log(res)
|
||||
if (res){
|
||||
this.ReRenderDir()
|
||||
}
|
||||
break
|
||||
case "getInfo":
|
||||
Finder.RenderProperites(path)
|
||||
break
|
||||
case "openAsDir":
|
||||
this.#wde.Open(`/Applications/${this.#appId}.app`,[`${this.curPath}/${fileName}`])
|
||||
break
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
overlay.remove()
|
||||
})
|
||||
overlay.addEventListener('contextmenu', (event) => {
|
||||
event.preventDefault();
|
||||
overlay.remove()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
// require("./finder.less")
|
||||
|
||||
import WDEApplication from "../../wde/application.js"
|
||||
import AbstractWebDesktopEnvironment from "../../wde/wde.js"
|
||||
import FinderWindow from "./finder-window.js"
|
||||
|
||||
export default class Finder extends WDEApplication{
|
||||
/** @deprecated */
|
||||
static AppId = "Finder"
|
||||
|
||||
/**
|
||||
* @constructor
|
||||
* @param {AbstractWebDesktopEnvironment} wde
|
||||
*/
|
||||
constructor(wde){
|
||||
super(wde, "Finder")
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string[]} args
|
||||
* @param {import("../../wde/wde.js").runContext} runContext
|
||||
*/
|
||||
async NewWindow(args, runContext){
|
||||
|
||||
let newFinder = new FinderWindow(this, super.WDE())
|
||||
await newFinder.Init(this, args, runContext)
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string[]} args
|
||||
* @param {import("../../wde/wde.js").runContext} runContext
|
||||
*/
|
||||
async NewView(args, runContext){
|
||||
// console.log(super.WDE())
|
||||
let newFinderView = new FinderWindow(this, super.WDE())
|
||||
await newFinderView.Init(this, args, runContext)
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} path
|
||||
* @returns {boolean}
|
||||
*/
|
||||
async RenderProperites(path){
|
||||
// return
|
||||
if (path == null || path ==""){
|
||||
return
|
||||
}
|
||||
const params = new URLSearchParams({
|
||||
path: path
|
||||
})
|
||||
const response = await fetch(`/app/${Finder.AppId}/renderProps?` + params)
|
||||
if (response.status != 200){
|
||||
// WebDesktopEnvironment.Alert("Error in properties render") //TODO
|
||||
return false
|
||||
}
|
||||
const html = await response.text()
|
||||
|
||||
let newWindow = super.WDE().Decorat.CreateNewWindow(Finder.AppId, 350, 500 )
|
||||
newWindow.innerHTML = html
|
||||
newWindow.querySelector("#closeWindowButton").addEventListener('click', function (params) {
|
||||
// WebDesktopEnvironment.CloseWindow(newWindow)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
.FinderContent {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
/* Auto layout */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.FinderContent .ToolBar{
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
border-bottom: 1px solid #555555;
|
||||
background-color: #EEEEEE;
|
||||
}
|
||||
|
||||
.Focused .FinderContent .ToolBar{
|
||||
border-bottom: 1px solid #000000;
|
||||
background-color: #DDDDDD;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.FinderContent .FinderFileView{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
background-color: #FFFFFF;
|
||||
|
||||
/* Auto layout */
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
padding: 0px;
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
export default class Kek{
|
||||
|
||||
}
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
@import "./wde/sunboard/sunboard-mobile.less";
|
||||
|
||||
body{
|
||||
zoom: 2;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
|
||||
/* font: normal 14px Summer Pixel 22, "res/SummerPixel22Regular.ttf"; */
|
||||
-webkit-touch-callout: none; /* iOS Safari */
|
||||
-webkit-user-select: none; /* Safari */
|
||||
-khtml-user-select: none; /* Konqueror HTML */
|
||||
-moz-user-select: none; /* Old versions of Firefox */
|
||||
-ms-user-select: none; /* Internet Explorer/Edge */
|
||||
user-select: none; /* Non-prefixed version, currently
|
||||
supported by Chrome, Edge, Opera and Firefox */
|
||||
touch-action: manipulation;
|
||||
|
||||
/* Auto layout */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
#mobile-app-views{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// padding: 64px;
|
||||
// border-radius: 50px;
|
||||
// overflow:hidden
|
||||
// background-color: @col-ceil;
|
||||
}
|
||||
|
||||
#controls-bar{
|
||||
&:extend(.WdePrimitives.AdjectiveElement);
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
background-color: @col-argent;
|
||||
|
||||
/* Auto layout */
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.mobile-app-view{
|
||||
// background-color: burlywood;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// position: absolute;
|
||||
}
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
@col-ceil: #9999CC;
|
||||
@col-argent: #C0C0C0;
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
import AbstractWebDesktopEnvironment from "./wde.js"
|
||||
|
||||
export default class WDEApplication{
|
||||
/** @type {AbstractWebDesktopEnvironment} */
|
||||
#wde
|
||||
/** @type {string} */
|
||||
AppId
|
||||
|
||||
/**
|
||||
* @constructor
|
||||
* @param {AbstractWebDesktopEnvironment} wde
|
||||
*/
|
||||
constructor(wde, AppId){
|
||||
this.#wde = wde
|
||||
// console.log(wde)
|
||||
this.AppId = AppId
|
||||
}
|
||||
|
||||
/** @returns {AbstractWebDesktopEnvironment} */
|
||||
WDE(){
|
||||
return this.#wde
|
||||
}
|
||||
|
||||
async NewWindow(){
|
||||
|
||||
}
|
||||
|
||||
/** @returns {Element} */
|
||||
async NewView(){
|
||||
return this.#wde.Decorat.CreateNewView(this.AppId)
|
||||
}
|
||||
}
|
||||
|
|
@ -1,104 +0,0 @@
|
|||
export default class DesktopDecorat{
|
||||
/** @type {Element} */
|
||||
#windowsLayer
|
||||
|
||||
constructor(){
|
||||
this.windowLayer = document.body.querySelector('#windows-layer')
|
||||
// this.#windowsLayer = document.body.querySelector('#windows-layer')
|
||||
this.#windowsLayer = document.body.querySelector('#windows-layer')
|
||||
let startDrag = (event) => {
|
||||
let window = event.target.closest('.WindowFrame')
|
||||
this.bringWindowToFront(window)
|
||||
if (event.target.classList.contains("DragArea")){
|
||||
let xPosInit = event.offsetX
|
||||
let yPosInit = event.offsetY
|
||||
let dragWindow = function(event){
|
||||
window.style.left = `${event.clientX - xPosInit}px`
|
||||
window.style.top = `${event.clientY - yPosInit}px`
|
||||
}
|
||||
let stopDrag = function(){
|
||||
removeEventListener('mousemove', dragWindow)
|
||||
removeEventListener('mouseup', stopDrag)
|
||||
}
|
||||
|
||||
addEventListener('mousemove', dragWindow)
|
||||
addEventListener('mouseup', stopDrag)
|
||||
}
|
||||
}
|
||||
this.#windowsLayer.addEventListener('mousedown', startDrag)
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* @param {HTMLElement} window
|
||||
*/
|
||||
bringWindowToFront(window){ //FIXME
|
||||
let previousWindow = this.#windowsLayer.lastChild
|
||||
if (window == null || window == undefined){
|
||||
return
|
||||
}
|
||||
if (window != previousWindow){
|
||||
this.#windowsLayer.insertBefore(window, previousWindow.nextSibling)
|
||||
previousWindow.classList.remove("Focused")
|
||||
window.classList.add("Focused")
|
||||
} else {
|
||||
window.classList.add("Focused")
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} appId
|
||||
* @param {number} width
|
||||
* @param {number} height
|
||||
* @returns {HTMLElement}
|
||||
*/
|
||||
CreateNewWindow(appId, width, height) {
|
||||
let newWindow = document.createElement("div")
|
||||
newWindow.setAttribute('appid', appId)
|
||||
|
||||
newWindow.setAttribute("class", "WindowFrame ConvexElement")
|
||||
newWindow.setAttribute("windowId", this.#makeid(4)) //TODO:
|
||||
|
||||
newWindow.style.width = width.toString() + "px"
|
||||
newWindow.style.height = height.toString() + "px"
|
||||
|
||||
document.body.querySelector('#windows-layer').appendChild(newWindow)
|
||||
return newWindow
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {HTMLElement} window
|
||||
*/
|
||||
CloseWindow(window) {
|
||||
window.remove()
|
||||
}
|
||||
|
||||
CloseFocusedWindow() {
|
||||
if (document.body.querySelector('#windows-layer').childElementCount > 1){
|
||||
document.body.querySelector('#windows-layer').lastElementChild.remove()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
static ChangeURL(appWindow){
|
||||
let appId = appWindow.getAttribute('appid')
|
||||
window.history.replaceState(null, "", `/${appId}/`);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {num} length
|
||||
*/
|
||||
#makeid(length) {
|
||||
let result = '';
|
||||
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
|
||||
const charactersLength = characters.length;
|
||||
let counter = 0;
|
||||
while (counter < length) {
|
||||
result += characters.charAt(Math.floor(Math.random() * charactersLength));
|
||||
counter += 1;
|
||||
}
|
||||
return result;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
export default class MobileDecorat {
|
||||
/** @type {Element} */
|
||||
#applicationsNode
|
||||
constructor(){
|
||||
this.#applicationsNode = document.body.querySelector("#mobile-app-views") //TODO validate
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} appId
|
||||
* @returns {Element}
|
||||
*/
|
||||
CreateNewView(appId){
|
||||
let newView = document.createElement("div")
|
||||
newView.setAttribute("class", "mobile-app-view")
|
||||
newView.setAttribute("appId", appId)
|
||||
this.#applicationsNode.appendChild(newView)
|
||||
return newView
|
||||
}
|
||||
Open(){
|
||||
|
||||
}
|
||||
BackAction(){
|
||||
// console.log(this.#applicationsNode.childNodes.length)
|
||||
if (this.#applicationsNode.childNodes.length <= 1) return
|
||||
this.#applicationsNode.lastChild.remove()
|
||||
}
|
||||
}
|
||||
|
|
@ -1,232 +0,0 @@
|
|||
.WindowFrame {
|
||||
/* Auto layout */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 4px;
|
||||
padding-top: 2px;
|
||||
padding-right: 6px;
|
||||
gap: 4px;
|
||||
|
||||
position: absolute;
|
||||
|
||||
background: #DDDDDD;
|
||||
border: 1px solid #555555;
|
||||
|
||||
|
||||
/* Inside auto layout */
|
||||
flex: none;
|
||||
order: 1;
|
||||
align-self: stretch;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
/* TODO Add shadows to windows */
|
||||
.WindowFrame.Focused{
|
||||
border: 1px solid #000000;
|
||||
background-color: #CCCCCC;
|
||||
}
|
||||
|
||||
.WindowFrameShadow {
|
||||
box-shadow: 2px 2px 0px #555555;
|
||||
}
|
||||
|
||||
/* FIXME Not work on context menu */
|
||||
.WindowFrameShadow.Focused {
|
||||
box-shadow: 2px 2px 0px #000000;
|
||||
}
|
||||
|
||||
.ConvexElement.Focused {
|
||||
box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.25),
|
||||
inset -1px -1px 0px rgba(0, 0, 0, 0.27),
|
||||
inset 1px 1px 0px #FFFFFF;
|
||||
}
|
||||
|
||||
.AdjectiveElement {
|
||||
border: 1px solid #555555;
|
||||
}
|
||||
|
||||
.Focused .AdjectiveElement {
|
||||
border: 1px solid #000000;
|
||||
box-shadow: -1px -1px 0px rgba(0, 0, 0, 0.25),
|
||||
1px 1px 0px #FFFFFF;
|
||||
/* inset -1px -1px 0px rgba(0, 0, 0, 0.27), */
|
||||
/* inset 1px 1px 0px #FFFFFF;*/
|
||||
}
|
||||
|
||||
.AdjectiveHorizontalLine {
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.25);
|
||||
border-bottom: 1px solid #FFFFFF;
|
||||
width: 100%;
|
||||
height: 0px;
|
||||
}
|
||||
|
||||
.AdjectiveHorizontalLine:last-child {
|
||||
height: 0%;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
|
||||
.WindowFrame .TitleBar {
|
||||
width: 100%;
|
||||
height: 13px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
padding: 0px;
|
||||
|
||||
|
||||
/* Inside auto layout */
|
||||
flex: none;
|
||||
order: 0;
|
||||
align-self: stretch;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.WindowFrame .TitleBar .Lable {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
/* font-size: 13px; */
|
||||
color:#777777;
|
||||
pointer-events: none;
|
||||
white-space: nowrap;
|
||||
|
||||
font-family: "Virtue";
|
||||
letter-spacing: 0.35px;
|
||||
}
|
||||
|
||||
.WindowFrame.Focused .TitleBar .Lable {
|
||||
color:#000000;
|
||||
}
|
||||
|
||||
|
||||
.WindowFrame .TitleBar .Button {
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
padding: 0%;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
visibility: hidden;
|
||||
|
||||
background: linear-gradient(135deg, #999999 18.18%, #FFFFFF 81.82%);
|
||||
border: 1px solid #222222;
|
||||
box-shadow: 0.5px 0.5px 0px 0.5px #FFFFFF,
|
||||
-0.5px -0.5px 0px 0.5px rgba(0, 0, 0, 0.25),
|
||||
inset 1px 1px 0px rgba(255, 255, 255, 0.5),
|
||||
inset -1px -1px 0px rgba(0, 0, 0, 0.27);
|
||||
/* Inside auto layout */
|
||||
flex: none;
|
||||
order: 0;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.WindowFrame.Focused .TitleBar .Button {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.WindowFrame .TitleBar .Button:active {
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
/* Green */
|
||||
box-shadow: 0.5px 0.5px 0px 0.5px #FFFFFF,
|
||||
-0.5px -0.5px 0px 0.5px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.Focused .VisualDragArea {
|
||||
pointer-events: none;
|
||||
width: 100%;
|
||||
height: 11px;
|
||||
background: linear-gradient(transparent 0%, white 0%, white 50%, transparent 50%);
|
||||
background-size: 2px 2px;
|
||||
filter: drop-shadow(1px 1px 0px #777777);
|
||||
}
|
||||
|
||||
.MobileContentBorder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #DDDDDD;
|
||||
/* border: 1px solid #000000; */
|
||||
|
||||
/* box-shadow: -1px -1px 0px rgba(0, 0, 0, 0.25),
|
||||
1px 1px 0px #FFFFFF,
|
||||
inset -1px -1px 0px rgba(0, 0, 0, 0.27),
|
||||
inset 1px 1px 0px #FFFFFF; */
|
||||
|
||||
overflow: hidden;
|
||||
overflow-x: hidden;
|
||||
|
||||
/* Auto layout */
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.MobileApplicationWindow {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* Auto layout */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 4px;
|
||||
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.MobileWindowFrameBottomBar {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
/*
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 5px;
|
||||
padding: 0px; */
|
||||
|
||||
/* Inside auto layout */
|
||||
flex: none;
|
||||
order: 0;
|
||||
align-self: stretch;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.MobileWindowFrameBottomBarButton {
|
||||
min-width: 11px;
|
||||
width: auto;
|
||||
height: 15px;
|
||||
padding: 0px 4px 0px 4px;
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
|
||||
background: linear-gradient(135deg, #999999 18.18%, #FFFFFF 81.82%);
|
||||
border: 1px solid #222222;
|
||||
box-shadow: 0.5px 0.5px 0px 0.5px #FFFFFF,
|
||||
-0.5px -0.5px 0px 0.5px rgba(0, 0, 0, 0.25),
|
||||
inset 1px 1px 0px rgba(255, 255, 255, 0.5),
|
||||
inset -1px -1px 0px rgba(0, 0, 0, 0.27);
|
||||
|
||||
/* Inside auto layout */
|
||||
flex: none;
|
||||
order: 0;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.MobileWindowFrameBottomBar .MobileLable {
|
||||
position: absolute;
|
||||
/* top:1px; */
|
||||
/* font-size: 13px; */
|
||||
left: 50%;
|
||||
pointer-events: none;
|
||||
white-space: nowrap;
|
||||
|
||||
font-family: "Virtue";
|
||||
letter-spacing: 0.35px;
|
||||
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
.WdePrimitives.AdjectiveElement {
|
||||
border: 1px solid #555555;
|
||||
}
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
export default class WdeScrollBar{
|
||||
/**
|
||||
* @param {HTMLElement} scrollBarContainer
|
||||
* @param {HTMLElement} content
|
||||
*/
|
||||
constructor(scrollBarContainer, content){
|
||||
let nonNativeScroll = false
|
||||
// console.log(scrollBarContainer, content)
|
||||
// let handler = scrollBarContainer.children[0]
|
||||
//TODO On scroll move focus on window?
|
||||
let handler = scrollBarContainer.querySelector(".ScrollBarScrollElement") //TODO Refactor classes
|
||||
// console.log(handler)
|
||||
|
||||
handler.style.height = (content.clientHeight /content.scrollHeight)* handler.parentElement.clientHeight + 'px'
|
||||
|
||||
let max = handler.parentElement.clientHeight - handler.clientHeight
|
||||
let yPosInit = 0
|
||||
|
||||
handler.addEventListener('mousedown', (event) => {
|
||||
nonNativeScroll = true
|
||||
yPosInit = event.clientY - Number(handler.style.top.replace('px','' ))
|
||||
|
||||
document.addEventListener('mousemove', drag);
|
||||
document.addEventListener('mouseup', stop)
|
||||
})
|
||||
|
||||
content.addEventListener('scroll', (event) =>{
|
||||
if (!this.nonNativeScroll){
|
||||
let handlerPathLength = handler.parentElement.clientHeight - handler.clientHeight //TODO recalculate only on resize event
|
||||
let coefficient = (content.scrollHeight - content.clientHeight) /handlerPathLength
|
||||
handler.style.top = content.scrollTop/coefficient + 'px'
|
||||
}
|
||||
})
|
||||
|
||||
function drag() {
|
||||
// console.log(event.clientY - yPosInit, Number(handler.style.top.replace('px','' )))
|
||||
let pos = event.clientY - yPosInit
|
||||
let clampPos = Math.min(Math.max(pos, 0), max)
|
||||
handler.style.top = clampPos + "px";
|
||||
|
||||
let handlerPathLength = handler.parentElement.clientHeight - handler.clientHeight //TODO recalculate only on resize event
|
||||
let coefficient = (content.scrollHeight - content.clientHeight) /handlerPathLength
|
||||
// console.log(clampPos, coefficient, content.clientHeight, clampPos* coefficient)
|
||||
|
||||
content.scrollTop = clampPos* coefficient
|
||||
}
|
||||
function stop() {
|
||||
// console.log("stop")
|
||||
document.removeEventListener('mousemove', drag);
|
||||
document.removeEventListener('mouseup', stop)
|
||||
nonNativeScroll = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,110 +0,0 @@
|
|||
.scroller {
|
||||
overflow-y: scroll;
|
||||
scrollbar-color: #0A4C95 #C2D2E4;
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
.scroll_content {
|
||||
position: relative;
|
||||
width: 400px;
|
||||
height: 414px;
|
||||
top: -17px;
|
||||
padding: 20px 10px 20px 10px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.ScrollbarPlace{
|
||||
overflow: hidden;
|
||||
|
||||
border-left: 1px solid #555555;
|
||||
width: 14px;
|
||||
height: 100%;
|
||||
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
width: 14px;
|
||||
height: 100%;
|
||||
|
||||
background-color: #EEEEEE;
|
||||
|
||||
|
||||
/* Inside auto layout */
|
||||
flex: none;
|
||||
order: 0;
|
||||
align-self: stretch;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.Focused .ScrollbarPlace{
|
||||
border-left: 1px solid #000000;
|
||||
background-color: #AAAAAA;
|
||||
box-shadow: inset -1px 0px 0px rgba(255, 255, 255, 0.29),
|
||||
inset -2px 0px 0px rgba(255, 255, 255, 0.19),
|
||||
inset 1px 1px 0px rgba(0, 0, 0, 0.14),
|
||||
inset 2px 2px 0px rgba(0, 0, 0, 0.19);
|
||||
}
|
||||
|
||||
.ScrollBarScrollElement{
|
||||
position: relative;
|
||||
visibility: hidden;
|
||||
width: 14px;
|
||||
height: 31px;
|
||||
|
||||
background: #9999FF;
|
||||
|
||||
box-shadow: 0px -1px 0px #000000,
|
||||
0px 1px 0px #000000,
|
||||
0px 2px 0px rgba(0, 0, 0, 0.13),
|
||||
0px 3px 0px rgba(0, 0, 0, 0.19),
|
||||
inset 0px 1px 0px rgba(255, 255, 255, 0.5),
|
||||
inset 1px 0px 0px rgba(255, 255, 255, 0.5),
|
||||
inset -1px -1px 0px rgba(102, 102, 204, 0.91);
|
||||
|
||||
/* Auto layout */
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
gap: 5px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.Focused .ScrollBarScrollElement{
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.ScrollBarScrollElementDrag{
|
||||
pointer-events: none;
|
||||
/* background-color: #0A4C95; */
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
margin-left: -1px;
|
||||
|
||||
background: linear-gradient(transparent 0%,#CCCCFF 0%, #CCCCFF 50%, transparent 50%);
|
||||
background-size: 2px 2px;
|
||||
|
||||
/* TODO white pixels in rows start */
|
||||
filter: drop-shadow(1px 1px 0px #333399);
|
||||
}
|
||||
|
||||
/* TODO to wde css */
|
||||
.ScrollContent {
|
||||
/* width: 100%;
|
||||
height: 100%; */
|
||||
overflow: scroll;
|
||||
overflow-x: hidden;
|
||||
scrollbar-width: none; /* Firefox */
|
||||
-ms-overflow-style: none; /* Internet Explorer 10+ */
|
||||
|
||||
/* Auto layout */
|
||||
/* display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
padding: 0px; */
|
||||
}
|
||||
|
||||
.ScrollContent::-webkit-scrollbar { /* WebKit */
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
import MobileWebDesktopEnvironment from "../wde-mobile.js"
|
||||
|
||||
export default class MobileDesktop{
|
||||
/**@type {Element} */
|
||||
#icons
|
||||
/** @type {MobileWebDesktopEnvironment} */
|
||||
#wde
|
||||
constructor(wde){
|
||||
this.#wde = wde
|
||||
this.load()
|
||||
}
|
||||
|
||||
async load(){
|
||||
let view = this.#createDesktopView()
|
||||
}
|
||||
|
||||
async #createDesktopView(){
|
||||
let view = await this.#wde.Decorat.CreateNewView("Sunboard") //FIXME
|
||||
|
||||
const params = new URLSearchParams({
|
||||
// path: args[0] //FIXME
|
||||
path: "/" //FIXME
|
||||
})
|
||||
const response = await fetch(`/app/Sunboard/render?` + params,
|
||||
{
|
||||
method: "POST",
|
||||
// body: JSON.stringify(runContext)
|
||||
})
|
||||
if (response.status != 200){
|
||||
console.log(response.status)
|
||||
return
|
||||
}
|
||||
const html = await response.text()
|
||||
view.innerHTML = html
|
||||
|
||||
let iconsList = view.querySelectorAll(".app-icon")
|
||||
iconsList.forEach(element => {
|
||||
let appId = element.getAttribute('appId')
|
||||
element.addEventListener('click', () => {
|
||||
// console.log(appId)
|
||||
// this.#wde.Decorat.CreateNewView(appId)
|
||||
this.#wde.Open("/Applications/Finder.app", [""], "")
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
async createFileView(){
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,61 +0,0 @@
|
|||
@import "../../theme.less";
|
||||
@import "../primitives.less";
|
||||
|
||||
#mobile-sunboard{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
/* Auto layout */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
#icons{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: @col-ceil;
|
||||
}
|
||||
|
||||
// #down-bar{
|
||||
// &:extend(.WdePrimitives.AdjectiveElement);
|
||||
// width: 100%;
|
||||
// height: 150px;
|
||||
// background-color: @col-argent;
|
||||
// }
|
||||
|
||||
.apps-list{
|
||||
/* Auto layout */
|
||||
display: flex;
|
||||
padding: 64px 32px;
|
||||
align-items: flex-start;
|
||||
align-content: flex-start;
|
||||
gap: 103px 18px;
|
||||
flex: 1 0 0;
|
||||
align-self: stretch;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.app-icon{
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
|
||||
/* Auto layout */
|
||||
display: flex;
|
||||
padding: 4px 8px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.app-icon .icon{
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background-color: beige;
|
||||
}
|
||||
|
||||
.app-icon .lable{
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -1,173 +0,0 @@
|
|||
import DesktopDecorat from "./decorat/desktop-decorat.js";
|
||||
import WDEScrollBar from "./scrollbar/scrollbar.js";
|
||||
import WebFS from "../web-fs/web-fs.js";
|
||||
import WDEApplication from "./application.js";
|
||||
import WDEFileView from "./widgets/file-view/file-view.js";
|
||||
import AbstractWebDesktopEnvironment from "./wde.js";
|
||||
|
||||
// import DesktopSunBoard from "./sunboard/sunboard-desktop.js";
|
||||
export default class WebDesktopEnvironment extends AbstractWebDesktopEnvironment{
|
||||
/** @type {string} */
|
||||
test = ""
|
||||
/** @type {WDEFileView} */
|
||||
FileView = WDEFileView
|
||||
/** @type {WDEScrollBar} */
|
||||
ScrollBar = WDEScrollBar
|
||||
/**@type {DesktopDecorat} */
|
||||
Decorat
|
||||
/** @type {Object<string, WDEApplication>} */
|
||||
static Applications = {};
|
||||
/** Deprecated */
|
||||
static isMobile = false
|
||||
// static decorat
|
||||
static webFs
|
||||
|
||||
constructor(){
|
||||
super()
|
||||
super._SetWDE(this)
|
||||
document.body.style.setProperty('--zoom', 1)
|
||||
this.Decorat = new DesktopDecorat()
|
||||
|
||||
WebDesktopEnvironment.webFs = new WebFS()
|
||||
this.FileView = WDEFileView
|
||||
this.loadWDE()
|
||||
// this.#devLoadSunboard()
|
||||
}
|
||||
|
||||
async loadWDE(){
|
||||
let autoStart = document.body.querySelector("wde-autostart")
|
||||
if (autoStart == null){
|
||||
WebDesktopEnvironment.Alert("Error in loading DE")
|
||||
return
|
||||
}
|
||||
for (const child of autoStart.children) {
|
||||
if (child.nodeName != "APP") continue
|
||||
let appPath = child.getAttribute("app-path")
|
||||
if (appPath == null) continue
|
||||
|
||||
let args = []
|
||||
let argsRaw = child.querySelector("args")
|
||||
if (argsRaw == null) continue
|
||||
|
||||
for (const argRaw of argsRaw.children) {
|
||||
let arg = argRaw.getAttribute("string")
|
||||
if (arg == null) continue
|
||||
args.push(arg)
|
||||
}
|
||||
|
||||
// console.log(appPath, args)
|
||||
await this.Open(appPath, args)
|
||||
}
|
||||
autoStart.remove()
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} appPath
|
||||
* @param {string[]} args
|
||||
* @param {string} runPath
|
||||
*/
|
||||
async Open(appPath, args, runPath){
|
||||
const runContext = {
|
||||
isMobile: false,
|
||||
bundlePath: appPath,
|
||||
runPath: runPath
|
||||
}
|
||||
|
||||
super._Open(appPath, args, runPath, (appManifest) =>{
|
||||
super._GetApp(appManifest.appId).NewWindow(args, runContext)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} appManifest
|
||||
* @param {function} onload callback after script loading
|
||||
*/
|
||||
static async load2(appManifest, onload){
|
||||
// import(window.location.origin + appManifest.js[0]).then((app) => {
|
||||
// console.log(window.location.origin + appManifest.js[0] == 'http://localhost:8080/res/dev-fs/wde/dist/finder.js')
|
||||
// let kek = 'http://localhost:8080/res/dev-fs/wde/dist/finder.js'
|
||||
import('http://localhost:8080/res/dev-fs/dist/finder.js').then((app) => {
|
||||
let newApp = new app.default()
|
||||
// if newApp //TODO Validate
|
||||
WebDesktopEnvironment.Applications[appManifest.appId] = newApp;
|
||||
onload()
|
||||
})
|
||||
|
||||
return //TODO return result
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} path
|
||||
* @returns {Object | undefined} //FIXME
|
||||
*/
|
||||
static async fetchApp(path){
|
||||
// console.log("path: " + path )
|
||||
const params = new URLSearchParams({path: path, mode: "json"})
|
||||
const response = await fetch(`/system/loadApp?` + params)
|
||||
if (response.status != 200){
|
||||
const error = await response.json()
|
||||
WebDesktopEnvironment.Alert(error.message)
|
||||
return undefined
|
||||
}
|
||||
//TODO Validate manifest
|
||||
const appManifest = response.json()
|
||||
return appManifest
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* @param {string} html
|
||||
*/
|
||||
static SetBasicWindow(html){
|
||||
this.basicWindow = html
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns {string}
|
||||
*/
|
||||
static GetBasicWindow(){
|
||||
return this.basicWindow
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} alertText
|
||||
*/
|
||||
static Alert(alertText){
|
||||
WebDesktopEnvironment.CreateAlertWindow(alertText)
|
||||
console.log(alertText)
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} alertText
|
||||
*/
|
||||
static CreateAlertWindow(alertText){
|
||||
let newWindow = document.createElement("div")
|
||||
newWindow.setAttribute("class", "WindowFrameless")
|
||||
newWindow.setAttribute("windowId", "SuperUniqUUID") //TODO:
|
||||
newWindow.style.cssText = "position:absolute;width:450px;height:116px; margin-left: -225px; margin-top:-58px;left: 50%;top: 50%;background-color:#FFFFFF;border: 1px solid #000000;box-shadow: 2px 2px 0px #000000;"
|
||||
|
||||
let alertImage = document.createElement("img")
|
||||
alertImage.setAttribute("src", "/res/sys/wde/icons/ohno.png")
|
||||
alertImage.style.cssText = "position:absolute; width:64px;height:64px;top:15px;left:25px"
|
||||
newWindow.appendChild(alertImage)
|
||||
|
||||
let errorText = document.createElement("div")
|
||||
errorText.style.cssText = "position:absolute; width: 300px; left:128px; top:30px;font-family: 'Virtue';"
|
||||
errorText.innerHTML = alertText
|
||||
newWindow.appendChild(errorText)
|
||||
|
||||
let closeButton = document.createElement("button")
|
||||
closeButton.style.cssText = "position:absolute; left: 382px; bottom: 10px; background-color:#FFFFFF; width: 55px; height:18px; font-family: 'Virtue'; border-radius:4px;border: 1px solid #000000;"
|
||||
closeButton.innerHTML = "Close"
|
||||
closeButton.addEventListener('click', () => { newWindow.remove()})
|
||||
newWindow.appendChild(closeButton)
|
||||
|
||||
document.body.querySelector('#windows-layer').appendChild(newWindow)
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
import MobileDecorat from "./decorat/mobile-decorat.js"
|
||||
import MobileSunboard from "./sunboard/sunboard-mobile.js"
|
||||
import AbstractWebDesktopEnvironment from "./wde.js"
|
||||
import WDEFileView from "./widgets/file-view/file-view.js"
|
||||
export default class MobileWebDesktopEnvironment extends AbstractWebDesktopEnvironment{
|
||||
/** @type {MobileDecorat} */
|
||||
Decorat
|
||||
/** @type {WDEFileView} */
|
||||
FileView
|
||||
/** @type {MobileSunboard} */
|
||||
#sunBoard
|
||||
constructor(){
|
||||
super()
|
||||
super._SetWDE(this)
|
||||
document.body.style.setProperty('--zoom', 3)
|
||||
this.Decorat = new MobileDecorat()
|
||||
this.FileView = WDEFileView
|
||||
this.#sunBoard = new MobileSunboard(this)
|
||||
// this.loadWDE()
|
||||
|
||||
}
|
||||
|
||||
loadWDE(){
|
||||
this.#initControlsBar()
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} appPath
|
||||
* @param {string[]} args
|
||||
* @param {string} runPath
|
||||
*/
|
||||
async Open(appPath, args, runPath){
|
||||
const runContext = {
|
||||
isMobile: true,
|
||||
bundlePath: appPath,
|
||||
runPath: runPath
|
||||
}
|
||||
|
||||
super._Open(appPath, args, runPath, (appManifest) =>{
|
||||
super._GetApp(appManifest.appId).NewView(args, runContext)
|
||||
}, this)
|
||||
|
||||
}
|
||||
|
||||
#initControlsBar(){
|
||||
let barNode = document.body.querySelector("#controls-bar")//TODO Validate
|
||||
|
||||
barNode.querySelector("#back").addEventListener('click', () => {
|
||||
this.Decorat.BackAction()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
@ -1,94 +0,0 @@
|
|||
import WDEApplication from "./application.js"
|
||||
|
||||
export default class AbstractWebDesktopEnvironment{
|
||||
/** @type {Object<string, WDEApplication>} */
|
||||
_applications = {}
|
||||
/** @type {AbstractWebDesktopEnvironment} */
|
||||
#wde
|
||||
|
||||
/** @type {AbstractWebDesktopEnvironment} */
|
||||
_SetWDE(wde){
|
||||
this.#wde = wde
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} path
|
||||
* @returns {Object | undefined} //FIXME
|
||||
*/
|
||||
async _FetchAppManifest(path){
|
||||
// console.log("path: " + path )
|
||||
const params = new URLSearchParams({path: path, mode: "json"})
|
||||
const response = await fetch(`/system/loadApp?` + params)
|
||||
if (response.status != 200){
|
||||
const error = await response.json()
|
||||
// WebDesktopEnvironment.Alert(error.message) //FIXME
|
||||
return undefined
|
||||
}
|
||||
//TODO Validate manifest
|
||||
const appManifest = response.json()
|
||||
return appManifest
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} appPath
|
||||
* @param {runContext} runContext
|
||||
* @param {string} runPath
|
||||
* @param {function} callback
|
||||
*/
|
||||
async _Open(appPath, runContext, runPath, callback){
|
||||
const appManifest = await this._FetchAppManifest(appPath)
|
||||
|
||||
if (appManifest === undefined) return //TODO return err
|
||||
|
||||
if (this._applications[appManifest.appId] === undefined){
|
||||
this.#loadApp(appManifest, () => {
|
||||
callback(appManifest)
|
||||
})
|
||||
} else {
|
||||
callback(appManifest)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {*} appManifest
|
||||
* @param {function} onload callback after script loading
|
||||
*/
|
||||
async #loadApp(appManifest, onload){
|
||||
let newApp
|
||||
await import(/* webpackMode: "eager" */ `${window.location.origin}/res/dev-fs/dist/finder.js`).then((app) => {newApp = app})
|
||||
// let newApp
|
||||
// switch (appManifest.appId) { //FIXME Can't dynamicly load es6 modules withou static pathes
|
||||
// case 'Finder':
|
||||
|
||||
// break;
|
||||
// }
|
||||
let newAppClass = new newApp.default(this.#wde)
|
||||
this._applications[appManifest.appId] = newAppClass
|
||||
onload()
|
||||
return //TODO return result
|
||||
}
|
||||
|
||||
_GetApp(appId){
|
||||
// console.log(appId)
|
||||
return this._applications[appId]
|
||||
}
|
||||
|
||||
_fetchComp(res) {
|
||||
import(`${window.location.origin}${res}`).then(() => {
|
||||
console.log("Loaded")
|
||||
}, (err)=>{
|
||||
console.log("Error", err)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @typedef {Object} runContext
|
||||
* @property {boolean} isMobile
|
||||
* @property {string} appPath
|
||||
* @property {string} runPath //TODO
|
||||
*/
|
||||
|
||||
/** //TODO
|
||||
* @typedef {Object} appManifest
|
||||
*/
|
||||
|
|
@ -1,60 +0,0 @@
|
|||
// .ContentBorder { /*TODO Delete, deprecated*/
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// /* background-color: #DDDDDD;
|
||||
// border: 1px solid #000000; */
|
||||
|
||||
// overflow: hidden;
|
||||
// overflow-x: hidden;
|
||||
// }
|
||||
|
||||
.ContextMenu {
|
||||
position: absolute;
|
||||
width: auto;
|
||||
height: auto;
|
||||
|
||||
background-color: #DDDDDD;
|
||||
|
||||
border: 1px solid #000000;
|
||||
}
|
||||
|
||||
.ContextMenu .Content{
|
||||
position: relative;
|
||||
width: auto;
|
||||
height: auto;
|
||||
|
||||
|
||||
/* Auto layout */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
/* padding: 4px;
|
||||
padding-top: 2px;
|
||||
padding-right: 6px;
|
||||
gap: 4px; */
|
||||
}
|
||||
|
||||
.ContextMenu .Row {
|
||||
width: 100%;
|
||||
height: 16px;
|
||||
|
||||
}
|
||||
|
||||
.ContextMenu .SectionBreaker {
|
||||
|
||||
/* background-color: rebeccapurple; */
|
||||
|
||||
}
|
||||
|
||||
.ContextMenu .Row:hover{
|
||||
background-color: #333399;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.ContextMenu .Row .Lable{
|
||||
margin-left: 20px;
|
||||
margin-right: 12px;
|
||||
font-family: "Virtue";
|
||||
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
@ -1,134 +0,0 @@
|
|||
|
||||
|
||||
export default class WDEFileView{
|
||||
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
|
||||
*/
|
||||
async OpenFolder(path){
|
||||
this.path = path
|
||||
const params = new URLSearchParams({
|
||||
path: path
|
||||
})
|
||||
const response = await fetch(`/system/wde/widgets/file-tile-view?` + params)
|
||||
if (response.status != 200){
|
||||
//TODO Error text message
|
||||
WebDesktopEnvironment.Alert("TODO")
|
||||
return
|
||||
}
|
||||
let html = await response.text()
|
||||
this.parentElem.innerHTML = html
|
||||
}
|
||||
}
|
||||
|
|
@ -1,86 +0,0 @@
|
|||
.FileTileView{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
|
||||
|
||||
/* FIXME Bug, on desktop mode top ~10 pixel are not active, like margin:10px */
|
||||
}
|
||||
|
||||
.FileTileView.DragDropBorder{
|
||||
box-shadow: inset 0px 0px 0px 4px #9999CC;
|
||||
/* background-color: blue; */
|
||||
}
|
||||
|
||||
.FileTileView .FlexContainer{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
/* Auto layout */
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
gap: 50px;
|
||||
row-gap: 20px;
|
||||
/* padding: 15px; Shit fix TODO: */
|
||||
margin: 15px;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
|
||||
/* overflow: scroll; */
|
||||
/* overflow-x: hidden; */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
-ms-overflow-style: none; /* Internet Explorer 10+ */
|
||||
}
|
||||
|
||||
.FileTileView::-webkit-scrollbar { /* WebKit */
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.FileTileView .Tile{
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
/* Auto layout */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 2px;
|
||||
padding: 0px;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.FileTileView .Selected{
|
||||
/* inherits: ; */
|
||||
/* background-color: black; */
|
||||
}
|
||||
|
||||
.FileTileView .Icon{
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
/* background-image: url("./icons/folder.png"); */
|
||||
background-size: cover;
|
||||
|
||||
image-rendering: optimizeSpeed; /* STOP SMOOTHING, GIVE ME SPEED */
|
||||
image-rendering: -moz-crisp-edges; /* Firefox */
|
||||
image-rendering: -o-crisp-edges; /* Opera */
|
||||
image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
|
||||
image-rendering: pixelated; /* Universal support since 2021 */
|
||||
image-rendering: optimize-contrast; /* CSS3 Proposed */
|
||||
-ms-interpolation-mode: nearest-neighbor; /* IE8+ */
|
||||
}
|
||||
|
||||
.FileTileView .Selected .Icon{
|
||||
filter: brightness(0.4);
|
||||
}
|
||||
|
||||
.FileTileView .Lable{
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.FileTileView .Selected .Lable{
|
||||
white-space: nowrap;
|
||||
color: white;
|
||||
background-color: black;
|
||||
}
|
||||
|
|
@ -1,131 +0,0 @@
|
|||
export default class WebFS{
|
||||
/**
|
||||
* @param {string} path
|
||||
* @returns {boolean}
|
||||
*/
|
||||
static async CreateDirectory(path){
|
||||
if (path == undefined){
|
||||
WebDesktopEnvironment.Alert("Path is undefined")
|
||||
return false
|
||||
}
|
||||
const params = new URLSearchParams({
|
||||
path: `${path}/New Directory`
|
||||
})
|
||||
const response = await fetch(`/system/fs/createDir?` + params)
|
||||
if (response.status != 200){
|
||||
WebDesktopEnvironment.Alert("DIRCTORY CREATION ERROR") //TODO
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} path
|
||||
* @returns {boolean}
|
||||
*/
|
||||
static async DeleteFile(path){
|
||||
const params = new URLSearchParams({
|
||||
path: path
|
||||
})
|
||||
const response = await fetch(`/system/fs/delete?` + params)
|
||||
if (response.status != 200){
|
||||
WebDesktopEnvironment.Alert("DELETE ERROR") //TODO
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} path
|
||||
* @returns {boolean}
|
||||
*/
|
||||
static async MoveFile(sourcePath, targetPath){
|
||||
const params = new URLSearchParams({
|
||||
sourcePath: sourcePath,
|
||||
targetPath: targetPath
|
||||
})
|
||||
const response = await fetch(`/system/fs/move?` + params)
|
||||
if (response.status != 200){
|
||||
// WebDesktopEnvironment.Alert("Move ERROR") //TODO
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} linkPath
|
||||
* @returns {string}
|
||||
*/
|
||||
static async ReadObjectLink(linkPath){
|
||||
const params = new URLSearchParams({
|
||||
linkPath: linkPath,
|
||||
})
|
||||
const response = await fetch(`/system/fs/readObjectLink?` + params)
|
||||
if (response.status != 200){
|
||||
WebDesktopEnvironment.Alert("TODO") //TODO
|
||||
return ""
|
||||
}
|
||||
const path = await response.text()
|
||||
//TODO Validate
|
||||
return path
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} sourcePath
|
||||
* @param {string} linkPath
|
||||
* @returns {string}
|
||||
*/
|
||||
static async CreatePathLink(sourcePath, linkPath){
|
||||
const params = new URLSearchParams({
|
||||
sourcePath: sourcePath,
|
||||
linkPath: linkPath,
|
||||
})
|
||||
const response = await fetch(`/system/fs/createPathLink?` + params)
|
||||
return response.status == 200
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} linkPath
|
||||
* @returns {string}
|
||||
*/
|
||||
static async ReadPathLink(linkPath){
|
||||
const params = new URLSearchParams({
|
||||
linkPath: linkPath,
|
||||
})
|
||||
const response = await fetch(`/system/fs/readPathLink?` + params)
|
||||
if (response.status != 200){
|
||||
WebDesktopEnvironment.Alert("TODO") //TODO
|
||||
return ""
|
||||
}
|
||||
// console.log(response)
|
||||
const file = await response.json()
|
||||
//TODO Validate
|
||||
return file
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {File} file
|
||||
* @param {string} parentPath
|
||||
* @returns {boolean}
|
||||
*/
|
||||
static async UploadFile(file, parentPath){
|
||||
console.log('here')
|
||||
let formData = new FormData()
|
||||
formData.append("file", file) //FIXME Conn reset
|
||||
const params = new URLSearchParams({
|
||||
parentPath: parentPath,
|
||||
})
|
||||
const response = await fetch(`/system/fs/upload?` + params,
|
||||
{
|
||||
method: "POST", //TODO Change to PUT?
|
||||
body: formData
|
||||
})
|
||||
console.log(response.status)
|
||||
if (response.status != 201){
|
||||
const error = await response.json()
|
||||
WebDesktopEnvironment.Alert(error.message)
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
}
|
||||
|
|
@ -1,79 +0,0 @@
|
|||
@import "./wde/primitives.less";
|
||||
@import "./wde/widgets/file-view/file-view.less";
|
||||
@import "./wde/legacy-ui.less";
|
||||
@import "./wde/widgets/basic-widgets.less";
|
||||
@import "./theme.less";
|
||||
|
||||
// @font-face{
|
||||
// font-family: "Virtue";
|
||||
// src:url("/res/dev-fs/fonts/virtue.ttf");
|
||||
// }
|
||||
|
||||
/* @font-face{
|
||||
font-family: "Virtue";
|
||||
src:url("/res/dev-fs/fonts/virtue.ttf")
|
||||
} */
|
||||
|
||||
/* @media screen and (max-device-width: 2048px) and (max-device-height: 2048px) {
|
||||
html {
|
||||
zoom: 3
|
||||
}
|
||||
} */
|
||||
|
||||
.NoClick {
|
||||
pointer-events: none;
|
||||
}
|
||||
.Click {
|
||||
pointer-events: all;
|
||||
}
|
||||
*{
|
||||
font-family: Verdana, Geneva, sans-serif;
|
||||
font-size: 11px;
|
||||
font-style: normal;
|
||||
font-weight:initial;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar { /* WebKit */
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
body{
|
||||
zoom: var(--zoom);
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
|
||||
/* font: normal 14px Summer Pixel 22, "res/SummerPixel22Regular.ttf"; */
|
||||
-webkit-touch-callout: none; /* iOS Safari */
|
||||
-webkit-user-select: none; /* Safari */
|
||||
-khtml-user-select: none; /* Konqueror HTML */
|
||||
-moz-user-select: none; /* Old versions of Firefox */
|
||||
-ms-user-select: none; /* Internet Explorer/Edge */
|
||||
user-select: none; /* Non-prefixed version, currently
|
||||
supported by Chrome, Edge, Opera and Firefox */
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
#applications{
|
||||
position: static;
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
#windows-layer {
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
/* position: fixed; */
|
||||
position: static;
|
||||
}
|
||||
|
||||
#desktop-layer{
|
||||
position: fixed;
|
||||
/* margin: 0px; */
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: @col-ceil;
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
export default class Kek{
|
||||
|
||||
}
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
@import "./wde/sunboard/sunboard-mobile.less";
|
||||
|
||||
body{
|
||||
zoom: 2;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
|
||||
/* font: normal 14px Summer Pixel 22, "res/SummerPixel22Regular.ttf"; */
|
||||
-webkit-touch-callout: none; /* iOS Safari */
|
||||
-webkit-user-select: none; /* Safari */
|
||||
-khtml-user-select: none; /* Konqueror HTML */
|
||||
-moz-user-select: none; /* Old versions of Firefox */
|
||||
-ms-user-select: none; /* Internet Explorer/Edge */
|
||||
user-select: none; /* Non-prefixed version, currently
|
||||
supported by Chrome, Edge, Opera and Firefox */
|
||||
touch-action: manipulation;
|
||||
|
||||
/* Auto layout */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
#mobile-app-views{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// padding: 64px;
|
||||
// border-radius: 50px;
|
||||
// overflow:hidden
|
||||
// background-color: @col-ceil;
|
||||
}
|
||||
|
||||
#controls-bar{
|
||||
&:extend(.WdePrimitives.AdjectiveElement);
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
background-color: @col-argent;
|
||||
|
||||
/* Auto layout */
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.mobile-app-view{
|
||||
// background-color: burlywood;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// position: absolute;
|
||||
}
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
@col-ceil: #9999CC;
|
||||
@col-argent: #C0C0C0;
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
import AbstractWebDesktopEnvironment from "./wde.js"
|
||||
|
||||
export default class WDEApplication{
|
||||
/** @type {AbstractWebDesktopEnvironment} */
|
||||
#wde
|
||||
/** @type {string} */
|
||||
AppId
|
||||
|
||||
/**
|
||||
* @constructor
|
||||
* @param {AbstractWebDesktopEnvironment} wde
|
||||
*/
|
||||
constructor(wde, AppId){
|
||||
this.#wde = wde
|
||||
// console.log(wde)
|
||||
this.AppId = AppId
|
||||
}
|
||||
|
||||
/** @returns {AbstractWebDesktopEnvironment} */
|
||||
WDE(){
|
||||
return this.#wde
|
||||
}
|
||||
|
||||
async NewWindow(){
|
||||
|
||||
}
|
||||
|
||||
/** @returns {Element} */
|
||||
async NewView(){
|
||||
return this.#wde.Decorat.CreateNewView(this.AppId)
|
||||
}
|
||||
}
|
||||
|
|
@ -1,104 +0,0 @@
|
|||
export default class DesktopDecorat{
|
||||
/** @type {Element} */
|
||||
#windowsLayer
|
||||
|
||||
constructor(){
|
||||
this.windowLayer = document.body.querySelector('#windows-layer')
|
||||
// this.#windowsLayer = document.body.querySelector('#windows-layer')
|
||||
this.#windowsLayer = document.body.querySelector('#windows-layer')
|
||||
let startDrag = (event) => {
|
||||
let window = event.target.closest('.WindowFrame')
|
||||
this.bringWindowToFront(window)
|
||||
if (event.target.classList.contains("DragArea")){
|
||||
let xPosInit = event.offsetX
|
||||
let yPosInit = event.offsetY
|
||||
let dragWindow = function(event){
|
||||
window.style.left = `${event.clientX - xPosInit}px`
|
||||
window.style.top = `${event.clientY - yPosInit}px`
|
||||
}
|
||||
let stopDrag = function(){
|
||||
removeEventListener('mousemove', dragWindow)
|
||||
removeEventListener('mouseup', stopDrag)
|
||||
}
|
||||
|
||||
addEventListener('mousemove', dragWindow)
|
||||
addEventListener('mouseup', stopDrag)
|
||||
}
|
||||
}
|
||||
this.#windowsLayer.addEventListener('mousedown', startDrag)
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* @param {HTMLElement} window
|
||||
*/
|
||||
bringWindowToFront(window){ //FIXME
|
||||
let previousWindow = this.#windowsLayer.lastChild
|
||||
if (window == null || window == undefined){
|
||||
return
|
||||
}
|
||||
if (window != previousWindow){
|
||||
this.#windowsLayer.insertBefore(window, previousWindow.nextSibling)
|
||||
previousWindow.classList.remove("Focused")
|
||||
window.classList.add("Focused")
|
||||
} else {
|
||||
window.classList.add("Focused")
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} appId
|
||||
* @param {number} width
|
||||
* @param {number} height
|
||||
* @returns {HTMLElement}
|
||||
*/
|
||||
CreateNewWindow(appId, width, height) {
|
||||
let newWindow = document.createElement("div")
|
||||
newWindow.setAttribute('appid', appId)
|
||||
|
||||
newWindow.setAttribute("class", "WindowFrame ConvexElement")
|
||||
newWindow.setAttribute("windowId", this.#makeid(4)) //TODO:
|
||||
|
||||
newWindow.style.width = width.toString() + "px"
|
||||
newWindow.style.height = height.toString() + "px"
|
||||
|
||||
document.body.querySelector('#windows-layer').appendChild(newWindow)
|
||||
return newWindow
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {HTMLElement} window
|
||||
*/
|
||||
CloseWindow(window) {
|
||||
window.remove()
|
||||
}
|
||||
|
||||
CloseFocusedWindow() {
|
||||
if (document.body.querySelector('#windows-layer').childElementCount > 1){
|
||||
document.body.querySelector('#windows-layer').lastElementChild.remove()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
static ChangeURL(appWindow){
|
||||
let appId = appWindow.getAttribute('appid')
|
||||
window.history.replaceState(null, "", `/${appId}/`);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {num} length
|
||||
*/
|
||||
#makeid(length) {
|
||||
let result = '';
|
||||
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
|
||||
const charactersLength = characters.length;
|
||||
let counter = 0;
|
||||
while (counter < length) {
|
||||
result += characters.charAt(Math.floor(Math.random() * charactersLength));
|
||||
counter += 1;
|
||||
}
|
||||
return result;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
export default class MobileDecorat {
|
||||
/** @type {Element} */
|
||||
#applicationsNode
|
||||
constructor(){
|
||||
this.#applicationsNode = document.body.querySelector("#mobile-app-views") //TODO validate
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} appId
|
||||
* @returns {Element}
|
||||
*/
|
||||
CreateNewView(appId){
|
||||
let newView = document.createElement("div")
|
||||
newView.setAttribute("class", "mobile-app-view")
|
||||
newView.setAttribute("appId", appId)
|
||||
this.#applicationsNode.appendChild(newView)
|
||||
return newView
|
||||
}
|
||||
Open(){
|
||||
|
||||
}
|
||||
BackAction(){
|
||||
// console.log(this.#applicationsNode.childNodes.length)
|
||||
if (this.#applicationsNode.childNodes.length <= 1) return
|
||||
this.#applicationsNode.lastChild.remove()
|
||||
}
|
||||
}
|
||||
|
|
@ -1,232 +0,0 @@
|
|||
.WindowFrame {
|
||||
/* Auto layout */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 4px;
|
||||
padding-top: 2px;
|
||||
padding-right: 6px;
|
||||
gap: 4px;
|
||||
|
||||
position: absolute;
|
||||
|
||||
background: #DDDDDD;
|
||||
border: 1px solid #555555;
|
||||
|
||||
|
||||
/* Inside auto layout */
|
||||
flex: none;
|
||||
order: 1;
|
||||
align-self: stretch;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
/* TODO Add shadows to windows */
|
||||
.WindowFrame.Focused{
|
||||
border: 1px solid #000000;
|
||||
background-color: #CCCCCC;
|
||||
}
|
||||
|
||||
.WindowFrameShadow {
|
||||
box-shadow: 2px 2px 0px #555555;
|
||||
}
|
||||
|
||||
/* FIXME Not work on context menu */
|
||||
.WindowFrameShadow.Focused {
|
||||
box-shadow: 2px 2px 0px #000000;
|
||||
}
|
||||
|
||||
.ConvexElement.Focused {
|
||||
box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.25),
|
||||
inset -1px -1px 0px rgba(0, 0, 0, 0.27),
|
||||
inset 1px 1px 0px #FFFFFF;
|
||||
}
|
||||
|
||||
.AdjectiveElement {
|
||||
border: 1px solid #555555;
|
||||
}
|
||||
|
||||
.Focused .AdjectiveElement {
|
||||
border: 1px solid #000000;
|
||||
box-shadow: -1px -1px 0px rgba(0, 0, 0, 0.25),
|
||||
1px 1px 0px #FFFFFF;
|
||||
/* inset -1px -1px 0px rgba(0, 0, 0, 0.27), */
|
||||
/* inset 1px 1px 0px #FFFFFF;*/
|
||||
}
|
||||
|
||||
.AdjectiveHorizontalLine {
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.25);
|
||||
border-bottom: 1px solid #FFFFFF;
|
||||
width: 100%;
|
||||
height: 0px;
|
||||
}
|
||||
|
||||
.AdjectiveHorizontalLine:last-child {
|
||||
height: 0%;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
|
||||
.WindowFrame .TitleBar {
|
||||
width: 100%;
|
||||
height: 13px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
padding: 0px;
|
||||
|
||||
|
||||
/* Inside auto layout */
|
||||
flex: none;
|
||||
order: 0;
|
||||
align-self: stretch;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.WindowFrame .TitleBar .Lable {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
/* font-size: 13px; */
|
||||
color:#777777;
|
||||
pointer-events: none;
|
||||
white-space: nowrap;
|
||||
|
||||
font-family: "Virtue";
|
||||
letter-spacing: 0.35px;
|
||||
}
|
||||
|
||||
.WindowFrame.Focused .TitleBar .Lable {
|
||||
color:#000000;
|
||||
}
|
||||
|
||||
|
||||
.WindowFrame .TitleBar .Button {
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
padding: 0%;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
visibility: hidden;
|
||||
|
||||
background: linear-gradient(135deg, #999999 18.18%, #FFFFFF 81.82%);
|
||||
border: 1px solid #222222;
|
||||
box-shadow: 0.5px 0.5px 0px 0.5px #FFFFFF,
|
||||
-0.5px -0.5px 0px 0.5px rgba(0, 0, 0, 0.25),
|
||||
inset 1px 1px 0px rgba(255, 255, 255, 0.5),
|
||||
inset -1px -1px 0px rgba(0, 0, 0, 0.27);
|
||||
/* Inside auto layout */
|
||||
flex: none;
|
||||
order: 0;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.WindowFrame.Focused .TitleBar .Button {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.WindowFrame .TitleBar .Button:active {
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
/* Green */
|
||||
box-shadow: 0.5px 0.5px 0px 0.5px #FFFFFF,
|
||||
-0.5px -0.5px 0px 0.5px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.Focused .VisualDragArea {
|
||||
pointer-events: none;
|
||||
width: 100%;
|
||||
height: 11px;
|
||||
background: linear-gradient(transparent 0%, white 0%, white 50%, transparent 50%);
|
||||
background-size: 2px 2px;
|
||||
filter: drop-shadow(1px 1px 0px #777777);
|
||||
}
|
||||
|
||||
.MobileContentBorder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #DDDDDD;
|
||||
/* border: 1px solid #000000; */
|
||||
|
||||
/* box-shadow: -1px -1px 0px rgba(0, 0, 0, 0.25),
|
||||
1px 1px 0px #FFFFFF,
|
||||
inset -1px -1px 0px rgba(0, 0, 0, 0.27),
|
||||
inset 1px 1px 0px #FFFFFF; */
|
||||
|
||||
overflow: hidden;
|
||||
overflow-x: hidden;
|
||||
|
||||
/* Auto layout */
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.MobileApplicationWindow {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* Auto layout */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 4px;
|
||||
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.MobileWindowFrameBottomBar {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
/*
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 5px;
|
||||
padding: 0px; */
|
||||
|
||||
/* Inside auto layout */
|
||||
flex: none;
|
||||
order: 0;
|
||||
align-self: stretch;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.MobileWindowFrameBottomBarButton {
|
||||
min-width: 11px;
|
||||
width: auto;
|
||||
height: 15px;
|
||||
padding: 0px 4px 0px 4px;
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
|
||||
background: linear-gradient(135deg, #999999 18.18%, #FFFFFF 81.82%);
|
||||
border: 1px solid #222222;
|
||||
box-shadow: 0.5px 0.5px 0px 0.5px #FFFFFF,
|
||||
-0.5px -0.5px 0px 0.5px rgba(0, 0, 0, 0.25),
|
||||
inset 1px 1px 0px rgba(255, 255, 255, 0.5),
|
||||
inset -1px -1px 0px rgba(0, 0, 0, 0.27);
|
||||
|
||||
/* Inside auto layout */
|
||||
flex: none;
|
||||
order: 0;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.MobileWindowFrameBottomBar .MobileLable {
|
||||
position: absolute;
|
||||
/* top:1px; */
|
||||
/* font-size: 13px; */
|
||||
left: 50%;
|
||||
pointer-events: none;
|
||||
white-space: nowrap;
|
||||
|
||||
font-family: "Virtue";
|
||||
letter-spacing: 0.35px;
|
||||
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
.WdePrimitives.AdjectiveElement {
|
||||
border: 1px solid #555555;
|
||||
}
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
export default class WdeScrollBar{
|
||||
/**
|
||||
* @param {HTMLElement} scrollBarContainer
|
||||
* @param {HTMLElement} content
|
||||
*/
|
||||
constructor(scrollBarContainer, content){
|
||||
let nonNativeScroll = false
|
||||
// console.log(scrollBarContainer, content)
|
||||
// let handler = scrollBarContainer.children[0]
|
||||
//TODO On scroll move focus on window?
|
||||
let handler = scrollBarContainer.querySelector(".ScrollBarScrollElement") //TODO Refactor classes
|
||||
// console.log(handler)
|
||||
|
||||
handler.style.height = (content.clientHeight /content.scrollHeight)* handler.parentElement.clientHeight + 'px'
|
||||
|
||||
let max = handler.parentElement.clientHeight - handler.clientHeight
|
||||
let yPosInit = 0
|
||||
|
||||
handler.addEventListener('mousedown', (event) => {
|
||||
nonNativeScroll = true
|
||||
yPosInit = event.clientY - Number(handler.style.top.replace('px','' ))
|
||||
|
||||
document.addEventListener('mousemove', drag);
|
||||
document.addEventListener('mouseup', stop)
|
||||
})
|
||||
|
||||
content.addEventListener('scroll', (event) =>{
|
||||
if (!this.nonNativeScroll){
|
||||
let handlerPathLength = handler.parentElement.clientHeight - handler.clientHeight //TODO recalculate only on resize event
|
||||
let coefficient = (content.scrollHeight - content.clientHeight) /handlerPathLength
|
||||
handler.style.top = content.scrollTop/coefficient + 'px'
|
||||
}
|
||||
})
|
||||
|
||||
function drag() {
|
||||
// console.log(event.clientY - yPosInit, Number(handler.style.top.replace('px','' )))
|
||||
let pos = event.clientY - yPosInit
|
||||
let clampPos = Math.min(Math.max(pos, 0), max)
|
||||
handler.style.top = clampPos + "px";
|
||||
|
||||
let handlerPathLength = handler.parentElement.clientHeight - handler.clientHeight //TODO recalculate only on resize event
|
||||
let coefficient = (content.scrollHeight - content.clientHeight) /handlerPathLength
|
||||
// console.log(clampPos, coefficient, content.clientHeight, clampPos* coefficient)
|
||||
|
||||
content.scrollTop = clampPos* coefficient
|
||||
}
|
||||
function stop() {
|
||||
// console.log("stop")
|
||||
document.removeEventListener('mousemove', drag);
|
||||
document.removeEventListener('mouseup', stop)
|
||||
nonNativeScroll = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,110 +0,0 @@
|
|||
.scroller {
|
||||
overflow-y: scroll;
|
||||
scrollbar-color: #0A4C95 #C2D2E4;
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
.scroll_content {
|
||||
position: relative;
|
||||
width: 400px;
|
||||
height: 414px;
|
||||
top: -17px;
|
||||
padding: 20px 10px 20px 10px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.ScrollbarPlace{
|
||||
overflow: hidden;
|
||||
|
||||
border-left: 1px solid #555555;
|
||||
width: 14px;
|
||||
height: 100%;
|
||||
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
width: 14px;
|
||||
height: 100%;
|
||||
|
||||
background-color: #EEEEEE;
|
||||
|
||||
|
||||
/* Inside auto layout */
|
||||
flex: none;
|
||||
order: 0;
|
||||
align-self: stretch;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.Focused .ScrollbarPlace{
|
||||
border-left: 1px solid #000000;
|
||||
background-color: #AAAAAA;
|
||||
box-shadow: inset -1px 0px 0px rgba(255, 255, 255, 0.29),
|
||||
inset -2px 0px 0px rgba(255, 255, 255, 0.19),
|
||||
inset 1px 1px 0px rgba(0, 0, 0, 0.14),
|
||||
inset 2px 2px 0px rgba(0, 0, 0, 0.19);
|
||||
}
|
||||
|
||||
.ScrollBarScrollElement{
|
||||
position: relative;
|
||||
visibility: hidden;
|
||||
width: 14px;
|
||||
height: 31px;
|
||||
|
||||
background: #9999FF;
|
||||
|
||||
box-shadow: 0px -1px 0px #000000,
|
||||
0px 1px 0px #000000,
|
||||
0px 2px 0px rgba(0, 0, 0, 0.13),
|
||||
0px 3px 0px rgba(0, 0, 0, 0.19),
|
||||
inset 0px 1px 0px rgba(255, 255, 255, 0.5),
|
||||
inset 1px 0px 0px rgba(255, 255, 255, 0.5),
|
||||
inset -1px -1px 0px rgba(102, 102, 204, 0.91);
|
||||
|
||||
/* Auto layout */
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
gap: 5px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.Focused .ScrollBarScrollElement{
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.ScrollBarScrollElementDrag{
|
||||
pointer-events: none;
|
||||
/* background-color: #0A4C95; */
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
margin-left: -1px;
|
||||
|
||||
background: linear-gradient(transparent 0%,#CCCCFF 0%, #CCCCFF 50%, transparent 50%);
|
||||
background-size: 2px 2px;
|
||||
|
||||
/* TODO white pixels in rows start */
|
||||
filter: drop-shadow(1px 1px 0px #333399);
|
||||
}
|
||||
|
||||
/* TODO to wde css */
|
||||
.ScrollContent {
|
||||
/* width: 100%;
|
||||
height: 100%; */
|
||||
overflow: scroll;
|
||||
overflow-x: hidden;
|
||||
scrollbar-width: none; /* Firefox */
|
||||
-ms-overflow-style: none; /* Internet Explorer 10+ */
|
||||
|
||||
/* Auto layout */
|
||||
/* display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
padding: 0px; */
|
||||
}
|
||||
|
||||
.ScrollContent::-webkit-scrollbar { /* WebKit */
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
import MobileWebDesktopEnvironment from "../wde-mobile.js"
|
||||
|
||||
export default class MobileDesktop{
|
||||
/**@type {Element} */
|
||||
#icons
|
||||
/** @type {MobileWebDesktopEnvironment} */
|
||||
#wde
|
||||
constructor(wde){
|
||||
this.#wde = wde
|
||||
this.load()
|
||||
}
|
||||
|
||||
async load(){
|
||||
let view = this.#createDesktopView()
|
||||
}
|
||||
|
||||
async #createDesktopView(){
|
||||
let view = await this.#wde.Decorat.CreateNewView("Sunboard") //FIXME
|
||||
|
||||
const params = new URLSearchParams({
|
||||
// path: args[0] //FIXME
|
||||
path: "/" //FIXME
|
||||
})
|
||||
const response = await fetch(`/app/Sunboard/render?` + params,
|
||||
{
|
||||
method: "POST",
|
||||
// body: JSON.stringify(runContext)
|
||||
})
|
||||
if (response.status != 200){
|
||||
console.log(response.status)
|
||||
return
|
||||
}
|
||||
const html = await response.text()
|
||||
view.innerHTML = html
|
||||
|
||||
let iconsList = view.querySelectorAll(".app-icon")
|
||||
iconsList.forEach(element => {
|
||||
let appId = element.getAttribute('appId')
|
||||
element.addEventListener('click', () => {
|
||||
// console.log(appId)
|
||||
// this.#wde.Decorat.CreateNewView(appId)
|
||||
this.#wde.Open("/Applications/Finder.app", [""], "")
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
async createFileView(){
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,61 +0,0 @@
|
|||
@import "../../theme.less";
|
||||
@import "../primitives.less";
|
||||
|
||||
#mobile-sunboard{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
/* Auto layout */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
#icons{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: @col-ceil;
|
||||
}
|
||||
|
||||
// #down-bar{
|
||||
// &:extend(.WdePrimitives.AdjectiveElement);
|
||||
// width: 100%;
|
||||
// height: 150px;
|
||||
// background-color: @col-argent;
|
||||
// }
|
||||
|
||||
.apps-list{
|
||||
/* Auto layout */
|
||||
display: flex;
|
||||
padding: 64px 32px;
|
||||
align-items: flex-start;
|
||||
align-content: flex-start;
|
||||
gap: 103px 18px;
|
||||
flex: 1 0 0;
|
||||
align-self: stretch;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.app-icon{
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
|
||||
/* Auto layout */
|
||||
display: flex;
|
||||
padding: 4px 8px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.app-icon .icon{
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background-color: beige;
|
||||
}
|
||||
|
||||
.app-icon .lable{
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -1,173 +0,0 @@
|
|||
import DesktopDecorat from "./decorat/desktop-decorat.js";
|
||||
import WDEScrollBar from "./scrollbar/scrollbar.js";
|
||||
import WebFS from "../web-fs/web-fs.js";
|
||||
import WDEApplication from "./application.js";
|
||||
import WDEFileView from "./widgets/file-view/file-view.js";
|
||||
import AbstractWebDesktopEnvironment from "./wde.js";
|
||||
|
||||
// import DesktopSunBoard from "./sunboard/sunboard-desktop.js";
|
||||
export default class WebDesktopEnvironment extends AbstractWebDesktopEnvironment{
|
||||
/** @type {string} */
|
||||
test = ""
|
||||
/** @type {WDEFileView} */
|
||||
FileView = WDEFileView
|
||||
/** @type {WDEScrollBar} */
|
||||
ScrollBar = WDEScrollBar
|
||||
/**@type {DesktopDecorat} */
|
||||
Decorat
|
||||
/** @type {Object<string, WDEApplication>} */
|
||||
static Applications = {};
|
||||
/** Deprecated */
|
||||
static isMobile = false
|
||||
// static decorat
|
||||
static webFs
|
||||
|
||||
constructor(){
|
||||
super()
|
||||
super._SetWDE(this)
|
||||
document.body.style.setProperty('--zoom', 1)
|
||||
this.Decorat = new DesktopDecorat()
|
||||
|
||||
WebDesktopEnvironment.webFs = new WebFS()
|
||||
this.FileView = WDEFileView
|
||||
this.loadWDE()
|
||||
// this.#devLoadSunboard()
|
||||
}
|
||||
|
||||
async loadWDE(){
|
||||
let autoStart = document.body.querySelector("wde-autostart")
|
||||
if (autoStart == null){
|
||||
WebDesktopEnvironment.Alert("Error in loading DE")
|
||||
return
|
||||
}
|
||||
for (const child of autoStart.children) {
|
||||
if (child.nodeName != "APP") continue
|
||||
let appPath = child.getAttribute("app-path")
|
||||
if (appPath == null) continue
|
||||
|
||||
let args = []
|
||||
let argsRaw = child.querySelector("args")
|
||||
if (argsRaw == null) continue
|
||||
|
||||
for (const argRaw of argsRaw.children) {
|
||||
let arg = argRaw.getAttribute("string")
|
||||
if (arg == null) continue
|
||||
args.push(arg)
|
||||
}
|
||||
|
||||
// console.log(appPath, args)
|
||||
await this.Open(appPath, args)
|
||||
}
|
||||
autoStart.remove()
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} appPath
|
||||
* @param {string[]} args
|
||||
* @param {string} runPath
|
||||
*/
|
||||
async Open(appPath, args, runPath){
|
||||
const runContext = {
|
||||
isMobile: false,
|
||||
bundlePath: appPath,
|
||||
runPath: runPath
|
||||
}
|
||||
|
||||
super._Open(appPath, args, runPath, (appManifest) =>{
|
||||
super._GetApp(appManifest.appId).NewWindow(args, runContext)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} appManifest
|
||||
* @param {function} onload callback after script loading
|
||||
*/
|
||||
static async load2(appManifest, onload){
|
||||
// import(window.location.origin + appManifest.js[0]).then((app) => {
|
||||
// console.log(window.location.origin + appManifest.js[0] == 'http://localhost:8080/res/dev-fs/wde/dist/finder.js')
|
||||
// let kek = 'http://localhost:8080/res/dev-fs/wde/dist/finder.js'
|
||||
import('http://localhost:8080/res/dev-fs/dist/finder.js').then((app) => {
|
||||
let newApp = new app.default()
|
||||
// if newApp //TODO Validate
|
||||
WebDesktopEnvironment.Applications[appManifest.appId] = newApp;
|
||||
onload()
|
||||
})
|
||||
|
||||
return //TODO return result
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} path
|
||||
* @returns {Object | undefined} //FIXME
|
||||
*/
|
||||
static async fetchApp(path){
|
||||
// console.log("path: " + path )
|
||||
const params = new URLSearchParams({path: path, mode: "json"})
|
||||
const response = await fetch(`/system/loadApp?` + params)
|
||||
if (response.status != 200){
|
||||
const error = await response.json()
|
||||
WebDesktopEnvironment.Alert(error.message)
|
||||
return undefined
|
||||
}
|
||||
//TODO Validate manifest
|
||||
const appManifest = response.json()
|
||||
return appManifest
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* @param {string} html
|
||||
*/
|
||||
static SetBasicWindow(html){
|
||||
this.basicWindow = html
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns {string}
|
||||
*/
|
||||
static GetBasicWindow(){
|
||||
return this.basicWindow
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} alertText
|
||||
*/
|
||||
static Alert(alertText){
|
||||
WebDesktopEnvironment.CreateAlertWindow(alertText)
|
||||
console.log(alertText)
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} alertText
|
||||
*/
|
||||
static CreateAlertWindow(alertText){
|
||||
let newWindow = document.createElement("div")
|
||||
newWindow.setAttribute("class", "WindowFrameless")
|
||||
newWindow.setAttribute("windowId", "SuperUniqUUID") //TODO:
|
||||
newWindow.style.cssText = "position:absolute;width:450px;height:116px; margin-left: -225px; margin-top:-58px;left: 50%;top: 50%;background-color:#FFFFFF;border: 1px solid #000000;box-shadow: 2px 2px 0px #000000;"
|
||||
|
||||
let alertImage = document.createElement("img")
|
||||
alertImage.setAttribute("src", "/res/sys/wde/icons/ohno.png")
|
||||
alertImage.style.cssText = "position:absolute; width:64px;height:64px;top:15px;left:25px"
|
||||
newWindow.appendChild(alertImage)
|
||||
|
||||
let errorText = document.createElement("div")
|
||||
errorText.style.cssText = "position:absolute; width: 300px; left:128px; top:30px;font-family: 'Virtue';"
|
||||
errorText.innerHTML = alertText
|
||||
newWindow.appendChild(errorText)
|
||||
|
||||
let closeButton = document.createElement("button")
|
||||
closeButton.style.cssText = "position:absolute; left: 382px; bottom: 10px; background-color:#FFFFFF; width: 55px; height:18px; font-family: 'Virtue'; border-radius:4px;border: 1px solid #000000;"
|
||||
closeButton.innerHTML = "Close"
|
||||
closeButton.addEventListener('click', () => { newWindow.remove()})
|
||||
newWindow.appendChild(closeButton)
|
||||
|
||||
document.body.querySelector('#windows-layer').appendChild(newWindow)
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
import MobileDecorat from "./decorat/mobile-decorat.js"
|
||||
import MobileSunboard from "./sunboard/sunboard-mobile.js"
|
||||
import AbstractWebDesktopEnvironment from "./wde.js"
|
||||
import WDEFileView from "./widgets/file-view/file-view.js"
|
||||
export default class MobileWebDesktopEnvironment extends AbstractWebDesktopEnvironment{
|
||||
/** @type {MobileDecorat} */
|
||||
Decorat
|
||||
/** @type {WDEFileView} */
|
||||
FileView
|
||||
/** @type {MobileSunboard} */
|
||||
#sunBoard
|
||||
constructor(){
|
||||
super()
|
||||
super._SetWDE(this)
|
||||
document.body.style.setProperty('--zoom', 3)
|
||||
this.Decorat = new MobileDecorat()
|
||||
this.FileView = WDEFileView
|
||||
this.#sunBoard = new MobileSunboard(this)
|
||||
// this.loadWDE()
|
||||
|
||||
}
|
||||
|
||||
loadWDE(){
|
||||
this.#initControlsBar()
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} appPath
|
||||
* @param {string[]} args
|
||||
* @param {string} runPath
|
||||
*/
|
||||
async Open(appPath, args, runPath){
|
||||
const runContext = {
|
||||
isMobile: true,
|
||||
bundlePath: appPath,
|
||||
runPath: runPath
|
||||
}
|
||||
|
||||
super._Open(appPath, args, runPath, (appManifest) =>{
|
||||
super._GetApp(appManifest.appId).NewView(args, runContext)
|
||||
}, this)
|
||||
|
||||
}
|
||||
|
||||
#initControlsBar(){
|
||||
let barNode = document.body.querySelector("#controls-bar")//TODO Validate
|
||||
|
||||
barNode.querySelector("#back").addEventListener('click', () => {
|
||||
this.Decorat.BackAction()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
@ -1,94 +0,0 @@
|
|||
import WDEApplication from "./application.js"
|
||||
|
||||
export default class AbstractWebDesktopEnvironment{
|
||||
/** @type {Object<string, WDEApplication>} */
|
||||
_applications = {}
|
||||
/** @type {AbstractWebDesktopEnvironment} */
|
||||
#wde
|
||||
|
||||
/** @type {AbstractWebDesktopEnvironment} */
|
||||
_SetWDE(wde){
|
||||
this.#wde = wde
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} path
|
||||
* @returns {Object | undefined} //FIXME
|
||||
*/
|
||||
async _FetchAppManifest(path){
|
||||
// console.log("path: " + path )
|
||||
const params = new URLSearchParams({path: path, mode: "json"})
|
||||
const response = await fetch(`/system/loadApp?` + params)
|
||||
if (response.status != 200){
|
||||
const error = await response.json()
|
||||
// WebDesktopEnvironment.Alert(error.message) //FIXME
|
||||
return undefined
|
||||
}
|
||||
//TODO Validate manifest
|
||||
const appManifest = response.json()
|
||||
return appManifest
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} appPath
|
||||
* @param {runContext} runContext
|
||||
* @param {string} runPath
|
||||
* @param {function} callback
|
||||
*/
|
||||
async _Open(appPath, runContext, runPath, callback){
|
||||
const appManifest = await this._FetchAppManifest(appPath)
|
||||
|
||||
if (appManifest === undefined) return //TODO return err
|
||||
|
||||
if (this._applications[appManifest.appId] === undefined){
|
||||
this.#loadApp(appManifest, () => {
|
||||
callback(appManifest)
|
||||
})
|
||||
} else {
|
||||
callback(appManifest)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {*} appManifest
|
||||
* @param {function} onload callback after script loading
|
||||
*/
|
||||
async #loadApp(appManifest, onload){
|
||||
let newApp
|
||||
await import(/* webpackMode: "eager" */ `${window.location.origin}/res/dev-fs/dist/finder.js`).then((app) => {newApp = app})
|
||||
// let newApp
|
||||
// switch (appManifest.appId) { //FIXME Can't dynamicly load es6 modules withou static pathes
|
||||
// case 'Finder':
|
||||
|
||||
// break;
|
||||
// }
|
||||
let newAppClass = new newApp.default(this.#wde)
|
||||
this._applications[appManifest.appId] = newAppClass
|
||||
onload()
|
||||
return //TODO return result
|
||||
}
|
||||
|
||||
_GetApp(appId){
|
||||
// console.log(appId)
|
||||
return this._applications[appId]
|
||||
}
|
||||
|
||||
_fetchComp(res) {
|
||||
import(`${window.location.origin}${res}`).then(() => {
|
||||
console.log("Loaded")
|
||||
}, (err)=>{
|
||||
console.log("Error", err)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @typedef {Object} runContext
|
||||
* @property {boolean} isMobile
|
||||
* @property {string} appPath
|
||||
* @property {string} runPath //TODO
|
||||
*/
|
||||
|
||||
/** //TODO
|
||||
* @typedef {Object} appManifest
|
||||
*/
|
||||
|
|
@ -1,60 +0,0 @@
|
|||
.ContentBorder { /*TODO Delete, deprecated*/
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* background-color: #DDDDDD;
|
||||
border: 1px solid #000000; */
|
||||
|
||||
overflow: hidden;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.ContextMenu {
|
||||
position: absolute;
|
||||
width: auto;
|
||||
height: auto;
|
||||
|
||||
background-color: #DDDDDD;
|
||||
|
||||
border: 1px solid #000000;
|
||||
}
|
||||
|
||||
.ContextMenu .Content{
|
||||
position: relative;
|
||||
width: auto;
|
||||
height: auto;
|
||||
|
||||
|
||||
/* Auto layout */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
/* padding: 4px;
|
||||
padding-top: 2px;
|
||||
padding-right: 6px;
|
||||
gap: 4px; */
|
||||
}
|
||||
|
||||
.ContextMenu .Row {
|
||||
width: 100%;
|
||||
height: 16px;
|
||||
|
||||
}
|
||||
|
||||
.ContextMenu .SectionBreaker {
|
||||
|
||||
/* background-color: rebeccapurple; */
|
||||
|
||||
}
|
||||
|
||||
.ContextMenu .Row:hover{
|
||||
background-color: #333399;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.ContextMenu .Row .Lable{
|
||||
margin-left: 20px;
|
||||
margin-right: 12px;
|
||||
font-family: "Virtue";
|
||||
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
@ -1,134 +0,0 @@
|
|||
|
||||
|
||||
export default class WDEFileView{
|
||||
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
|
||||
*/
|
||||
async OpenFolder(path){
|
||||
this.path = path
|
||||
const params = new URLSearchParams({
|
||||
path: path
|
||||
})
|
||||
const response = await fetch(`/system/wde/widgets/file-tile-view?` + params)
|
||||
if (response.status != 200){
|
||||
//TODO Error text message
|
||||
WebDesktopEnvironment.Alert("TODO")
|
||||
return
|
||||
}
|
||||
let html = await response.text()
|
||||
this.parentElem.innerHTML = html
|
||||
}
|
||||
}
|
||||
|
|
@ -1,86 +0,0 @@
|
|||
.FileTileView{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
|
||||
|
||||
/* FIXME Bug, on desktop mode top ~10 pixel are not active, like margin:10px */
|
||||
}
|
||||
|
||||
.FileTileView.DragDropBorder{
|
||||
box-shadow: inset 0px 0px 0px 4px #9999CC;
|
||||
/* background-color: blue; */
|
||||
}
|
||||
|
||||
.FileTileView .FlexContainer{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
/* Auto layout */
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
gap: 50px;
|
||||
row-gap: 20px;
|
||||
/* padding: 15px; Shit fix TODO: */
|
||||
margin: 15px;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
|
||||
/* overflow: scroll; */
|
||||
/* overflow-x: hidden; */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
-ms-overflow-style: none; /* Internet Explorer 10+ */
|
||||
}
|
||||
|
||||
.FileTileView::-webkit-scrollbar { /* WebKit */
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.FileTileView .Tile{
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
/* Auto layout */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 2px;
|
||||
padding: 0px;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.FileTileView .Selected{
|
||||
/* inherits: ; */
|
||||
/* background-color: black; */
|
||||
}
|
||||
|
||||
.FileTileView .Icon{
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
/* background-image: url("./icons/folder.png"); */
|
||||
background-size: cover;
|
||||
|
||||
image-rendering: optimizeSpeed; /* STOP SMOOTHING, GIVE ME SPEED */
|
||||
image-rendering: -moz-crisp-edges; /* Firefox */
|
||||
image-rendering: -o-crisp-edges; /* Opera */
|
||||
image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
|
||||
image-rendering: pixelated; /* Universal support since 2021 */
|
||||
image-rendering: optimize-contrast; /* CSS3 Proposed */
|
||||
-ms-interpolation-mode: nearest-neighbor; /* IE8+ */
|
||||
}
|
||||
|
||||
.FileTileView .Selected .Icon{
|
||||
filter: brightness(0.4);
|
||||
}
|
||||
|
||||
.FileTileView .Lable{
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.FileTileView .Selected .Lable{
|
||||
white-space: nowrap;
|
||||
color: white;
|
||||
background-color: black;
|
||||
}
|
||||
|
|
@ -1,131 +0,0 @@
|
|||
export default class WebFS{
|
||||
/**
|
||||
* @param {string} path
|
||||
* @returns {boolean}
|
||||
*/
|
||||
static async CreateDirectory(path){
|
||||
if (path == undefined){
|
||||
WebDesktopEnvironment.Alert("Path is undefined")
|
||||
return false
|
||||
}
|
||||
const params = new URLSearchParams({
|
||||
path: `${path}/New Directory`
|
||||
})
|
||||
const response = await fetch(`/system/fs/createDir?` + params)
|
||||
if (response.status != 200){
|
||||
WebDesktopEnvironment.Alert("DIRCTORY CREATION ERROR") //TODO
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} path
|
||||
* @returns {boolean}
|
||||
*/
|
||||
static async DeleteFile(path){
|
||||
const params = new URLSearchParams({
|
||||
path: path
|
||||
})
|
||||
const response = await fetch(`/system/fs/delete?` + params)
|
||||
if (response.status != 200){
|
||||
WebDesktopEnvironment.Alert("DELETE ERROR") //TODO
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} path
|
||||
* @returns {boolean}
|
||||
*/
|
||||
static async MoveFile(sourcePath, targetPath){
|
||||
const params = new URLSearchParams({
|
||||
sourcePath: sourcePath,
|
||||
targetPath: targetPath
|
||||
})
|
||||
const response = await fetch(`/system/fs/move?` + params)
|
||||
if (response.status != 200){
|
||||
// WebDesktopEnvironment.Alert("Move ERROR") //TODO
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} linkPath
|
||||
* @returns {string}
|
||||
*/
|
||||
static async ReadObjectLink(linkPath){
|
||||
const params = new URLSearchParams({
|
||||
linkPath: linkPath,
|
||||
})
|
||||
const response = await fetch(`/system/fs/readObjectLink?` + params)
|
||||
if (response.status != 200){
|
||||
WebDesktopEnvironment.Alert("TODO") //TODO
|
||||
return ""
|
||||
}
|
||||
const path = await response.text()
|
||||
//TODO Validate
|
||||
return path
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} sourcePath
|
||||
* @param {string} linkPath
|
||||
* @returns {string}
|
||||
*/
|
||||
static async CreatePathLink(sourcePath, linkPath){
|
||||
const params = new URLSearchParams({
|
||||
sourcePath: sourcePath,
|
||||
linkPath: linkPath,
|
||||
})
|
||||
const response = await fetch(`/system/fs/createPathLink?` + params)
|
||||
return response.status == 200
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} linkPath
|
||||
* @returns {string}
|
||||
*/
|
||||
static async ReadPathLink(linkPath){
|
||||
const params = new URLSearchParams({
|
||||
linkPath: linkPath,
|
||||
})
|
||||
const response = await fetch(`/system/fs/readPathLink?` + params)
|
||||
if (response.status != 200){
|
||||
WebDesktopEnvironment.Alert("TODO") //TODO
|
||||
return ""
|
||||
}
|
||||
// console.log(response)
|
||||
const file = await response.json()
|
||||
//TODO Validate
|
||||
return file
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {File} file
|
||||
* @param {string} parentPath
|
||||
* @returns {boolean}
|
||||
*/
|
||||
static async UploadFile(file, parentPath){
|
||||
console.log('here')
|
||||
let formData = new FormData()
|
||||
formData.append("file", file) //FIXME Conn reset
|
||||
const params = new URLSearchParams({
|
||||
parentPath: parentPath,
|
||||
})
|
||||
const response = await fetch(`/system/fs/upload?` + params,
|
||||
{
|
||||
method: "POST", //TODO Change to PUT?
|
||||
body: formData
|
||||
})
|
||||
console.log(response.status)
|
||||
if (response.status != 201){
|
||||
const error = await response.json()
|
||||
WebDesktopEnvironment.Alert(error.message)
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user