HalbearNetDesktopSite/WindowManager.js

class AppWindow{
    ID;
    Title;
    Window;
    WindowElement;
    TaskbarApp;
    DesktopApp;

    constructor(IdIn, Source, Title, X, Y) {
        this.Title = Title;
        this.ID = IdIn;
        this.DesktopApp = Source.cloneNode(true);
        this.GenerateTaskBarApp()
        this.GenerateWindow(this);
        //setTimeout(this.InitWin(this), 1000)
        var checkExist = setInterval( function(Element){
            //console.log("Interval")
            if (document.getElementById(Element.ID)){
                clearInterval(checkExist);
                Element.WindowElement = document.getElementById(Element.ID);
                Element.InitWin(Element, X, Y);
            }
        }, 100,this);
    }
    InitWin (element, X, Y){
        //console.log(element.WindowElement);
        element.init(element, X, Y);
        element.DragWindow(element.WindowElement, element.TaskbarApp);
        //WinManager.CalibrateWindows();
        element.DesktopApp = null;
    }
    GenerateTaskBarApp(){
        this.TaskbarApp = this.DesktopApp.cloneNode(true);
        this.TaskbarApp.classList.replace("windowIcon","windowApp")
        this.TaskbarApp.id = ("App" + this.ID);
        this.TaskbarApp.setAttribute("onClick", "");
        taskbar.appendChild(this.TaskbarApp);
    }

    GenerateWindow(self){
        var NewAppBody = new XMLHttpRequest();
        NewAppBody.open('GET', Page + "Apps/" + self.Title + '.html', true);
        NewAppBody.onreadystatechange = function () {
            if (NewAppBody.readyState !== 4) return;
            if (NewAppBody.status !== 200) return;
            self.WindowContent = NewAppBody.responseText;
            var NewAppLoaded = new XMLHttpRequest();
            NewAppLoaded.open('GET', "AppAssets/App.html", true);
            NewAppLoaded.onreadystatechange = function () {
                if (NewAppLoaded.readyState !== 4) return;
                if (NewAppLoaded.status !== 200) return;
                self.Window = NewAppLoaded.responseText;
                self.Window = self.Window.replaceAll("{id}", "" + self.ID);
                self.Window = self.Window.replace("{x}", self.DesktopApp.classList[3]);
                self.Window = self.Window.replace("{y}", self.DesktopApp.classList[4]);
                self.Window = self.Window.replace("{ApplicationName}", self.Title + "Name");
                self.Window = self.Window.replace("Application", self.Title);
                self.Window = self.Window.replace("{WindowIconImage}", self.DesktopApp.children[0].src);
                self.Window = self.Window.replace("{body}", self.WindowContent);
                document.getElementById("AppContainer").insertAdjacentHTML("beforeend",self.Window);
            };
            NewAppLoaded.send();
        }
        NewAppBody.send();
    }

    init(element, X, Y) {
        element.WindowElement.style.width = element.WindowElement.classList[1] + "vh";
        element.WindowElement.style.height = element.WindowElement.classList[2] + "vh";
        element.WindowElement.style.left = (X-(((element.WindowElement.offsetWidth/2)/innerWidth)*100)) + "vw";
        element.WindowElement.style.top = (Y-(((element.WindowElement.offsetHeight/2)/innerHeight)*100)) + "vh";
        element.WindowElement.classList.remove("minimised")
    }

