Working close button

resources/sys/finder/finder.js

@@ -20,8 +20,7 @@ class Finder{
             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) {
+                newWindow.querySelector("#closeWindowButton").addEventListener('click', function (params) {
                     WebDesktopEnvironment.CloseWindow(newWindow)
                 })
             }

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

@@ -10,14 +10,13 @@ class ImgViewer{
         .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)
-            })
+            if (!WebDesktopEnvironment.isMobile){
+                newWindow.querySelector("#closeWindowButton").addEventListener('click', function (params) {
+                    WebDesktopEnvironment.CloseWindow(newWindow)
+                })
+            }
         })
         .catch((error) => {
             WebDesktopEnvironment.Alert(error);

resources/sys/personal-properties/personal-properties.js

@@ -22,11 +22,10 @@ class PersonalProperties{
             
             newWindow.innerHTML = html
 
-            let closeButton = newWindow.querySelector("closeWindowButton")
-            let scrollDiv = newWindow.children[1]
-            let scrollBar = new WdeScrollBar(scrollDiv.children[1].children[0], scrollDiv.children[0])
+            let scrollBar = new WdeScrollBar(newWindow.querySelector('.ScrollBarScrollElement'), newWindow.querySelector('.ScrollContent'))
 
-            closeButton.addEventListener('click', function (params) {
+            newWindow.querySelector("#closeWindowButton").addEventListener('click',  () =>  {
+                console.log("qewqweqweqweqwe")
                 WebDesktopEnvironment.CloseWindow(newWindow)
             })
         })

resources/sys/wde/simple-scrollbar.js

@@ -1,3 +1,4 @@
+//TODO Delete this file
 ;(function(root, factory) {
   if (typeof exports === 'object') {
     module.exports = factory(window, document)

resources/wde.js

@@ -3,6 +3,7 @@ document.addEventListener('DOMContentLoaded', function() {
     wde = new WebDesktopEnvironment
     if (!WebDesktopEnvironment.isMobile){
         WebDesktopEnvironment.Open("finder", ["kek"])
+        WebDesktopEnvironment.Open("personal-properties", ["kek"])
     }
     
     
@@ -13,9 +14,8 @@ class WebDesktopEnvironment{
     static Applications = {};
     static isMobile = false
     constructor(){
-        this.wc = new WindowsCompositor
         WebDesktopEnvironment.isMobile = WebDesktopEnvironment.CheckMobile()
-
+        
         let applications = document.createElement("div")
         applications.setAttribute('id', 'applications')
         document.body.appendChild(applications)
@@ -26,40 +26,36 @@ class WebDesktopEnvironment{
             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)
 
                     mobileDesktop.querySelector('#about-me').addEventListener('click', (event) => {
+                        //TODO Do not allow launch second instance
                         WebDesktopEnvironment.Open("personal-properties", [])
                     })
+                    mobileDesktop.querySelector('#mobile-dekstop-close').addEventListener('click', (event) => {
+                        // console.log('close')
+                        WebDesktopEnvironment.CloseFocusedWindow()
+                    })
                 })
-            }).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)
         }
+        this.wc = new WindowsCompositor
 
     }
     /**
@@ -68,18 +64,13 @@ class WebDesktopEnvironment{
     * @returns {Application | undefined}
     */
     static LoadApp(appId, func){
-        console.log(`Load application ${appId}`)
-
-        // let appDiv = document.createElement("application")
-        // appDiv.setAttribute("id", `application-${appId}`)
-        // document.getElementById("applications").appendChild(appDiv)
+        // console.log(`Load application ${appId}`)
 
         let script = document.createElement("script")
         script.setAttribute("appId", appId)
         script.setAttribute("src", `${window.location.origin}/system/applications/${appId}/app.js`)
         script.setAttribute("async", "false")
         document.getElementById("applications").appendChild(script)
-        // let appElem = document.getElementById("applications").appendChild(script)
 
         script.addEventListener('load', (event) =>{
             switch (appId) {
@@ -127,7 +118,6 @@ class WebDesktopEnvironment{
     * @returns {HTMLElement}
     */
     static CreateNewWindow(appId, width, height) {    
-        // let appElem = document.getElementById(`application-${appId}`)
         let newWindow = document.createElement("div")
         if (WebDesktopEnvironment.isMobile){
             newWindow.setAttribute("class", "MobileApplicationWindow")
@@ -148,13 +138,13 @@ class WebDesktopEnvironment{
     * @param {HTMLElement} window
     */
     static CloseWindow(window) {
-        let app = window.parentElement
         window.remove()
-        // console.log(app.childElementCount)
-        // if (app.childElementCount < 2){
-        //     console.log(app)
-        //     app.remove()
-        // }
+    }
+
+    static CloseFocusedWindow() {
+        if (document.body.querySelector('#windows-layer').childElementCount > 1){
+            document.body.querySelector('#windows-layer').lastElementChild.remove()
+        }
     }
 
     /**
@@ -168,7 +158,6 @@ class WebDesktopEnvironment{
     * @returns {string}
     */
     static GetBasicWindow(){
-        // console.log(this.basicWindow)
         return this.basicWindow
     }
 
@@ -202,34 +191,53 @@ var getJSON = function(url, callback) {
 };
 
 class WindowsCompositor{
+    windowLayer = undefined
     movingElement = null
+    xPosInit = 0
+    yPosInit = 0
 
+    //TODO refactor this to dynamic add/remove listeners
     constructor(){
-        console.log("Windows Compositor is online :)");
-        addEventListener("mousedown", (event) => {
-            this.catchClick(event)
-        })
-        addEventListener("mouseup", (event) => {
-            this.movingElement = null
-        })
-        addEventListener("mousemove", (event) => {
-            if (this.movingElement != null) {
-                this.dragElement(this.movingElement, event.clientX, event.clientY)
-            } else {
-                
-            }
-        })
+        this.windowLayer = document.body.querySelector('#windows-layer')
+        if (!WebDesktopEnvironment.isMobile) {
+            addEventListener("mousedown", (event) => {
+                this.xPosInit = event.offsetX
+                this.yPosInit = event.offsetY
+
+                this.bringWindowToFront(event.target.closest('.StandartApplicationWindow'))
+
+                this.catchClick(event)
+
+            })
+            addEventListener("mouseup", (event) => {
+                this.movingElement = null
+                this.xPosInit = 0
+            })
+            addEventListener("mousemove", (event) => {
+            
+                if (this.movingElement != null) {
+                    this.dragElement(this.movingElement, event.clientX - this.xPosInit, event.clientY - this.yPosInit)
+                } else {
+                    
+                }
+            })
+        }
+    }
+    
+    /**
+     * @param {HTMLElement} window
+    */
+   bringWindowToFront(window){
+        this.windowLayer.insertBefore(this.windowLayer.lastChild, window)
     }
 
     /**
     * @param {MouseEvent} event
     */
     catchClick(event){
-        
         switch (true) {
             case event.target.className == "WindowFrameTopBar":
                 this.movingElement = event.target.parentElement
-                // console.log(this.movingElement)
                 break;
             default:
                 break;
@@ -242,8 +250,7 @@ class WindowsCompositor{
     * @param {number} posY
     */
     dragElement(element, posX, posY) { //TODO
-        console.log()
-        element.style.left = (posX - element.clientWidth*0.5)+ "px";
-        element.style.top = (posY - element.children[0].clientHeight*0.5) + "px";
+        element.style.left = `${posX}px`
+        element.style.top = `${posY}px`
     }
 }

templates/base/mobile-desktop.tmpl

@@ -15,7 +15,7 @@
             <div class="FileTileIcon NoClick" style="background-image: url('./res/sys/wde/icons/desktop.png');"></div>
             <div class="FileTileTitle NoClick">Home</div>
         </div>
-        <div id="Home" class="FileTile">
+        <div id="mobile-dekstop-close" class="FileTile">
             <div class="FileTileIcon NoClick" style="background-image: url('./res/sys/wde/icons/trash.png');"></div>
             <div class="FileTileTitle NoClick">Close</div>
         </div>