Create img viewer

main.go

@@ -6,6 +6,7 @@ import (
 	"personalwebsite/routewde"
 	"personalwebsite/websiteapp"
 	"personalwebsite/websiteapp/finder"
+	imgviewer "personalwebsite/websiteapp/img-viewer"
 	"personalwebsite/websiteapp/personalprops"
 
 	"github.com/gin-gonic/gin"
@@ -39,11 +40,13 @@ func main() {
 
 	persPropsApp := personalprops.NewPersPropsApp()
 	finderApp := finder.FinerApplication{}
+	imgViewerApp := imgviewer.NewImgViewerApp()
 	appsStorage := websiteapp.ApplicationsStorage{
 		Apps: map[string]websiteapp.WebDEApplication{},
 	}
 	appsStorage.Apps["personal-properties"] = &persPropsApp
 	appsStorage.Apps["finder"] = &finderApp
+	appsStorage.Apps["img-viewer"] = &imgViewerApp
 	system := router.Group("system")
 	{
 
@@ -96,6 +99,12 @@ func main() {
 				ctx.HTML(http.StatusOK, "finder/app.tmpl", finderApp.Render())
 			})
 		}
+		imgViewerRoute := app.Group("img-viewer")
+		{
+			imgViewerRoute.GET("render", func(ctx *gin.Context) {
+				ctx.HTML(http.StatusOK, "img-viewer/app.tmpl", imgViewerApp.Render())
+			})
+		}
 	}
 	router.GET("/test", func(ctx *gin.Context) {
 		ctx.HTML(200, "kek/kek.tmpl", gin.H{})

resources/sys/finder/finder.js

@@ -39,6 +39,9 @@ class Finder{
             case "lol":
                 WebDesktopEnvironment.Open("finder", ["pizda"])
                 break;
+            case "img":
+                WebDesktopEnvironment.Open("img-viewer", ["pizda"])
+                break;
             default:
                 console.log("Unsupported file type")
                 break;

resources/sys/img-viewer/img-viewer.css

@@ -0,0 +1,17 @@
+.Img-Viewer-Picture-Container{
+    width: 100%;
+    height: 100%;
+}
+.Img-Viewer-Picture{
+    width: 100%;
+    height: 100%;
+    background-image: url("./test-image.jpg");
+    background-size:     contain;
+    background-repeat:   no-repeat;
+    background-position: center center; 
+}
+
+.Img-Viewer-Picture-Toolbar{
+    width: 100%;
+    height: 35px;
+}

resources/sys/img-viewer/img-viewer.js

@@ -0,0 +1,29 @@
+class ImgViewer{
+    appId = "img-viewer"
+    /**
+    * @param {string} path
+    */
+    NewWindow(path){
+        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, 450,400  ) 
+            
+            newWindow.innerHTML = html
+
+            let closeButton = newWindow.children[0].children[0]
+
+            closeButton.addEventListener('click', function (params) {
+                WebDesktopEnvironment.CloseWindow(newWindow)
+            })
+        })
+        .catch((error) => {
+            WebDesktopEnvironment.Alert(error);
+        });
+    }
+}
+
+
+class test{
+        
+}

resources/wde.js

@@ -49,6 +49,11 @@ class WebDesktopEnvironment{
                     this.Applications[appId] = newPersonalPropertiesApp
                     func()
                     return newPersonalPropertiesApp
+                case "img-viewer":
+                    let newImgViewer = new ImgViewer()
+                    this.Applications[appId] = newImgViewer
+                    func()
+                    return newImgViewer
                 default:
                     break;
             }

templates/base/index.tmpl

@@ -6,6 +6,7 @@
         <link rel="stylesheet" type="text/css" href="res/wdeUI.css">
         <link rel="stylesheet" href="/res/sys/wde/simple-scrollbar.css">
         <link rel="stylesheet" href="/res/sys/personal-properties/personal-properies.css">
+        <link rel="stylesheet" href="/res/sys/img-viewer/img-viewer.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>

templates/img-viewer/app.tmpl

@@ -0,0 +1,20 @@
+{{ define "img-viewer/app.tmpl" }}
+    <div id="TestWindowHeader" class="WindowFrameTopBar">
+        <button id="closeWindowButton" class="WindowFrameTopBarButton" title="Close Window"></button>
+        <div id="Drag" class="WindowDragArea"></div>
+        <div class="WindowFrameTitle">
+            About me
+        </div>
+        <div id="Drag" class="WindowDragArea"></div>
+    </div>
+    <div class="ContentBorder">
+        <!-- <div class="Img-Viewer-Picture-Toolbar">
+            Toolbar
+        </div> -->
+        <div class="Img-Viewer-Picture-Container">
+            <div class="Img-Viewer-Picture">
+        </div>
+    </div>
+{{ end }}
+
+				

webfilesystem/webfilesystem.go

@@ -7,7 +7,7 @@ type WebFileSystem struct {
 }
 
 func (fs *WebFileSystem) List() []*File {
-	return []*File{{uuid.NewString(), "Kek.kek"}, {uuid.NewString(), "lel.lol"}}
+	return []*File{{uuid.NewString(), "Kek.kek"}, {uuid.NewString(), "lel.lol"}, {uuid.NewString(), "lel.img"}}
 }
 
 type Folder struct {

websiteapp/img-viewer/imgviewer.go

@@ -0,0 +1,35 @@
+package imgviewer
+
+import (
+	"personalwebsite/websiteapp"
+
+	"github.com/gin-gonic/gin"
+)
+
+type ImgViewerApp struct {
+	manifest websiteapp.ApplicationManifest
+}
+
+func NewImgViewerApp() ImgViewerApp {
+	newApp := ImgViewerApp{
+		manifest: websiteapp.ApplicationManifest{
+			AppId:      "img-viewer",
+			WindowName: "About me", //TODO: delete
+		},
+	}
+	return newApp
+}
+
+func (p *ImgViewerApp) GetManifest() websiteapp.ApplicationManifest {
+	return p.manifest
+}
+func (p *ImgViewerApp) GetId() string {
+	return p.manifest.AppId
+}
+
+func (p *ImgViewerApp) Render() gin.H {
+	return gin.H{
+		"Name":     "Greg Brzezinski",
+		"BasicBio": "Born 27.09.1998 at Saint-Petersburg",
+	}
+}