From 17d0a2043c0a67d3a3b72b588a077799e2ddb0be Mon Sep 17 00:00:00 2001 From: Julianna Langston Date: Tue, 12 Nov 2024 11:37:36 -0500 Subject: [PATCH 1/5] Move addon package to toolbox/fdc3-for-web/reference-ui --- package.json | 2 +- packages/addon/src/intent_resolver_orig.js | 160 ------------------ .../fdc3-for-web/reference-ui}/.gitignore | 0 .../fdc3-for-web/reference-ui}/index.html | 0 .../fdc3-for-web/reference-ui}/package.json | 2 +- .../public/channel_selector.html | 0 .../reference-ui}/public/intent_resolver.html | 0 .../reference-ui}/src/channel_selector.ts | 0 .../reference-ui}/src/intent_resolver.ts | 4 +- .../fdc3-for-web/reference-ui}/src/main.ts | 14 -- .../fdc3-for-web/reference-ui}/src/style.css | 0 .../reference-ui}/src/vite-env.d.ts | 0 .../fdc3-for-web/reference-ui}/tsconfig.json | 0 .../fdc3-for-web/reference-ui}/vite.config.ts | 0 14 files changed, 4 insertions(+), 178 deletions(-) delete mode 100644 packages/addon/src/intent_resolver_orig.js rename {packages/addon => toolbox/fdc3-for-web/reference-ui}/.gitignore (100%) rename {packages/addon => toolbox/fdc3-for-web/reference-ui}/index.html (100%) rename {packages/addon => toolbox/fdc3-for-web/reference-ui}/package.json (89%) rename {packages/addon => toolbox/fdc3-for-web/reference-ui}/public/channel_selector.html (100%) rename {packages/addon => toolbox/fdc3-for-web/reference-ui}/public/intent_resolver.html (100%) rename {packages/addon => toolbox/fdc3-for-web/reference-ui}/src/channel_selector.ts (100%) rename {packages/addon => toolbox/fdc3-for-web/reference-ui}/src/intent_resolver.ts (98%) rename {packages/addon => toolbox/fdc3-for-web/reference-ui}/src/main.ts (93%) rename {packages/addon => toolbox/fdc3-for-web/reference-ui}/src/style.css (100%) rename {packages/addon => toolbox/fdc3-for-web/reference-ui}/src/vite-env.d.ts (100%) rename {packages/addon => toolbox/fdc3-for-web/reference-ui}/tsconfig.json (100%) rename {packages/addon => toolbox/fdc3-for-web/reference-ui}/vite.config.ts (100%) diff --git a/package.json b/package.json index 124279137..f066b92f7 100644 --- a/package.json +++ b/package.json @@ -37,7 +37,7 @@ "report": "nyc report --reporter json-summary --report-dir nyc-coverage-report --exclude-after-remap false --temp-dir coverage", "lint": "npm run lint --workspaces --if-present", "syncpack": "npm exec syncpack fix-mismatches --types 'local'", - "dev": "concurrently \"cd toolbox/fdc3-workbench && npm run dev\" \"cd toolbox/fdc3-for-web/demo && npm run dev\"" + "dev": "concurrently \"cd toolbox/fdc3-workbench && npm run dev\" \"cd toolbox/fdc3-for-web/reference-ui && npm run dev\" \"cd toolbox/fdc3-for-web/demo && npm run dev\"" }, "prettier": { "semi": true, diff --git a/packages/addon/src/intent_resolver_orig.js b/packages/addon/src/intent_resolver_orig.js deleted file mode 100644 index b97d75086..000000000 --- a/packages/addon/src/intent_resolver_orig.js +++ /dev/null @@ -1,160 +0,0 @@ -const setup = (data, callback) => { - document.body.setAttribute("data-visible", "true"); - document.getElementById("displayContext").textContent = data.context ?? "*"; - console.log("setup: ", data); - const intentSelect = document.getElementById("displayIntent"); - data.intents.forEach(({intent, displayName}) => { - const option = document.createElement("option"); - option.textContent = displayName; - option.value = intent; - intentSelect.appendChild(option); - }); - intentSelect.addEventListener("change", (e) => fillList(data.options[e.target.value], e.target.value, callback)); - fillList(data.options[intentSelect.value], intentSelect.value, callback); - - const tabs = Array.from(document.querySelectorAll("[role='tab']")) - tabs.forEach((tab) => { - tab.addEventListener("click", () => { - // Remove selected state from every tab - tabs.forEach((t) => { - t.setAttribute("aria-selected", "false"); - }); - // Hide lists - Array.from(document.querySelectorAll(".list")).forEach((elem) => { - elem.setAttribute("data-visible", "false"); - }); - - tab.setAttribute("aria-selected", "true"); - const listRef = tab.getAttribute("data-list-ref"); - document.getElementById(listRef).setAttribute("data-visible", "true"); - }); - }); - - document.getElementById("cancel").addEventListener("click", () => { - callback({ - type: "Fdc3UserInterfaceResolveAction", - action: "cancel" - }); - }) -} - -const fillList = ({apps, openApps}, intent, callback) => { - const newList = document.getElementById('new-list'); - newList.innerHTML = ''; - apps.forEach(({ appId, title, icon }) => { - const node = document.createElement('div'); - node.setAttribute('tabIndex', '0'); - node.setAttribute("data-appId", appId); - - const span = document.createElement("span"); - span.textContent = title; - - const img = document.createElement("img"); - if(icon?.src){ - img.src = icon.src; - }else{ - img.style.opacity = 0; - } - - node.appendChild(img); - node.appendChild(span); - - node.addEventListener('mouseenter', () => callback({ - type: "Fdc3UserInterfaceResolveAction", - appId, - intent, - action: "hover", - newOrOpen: "new" - })); - node.addEventListener('click', () => { - callback({ - type: "Fdc3UserInterfaceResolveAction", - appId, - intent, - action: "click", - newOrOpen: "new" - }); - callback({ - type: "Fdc3UserInterfaceResolve", - appId, - intent, - newOrOpen: "new" - }); - }); - - newList.appendChild(node); - }); - document.getElementById("count-new-apps").textContent = `(${apps.length})`; - - const openList = document.getElementById('open-list'); - openList.innerHTML = ''; - openApps.forEach(({ appId, title, windowId }) => { - const appd = apps.find((app) => app.appId === appId); - const node = document.createElement('div'); - node.setAttribute('tabIndex', '0'); - node.setAttribute("data-appId", appId); - - const span = document.createElement("span"); - span.textContent = title; - - const img = document.createElement("img"); - if(appd.icon?.src){ - img.src = appd.icon.src; - }else{ - img.style.opacity = 0; - } - - node.appendChild(img); - node.appendChild(span); - - node.addEventListener('mouseenter', () => callback({ - type: "Fdc3UserInterfaceResolveAction", - appId, - windowId, - intent, - action: "hover", - newOrOpen: "open" - })); - node.addEventListener('click', () => { - callback({ - type: "Fdc3UserInterfaceResolveAction", - appId, - windowId, - intent, - action: "click", - newOrOpen: "open" - }); - callback({ - type: "Fdc3UserInterfaceResolve", - appId, - intent, - windowId, - newOrOpen: "open" - }) - }); - - openList.appendChild(node); - }); - document.getElementById("count-open-apps").textContent = `(${openApps.length})`; -}; - -// STEP 1B: Receive port from parent -// we may not know the origin of the parent in advance so disabling this check -// this might be improved if it s possible to get the origin of the parent window (cross-domain) and only respond to that -// nosemgrep: javascript.browser.security.insufficient-postmessage-origin-validation.insufficient-postmessage-origin-validation -window.addEventListener('message', ({ origin, ports }) => { - //only accept a port from the window we are embedded in: - if(window.location.ancestorOrigins.contains(origin)){ - // STEP 3B: Receive channel data from parent - ports[0].onmessage = ({ data }) => { - setup(data, msg => { - // STEP 4A: Send user selection information to parent - ports[0].postMessage(msg); - }); - }; - // STEP 2A: Send confirmation over port to parent - ports[0].postMessage({type: 'Fdc3UserInterfaceHandshake'}); - } else { - console.warn(`Ignoring postMessage from unknonw (non-ancestor) origin: ${origin}`); - } -}); diff --git a/packages/addon/.gitignore b/toolbox/fdc3-for-web/reference-ui/.gitignore similarity index 100% rename from packages/addon/.gitignore rename to toolbox/fdc3-for-web/reference-ui/.gitignore diff --git a/packages/addon/index.html b/toolbox/fdc3-for-web/reference-ui/index.html similarity index 100% rename from packages/addon/index.html rename to toolbox/fdc3-for-web/reference-ui/index.html diff --git a/packages/addon/package.json b/toolbox/fdc3-for-web/reference-ui/package.json similarity index 89% rename from packages/addon/package.json rename to toolbox/fdc3-for-web/reference-ui/package.json index 86db653ee..f21fccf17 100644 --- a/packages/addon/package.json +++ b/toolbox/fdc3-for-web/reference-ui/package.json @@ -1,5 +1,5 @@ { - "name": "addon", + "name": "fdc3-for-web-reference-ui", "private": true, "version": "2.1.1", "type": "module", diff --git a/packages/addon/public/channel_selector.html b/toolbox/fdc3-for-web/reference-ui/public/channel_selector.html similarity index 100% rename from packages/addon/public/channel_selector.html rename to toolbox/fdc3-for-web/reference-ui/public/channel_selector.html diff --git a/packages/addon/public/intent_resolver.html b/toolbox/fdc3-for-web/reference-ui/public/intent_resolver.html similarity index 100% rename from packages/addon/public/intent_resolver.html rename to toolbox/fdc3-for-web/reference-ui/public/intent_resolver.html diff --git a/packages/addon/src/channel_selector.ts b/toolbox/fdc3-for-web/reference-ui/src/channel_selector.ts similarity index 100% rename from packages/addon/src/channel_selector.ts rename to toolbox/fdc3-for-web/reference-ui/src/channel_selector.ts diff --git a/packages/addon/src/intent_resolver.ts b/toolbox/fdc3-for-web/reference-ui/src/intent_resolver.ts similarity index 98% rename from packages/addon/src/intent_resolver.ts rename to toolbox/fdc3-for-web/reference-ui/src/intent_resolver.ts index f8f0c92b2..1fcc03eae 100644 --- a/packages/addon/src/intent_resolver.ts +++ b/toolbox/fdc3-for-web/reference-ui/src/intent_resolver.ts @@ -116,7 +116,7 @@ const fillList = (ai: AppIntent[], intent: string, callback: (s: IframeResolveAc const openList = document.getElementById('open-list')!! openList.innerHTML = ''; - openApps.forEach(({ appId, title, icons, instanceId }) => { + openApps.forEach(({ appId, title, icons }) => { const node = document.createElement('div'); node.setAttribute('tabIndex', '0'); node.setAttribute("data-appId", appId); @@ -163,7 +163,7 @@ window.addEventListener("load", () => { myPort.onmessage = ({data}) => { console.debug("Received message: ", data); switch(data.type){ - case Fdc3UserInterfaceHandshake": { + case "Fdc3UserInterfaceHandshake": { break; } case "iframeResolve": { diff --git a/packages/addon/src/main.ts b/toolbox/fdc3-for-web/reference-ui/src/main.ts similarity index 93% rename from packages/addon/src/main.ts rename to toolbox/fdc3-for-web/reference-ui/src/main.ts index 2fe1e415e..cdf263e30 100644 --- a/packages/addon/src/main.ts +++ b/toolbox/fdc3-for-web/reference-ui/src/main.ts @@ -81,20 +81,6 @@ const recommendedChannels = [ const exampleResolverData: ResolverIntents = { type: "ResolverIntents", appIntents: [ - { - apps: [{ - appId: "chartiq", - description: "Chart IQ is the most powerful charting library on the market", - icons: [{ - src: "https://res.cloudinary.com/apideck/image/upload/v1561415965/catalog/chartiq/icon128x128.jpg" - }], - title: "ChartIQ" - }], - intent: { - name: "ViewChart", - displayName: "View Chart" - } - }, { apps: [{ appId: "trading-view-chart", diff --git a/packages/addon/src/style.css b/toolbox/fdc3-for-web/reference-ui/src/style.css similarity index 100% rename from packages/addon/src/style.css rename to toolbox/fdc3-for-web/reference-ui/src/style.css diff --git a/packages/addon/src/vite-env.d.ts b/toolbox/fdc3-for-web/reference-ui/src/vite-env.d.ts similarity index 100% rename from packages/addon/src/vite-env.d.ts rename to toolbox/fdc3-for-web/reference-ui/src/vite-env.d.ts diff --git a/packages/addon/tsconfig.json b/toolbox/fdc3-for-web/reference-ui/tsconfig.json similarity index 100% rename from packages/addon/tsconfig.json rename to toolbox/fdc3-for-web/reference-ui/tsconfig.json diff --git a/packages/addon/vite.config.ts b/toolbox/fdc3-for-web/reference-ui/vite.config.ts similarity index 100% rename from packages/addon/vite.config.ts rename to toolbox/fdc3-for-web/reference-ui/vite.config.ts From 637afb3836c58efd1dce18b19b5665da7f40e996 Mon Sep 17 00:00:00 2001 From: Julianna Langston Date: Tue, 12 Nov 2024 12:11:51 -0500 Subject: [PATCH 2/5] Update build steps --- package.json | 1 + .../reference-ui/src/channel_selector.ts | 10 +++++----- .../reference-ui/src/intent_resolver.ts | 14 +++++--------- toolbox/fdc3-for-web/reference-ui/src/main.ts | 3 +-- toolbox/fdc3-for-web/reference-ui/vite.config.ts | 3 +++ 5 files changed, 15 insertions(+), 16 deletions(-) diff --git a/package.json b/package.json index f066b92f7..20d5c9f69 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "packages/fdc3-get-agent", "packages/fdc3", "toolbox/fdc3-for-web/demo", + "toolbox/fdc3-for-web/reference-ui", "toolbox/fdc3-workbench" ], "scripts": { diff --git a/toolbox/fdc3-for-web/reference-ui/src/channel_selector.ts b/toolbox/fdc3-for-web/reference-ui/src/channel_selector.ts index 5968a277c..ab6698f60 100644 --- a/toolbox/fdc3-for-web/reference-ui/src/channel_selector.ts +++ b/toolbox/fdc3-for-web/reference-ui/src/channel_selector.ts @@ -49,11 +49,11 @@ window.addEventListener("load", () => { myPort.onmessage = ({ data }) => { console.debug("Received message: ", data); switch (data.type) { - case "iframeHandshake": { + case "IframeHandshake": { collapse(); break; } - case "fdc3UserInterfaceChannels": { + case "Fdc3UserInterfaceChannels": { logo.removeEventListener("click", expand); const { userChannels, selected } = data.payload as IframeChannelsPayload; fillChannels(userChannels, selected, (channelStr) => { @@ -74,7 +74,7 @@ window.addEventListener("load", () => { }; parent.postMessage({ - type: "fdc3UserInterfaceHello", + type: "Fdc3UserInterfaceHello", payload: { initialCSS: { width: `${8 * 4}px`, @@ -92,7 +92,7 @@ window.addEventListener("load", () => { const expand = () => { document.body.setAttribute("data-expanded", "true"); myPort.postMessage({ - type: "fdc3UserInterfaceRestyle", + type: "Fdc3UserInterfaceRestyle", payload: { updatedCSS: { width: `100%`, @@ -109,7 +109,7 @@ window.addEventListener("load", () => { const collapse = () => { myPort.postMessage({ - type: "fdc3UserInterfaceRestyle", + type: "Fdc3UserInterfaceRestyle", payload: { updatedCSS: { width: `${8 * 4}px`, diff --git a/toolbox/fdc3-for-web/reference-ui/src/intent_resolver.ts b/toolbox/fdc3-for-web/reference-ui/src/intent_resolver.ts index 1fcc03eae..70df2bc76 100644 --- a/toolbox/fdc3-for-web/reference-ui/src/intent_resolver.ts +++ b/toolbox/fdc3-for-web/reference-ui/src/intent_resolver.ts @@ -6,8 +6,6 @@ const setup = (data: IframeResolvePayload, callback: (s: IframeResolveActionPayl document.body.setAttribute("data-visible", "true"); document.querySelector("dialog")?.showModal(); - console.log("setup data:", data); - const intentSelect = document.getElementById("displayIntent") as HTMLSelectElement const justIntents = data.appIntents.map(({intent}) => intent) @@ -51,8 +49,6 @@ const setup = (data: IframeResolvePayload, callback: (s: IframeResolveActionPayl action: "cancel" }); }); - - console.log(document.body); } function createIcon(icons: Icon[] | undefined): HTMLElement { @@ -166,9 +162,9 @@ window.addEventListener("load", () => { case "Fdc3UserInterfaceHandshake": { break; } - case "iframeResolve": { + case "IframeResolve": { myPort.postMessage({ - type: "iframeRestyle", + type: "IframeRestyle", payload: { updatedCSS: { width: "100%", @@ -183,12 +179,12 @@ window.addEventListener("load", () => { setup(data.payload, (s) => { document.querySelector("dialog")?.close(); myPort.postMessage({ - type: "iframeResolveAction", + type: "IframeResolveAction", payload: s }); myPort.postMessage({ - type: "fdc3UserInterfaceRestyle", + type: "Fdc3UserInterfaceRestyle", payload: { updatedCSS: { width: "0", @@ -203,7 +199,7 @@ window.addEventListener("load", () => { }; parent.postMessage({ - type: "fdc3UserInterfaceHello", + type: "Fdc3UserInterfaceHello", payload: { initialCSS: { width: "0", diff --git a/toolbox/fdc3-for-web/reference-ui/src/main.ts b/toolbox/fdc3-for-web/reference-ui/src/main.ts index cdf263e30..88d2d4cb6 100644 --- a/toolbox/fdc3-for-web/reference-ui/src/main.ts +++ b/toolbox/fdc3-for-web/reference-ui/src/main.ts @@ -1,4 +1,3 @@ -import { ResolverIntents } from "@kite9/fdc3-common"; import "./style.css"; // Channel data @@ -78,7 +77,7 @@ const recommendedChannels = [ ]; // Example resolver data -const exampleResolverData: ResolverIntents = { +const exampleResolverData = { type: "ResolverIntents", appIntents: [ { diff --git a/toolbox/fdc3-for-web/reference-ui/vite.config.ts b/toolbox/fdc3-for-web/reference-ui/vite.config.ts index cd4d40fc9..7ce5ba6a5 100644 --- a/toolbox/fdc3-for-web/reference-ui/vite.config.ts +++ b/toolbox/fdc3-for-web/reference-ui/vite.config.ts @@ -3,4 +3,7 @@ import { defineConfig } from "vite"; // https://vitejs.dev/config/ export default defineConfig({ server: { port: 4000 }, + build: { + outDir: "../../../website/static/ui" + } }); From b950c1ffe53730132938ee593456b4d9ad1397e7 Mon Sep 17 00:00:00 2001 From: Julianna Langston Date: Tue, 12 Nov 2024 12:18:49 -0500 Subject: [PATCH 3/5] Update package import --- package-lock.json | 19 ++++++++++++++++--- .../fdc3-for-web/reference-ui/package.json | 2 +- 2 files changed, 17 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index 0d086fb68..71cea8675 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,6 +18,7 @@ "packages/fdc3-get-agent", "packages/fdc3", "toolbox/fdc3-for-web/demo", + "toolbox/fdc3-for-web/reference-ui", "toolbox/fdc3-workbench" ], "dependencies": { @@ -3344,7 +3345,6 @@ "node_modules/@kite9/fdc3-common": { "version": "2.2.0-beta.6", "integrity": "sha512-JQa8WVXWIpHQRMt9CFsxqjfrw2Rq4tVUT8R6r2cJAg1y1Ns+zmpclo/bGi3DVqFyd5PfOEbbiAER/1ll0PXb3A==", - "dev": true, "dependencies": { "@kite9/fdc3": "2.2.0-beta.6" } @@ -3352,7 +3352,6 @@ "node_modules/@kite9/fdc3-common/node_modules/@kite9/fdc3": { "version": "2.2.0-beta.6", "integrity": "sha512-F/fC4Ayp3uBzhBs4x5rp8n4/JSbuGaAHdrfrm/HTipDqsQKdQon4uZsNdMK6USTX1gnpFVy8luSnIddFJey12g==", - "dev": true, "optionalDependencies": { "@rollup/rollup-linux-x64-gnu": "4.14.1" } @@ -3363,7 +3362,6 @@ "cpu": [ "x64" ], - "dev": true, "optional": true, "os": [ "linux" @@ -7820,6 +7818,10 @@ "node": ">=10" } }, + "node_modules/fdc3-for-web-reference-ui": { + "resolved": "toolbox/fdc3-for-web/reference-ui", + "link": true + }, "node_modules/fdc3-workbench": { "resolved": "toolbox/fdc3-workbench", "link": true @@ -17075,6 +17077,17 @@ "uuid": "^9.0.1" } }, + "toolbox/fdc3-for-web/reference-ui": { + "name": "fdc3-for-web-reference-ui", + "version": "2.1.1", + "dependencies": { + "@kite9/fdc3-common": "2.2.0-beta.6" + }, + "devDependencies": { + "typescript": "^5.3.2", + "vite": "^5.2.0" + } + }, "toolbox/fdc3-workbench": { "version": "2.2.0-beta.29", "license": "Apache-2.0", diff --git a/toolbox/fdc3-for-web/reference-ui/package.json b/toolbox/fdc3-for-web/reference-ui/package.json index f21fccf17..047b932a6 100644 --- a/toolbox/fdc3-for-web/reference-ui/package.json +++ b/toolbox/fdc3-for-web/reference-ui/package.json @@ -14,6 +14,6 @@ "vite": "^5.2.0" }, "dependencies": { - "@kite9/fdc3": "2.1.1" + "@kite9/fdc3-common": "2.2.0-beta.6" } } \ No newline at end of file From b36f95310c0594f5b448639a78293d5e3665a807 Mon Sep 17 00:00:00 2001 From: Julianna Langston Date: Wed, 13 Nov 2024 10:23:38 -0500 Subject: [PATCH 4/5] CR changes --- toolbox/fdc3-for-web/reference-ui/src/channel_selector.ts | 4 ++-- toolbox/fdc3-for-web/reference-ui/src/intent_resolver.ts | 4 ++-- toolbox/fdc3-for-web/reference-ui/vite.config.ts | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/toolbox/fdc3-for-web/reference-ui/src/channel_selector.ts b/toolbox/fdc3-for-web/reference-ui/src/channel_selector.ts index ab6698f60..8696b53af 100644 --- a/toolbox/fdc3-for-web/reference-ui/src/channel_selector.ts +++ b/toolbox/fdc3-for-web/reference-ui/src/channel_selector.ts @@ -49,7 +49,7 @@ window.addEventListener("load", () => { myPort.onmessage = ({ data }) => { console.debug("Received message: ", data); switch (data.type) { - case "IframeHandshake": { + case "Fdc3UserInterfaceHandshake ": { collapse(); break; } @@ -58,7 +58,7 @@ window.addEventListener("load", () => { const { userChannels, selected } = data.payload as IframeChannelsPayload; fillChannels(userChannels, selected, (channelStr) => { myPort.postMessage({ - type: "fdc3UserInterfaceSelected", + type: "Fdc3UserInterfaceSelected", payload: { selected: channelStr || null } diff --git a/toolbox/fdc3-for-web/reference-ui/src/intent_resolver.ts b/toolbox/fdc3-for-web/reference-ui/src/intent_resolver.ts index 70df2bc76..3c01cd23e 100644 --- a/toolbox/fdc3-for-web/reference-ui/src/intent_resolver.ts +++ b/toolbox/fdc3-for-web/reference-ui/src/intent_resolver.ts @@ -162,7 +162,7 @@ window.addEventListener("load", () => { case "Fdc3UserInterfaceHandshake": { break; } - case "IframeResolve": { + case "Fdc3UserInterfaceResolve": { myPort.postMessage({ type: "IframeRestyle", payload: { @@ -179,7 +179,7 @@ window.addEventListener("load", () => { setup(data.payload, (s) => { document.querySelector("dialog")?.close(); myPort.postMessage({ - type: "IframeResolveAction", + type: "Fdc3UserInterfaceResolveAction", payload: s }); diff --git a/toolbox/fdc3-for-web/reference-ui/vite.config.ts b/toolbox/fdc3-for-web/reference-ui/vite.config.ts index 7ce5ba6a5..5942d7800 100644 --- a/toolbox/fdc3-for-web/reference-ui/vite.config.ts +++ b/toolbox/fdc3-for-web/reference-ui/vite.config.ts @@ -4,6 +4,6 @@ import { defineConfig } from "vite"; export default defineConfig({ server: { port: 4000 }, build: { - outDir: "../../../website/static/ui" + outDir: "../../../website/static/reference-ui" } }); From 12e474f3f7f188d78b54f161f08018b0ac0d36ca Mon Sep 17 00:00:00 2001 From: Julianna Langston Date: Wed, 13 Nov 2024 10:38:10 -0500 Subject: [PATCH 5/5] Update message typings --- .../reference-ui/src/channel_selector.ts | 23 ++++++----- .../reference-ui/src/intent_resolver.ts | 41 ++++++++++++------- 2 files changed, 39 insertions(+), 25 deletions(-) diff --git a/toolbox/fdc3-for-web/reference-ui/src/channel_selector.ts b/toolbox/fdc3-for-web/reference-ui/src/channel_selector.ts index 8696b53af..fa130c657 100644 --- a/toolbox/fdc3-for-web/reference-ui/src/channel_selector.ts +++ b/toolbox/fdc3-for-web/reference-ui/src/channel_selector.ts @@ -1,6 +1,5 @@ import { IframeChannelsPayload, Channel } from "@kite9/fdc3-common"; - - +import { Fdc3UserInterfaceHello, Fdc3UserInterfaceRestyle } from "@kite9/fdc3-schema/dist/generated/api/BrowserTypes"; const fillChannels = (data: Channel[], selected: string | null, messageClickedChannel: (s: string | null) => void) => { const list = document.getElementById('list')!!; @@ -73,9 +72,10 @@ window.addEventListener("load", () => { } }; - parent.postMessage({ + const helloMessage: Fdc3UserInterfaceHello = { type: "Fdc3UserInterfaceHello", payload: { + implementationDetails: "", initialCSS: { width: `${8 * 4}px`, height: `${8 * 5}px`, @@ -87,28 +87,30 @@ window.addEventListener("load", () => { } } - }, "*", [mc.port2]); + } + parent.postMessage(helloMessage, "*", [mc.port2]); const expand = () => { document.body.setAttribute("data-expanded", "true"); - myPort.postMessage({ + const restyleMessage: Fdc3UserInterfaceRestyle = { type: "Fdc3UserInterfaceRestyle", payload: { updatedCSS: { width: `100%`, height: `100%`, - top: 0, - left: 0, + top: "0", + left: "0", zIndex: "1000", "z-index": "1000", position: "fixed" } } - }); + } + myPort.postMessage(restyleMessage); } const collapse = () => { - myPort.postMessage({ + const restyleMessage: Fdc3UserInterfaceRestyle = { type: "Fdc3UserInterfaceRestyle", payload: { updatedCSS: { @@ -121,7 +123,8 @@ window.addEventListener("load", () => { position: "fixed" } } - }); + } + myPort.postMessage(restyleMessage); // If you immediately change to the logo, before the iframe has a chance to finish restyling, // you see a flicker of a giant, colored logo. diff --git a/toolbox/fdc3-for-web/reference-ui/src/intent_resolver.ts b/toolbox/fdc3-for-web/reference-ui/src/intent_resolver.ts index 3c01cd23e..e8c4590b0 100644 --- a/toolbox/fdc3-for-web/reference-ui/src/intent_resolver.ts +++ b/toolbox/fdc3-for-web/reference-ui/src/intent_resolver.ts @@ -1,8 +1,14 @@ import { Icon } from "@kite9/fdc3"; import { AppIntent } from "@kite9/fdc3"; -import { IframeResolveActionPayload, IframeResolvePayload } from "@kite9/fdc3-common"; +import { BrowserTypes } from "@kite9/fdc3-schema"; -const setup = (data: IframeResolvePayload, callback: (s: IframeResolveActionPayload) => void) => { +type Fdc3UserInterfaceHello = BrowserTypes.Fdc3UserInterfaceHello; +type Fdc3UserInterfaceRestyle = BrowserTypes.Fdc3UserInterfaceRestyle; +type Fdc3UserInterfaceResolve = BrowserTypes.Fdc3UserInterfaceResolve; +type Fdc3UserInterfaceResolveAction = BrowserTypes.Fdc3UserInterfaceResolveAction; + + +const setup = (data: Fdc3UserInterfaceResolve["payload"], callback: (payload: Fdc3UserInterfaceResolveAction["payload"]) => void) => { document.body.setAttribute("data-visible", "true"); document.querySelector("dialog")?.showModal(); @@ -62,7 +68,7 @@ function createIcon(icons: Icon[] | undefined): HTMLElement { return img } -const fillList = (ai: AppIntent[], intent: string, callback: (s: IframeResolveActionPayload) => void) => { +const fillList = (ai: AppIntent[], intent: string, callback: (payload: Fdc3UserInterfaceResolveAction["payload"]) => void) => { const allApps = ai.flatMap(a => a.apps) const openApps = allApps.filter(a => a.instanceId) const newApps = allApps.filter(a => !a.instanceId) @@ -163,8 +169,8 @@ window.addEventListener("load", () => { break; } case "Fdc3UserInterfaceResolve": { - myPort.postMessage({ - type: "IframeRestyle", + const restyleMessage: Fdc3UserInterfaceRestyle = { + type: "Fdc3UserInterfaceRestyle", payload: { updatedCSS: { width: "100%", @@ -174,16 +180,18 @@ window.addEventListener("load", () => { position: "fixed" } } - }); + } + myPort.postMessage(restyleMessage); - setup(data.payload, (s) => { + setup(data.payload, (payload) => { document.querySelector("dialog")?.close(); - myPort.postMessage({ + const resolveAction: Fdc3UserInterfaceResolveAction = { type: "Fdc3UserInterfaceResolveAction", - payload: s - }); + payload + } + myPort.postMessage(resolveAction); - myPort.postMessage({ + const restyleMessage: Fdc3UserInterfaceRestyle = { type: "Fdc3UserInterfaceRestyle", payload: { updatedCSS: { @@ -191,21 +199,24 @@ window.addEventListener("load", () => { height: "0" } } - }); + } + + myPort.postMessage(restyleMessage); }) } } }; - parent.postMessage({ + const helloMessage: Fdc3UserInterfaceHello = { type: "Fdc3UserInterfaceHello", payload: { + implementationDetails: "", initialCSS: { width: "0", height: "0" } } - }, "*", [mc.port2]); - + } + parent.postMessage(helloMessage, "*", [mc.port2]); }); \ No newline at end of file