Desktop with files and background

main.go

@@ -213,6 +213,14 @@ func main() {
 			finderAppRoute.GET("renderMobileDesktop", func(ctx *gin.Context) {
 				ctx.HTML(http.StatusOK, "finder/mobile-desktop.tmpl", gin.H{})
 			})
+			finderAppRoute.GET("renderDesktop", func(ctx *gin.Context) {
+				path := ctx.Query("path")
+				if path == "" {
+					ctx.JSON(http.StatusBadRequest, "no path provided")
+					return
+				}
+				ctx.HTML(http.StatusOK, "finder/desktop.tmpl", gin.H{})
+			})
 		}
 		imgViewerRoute := app.Group("img-viewer")
 		{

resources/sys/finder/finder.js

@@ -10,10 +10,14 @@ class Finder{
     }
 
     /**
-    * @param {string} path
+    * @param {string[]} args
     */
     NewWindow(args){
         this.path = args[0]
+        if (args[1] == "desktop"){
+            this.NewDesktop(args)
+            return
+        }
         fetch(`${window.location.origin}/application/${this.appId}/render?` + new URLSearchParams({
             isMobile: WebDesktopEnvironment.isMobile,
             // path: this.path,
@@ -25,7 +29,7 @@ class Finder{
             newWindow.innerHTML = html
             
             this.fileView = new FileView(newWindow.querySelector(".FileTileView"), (event) =>{
-                this.Click(event, this.path)
+                this.Click(event, false)
             })
             this.OpenDir(this.path)
             
@@ -39,7 +43,7 @@ class Finder{
 
             if (!WebDesktopEnvironment.isMobile){
                 // let scrollBar = new WdeScrollBar(newWindow.children[1].children[1], newWindow.children[1].children[0])// TODO to querry selector
-                console.log(newWindow.querySelector("#closeWindowButton"))
+                // console.log(newWindow.querySelector("#closeWindowButton"))
                 newWindow.querySelector("#closeWindowButton").addEventListener('click', function (params) {
                     
                     WebDesktopEnvironment.CloseWindow(newWindow)
@@ -52,6 +56,29 @@ class Finder{
         })
     }
 
+    /**
+    * @param {string[]} args
+    */
+    NewDesktop(args){
+        fetch(`${window.location.origin}/application/${this.appId}/renderDesktop?` + new URLSearchParams({
+            isMobile: WebDesktopEnvironment.isMobile,
+            path: args[0]
+        }))
+        .then((response) => response.text())
+        .then((html) => {
+            // console.log(args)
+            args[2].innerHTML = html
+            
+            this.fileView = new FileView(args[2].querySelector(".FileTileView"), (event) =>{
+                this.Click(event, true)
+            })
+            this.OpenDir(this.path)
+        })
+        .catch((error) => {
+            WebDesktopEnvironment.Alert(error);
+        })
+    }
+
     OpenPreviousDir(){
         if (this.pathHistory.length > 0){
             // console.log(this.pathHistory)
@@ -66,7 +93,6 @@ class Finder{
     * @param {string} path
     */
     OpenDir(path){
-        console.log()
         this.pathHistory += this.path
         this.path = path
         this.fileView.OpenFolder(this.path)
@@ -74,12 +100,17 @@ class Finder{
 
     /**
     * @param {MouseEvent} event
+    * @param {boolean} inNewWindow
     */
-    Click(event){
+    Click(event, inNewWindow){
         let fileType = event.target.getAttribute("fileType")
         let fileName = event.target.getAttribute("name")
         switch (fileType) {
             case "directory":
+                if (inNewWindow){
+                    WebDesktopEnvironment.Open("finder", ["/home/user/" + fileName]) //FIXME this.path is shared for all windows
+                    break
+                }
                 this.OpenDir(this.path +"/" + fileName)
                 break
             case "blog-page":

resources/wde.js

@@ -2,9 +2,9 @@ document.addEventListener('DOMContentLoaded', function() {
     // console.log(window.screen.width)
     wde = new WebDesktopEnvironment
     if (!WebDesktopEnvironment.isMobile){
-        WebDesktopEnvironment.Open("finder", ["/home/user"])
+        // WebDesktopEnvironment.Open("finder", ["/home/user"])
         // WebDesktopEnvironment.Open("blog-viewer", ["/home/user/blog/test-1.blog"])
-        WebDesktopEnvironment.Open("personal-properties", ["kek"])
+        // WebDesktopEnvironment.Open("personal-properties", ["kek"])
     } else {
         WebDesktopEnvironment.Open("blog-viewer", ["/home/user/blog/test-1.blog"])
     }
@@ -58,6 +58,12 @@ class WebDesktopEnvironment{
         } else{
             document.body.style.setProperty('--zoom', 1)
             
+                        let desktopLayer = document.createElement("div")
+                        desktopLayer.setAttribute('id', 'desktop-layer')
+                        desktopLayer.setAttribute('class', 'DesktopBackground')
+                        document.body.appendChild(desktopLayer)
+                        WebDesktopEnvironment.Open("finder", ["/home/user", "desktop", desktopLayer])
+            
             let windowsLayer = document.createElement("div")
             windowsLayer.setAttribute('id', 'windows-layer')
             document.body.appendChild(windowsLayer)

resources/wdeUI.css

@@ -349,3 +349,10 @@
     width: 0;
     height: 0;
 }
+
+.DesktopBackground{
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-color: #9999CC;
+}

templates/finder/desktop.tmpl

@@ -0,0 +1,6 @@
+{{ define "finder/desktop.tmpl" }}
+    <div class="FileTileView">
+    </div>
+{{ end }}
+
+