diff --git a/resources/wde.js b/resources/wde.js index 78e0655..ba614cd 100644 --- a/resources/wde.js +++ b/resources/wde.js @@ -26,13 +26,6 @@ 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()) @@ -67,18 +60,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) { @@ -126,7 +114,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") @@ -147,13 +134,7 @@ 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() - // } } /** @@ -167,7 +148,6 @@ class WebDesktopEnvironment{ * @returns {string} */ static GetBasicWindow(){ - // console.log(this.basicWindow) return this.basicWindow } @@ -203,20 +183,29 @@ 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') 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, event.clientY) + this.dragElement(this.movingElement, event.clientX - this.xPosInit, event.clientY - this.yPosInit) } else { } @@ -227,7 +216,6 @@ class WindowsCompositor{ * @param {HTMLElement} window */ bringWindowToFront(window){ - console.log("kek") this.windowLayer.insertBefore(this.windowLayer.lastChild, window) } @@ -238,7 +226,6 @@ class WindowsCompositor{ switch (true) { case event.target.className == "WindowFrameTopBar": this.movingElement = event.target.parentElement - // console.log(this.movingElement) break; default: break; @@ -251,8 +238,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` } }