WIP

66a986fb · Midhun Suresh · db5a1327 · 66a986fb · 66a986fb · 66a986fb
Commit 66a986fb authored 3 years ago by Midhun Suresh
--- a/chatterbox.html
+++ b/chatterbox.html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="/src/style.css">
+    <title>Chatterbox</title>
+</head>
+<body>
+    <div id="chatterbox" data-config-link="./config.json"></div>
+    <script type="module" src="/src/main.ts"></script>
+</body>
+</html>
--- a/index.html
+++ b/index.html
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+
+<head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
-    <link rel="stylesheet" href="src/style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Chatterbox</title>
-  </head>
-  <body>
-    <div id="chatterbox" data-config-link="./config.json"></div>
-    <script type="module" src="/src/main.ts"></script>
-  </body>
+</head>
+
+<body>
+    <embed src="./chatterbox.html" class="chatterbox-iframe">
+    <script src="/src/resize.ts"></script>
+    <style>
+        .chatterbox-iframe {
+            position: absolute;
+            right: 0;
+            bottom: 0;
+            height: 615px;
+            width: 397px;
+        }
+
+        body {
+            background-color: blanchedalmond;
+        }
+    </style>
+</body>
+
 </html>
--- a/src/main.ts
+++ b/src/main.ts
@@ -54,4 +54,10 @@ function allowsChild(parent, child) {
    }
 }

+function sendFrameResizeEventToParent(height?: number, width?: number) {
+    const message = { action: "resize-iframe", params: { height, width } };
+    window.parent?.postMessage(message);
+}
+
+(window as any).sendFrameResizeEventToParent = sendFrameResizeEventToParent;
 main();
--- a/src/resize.ts
+++ b/src/resize.ts
+/*
+This script will resize the iframe based on messages
+*/
+const iframeElement = document.querySelector(".chatterbox-iframe") as HTMLIFrameElement;
+
+window.addEventListener("message", event => {
+    const { action, params } = event.data;
+    if (action === "resize-iframe") {
+        const { height, width } = params;
+        if (height) { iframeElement.style.height = height; }
+        if (width) { iframeElement.style.width = width; }
+    }
+});
--- a/src/style.css
+++ b/src/style.css
@@ -116,7 +116,3 @@ todo: this style should actually be in hydrogen-web
    border-radius: 5px;
    border: #c2bebe 1.5px solid;
 }
-
-body {
-    background-color: #205a634d;
-}
--- a/src/ui/views/RootView.ts
+++ b/src/ui/views/RootView.ts
@@ -12,10 +12,13 @@ export class RootView extends TemplateView<RootViewModel> {
        return t.mapView(vm => vm.activeSection, section => {
            switch(section) {
                case "start":
+                    window.sendFrameResizeEventToParent("50px", "50px");
                    return new StartView(vm);
                case "account-setup":
+                    window.sendFrameResizeEventToParent("115px", "360px");
                    return new AccountSetupView(vm.accountSetupViewModel);
                case "timeline":
+                    window.sendFrameResizeEventToParent("600px", "400px");
                    return new ChatterboxView(vm.chatterboxViewModel);
            }
            return null;

--- a/vite.config.js
+++ b/vite.config.js
@@ -2,13 +2,13 @@ const path = require('path')
 const { defineConfig } = require('vite')

 module.exports = defineConfig({
-    build: {
+/*     build: {
        lib: {
            entry: path.resolve(__dirname, "src/main.ts"),
            name: "chatterbox",
            fileName: "chatterbox.js",
        },
-    },
+    }, */
    server: {
        fs: {
            // Allow serving files from hydrogen-web/target (for fonts and images)