abtmtr-v4/views/scripts/windows.js
MeowcaTheoRange e0c355ad82 We should improve windowing somewhat.
Yet you participate in windowing, curious!
I am very intelligent.
2023-11-24 19:53:10 -06:00

624 lines
18 KiB
JavaScript
Executable file

function isTouchDevice() {
return (
"ontouchstart" in window ||
navigator.maxTouchPoints > 0 ||
navigator.msMaxTouchPoints > 0
);
}
class WindowManager {
managerObject;
children;
minZIndex = 50;
maxZIndex = 100;
constructor(manager) {
this.managerObject = manager;
this.managerObject.classList.add("window-master");
this.managerObject.style.zIndex = this.minZIndex;
this.children = [];
window.addEventListener("beforeunload", () => this.destroy());
this.managerObject.addEventListener("windowcreate", (e) =>
this.#event_manageMinimized(e)
);
this.managerObject.addEventListener("windowminimize", (e) =>
this.#event_manageMinimized(e)
);
this.managerObject.addEventListener("windowdestroy", (e) =>
this.#event_manageMinimized(e)
);
}
createWindow(content, srcdoc, w, h) {
return new WindowObject(this, content, srcdoc, w, h);
}
#event_manageMinimized(e) {
this.children
.filter((x) => x.minimized)
.forEach((curWinObj, i) => {
curWinObj.windowObject.style.bottom = `calc(2em * ${i})`;
});
}
raiseIndex(windowObj, add, focus = true) {
const sortedFocusArray = this.children.toSorted(
(x, y) => x.focusOrder - y.focusOrder
);
this.raiseWindow(
sortedFocusArray.at(
(sortedFocusArray.indexOf(windowObj) + add) % this.children.length
),
focus
);
}
addWindow(windowObj) {
this.children.push(windowObj);
this.managerObject.appendChild(windowObj.windowObject);
}
removeWindow(windowId) {
this.children.splice(windowId, 1);
if (this.children.length > 0)
this.raiseWindow(
this.children.toSorted((x, y) => x.focusOrder - y.focusOrder)[0]
);
}
destroy() {
this.children.forEach((x) => {
console.log(x);
x.destroy();
});
this.managerObject.remove();
this.children = [];
}
dispatchEvent(eventName, data) {
const event = new CustomEvent(eventName, data);
this.managerObject.dispatchEvent(event);
}
raiseWindow(windowObj, focus = true) {
this.children
.toSorted((x, y) => x.focusOrder - y.focusOrder)
.forEach((curWinObj, i) => {
curWinObj.focusOrder = i + 1;
curWinObj.windowObject.style.zIndex = this.maxZIndex - (i + 1);
curWinObj.windowObject.classList.add("unfocused");
});
windowObj.focusOrder = 0;
windowObj.windowObject.style.zIndex = windowObj.parentManager.maxZIndex;
windowObj.windowObject.classList.remove("unfocused");
if (focus) windowObj.windowObject.focus();
windowObj.dispatchEvent("windowfocus", { detail: windowObj });
}
}
class WindowObject {
parentManager;
windowObject;
windowManager;
windowManagerLabel;
windowContent;
focusOrder;
#orig_mousePosX;
#orig_mousePosY;
#orig_selfPosX;
#orig_selfPosY;
#isDragging;
#isFrozen;
#isRemoved = false;
constructor(manager, content, srcdoc, w, h) {
this.parentManager = manager;
this.windowObject = WindowObject.createWindow(this, content, srcdoc, w, h);
this.parentManager.addWindow(this);
this.dispatchEvent("windowcreate", { detail: this });
this.parentManager.raiseWindow(this);
if (isTouchDevice()) this.maximizeWindow();
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.parentManager.raiseWindow(this);
});
this.windowObject.addEventListener("mousemove", (e) =>
this.event__dragMouseMove(e)
);
this.windowObject.addEventListener("mouseout", (e) =>
this.event__dragMouseMove(e)
);
this.windowObject.addEventListener("mouseup", (e) =>
this.event__dragMouseUp(e)
);
this.windowManager.addEventListener("touchstart", (e) => {
this.event__dragMouseDown(e, true);
this.parentManager.raiseWindow(this);
});
this.parentManager.managerObject.addEventListener("touchmove", (e) =>
this.event__dragMouseMove(e, true)
);
this.parentManager.managerObject.addEventListener("touchend", (e) =>
this.event__dragMouseUp(e, true)
);
this.windowObject.addEventListener("keydown", (e) =>
this.event__responseKeyDown(e)
);
this.windowObject.addEventListener("focus", (e) =>
this.parentManager.raiseWindow(this)
);
this.windowContent.contentWindow.addEventListener("focus", (e) =>
this.parentManager.raiseWindow(this, false)
);
this.windowContent.addEventListener("load", () => {
this.title = this.windowContent.contentWindow.document.title;
if (!srcdoc) {
const nb = this.windowManager.querySelector(".window-new-button");
nb.addEventListener("click", () => {
window.open(this.contentUrl);
});
nb.addEventListener("touchstart", (e) => e.stopPropagation());
nb.addEventListener("touchend", (e) => e.stopPropagation());
}
});
}
dispatchEvent(eventName, data) {
const event = new CustomEvent(eventName, data);
this.parentManager.managerObject.dispatchEvent(event);
}
get windowId() {
return this.parentManager.children.indexOf(this);
}
get title() {
return this.windowManagerLabel.textContent;
}
get content() {
return this.windowContent.srcdoc;
}
get contentUrl() {
return this.windowContent.src;
}
get x() {
return this.windowObject.offsetLeft;
}
get y() {
return this.windowObject.offsetTop;
}
get width() {
return this.windowObject.offsetWidth;
}
get height() {
return this.windowObject.offsetHeight;
}
set title(content) {
this.windowManagerLabel.textContent = content;
}
set content(src) {
this.windowContent.srcdoc = src;
}
set contentUrl(url) {
this.windowContent.src = url;
}
set x(x) {
this.windowObject.style.left = x + "px";
}
set y(y) {
this.windowObject.style.top = y = "px";
}
set width(w) {
this.windowObject.style.width = w + "px";
}
set height(h) {
this.windowObject.style.height = h = "px";
}
freezeWindow() {
this.#isFrozen = !this.#isFrozen;
this.dispatchEvent("windowfreeze", { detail: this });
}
set frozen(state) {
if (state != this.frozen)
this.dispatchEvent("windowfreeze", { detail: this });
this.#isFrozen = state;
}
get frozen() {
return this.#isFrozen;
}
petrifyWindow() {
if (this.windowObject.classList.contains("petrified")) {
this.windowObject.classList.remove("petrified");
this.windowObject.style.minWidth = null;
this.windowObject.style.maxWidth = null;
this.windowObject.style.minHeight = null;
this.windowObject.style.maxHeight = null;
} else {
this.windowObject.classList.add("petrified");
this.windowObject.style.minWidth = this.w + "px";
this.windowObject.style.maxWidth = this.w + "px";
this.windowObject.style.minHeight = this.h + "px";
this.windowObject.style.maxHeight = this.h + "px";
}
this.dispatchEvent("windowpetrify", { detail: this });
}
set petrified(state) {
if (state != this.petrified)
this.dispatchEvent("windowpetrify", { detail: this });
if (state) {
this.windowObject.classList.add("petrified");
this.windowObject.style.minWidth = this.w + "px";
this.windowObject.style.maxWidth = this.w + "px";
this.windowObject.style.minHeight = this.h + "px";
this.windowObject.style.maxHeight = this.h + "px";
} else {
this.windowObject.classList.remove("petrified");
this.windowObject.style.minWidth = null;
this.windowObject.style.maxWidth = null;
this.windowObject.style.minHeight = null;
this.windowObject.style.maxHeight = null;
}
}
get petrified() {
return this.windowObject.classList.contains("petrified");
}
minimizeWindow() {
if (this.windowObject.classList.contains("minimized")) {
this.windowObject.classList.remove("minimized");
this.frozen = false;
this.petrified = false;
this.windowObject.style.setProperty("--z-index", null);
this.parentManager.raiseWindow(this);
} else {
this.windowObject.classList.add("minimized");
this.maximized = false;
this.frozen = true;
this.petrified = true;
this.windowObject.style.setProperty(
"--z-index",
this.parentManager.minZIndex
);
}
this.dispatchEvent("windowminimize", { detail: this });
}
set minimized(state) {
if (state != this.minimized)
this.dispatchEvent("windowminimize", { detail: this });
if (state) {
this.windowObject.classList.add("minimized");
this.maximized = false;
this.frozen = true;
this.petrified = true;
this.windowObject.style.setProperty(
"--z-index",
this.parentManager.minZIndex
);
} else {
this.windowObject.classList.remove("minimized");
this.frozen = false;
this.petrified = false;
this.windowObject.style.setProperty("--z-index", null);
this.parentManager.raiseWindow(this);
}
}
get minimized() {
return this.windowObject.classList.contains("minimized");
}
maximizeWindow() {
if (this.windowObject.classList.contains("maximized")) {
this.windowObject.classList.remove("maximized");
} else {
this.windowObject.classList.add("maximized");
this.minimized = false;
}
this.parentManager.raiseWindow(this);
this.dispatchEvent("windowmaximize", { detail: this });
}
set maximized(state) {
if (state != this.maximized)
this.dispatchEvent("windowmaximize", { detail: this });
if (state) {
this.windowObject.classList.add("maximized");
this.minimized = false;
} else {
this.windowObject.classList.remove("maximized");
}
this.parentManager.raiseWindow(this);
}
get maximized() {
return this.windowObject.classList.contains("maximized");
}
destroy() {
if (this.windowContent.contentWindow != null) {
const unloadEvent = new Event("beforeunload");
this.windowContent.contentWindow.dispatchEvent(unloadEvent);
}
this.windowObject.remove();
this.parentManager.removeWindow(this.windowId);
this.dispatchEvent("windowdestroy", { detail: this });
}
event__dragMouseDown(e, touch) {
if (this.#isFrozen) return;
this.#orig_mousePosX = touch ? e.touches[0].clientX : e.clientX;
this.#orig_mousePosY = touch ? e.touches[0].clientY : 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 != this.parentManager.maxZIndex)
this.parentManager.raiseWindow(this);
this.dispatchEvent("windowdragdown", { detail: this, mouse: e });
}
event__dragMouseUp(e, touch) {
if (this.#isFrozen) return;
if (this.#isDragging)
this.dispatchEvent("windowdragup", { detail: this, mouse: e });
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, touch) {
if (this.#isFrozen) return;
if (this.#isDragging) {
var cX = touch ? e.touches[0].clientX : e.clientX;
var cY = touch ? e.touches[0].clientY : e.clientY;
this.windowObject.style.left =
this.#orig_selfPosX - (this.#orig_mousePosX - cX) + "px";
this.windowObject.style.top =
this.#orig_selfPosY - (this.#orig_mousePosY - cY) + "px";
this.dispatchEvent("windowdragmove", { detail: this, mouse: e });
}
}
event__responseKeyDown(e) {
switch (e.code) {
case "Backquote":
this.parentManager.raiseIndex(this, 1);
break;
case "Backspace":
this.destroy();
break;
case "Space":
if (e.shiftKey) this.minimizeWindow();
else this.maximizeWindow();
break;
case "ArrowUp":
if (this.#isFrozen) return;
if (e.shiftKey)
this.windowObject.style.height =
this.windowObject.offsetHeight - 10 + "px";
else
this.windowObject.style.top = this.windowObject.offsetTop - 10 + "px";
break;
case "ArrowDown":
if (this.#isFrozen) return;
if (e.shiftKey)
this.windowObject.style.height =
this.windowObject.offsetHeight + 10 + "px";
else
this.windowObject.style.top = this.windowObject.offsetTop + 10 + "px";
break;
case "ArrowLeft":
if (this.#isFrozen) return;
if (e.shiftKey)
this.windowObject.style.width =
this.windowObject.offsetWidth - 10 + "px";
else
this.windowObject.style.left =
this.windowObject.offsetLeft - 10 + "px";
break;
case "ArrowRight":
if (this.#isFrozen) return;
if (e.shiftKey)
this.windowObject.style.width =
this.windowObject.offsetWidth + 10 + "px";
else
this.windowObject.style.left =
this.windowObject.offsetLeft + 10 + "px";
break;
case "KeyR":
if (this.#isFrozen) return;
this.windowObject.style.width = `600px`;
this.windowObject.style.height = `500px`;
this.windowObject.style.left = `calc(50vw - ${this.width / 2}px)`;
this.windowObject.style.top = `calc(50vh - ${this.height / 2}px)`;
break;
}
}
static createWindow(windowRef, content, srcdoc, w, h) {
const windowObject = document.createElement("div");
windowObject.classList.add("window-object");
windowObject.style.width = `calc(${w}px + 2.75em)`;
windowObject.style.height = `calc(${h}px + 4.5em)`;
windowObject.style.left = `calc(50vw - ${w / 2}px)`;
windowObject.style.top = `calc(50vh - ${h / 2}px)`;
windowObject.tabIndex = "0";
{
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 windowMinimizeButton = document.createElement("button");
windowMinimizeButton.innerHTML = "minimize";
windowMinimizeButton.classList.add("window-minimize-button");
windowMinimizeButton.addEventListener("click", () =>
windowRef.minimizeWindow()
);
windowMinimizeButton.addEventListener("touchstart", (e) =>
e.stopPropagation()
);
windowMinimizeButton.addEventListener("touchend", (e) =>
e.stopPropagation()
);
windowManagerEnd.appendChild(windowMinimizeButton);
}
{
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()
);
windowMaximizeButton.addEventListener("touchstart", (e) =>
e.stopPropagation()
);
windowMaximizeButton.addEventListener("touchend", (e) =>
e.stopPropagation()
);
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()
);
windowDestroyButton.addEventListener("touchstart", (e) =>
e.stopPropagation()
);
windowDestroyButton.addEventListener("touchend", (e) =>
e.stopPropagation()
);
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;
}
}