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

Window propagation, destroy windows on unload

Browse source
This commit is contained in:
MeowcaTheoRange 2023-11-23 11:33:47 -06:00
parent a76f50d3ec
commit 49dd11d996
12 changed files with 96 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
views/about/index.html
View file

@ -34,7 +34,7 @@
<h2>WIP</h2>
</section>
</main>
<section id="accessibility"></section>
<section id="accessibility" hidden></section>
<script src="/scripts/windows.js"></script>
<script src="/scripts/accessibility.js"></script>
</body>

2
views/index.html
View file

@ -73,7 +73,7 @@
</ul>
</section>
</main>
<section id="accessibility"></section>
<section id="accessibility" hidden></section>
<script src="/scripts/windows.js"></script>
<script src="/scripts/accessibility.js"></script>
</body>

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

@ -5,6 +5,7 @@
<title>HexFlagGen</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/styles/normal.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");
@ -70,10 +71,11 @@
<p>
Hex: <code><span id="hexdisplay">...</span></code>
</p>
<canvas id="canvas" width="300" height="200"></canvas>
</section>
<section id="accessibility"></section>
<div id="WindowHolder"></div>
<section id="accessibility" hidden></section>
<script src="scripts/index.js"></script>
<script src="/scripts/windows.js"></script>
<script src="/scripts/accessibility.js"></script>
<script src="/scripts/interface.js"></script>
</body>

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

@ -1,4 +1,3 @@
const canvas = document.getElementById("canvas");
const data = document.getElementById("data");
const generateButton = document.getElementById("generateButton");
const hexdisplay = document.getElementById("hexdisplay");
@ -9,8 +8,6 @@ const flag_type = document.getElementById("flag_type");
const root = document.querySelector(":root");
const ctx = canvas.getContext("2d");
function getData() {
data.value = data.value.toUpperCase().replace(/[^0-9A-F]*/g, "");
@ -18,7 +15,7 @@ function getData() {
hexdisplay.innerHTML = hexValue.join(" ");
createFlag(
initDocument(
hexValue.join("").match(/.{1,6}/g),
size_width.value,
size_height.value,
@ -51,7 +48,35 @@ function averageColors(hex) {
);
}
function createFlag(hex, w, h, type) {
function initDocument(hx, w, h, t) {
const newWindow = new WindowObject(
window.parent.document.querySelector("#WindowHolder"),
`<html>
<head>
<title>Result</title>
</head>
<body style="display:flex;margin:0;height:100vh;align-items:center;justify-content:center;">
<canvas id="canvas" width="300" height="200"></canvas>
</body>
</html>`,
true
);
newWindow.windowContent.contentWindow.addEventListener("load", () => {
createFlag(
hx,
w,
h,
t,
newWindow.windowContent.contentDocument.querySelector("#canvas")
);
propagateStyles(getComputedStyle(root), newWindow.windowObject);
});
}
function createFlag(hex, w, h, type, canvas) {
console.log(canvas);
const ctx = canvas.getContext("2d");
canvas.width = w;
canvas.height = h;

2
views/projects/index.html
View file

@ -43,8 +43,8 @@
Open Woz
</button>
</section>
<section id="accessibility"></section>
<div id="WindowHolder"></div>
<section id="accessibility" hidden></section>
<script src="/scripts/windows.js"></script>
<script src="/scripts/accessibility.js"></script>
</body>

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

@ -5,6 +5,7 @@
<title>WozSteamGem</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/styles/normal.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");
@ -70,12 +71,10 @@
</select>
<label for="align">Background Alignment</label>
</section>
<hr />
<section>
<canvas id="canvas" width="1280" height="720"></canvas>
</section>
<section id="accessibility"></section>
<div id="WindowHolder"></div>
<section id="accessibility" hidden></section>
<script src="scripts/index.js"></script>
<script src="/scripts/windows.js"></script>
<script src="/scripts/accessibility.js"></script>
<script src="/scripts/interface.js"></script>
</body>

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

@ -1,4 +1,3 @@
const canvas = document.getElementById("canvas");
const data = document.getElementById("data");
const generateButton = document.getElementById("generateButton");
const hexdisplay = document.getElementById("hexdisplay");
@ -10,8 +9,6 @@ const align = document.getElementById("align");
const root = document.querySelector(":root");
const ctx = canvas.getContext("2d");
async function loadImage(url) {
return new Promise((r) => {
let img = new Image();
@ -20,7 +17,26 @@ async function loadImage(url) {
});
}
async function getScott() {
function initDocument(hx, w, h, t) {
const newWindow = new WindowObject(
window.parent.document.querySelector("#WindowHolder"),
`<html>
<head>
<title>Result</title>
</head>
<body style="display:flex;margin:0;height:100vh;align-items:center;justify-content:center;">
<canvas id="canvas" width="1280" height="720"></canvas>
</body>
</html>`,
true
);
newWindow.windowContent.contentWindow.addEventListener("load", () => {
getScott(newWindow.windowContent.contentDocument.querySelector("#canvas"));
});
}
async function getScott(canvas) {
var gameID = steam_game.value;
var scottID = scott_index.value;
var alignment = align.value;
@ -78,4 +94,4 @@ async function getScott() {
ctx.drawImage(logo, 64, Math.max(240 - newHeight / 2, 32), 800, newHeight);
}
generateButton.addEventListener("click", getScott);
generateButton.addEventListener("click", initDocument);

1
views/scripts/accessibility.js
View file

@ -20,6 +20,7 @@ function createAccessibilityNodes() {
Base style (requires reload)
</label>
</fieldset>`;
document.querySelector("#accessibility").hidden = false;
accScale = document.getElementById("acc-scale");
accBase = document.getElementById("acc-base");

6
views/scripts/interface.js
View file

@ -1,6 +1,6 @@
function propagateStyles(rootStyles) {
if (window.frameElement == null) return;
const wfParent = window.frameElement.parentElement;
function propagateStyles(rootStyles, parent) {
if (parent == null && window.frameElement == null) return;
const wfParent = parent ?? window.frameElement.parentElement;
wfParent.style.setProperty(
"--background-color",
rootStyles.getPropertyValue("--background-color")

29
views/scripts/windows.js
View file

@ -11,9 +11,9 @@ class WindowObject {
#orig_selfPosY;
#isDragging;
constructor(parent, content) {
constructor(parent, content, srcdoc) {
this.parentElement = parent;
this.windowObject = WindowObject.createWindow(this, content);
this.windowObject = WindowObject.createWindow(this, content, srcdoc);
this.parentElement.appendChild(this.windowObject);
WindowObject.raiseWindow(this.windowObject);
@ -41,8 +41,15 @@ class WindowObject {
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", () => {
@ -56,7 +63,8 @@ class WindowObject {
}
get content() {
return this.windowContent.src;
if (srcdoc) return this.windowContent.srcdoc;
else return this.windowContent.src;
}
set title(content) {
@ -64,7 +72,8 @@ class WindowObject {
}
set content(src) {
this.windowContent.src = src;
if (srcdoc) this.windowContent.srcdoc = src;
else this.windowContent.src = src;
}
minimizeWindow() {
@ -85,6 +94,11 @@ class 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();
@ -142,7 +156,7 @@ class WindowObject {
windowObj.focus();
}
static createWindow(windowRef, content) {
static createWindow(windowRef, content, srcdoc) {
const windowObject = document.createElement("div");
windowObject.classList.add("window-object");
@ -169,7 +183,7 @@ class WindowObject {
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");
@ -212,7 +226,8 @@ class WindowObject {
windowContent.classList.add("window-content");
{
windowContent.src = content;
if (srcdoc) windowContent.srcdoc = content;
else windowContent.src = content;
}
windowObject.appendChild(windowContent);

2
views/site/index.html
View file

@ -57,7 +57,7 @@
</p>
</section>
</main>
<section id="accessibility"></section>
<section id="accessibility" hidden></section>
<script src="/scripts/windows.js"></script>
<script src="/scripts/accessibility.js"></script>
</body>

3
views/styles/windows.css
View file

@ -141,7 +141,8 @@ div.window-object > div.window-manager > div > button {
}
div.window-object > iframe.window-content {
background-color: var(--background-color);
height: 100%;
width: 100%;
border: none;
border: var(--border-style);
}