add file-view rendering

main.go

@@ -90,7 +90,12 @@ func main() {
 				ctx.HTML(http.StatusOK, "personal-properties/app.tmpl", persPropsApp.Render())
 			})
 		}
-
+		finderAppRoute := app.Group("finder")
+		{
+			finderAppRoute.GET("render", func(ctx *gin.Context) {
+				ctx.HTML(http.StatusOK, "finder/app.tmpl", finderApp.Render())
+			})
+		}
 	}
 	router.GET("/test", func(ctx *gin.Context) {
 		ctx.HTML(200, "kek/kek.tmpl", gin.H{})

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;
@@ -59,8 +64,7 @@ body{
     gap:4px;
 }
 
-.WindowFrameTopBar{
-    /* background-color: aqua; */
+/* .WindowFrameTopBar{
     width: 100%;
     height: 13px;
 
@@ -70,7 +74,7 @@ body{
     justify-content: space-between;
     gap: 5px;
     padding: 0px;
-}
+} */
 
 
 

resources/sys/finder/finder.js

@@ -1,5 +1,3 @@
-
-
 class Finder{
     appId = "finder"
     /**
@@ -9,32 +7,33 @@ class Finder{
         this.appElem = appElem
     }
 
-    Init(){
+    /**
+    * @param {string} path
+    */
+    NewWindow(path){
         console.log("Init")
-        fetch(`${window.location.origin}/application/${this.appId}/render`) //TODO Move to wde func
+        fetch(`${window.location.origin}/application/${this.appId}/render`) //TODO Move to wde func. Or Not?
         .then((response) => response.text())
         .then((html) => {
-            let newWindow = WebDesktopEnvironment.CreateNewWindow(this.appId, "Finder", 600, 500) 
+            let newWindow = WebDesktopEnvironment.CreateNewWindow(this.appId, "Personal Properties", 500, 400 )
+
+           
             
             newWindow.innerHTML = html
+            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) {
                 WebDesktopEnvironment.CloseWindow(newWindow)
             })
         })
         .catch((error) => {
             WebDesktopEnvironment.Alert(error);
-        });
+        })
+
+
+
     }
-
-    CloseWindow(id){
-        console.log(id+"Close")
-    }
-    
-}
-
-function reply_click(){
-    console.log("QQQQQQQQQQQQQQQQQQQ")
 }

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/wde.js

