Resize iframe using postmessage

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;

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; }
 });

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;