cyber-dream/personal-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: cyber-dream:bd0f77b1b656bed9135e21824ded49a44567ac6c
Branches Tags
cyber-dream:new-back
..
compare: cyber-dream:9f60c185ad9086efcd00bd2b5dfdd7dc4ac640d9
Branches Tags
cyber-dream:new-back

4 Commits
bd0f77b1b6 ... 9f60c185ad

Author SHA1 Message Date
cyber-dream
9f60c185ad fixes 2023-07-22 04:10:00 +03:00
cyber-dream
ec9ef532f6 delete duplicates 2023-07-22 04:05:34 +03:00
cyber-dream
71431790b5 quick fix aboutme 2023-07-22 03:50:58 +03:00
cyber-dream
41bd2a43b8 finder rework 2023-07-22 03:48:45 +03:00
72 changed files with 333 additions and 4098 deletions
Show Stats Expand all files Collapse all files

26
front/src/apps/finder/finder-window.js
View File

@ -10,7 +10,7 @@ export default class FinderWindow{
/** @type {Finder} */
#finder
/**
* @deprecated
* @deprecated move to this.#finder.WDE()
* @type {AbstractWebDesktopEnvironment}
*/
#wde
@ -31,7 +31,7 @@ export default class FinderWindow{
* @returns
*/
async Init(finder, args, runContext){
console.log(args)
// console.log(args)
this.#finder = finder
if (runContext.isMobile){
console.log("Mobile Finder!")
@ -88,7 +88,7 @@ export default class FinderWindow{
let newWindow = this.#wde.Decorat.CreateNewWindow(this.#appId, 500, 350 )
newWindow.innerHTML = html
// console.log(this.#wde)
console.log(newWindow.querySelector(".FileTileView"))
this.fileView = new this.#wde.FileView(
newWindow.querySelector(".FileTileView"),
@ -98,19 +98,19 @@ export default class FinderWindow{
() => { this.ReRenderDir() },
this.#wde)
newWindow.querySelector("#closeWindowButton").addEventListener('click', () => {
this.#wde.Decorat.CloseWindow(newWindow)
})
// newWindow.querySelector("#closeWindowButton").addEventListener('click', () => {
// this.#wde.Decorat.CloseWindow(newWindow)
// })
newWindow.querySelector("#RootButton").addEventListener('click', () =>{
this.RenderDir('/')
})
// newWindow.querySelector("#RootButton").addEventListener('click', () =>{
// this.RenderDir('/')
// })
newWindow.querySelector("#HomeButton").addEventListener('click', () =>{
this.RenderDir('/home/user')
})
// newWindow.querySelector("#HomeButton").addEventListener('click', () =>{
// this.RenderDir('/home/user')
// })
let scrollBar = new this.#wde.ScrollBar(newWindow.querySelector(".ScrollbarPlace"), newWindow.querySelector(".FileTileView"))
// let scrollBar = new this.#wde.ScrollBar(newWindow.querySelector(".scrollbar-place"), newWindow.querySelector(".FileTileView"))
this.windowElem = newWindow
this.RenderDir(args[0])

24
front/src/apps/finder/finder.less
View File

@ -1,34 +1,34 @@
.FinderContent {
@import "../../theme.less";
@import "../../wde/effects.less";
.finder-content {
width: 100%;
height: 100%;
/* Auto layout */
display: flex;
flex-direction: column;
justify-content: center;
justify-content: start;
align-items: flex-start;
padding: 0px;
}
.FinderContent .ToolBar{
.finder-content > .tool-bar{
width: 100%;
height: 20px;
border-bottom: 1px solid #555555;
background-color: #EEEEEE;
min-height: 20px;
border-bottom: @eff-border-grey;
}
.Focused .FinderContent .ToolBar{
.window-frame.Focused .tool-bar{
border-bottom: 1px solid #000000;
background-color: #DDDDDD;
box-shadow: @eff-box-shadow-convex;
}
.FinderContent .FinderFileView{
.finder-content > .file-view-container{
width: 100%;
height: 100%;
background-color: #FFFFFF;
// background-color: #FFFFFF;
/* Auto layout */
display: flex;

11
front/src/desktop.less
View File

@ -1,8 +1,11 @@
@import "./wde/primitives.less";
@import "./wde/widgets/file-view/file-view.less";
@import "./wde/legacy-ui.less";
@import "./wde/widgets/scrollbar/scrollbar.less";
// @import "./wde/legacy-ui.less";
@import "./wde/widgets/basic-widgets.less";
@import "./theme.less";
@import "./wde/window-frame.less";
@import "./wde/widgets/title-bar/title-bar.less";
// @font-face{
// font-family: "Virtue";
@ -26,6 +29,8 @@
.Click {
pointer-events: all;
}
.DragArea
*{
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
@ -39,12 +44,14 @@
}
body{
zoom: var(--zoom);
// zoom: var(--zoom);
position: absolute;
width: 100%;
height: 100%;
margin: 0px;
font-size: 11px;
/* font: normal 14px Summer Pixel 22, "res/SummerPixel22Regular.ttf"; */
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */

339
front/src/src/apps copy/finder/finder-window.js
View File

@ -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()
})
}
}

64
front/src/src/apps copy/finder/finder.js
View File

@ -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)
})
}
}

39
front/src/src/apps copy/finder/finder.less
View File

@ -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;
}

79
front/src/src/apps/desktop.less
View File

@ -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;
}

339
front/src/src/apps/finder/finder-window.js
View File

@ -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()
})
}
}

