class WindowObject { windowObject; windowManager; windowManagerLabel; windowContent; #orig_mousePosX; #orig_mousePosY; #orig_selfPosX; #orig_selfPosY; #isDragging; constructor(parent, content, srcdoc, w, h) { this.parentElement = parent; this.windowObject = WindowObject.createWindow(this, content, srcdoc, w, h); this.parentElement.appendChild(this.windowObject); WindowObject.raiseWindow(this.windowObject); this.windowManager = this.windowObject.querySelector(".window-manager"); this.windowManagerLabel = this.windowObject.querySelector( ".window-manager-label" ); this.windowContent = this.windowObject.querySelector(".window-content"); this.windowManager.addEventListener("mousedown", (e) => this.event__dragMouseDown(e) ); this.windowManager.addEventListener("mousemove", (e) => this.event__dragMouseMove(e) ); this.windowManager.addEventListener("mouseup", (e) => this.event__dragMouseUp(e) ); this.windowManager.addEventListener("mouseout", (e) => this.event__dragMouseMove(e) ); this.windowObject.addEventListener("mousedown", (e) => WindowObject.raiseWindow(this.windowObject) ); this.windowContent.contentWindow.addEventListener("mousedown", (e) => WindowObject.raiseWindow(this.windowObject) ); window.addEventListener("beforeunload", () => this.destroy()); this.windowContent.addEventListener("load", () => { this.title = this.windowContent.contentWindow.document.title; if (!srcdoc) this.windowManager .querySelector(".window-new-button") .addEventListener("click", () => { window.open(this.content); }); }); } get title() { return this.windowManagerLabel.textContent; } get content() { return this.windowContent.src; } set title(content) { this.windowManagerLabel.textContent = content; } set content(src) { this.windowContent.src = src; } minimizeWindow() { if (this.windowObject.classList.contains("minimized")) { this.windowObject.classList.remove("minimized"); WindowObject.raiseWindow(this.windowObject); } else { this.windowObject.classList.add("minimized"); this.windowObject.style.zIndex = 50; } } maximizeWindow() { this.windowObject.classList.toggle("maximized"); WindowObject.raiseWindow(this.windowObject); } destroy() { if (this.windowContent.contentWindow != null) { const unloadEvent = new Event("beforeunload"); this.windowContent.contentWindow.dispatchEvent(unloadEvent); } this.windowObject.classList.add("closed"); setTimeout(() => { this.windowObject.remove(); var someWindow = this.parentElement.querySelector( `.window-object:last-child` ); if (someWindow != null) WindowObject.raiseWindow(someWindow); }, 250); } event__dragMouseDown(e) { e.preventDefault(); this.#orig_mousePosX = e.clientX; this.#orig_mousePosY = e.clientY; this.#orig_selfPosX = this.windowObject.offsetLeft; this.#orig_selfPosY = this.windowObject.offsetTop; this.windowContent.style.userSelect = "none"; this.windowContent.style.pointerEvents = "none"; this.windowManager.style.cursor = "move"; this.#isDragging = true; if (this.windowObject.style.zIndex != 100) WindowObject.raiseWindow(this.windowObject); } event__dragMouseUp(e) { e.preventDefault(); this.#orig_mousePosX = 0; this.#orig_mousePosY = 0; this.windowContent.style.userSelect = "auto"; this.windowContent.style.pointerEvents = "auto"; this.windowManager.style.cursor = "default"; this.#isDragging = false; } event__dragMouseMove(e) { e.preventDefault(); if (this.#isDragging) { this.windowObject.style.left = this.#orig_selfPosX - (this.#orig_mousePosX - e.clientX) + "px"; this.windowObject.style.top = this.#orig_selfPosY - (this.#orig_mousePosY - e.clientY) + "px"; } } static raiseWindow(windowObj) { windowObj.parentElement.querySelectorAll(".window-object").forEach((x) => { if (x.style.zIndex > 50) x.style.zIndex -= 1; x.classList.add("unfocused"); }); windowObj.style.zIndex = 100; windowObj.classList.remove("unfocused"); windowObj.focus(); } static createWindow(windowRef, content, srcdoc, w, h) { const windowObject = document.createElement("div"); windowObject.classList.add("window-object"); windowObject.style.width = `calc(${w}px + 0.5em)`; windowObject.style.height = `calc(${h}px + 1.5em)`; { const windowManager = document.createElement("div"); windowManager.classList.add("window-manager"); { const windowManagerStart = document.createElement("div"); windowManagerStart.classList.add("window-manager-start"); { const windowManagerLabel = document.createElement("span"); windowManagerLabel.textContent = ""; windowManagerLabel.classList.add("window-manager-label"); windowManagerStart.appendChild(windowManagerLabel); } windowManager.appendChild(windowManagerStart); } { const windowManagerEnd = document.createElement("div"); windowManagerEnd.classList.add("window-manager-end"); if (!srcdoc) { const windowNewButton = document.createElement("button"); windowNewButton.innerHTML = "open_in_new"; windowNewButton.classList.add("window-new-button"); windowManagerEnd.appendChild(windowNewButton); } { const windowMaximizeButton = document.createElement("button"); windowMaximizeButton.innerHTML = "maximize"; windowMaximizeButton.classList.add("window-maximize-button"); windowMaximizeButton.ariaHidden = true; // esoteric operation to screen-reader users windowMaximizeButton.addEventListener("click", () => windowRef.maximizeWindow() ); windowManagerEnd.appendChild(windowMaximizeButton); } { const windowDestroyButton = document.createElement("button"); windowDestroyButton.innerHTML = "close"; windowDestroyButton.classList.add("window-destroy-button"); windowDestroyButton.ariaHidden = true; windowDestroyButton.addEventListener("click", () => windowRef.destroy() ); windowManagerEnd.appendChild(windowDestroyButton); } windowManager.appendChild(windowManagerEnd); } windowObject.appendChild(windowManager); } { const windowContent = document.createElement("iframe"); windowContent.classList.add("window-content"); { if (srcdoc) windowContent.srcdoc = content; else windowContent.src = content; } windowObject.appendChild(windowContent); } return windowObject; } }