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

Working mobile and desktop views

Browse Source
This commit is contained in:
cyber-dream 2023-07-20 02:11:53 +03:00
parent edf011fccd
commit d61fa2bd4b
16 changed files with 141 additions and 190 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,28 +1,36 @@
// import WebDesktopEnvironment from "../../wde/wde-desktop" import AbstractWebDesktopEnvironment from "../../wde/wde.js"
import Finder from "./finder.js"
// import Finder from "./finder"
// import WebDesktopEnvironment from "../../wde/wde-desktop"
export default class FinderWindow{ export default class FinderWindow{
#appId = "Finder" //FIXME #appId = "Finder" //FIXME
curPath = "" curPath = ""
fileView = undefined fileView = undefined
windowElem = undefined windowElem = undefined
/** @type {WebDesktopEnvironment} */ /** @type {Finder} */
#wde
#finder #finder
/** @type {AbstractWebDesktopEnvironment} */
#wde
/**
* @constructor
* @param {Finder}
* @param {AbstractWebDesktopEnvironment} wde
*/
constructor(finder, wde){
this.#finder = finder
this.#wde = wde
}
/** /**
* @param {Finder} finder * @param {Finder} finder
* @param {*} args * @param {*} args
* @param {import("../../wde/wde-desktop").runContext} runContext * @param {import("../../wde/wde.js").runContext} runContext
* @returns * @returns
*/ */
async Init(finder, args, runContext){ async Init(finder, args, runContext){
this.#finder = finder this.#finder = finder
this.#wde = runContext.WDE
if (runContext.isMobile){ if (runContext.isMobile){
console.log("Mobile Finder!")
this.CreateMobileView(args, runContext) this.CreateMobileView(args, runContext)
return return
} }
@ -43,13 +51,15 @@ export default class FinderWindow{
}) })
if (response.status != 200){ if (response.status != 200){
console.log(response.status) console.log(response.status)
this.#wde.Alert("Error in render desktop") //TODO // this.#wde.Alert("Error in render desktop") //TODO
return return
} }
const html = await response.text() const html = await response.text()
desktopNode.innerHTML = html desktopNode.innerHTML = html
this.fileView = new runContext.WDE.FileView( // console.log(this.#wde)
this.fileView = new this.#wde.FileView(
desktopNode.querySelector(".FileTileView"), (event) =>{this.Click(event)}, desktopNode.querySelector(".FileTileView"), (event) =>{this.Click(event)},
(event) => { this.RightClick(event) }, (event) => { this.RightClick(event) },
(event, draggedElem) => { this.DropEvent(event, draggedElem)}, (event, draggedElem) => { this.DropEvent(event, draggedElem)},
@ -76,7 +86,7 @@ export default class FinderWindow{
// console.log(this.#wde) // console.log(this.#wde)
this.fileView = new runContext.WDE.FileView( this.fileView = new this.#wde.FileView(
newWindow.querySelector(".FileTileView"), newWindow.querySelector(".FileTileView"),
(event) => { this.Click(event) }, (event) => { this.Click(event) },
(event) => { this.RightClick(event) }, (event) => { this.RightClick(event) },

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

@ -5,33 +5,34 @@ import WebDesktopEnvironment from "../../wde/wde-desktop.js"
import FinderWindow from "./finder-window.js" import FinderWindow from "./finder-window.js"
export default class Finder extends WDEApplication{ export default class Finder extends WDEApplication{
static AppId = "Finder" /** @deprecated */
static AppId = "Finder"
/** /**
* @constructor * @constructor
* @param {WebDesktopEnvironment} wde * @param {WebDesktopEnvironment} wde
*/ */
constructor(wde){ constructor(wde){
/** @type {WDEApplication} */ super(wde, "Finder")
super(wde)
} }
/** /**
* @param {string[]} args * @param {string[]} args
* @param {import("../../wde/wde-desktop.js").runContext} runContext * @param {import("../../wde/wde.js").runContext} runContext
*/ */
async NewWindow(args, runContext){ async NewWindow(args, runContext){
let newFinder = new FinderWindow()
await newFinder.Init(this, args, runContext)
let newFinder = new FinderWindow(this, super.WDE())
await newFinder.Init(this, args, runContext)
} }
/** /**
* @param {string[]} args * @param {string[]} args
* @param {import("../../wde/wde-desktop.js").runContext} runContext * @param {import("../../wde/wde.js").runContext} runContext
*/ */
async NewView(args, runContext){ async NewView(args, runContext){
let newFinderView = new FinderWindow(this, args, runContext) // console.log(super.WDE())
let newFinderView = new FinderWindow(this, super.WDE())
await newFinderView.Init(this, args, runContext) await newFinderView.Init(this, args, runContext)
} }
@ -40,7 +41,6 @@ export default class Finder extends WDEApplication{
* @returns {boolean} * @returns {boolean}
*/ */
async RenderProperites(path){ async RenderProperites(path){
// return // return
if (path == null || path ==""){ if (path == null || path ==""){
return return
@ -55,7 +55,7 @@ export default class Finder extends WDEApplication{
} }
const html = await response.text() const html = await response.text()
let newWindow = super.getWde().Decorat.CreateNewWindow(Finder.AppId, 350, 500 ) let newWindow = super.WDE().Decorat.CreateNewWindow(Finder.AppId, 350, 500 )
newWindow.innerHTML = html newWindow.innerHTML = html
newWindow.querySelector("#closeWindowButton").addEventListener('click', function (params) { newWindow.querySelector("#closeWindowButton").addEventListener('click', function (params) {
// WebDesktopEnvironment.CloseWindow(newWindow) // WebDesktopEnvironment.CloseWindow(newWindow)

4
front/src/desktop.js
View File

@ -1,4 +0,0 @@
import WebDesktopEnvironment from "./wde/wde-desktop.js";
document.addEventListener('DOMContentLoaded', function() {
let wde = new WebDesktopEnvironment()
}, false);

5
front/src/mobile.js
View File

@ -1,5 +0,0 @@
import MobileWebDesktopEnvironment from "./wde/wde-mobile";
require("./mobile.less")
document.addEventListener('DOMContentLoaded', function() {
let wde = new MobileWebDesktopEnvironment()
}, false);

2
front/src/mobile.less
View File

@ -1,7 +1,7 @@
@import "./wde/sunboard/sunboard-mobile.less"; @import "./wde/sunboard/sunboard-mobile.less";
body{ body{
zoom: var(--zoom); zoom: 2;
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;

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

@ -1,18 +1,32 @@
import WebDesktopEnvironment from "./wde-desktop.js" import AbstractWebDesktopEnvironment from "./wde.js"
export default class WDEApplication{ export default class WDEApplication{
/** @type {WebDesktopEnvironment} */ /** @type {AbstractWebDesktopEnvironment} */
#wde #wde
/** @type {string} */
AppId
/** /**
* @constructor * @constructor
* @param {WebDesktopEnvironment} wde * @param {AbstractWebDesktopEnvironment} wde
*/ */
constructor(wde){ constructor(wde, AppId){
this.#wde = wde this.#wde = wde
// console.log(wde)
this.AppId = AppId
} }
getWde(){ /** @returns {AbstractWebDesktopEnvironment} */
WDE(){
return this.#wde return this.#wde
} }
async NewWindow(){
}
/** @returns {Element} */
async NewView(){
return this.#wde.Decorat.CreateNewView(this.AppId)
}
} }

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

@ -28,7 +28,6 @@ export default class MobileDesktop{
}) })
if (response.status != 200){ if (response.status != 200){
console.log(response.status) console.log(response.status)
// this.#wde.Alert("Error in render desktop") //TODO
return return
} }
const html = await response.text() const html = await response.text()

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

@ -3,9 +3,10 @@ import WDEScrollBar from "./scrollbar/scrollbar.js";
import WebFS from "../web-fs/web-fs.js"; import WebFS from "../web-fs/web-fs.js";
import WDEApplication from "./application.js"; import WDEApplication from "./application.js";
import WDEFileView from "./widgets/file-view/file-view.js"; import WDEFileView from "./widgets/file-view/file-view.js";
import AbstractWebDesktopEnvironment from "./wde.js";
// import DesktopSunBoard from "./sunboard/sunboard-desktop.js"; // import DesktopSunBoard from "./sunboard/sunboard-desktop.js";
export default class WebDesktopEnvironment{ export default class WebDesktopEnvironment extends AbstractWebDesktopEnvironment{
/** @type {string} */ /** @type {string} */
test = "" test = ""
/** @type {WDEFileView} */ /** @type {WDEFileView} */
@ -20,7 +21,10 @@ export default class WebDesktopEnvironment{
static isMobile = false static isMobile = false
// static decorat // static decorat
static webFs static webFs
constructor(){ constructor(){
super()
super._SetWDE(this)
document.body.style.setProperty('--zoom', 1) document.body.style.setProperty('--zoom', 1)
this.Decorat = new DesktopDecorat() this.Decorat = new DesktopDecorat()
@ -31,7 +35,6 @@ export default class WebDesktopEnvironment{
} }
async loadWDE(){ async loadWDE(){
let autoStart = document.body.querySelector("wde-autostart") let autoStart = document.body.querySelector("wde-autostart")
if (autoStart == null){ if (autoStart == null){
WebDesktopEnvironment.Alert("Error in loading DE") WebDesktopEnvironment.Alert("Error in loading DE")
@ -64,25 +67,15 @@ export default class WebDesktopEnvironment{
* @param {string} runPath * @param {string} runPath
*/ */
async Open(appPath, args, runPath){ async Open(appPath, args, runPath){
const appManifest = await WebDesktopEnvironment.fetchApp(appPath)
if (appManifest === undefined) return //TODO return err
/**@type {runContext} */
const runContext = { const runContext = {
WDE: this,
isMobile: false, isMobile: false,
bundlePath: appPath, bundlePath: appPath,
runPath: runPath runPath: runPath
} }
if (WebDesktopEnvironment.Applications[appManifest.appId] === undefined){ super._Open(appPath, args, runPath, (appManifest) =>{
WebDesktopEnvironment.load2(appManifest, () =>{ super._GetApp(appManifest.appId).NewWindow(args, runContext)
WebDesktopEnvironment.Applications[appManifest.appId].NewWindow(args, runContext) })
})
} else {
WebDesktopEnvironment.Applications[appManifest.appId].NewWindow(args, runContext)
}
} }
/** /**
@ -178,10 +171,3 @@ export default class WebDesktopEnvironment{
} }
/**
* @typedef {Object} runContext
* @property {WebDesktopEnvironment} WDE
* @property {boolean} isMobile
* @property {string} appPath
* @property {string} runPath //TODO
*/

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

@ -10,13 +10,14 @@ export default class MobileWebDesktopEnvironment extends AbstractWebDesktopEnvir
/** @type {MobileSunboard} */ /** @type {MobileSunboard} */
#sunBoard #sunBoard
constructor(){ constructor(){
super() super()
super._SetWDE(this)
document.body.style.setProperty('--zoom', 3) document.body.style.setProperty('--zoom', 3)
this.Decorat = new MobileDecorat() this.Decorat = new MobileDecorat()
this.FileView = WDEFileView this.FileView = WDEFileView
this.#sunBoard = new MobileSunboard(this) this.#sunBoard = new MobileSunboard(this)
this.loadWDE() // this.loadWDE()
} }
loadWDE(){ loadWDE(){
@ -29,17 +30,18 @@ export default class MobileWebDesktopEnvironment extends AbstractWebDesktopEnvir
* @param {string} runPath * @param {string} runPath
*/ */
async Open(appPath, args, runPath){ async Open(appPath, args, runPath){
super._Open(appPath, args, runPath, async (appManifest, runContext) => { const runContext = {
console.log(super._GetApp(appManifest.appId)) isMobile: true,
// console.log(super()) bundlePath: appPath,
let contentView = await super._GetApp(appManifest.appId).NewWindow(args, runContext) runPath: runPath
let view = this.Decorat.CreateNewView() }
console.log(view)
view.appendChild(contentView) super._Open(appPath, args, runPath, (appManifest) =>{
// super._GetApp super._GetApp(appManifest.appId).NewView(args, runContext)
}) }, this)
} }
#initControlsBar(){ #initControlsBar(){
let barNode = document.body.querySelector("#controls-bar")//TODO Validate let barNode = document.body.querySelector("#controls-bar")//TODO Validate

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

@ -1,10 +1,14 @@
import WDEApplication from "./application.js" import WDEApplication from "./application.js"
export default class AbstractWebDesktopEnvironment{ export default class AbstractWebDesktopEnvironment{
/** @type {Object<string, WDEApplication>} */ /** @type {Object<string, WDEApplication>} */
_applications = {} _applications = {}
constructor(){ /** @type {AbstractWebDesktopEnvironment} */
#wde
/** @type {AbstractWebDesktopEnvironment} */
_SetWDE(wde){
this.#wde = wde
} }
/** /**
@ -12,7 +16,7 @@ export default class AbstractWebDesktopEnvironment{
* @returns {Object | undefined} //FIXME * @returns {Object | undefined} //FIXME
*/ */
async _FetchAppManifest(path){ async _FetchAppManifest(path){
console.log("path: " + path ) // console.log("path: " + path )
const params = new URLSearchParams({path: path, mode: "json"}) const params = new URLSearchParams({path: path, mode: "json"})
const response = await fetch(`/system/loadApp?` + params) const response = await fetch(`/system/loadApp?` + params)
if (response.status != 200){ if (response.status != 200){
@ -27,28 +31,21 @@ export default class AbstractWebDesktopEnvironment{
/** /**
* @param {string} appPath * @param {string} appPath
* @param {string[]} args * @param {runContext} runContext
* @param {string} runPath * @param {string} runPath
* @param {callback} function * @param {function} callback
*/ */
async _Open(appPath, args, runPath, callback){ async _Open(appPath, runContext, runPath, callback){
const appManifest = await this._FetchAppManifest(appPath) const appManifest = await this._FetchAppManifest(appPath)
if (appManifest === undefined) return //TODO return err if (appManifest === undefined) return //TODO return err
/**@type {runContext} */
const runContext = {
WDE: this,
isMobile: true,
bundlePath: appPath,
runPath: runPath
}
if (this._applications[appManifest.appId] === undefined){ if (this._applications[appManifest.appId] === undefined){
this.#loadApp(appManifest, () => { this.#loadApp(appManifest, () => {
callback(appManifest, runContext) callback(appManifest)
}) })
} else { } else {
callback(appManifest, runContext) callback(appManifest)
} }
} }
@ -62,7 +59,7 @@ export default class AbstractWebDesktopEnvironment{
// console.log(window.location.origin + appManifest.js[0] == 'http://localhost:8080/res/dev-fs/wde/dist/finder.js') // 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' // let kek = 'http://localhost:8080/res/dev-fs/wde/dist/finder.js'
import('http://localhost:8080/res/dev-fs/dist/finder.js').then((app) => { import('http://localhost:8080/res/dev-fs/dist/finder.js').then((app) => {
let newApp = new app.default() let newApp = new app.default(this.#wde)
// if newApp //TODO Validate // if newApp //TODO Validate
this._applications[appManifest.appId] = newApp; this._applications[appManifest.appId] = newApp;
onload() onload()
@ -72,7 +69,14 @@ export default class AbstractWebDesktopEnvironment{
} }
_GetApp(appId){ _GetApp(appId){
console.log(appId) // console.log(appId)
return this._applications[appId] return this._applications[appId]
} }
} }
/**
* @typedef {Object} runContext
* @property {boolean} isMobile
* @property {string} appPath
* @property {string} runPath //TODO
*/

24
res/dev-fs/dist/desktop.js vendored
View File

File diff suppressed because one or more lines are too long

35
res/dev-fs/dist/finder.css vendored
View File

@ -1,35 +0,0 @@
/*!**********************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./src/apps/finder/finder.less ***!
\**********************************************************************************************************************/
.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;
}

28
res/dev-fs/dist/finder.js vendored
View File

File diff suppressed because one or more lines are too long

52
res/dev-fs/dist/mobile.js vendored
View File

File diff suppressed because one or more lines are too long

2
res/dev-fs/dist/mobile_style.css vendored
View File

@ -46,7 +46,7 @@
background-color: beige; background-color: beige;
} }
body { body {
zoom: var(--zoom); zoom: 2;
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;

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

@ -7,9 +7,9 @@
</head> </head>
<body> <body>
<script type="module"> <script type="module">
import * as WebDesktopEnvironment from '/res/dev-fs/dist/mobile.js'; import * as wde from '/res/dev-fs/dist/mobile.js';
// console.log(WebDesktopEnvironment) // console.log(WebDesktopEnvironment)
let kek = new WebDesktopEnvironment.default() let kek = new wde.default()
</script> </script>
<!-- <div id="mobile-sunboard"> <!-- <div id="mobile-sunboard">
</div> --> </div> -->