personal-website/resources/wde.js

document.addEventListener('DOMContentLoaded', function() {
    wde = new WebDesktopEnvironment
}, false);

class WebDesktopEnvironment{
    constructor(){
        // console.log(window)
        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)
            let app = this.loadApp("personal-properties")
            // let finder = this.loadApp("finder")
        })
        .catch((error) => {
            WebDesktopEnvironment.Alert(error);
        });
    }

    /**
    * @param {string} appId
    * @returns {Application | undefined}
    */
    loadApp(appId){
        let newApp = document.createElement("application")
        newApp.setAttribute("id", `application-${appId}`)

        let appElem = document.getElementById("WindowsLayer").appendChild(newApp)


        let script = document.createElement("script")
        script.setAttribute("src", `${window.location.origin}/system/applications/${appId}/app.js`)
        script.setAttribute("async", "false")
        appElem.appendChild(script)
        script.addEventListener("load", function () {
            let newApp = new PersonalProperties(appElem)
            newApp.Init()
        }, false)
    }

    /**
    * @param {string} appId
    * @param {string} windowName
    * @param {number} width
    * @param {number} height
    * @returns {HTMLElement}
    */
    static CreateNewWindow(appId, windowName, width, height) {    
        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)
    }

    /**
    * @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 basicWindow
    /**
    * @param {string} html
    */
    static SetBasicWindow(html){
        this.basicWindow = html
    }
    /**
    * @returns {string}
    */
    static GetBasicWindow(){
        // console.log(this.basicWindow)
        return this.basicWindow
    }

    /**
    * 
    * @param {string} alertText
    */
    static Alert(alertText){
        console.log(alertText)
    }
    
}

var getJSON = function(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'json';
    xhr.onload = function() {
      var status = xhr.status;
      if (status === 200) {
        callback(null, xhr.response);
      } else {
        callback(status, xhr.response);
      }
    };
    xhr.send();
};

class WindowsCompositor{
    movingElement = null

    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 {
                
            }
        })
    }

    /**
    * @param {MouseEvent} event
    */
    catchClick(event){
        
        switch (true) {
            case event.target.className == "WindowFrameTopBar":
                this.movingElement = event.target.parentElement
                // console.log(this.movingElement)
                break;
            default:
                break;
        }
    }

    /**
    * @param {HTMLDivElement} element
    * @param {number} posX
    * @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";
    }
}