personal-website/front/src/decorat/desktop-decorat.js

export default class DesktopDecorat{
    /** @type {Element} */
    #windowsLayer

    constructor(){
        this.windowLayer = document.body.querySelector('#windows-layer')
        // this.#windowsLayer = document.body.querySelector('#windows-layer')
        this.#windowsLayer = document.body.querySelector('#windows-layer')
        let startDrag = function(event) {
            let window = event.target.closest('.WindowFrame')
            DesktopDecorat.bringWindowToFront(window)
            if (event.target.classList.contains("DragArea")){
                let xPosInit = event.offsetX
                let yPosInit = event.offsetY
                let dragWindow = function(event){
                    window.style.left = `${event.clientX - xPosInit}px`
                    window.style.top = `${event.clientY - yPosInit}px`
                }
                let stopDrag = function(){
                    removeEventListener('mousemove', dragWindow)
                    removeEventListener('mouseup', stopDrag)
                }

                addEventListener('mousemove', dragWindow)
                addEventListener('mouseup', stopDrag)
            }
        }
        this.#windowsLayer.addEventListener('mousedown', startDrag)
    }
    
    /**
     * @param {HTMLElement} window
    */
    static bringWindowToFront(window){ //FIXME
        let previousWindow = this.#windowsLayer.lastChild
        if (window == null || window == undefined){
            return
        }
        if (window != previousWindow){
            this.#windowsLayer.insertBefore(window, previousWindow.nextSibling)
            previousWindow.classList.remove("Focused")
            window.classList.add("Focused")
        } else {
            window.classList.add("Focused")
        }
        return
    }


    static ChangeURL(appWindow){
        let appId = appWindow.getAttribute('appid')
        window.history.replaceState(null, "", `/${appId}/`);
    }
}