64
front/src/src/apps/finder/finder.js
View File

@ -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)
})
}
}

39
front/src/src/apps/finder/finder.less
View File

@ -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;
}

3
front/src/src/apps/init.mjs
View File

@ -1,3 +0,0 @@
export default class Kek{
}

54
front/src/src/apps/mobile.less
View File

@ -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;
}

2
front/src/src/apps/theme.less
View File

@ -1,2 +0,0 @@
@col-ceil: #9999CC;
@col-argent: #C0C0C0;

32
front/src/src/apps/wde/application.js
View File

@ -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)
}
}

104
front/src/src/apps/wde/decorat/desktop-decorat.js
View File

@ -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;
}
}

27
front/src/src/apps/wde/decorat/mobile-decorat.js
View File

@ -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()
}
}

232
front/src/src/apps/wde/legacy-ui.less
View File

@ -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;
}

3
front/src/src/apps/wde/primitives.less
View File

@ -1,3 +0,0 @@
.WdePrimitives.AdjectiveElement {
border: 1px solid #555555;
}

54
front/src/src/apps/wde/scrollbar/scrollbar.js
View File

@ -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
}
}
}

50
front/src/src/apps/wde/sunboard/sunboard-mobile.js
View File

@ -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(){
}
}

61
front/src/src/apps/wde/sunboard/sunboard-mobile.less
View File

@ -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{
}

173
front/src/src/apps/wde/wde-desktop.js
View File

@ -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)
}
}

52
front/src/src/apps/wde/wde-mobile.js
View File

@ -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()
})
}
}

94
front/src/src/apps/wde/wde.js
View File

@ -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
*/

60
front/src/src/apps/wde/widgets/basic-widgets.less
View File

@ -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;
}

134
front/src/src/apps/wde/widgets/file-view/file-view.js
View File

@ -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
}
}

86
front/src/src/apps/wde/widgets/file-view/file-view.less
View File

@ -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;
}

131
front/src/src/apps/web-fs/web-fs.js
View File

@ -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
}
}

79
front/src/src/desktop.less
View File

@ -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;
}

3
front/src/src/init.mjs
View File

@ -1,3 +0,0 @@
export default class Kek{
}

54
front/src/src/mobile.less
View File

@ -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;
}

2
front/src/src/theme.less
View File

@ -1,2 +0,0 @@
@col-ceil: #9999CC;
@col-argent: #C0C0C0;

32
front/src/src/wde/application.js
View File

@ -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)
}
}

104
front/src/src/wde/decorat/desktop-decorat.js
View File

@ -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;
}
}

27
front/src/src/wde/decorat/mobile-decorat.js
View File

@ -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()
}
}

232
front/src/src/wde/legacy-ui.less
View File

