Window propagation, destroy windows on unload
This commit is contained in:
parent
a76f50d3ec
commit
49dd11d996
12 changed files with 96 additions and 37 deletions
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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");
|
||||
|
|
|
@ -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")
|
||||
|
|
|
@ -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,13 +41,20 @@ 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;
|
||||
this.windowManager
|
||||
.querySelector(".window-new-button")
|
||||
.addEventListener("click", () => {
|
||||
window.open(this.content);
|
||||
});
|
||||
if (!srcdoc)
|
||||
this.windowManager
|
||||
.querySelector(".window-new-button")
|
||||
.addEventListener("click", () => {
|
||||
window.open(this.content);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -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);
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue