open and dynamic load app

This commit is contained in:
cyber-dream 2023-04-12 20:04:25 +03:00
parent 671bfd65bc
commit 91cd53c147
11 changed files with 122 additions and 61 deletions

1
go.mod
View File

@ -12,6 +12,7 @@ require (
github.com/go-playground/universal-translator v0.18.1 // indirect
github.com/go-playground/validator/v10 v10.11.2 // indirect
github.com/goccy/go-json v0.10.0 // indirect
github.com/google/uuid v1.3.0
github.com/json-iterator/go v1.1.12 // indirect
github.com/klauspost/cpuid/v2 v2.0.9 // indirect
github.com/leodido/go-urn v1.2.1 // indirect

2
go.sum
View File

@ -21,6 +21,8 @@ github.com/goccy/go-json v0.10.0/go.mod h1:6MelG93GURQebXPDq3khkgXZkazVtN9CRI+MG
github.com/golang/protobuf v1.5.0/go.mod h1:FsONVRAS9T7sI+LIUmWTfcYkHO4aIWwzhcaSAoJOfIk=
github.com/google/go-cmp v0.5.5/go.mod h1:v8dTdLbMG2kIc/vJvl+f65V22dbkXbowE6jgT/gNBxE=
github.com/google/gofuzz v1.0.0/go.mod h1:dBl0BpW6vV/+mYPU4Po3pmUjxk6FQPldtuIdl/M65Eg=
github.com/google/uuid v1.3.0 h1:t6JiXgmwXMjEs8VusXIJk2BXHsn+wx8BZdTaoZ5fu7I=
github.com/google/uuid v1.3.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
github.com/json-iterator/go v1.1.12 h1:PV8peI4a0ysnczrg+LtxykD8LfKY9ML6u2jnxaEnrnM=
github.com/json-iterator/go v1.1.12/go.mod h1:e30LSqwooZae/UwlEbR2852Gd8hjQvJoHmT4TnhNGBo=
github.com/klauspost/cpuid/v2 v2.0.9 h1:lgaqFMSdTdQYdZ04uHyN2d/eKdOMyi2YLSvlQIBFYa4=

View File

@ -11,6 +11,7 @@
</head>
<body>
<div id="WindowsLayer"></div>
<div id="Applications"></div>
<!-- <div id="TestWindow" style="width: 100px; height: 100px; background-color: darkkhaki; position: absolute;" >
<div id="TestWindowHeader" class="WindowDragArea" style="width: 100%;height: 15px; background-color: cornflowerblue;">
</div> -->

View File

@ -1,27 +1,22 @@
class Finder{
appId = "finder"
/**
* @param {HTMLElement} appElem
*/
constructor(appElem){
this.appElem = appElem
constructor(){
// this.appElem = appElem
}
/**
* @param {string} path
*/
NewWindow(path){
console.log("Init")
// console.log("Init")
fetch(`${window.location.origin}/application/${this.appId}/render`) //TODO Move to wde func. Or Not?
.then((response) => response.text())
.then((html) => {
let newWindow = WebDesktopEnvironment.CreateNewWindow(this.appId, "Personal Properties", 500, 400 )
let newWindow = WebDesktopEnvironment.CreateNewWindow(this.appId, 500, 350 )
newWindow.innerHTML = html
console.log(newWindow.children[1].children[0])
let fileView = new FileView("/kek", newWindow.children[1].children[0])
// console.log(newWindow.children[1].children[0])
let fileView = new FileView("/kek", newWindow.children[1].children[0], this.click)
let scrollBar = new WdeScrollBar(newWindow.children[1].children[1], newWindow.children[1].children[0])
let closeButton = newWindow.children[0].children[0]
@ -32,8 +27,21 @@ class Finder{
.catch((error) => {
WebDesktopEnvironment.Alert(error);
})
}
/**
* @param {MouseEvent} event
* @param {string} path
*/
click(event, path){
let fileName = event.target.getAttribute("fileName")
let fileExtension = fileName.split(".")[fileName.split(".").length - 1]
switch (fileExtension) {
case "lol":
WebDesktopEnvironment.Open("finder", ["pizda"])
break;
default:
console.log("Unsupported file type")
break;
}
}
}

View File

@ -1,6 +1,3 @@
// const simpleScrollbar = require("../wde/simple-scrollbar");
class PersonalProperties{
appId = "personal-properties"
/**
@ -10,14 +7,16 @@ class PersonalProperties{
this.appElem = appElem
}
Init(){
console.log("Init")
/**
* @param {string} path
*/
NewWindow(path){
fetch(`${window.location.origin}/application/personal-properties/render`) //TODO Move to wde func. Or Not?
.then((response) => response.text())
.then((html) => {
// console.log(document.body)
// let heigth = Math.max(document.body.clientHeight*0.8, scrollDiv.children[0].scrollHeight) //TODO
let newWindow = WebDesktopEnvironment.CreateNewWindow(this.appId, "Personal Properties", 360, document.body.clientHeight*0.8 )
let newWindow = WebDesktopEnvironment.CreateNewWindow(this.appId, 360, document.body.clientHeight*0.8 )
newWindow.innerHTML = html
@ -33,4 +32,33 @@ class PersonalProperties{
WebDesktopEnvironment.Alert(error);
});
}
}
// Init(){
// console.log("Init")
// fetch(`${window.location.origin}/application/personal-properties/render`) //TODO Move to wde func. Or Not?
// .then((response) => response.text())
// .then((html) => {
// // console.log(document.body)
// // let heigth = Math.max(document.body.clientHeight*0.8, scrollDiv.children[0].scrollHeight) //TODO
// let newWindow = WebDesktopEnvironment.CreateNewWindow(this.appId, "Personal Properties", 360, document.body.clientHeight*0.8 )
// newWindow.innerHTML = html
// let closeButton = newWindow.children[0].children[0]
// let scrollDiv = newWindow.children[1]
// let scrollBar = new WdeScrollBar(scrollDiv.children[1].children[0], scrollDiv.children[0])
// closeButton.addEventListener('click', function (params) {
// WebDesktopEnvironment.CloseWindow(newWindow)
// })
// })
// .catch((error) => {
// WebDesktopEnvironment.Alert(error);
// });
// }
}
class test{
}

View File

@ -3,8 +3,10 @@ class FileView{
/**
* @param {string} path
* @param {HTMLElement} fileViewElem
* @param {Function} clickCallback
*/
constructor(path, fileViewElem){
constructor(path, fileViewElem, clickCallback){
//TODO check all params
this.path = path
this.openFolder(path, fileViewElem)
@ -14,23 +16,16 @@ class FileView{
// let scrollBar = new WdeScrollBar(fileViewElem.children[1].children[0], fileViewElem.children[0])
fileViewElem.addEventListener('click', (event) => {
this.click(event)
clickCallback(event)
})
}
/**
* @param {event} event
*/
click(){
console.log(event.target)
}
/** Get html of folder by path
* @param {string} path
* @param {HTMLElement} parentElem
*/
openFolder(path, parentElem){
console.log(`${window.location.origin}/system/wde/widgets/file-tile-view?path=${path}`)
// console.log(`${window.location.origin}/system/wde/widgets/file-tile-view?path=${path}`)
fetch(`${window.location.origin}/system/wde/widgets/file-tile-view?path=${path}`) //TODO Move to wde func. Or Not?
.then((response) => response.text())
.then((html) => {

View File

@ -5,7 +5,7 @@ class WdeScrollBar{
*/
constructor(scrollBarContainer, content){
let nonNativeScroll = false
console.log(scrollBarContainer)
// console.log(scrollBarContainer)
let handler = scrollBarContainer.children[0]
handler.style.height = (content.clientHeight /content.scrollHeight)* handler.parentElement.clientHeight + 'px'

View File

@ -1,19 +1,18 @@
document.addEventListener('DOMContentLoaded', function() {
wde = new WebDesktopEnvironment
WebDesktopEnvironment.Open("finder")
// WebDesktopEnvironment.Open("personal-properties")
}, false);
class WebDesktopEnvironment{
static Applications = {};
constructor(){
// console.log(window)
this.wc = new WindowsCompositor
//Get basic window ready frame
fetch(`${window.location.origin}/system/wde/getbasicwindow`) //TODO Move to wde func
.then((response) => response.text())
.then((html) => {
WebDesktopEnvironment.SetBasicWindow(html)
// let app = this.loadApp("personal-properties")
let finder = this.loadApp("finder")
})
.catch((error) => {
WebDesktopEnvironment.Alert(error);
@ -22,42 +21,67 @@ class WebDesktopEnvironment{
/**
* @param {string} appId
* @param {function} func callback after script loading
* @returns {Application | undefined}
*/
loadApp(appId){
let newApp = document.createElement("application")
newApp.setAttribute("id", `application-${appId}`)
let appElem = document.getElementById("WindowsLayer").appendChild(newApp)
static LoadApp(appId, func){
console.log(`Load application ${appId}`)
let appDiv = document.createElement("application")
appDiv.setAttribute("id", `application-${appId}`)
document.getElementById("WindowsLayer").appendChild(appDiv)
let script = document.createElement("script")
script.setAttribute("id", `application-script-${appId}`)
script.setAttribute("src", `${window.location.origin}/system/applications/${appId}/app.js`)
script.setAttribute("async", "false")
appElem.appendChild(script)
script.addEventListener("load", function () {
newApp
let appElem = document.getElementById("Applications").appendChild(script)
script.addEventListener('load', (event) =>{
switch (appId) {
case "finder":
let newApp = new Finder(appElem)
newApp.NewWindow()
break;
let newFinderApp = new Finder()
this.Applications[appId] = newFinderApp
func()
return newFinderApp
case "personal-properties":
let newPersonalPropertiesApp = new PersonalProperties()
this.Applications[appId] = newPersonalPropertiesApp
func()
return newPersonalPropertiesApp
default:
break;
}
}, false)
})
}
/**
* @param {string} appId
* @param {string[]} args
*/
static Open(appId, args){
if (this.Applications[appId] == undefined){
console.log(`Application ${appId} is not loaded yet`)
WebDesktopEnvironment.LoadApp(appId, () =>{
this.Applications[appId].NewWindow(args)
// console.log(this.Applications)
})
} else {
this.Applications[appId].NewWindow(args)
}
}
/**
* @param {string} appId
* @param {string} windowName
* @param {number} width
* @param {number} height
* @returns {HTMLElement}
*/
static CreateNewWindow(appId, windowName, width, height) {
static CreateNewWindow(appId, width, height) {
let appElem = document.getElementById(`application-${appId}`)
let newWindow = document.createElement("div")
newWindow.setAttribute("class", "StandartApplicationWindow")
@ -74,19 +98,19 @@ class WebDesktopEnvironment{
let app = window.parentElement
window.remove()
// console.log(app.childElementCount)
if (app.childElementCount < 2){
console.log(app)
app.remove()
}
// if (app.childElementCount < 2){
// console.log(app)
// app.remove()
// }
}
static basicWindow
/**
* @param {string} html
*/
static SetBasicWindow(html){
this.basicWindow = html
}
/**
* @returns {string}
*/
@ -96,13 +120,11 @@ class WebDesktopEnvironment{
}
/**
*
* @param {string} alertText
*/
static Alert(alertText){
console.log(alertText)
}
}
var getJSON = function(url, callback) {

View File

@ -16,6 +16,7 @@
</head>
<body>
<div id="WindowsLayer"></div>
<div id="Applications"></div>
<!-- <div id="TestWindow" style="width: 100px; height: 100px; background-color: darkkhaki; position: absolute;" >
<div id="TestWindowHeader" class="WindowDragArea" style="width: 100%;height: 15px; background-color: cornflowerblue;">
</div> -->

View File

@ -1,6 +1,6 @@
{{ define "wde-widgets/file-tile-view.tmpl" }}
{{ range $fileTile := .Files }}
<div class="FileTile">
<div id="{{ $fileTile.Id }}" class="FileTile" fileName="{{$fileTile.FileName}}">
<div class="FileTileIcon NoClick"></div>
<div class="FileTileTitle NoClick">{{ $fileTile.FileName }}</div>
</div>

View File

@ -1,11 +1,13 @@
package webfilesystem
import "github.com/google/uuid"
type WebFileSystem struct {
folders []*Folder
}
func (fs *WebFileSystem) List() []*File {
return []*File{{"Kek.kek"}, {"lel.lol"}, {"pretty.blog"}, {"ofiget.html"}, {"Kek.kek"}, {"lel.lol"}, {"pretty.blog"}, {"ofiget.html"}, {"Kek.kek"}, {"lel.lol"}, {"pretty.blog"}, {"ofiget.html"}, {"Kek.kek"}, {"lel.lol"}, {"pretty.blog"}, {"ofiget.html"}}
return []*File{{uuid.NewString(), "Kek.kek"}, {uuid.NewString(), "lel.lol"}}
}
type Folder struct {
@ -13,5 +15,6 @@ type Folder struct {
}
type File struct {
Id string
FileName string
}