@ -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;
}

3
front/src/src/wde/primitives.less
View File

@ -1,3 +0,0 @@
.WdePrimitives.AdjectiveElement {
border: 1px solid #555555;
}

54
front/src/src/wde/scrollbar/scrollbar.js
View File

@ -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
}
}
}

110
front/src/src/wde/scrollbar/wde-scrollbar.css
View File

@ -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;
}

50
front/src/src/wde/sunboard/sunboard-mobile.js
View File

@ -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(){
}
}

61
front/src/src/wde/sunboard/sunboard-mobile.less
View File

@ -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{
}

173
front/src/src/wde/wde-desktop.js
View File

@ -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)
}
}

52
front/src/src/wde/wde-mobile.js
View File

@ -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()
})
}
}

94
front/src/src/wde/wde.js
View File

@ -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
*/

60
front/src/src/wde/widgets/basic-widgets.less
View File

@ -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;
}

134
front/src/src/wde/widgets/file-view/file-view.js
View File

@ -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
}
}

86
front/src/src/wde/widgets/file-view/file-view.less
View File

@ -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;
}

131
front/src/src/web-fs/web-fs.js
View File

@ -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
}
}

8
front/src/theme.less
View File

@ -1,2 +1,10 @@
@col-ceil: #9999CC;
@col-argent: #C0C0C0;
@col-chinese-silver: #CCCCCC;
@col-gainsboro: #DDDDDD;
@col-davys-grey: #555555;
@col-grey: #808080;
@col-bright-grey: #EEEEEE;
@col-black: #000000;
@col-white: #FFFFFF;
@col-raisin-black: #222222;

1
front/src/wde/application.js
View File

@ -17,7 +17,6 @@ export default class WDEApplication{
// console.log(wde)
this.AppId = AppId //TODO: Validate
this.AppManifest = manifest
console.log("SUKA", this.AppId, AppId)
}
/** @returns {AbstractWebDesktopEnvironment} */

5
front/src/wde/decorat/desktop-decorat.js
View File

