MeowcaTheoRange/abtmtr-v4
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

We should improve windowing somewhat.

Browse source 
Yet you participate in windowing, curious!
I am very intelligent.
This commit is contained in:
MeowcaTheoRange 2023-11-24 19:53:10 -06:00
parent 7f689d5817
commit e0c355ad82
11 changed files with 480 additions and 111 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
views/projects/hex/index.html
View file

@ -78,5 +78,10 @@
<script src="/scripts/windows.js"></script>
<script src="/scripts/accessibility.js"></script>
<script src="/scripts/interface.js"></script>
<script>
window.manager = new WindowManager(
document.getElementById("WindowHolder")
);
</script>
</body>
</html>

3
views/projects/hex/scripts/index.js
View file

@ -49,8 +49,7 @@ function averageColors(hex) {
}
function initDocument(hx, w, h, t) {
const newWindow = new WindowObject(
window.parent.document.querySelector("#WindowHolder"),
const newWindow = window.top.manager.createWindow(
`<html>
<head>
<title>Result</title>

23
views/projects/index.html
View file

@ -5,8 +5,8 @@
<title>Project Windows</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/styles/normal.css" />
<link rel="stylesheet" href="/styles/style.css" />
<link rel="stylesheet" href="/styles/windows.css" />
<link rel="stylesheet" href="/styles/style.css" />
<style>
@import url("https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100;200;300;400;500;600;700;800;900&display=swap");
@ -29,23 +29,18 @@
<p>Various projects I've made.</p>
</section>
<$ nav.html $>
<section>
<button
onclick="
new WindowObject(document.getElementById('WindowHolder'), '/projects/hex/')"
>
Open Hex
</button>
<button
onclick="
new WindowObject(document.getElementById('WindowHolder'), '/projects/woz/')"
>
Open Woz
</button>
<section id="data_get">
<h1>Getting projects...</h1>
</section>
<div id="WindowHolder"></div>
<section id="accessibility" hidden></section>
<script src="/scripts/windows.js"></script>
<script src="/scripts/accessibility.js"></script>
<script src="./scripts/data_get_projects.js"></script>
<script>
window.manager = new WindowManager(
document.getElementById("WindowHolder")
);
</script>
</body>
</html>

20
views/projects/public/projects.json Normal file
View file

@ -0,0 +1,20 @@
[
{
"name": "HexFlagGen",
"date": 1700114400000,
"description": [
"HexFlagGen is a flag generator inspired by how the <a href=\"https://en.wikipedia.org/wiki/Free_Speech_Flag\" target=\"_blank\">Free Speech Flag</a> was made.",
"I dislike DRM and support trans rights."
],
"url": "/projects/hex/"
},
{
"name": "WozSteamGen",
"date": 1700200800000,
"description": [
"WozSteamGen is a Scott The Woz thumbnail generator for Steam games.",
"It's an API-less adaptation of Steam The Woz, running completely locally."
],
"url": "/projects/woz/"
}
]

25
views/projects/scripts/data_get_projects.js Normal file
View file

@ -0,0 +1,25 @@
const data_get = document.getElementById("data_get");
fetch("./public/projects.json")
.then((x) => x.json())
.then((projects) => {
data_get.innerHTML = projects.reduce(
(html, project) =>
html +
`<h1>${project.name}</h1>
<p><b>${new Date(project.date).toLocaleDateString()}</b></p>
${project.description.reduce(
(html, descfragment) => html + `<p>${descfragment}</p>`,
""
)}
<p>
<button onclick="window.open('${project.url}')">Open</button> or
<button
onclick="
new WindowObject(manager, '${project.url}')"
>
Open Window
</button>
</p>`,
""
);
});

5
views/projects/woz/index.html
View file

@ -77,5 +77,10 @@
<script src="/scripts/windows.js"></script>
<script src="/scripts/accessibility.js"></script>
<script src="/scripts/interface.js"></script>
<script>
window.manager = new WindowManager(
document.getElementById("WindowHolder")
);
</script>
</body>
</html>

5
views/projects/woz/scripts/index.js
View file

@ -18,8 +18,8 @@ async function loadImage(url) {
}
function initDocument(hx, w, h, t) {
const newWindow = new WindowObject(
window.parent.document.querySelector("#WindowHolder"),
console.log(window.parent, window.parent.manager);
const newWindow = window.top.manager.createWindow(
`<html>
<head>
<title>Result</title>
@ -35,6 +35,7 @@ function initDocument(hx, w, h, t) {
newWindow.windowContent.contentWindow.addEventListener("load", () => {
getScott(newWindow.windowContent.contentDocument.querySelector("#canvas"));
propagateStyles(getComputedStyle(root), newWindow.windowObject);
});
}

410
views/scripts/windows.js
View file

@ -6,25 +6,129 @@ function isTouchDevice() {
);
}
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(parent, content, srcdoc, w, h) {
this.parentElement = parent;
constructor(manager, content, srcdoc, w, h) {
this.parentManager = manager;
this.windowObject = WindowObject.createWindow(this, content, srcdoc, w, h);
this.parentElement.appendChild(this.windowObject);
this.parentManager.addWindow(this);
WindowObject.raiseWindow(this.windowObject);
this.dispatchEvent("windowcreate", { detail: this });
this.parentManager.raiseWindow(this);
if (isTouchDevice()) this.maximizeWindow();
@ -34,47 +138,47 @@ class WindowObject {
);
this.windowContent = this.windowObject.querySelector(".window-content");
this.windowManager.addEventListener("mousedown", (e) =>
this.event__dragMouseDown(e)
);
this.windowManager.addEventListener("mousemove", (e) =>
this.windowManager.addEventListener("mousedown", (e) => {
this.event__dragMouseDown(e);
this.parentManager.raiseWindow(this);
});
this.windowObject.addEventListener("mousemove", (e) =>
this.event__dragMouseMove(e)
);
this.windowManager.addEventListener("mouseup", (e) =>
this.windowObject.addEventListener("mouseout", (e) =>
this.event__dragMouseMove(e)
);
this.windowObject.addEventListener("mouseup", (e) =>
this.event__dragMouseUp(e)
);
this.windowManager.addEventListener("mouseout", (e) =>
this.event__dragMouseMove(e)
);
this.windowManager.addEventListener("touchstart", (e) =>
this.event__dragMouseDown(e, true)
);
this.windowManager.addEventListener("touchmove", (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.windowManager.addEventListener("touchend", (e) =>
this.parentManager.managerObject.addEventListener("touchend", (e) =>
this.event__dragMouseUp(e, true)
);
this.windowObject.addEventListener("keydown", (e) =>
this.event__responseKeyDown(e)
);
this.windowObject.addEventListener("mousedown", (e) =>
WindowObject.raiseWindow(this.windowObject)
this.windowObject.addEventListener("focus", (e) =>
this.parentManager.raiseWindow(this)
);
this.windowContent.contentWindow.addEventListener("mousedown", (e) =>
WindowObject.raiseWindow(this.windowObject)
this.windowContent.contentWindow.addEventListener("focus", (e) =>
this.parentManager.raiseWindow(this, false)
);
window.addEventListener("beforeunload", () => this.destroy());
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.content);
window.open(this.contentUrl);
});
nb.addEventListener("touchstart", (e) => e.stopPropagation());
nb.addEventListener("touchend", (e) => e.stopPropagation());
@ -82,37 +186,212 @@ class WindowObject {
});
}
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.src = 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");
WindowObject.raiseWindow(this.windowObject);
this.frozen = false;
this.petrified = false;
this.windowObject.style.setProperty("--z-index", null);
this.parentManager.raiseWindow(this);
} else {
this.windowObject.classList.add("minimized");
this.windowObject.style.zIndex = 50;
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() {
this.windowObject.classList.toggle("maximized");
if (this.windowObject.classList.contains("maximized")) {
this.windowObject.classList.remove("maximized");
} else {
this.windowObject.classList.add("maximized");
this.minimized = false;
}
WindowObject.raiseWindow(this.windowObject);
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() {
@ -121,18 +400,14 @@ class WindowObject {
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);
this.parentManager.removeWindow(this.windowId);
this.dispatchEvent("windowdestroy", { detail: this });
}
event__dragMouseDown(e, touch) {
e.preventDefault();
if (this.#isFrozen) return;
this.#orig_mousePosX = touch ? e.touches[0].clientX : e.clientX;
this.#orig_mousePosY = touch ? e.touches[0].clientY : e.clientY;
@ -142,12 +417,17 @@ class WindowObject {
this.windowContent.style.pointerEvents = "none";
this.windowManager.style.cursor = "move";
this.#isDragging = true;
if (this.windowObject.style.zIndex != 100)
WindowObject.raiseWindow(this.windowObject);
if (this.windowObject.style.zIndex != this.parentManager.maxZIndex)
this.parentManager.raiseWindow(this);
this.dispatchEvent("windowdragdown", { detail: this, mouse: e });
}
event__dragMouseUp(e, touch) {
e.preventDefault();
if (this.#isFrozen) return;
if (this.#isDragging)
this.dispatchEvent("windowdragup", { detail: this, mouse: e });
this.#orig_mousePosX = 0;
this.#orig_mousePosY = 0;
@ -158,7 +438,7 @@ class WindowObject {
}
event__dragMouseMove(e, touch) {
e.preventDefault();
if (this.#isFrozen) return;
if (this.#isDragging) {
var cX = touch ? e.touches[0].clientX : e.clientX;
@ -167,20 +447,25 @@ class WindowObject {
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) {
e.preventDefault();
switch (e.code) {
case "Backquote":
this.parentManager.raiseIndex(this, 1);
break;
case "Backspace":
this.destroy();
break;
case "Space":
this.maximizeWindow();
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";
@ -188,6 +473,7 @@ class WindowObject {
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";
@ -195,6 +481,7 @@ class WindowObject {
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";
@ -203,6 +490,7 @@ class WindowObject {
this.windowObject.offsetLeft - 10 + "px";
break;
case "ArrowRight":
if (this.#isFrozen) return;
if (e.shiftKey)
this.windowObject.style.width =
this.windowObject.offsetWidth + 10 + "px";
@ -210,19 +498,16 @@ class WindowObject {
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 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");
@ -263,6 +548,23 @@ class WindowObject {
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";

11
views/styles/normal.css
View file

@ -14,7 +14,7 @@
"Segoe UI Symbol";
--document-width: 40em;
--border-style: 0.0625em solid var(--color);
--border-style: calc(1em / 16) solid var(--color);
}
body {
@ -35,17 +35,23 @@ html.base {
"Segoe UI Symbol" !important;
--document-width: 40em;
--border-style: 0.0625em solid var(--color);
--border-style: calc(1em / 16) solid var(--color);
transition: none;
}
html.base body {
margin: 0;
}
html.base * {
transition: none;
}
/* Size and type normalize */
html {
font-size: var(--base-scale);
line-height: 1em;
background-color: var(--background-color);
color: var(--color);
}
@ -185,6 +191,7 @@ input[type="reset"] {
margin-inline: 0;
margin-block: 0.25em;
font-size: 1em;
line-height: 1.25em;
font-family: inherit;
background-color: var(--accent-color);
color: var(--accent-color-fg);

10
views/styles/style.css
View file

@ -9,3 +9,13 @@
#accessibility fieldset {
margin-block: 0;
}
/* * {
font-smooth: never;
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: grayscale;
} */
* {
transition: background-color 0.25s, color 0.25s, opacity 0.25s;
}

70
views/styles/windows.css
View file

@ -1,14 +1,13 @@
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0");
@keyframes appear {
from {
scale: 0;
opacity: 0;
}
to {
scale: 1;
opacity: 1;
}
.window-master {
display: inline-block;
position: fixed;
left: 0;
top: 0;
width: 0;
height: 0;
overflow: visible;
}
div.window-object {
@ -20,6 +19,7 @@ div.window-object {
height: 500px;
left: calc(50vw - 300px);
top: calc(50vh - 250px);
bottom: auto;
min-width: 10em;
min-height: 2em;
@ -30,7 +30,8 @@ div.window-object {
overflow: hidden;
padding: 0.25em;
/* padding: 0.5em; */
transition: opacity 0.25s, scale 0.25s;
/* transition: background-color 0.25s, color 0.25s, opacity 0.25s; */
transition: none;
scale: 1;
opacity: 1;
@ -42,32 +43,10 @@ div.window-object.unfocused {
opacity: 0.5;
}
div.window-object.closed {
scale: 0;
opacity: 0;
}
div.window-object.minimized {
top: auto !important;
bottom: 0;
left: 0 !important;
max-width: 20em !important;
width: 20em !important;
min-width: 20em !important;
max-height: 2.5em !important;
height: 2.5em !important;
min-height: 2.5em !important;
div.window-object.petrified {
resize: none;
}
div.window-object.minimized > div.window-manager {
cursor: default !important;
}
div.window-object.minimized > iframe.window-content {
display: none;
}
div.window-object.maximized {
top: 0 !important;
left: 0 !important;
@ -84,6 +63,27 @@ div.window-object.maximized > div.window-manager {
cursor: default !important;
}
div.window-object.minimized {
top: auto !important;
left: 0 !important;
max-width: 20em !important;
width: 20em !important;
min-width: 20em !important;
max-height: calc(2em + (1em / 16)) !important;
height: calc(2em + (1em / 16)) !important;
min-height: calc(2em + (1em / 16)) !important;
resize: none;
z-index: var(--z-index) !important;
}
div.window-object.minimized > div.window-manager {
cursor: default !important;
}
div.window-object.minimized > iframe.window-content {
display: none;
}
div.window-object > div.window-manager {
display: grid;
width: 100%;
@ -131,8 +131,8 @@ div.window-object > div.window-manager > div > button {
margin-inline-start: 0.25em;
box-sizing: border-box;
border: var(--border-style);
background-color: var(--accent-color);
color: var(--accent-color-fg);
background-color: transparent;
color: currentColor;
font-family: "Material Symbols Outlined";
text-align: center;
vertical-align: middle;