Working mobile and desktop views

front/src/apps/finder/finder-window.js

@@ -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} */
+    /** @type {Finder} */
-    #wde
     #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) },

front/src/apps/finder/finder.js

@@ -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, "Finder")
-        super(wde)
     }
 
     /**
     * @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)

front/src/desktop.js

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

front/src/mobile.js

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

front/src/mobile.less

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

front/src/wde/application.js

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

front/src/wde/sunboard/sunboard-mobile.js

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

front/src/wde/wde-desktop.js

@@ -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){
+        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
-*/

front/src/wde/wde-mobile.js

@@ -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) => {
+        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(){
         let barNode = document.body.querySelector("#controls-bar")//TODO Validate
 

front/src/wde/wde.js

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

res/dev-fs/dist/finder.css

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

res/dev-fs/dist/mobile_style.css

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

templates/base/mobile-desktop.html

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