@ -6,7 +6,7 @@ export default class DesktopDecorat{
this.#windowsLayer = document.body.querySelector('#windows-layer') //TODO Validate if null
let startDrag = (event) => {
let window = event.target.closest('.WindowFrame')
let window = event.target.closest('.window-frame')
this.bringWindowToFront(window)
if (event.target.classList.contains("DragArea")){
let xPosInit = event.offsetX
@ -56,7 +56,8 @@ export default class DesktopDecorat{
let newWindow = document.createElement("div")
newWindow.setAttribute('appid', appId)
newWindow.setAttribute("class", "WindowFrame ConvexElement")
// newWindow.setAttribute("class", "WindowFrame ConvexElement")
newWindow.setAttribute("class", "window-frame")
newWindow.setAttribute("windowId", this.#makeid(4)) //TODO:
newWindow.style.width = width.toString() + "px"

44
front/src/wde/effects.less Normal file
View File

@ -0,0 +1,44 @@
.adjective{
border: 1px solid #555555;
}
.convex{
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;
}
.border{
.grey{
border: 1px solid @col-davys-grey;
}
.black{
border: 1px solid @col-black;
}
}
.shadow{ //FIXME: shadow must be 2px offset from windows borders
.grey{
box-shadow: 1px 1px 0px @col-davys-grey;
}
.black{
box-shadow: 1px 1px 0px @col-black;
}
}
.rows-fill-shadowed{
background: linear-gradient(transparent 0%, white 0%, white 50%, transparent 50%);
background-size: 2px 2px;
filter: drop-shadow(1px 1px 0px #777777);
}
@eff-border-black: 1px solid @col-black;
@eff-border-grey: 1px solid @col-davys-grey;
@eff-box-shadow-grey: 1px 1px 0px @col-davys-grey;
@eff-box-shadow-black: 1px 1px 0px @col-black;
@eff-box-shadow-convex: inset -1px -1px 0px rgba(0, 0, 0, 0.27),inset 1px 1px 0px @col-white;
@eff-box-shadow-adjective: -1px -1px 0px rgba(0, 0, 0, 0.25), 1px 1px 0px #FFFFFF;

36
front/src/wde/legacy-ui.less
View File

@ -1,25 +1,25 @@
.WindowFrame {
/* Auto layout */
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 4px;
padding-top: 2px;
padding-right: 6px;
gap: 4px;
// .WindowFrame {
// /* Auto layout */
// display: flex;
// flex-direction: column;
// align-items: flex-start;
// padding: 4px;
// padding-top: 2px;
// padding-right: 6px;
// gap: 4px;
position: absolute;
// position: absolute;
background: #DDDDDD;
border: 1px solid #555555;
// background: #DDDDDD;
// border: 1px solid #555555;
/* Inside auto layout */
flex: none;
order: 1;
align-self: stretch;
flex-grow: 1;
}
// /* Inside auto layout */
// flex: none;
// order: 1;
// align-self: stretch;
// flex-grow: 1;
// }
/* TODO Add shadows to windows */
.WindowFrame.Focused{

12
front/src/wde/primitives.less
View File

@ -1,3 +1,11 @@
.WdePrimitives.AdjectiveElement {
border: 1px solid #555555;
.WdePrimitives {
.adjective{
border: 1px solid #555555;
}
.black-border{
border: 1px solid #000000;
}
}

110
front/src/wde/scrollbar/wde-scrollbar.css
View File

@ -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;
}

2
front/src/wde/sunboard/sunboard-mobile.js
View File

@ -38,7 +38,7 @@ export default class MobileDesktop{
let path = element.getAttribute('path') //TODO: Validate
element.addEventListener('click', () => {
this.#wde.Open(path, [""], "") //FIXME
this.#wde.Open(path, ["/"], "") //FIXME
})
});
}

4
front/src/wde/wde-desktop.js
View File

@ -1,5 +1,5 @@
import DesktopDecorat from "./decorat/desktop-decorat.js";
import WDEScrollBar from "./scrollbar/scrollbar.js";
import WDEScrollBar from "./widgets/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";
@ -36,6 +36,8 @@ export default class WebDesktopEnvironment extends AbstractWebDesktopEnvironment
async loadWDE(){
await this.Open("/Applications/Finder.app", ["/","--desktop", "desktop-layer"])
// await this.Open("/Applications/Finder.app", ["/", "desktop-layer"])
await this.Open("/Applications/AboutMe.app", ["/", "desktop-layer"])
return
let autoStart = document.body.querySelector("wde-autostart")

2
front/src/wde/widgets/file-view/file-view.js
View File

@ -19,7 +19,7 @@ export default class WDEFileView{
this.parentElem = fileViewElem
fileViewElem.addEventListener('click', (event) => {
if (event.target.classList[0] == 'FileTileView')
if (event.target.classList[0] == 'file-view')
{
this.DeselectAll()
return

3
front/src/wde/widgets/file-view/file-view.less
View File

@ -1,7 +1,10 @@
@import "../../../theme.less";
.FileTileView{
width: 100%;
height: 100%;
background-color: @col-white;
/* FIXME Bug, on desktop mode top ~10 pixel are not active, like margin:10px */

4
front/src/wde/scrollbar/scrollbar.js → front/src/wde/widgets/scrollbar/scrollbar.js
View File

@ -5,10 +5,10 @@ export default class WdeScrollBar{
*/
constructor(scrollBarContainer, content){
let nonNativeScroll = false
// console.log(scrollBarContainer, content)
console.log(scrollBarContainer, content)
// let handler = scrollBarContainer.children[0]
//TODO On scroll move focus on window?
let handler = scrollBarContainer.querySelector(".ScrollBarScrollElement") //TODO Refactor classes
let handler = scrollBarContainer.querySelector(".scroll-element") //TODO Refactor classes
// console.log(handler)
handler.style.height = (content.clientHeight /content.scrollHeight)* handler.parentElement.clientHeight + 'px'

42
front/src/src/apps/wde/scrollbar/wde-scrollbar.css → front/src/wde/widgets/scrollbar/scrollbar.less
View File

@ -1,22 +1,22 @@
.scroller {
overflow-y: scroll;
scrollbar-color: #0A4C95 #C2D2E4;
border-radius: 0px;
}
// .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;
}
// .scroll-content {
// position: relative;
// width: 400px;
// height: 414px;
// top: -17px;
// padding: 20px 10px 20px 10px;
// overflow-y: auto;
// }
.ScrollbarPlace{
.scrollbar-place{
overflow: hidden;
border-left: 1px solid #555555;
border-left: @eff-border-grey;
width: 14px;
height: 100%;
@ -25,7 +25,7 @@
width: 14px;
height: 100%;
background-color: #EEEEEE;
// background-color: #EEEEEE;
/* Inside auto layout */
@ -35,8 +35,8 @@
flex-grow: 1;
}
.Focused .ScrollbarPlace{
border-left: 1px solid #000000;
.Focused .active .scrollbar-place{
border-left: @eff-border-black;
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),
@ -44,7 +44,7 @@
inset 2px 2px 0px rgba(0, 0, 0, 0.19);
}
.ScrollBarScrollElement{
.scroll-element{
position: relative;
visibility: hidden;
width: 14px;
@ -69,11 +69,11 @@
padding: 0px;
}
.Focused .ScrollBarScrollElement{
.Focused .active .scroll-element{
visibility: visible;
}
.ScrollBarScrollElementDrag{
.drag-element{
pointer-events: none;
/* background-color: #0A4C95; */
width: 7px;

66
front/src/wde/widgets/title-bar/title-bar.less Normal file
View File

@ -0,0 +1,66 @@
@import "../../effects.less";
@import "../../../theme.less";
.title-bar{
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;
}
.title-bar .lable{
position: relative;
top: 1px;
/* font-size: 13px; */
color: @col-grey;
pointer-events: none;
white-space: nowrap;
font-family: "Virtue";
letter-spacing: 0.35px;
}
.window-frame.Focused .title-bar .visual-drag-area{
&:extend(.rows-fill-shadowed);
pointer-events: none;
width: 100%;
height: 11px;
}
.title-bar .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 @col-raisin-black;
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;
}
.Focused .title-bar .button{
visibility:visible;
}

50
front/src/wde/window-frame.less Normal file
View File

@ -0,0 +1,50 @@
@import "../theme.less";
@import "./effects.less";
.window-frame{
position: absolute;
border: @eff-border-grey;
box-shadow: @eff-box-shadow-grey;
position: absolute;
background-color: @col-gainsboro;
/* Auto layout */
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 4px;
padding-top: 2px;
padding-right: 6px;
gap: 4px;
/* Inside auto layout */
flex: none;
order: 1;
align-self: stretch;
flex-grow: 1;
}
.window-frame.Focused{
background-color: @col-chinese-silver;
border: @eff-border-black;
box-shadow: @eff-box-shadow-grey, @eff-box-shadow-convex;
}
.content-border{
border: @eff-border-grey;
width: 100%;
height: 100%;
background-color: @col-bright-grey;
overflow: hidden;
overflow-x: hidden;
}
.Focused .content-border{
background-color: @col-gainsboro;
border: @eff-border-black;
box-shadow: @eff-box-shadow-adjective;
}

1
templates/base/mobile-desktop.html
View File

@ -1,4 +1,5 @@
<!DOCTYPE HTML>
<meta name="viewport" content="width=device-width, initial-scale=1">
<html lang="en" dir="ltr">
<title>Greg Brzezinski</title>
<head>

31
templates/finder/admin-app.html Normal file
View File

@ -0,0 +1,31 @@
{{ define "finder/admin-app.tmpl" }}
<div class="title-bar DragArea">
<button id="closeWindowButton" class="button" title="Close Window"></button>
<div id="Drag" class="visual-drag-area"></div>
<div class="lable">
Admin Finder
</div>
<div id="Drag" class="visual-drag-area"></div>
</div>
<div id="ContentBorder" class="content-border AdjectiveElement">
<div class="finder-content">
<div class="tool-bar">
<!-- <button id="BackButton">Back</button>
<button id="UpButton">Up</button>
<button id="RootButton">/</button>
<button id="HomeButton">Home</button>
<div class="AddressBar" contentEditable="true">You Favorite Movie</div> -->
</div>
<div class="file-view-container">
<div class="FileTileView">
</div>
{{template "wde-widgets/scrollbar.tmpl" .}}
</div>
</div>
</div>
{{ end }}

32
templates/finder/admin-app.tmpl
View File

@ -1,32 +0,0 @@
{{ define "finder/admin-app.tmpl" }}
<div class="TitleBar DragArea">
<button id="closeWindowButton" class="Button" title="Close Window"></button>
<div id="Drag" class="VisualDragArea"></div>
<div class="Lable">
Admin Finder
</div>
<div id="Drag" class="VisualDragArea"></div>
</div>
<div id="ContentBorder" class="ContentBorder AdjectiveElement">
<div class="FinderContent">
<!-- TODO Fix ConvexElement -->
<div class="ToolBar ConvexElement">
<button id="BackButton">Back</button>
<button id="UpButton">Up</button>
<button id="RootButton">/</button>
<button id="HomeButton">Home</button>
<div class="AddressBar" contentEditable="true">You Favorite Movie</div>
</div>
<div class="FinderFileView">
<div class="FileTileView">
</div>
{{template "wde-widgets/scrollbar.tmpl" .}}
</div>
</div>
</div>
{{ end }}

5
templates/finder/app.tmpl → templates/finder/app.html
View File

@ -10,8 +10,7 @@
</div>
<div id="ContentBorder" class="ContentBorder AdjectiveElement">
<div class="FinderContent">
<!-- TODO Fix ConvexElement -->
<!-- <div class="FinderContent">
<div class="ToolBar ConvexElement">
Folder info
</div>
@ -20,7 +19,7 @@
</div>
{{template "wde-widgets/scrollbar.tmpl" .}}
</div>
</div>
</div> -->
</div>
{{ end }}

22
templates/finder/mobile-app.html Normal file
View File

@ -0,0 +1,22 @@
{{ define "finder/mobile-app.tmpl" }}
<div id="ContentBorder" class="content-border AdjectiveElement">
<div class="finder-content">
<div class="tool-bar">
<!-- <button id="BackButton">Back</button>
<button id="UpButton">Up</button>
<button id="RootButton">/</button>
<button id="HomeButton">Home</button>
<div class="AddressBar" contentEditable="true">You Favorite Movie</div> -->
</div>
<div class="file-view-container">
<div class="FileTileView">
</div>
{{template "wde-widgets/scrollbar.tmpl" .}}
</div>
</div>
</div>
{{ end }}

8
templates/finder/mobile-app.tmpl
View File

@ -1,8 +0,0 @@
{{ define "finder/mobile-app.tmpl" }}
<div class="MobileContentBorder">
<div class="FileTileView">
</div>
</div>
{{ end }}

8
templates/personal-properties/app.html
View File

@ -1,11 +1,11 @@
{{ define "personal-properties/app.tmpl" }}
<div class="TitleBar DragArea">
<div class="title-bar DragArea">
<button id="closeWindowButton" class="Button" title="Close Window"></button>
<div id="Drag" class="VisualDragArea"></div>
<div id="Drag" class="visual-drag-area"></div>
<div class="Lable">About me</div>
<div id="Drag" class="VisualDragArea"></div>
<div id="Drag" class="visual-drag-area"></div>
</div>
<div class="ContentBorder AdjectiveElement">
<div class="content-border">
<div class="PersPropsContent">
<div class="PropsView">
<div class="PropertiesList">

8
templates/wde-widgets/scrollbar.html Normal file
View File

@ -0,0 +1,8 @@
{{ define "wde-widgets/scrollbar.tmpl" }}
<div class="scrollbar-place">
<div class="scroll-element">
<div class="drag-element">
</div>
</div>
</div>
{{ end }}

8
templates/wde-widgets/scrollbar.tmpl
View File

@ -1,8 +0,0 @@
{{ define "wde-widgets/scrollbar.tmpl" }}
<div class="ScrollbarPlace">
<div class="ScrollBarScrollElement">
<div class="ScrollBarScrollElementDrag">
</div>
</div>
</div>
{{ end }}