Work on sync stuff

2022-04-05 17:02:17 +02:00
parent 1b0048cdcf
commit 38faf50ab8
51 changed files with 704 additions and 257 deletions
@@ -2,18 +2,9 @@
 <html lang="en">
 <head>
    <meta charset="UTF-8">
-    <link href="panel.scss" rel="stylesheet" />
+    <link href="panel.scss" rel="stylesheet"/>
    <base target="_top">
-    <script type="module">
-        window.addEventListener("message", (message) => {
-            const data = message.data;
-            switch(data.type) {
-                case "html":
-                    document.body.innerHTML = data.html;
-                    break;
-            }
-        })
-    </script>
+    <script src="panel_page.ts"/>
 </head>
 <body>
 Send me HTML
@@ -1,4 +1,4 @@
-import {useEffect, useRef} from "react";
+import { useEffect, useRef } from "react";
 // @ts-ignore
 import iframeHtml from "bundle-text:./panel.html";

@@ -23,6 +23,22 @@ export function Panel({ html, flex }: { html: string; flex: number }) {
      iframe.onload = null;
    };
  }, [html]);
+
+  useEffect(() => {
+    let messageListener = (evt: any) => {
+      if (evt.source !== iFrameRef.current!.contentWindow) {
+        return;
+      }
+      let data = evt.data;
+      if (!data) return;
+      console.log("Got message from panel", data);
+    };
+    window.addEventListener("message", messageListener);
+    return () => {
+      window.removeEventListener("message", messageListener);
+    };
+  }, []);
+
  return (
    <div className="panel" style={{ flex }}>
      <iframe srcDoc={iframeHtml} ref={iFrameRef} />
@@ -0,0 +1,22 @@
+window.addEventListener("message", (message) => {
+  const data = message.data;
+  switch (data.type) {
+    case "html":
+      document.body.innerHTML = data.html;
+      break;
+  }
+});
+
+function sendEvent(data: any) {
+  window.parent.postMessage(
+    {
+      type: "event",
+      data: data,
+    },
+    "*"
+  );
+}
+//
+// setInterval(() => {
+//   self.sendEvent("testing");
+// }, 2000);
@@ -1,4 +1,4 @@
-import {EditorView} from "@codemirror/view";
+import { EditorView } from "@codemirror/view";
 import * as util from "../util";

 export function StatusBar({ editorView }: { editorView?: EditorView }) {
@@ -1,6 +1,6 @@
-import {Notification} from "../types";
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {faFileLines} from "@fortawesome/free-solid-svg-icons";
+import { Notification } from "../types";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faFileLines } from "@fortawesome/free-solid-svg-icons";

 function prettyName(s: string | undefined): string {
  if (!s) {