From ebf72841e656099d0d09c1319e3d4900bcb228a6 Mon Sep 17 00:00:00 2001
From: Midhun Suresh <midhunr@element.io>
Date: Tue, 8 Feb 2022 13:53:14 +0530
Subject: [PATCH] WIP
---
README.md | 26 ++++++++++++++++++++++++++
index.html | 5 ++++-
parent-vite.config.js | 15 ---------------
src/main.ts | 4 ++--
src/parent-style.css | 2 +-
src/parent.ts | 17 +++++++++++++----
vite.config.js | 18 ++++++++++--------
yarn.lock | 6 +++---
8 files changed, 59 insertions(+), 34 deletions(-)
create mode 100644 README.md
delete mode 100644 parent-vite.config.js
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..4bbeeb8
--- /dev/null
+++ b/README.md
@@ -0,0 +1,26 @@
+Chatterbox lets you securely embed [Hydrogen](https://github.com/vector-im/hydrogen-web) within any website.
+
+### Develop Instructions
+---
+1) Clone the repo.
+2) Install dependencies (you only need to do this once):
+ ```properties
+ yarn install
+ ```
+3) Modify config.json in `public` directory with your homeserver details.
+(See `types/IChatterboxConfig.ts`)
+4) Start develop server:
+ ```properties
+ yarn start
+ ```
+
+### Build Instructions
+---
+Follow the develop instructions above (steps 1-3), then:
+- Build chatterbox app into `/target` directory:
+ ```properties
+ yarn build
+ ```
+
+### Embed Instructions
+---
diff --git a/index.html b/index.html
index 95ba55a..e1dbe9a 100644
--- a/index.html
+++ b/index.html
@@ -33,7 +33,10 @@
<div class="para">Elit aute occaecat do labore ea mollit cupidatat. Eiusmod non mollit excepteur adipisicing deserunt et do fugiat ea. Sit commodo laborum labore dolor ad nulla dolore aute sit occaecat irure magna. Cupidatat dolore sint Lorem sint id laboris pariatur dolore laborum ullamco ad. Cillum ut ea nisi proident in cillum. Pariatur esse dolor est laborum ad nostrud. Exercitation esse commodo minim ipsum aute duis pariatur dolore culpa.</div>
</div>
</div>
- <script src="/src/parent.ts" type="module"></script>
+ <script>
+ window.CONFIG_LOCATION = "./config.json";
+ </script>
+ <script src="./src/parent.ts" type="module"></script>
</body>
</html>
diff --git a/parent-vite.config.js b/parent-vite.config.js
deleted file mode 100644
index 1ec3a40..0000000
--- a/parent-vite.config.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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"),
- },
- },
- },
-});
-
diff --git a/src/main.ts b/src/main.ts
index 8bb1326..91460d5 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -60,11 +60,11 @@ function allowsChild(parent, child) {
window.parent?.postMessage({
action: "resize-iframe",
view
- });
+ }, "*");
};
(window as any).sendMinimizeToParent = function () {
- window.parent?.postMessage({ action: "minimize" });
+ window.parent?.postMessage({ action: "minimize" }, "*");
};
main();
diff --git a/src/parent-style.css b/src/parent-style.css
index 0c58d4e..0bac34b 100644
--- a/src/parent-style.css
+++ b/src/parent-style.css
@@ -28,7 +28,7 @@
width: 32px;
height: 32px;
border: none;
- background: no-repeat center url('./ui/res/chat-bubbles.svg'), #295dbd;
+ background: no-repeat center #295dbd;
border-radius: 2px;
cursor: pointer;
}
diff --git a/src/parent.ts b/src/parent.ts
index 6c4d3c0..40fc681 100644
--- a/src/parent.ts
+++ b/src/parent.ts
@@ -1,7 +1,7 @@
-import cssLink from "./parent-style.css";
+import startButtonIcon from "./ui/res/chat-bubbles.svg";
-const configLocation = "./config.json";
let isIframeLoaded = false;
+const rootHost = (document.querySelector("#chatterbox-script") as HTMLScriptElement).src;
const sizeCollection = {
"desktop": {
@@ -37,6 +37,8 @@ function renderStartButton() {
const button = document.createElement("button");
button.className = "StartChat";
button.onclick = () => isIframeLoaded? minimizeIframe() : loadChatterboxIframe();
+ const fixedStartButtonIcon = new URL(startButtonIcon, rootHost).href;
+ button.style.backgroundImage = `url(${fixedStartButtonIcon})`;
container.appendChild(button);
document.body.appendChild(container);
}
@@ -44,12 +46,19 @@ function renderStartButton() {
function loadCSS() {
const linkElement = document.createElement("link") as HTMLLinkElement;
linkElement.rel = "stylesheet";
- linkElement.href = cssLink;
+ const url = new URL("./parent-style.css", import.meta.url);
+ const urlFixed = new URL(url.pathname, rootHost);
+ linkElement.href = urlFixed.href;
+ document.head.appendChild(linkElement);
}
function loadChatterboxIframe() {
const iframe = document.createElement("iframe");
- iframe.src = `./chatterbox.html?config=${configLocation}`;
+ const configLocation = (window as any).CONFIG_LOCATION;
+ if (!configLocation) {
+ throw new Error("CONFIG_LOCATION is not set");
+ }
+ iframe.src = new URL("../chatterbox.html?config=" + configLocation, import.meta.url).href;
iframe.className = "chatterbox-iframe";
document.body.appendChild(iframe);
isIframeLoaded = true;
diff --git a/vite.config.js b/vite.config.js
index 5d51548..d93f3ba 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,14 +1,16 @@
-const { defineConfig } = require('vite')
+const { defineConfig } = require("vite")
const { resolve } = require("path");
module.exports = defineConfig({
build: {
- rollupOptions: {
- input: {
- main: resolve(__dirname, 'chatterbox.html'),
- parent: resolve(__dirname, 'index.html')
- }
+ rollupOptions: {
+ input: {
+ main: resolve(__dirname, "chatterbox.html"),
+ parent: resolve(__dirname, "index.html"),
+ },
},
- outDir: "./target"
- },
+ outDir: "./target",
+ target: 'esnext',
+ assetsInlineLimit: 0,
+ }
});
diff --git a/yarn.lock b/yarn.lock
index b8e1f0c..88ddd63 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -213,9 +213,9 @@ typescript@^4.4.4:
integrity sha512-VgYs2A2QIRuGphtzFV7aQJduJ2gyfTljngLzjpfW9FoYZF6xuw1W0vW9ghCKLfcWrCFxK81CSGRAvS1pn4fIUg==
vite@^2.7.2:
- version "2.7.7"
- resolved "https://registry.yarnpkg.com/vite/-/vite-2.7.7.tgz#f2f1af5f9fc409053130261416000447347bc203"
- integrity sha512-Nm4ingl//gMSj/p1aCBHuTc5Fd8W8Mwdci/HUvqCVq8xaJqF7z08S/LRq1M9kS0jRfJk1/f/CwUyQAr6YgsOLw==
+ version "2.7.13"
+ resolved "https://registry.yarnpkg.com/vite/-/vite-2.7.13.tgz#99b56e27dfb1e4399e407cf94648f5c7fb9d77f5"
+ integrity sha512-Mq8et7f3aK0SgSxjDNfOAimZGW9XryfHRa/uV0jseQSilg+KhYDSoNb9h1rknOy6SuMkvNDLKCYAYYUMCE+IgQ==
dependencies:
esbuild "^0.13.12"
postcss "^8.4.5"
--
GitLab