IFrameHello initial CSS

finos · Sep 12, 2024 · 18620d0 · 18620d0
1 parent 7540c23
commit 18620d0
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 3 deletions.
diff --git a/packages/fdc3-get-agent/src/ui/AbstractUIComponent.ts b/packages/fdc3-get-agent/src/ui/AbstractUIComponent.ts
@@ -1,3 +1,4 @@
+import { IframeHello } from "@kite9/fdc3-schema/generated/api/BrowserTypes";
 import { Connectable } from "@kite9/fdc3-standard";
 
 export interface CSSPositioning { [key: string]: string }
@@ -76,6 +77,10 @@ export abstract class AbstractUIComponent implements Connectable {
             const ml = (e: MessageEvent) => {
                 // console.log("Received UI Message: " + JSON.stringify(e.data))
                 if ((e.source == this.iframe?.contentWindow) && (e.data.type == 'iframeHello')) {
+                    const helloData = e.data as IframeHello
+                    if (helloData.payload.initialCSS) {
+                        this.themeContainer(helloData.payload.initialCSS)
+                    }
                     const port = e.ports[0]
                     port.start()
                     globalThis.window.removeEventListener("message", ml)

diff --git a/toolbox/fdc3-for-web/demo/src/client/ui/channel-selector.ts b/toolbox/fdc3-for-web/demo/src/client/ui/channel-selector.ts
@@ -1,3 +1,4 @@
+import { IframeHello, IframeRestyle } from "@kite9/fdc3-schema/generated/api/BrowserTypes";
 import { IframeChannels } from "@kite9/fdc3-standard";
 
 var channels: any[] = []
@@ -34,7 +35,15 @@ window.addEventListener("load", () => {
     const myPort = mc.port1
     myPort.start()
 
-    parent.postMessage({ type: "iframeHello" }, "*", [mc.port2]);
+
+    // ISSUE: 1302
+    parent.postMessage({
+        type: "iframeHello",
+        payload: {
+            initialCSS: DEFAULT_COLLAPSED_CSS,
+            implementationDetails: "Demo Channel Selector v1.0"
+        }
+    } as any as IframeHello, "*", [mc.port2]);
 
     function changeSize(expanded: boolean) {
         document.body.setAttribute("data-expanded", "" + expanded);
@@ -45,7 +54,7 @@ window.addEventListener("load", () => {
         console.log(e.data.type)
         if (e.data.type == 'iframeHandshake') {
             // ok, port is ready, send the iframe position detials
-            myPort.postMessage({ type: "iframeRestyle", payload: { css: DEFAULT_COLLAPSED_CSS } })
+            myPort.postMessage({ type: "iframeRestyle", payload: { updatedCSS: DEFAULT_COLLAPSED_CSS } } as IframeRestyle)
         } else if (e.data.type == 'iframeChannels') {
             const details = e.data as IframeChannels
             console.log(JSON.stringify("CHANNEL DETAILS: " + JSON.stringify(details)))

diff --git a/toolbox/fdc3-for-web/demo/src/client/ui/intent-resolver.ts b/toolbox/fdc3-for-web/demo/src/client/ui/intent-resolver.ts
@@ -1,3 +1,4 @@
+import { IframeHello } from "@kite9/fdc3-schema/generated/api/BrowserTypes";
 import { AppIdentifier, IframeResolveAction, IframeResolvePayload } from "@kite9/fdc3-standard";
 
 const DEFAULT_COLLAPSED_CSS = {
@@ -27,7 +28,14 @@ window.addEventListener("load", () => {
 
     const list = document.getElementById("intent-list")!!
 
-    parent.postMessage({ type: "iframeHello" }, "*", [mc.port2]);
+    // ISSUE: 1302
+    parent.postMessage({
+        type: "iframeHello",
+        payload: {
+            initialCSS: DEFAULT_COLLAPSED_CSS,
+            implementationDetails: "Demo Intent Resolver v1.0"
+        }
+    } as any as IframeHello, "*", [mc.port2]);
 
     function callback(intent: string | null, app: AppIdentifier | null) {
         myPort.postMessage({ type: "iframeRestyle", payload: { css: DEFAULT_COLLAPSED_CSS } })