@@ -12,8 +12,8 @@ class WebDesktopEnvironment{
         .then((response) => response.text())
         .then((html) => {
             WebDesktopEnvironment.SetBasicWindow(html)
-            let app = this.loadApp("personal-properties")
-            // let finder = this.loadApp("finder")
+            // let app = this.loadApp("personal-properties")
+            let finder = this.loadApp("finder")
         })
         .catch((error) => {
             WebDesktopEnvironment.Alert(error);
@@ -36,8 +36,17 @@ class WebDesktopEnvironment{
         script.setAttribute("async", "false")
         appElem.appendChild(script)
         script.addEventListener("load", function () {
-            let newApp = new PersonalProperties(appElem)
-            newApp.Init()
+             newApp
+            switch (appId) {
+                case "finder":
+                    let newApp = new Finder(appElem)
+                    newApp.NewWindow()
+                    break;
+            
+                default:
+                    break;
+            }
+                  
         }, false)
     }
 
@@ -157,4 +166,3 @@ class WindowsCompositor{
         element.style.top = (posY - element.children[0].clientHeight*0.5) + "px";
     }
 }
-

resources/wdeUI.css

@@ -4,6 +4,7 @@
     flex-direction: column;
     align-items: flex-start;
     padding: 4px;
+    padding-top: 2px;
     padding-right: 6px;
     gap: 4px;
 
@@ -18,24 +19,6 @@
     order: 1;
     align-self: stretch;
     flex-grow: 1;
-    /* width: 100%;
-    
-
-    background-color: #CCCCCC;
-
-    border: 1px solid #000000;
-    box-shadow: 1px 1px 0px #000,
-                inset -1px -1px 0px rgba(0, 0, 0, 0.27), 
-                inset 1px 1px 0px #FFFFFF;
-
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    padding: 4px;
-    
-    gap:4px;
-
-    overflow: hidden; */
 }
 
 .ContentBorder {
@@ -64,6 +47,8 @@
     width: 11px;
     height: 11px;
     padding: 0%;
+    position: relative;
+    top: 1px;
 
     background: linear-gradient(135deg, #999999 18.18%, #FFFFFF 81.82%);
     border: 1px solid #222222;
@@ -89,6 +74,7 @@
     gap: 5px;
     padding: 0px;
 
+
     /* Inside auto layout */
     flex: none;
     order: 0;
@@ -99,6 +85,7 @@
 .WindowFrameTopBar .WindowFrameTitle{
     position: relative;
     top:1px;
+    /* font-size: 13px; */
 
     pointer-events: none;
     white-space: nowrap;
@@ -119,30 +106,12 @@
 .WindowDragArea{
     pointer-events: none;
     width: 100%;
-    height: 100%;
+    height: 11px;
     background: linear-gradient(transparent 0%,white 0%, white 50%, transparent 50%);
     background-size: 2px 2px;
     filter: drop-shadow(1px 1px 0px #777777);
 }
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
 .scroller {
     overflow-y: scroll;
     scrollbar-color: #0A4C95 #C2D2E4;
@@ -211,3 +180,49 @@
     /* TODO white pixels in rows start */
     filter: drop-shadow(1px 1px 0px #333399);
 }
+
+
+.FileTileView{
+    width: 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/about-me/app.tmpl

@@ -0,0 +1,20 @@
+{{ define "about-me/app.tmpl" }}
+
+   <div class="StandartWindowFrame">
+        <div>
+            <div class="StandartWindowFrameTopBar">
+                <button id="closeWindowButton" class="StandartWindowFrameTopBarButton" title="Close Window"></button>
+                <div id="Drag" class="WindowDragArea"></div>
+                <div class="StandartWindowFrameTitle">
+                    About me
+                </div>
+                <div id="Drag" class="WindowDragArea"></div>
+            </div>
+            <div class="ContentBorder">
+                <div class="ScrollContent">
+                    TEST CONTENT
+                </div>
+                {{template "wde-widgets/scrollbar.tmpl" .}}
+        </div>
+   </div>
+{{ end }}

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

@@ -1,5 +1,18 @@
 {{ define "finder/app.tmpl" }}
-    Test Finder
+    <div id="TestWindowHeader" class="WindowFrameTopBar">
+        <button id="closeWindowButton" class="WindowFrameTopBarButton" title="Close Window"></button>
+        <div id="Drag" class="WindowDragArea"></div>
+        <div class="WindowFrameTitle">
+            Files
+        </div>
+        <div id="Drag" class="WindowDragArea"></div>
+    </div>
+    <div class="ContentBorder">
+        <div class="FileTileView">
+
+        </div>
+        {{template "wde-widgets/scrollbar.tmpl" .}}
+    </div>
 {{ end }}
 
 				

templates/personal-properties/app.tmpl

@@ -49,65 +49,8 @@
 						{{ end }}
 				</div>
 			</div>
-			<div class="ScrollbarPlace">
-				<div class="ScrollBarScrollElement">
-					<div class="ScrollBarScrollElementDrag">	
-					</div>
-				</div>
-			</div>
-
-			<!-- <div class="TestContent" style="width: 100%; height: auto; background-color: aquamarine;">AAAAAAAAAAAAAA</div>
-				<div id="ContentFrame " class="ContentFrame">
-					<div class="Personal-properties-bio">
-						<img src="res/img/default-avatar-photo-placeholder-profile-picture-vector.jpg" alt="My Photo" style="width: 48px;height: 48px;">
-						<div class="Personal-properties-textbio">
-							<div>{{ .Name }}</div>
-							<div>{{ .BasicBio }}</div>
-						</div>
-					</div> 
-					<div id="Test content" style="width: 100%; height: 1000px; background-color: aqua;">
-
-					</div>
-					 {{ range $propIsland := .allprops }}
-						<div id="prop" class="Personal-properties-prop">
-							<div class="Personal-properties-prop-title">
-								{{$propIsland.Header}}:
-							</div>
-							<div class="Personal-properties-prop-content">
-								{{range $prop := $propIsland.Props}}
-								<div class="Personal-properties-prop-row">
-									<div class="Personal-properties-prop-key">
-										{{$prop.Key}}:
-										{{ range $value := $prop.KeyComments }}
-										<div class="Personal-properties-prop-key-comments">    
-											{{ $value }} 
-										</div>
-										{{ end }}
-									</div>
-									<div class="Personal-properties-prop-values">
-										{{ range $value := $prop.Values }}
-										<div class="Personal-properties-prop-value">    
-											{{ $value }} 
-										</div>
-										{{ end }}
-									</div>
-								</div>
-							{{ end }}
-							</div>
-						</div>  
-
-					
-					{{ end }}
-				</div>
-				<div class="ScrollbarPlace">
-					<div class="ScrollBarScrollElement">
-						<div class="ScrollBarScrollElementDrag">	
-						</div>
-					</div>
-				</div> -->
+			{{template "wde-widgets/scrollbar.tmpl" .}}
 		</div>
-    <!-- </div> -->
-	
 {{ end }}
 
 				

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

@@ -0,0 +1,8 @@
+{{ define "wde-widgets/file-tile-view.tmpl" }}
+        {{ 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 }}

templates/wde-widgets/scrollbar.tmpl

@@ -0,0 +1,8 @@
+{{ define "wde-widgets/scrollbar.tmpl" }}
+    <div class="ScrollbarPlace">
+        <div class="ScrollBarScrollElement">
+            <div class="ScrollBarScrollElementDrag">	
+            </div>
+        </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
+}