From f1585cd4f1ee4eab2df2ce0e941cc311bb30ca65 Mon Sep 17 00:00:00 2001
From: Midhun Suresh <midhunr@element.io>
Date: Tue, 25 Jan 2022 20:34:23 +0530
Subject: [PATCH] Resize iframe using postmessage
---
src/main.ts | 5 ++---
src/resize.ts | 19 +++++++++++++------
src/ui/views/RootView.ts | 6 +++---
3 files changed, 18 insertions(+), 12 deletions(-)
diff --git a/src/main.ts b/src/main.ts
index 356ce2e..0d634d4 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -55,9 +55,8 @@ function allowsChild(parent, child) {
}
}
-function sendFrameResizeEventToParent(height?: number, width?: number) {
- const message = { action: "resize-iframe", params: { height, width } };
- window.parent?.postMessage(message);
+function sendFrameResizeEventToParent(view: string) {
+ window.parent?.postMessage(view);
}
(window as any).sendFrameResizeEventToParent = sendFrameResizeEventToParent;
diff --git a/src/resize.ts b/src/resize.ts
index 9171fb8..f2b6146 100644
--- a/src/resize.ts
+++ b/src/resize.ts
@@ -3,11 +3,18 @@ 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; }
+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; }
});
diff --git a/src/ui/views/RootView.ts b/src/ui/views/RootView.ts
index c427fad..434b9e9 100644
--- a/src/ui/views/RootView.ts
+++ b/src/ui/views/RootView.ts
@@ -12,13 +12,13 @@ export class RootView extends TemplateView<RootViewModel> {
return t.mapView(vm => vm.activeSection, section => {
switch(section) {
case "start":
- window.sendFrameResizeEventToParent("50px", "50px");
+ window.sendFrameResizeEventToParent("start");
return new StartView(vm);
case "account-setup":
- window.sendFrameResizeEventToParent("115px", "360px");
+ window.sendFrameResizeEventToParent("account-setup");
return new AccountSetupView(vm.accountSetupViewModel);
case "timeline":
- window.sendFrameResizeEventToParent("600px", "400px");
+ window.sendFrameResizeEventToParent("timeline");
return new ChatterboxView(vm.chatterboxViewModel);
}
return null;
--
GitLab