add file-view rendering

resources/base.css

@@ -8,7 +8,12 @@
     src:url("./virtue.ttf")
 }
 
-
+.NoClick {
+    pointer-events: none;
+ }
+.Click {
+    pointer-events: all;
+}
 *{
     font-family: Verdana, Geneva, sans-serif;
     font-size: 11px;

resources/sys/finder/finder.js

@@ -7,20 +7,22 @@ class Finder{
         this.appElem = appElem
     }
 
-    NewWindow(){
+    /**
+    * @param {string} path
+    */
+    NewWindow(path){
         console.log("Init")
         fetch(`${window.location.origin}/application/${this.appId}/render`) //TODO Move to wde func. Or Not?
         .then((response) => response.text())
         .then((html) => {
-            // console.log(document.body)
-            // let heigth = Math.max(document.body.clientHeight*0.8, scrollDiv.children[0].scrollHeight) //TODO
             let newWindow = WebDesktopEnvironment.CreateNewWindow(this.appId, "Personal Properties", 500, 400 )
+
+           
             
             newWindow.innerHTML = html
-
-            
-            // let scrollDiv = newWindow.children[1]
-            // let scrollBar = new WdeScrollBar(scrollDiv.children[1].children[0], scrollDiv.children[0])
+            console.log(newWindow.children[1].children[0])
+            let fileView = new FileView("/kek", newWindow.children[1].children[0])
+            let scrollBar = new WdeScrollBar(newWindow.children[1].children[1], newWindow.children[1].children[0])
 
             let closeButton = newWindow.children[0].children[0]
             closeButton.addEventListener('click', function (params) {
@@ -29,6 +31,9 @@ class Finder{
         })
         .catch((error) => {
             WebDesktopEnvironment.Alert(error);
-        });
+        })
+
+
+
     }
 }

resources/sys/wde/file-view.js

@@ -0,0 +1,42 @@
+class FileView{
+    path = ""
+    /**
+    * @param {string} path
+    * @param {HTMLElement} fileViewElem
+    */
+    constructor(path, fileViewElem){
+        this.path = path
+
+        this.openFolder(path, fileViewElem)
+
+        // let scrollDiv = fileViewElem.children[1]
+        // console.log(scrollDiv)
+        // let scrollBar = new WdeScrollBar(fileViewElem.children[1].children[0], fileViewElem.children[0])
+
+        fileViewElem.addEventListener('click', (event) => {
+            this.click(event)
+        })
+    }
+    
+    /**
+    * @param {event} event
+    */
+    click(){
+        console.log(event.target)
+    }
+
+    /** Get html of folder by path
+    * @param {string} path
+    * @param {HTMLElement} parentElem
+    */
+    openFolder(path, parentElem){
+        console.log(`${window.location.origin}/system/wde/widgets/file-tile-view?path=${path}`)
+        fetch(`${window.location.origin}/system/wde/widgets/file-tile-view?path=${path}`) //TODO Move to wde func. Or Not?
+        .then((response) => response.text())
+        .then((html) => {
+            parentElem.innerHTML = html
+        }).catch((error) => {
+            WebDesktopEnvironment.Alert(error);
+        })
+    }
+}

resources/sys/wde/wde-scrollbar.js

@@ -1,10 +1,12 @@
 class WdeScrollBar{
     /**
-    * @param {HTMLElement} handler
+    * @param {HTMLElement} scrollBarContainer
     * @param {HTMLElement} content
     */
-    constructor(handler, content){
+    constructor(scrollBarContainer, content){
         let nonNativeScroll = false
+        console.log(scrollBarContainer)
+        let handler = scrollBarContainer.children[0]
     
         handler.style.height = (content.clientHeight /content.scrollHeight)* handler.parentElement.clientHeight + 'px'
     

resources/wdeUI.css

@@ -112,24 +112,6 @@
     filter: drop-shadow(1px 1px 0px #777777);
 }
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
 .scroller {
     overflow-y: scroll;
     scrollbar-color: #0A4C95 #C2D2E4;
@@ -202,5 +184,45 @@
 
 .FileTileView{
     width: 100%;
-    height: 100%;
+    height: auto;
+
+    /* Auto layout */
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: flex-start;
+    gap: 50px;
+    row-gap: 20px;
+    padding: 15px;
+    flex-wrap: wrap;
+    align-content: flex-start;
+
+    overflow: scroll;
+    /* overflow-x: hidden; */
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none;  /* Internet Explorer 10+ */
+}
+
+.FileTileView::-webkit-scrollbar { /* WebKit */
+    width: 0;
+    height: 0;
+}
+
+.FileTile{
+    width: 50px; 
+    height: 50px; 
+    /* Auto layout */
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 2px;
+    padding: 0px;
+    flex-wrap: nowrap;
+}
+
+.FileTileIcon{
+    width: 32px; 
+    height: 32px; 
+    background-image: url("sys/wde/icons/folder.png");
 }

routewde/wde.go

@@ -2,6 +2,7 @@ package routewde
 
 import (
 	"net/http"
+	"personalwebsite/webfilesystem"
 
 	"github.com/gin-gonic/gin"
 )
@@ -10,4 +11,16 @@ func Route(route *gin.RouterGroup) {
 	route.GET("/getbasicwindow", func(ctx *gin.Context) {
 		ctx.HTML(http.StatusOK, "basic-window.html", nil)
 	})
+
+	widgets := route.Group("widgets")
+	{
+		widgets.GET("/file-tile-view", func(ctx *gin.Context) {
+			fs := webfilesystem.WebFileSystem{}
+			list := fs.List()
+			ctx.HTML(http.StatusOK, "wde-widgets/file-tile-view.tmpl", gin.H{
+				"Name":  "Greg Brzezinski",
+				"Files": list,
+			})
+		})
+	}
 }

templates/base/index.tmpl

@@ -7,6 +7,7 @@
         <link rel="stylesheet" href="/res/sys/wde/simple-scrollbar.css">
         <link rel="stylesheet" href="/res/sys/personal-properties/personal-properies.css">
         <script src="/res/sys/wde/wde-scrollbar.js"></script>
+        <script src="/res/sys/wde/file-view.js"></script>
         <script src="res/wde.js"></script>
         <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> -->
         <!-- <script src="res/decorat.js"></script> -->

templates/finder/app.tmpl

@@ -7,7 +7,12 @@
         </div>
         <div id="Drag" class="WindowDragArea"></div>
     </div>
-    {{template "wde-widgets/file-tile-view.tmpl" .}}
+    <div class="ContentBorder">
+        <div class="FileTileView">
+
+        </div>
+        {{template "wde-widgets/scrollbar.tmpl" .}}
+    </div>
 {{ end }}
 
 				

templates/wde-widgets/file-tile-view.tmpl

@@ -1,5 +1,8 @@
 {{ define "wde-widgets/file-tile-view.tmpl" }}
-    <div class="FileTileView">
-
-    </div>
+        {{ range $fileTile := .Files }}
+            <div class="FileTile">
+                <div class="FileTileIcon NoClick"></div>
+                <div class="FileTileTitle NoClick">{{ $fileTile.FileName }}</div>
+            </div>  
+        {{ end }}
 {{ end }}

templates/wde-widgets/file-tile.tmpl

@@ -0,0 +1,6 @@
+{{ define "wde-widgets/file-tile.tmpl" }}
+    <div class="FileTile">
+        <div class="FileTileIcon"></div>
+        <div class="FileTileTitle">{{ .Name }}</div>
+    </div>  
+{{ end }}

webfilesystem/webfilesystem.go

@@ -0,0 +1,17 @@
+package webfilesystem
+
+type WebFileSystem struct {
+	folders []*Folder
+}
+
+func (fs *WebFileSystem) List() []*File {
+	return []*File{{"Kek.kek"}, {"lel.lol"}, {"pretty.blog"}, {"ofiget.html"}, {"Kek.kek"}, {"lel.lol"}, {"pretty.blog"}, {"ofiget.html"}, {"Kek.kek"}, {"lel.lol"}, {"pretty.blog"}, {"ofiget.html"}, {"Kek.kek"}, {"lel.lol"}, {"pretty.blog"}, {"ofiget.html"}}
+}
+
+type Folder struct {
+	files []*File
+}
+
+type File struct {
+	FileName string
+}