From 0a2aa49777761952852b50cd027177774e40a2e5 Mon Sep 17 00:00:00 2001
From: Victor Seiji Hariki <victorseijih@gmail.com>
Date: Mon, 19 Dec 2022 20:42:13 -0300
Subject: [PATCH] just a file I'm using to test iframe functionality

Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>
---
 pages/embed.test.html | 74 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 74 insertions(+)
 create mode 100644 pages/embed.test.html
diff --git a/pages/embed.test.html b/pages/embed.test.html
new file mode 100644
index 0000000..6917689
--- /dev/null
+++ b/pages/embed.test.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en-US">
+	<head>
+		<meta charset="utf-8" />
+		<title>openOutpaint embed</title>
+	</head>
+	<body>
+		<iframe
+			id="openoutpaint"
+			style="width: 100%; height: 800px"
+			src="../index.html"
+			frameborder="0"></iframe>
+		<button id="add-res">Add Resource</button>
+		<script>
+			document.addEventListener("DOMContentLoaded", async () => {
+				const frame = document.getElementById("openoutpaint");
+
+				const key = (await (await fetch("../key.json")).json()).key;
+
+				console.info("[embed] Add message listener");
+				window.addEventListener("message", ({data, origin, source}) => {
+					if (source === frame.contentWindow) {
+						console.debug(data);
+						switch (data.type) {
+							case "openoutpaint/ack":
+								if (data.message.type === "openoutpaint/init") {
+									console.info("[embed] Received init ack");
+									clearTimeout(initLoop);
+									initLoop = null;
+								}
+								break;
+						}
+					}
+				});
+
+				let initLoop = null;
+				const sendInit = () => {
+					console.info("[embed] Sending init message");
+					frame.contentWindow.postMessage({
+						type: "openoutpaint/init",
+						key,
+					});
+					initLoop = setTimeout(sendInit, 1000);
+				};
+
+				sendInit();
+
+				const canvas = document.createElement("canvas");
+
+				const image = document.createElement("img");
+				image.crossOrigin = "";
+				image.src = "https://www.w3schools.com/css/paris.jpg";
+				image.onload = () => {
+					canvas.width = image.width;
+					canvas.height = image.height;
+					canvas.getContext("2d").drawImage(image, 0, 0);
+				};
+
+				document.body.appendChild(image);
+
+				document.getElementById("add-res").addEventListener("click", () => {
+					frame.contentWindow.postMessage({
+						key,
+						type: "openoutpaint/add-resource",
+						image: {
+							dataURL: canvas.toDataURL(),
+							resourceName: "Embed Resource",
+						},
+					});
+				});
+			});
+		</script>
+	</body>
+</html>
