Update apps

front/package-lock.json

@@ -15,6 +15,7 @@
         "css-loader": "^6.7.2",
         "less": "^4.1.3",
         "less-loader": "^11.1.0",
+        "mini-css-extract-plugin": "^2.7.6",
         "style-loader": "^3.3.1",
         "webpack": "^5.88.2",
         "webpack-cli": "^5.1.4",
@@ -6351,6 +6352,78 @@
         "node": ">=6"
       }
     },
+    "node_modules/mini-css-extract-plugin": {
+      "version": "2.7.6",
+      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.7.6.tgz",
+      "integrity": "sha512-Qk7HcgaPkGG6eD77mLvZS1nmxlao3j+9PkrT9Uc7HAE1id3F41+DdBRYRYkbyfNRGzm8/YWtzhw7nVPmwhqTQw==",
+      "dev": true,
+      "dependencies": {
+        "schema-utils": "^4.0.0"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.0.0"
+      }
+    },
+    "node_modules/mini-css-extract-plugin/node_modules/ajv": {
+      "version": "8.12.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
+      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/mini-css-extract-plugin/node_modules/ajv-keywords": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
+      "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3"
+      },
+      "peerDependencies": {
+        "ajv": "^8.8.2"
+      }
+    },
+    "node_modules/mini-css-extract-plugin/node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "dev": true
+    },
+    "node_modules/mini-css-extract-plugin/node_modules/schema-utils": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.2.0.tgz",
+      "integrity": "sha512-L0jRsrPpjdckP3oPug3/VxNKt2trR8TcabrM6FOAAlvC/9Phcmm+cuAgTlxBqdBR1WJx7Naj9WHw+aOmheSVbw==",
+      "dev": true,
+      "dependencies": {
+        "@types/json-schema": "^7.0.9",
+        "ajv": "^8.9.0",
+        "ajv-formats": "^2.1.1",
+        "ajv-keywords": "^5.1.0"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
     "node_modules/minimalistic-assert": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",

front/package.json

@@ -7,6 +7,7 @@
     "css-loader": "^6.7.2",
     "less": "^4.1.3",
     "less-loader": "^11.1.0",
+    "mini-css-extract-plugin": "^2.7.6",
     "style-loader": "^3.3.1",
     "webpack": "^5.88.2",
     "webpack-cli": "^5.1.4",

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

@@ -0,0 +1,281 @@
+
+export default class FinderWindow{
+    curPath = ""
+    fileView = undefined
+    windowElem = undefined
+    
+    async Init(args, appContext){
+        if (args[1] == "--desktop"){
+            let desktopNode = document.body.querySelector(`#${args[2]}`)
+            if (desktopNode == null){
+                WebDesktopEnvironment.Alert("Desktop node not found")
+                return
+            }
+
+            const params = new URLSearchParams({
+                path: args[0]
+            })
+            const response = await fetch(`/app/${Finder.AppId}/renderDesktop?` + params,
+            {
+                method: "POST",
+                body: JSON.stringify(appContext)
+            })
+            if (response.status != 200){
+                console.log(response.status)
+                WebDesktopEnvironment.Alert("Error in render desktop") //TODO
+                return
+            }
+            const html = await response.text()
+            desktopNode.innerHTML = html
+            
+            this.fileView = new 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: WebDesktopEnvironment.isMobile})
+        const response = await fetch(`/app/${Finder.AppId}/render?` + params,  
+        {
+            method: "POST",
+            body: JSON.stringify(appContext)
+        })
+        if (response.status != 200){
+            const error = await response.json()
+            WebDesktopEnvironment.Alert(error.message)
+            return
+        }
+        const html = await response.text()
+        
+        let newWindow = WebDesktopEnvironment.CreateNewWindow(Finder.AppId, 500, 350 )    
+        newWindow.innerHTML = html
+        
+        this.fileView = new 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', function (params) {
+                
+                WebDesktopEnvironment.CloseWindow(newWindow)
+                
+            })
+            
+            newWindow.querySelector("#RootButton").addEventListener('click', () =>{
+                this.RenderDir('/')
+            })
+            
+            newWindow.querySelector("#HomeButton").addEventListener('click', () =>{
+                this.RenderDir('/home/user')
+            })
+            
+            let scrollBar = new WdeScrollBar(newWindow.querySelector(".ScrollbarPlace"), newWindow.querySelector(".FileTileView"))
+            
+            this.windowElem = newWindow
+            this.RenderDir(args[0])
+        }
+    
+    /**
+    * @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 {
+                WebDesktopEnvironment.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()
+                }
+            }
+            return
+            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){
+                WebDesktopEnvironment.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":
+                WebDesktopEnvironment.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":
+                WebDesktopEnvironment.Open(`${parentPath}/${fileName}`, [])
+                break
+            case fileExtension == "blog":
+                WebDesktopEnvironment.Open(`/Applications/BlogViewer.app`, [`${parentPath}/${fileName}`])
+                break
+            case fileType == "directory":
+                WebDesktopEnvironment.Open(`/Applications/Finder.app`, [`${parentPath}/${fileName}`])
+                break
+            case fileExtension == "blog":
+                WebDesktopEnvironment.Open("/Applications/BlogViewer.app", [`${parentPath}/${fileName}`])
+                break
+            case fileExtension == "jpeg" | fileExtension == "png":
+                WebDesktopEnvironment.Open("img-viewer", [`${parentPath}/${fileName}`])
+                break;
+            default:
+                WebDesktopEnvironment.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/${Finder.AppId}/contextMenu?` + params) 
+        if (response.status != 200){
+            WebDesktopEnvironment.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":
+                        WebDesktopEnvironment.Open(`/Applications/${Finder.AppId}.app`,[`${this.curPath}/${fileName}`])
+                        break
+                    default:
+                        break;
+                } 
+            }
+            overlay.remove()
+        })
+        overlay.addEventListener('contextmenu', (event) => {
+            event.preventDefault();
+            overlay.remove()
+        })
+    }
+}

front/src/apps/finder/finder.js

@@ -0,0 +1,40 @@
+require("./finder.less")
+
+import FinderWindow from "./finder-window"
+
+class Finder{
+    static AppId = "Finder"
+
+    /**
+    * @param {string[]} args
+    */
+    async NewWindow(args, runContext){
+        let newFinder = new FinderWindow()
+        await newFinder.Init(args, runContext)
+    }
+    
+    /**
+     * @param {string} path
+     * @returns {boolean}
+    */
+    static async RenderProperites(path){
+        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 = WebDesktopEnvironment.CreateNewWindow(Finder.AppId, 350, 500 )    
+        newWindow.innerHTML = html
+        newWindow.querySelector("#closeWindowButton").addEventListener('click', function (params) {
+            WebDesktopEnvironment.CloseWindow(newWindow)
+        })
+    }
+}
+

front/src/apps/finder/finder.less

@@ -0,0 +1,39 @@
+.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;
+}

front/src/decorat/desktop-decorat.js

@@ -1,12 +1,11 @@
 export default class DesktopDecorat{
-    // static windowsLayer
     /** @type {Element} */
-    static windowLayer
+    #windowsLayer
 
     constructor(){
         this.windowLayer = document.body.querySelector('#windows-layer')
-        DesktopDecorat.windowsLayer = document.body.querySelector('#windows-layer')
-        if (!WebDesktopEnvironment.isMobile) {
+        // this.#windowsLayer = document.body.querySelector('#windows-layer')
+        this.#windowsLayer = document.body.querySelector('#windows-layer')
         let startDrag = function(event) {
             let window = event.target.closest('.WindowFrame')
             DesktopDecorat.bringWindowToFront(window)
@@ -26,20 +25,19 @@ export default class DesktopDecorat{
                 addEventListener('mouseup', stopDrag)
             }
         }
-            DesktopDecorat.windowsLayer.addEventListener('mousedown', startDrag)
-        }
+        this.#windowsLayer.addEventListener('mousedown', startDrag)
     }
     
     /**
      * @param {HTMLElement} window
     */
     static bringWindowToFront(window){ //FIXME
-        let previousWindow = DesktopDecorat.windowsLayer.lastChild
+        let previousWindow = this.#windowsLayer.lastChild
         if (window == null || window == undefined){
             return
         }
         if (window != previousWindow){
-            DesktopDecorat.windowsLayer.insertBefore(window, previousWindow.nextSibling)
+            this.#windowsLayer.insertBefore(window, previousWindow.nextSibling)
             previousWindow.classList.remove("Focused")
             window.classList.add("Focused")
         } else {

front/src/desktop.less

@@ -0,0 +1 @@
+@import "./wde/sunboard/sunboard-desktop.less";

front/src/mobile.less

@@ -1,4 +1,19 @@
-// @import "./wde/desktop/mobile-desktop.less"
-.body{
-    background-color: aqua;
+@import "./wde/sunboard/sunboard-mobile.less";
+
+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;
 }

front/src/theme.less

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

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

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

front/src/wde/desktop/mobile-desktop.less

@@ -1,3 +0,0 @@
-.test{
-    background-color: aqua;
-}

front/src/wde/primitives.less

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

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

@@ -0,0 +1,7 @@
+export default class MobileDesktop{
+    /**@type {Element} */
+    #icons
+    constructor(){
+        this.#icons = document.body.querySelector("")
+    }
+}

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

@@ -0,0 +1,27 @@
+@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;
+}
+

front/src/wde/wde-desktop.js

@@ -1,7 +1,9 @@
 import DesktopDecorat from "../decorat/desktop-decorat";
 import WdeScrollBar from "./scrollbar/scrollbar";
 import WebFS from "../web-fs/web-fs";
+// import DesktopSunBoard from "./sunboard/sunboard-desktop";
 export default class WebDesktopEnvironment{
+    /**@type {DesktopDecorat} */
     #decorat
     static Applications = {};
     static isMobile = false
@@ -13,6 +15,11 @@ export default class WebDesktopEnvironment{
         
         WebDesktopEnvironment.webFs = new WebFS()
         // this.loadWDE()
+        this.#devLoadSunboard()
+    }
+
+    async #devLoadSunboard(){
+        // let sunBoard = new DesktopSunBoard()
     }
 
     async loadWDE(){
@@ -39,17 +46,7 @@ export default class WebDesktopEnvironment{
             // console.log(appPath, args)
             await WebDesktopEnvironment.Open(appPath, args)
         }
-
         autoStart.remove()
-
-        // await WebDesktopEnvironment.load2('/Applications/Finder.app', [ "desktop", document.querySelector('#desktop-layer')]) //FIXME
-        // await WebDesktopEnvironment.Open('/Applications/Finder.app', ["/home/user/.desktop", "-desktop", document.querySelector('#desktop-layer')])
-        // await WebDesktopEnvironment.Open('/Applications/Finder.app', ["/home/user/Blogs",])
-        // await WebDesktopEnvironment.Open('/Applications/Finder.app', ["/home/user",])
-        // await WebDesktopEnvironment.Open('/Applications/Finder.app', ["/home",])
-        // WebDesktopEnvironment.Open('/Applications/AboutMe.app', [])
-        // WebDesktopEnvironment.Open('/Applications/FinderAdmin.app', ["/home/user",])
-        // await WebDesktopEnvironment.Open('/Applications/BlogViewer.app', ["/home/user/Blogs/blog1.blog",])
     }
 
     /**
@@ -206,13 +203,6 @@ export default class WebDesktopEnvironment{
         document.body.querySelector('#windows-layer').appendChild(newWindow)
     }
     
-    static CheckMobile(){    
-        var check = false;
-        (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
-        return check;
-    }
-
-    
     /**
     * @param {num} length
     */

front/webpack.config.js

@@ -7,7 +7,7 @@ const isProduction = process.env.NODE_ENV == 'production';
 
 const stylesHandler = 'style-loader';
 
-
+const MiniCssExtractPlugin = require("mini-css-extract-plugin")
 
 const config = {
     // entry: [ './src/wde-mobile.js'],
@@ -15,6 +15,7 @@ const config = {
         init: './src/init.js',
         mobile: './src/mobile.js',
         desktop: './src/desktop.js',
+        finder: './src/apps/finder/finder.js'
     },
     output: {
         // path: path.resolve(__dirname, 'dist'),
@@ -25,10 +26,7 @@ const config = {
         open: true,
         host: 'localhost',
     },
-    plugins: [
-        // Add your plugins here
-        // Learn more about plugins from https://webpack.js.org/configuration/plugins/
-    ],
+    plugins: [new MiniCssExtractPlugin()],
     module: {
         rules: [
             {
@@ -41,7 +39,8 @@ const config = {
             },
             {
                 test: /\.less$/i,
-                use: [stylesHandler, 'css-loader', 'less-loader'],
+                // use: [stylesHandler, 'css-loader', 'less-loader'],
+                use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'],
             },
             {
                 test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,

res/dev-fs/wde/dist/finder.css

@@ -0,0 +1,35 @@
+/*!**********************************************************************************************************************!*\
+  !*** 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/wde/dist/mobile.css

@@ -0,0 +1,49 @@
+/*!**********************************************************************************************************!*\
+  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./src/mobile.less ***!
+  \**********************************************************************************************************/
+.WdePrimitives.AdjectiveElement,
+#down-bar {
+  border: 1px solid #555555;
+}
+#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: #9999CC;
+}
+#down-bar {
+  width: 100%;
+  height: 150px;
+  background-color: #C0C0C0;
+}
+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;
+}
+

routes/private.go

@@ -56,12 +56,12 @@ func PrivateRoutes(port string, webfs *webfilesystem.WebFileSystem, webde *wde.W
 
 		autostart := []AppString{desktop, appString, aboutMe}
 		d := mobile.GetDevice(ctx)
-
+		_ = autostart
 		switch {
 		// Hey I'm a desktop!... or laptop but not a mobile or tablet!
 		case d.Normal():
 			ctx.HTML(http.StatusOK, "index.html", gin.H{
-				"autostart": autostart,
+				// "autostart": autostart,
 			})
 		// Hey I'm a mobile device!
 		case d.Mobile():

templates/base/mobile-desktop.html

@@ -2,28 +2,14 @@
 <html lang="en" dir="ltr">
     <title>Greg Brzezinski</title>
     <head>
-        <!-- TODO: Move css init to js -->
-        <!-- <link rel="stylesheet" type="text/css" href="res/dev-fs/wde/base.css">
-
-        <link rel="stylesheet" type="text/css" href="res/dev-fs/wde/wdeUI.css">
-        <link rel="stylesheet" type="text/css" href="res/dev-fs/wde/basic-widgets.css">
-        <link rel="stylesheet" type="text/css" href="res/dev-fs/wde/wde-scrollbar.css">
-        <link rel="stylesheet" type="text/css" href="res/dev-fs/wde/file-view.css">
-
-        <link rel="stylesheet" href="res/dev-fs/apps/Finder/finder.css">
-        <link rel="stylesheet" href="/res/dev-fs/apps/AboutMe/about-me.css">
-        <link rel="stylesheet" href="/res/dev-fs/apps/ImgViewer/img-viewer.css">
-        <link rel="stylesheet" href="/res/dev-fs/apps/BlogViewer/blog-viewer.css">
-
-        <script src="res/dev-fs/wde/dist/desktop.js"></script>
-        <script src="res/dev-fs/wde/decorat.js"></script>
-        <script src="res/dev-fs/wde/webfs.js"></script>
-        <script src="/res/dev-fs/wde/wde-scrollbar.js"></script>
-        <script src="/res/dev-fs/wde/file-view.js"></script> -->
         <script src="res/dev-fs/wde/dist/mobile.js"></script>
+        <link rel="stylesheet" type="text/css" href="res/dev-fs/wde/dist/mobile.css">
     </head>
     <body>
+        <div id="mobile-sunboard">
+            <div id="icons"></div>
+            <div id="down-bar"></div>
+        </div>
         <div id="applications"></div>
-        <div id="windows-layer"></div>
     </body>
 </html>