personal-website/resources/wde.js

document.addEventListener('DOMContentLoaded', function() {
    wde = new WebDesktopEnvironment
    WebDesktopEnvironment.Open("finder")
    // WebDesktopEnvironment.Open("personal-properties")
}, false);

class WebDesktopEnvironment{
    static Applications = {};
    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);
        });
    }

    /**
    * @param {string} appId
    * @param {function} func callback after script loading
    * @returns {Application | undefined}
    */
    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 script = document.createElement("script")
        script.setAttribute("id", `application-script-${appId}`)
        script.setAttribute("src", `${window.location.origin}/system/applications/${appId}/app.js`)
        script.setAttribute("async", "false")
        let appElem = document.getElementById("Applications").appendChild(script)

        script.addEventListener('load', (event) =>{
            switch (appId) {
                case "finder":
                    let newFinderApp = new Finder()
                    this.Applications[appId] = newFinderApp
                    func()
                    return newFinderApp
                case "personal-properties":
                    let newPersonalPropertiesApp = new PersonalProperties()
                    this.Applications[appId] = newPersonalPropertiesApp
                    func()
                    return newPersonalPropertiesApp
                case "img-viewer":
                    let newImgViewer = new ImgViewer()
                    this.Applications[appId] = newImgViewer
                    func()
                    return newImgViewer
                default:
                    break;
            }

        })
    }

    /**
    * @param {string} appId
    * @param {string[]} args
    */
    static Open(appId, args){
        if (this.Applications[appId] == undefined){
            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)
        }

        

    }

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

    /**
    * @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";
    }
}