diff --git a/src/main.ts b/src/main.ts index 356ce2e2b3819ca800e5449d162ec29f8a02e428..0d634d49d341c0d4fae4ec826f9d0a60e886f62c 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 9171fb8dbea0e212771e709bd86886edecd53fb6..f2b614674973c516b6a76411e8309378a6538e38 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 c427fad69f730fe20558d0384f5715980408fd9c..434b9e99037ae2e3d2e17b585d9afe069b9ef9ef 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;