Improve contex menu in finder, small fixes

apps/finder/finder.go

@@ -3,6 +3,7 @@ package finder
 import (
 	"net/http"
 	"personalwebsite/apps"
+	"personalwebsite/wde"
 	"personalwebsite/webfilesystem"
 
 	"github.com/gin-gonic/gin"
@@ -34,6 +35,54 @@ func (f *FinderApplication) Render(isMobile bool) gin.H {
 	return gin.H{}
 }
 
+func (f *FinderApplication) RenderContextMenu(context string, data string) gin.H {
+	islands := [][]wde.ContexMenuRow{}
+	switch context {
+	case "FileTileView":
+		islands = [][]wde.ContexMenuRow{
+			{
+				{
+					Label:  "New Directory",
+					Action: []string{},
+				},
+			},
+		}
+	case "directory":
+		islands = [][]wde.ContexMenuRow{
+			{
+				{Label: "Test"},
+				{Label: "Delete"},
+			},
+			{
+				{
+					Label:  "Get Info",
+					Action: []string{"openApp", "properties"},
+				},
+			},
+		}
+	default:
+		islands = [][]wde.ContexMenuRow{
+			{
+				{
+					Label: "temp Menu 1",
+				},
+				{
+					Label: "temp Menu 2",
+				},
+				{
+					Label: "temp Menu 3",
+				},
+				{
+					Label: "temp Menu 4",
+				},
+			},
+		}
+	}
+	return gin.H{
+		"Islands": islands,
+	}
+}
+
 func (f *FinderApplication) Routes(routes *gin.RouterGroup) {
 	routes.GET("render", func(ctx *gin.Context) {
 		isMobileParam := ctx.Query("isMobile")
@@ -61,7 +110,11 @@ func (f *FinderApplication) Routes(routes *gin.RouterGroup) {
 		}
 		ctx.HTML(http.StatusOK, "finder/desktop.tmpl", gin.H{})
 	})
+
 	routes.GET("contextMenu", func(ctx *gin.Context) {
-		ctx.HTML(http.StatusOK, "wde-widgets/context-menu.tmpl", gin.H{})
+		context := ctx.Query("context")
+		data := ctx.Query("data")
+		ginH := f.RenderContextMenu(context, data)
+		ctx.HTML(http.StatusOK, "wde-widgets/context-menu.tmpl", ginH)
 	})
 }

resources/sys/finder/finder.js

@@ -145,14 +145,19 @@ class Finder{
     RightClick(event){
         // console.log(event)
         // console.log()
-        if (event.target.className="FileTileView" ||event.target.getAttribute('filetype') != ""){
         this.CreateContextMenu(event.target, [event.clientY, event.clientX])
     }
-    }
 
     CreateContextMenu(target, pos){
+        let context
+        if (target.classList.contains("FileTileView"))
+        {
+            context = "FileTileView"
+
+        }
         fetch(`${window.location.origin}/application/${this.appId}/contextMenu?` + new URLSearchParams({
-            kek: "kek"
+            context: context
+            
         })) 
         .then((response) => response.text())
         .then((html) => {
@@ -161,21 +166,22 @@ class Finder{
             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.backgroundColor = '#000000';
             menu.style.top = pos[0] + "px";
             menu.style.left = pos[1] + "px";
             
             menu.innerHTML = html
+            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',(event) => {
-                if (event.target.className == "Row"){ //TODO add uuid id to rows to more accurate checks??
+                if (event.target.classList.contains("Row")){ //TODO add uuid id to rows to more accurate checks??
-                    // console.log("aaaa")
+                    //TODO
                 }
                 overlay.remove()
             })
@@ -187,23 +193,5 @@ class Finder{
         .catch((error) => {
             WebDesktopEnvironment.Alert(error);
         })   
-
-        
     }
-
-    // /**
-    // * @param {path} string
-    // */
-    // renderFileView(path){
-    //     fetch(`${window.location.origin}/fs/list?` + new URLSearchParams({
-    //         path: path,
-    //     }))
-    //     .then((response) => response.text())
-    //     .then((html) => {
-    //         this.fileView.innerHTML = html
-    //     })
-    //     .catch((error) => {
-    //         WebDesktopEnvironment.Alert(error);
-    //     })
-    // }
 }

resources/sys/wde/file-view.js

@@ -18,8 +18,7 @@ class FileView{
             }
             if (event.detail === 1){
                 this.DeselectAll()
-                this.selected.push(event.target)
+                this.Select([event.target])
-                event.target.classList.add("Selected")
             } else if (event.detail === 2) {
                 doubleClickCallback(event)
             }
@@ -27,10 +26,25 @@ class FileView{
 
         fileViewElem.addEventListener('contextmenu', (event) => {
             event.preventDefault();
+            if (event.target.classList.contains("Tile")){
+                this.DeselectAll()
+                this.Select([event.target])
+            }
+            this.Select([event.target])
             rightClickCallback(event)
         })
     }
 
+    /** 
+    * @param {[]Element} elements
+    */
+    Select(elements){
+        elements.forEach(element => {
+            this.selected.push(element)
+            element.classList.add("Selected")
+        });
+    }
+
     DeselectAll(){
         this.selected.forEach(element => {
             element.classList.remove("Selected")    

resources/wde.js

@@ -4,8 +4,8 @@ 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("blog-viewer", ["/home/user/blog/test-1.blog"])
         // WebDesktopEnvironment.Open("personal-properties", ["kek"])
     } else {
         WebDesktopEnvironment.Open("blog-viewer", ["/home/user/blog/test-1.blog"])

resources/wdeUI.css

@@ -60,6 +60,10 @@
     height: 0px;
 }
 
+.AdjectiveHorizontalLine:last-child {
+    height: 0%;
+    visibility: hidden;
+}
 
 
 .WindowFrame .TitleBar {

templates/wde-widgets/context-menu.tmpl

@@ -1,28 +1,12 @@
 {{ define "wde-widgets/context-menu.tmpl" }}
-    <!-- <div class="ContextMenu  WindowFrameShadow"> -->
         <div class="MenuContent ConvexElement">
+            {{ range $island := .Islands }}
+                {{ range $row := $island }}
                     <div class="Row">
-                <div class="Lable NoClick">Open</div>
+                        <div class="Lable NoClick" action="{{$row.Action}}">{{ $row.Label }}</div>
+                    </div>
+                {{ end }}
+                <div class="AdjectiveHorizontalLine"></div>
+            {{ end }}
         </div>
-            <div class="Row" actionType="" action="">
-                <div class="Lable NoClick">Test</div>
-            </div>
-            <div class="AdjectiveHorizontalLine"></div>
-            <div class="Row">
-                <div class="Lable NoClick">Lol kek</div>
-            </div>
-            <div class="Row">
-                <div class="Lable NoClick">Delete this file</div>
-            </div>
-            <div class="Row">
-                <div class="Lable NoClick">Save to computer</div>
-            </div>
-            <div class="Row">
-                <div class="Lable NoClick">Pizda</div>
-            </div>
-            <div class="Row">
-                <div class="Lable NoClick">Azaza</div>
-            </div>
-        </div>
-    <!-- </div> -->
 {{ end }}

wde/contextmenu.go

@@ -0,0 +1,10 @@
+package wde
+
+type ContexMenuIsland struct {
+	Rows []ContexMenuRow
+}
+
+type ContexMenuRow struct {
+	Label  string
+	Action []string
+}