Run two builds

One to produce the chatterbox app and the other to output the script and resources needed for parent.

Run two builds
7feeab91 · Midhun Suresh · 2072f9c1 · 7feeab91 · 7feeab91 · 7feeab91
Commit 7feeab91 authored 3 years ago by Midhun Suresh
--- a/.gitignore
+++ b/.gitignore
@@ -2,4 +2,5 @@ node_modules
 .DS_Store
 dist
 dist-ssr
-*.local
\ No newline at end of file
+build
+*.local
--- a/index.html
+++ b/index.html
@@ -4,26 +4,13 @@
 <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
+    <link rel="stylesheet" href="/src/parent-style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Chatterbox</title>
 </head>

 <body>
-    <embed src="./chatterbox.html?config=./config.json" 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>
+    <script src="/src/parent.ts" type="module"></script>
 </body>

 </html>
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
  "version": "0.0.0",
  "scripts": {
    "start": "vite",
-    "build": "tsc && vite build",
+    "build": "tsc && vite build && vite --config parent-vite.config.js build",
    "preview": "vite preview"
  },
  "devDependencies": {

--- a/parent-vite.config.js
+++ b/parent-vite.config.js
+const { defineConfig } = require('vite')
+const { resolve } = require("path");
+
+module.exports = defineConfig({
+    build: {
+        outDir: "./build/parent",
+        rollupOptions: {
+            input: {
+                main: resolve(__dirname, "/src/parent.ts"),
+                parent: resolve(__dirname, "/src/parent-style.css"),
+            },
+        },
+    },
+});
+
--- a/src/parent-style.css
+++ b/src/parent-style.css
+.chatterbox-iframe {
+    position: absolute;
+    right: 0;
+    bottom: 50px;
+    height: 615px;
+    width: 397px;
+    border: none;
+}
+
+.start {
+    position: absolute;
+    right: 10px;
+    bottom: 10px;
+}
+
+.start button {
+    width: 32px;
+    height: 32px;
+    border: none;
+    background: no-repeat center url('./ui/res/chat-bubbles.svg'), #295dbd;
+    border-radius: 2px;
+    cursor: pointer;
+}
+
+body {
+    background-color: blanchedalmond;
+}
--- a/src/parent.ts
+++ b/src/parent.ts
+const configLocation = "./config.json";
+let isIframeLoaded = false;
+
+const sizeCollection = {
+    "desktop": {
+        "account-setup": { height: "160px", width: "360px" },
+        "timeline": {height: "600px", width: "400px"}
+    },
+    "mobile": {
+        "account-setup": { height: "100vh", width: "100vw" },
+        "timeline": {height: "100vh", width: "100vw"}
+    }
+}
+
+window.addEventListener("message", event => {
+    const iframeElement = document.querySelector(".chatterbox-iframe") as HTMLIFrameElement;
+    const { action } = event.data;
+    switch (action) {
+        case "resize-iframe":
+            const { view } = event.data;
+            const size = sizeCollection.desktop[view];
+            if (!size) { return; }
+            const { height, width } = size;
+            if (height) { iframeElement.style.height = height; }
+            if (width) { iframeElement.style.width = width; }
+            break;
+        case "minimize":
+            minimizeIframe();
+            break;
+    }
+});
+
+function renderStartButton() {
+    const container = document.createElement("div");
+    container.className = "start";
+    const button = document.createElement("button");
+    button.className = "StartChat";
+    button.onclick = () => isIframeLoaded? minimizeIframe() : loadChatterboxIframe();
+    container.appendChild(button);
+    document.body.appendChild(container);
+}
+
+function loadChatterboxIframe() {
+    const iframe = document.createElement("iframe");
+    iframe.src = `./chatterbox.html?config=${configLocation}`;
+    iframe.className = "chatterbox-iframe";
+    document.body.appendChild(iframe);
+    isIframeLoaded = true;
+}
+
+function minimizeIframe() {
+    const iframeElement = document.querySelector(".chatterbox-iframe") as HTMLIFrameElement;
+    if (iframeElement.style.display !== "none") {
+        iframeElement.style.display = "none";
+    }
+    else {
+        iframeElement.style.display = "block";
+    }
+
+}
+
+renderStartButton();
--- 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;
-
-const sizeCollection = {
-    "desktop": {
-        "start": { height: "50px", width: "50px" },
-        "account-setup": { height: "115px", width: "360px" },
-        "timeline": {height: "600px", width: "400px"}
-    }
-}
-
-window.addEventListener("message", event => {
-    const view = event.data;
-    const size = sizeCollection.desktop[view];
-    const { height, width } = size;
-    if (height) { iframeElement.style.height = height; }
-    if (width) { iframeElement.style.width = width; }
-});
--- a/vite.config.js
+++ b/vite.config.js
 const { defineConfig } = require('vite')
+const { resolve } = require("path");

 module.exports = defineConfig({
+    build: {
+    rollupOptions: {
+      input: {
+        main: resolve(__dirname, 'chatterbox.html'),
+        parent: resolve(__dirname, '/src/parent-style.css')
+      }
+        },
+        outDir: "./build/chatterbox"
+  },
    server: {
        fs: {
            // Allow serving files from hydrogen-web/target (for fonts and images)