From 49dd11d99667f4b18030941bd1aad43bf409e12b Mon Sep 17 00:00:00 2001
From: MeowcaTheoRange <me@abtmtr.link>
Date: Thu, 23 Nov 2023 11:33:47 -0600
Subject: [PATCH] Window propagation, destroy windows on unload

---
 views/about/index.html              |  2 +-
 views/index.html                    |  2 +-
 views/projects/hex/index.html       |  6 +++--
 views/projects/hex/scripts/index.js | 35 ++++++++++++++++++++++----
 views/projects/index.html           |  2 +-
 views/projects/woz/index.html       |  9 +++----
 views/projects/woz/scripts/index.js | 26 +++++++++++++++----
 views/scripts/accessibility.js      |  1 +
 views/scripts/interface.js          |  6 ++---
 views/scripts/windows.js            | 39 ++++++++++++++++++++---------
 views/site/index.html               |  2 +-
 views/styles/windows.css            |  3 ++-
 12 files changed, 96 insertions(+), 37 deletions(-)
diff --git a/views/about/index.html b/views/about/index.html
index f6085b6..3a3af26 100644
--- a/views/about/index.html
+++ b/views/about/index.html
@@ -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>
diff --git a/views/index.html b/views/index.html
index 6286a2d..47cc8ba 100755
--- a/views/index.html
+++ b/views/index.html
@@ -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>
diff --git a/views/projects/hex/index.html b/views/projects/hex/index.html
index 2715325..86094b8 100755
--- a/views/projects/hex/index.html
+++ b/views/projects/hex/index.html
@@ -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>
diff --git a/views/projects/hex/scripts/index.js b/views/projects/hex/scripts/index.js
index f483e62..2cda2ec 100755
--- a/views/projects/hex/scripts/index.js
+++ b/views/projects/hex/scripts/index.js
@@ -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;
 
diff --git a/views/projects/index.html b/views/projects/index.html
index 8d804ab..992913b 100755
--- a/views/projects/index.html
+++ b/views/projects/index.html
@@ -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>
diff --git a/views/projects/woz/index.html b/views/projects/woz/index.html
index 66dbe26..f7d988e 100755
--- a/views/projects/woz/index.html
+++ b/views/projects/woz/index.html
@@ -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>
diff --git a/views/projects/woz/scripts/index.js b/views/projects/woz/scripts/index.js
index 48a4b1a..a003462 100755
--- a/views/projects/woz/scripts/index.js
+++ b/views/projects/woz/scripts/index.js
@@ -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);
diff --git a/views/scripts/accessibility.js b/views/scripts/accessibility.js
index 93f27ef..415641b 100755
--- a/views/scripts/accessibility.js
+++ b/views/scripts/accessibility.js
@@ -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");
diff --git a/views/scripts/interface.js b/views/scripts/interface.js
index c68dcf8..a6a3e81 100755
--- a/views/scripts/interface.js
+++ b/views/scripts/interface.js
@@ -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")
diff --git a/views/scripts/windows.js b/views/scripts/windows.js
index e3773ef..d777be2 100755
--- a/views/scripts/windows.js
+++ b/views/scripts/windows.js
@@ -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);
diff --git a/views/site/index.html b/views/site/index.html
index 3a2673c..5f8a7cf 100644
--- a/views/site/index.html
+++ b/views/site/index.html
@@ -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>
diff --git a/views/styles/windows.css b/views/styles/windows.css
index f77a14f..d73b7c7 100755
--- a/views/styles/windows.css
+++ b/views/styles/windows.css
@@ -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);
 }
