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> <h2>WIP</h2>
</section> </section>
</main> </main>
<section id="accessibility"></section> <section id="accessibility" hidden></section>
<script src="/scripts/windows.js"></script> <script src="/scripts/windows.js"></script>
<script src="/scripts/accessibility.js"></script> <script src="/scripts/accessibility.js"></script>
</body> </body>

2
views/index.html
View file

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

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

@ -5,6 +5,7 @@
<title>HexFlagGen</title> <title>HexFlagGen</title>
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/styles/normal.css" /> <link rel="stylesheet" href="/styles/normal.css" />
<link rel="stylesheet" href="/styles/windows.css" />
<link rel="stylesheet" href="/styles/style.css" /> <link rel="stylesheet" href="/styles/style.css" />
<style> <style>
@import url("https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100;200;300;400;500;600;700;800;900&display=swap"); @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> <p>
Hex: <code><span id="hexdisplay">...</span></code> Hex: <code><span id="hexdisplay">...</span></code>
</p> </p>
<canvas id="canvas" width="300" height="200"></canvas>
</section> </section>
<section id="accessibility"></section> <div id="WindowHolder"></div>
<section id="accessibility" hidden></section>
<script src="scripts/index.js"></script> <script src="scripts/index.js"></script>
<script src="/scripts/windows.js"></script>
<script src="/scripts/accessibility.js"></script> <script src="/scripts/accessibility.js"></script>
<script src="/scripts/interface.js"></script> <script src="/scripts/interface.js"></script>
</body> </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 data = document.getElementById("data");
const generateButton = document.getElementById("generateButton"); const generateButton = document.getElementById("generateButton");
const hexdisplay = document.getElementById("hexdisplay"); const hexdisplay = document.getElementById("hexdisplay");
@ -9,8 +8,6 @@ const flag_type = document.getElementById("flag_type");
const root = document.querySelector(":root"); const root = document.querySelector(":root");
const ctx = canvas.getContext("2d");
function getData() { function getData() {
data.value = data.value.toUpperCase().replace(/[^0-9A-F]*/g, ""); data.value = data.value.toUpperCase().replace(/[^0-9A-F]*/g, "");
@ -18,7 +15,7 @@ function getData() {
hexdisplay.innerHTML = hexValue.join(" "); hexdisplay.innerHTML = hexValue.join(" ");
createFlag( initDocument(
hexValue.join("").match(/.{1,6}/g), hexValue.join("").match(/.{1,6}/g),
size_width.value, size_width.value,
size_height.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.width = w;
canvas.height = h; canvas.height = h;

2
views/projects/index.html
View file

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

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

@ -5,6 +5,7 @@
<title>WozSteamGem</title> <title>WozSteamGem</title>
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/styles/normal.css" /> <link rel="stylesheet" href="/styles/normal.css" />
<link rel="stylesheet" href="/styles/windows.css" />
<link rel="stylesheet" href="/styles/style.css" /> <link rel="stylesheet" href="/styles/style.css" />
<style> <style>
@import url("https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100;200;300;400;500;600;700;800;900&display=swap"); @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> </select>
<label for="align">Background Alignment</label> <label for="align">Background Alignment</label>
</section> </section>
<hr /> <div id="WindowHolder"></div>
<section> <section id="accessibility" hidden></section>
<canvas id="canvas" width="1280" height="720"></canvas>
</section>
<section id="accessibility"></section>
<script src="scripts/index.js"></script> <script src="scripts/index.js"></script>
<script src="/scripts/windows.js"></script>
<script src="/scripts/accessibility.js"></script> <script src="/scripts/accessibility.js"></script>
<script src="/scripts/interface.js"></script> <script src="/scripts/interface.js"></script>
</body> </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 data = document.getElementById("data");
const generateButton = document.getElementById("generateButton"); const generateButton = document.getElementById("generateButton");
const hexdisplay = document.getElementById("hexdisplay"); const hexdisplay = document.getElementById("hexdisplay");
@ -10,8 +9,6 @@ const align = document.getElementById("align");
const root = document.querySelector(":root"); const root = document.querySelector(":root");
const ctx = canvas.getContext("2d");
async function loadImage(url) { async function loadImage(url) {
return new Promise((r) => { return new Promise((r) => {
let img = new Image(); 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 gameID = steam_game.value;
var scottID = scott_index.value; var scottID = scott_index.value;
var alignment = align.value; var alignment = align.value;
@ -78,4 +94,4 @@ async function getScott() {
ctx.drawImage(logo, 64, Math.max(240 - newHeight / 2, 32), 800, newHeight); 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) Base style (requires reload)
</label> </label>
</fieldset>`; </fieldset>`;
document.querySelector("#accessibility").hidden = false;
accScale = document.getElementById("acc-scale"); accScale = document.getElementById("acc-scale");
accBase = document.getElementById("acc-base"); accBase = document.getElementById("acc-base");

6
views/scripts/interface.js
View file

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

39
views/scripts/windows.js
View file

@ -11,9 +11,9 @@ class WindowObject {
#orig_selfPosY; #orig_selfPosY;
#isDragging; #isDragging;
constructor(parent, content) { constructor(parent, content, srcdoc) {
this.parentElement = parent; this.parentElement = parent;
this.windowObject = WindowObject.createWindow(this, content); this.windowObject = WindowObject.createWindow(this, content, srcdoc);
this.parentElement.appendChild(this.windowObject); this.parentElement.appendChild(this.windowObject);
WindowObject.raiseWindow(this.windowObject); WindowObject.raiseWindow(this.windowObject);
@ -41,13 +41,20 @@ class WindowObject {
WindowObject.raiseWindow(this.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.windowContent.addEventListener("load", () => {
this.title = this.windowContent.contentWindow.document.title; this.title = this.windowContent.contentWindow.document.title;
this.windowManager if (!srcdoc)
.querySelector(".window-new-button") this.windowManager
.addEventListener("click", () => { .querySelector(".window-new-button")
window.open(this.content); .addEventListener("click", () => {
}); window.open(this.content);
});
}); });
} }
@ -56,7 +63,8 @@ class WindowObject {
} }
get content() { get content() {
return this.windowContent.src; if (srcdoc) return this.windowContent.srcdoc;
else return this.windowContent.src;
} }
set title(content) { set title(content) {
@ -64,7 +72,8 @@ class WindowObject {
} }
set content(src) { set content(src) {
this.windowContent.src = src; if (srcdoc) this.windowContent.srcdoc = src;
else this.windowContent.src = src;
} }
minimizeWindow() { minimizeWindow() {
@ -85,6 +94,11 @@ class WindowObject {
} }
destroy() { destroy() {
if (this.windowContent.contentWindow != null) {
const unloadEvent = new Event("beforeunload");
this.windowContent.contentWindow.dispatchEvent(unloadEvent);
}
this.windowObject.classList.add("closed"); this.windowObject.classList.add("closed");
setTimeout(() => { setTimeout(() => {
this.windowObject.remove(); this.windowObject.remove();
@ -142,7 +156,7 @@ class WindowObject {
windowObj.focus(); windowObj.focus();
} }
static createWindow(windowRef, content) { static createWindow(windowRef, content, srcdoc) {
const windowObject = document.createElement("div"); const windowObject = document.createElement("div");
windowObject.classList.add("window-object"); windowObject.classList.add("window-object");
@ -169,7 +183,7 @@ class WindowObject {
const windowManagerEnd = document.createElement("div"); const windowManagerEnd = document.createElement("div");
windowManagerEnd.classList.add("window-manager-end"); windowManagerEnd.classList.add("window-manager-end");
{ if (!srcdoc) {
const windowNewButton = document.createElement("button"); const windowNewButton = document.createElement("button");
windowNewButton.innerHTML = "open_in_new"; windowNewButton.innerHTML = "open_in_new";
windowNewButton.classList.add("window-new-button"); windowNewButton.classList.add("window-new-button");
@ -212,7 +226,8 @@ class WindowObject {
windowContent.classList.add("window-content"); windowContent.classList.add("window-content");
{ {
windowContent.src = content; if (srcdoc) windowContent.srcdoc = content;
else windowContent.src = content;
} }
windowObject.appendChild(windowContent); windowObject.appendChild(windowContent);

2
views/site/index.html
View file

@ -57,7 +57,7 @@
</p> </p>
</section> </section>
</main> </main>
<section id="accessibility"></section> <section id="accessibility" hidden></section>
<script src="/scripts/windows.js"></script> <script src="/scripts/windows.js"></script>
<script src="/scripts/accessibility.js"></script> <script src="/scripts/accessibility.js"></script>
</body> </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 { div.window-object > iframe.window-content {
background-color: var(--background-color);
height: 100%; height: 100%;
width: 100%; width: 100%;
border: none; border: var(--border-style);
} }