resources/sys/finder/finder.js

@@ -20,7 +20,8 @@ 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
-                newWindow.querySelector("#closeWindowButton").addEventListener('click', function (params) {
+                let closeButton = newWindow.children[0].children[0] //TODO to query selector
+                closeButton.addEventListener('click', function (params) {
                     WebDesktopEnvironment.CloseWindow(newWindow)
                 })
             }

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

@@ -10,13 +10,14 @@ class ImgViewer{
         .then((response) => response.text())
         .then((html) => {
             let newWindow = WebDesktopEnvironment.CreateNewWindow(this.appId, 450,400  ) 
+            
             newWindow.innerHTML = html
 
-            if (!WebDesktopEnvironment.isMobile){
-                newWindow.querySelector("#closeWindowButton").addEventListener('click', function (params) {
-                    WebDesktopEnvironment.CloseWindow(newWindow)
-                })
-            }
+            let closeButton = newWindow.children[0].children[0]
+
+            closeButton.addEventListener('click', function (params) {
+                WebDesktopEnvironment.CloseWindow(newWindow)
+            })
         })
         .catch((error) => {
             WebDesktopEnvironment.Alert(error);

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

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

resources/sys/wde/simple-scrollbar.js

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

resources/wde.js

@@ -3,7 +3,6 @@ document.addEventListener('DOMContentLoaded', function() {
     wde = new WebDesktopEnvironment
     if (!WebDesktopEnvironment.isMobile){
         WebDesktopEnvironment.Open("finder", ["kek"])
-        WebDesktopEnvironment.Open("personal-properties", ["kek"])
     }
     
     
@@ -14,6 +13,7 @@ class WebDesktopEnvironment{
     static Applications = {};
     static isMobile = false
     constructor(){
+        this.wc = new WindowsCompositor
         WebDesktopEnvironment.isMobile = WebDesktopEnvironment.CheckMobile()
 
         let applications = document.createElement("div")
@@ -27,22 +27,27 @@ class WebDesktopEnvironment{
             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);
@@ -55,7 +60,6 @@ class WebDesktopEnvironment{
             windowsLayer.setAttribute('id', 'windows-layer')
             document.body.appendChild(windowsLayer)
         }
-        this.wc = new WindowsCompositor
 
     }
     /**
@@ -64,13 +68,18 @@ class WebDesktopEnvironment{
     * @returns {Application | undefined}
     */
     static LoadApp(appId, func){
-        // console.log(`Load application ${appId}`)
+        console.log(`Load application ${appId}`)
+
+        // let appDiv = document.createElement("application")
+        // appDiv.setAttribute("id", `application-${appId}`)
+        // document.getElementById("applications").appendChild(appDiv)
 
         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) {
@@ -118,6 +127,7 @@ 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")
@@ -138,13 +148,13 @@ class WebDesktopEnvironment{
     * @param {HTMLElement} window
     */
     static CloseWindow(window) {
+        let app = window.parentElement
         window.remove()
-    }
-
-    static CloseFocusedWindow() {
-        if (document.body.querySelector('#windows-layer').childElementCount > 1){
-            document.body.querySelector('#windows-layer').lastElementChild.remove()
-        }
+        // console.log(app.childElementCount)
+        // if (app.childElementCount < 2){
+        //     console.log(app)
+        //     app.remove()
+        // }
     }
 
     /**
@@ -158,6 +168,7 @@ class WebDesktopEnvironment{
     * @returns {string}
     */
     static GetBasicWindow(){
+        // console.log(this.basicWindow)
         return this.basicWindow
     }
 
@@ -191,53 +202,34 @@ var getJSON = function(url, callback) {
 };
 
 class WindowsCompositor{
-    windowLayer = undefined
     movingElement = null
-    xPosInit = 0
-    yPosInit = 0
 
-    //TODO refactor this to dynamic add/remove listeners
     constructor(){
-        this.windowLayer = document.body.querySelector('#windows-layer')
-        if (!WebDesktopEnvironment.isMobile) {
-            addEventListener("mousedown", (event) => {
-                this.xPosInit = event.offsetX
-                this.yPosInit = event.offsetY
+        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.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;
@@ -250,7 +242,8 @@ class WindowsCompositor{
     * @param {number} posY
     */
     dragElement(element, posX, posY) { //TODO
-        element.style.left = `${posX}px`
-        element.style.top = `${posY}px`
+        console.log()
+        element.style.left = (posX - element.clientWidth*0.5)+ "px";
+        element.style.top = (posY - element.children[0].clientHeight*0.5) + "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="mobile-dekstop-close" class="FileTile">
+        <div id="Home" class="FileTile">
             <div class="FileTileIcon NoClick" style="background-image: url('./res/sys/wde/icons/trash.png');"></div>
             <div class="FileTileTitle NoClick">Close</div>
         </div>