From 671bfd65bc65b14ff4449a4730d20f676f53c9f6 Mon Sep 17 00:00:00 2001 From: cyber-dream Date: Thu, 23 Mar 2023 00:53:06 +0300 Subject: [PATCH] add file-view rendering --- resources/base.css | 7 ++- resources/sys/finder/finder.js | 21 +++++--- resources/sys/wde/file-view.js | 42 ++++++++++++++++ resources/sys/wde/icons/folder.png | 3 ++ resources/sys/wde/wde-scrollbar.js | 6 ++- resources/wdeUI.css | 60 ++++++++++++++++------- routewde/wde.go | 13 +++++ templates/base/index.tmpl | 1 + templates/finder/app.tmpl | 7 ++- templates/wde-widgets/file-tile-view.tmpl | 9 ++-- templates/wde-widgets/file-tile.tmpl | 6 +++ webfilesystem/webfilesystem.go | 17 +++++++ 12 files changed, 158 insertions(+), 34 deletions(-) create mode 100644 resources/sys/wde/file-view.js create mode 100644 resources/sys/wde/icons/folder.png create mode 100644 templates/wde-widgets/file-tile.tmpl create mode 100644 webfilesystem/webfilesystem.go diff --git a/resources/base.css b/resources/base.css index 3186f3f..e1051db 100644 --- a/resources/base.css +++ b/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; diff --git a/resources/sys/finder/finder.js b/resources/sys/finder/finder.js index c63081c..05e5d09 100644 --- a/resources/sys/finder/finder.js +++ b/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); - }); + }) + + + } } diff --git a/resources/sys/wde/file-view.js b/resources/sys/wde/file-view.js new file mode 100644 index 0000000..5258a04 --- /dev/null +++ b/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); + }) + } +} \ No newline at end of file diff --git a/resources/sys/wde/icons/folder.png b/resources/sys/wde/icons/folder.png new file mode 100644 index 0000000..6dbce6d --- /dev/null +++ b/resources/sys/wde/icons/folder.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:63f31a841a0c59b2c2676023ba7f85947d97314b1fb276eab11e72a013b0cf2d +size 1574 diff --git a/resources/sys/wde/wde-scrollbar.js b/resources/sys/wde/wde-scrollbar.js index dec643c..79ec279 100644 --- a/resources/sys/wde/wde-scrollbar.js +++ b/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' diff --git a/resources/wdeUI.css b/resources/wdeUI.css index c294390..5cecd3d 100644 --- a/resources/wdeUI.css +++ b/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"); } \ No newline at end of file diff --git a/routewde/wde.go b/routewde/wde.go index fb8f08b..9a3a9ad 100644 --- a/routewde/wde.go +++ b/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, + }) + }) + } } diff --git a/templates/base/index.tmpl b/templates/base/index.tmpl index c37212d..d56a317 100644 --- a/templates/base/index.tmpl +++ b/templates/base/index.tmpl @@ -7,6 +7,7 @@ + diff --git a/templates/finder/app.tmpl b/templates/finder/app.tmpl index 6a42c0d..202bf57 100644 --- a/templates/finder/app.tmpl +++ b/templates/finder/app.tmpl @@ -7,7 +7,12 @@
- {{template "wde-widgets/file-tile-view.tmpl" .}} +
+
+ +
+ {{template "wde-widgets/scrollbar.tmpl" .}} +
{{ end }} \ No newline at end of file diff --git a/templates/wde-widgets/file-tile-view.tmpl b/templates/wde-widgets/file-tile-view.tmpl index e690268..b8b9058 100644 --- a/templates/wde-widgets/file-tile-view.tmpl +++ b/templates/wde-widgets/file-tile-view.tmpl @@ -1,5 +1,8 @@ {{ define "wde-widgets/file-tile-view.tmpl" }} -
- -
+ {{ range $fileTile := .Files }} +
+
+
{{ $fileTile.FileName }}
+
+ {{ end }} {{ end }} \ No newline at end of file diff --git a/templates/wde-widgets/file-tile.tmpl b/templates/wde-widgets/file-tile.tmpl new file mode 100644 index 0000000..5a3f188 --- /dev/null +++ b/templates/wde-widgets/file-tile.tmpl @@ -0,0 +1,6 @@ +{{ define "wde-widgets/file-tile.tmpl" }} +
+
+
{{ .Name }}
+
+{{ end }} \ No newline at end of file diff --git a/webfilesystem/webfilesystem.go b/webfilesystem/webfilesystem.go new file mode 100644 index 0000000..aeb12f7 --- /dev/null +++ b/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 +}