diff --git a/main.go b/main.go index 7edcb95..8d2b012 100644 --- a/main.go +++ b/main.go @@ -84,25 +84,48 @@ func main() { app := router.Group("application") { - app.GET("test", func(ctx *gin.Context) { - ctx.Status(http.StatusOK) - }) + // app.GET("test", func(ctx *gin.Context) { + // ctx.Status(http.StatusOK) + // }) persPropApp := app.Group("personal-properties") { persPropApp.GET("render", func(ctx *gin.Context) { - ctx.HTML(http.StatusOK, "personal-properties/app.tmpl", persPropsApp.Render()) + isMobileParam := ctx.Query("isMobile") + isMobile := isMobileParam == "true" + if isMobile { + ctx.HTML(http.StatusOK, "personal-properties/mobile-app.tmpl", persPropsApp.Render()) + } else { + 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()) + isMobileParam := ctx.Query("isMobile") + isMobile := isMobileParam == "true" + if isMobile { + ctx.HTML(http.StatusOK, "finder/mobile-app.tmpl", finderApp.Render(isMobile)) + } else { + ctx.HTML(http.StatusOK, "finder/app.tmpl", finderApp.Render(isMobile)) + } + + }) + finderAppRoute.GET("renderMobileDesktop", func(ctx *gin.Context) { + ctx.HTML(http.StatusOK, "finder/mobile-desktop.tmpl", gin.H{}) }) } imgViewerRoute := app.Group("img-viewer") { imgViewerRoute.GET("render", func(ctx *gin.Context) { - ctx.HTML(http.StatusOK, "img-viewer/app.tmpl", imgViewerApp.Render()) + isMobileParam := ctx.Query("isMobile") + isMobile := isMobileParam == "true" + if isMobile { + ctx.HTML(http.StatusOK, "img-viewer/mobile-app.tmpl", imgViewerApp.Render(isMobile)) + } else { + ctx.HTML(http.StatusOK, "img-viewer/app.tmpl", imgViewerApp.Render(isMobile)) + } + }) } } diff --git a/resources/base.css b/resources/base.css index e1051db..87fe174 100644 --- a/resources/base.css +++ b/resources/base.css @@ -8,6 +8,12 @@ src:url("./virtue.ttf") } +/* @media screen and (max-device-width: 2048px) and (max-device-height: 2048px) { + html { + zoom: 3 + } + } */ + .NoClick { pointer-events: none; } @@ -22,6 +28,7 @@ } body{ + zoom: var(--zoom); position: absolute; width: 100%; height: 100%; @@ -34,6 +41,7 @@ body{ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */ + touch-action: manipulation; } /* @font-face { @@ -46,7 +54,8 @@ body{ #WindowsLayer { width: 100%; height: 100%; - position: fixed; + /* position: fixed; */ + position: relative; } .Frame{ diff --git a/resources/mobile-wdeUI.css b/resources/mobile-wdeUI.css new file mode 100644 index 0000000..e941393 --- /dev/null +++ b/resources/mobile-wdeUI.css @@ -0,0 +1,51 @@ +#mobile-desktop{ + width: 100%; + height: 100%; + + background: #CCCCCC; + + /* Auto layout */ + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 0px; +} +#mobile-desktop #toolbar{ + width: 100%; + height: 50px; + + /* Auto layout */ + display: flex; + flex-direction: row; + align-items: stretch; + /* padding: 5px; */ + justify-content: space-around; + + /* Inside auto layout */ + flex: none; + order: 1; + align-self: stretch; + flex-grow: 0; +} + +#mobile-desktop #border{ + width: auto; + height: auto; + /* background-color: bisque; */ + margin: 5px; + border: 1px; + /* margin: 5px; */ + + /* Inside auto layout */ + flex: none; + order: 0; + align-self: stretch; + flex-grow: 1; +} + +.mobile-windows-layer{ + width: 100%; + height: 100%; + margin: 0px; + position: relative; +} \ No newline at end of file diff --git a/resources/sys/finder/finder.js b/resources/sys/finder/finder.js index 07a8a53..7de6b73 100644 --- a/resources/sys/finder/finder.js +++ b/resources/sys/finder/finder.js @@ -8,36 +8,39 @@ class Finder{ * @param {string} path */ NewWindow(path){ - // console.log("Init") - fetch(`${window.location.origin}/application/${this.appId}/render`) //TODO Move to wde func. Or Not? + fetch(`${window.location.origin}/application/${this.appId}/render?` + new URLSearchParams({ + isMobile: WebDesktopEnvironment.isMobile, + // bar: true, + })) //TODO Move to wde func. Or Not? .then((response) => response.text()) .then((html) => { - let newWindow = WebDesktopEnvironment.CreateNewWindow(this.appId, 500, 350 ) - + let newWindow = WebDesktopEnvironment.CreateNewWindow(this.appId, 500, 350 ) newWindow.innerHTML = html - // console.log(newWindow.children[1].children[0]) - let fileView = new FileView("/kek", newWindow.children[1].children[0], this.click) - 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) - }) + + let fileView = new FileView("/kek", newWindow.querySelector(".FileTileView"), Finder.Click) + if (!WebDesktopEnvironment.isMobile){ + let scrollBar = new WdeScrollBar(newWindow.children[1].children[1], newWindow.children[1].children[0])// TODO to querry selector + let closeButton = newWindow.children[0].children[0] //TODO to query selector + closeButton.addEventListener('click', function (params) { + WebDesktopEnvironment.CloseWindow(newWindow) + }) + } }) .catch((error) => { WebDesktopEnvironment.Alert(error); }) } + /** * @param {MouseEvent} event * @param {string} path */ - click(event, path){ - let fileName = event.target.getAttribute("fileName") - let fileExtension = fileName.split(".")[fileName.split(".").length - 1] - switch (fileExtension) { - case "lol": - WebDesktopEnvironment.Open("finder", ["pizda"]) + static Click(event, path){ + let fileType = event.target.getAttribute("fileType") + switch (fileType) { + case "app": + //TODO get real id + WebDesktopEnvironment.Open("personal-properties", []) break; case "img": WebDesktopEnvironment.Open("img-viewer", ["pizda"]) diff --git a/resources/sys/img-viewer/img-viewer.js b/resources/sys/img-viewer/img-viewer.js index d3881a6..ebd7372 100644 --- a/resources/sys/img-viewer/img-viewer.js +++ b/resources/sys/img-viewer/img-viewer.js @@ -4,7 +4,9 @@ class ImgViewer{ * @param {string} path */ NewWindow(path){ - fetch(`${window.location.origin}/application/${this.appId}/render`) //TODO Move to wde func. Or Not? + fetch(`${window.location.origin}/application/${this.appId}/render?`+ new URLSearchParams({ + isMobile: WebDesktopEnvironment.isMobile, + })) .then((response) => response.text()) .then((html) => { let newWindow = WebDesktopEnvironment.CreateNewWindow(this.appId, 450,400 ) diff --git a/resources/sys/personal-properties/personal-properties.js b/resources/sys/personal-properties/personal-properties.js index 1ffd6c3..933ce9a 100644 --- a/resources/sys/personal-properties/personal-properties.js +++ b/resources/sys/personal-properties/personal-properties.js @@ -11,7 +11,9 @@ class PersonalProperties{ * @param {string} path */ NewWindow(path){ - fetch(`${window.location.origin}/application/personal-properties/render`) //TODO Move to wde func. Or Not? + fetch(`${window.location.origin}/application/personal-properties/render?`+ new URLSearchParams({ + isMobile: WebDesktopEnvironment.isMobile, + })) .then((response) => response.text()) .then((html) => { // console.log(document.body) @@ -20,7 +22,7 @@ class PersonalProperties{ newWindow.innerHTML = html - let closeButton = newWindow.children[0].children[0] + let closeButton = newWindow.querySelector("closeWindowButton") let scrollDiv = newWindow.children[1] let scrollBar = new WdeScrollBar(scrollDiv.children[1].children[0], scrollDiv.children[0]) @@ -32,33 +34,4 @@ class PersonalProperties{ WebDesktopEnvironment.Alert(error); }); } - - // Init(){ - // console.log("Init") - // fetch(`${window.location.origin}/application/personal-properties/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", 360, document.body.clientHeight*0.8 ) - - // newWindow.innerHTML = html - - // let closeButton = newWindow.children[0].children[0] - // let scrollDiv = newWindow.children[1] - // let scrollBar = new WdeScrollBar(scrollDiv.children[1].children[0], scrollDiv.children[0]) - - // closeButton.addEventListener('click', function (params) { - // WebDesktopEnvironment.CloseWindow(newWindow) - // }) - // }) - // .catch((error) => { - // WebDesktopEnvironment.Alert(error); - // }); - // } -} - - -class test{ - -} +} \ No newline at end of file diff --git a/resources/wde.js b/resources/wde.js index 7087a24..d07393d 100644 --- a/resources/wde.js +++ b/resources/wde.js @@ -1,24 +1,63 @@ document.addEventListener('DOMContentLoaded', function() { + // console.log(window.screen.width) wde = new WebDesktopEnvironment - WebDesktopEnvironment.Open("finder") + if (!WebDesktopEnvironment.isMobile){ + WebDesktopEnvironment.Open("finder", ["kek"]) + } + + // WebDesktopEnvironment.Open("personal-properties") }, false); class WebDesktopEnvironment{ static Applications = {}; + static isMobile = false constructor(){ this.wc = new WindowsCompositor - //Get basic window ready frame - fetch(`${window.location.origin}/system/wde/getbasicwindow`) //TODO Move to wde func - .then((response) => response.text()) - .then((html) => { - WebDesktopEnvironment.SetBasicWindow(html) - }) - .catch((error) => { - WebDesktopEnvironment.Alert(error); - }); - } + WebDesktopEnvironment.isMobile = WebDesktopEnvironment.CheckMobile() + let applications = document.createElement("div") + applications.setAttribute('id', 'applications') + document.body.appendChild(applications) + + if( WebDesktopEnvironment.isMobile){ + document.body.style.setProperty('--zoom', 3) + + let mobileDesktop = document.createElement("div") + mobileDesktop.setAttribute('id', 'mobile-desktop') + document.body.appendChild(mobileDesktop) + + + + // let windowsLayer = document.createElement("div") + // windowsLayer.setAttribute('id', 'windows-layer') + + // mobileDesktop.appendChild(windowsLayer) + + fetch(`${window.location.origin}/system/wde/renderMobileDesktop` ) + .then((response) => response.text()) + .then((html) => { + mobileDesktop.innerHTML = html + WebDesktopEnvironment.LoadApp("finder", () =>{ + console.log("lel") + new FileView("/kek", mobileDesktop.querySelector(".FileTileView"), Finder.Click) + }) + }).then(()=>{ + + }) + .catch((error) => { + WebDesktopEnvironment.Alert(error); + }) + + } else{ + document.body.style.setProperty('--zoom', 1) + + let windowsLayer = document.createElement("div") + windowsLayer.setAttribute('id', 'windows-layer') + document.body.appendChild(windowsLayer) + } + + } /** * @param {string} appId * @param {function} func callback after script loading @@ -27,15 +66,16 @@ class WebDesktopEnvironment{ static LoadApp(appId, func){ console.log(`Load application ${appId}`) - let appDiv = document.createElement("application") - appDiv.setAttribute("id", `application-${appId}`) - document.getElementById("WindowsLayer").appendChild(appDiv) + // let appDiv = document.createElement("application") + // appDiv.setAttribute("id", `application-${appId}`) + // document.getElementById("applications").appendChild(appDiv) let script = document.createElement("script") - script.setAttribute("id", `application-script-${appId}`) + script.setAttribute("appId", appId) script.setAttribute("src", `${window.location.origin}/system/applications/${appId}/app.js`) script.setAttribute("async", "false") - let appElem = document.getElementById("Applications").appendChild(script) + document.getElementById("applications").appendChild(script) + // let appElem = document.getElementById("applications").appendChild(script) script.addEventListener('load', (event) =>{ switch (appId) { @@ -70,14 +110,10 @@ class WebDesktopEnvironment{ console.log(`Application ${appId} is not loaded yet`) WebDesktopEnvironment.LoadApp(appId, () =>{ this.Applications[appId].NewWindow(args) - // console.log(this.Applications) }) } else { this.Applications[appId].NewWindow(args) } - - - } /** @@ -87,15 +123,23 @@ class WebDesktopEnvironment{ * @returns {HTMLElement} */ static CreateNewWindow(appId, width, height) { - let appElem = document.getElementById(`application-${appId}`) + // let appElem = document.getElementById(`application-${appId}`) let newWindow = document.createElement("div") - newWindow.setAttribute("class", "StandartApplicationWindow") - newWindow.style.position = "absolute" - newWindow.style.width = width.toString() + "px" - newWindow.style.height = height.toString() + "px" - return appElem.appendChild(newWindow) - } + if (WebDesktopEnvironment.isMobile){ + newWindow.setAttribute("class", "MobileApplicationWindow") + document.body.querySelector('#windows-layer').appendChild(newWindow) + return newWindow + } else { + newWindow.setAttribute("class", "StandartApplicationWindow") + newWindow.setAttribute("windowId", "SuperUniqUUID") //TODO: + newWindow.style.width = width.toString() + "px" + newWindow.style.height = height.toString() + "px" + + document.body.querySelector('#windows-layer').appendChild(newWindow) + return newWindow + } + } /** * @param {HTMLElement} window */ @@ -130,6 +174,12 @@ class WebDesktopEnvironment{ static Alert(alertText){ console.log(alertText) } + + static CheckMobile(){ + var check = false; + (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera); + return check; + } } var getJSON = function(url, callback) { diff --git a/resources/wdeUI.css b/resources/wdeUI.css index 5cecd3d..6e35b94 100644 --- a/resources/wdeUI.css +++ b/resources/wdeUI.css @@ -8,7 +8,7 @@ padding-right: 6px; gap: 4px; - position: relative; + position: absolute; background: #CCCCCC; border: 1px solid #000000; @@ -21,6 +21,20 @@ flex-grow: 1; } +.MobileApplicationWindow{ + width: 100%; + height: 100%; + /* Auto layout */ + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 4px; + + position: absolute; + top: 0px; + left: 0px; +} + .ContentBorder { width: 100%; height: 100%; @@ -43,6 +57,28 @@ padding: 0px; } +.MobileContentBorder { + width: 100%; + height: 100%; + background-color: #DDDDDD; + /* border: 1px solid #000000; */ + + /* box-shadow: -1px -1px 0px rgba(0, 0, 0, 0.25), + 1px 1px 0px #FFFFFF, + inset -1px -1px 0px rgba(0, 0, 0, 0.27), + inset 1px 1px 0px #FFFFFF; */ + + overflow: hidden; + overflow-x: hidden; + + /* Auto layout */ + display: flex; + flex-direction: row; + justify-content: center; + align-items: flex-start; + padding: 0px; +} + .WindowFrameTopBarButton{ width: 11px; height: 11px; @@ -82,6 +118,57 @@ flex-grow: 0; } +.MobileWindowFrameBottomBar{ + width: 100%; + height: 20px; +/* + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + gap: 5px; + padding: 0px; */ + + /* Inside auto layout */ + flex: none; + order: 0; + align-self: stretch; + flex-grow: 0; +} + +.MobileWindowFrameBottomBarButton{ + min-width: 11px; + width: auto; + height: 15px; + padding: 0px 4px 0px 4px; + position: absolute; + right: 4px; + + background: linear-gradient(135deg, #999999 18.18%, #FFFFFF 81.82%); + border: 1px solid #222222; + box-shadow: 0.5px 0.5px 0px 0.5px #FFFFFF, + -0.5px -0.5px 0px 0.5px rgba(0, 0, 0, 0.25), + inset 1px 1px 0px rgba(255, 255, 255, 0.5), + inset -1px -1px 0px rgba(0, 0, 0, 0.27); + + /* Inside auto layout */ + flex: none; + order: 0; + flex-grow: 0; +} + +.MobileWindowFrameBottomBar .MobileWindowFrameTitle{ + position: absolute; + /* top:1px; */ + /* font-size: 13px; */ + left:50%; + pointer-events: none; + white-space: nowrap; + + font-family: "Virtue"; + letter-spacing: 0.35px; + +} .WindowFrameTopBar .WindowFrameTitle{ position: relative; top:1px; @@ -193,7 +280,8 @@ justify-content: flex-start; gap: 50px; row-gap: 20px; - padding: 15px; + /* padding: 15px; Shit fix TODO: */ + margin: 15px; flex-wrap: wrap; align-content: flex-start; diff --git a/routewde/wde.go b/routewde/wde.go index 9a3a9ad..49e141e 100644 --- a/routewde/wde.go +++ b/routewde/wde.go @@ -12,6 +12,10 @@ func Route(route *gin.RouterGroup) { ctx.HTML(http.StatusOK, "basic-window.html", nil) }) + route.GET("/renderMobileDesktop", func(ctx *gin.Context) { + ctx.HTML(http.StatusOK, "base/mobile-desktop.tmpl", nil) + }) + widgets := route.Group("widgets") { widgets.GET("/file-tile-view", func(ctx *gin.Context) { diff --git a/templates/base/index.tmpl b/templates/base/index.tmpl index c769426..2e38d2f 100644 --- a/templates/base/index.tmpl +++ b/templates/base/index.tmpl @@ -4,6 +4,7 @@
+ @@ -16,8 +17,8 @@ - - + + diff --git a/templates/base/mobile-desktop.tmpl b/templates/base/mobile-desktop.tmpl new file mode 100644 index 0000000..cf1d688 --- /dev/null +++ b/templates/base/mobile-desktop.tmpl @@ -0,0 +1,17 @@ +{{ define "base/mobile-desktop.tmpl" }} + +