    DragWindow(Window, WindowTaskBarApp){
        if (Window.classList.contains(".Initialised")) AppInit(Window);

        var Touchscreen = false;
        var CalculatedLeft = 0, CalculatedTop = 0, OldLeft = 0, OldTop = 0;
        Window.children[0].addEventListener('mousedown', mouseDown);
        Window.children[0].addEventListener('touchstart', mouseDown);
        WindowTaskBarApp.addEventListener('mousedown', AppMinimise)
        WindowTaskBarApp.addEventListener('touchstart', AppMinimise)
        document.getElementById(Window.id + "ExitBtn").addEventListener('mousedown', ExitApp);
        document.getElementById(Window.id + "MinimiseBtn").addEventListener('mousedown', AppMinimise);
        document.getElementById(Window.id + "ExitBtn").addEventListener('touchstart', ExitApp);
        document.getElementById(Window.id + "MinimiseBtn").addEventListener('touchstart', AppMinimise);

        function mouseDown(mouse) {
            console.log("mouseDown");
            Touchscreen = mouse.type === "touchstart";
            mouse.preventDefault();
            if (!Window.classList.contains('DraggingActive')){
                Window.style.zIndex = ""+55;
                if (Touchscreen) {
                    document.addEventListener('touchmove', mouseMove);
                    document.addEventListener('touchend', mouseUp);
                } else {
                    document.addEventListener('mousemove', mouseMove);
                    document.addEventListener('mouseup', mouseUp);
                }
                Window.classList.add('DraggingActive');
                Window.children[1].classList.add("Dragging");
                OldLeft = mouse.clientX;
                OldTop = mouse.clientY;
                Window.children[1].style.transition = '0.5s';
                setTimeout(function(){
                    Window.children[1].style.transition = '0.0s';
                }, 500);
            }
        }
        function mouseMove(mouse){
            mouse.preventDefault();
            if (!Touchscreen) {
                CalculatedLeft = OldLeft - mouse.clientX;
                CalculatedTop = OldTop - mouse.clientY;
                OldLeft = mouse.clientX;
                OldTop = mouse.clientY;
                Window.style.top = clamp(((Window.offsetTop - CalculatedTop)/innerHeight)*100,0,(((innerHeight - Window.offsetHeight)/innerHeight)*100)- 5) + 'vh';
                Window.style.left =clamp(((Window.offsetLeft - CalculatedLeft)/innerWidth)*100,0,(((innerWidth - Window.offsetWidth)/innerWidth)*100)- 0.5) + 'vw';
            } else {
                Window.style.top = clamp((mouse.changedTouches[0].clientY/innerHeight)*100,0,(((innerHeight - Window.offsetHeight)/innerHeight)*100)- 5) + 'vh';
                Window.style.left = clamp((mouse.changedTouches[0].clientX/innerWidth)*100,0,(((innerWidth - Window.offsetWidth)/innerWidth)*100) - 0.5) + 'vw';
            }
        }
        function mouseUp(mouse){
            Window.children[1].classList.remove('Dragging');
            //Window.removeEventListener('mousedown', mouseDown);
            //Window.removeEventListener('touchstart', mouseDown);
            Window.classList.remove('DraggingActive');
            if (Touchscreen){
                document.removeEventListener('touchmove', mouseMove);
                document.removeEventListener('touchend', mouseUp);
                Touchscreen = false;
            }
            else {
                document.removeEventListener('mousemove', mouseMove);
                document.removeEventListener('mouseup', mouseUp);
            }
            Window.children[1].style.transition = '0.5s';
            Window.style.zIndex = ""+50;
            setTimeout(function(){
                Window.children[1].style.transition = '0.0s';
            }, 500);
        }

        function AppMinimise(mouse){

            if (Window.classList.contains("minimised")) {
                Window.classList.add("animationTransition");
                Window.classList.remove("minimised");
                setTimeout(()=>{
                    Window.classList.remove("animationTransition");
                },500)
            } else {
                Window.classList.add("minimised");
            }
        }

        function ExitApp(mouse) {
            var TaskbarApp = document.getElementById("App" + Window.id);
            TaskbarApp.remove();
            Window.remove();
        }
    }
}
class WindowManager{
    Windows = [];
    constructor(){
        this.Windows = [];
    }
    NewWindow(IdIn, Source, Title, X, Y){
        let newWindow = new AppWindow(IdIn, Source, Title, X, Y);
        this.Windows.push(newWindow);
        return newWindow;
    }

    CalibrateWindows(){
        for (let i = 0; i < this.Windows.length; i++){
            this.Windows[i].DragWindow(this.Windows[i].WindowElement, this.Windows[i].TaskbarApp);
        }
    }

    get WindowCount(){
        return this.Windows.length;
    }
}

let WinManager = new WindowManager();
var SelectedApp;
var AppIdCounter = 0;
var click = false;
const taskbar = document.getElementById("taskbar");

//console.log(WinManager.WindowCount);
function clamp(number, lower, upper) {
    if (number > upper) {
        return upper;
    }
    if (number < lower) {
        return lower;
    }
    return number;
}

function OpenApp(Source, skip, X, Y){
    if (SelectedApp !== Source && !skip){
        if (SelectedApp != null){
            SelectedApp.classList.remove("selectedIcon");
        }
        SelectedApp = Source;
        Source.classList.add("selectedIcon");
    } else{
        SelectedApp = null;
        Source.classList.remove("selectedIcon");
        let Title = Source.children[1].innerHTML;
        WinManager.NewWindow(AppIdCounter, Source, Title, X, Y);
        AppIdCounter++;

    }
}