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{
#appId = "Finder" //FIXME
curPath = ""
fileView = undefined
windowElem = undefined
/** @type {WebDesktopEnvironment} */
#wde
/** @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-desktop").runContext} runContext
* @param {import("../../wde/wde.js").runContext} runContext
* @returns
*/
async Init(finder, args, runContext){
this.#finder = finder
this.#wde = runContext.WDE
if (runContext.isMobile){
console.log("Mobile Finder!")
this.CreateMobileView(args, runContext)
return
}
@ -43,13 +51,15 @@ export default class FinderWindow{
})
if (response.status != 200){
console.log(response.status)
this.#wde.Alert("Error in render desktop") //TODO
// this.#wde.Alert("Error in render desktop") //TODO
return
}
const html = await response.text()
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)},
(event) => { this.RightClick(event) },
(event, draggedElem) => { this.DropEvent(event, draggedElem)},
@ -76,7 +86,7 @@ export default class FinderWindow{
// console.log(this.#wde)
this.fileView = new runContext.WDE.FileView(
this.fileView = new this.#wde.FileView(
newWindow.querySelector(".FileTileView"),
(event) => { this.Click(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"
export default class Finder extends WDEApplication{
static AppId = "Finder"
/** @deprecated */
static AppId = "Finder"
/**
* @constructor
* @param {WebDesktopEnvironment} wde
*/
constructor(wde){
/** @type {WDEApplication} */
super(wde)
super(wde, "Finder")
}
/**
* @param {string[]} args
* @param {import("../../wde/wde-desktop.js").runContext} runContext
* @param {import("../../wde/wde.js").runContext} 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 {import("../../wde/wde-desktop.js").runContext} runContext
* @param {import("../../wde/wde.js").runContext} 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)
}
@ -40,7 +41,6 @@ export default class Finder extends WDEApplication{
* @returns {boolean}
*/
async RenderProperites(path){
// return
if (path == null || path ==""){
return
@ -55,7 +55,7 @@ export default class Finder extends WDEApplication{
}
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.querySelector("#closeWindowButton").addEventListener('click', function (params) {
// 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";
body{
zoom: var(--zoom);
zoom: 2;
position: absolute;
width: 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{
/** @type {WebDesktopEnvironment} */
/** @type {AbstractWebDesktopEnvironment} */
#wde
/** @type {string} */
AppId
/**
* @constructor
* @param {WebDesktopEnvironment} wde
* @param {AbstractWebDesktopEnvironment} wde
*/
constructor(wde){
constructor(wde, AppId){
this.#wde = wde
// console.log(wde)
this.AppId = AppId
}
getWde(){
/** @returns {AbstractWebDesktopEnvironment} */
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){
console.log(response.status)
// this.#wde.Alert("Error in render desktop") //TODO
return
}
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 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{
export default class WebDesktopEnvironment extends AbstractWebDesktopEnvironment{
/** @type {string} */
test = ""
/** @type {WDEFileView} */
@ -20,7 +21,10 @@ export default class WebDesktopEnvironment{
static isMobile = false
// static decorat
static webFs
constructor(){
super()
super._SetWDE(this)
document.body.style.setProperty('--zoom', 1)
this.Decorat = new DesktopDecorat()
@ -31,7 +35,6 @@ export default class WebDesktopEnvironment{
}
async loadWDE(){
let autoStart = document.body.querySelector("wde-autostart")
if (autoStart == null){
WebDesktopEnvironment.Alert("Error in loading DE")
@ -64,25 +67,15 @@ export default class WebDesktopEnvironment{
* @param {string} runPath
*/
async Open(appPath, args, runPath){
const appManifest = await WebDesktopEnvironment.fetchApp(appPath)
if (appManifest === undefined) return //TODO return err
/**@type {runContext} */
const runContext = {
WDE: this,
isMobile: false,
bundlePath: appPath,
runPath: runPath
}
if (WebDesktopEnvironment.Applications[appManifest.appId] === undefined){
WebDesktopEnvironment.load2(appManifest, () =>{
WebDesktopEnvironment.Applications[appManifest.appId].NewWindow(args, runContext)
})
} else {
WebDesktopEnvironment.Applications[appManifest.appId].NewWindow(args, runContext)
}
super._Open(appPath, args, runPath, (appManifest) =>{
super._GetApp(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} */
#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()
// this.loadWDE()
}
loadWDE(){
@ -29,17 +30,18 @@ export default class MobileWebDesktopEnvironment extends AbstractWebDesktopEnvir
* @param {string} runPath
*/
async Open(appPath, args, runPath){
super._Open(appPath, args, runPath, async (appManifest, runContext) => {
console.log(super._GetApp(appManifest.appId))
// console.log(super())
let contentView = await super._GetApp(appManifest.appId).NewWindow(args, runContext)
let view = this.Decorat.CreateNewView()
console.log(view)
view.appendChild(contentView)
// super._GetApp
})
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

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

@ -1,10 +1,14 @@
import WDEApplication from "./application.js"
export default class AbstractWebDesktopEnvironment{
/** @type {Object<string, WDEApplication>} */
/** @type {Object<string, WDEApplication>} */
_applications = {}
constructor(){
/** @type {AbstractWebDesktopEnvironment} */
#wde
/** @type {AbstractWebDesktopEnvironment} */
_SetWDE(wde){
this.#wde = wde
}
/**
@ -12,7 +16,7 @@ export default class AbstractWebDesktopEnvironment{
* @returns {Object | undefined} //FIXME
*/
async _FetchAppManifest(path){
console.log("path: " + path )
// console.log("path: " + path )
const params = new URLSearchParams({path: path, mode: "json"})
const response = await fetch(`/system/loadApp?` + params)
if (response.status != 200){
@ -27,28 +31,21 @@ export default class AbstractWebDesktopEnvironment{
/**
* @param {string} appPath
* @param {string[]} args
* @param {runContext} runContext
* @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)
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){
this.#loadApp(appManifest, () => {
callback(appManifest, runContext)
callback(appManifest)
})
} 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')
// 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()
let newApp = new app.default(this.#wde)
// if newApp //TODO Validate
this._applications[appManifest.appId] = newApp;
onload()
@ -72,7 +69,14 @@ export default class AbstractWebDesktopEnvironment{
}
_GetApp(appId){
console.log(appId)
// console.log(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;
}
body {
zoom: var(--zoom);
zoom: 2;
position: absolute;
width: 100%;
height: 100%;

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

@ -7,9 +7,9 @@
</head>
<body>
<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)
let kek = new WebDesktopEnvironment.default()
let kek = new wde.default()
</script>
<!-- <div id="mobile-sunboard">
</div> -->