From 10fd706e952138ac9c48e38a6a3b3542f2c949a8 Mon Sep 17 00:00:00 2001 From: WatsonCIQ Date: Mon, 15 Feb 2021 20:14:52 +0000 Subject: [PATCH 01/14] split app into versioned folders --- toolbox/fdc3-explained/1.0/index.html | 217 ++++++++++++++++++ toolbox/fdc3-explained/{ => 1.1}/index.html | 0 toolbox/fdc3-explained/{ => 1.1}/main.js | 1 + toolbox/fdc3-explained/{ => 1.1}/styles.css | 0 .../1.2/fdc3_explained_logo.svg | 17 ++ toolbox/fdc3-explained/1.2/index.html | 136 +++++++++++ toolbox/fdc3-explained/1.2/main.js | 193 ++++++++++++++++ toolbox/fdc3-explained/1.2/styles.css | 107 +++++++++ 8 files changed, 671 insertions(+) create mode 100644 toolbox/fdc3-explained/1.0/index.html rename toolbox/fdc3-explained/{ => 1.1}/index.html (100%) rename toolbox/fdc3-explained/{ => 1.1}/main.js (99%) rename toolbox/fdc3-explained/{ => 1.1}/styles.css (100%) create mode 100644 toolbox/fdc3-explained/1.2/fdc3_explained_logo.svg create mode 100644 toolbox/fdc3-explained/1.2/index.html create mode 100644 toolbox/fdc3-explained/1.2/main.js create mode 100644 toolbox/fdc3-explained/1.2/styles.css diff --git a/toolbox/fdc3-explained/1.0/index.html b/toolbox/fdc3-explained/1.0/index.html new file mode 100644 index 000000000..95dc7c494 --- /dev/null +++ b/toolbox/fdc3-explained/1.0/index.html @@ -0,0 +1,217 @@ + + + + +FDC3 Explained v.2 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FDC3 Provider Service:FDC3 Not Available
App Directory:No Application Directory Connected
Available Apps:
Load App Start Url:
Available Channels: 
Broadcast Context:Channel:
Get Context:Channel:
Context:
+ + + + diff --git a/toolbox/fdc3-explained/index.html b/toolbox/fdc3-explained/1.1/index.html similarity index 100% rename from toolbox/fdc3-explained/index.html rename to toolbox/fdc3-explained/1.1/index.html diff --git a/toolbox/fdc3-explained/main.js b/toolbox/fdc3-explained/1.1/main.js similarity index 99% rename from toolbox/fdc3-explained/main.js rename to toolbox/fdc3-explained/1.1/main.js index ce0f0c731..d271b4a7b 100644 --- a/toolbox/fdc3-explained/main.js +++ b/toolbox/fdc3-explained/1.1/main.js @@ -1,3 +1,4 @@ + // check for FDC3 support function fdc3OnReady(cb) { if (window.fdc3) { cb() } diff --git a/toolbox/fdc3-explained/styles.css b/toolbox/fdc3-explained/1.1/styles.css similarity index 100% rename from toolbox/fdc3-explained/styles.css rename to toolbox/fdc3-explained/1.1/styles.css diff --git a/toolbox/fdc3-explained/1.2/fdc3_explained_logo.svg b/toolbox/fdc3-explained/1.2/fdc3_explained_logo.svg new file mode 100644 index 000000000..0cf0d70af --- /dev/null +++ b/toolbox/fdc3-explained/1.2/fdc3_explained_logo.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/toolbox/fdc3-explained/1.2/index.html b/toolbox/fdc3-explained/1.2/index.html new file mode 100644 index 000000000..12419b615 --- /dev/null +++ b/toolbox/fdc3-explained/1.2/index.html @@ -0,0 +1,136 @@ + + + + + FDC3 Explained v.2 + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FDC3 Supported Checking
FDC3 Provider Service:FDC3 Not Available
+
+
App Directory:Not supported yet!
Available Apps: + +
+
+
Available Channels: + System Channels: +
    + App Channels: +
      +
      Add App Channel:
      Join Channel:Channel: + +
      +
      +
      Broadcast Context:
      +
      Get Context:
      Context Type:
      +
      + Context result will appear here. +
      +
      +
      +
      Raise Intent:
      Intent:
      +
      + + + + diff --git a/toolbox/fdc3-explained/1.2/main.js b/toolbox/fdc3-explained/1.2/main.js new file mode 100644 index 000000000..2d95ca2ad --- /dev/null +++ b/toolbox/fdc3-explained/1.2/main.js @@ -0,0 +1,193 @@ +// check for FDC3 support +function fdc3OnReady(cb) { + if (window.fdc3) { cb() } + else { window.addEventListener('fdc3Ready', cb) } +} +// Wait for the document to load +function documentLoaded(cb) { + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', cb) + } else { cb() } +} + +// document and FDC3 have loaded start the main function +documentLoaded(() => fdc3OnReady(main)) + +// use this to keep track of context listener - one per system channel +let contextListener = null; +let appChannels = [] + +function main() { + try { + console.log("FDC3 is ready and DOM has rendered") + populateHTML() + getPlatform() + displayFDC3Support() + getContext() + } catch (error) { + console.error(error) + } +} + + +async function populateHTML() { + try { + // populate all the dropdowns for system channels + let channelDropdownList = document.querySelectorAll(".fdc3-channels") + channelDropdownList.forEach(channelDropdown => populateChannels(channelDropdown)) + + //populate available channels list with system channels + let channelList = document.getElementById("system-channel-list"); + + const systemChannels = await fdc3.getSystemChannels(); + + systemChannels.forEach(({ displayMetadata, id, type }, key) => { + let node = document.createElement("li"); + let textNode = document.createTextNode(displayMetadata.name); + node.appendChild(textNode); + channelList.appendChild(node); + }); + + // add an event listener for the contextType input box + let contextTypeInput = document.getElementById("context-type"); + + // Only get context type when the user hits enter + contextTypeInput.addEventListener("keyup", function (event) { + if (event.key === "Enter") { + event.preventDefault(); + + let contextType = event.target.value; + getContext(contextType) + } + }); + } catch (error) { + console.error("unable to populate the html for the page ", error); + } + +} + +function displayFDC3Support() { + try { + let supportedElement = document.getElementById("fdc3-support") + if (window.fdc3) { supportedElement.innerHTML = "Yes ✅" } else { supportedElement.innerHTML = "No ❌" } + } catch (error) { + console.error("can't find FDC3 support", error) + } + +} + + +function getPlatform() { + + // TODO: add G42 to vendors + if (window.FSBL) { + window.FSBL.getFSBLInfo().then((info) => { + document.getElementById('providerDetails').innerHTML = "Finsemble Version:" + info.FSBLVersion; + }); + } else if (window.fin) { + fin.desktop.Application.getCurrent().getInfo((info) => { + document.getElementById('providerDetails').innerHTML = info.manifest.startup_app.name + }); + } else if (window.fdc3) { + document.getElementById('providerDetails').innerHTML = "FDC3 Desktop Agent Chrome Extension"; + } + else { + // no need to update the DOM there is already a default message just return + return + } + +} + + +/** + *Populate the channel dropdown elements + * @param {HTMLElement} dropdownElement is a dom selector + */ +async function populateChannels(dropdownElement) { + try { + + if (!dropdownElement) return new Error("No dropdown element provided") + + const systemChannels = await fdc3.getSystemChannels(); + systemChannels.forEach(({ displayMetadata, id, type }, key) => { dropdownElement[key] = new Option(displayMetadata.name, key) }); + + } catch (error) { + console.error("could not find system channels when populating the dropdown", error); + } + +} + +function joinChannel() { + try { + let dropdownElement = document.getElementById("join-channel") + let channelName = dropdownElement.options[dropdownElement.selectedIndex].text.toLowerCase(); + fdc3.joinChannel(channelName); + } catch (error) { + console.error("Can't join channel", error) + } + +} + +async function broadcastFDC3Context() { + try { + let contextData = document.getElementById('txtBroadcastData').value; + fdc3.broadcast(JSON.parse(contextData)); + } catch (error) { + console.error("could not broadcast", error) + } + +} + + +async function getContext(contextType) { + try { + let contextResultBox = document.getElementById("context-result"); + if (contextListener) contextListener.unsubscribe(); + + // if context type is passed in then only listen on that specific context + if (contextType) { + contextListener = fdc3.addContextListener(contextType, (context) => contextResultBox.innerText = JSON.stringify(context, null, 2)) + } else { + contextListener = fdc3.addContextListener(context => contextResultBox.innerText = JSON.stringify(context, null, 2)); + } + } catch (error) { + console.error("Unable to add a context listener", error) + } +} + + +async function addAppChannel() { + try { + let appChannelName = document.getElementById("app-channel").value; + + if (appChannelName) { + let newAppChannel = await fdc3.getOrCreateChannel(appChannelName) + appChannels.push(newAppChannel); + + // add to the list of available app channels + let node = document.createElement("li"); + let textNode = document.createTextNode(appChannelName); + node.appendChild(textNode); + document.getElementById("app-channel-list").appendChild(node); + + } else { + throw new Error("no channel name set") + } + } catch (error) { + console.error("could not add an app channel", error); + } +} + + +async function raiseIntent() { + try { + // get the channel + let intent = document.getElementById("intent").value; + let context = JSON.parse(document.getElementById("intent-context").value); + + // TODO: add the target param + await fdc3.raiseIntent(intent, context) + } catch (err) { + console.error("intent did not resolve", err) + } +} \ No newline at end of file diff --git a/toolbox/fdc3-explained/1.2/styles.css b/toolbox/fdc3-explained/1.2/styles.css new file mode 100644 index 000000000..558f3de87 --- /dev/null +++ b/toolbox/fdc3-explained/1.2/styles.css @@ -0,0 +1,107 @@ +@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap'); + +body { + font-family: "Noto Sans JP",sans-serif; + margin:0; + padding:0; + background-color: #284B63; + color: white; +} + +.main { + margin: 10px 0; + padding: 0; + display: flex; + flex-wrap: wrap; + place-content: center; +} +#logo{ +height:200px; +margin-left: 20px; +} +button { + min-width: 45px; + height: 22px; + background: rgb(210 236 255); + border: 2px solid rgb(0 0 0 / 0%); + /* box-shadow: rgb(148 184 208 / 26%) 2px -3px 4px 0px, rgb(0 0 0 / 37%) -3px 3px 7px; */ + border-radius: 5px; + box-shadow: #03a9f433 2px 3px 0px 0px; + cursor: pointer; + /* transition: box-shadow 3s ease-in-out; */ +} +button:active { + outline: transparent; + box-shadow: inset #3c3c3c70 2px 3px 3px 0px, #03a9f433 1px 2px 0px 0px; + transform: translateY(2px); + transition: ease-out 0.1s; +} +button:focus { + outline: transparent; + +} +input{ + background: #55778E; + box-shadow: inset -2px -2px 2px 0px rgb(255 255 255 / 12%), inset 2px 3px 6px 2px rgb(0 0 0 / 19%); + border-radius: 6px; + border: 2px solid transparent; +} +input:focus { + transition-property: border; + transition-duration: 0.8s; + border: 2px solid #368cc7; + outline: 0; +} + textarea { + background: #55778E; + box-shadow: inset -3px -5px 5px 1px rgb(255 255 255 / 12%), inset 2px 3px 6px 2px rgb(0 0 0 / 19%); + border-radius: 6px; + border: 2px solid transparent; +} +textarea:focus { + transition-property: border; + transition-duration: 0.8s; + border: 2px solid #368cc7; + outline: 0; +} +table { + border:0; +} +tr{ + border:0; +} +td{ + border:0; +} +textarea { + width: 400px; + height: 100px; +} + +select { + width: 238px; + height: 24px; +} + +.ctxInput { + width: 241px; + height: 24px; +} + +.urlInput { + width: 400px; + height: 24px; +} + +.header { + width: 200px; + height: 40px; + font-weight: 700; +} + +#context-result{ + border: 1px solid white; + padding: 17px; + color: #9fffa2; + font-family: monospace; +} \ No newline at end of file From 73c1cf31fc142e4a39b0fa0bf2a2b51b5230c946 Mon Sep 17 00:00:00 2001 From: WatsonCIQ Date: Mon, 15 Feb 2021 21:01:57 +0000 Subject: [PATCH 02/14] change url to 1.1 versionand file location --- toolbox/fdc3_explained.html | 2 +- toolbox/legacy.html | 217 ------------------------------------ 2 files changed, 1 insertion(+), 218 deletions(-) delete mode 100644 toolbox/legacy.html diff --git a/toolbox/fdc3_explained.html b/toolbox/fdc3_explained.html index 99919dd04..d7c32c7c3 100644 --- a/toolbox/fdc3_explained.html +++ b/toolbox/fdc3_explained.html @@ -15,7 +15,7 @@
      -The old app (pre 1.1) is still available on legacy.html. +The old app (pre 1.1) is still available on legacy.html. diff --git a/toolbox/legacy.html b/toolbox/legacy.html deleted file mode 100644 index 95dc7c494..000000000 --- a/toolbox/legacy.html +++ /dev/null @@ -1,217 +0,0 @@ - - - - -FDC3 Explained v.2 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      FDC3 Provider Service:FDC3 Not Available
      App Directory:No Application Directory Connected
      Available Apps:
      Load App Start Url:
      Available Channels: 
      Broadcast Context:Channel:
      Get Context:Channel:
      Context:
      - - - - From 5222ba0fa71af161b15353314b9d26bc79d10045 Mon Sep 17 00:00:00 2001 From: WatsonCIQ Date: Mon, 15 Feb 2021 21:02:19 +0000 Subject: [PATCH 03/14] revert the polling solution to check for FDC3 in version 1.1 --- toolbox/fdc3-explained/1.1/main.js | 22 +++++++++++++++++----- 1 file changed, 17 insertions(+), 5 deletions(-) diff --git a/toolbox/fdc3-explained/1.1/main.js b/toolbox/fdc3-explained/1.1/main.js index d271b4a7b..758d5c147 100644 --- a/toolbox/fdc3-explained/1.1/main.js +++ b/toolbox/fdc3-explained/1.1/main.js @@ -1,9 +1,20 @@ - -// check for FDC3 support -function fdc3OnReady(cb) { - if (window.fdc3) { cb() } - else { window.addEventListener('fdc3Ready', cb) } +function fdc3OnReady(callback) { + let fdc3Tries = 10; //lets not check forever... + const checkFDC3Ready = () => { + if (window.fdc3) { + callback.call(this); + } + else { + if (fdc3Tries > 0) { + fdc3Tries--; + window.setTimeout(checkFDC3Ready, 2000); + } + } + }; + checkFDC3Ready(); } + + // Wait for the document to load function documentLoaded(cb) { if (document.readyState === 'loading') { @@ -11,6 +22,7 @@ function documentLoaded(cb) { } else { cb() } } + // document and FDC3 have loaded start the main function documentLoaded(() => fdc3OnReady(main)) From 83fc8b95f19e213a5ff7647991431466f6dd8a01 Mon Sep 17 00:00:00 2001 From: WatsonCIQ Date: Mon, 15 Feb 2021 21:05:18 +0000 Subject: [PATCH 04/14] add FDC3 supported version --- toolbox/fdc3-explained/1.0/index.html | 29 ++++++++++++++------------- toolbox/fdc3-explained/1.1/index.html | 5 +++++ toolbox/fdc3-explained/1.2/index.html | 5 +++++ 3 files changed, 25 insertions(+), 14 deletions(-) diff --git a/toolbox/fdc3-explained/1.0/index.html b/toolbox/fdc3-explained/1.0/index.html index 95dc7c494..33c6ebf9e 100644 --- a/toolbox/fdc3-explained/1.0/index.html +++ b/toolbox/fdc3-explained/1.0/index.html @@ -31,9 +31,9 @@ document.addEventListener("DOMContentLoaded",() => { fdc3Init(async () => { - + const systemChannels = await fdc3.getSystemChannels(); - + systemChannels.forEach(channel => { const thisChannel = channel; channelArray.push(channel.id); @@ -49,7 +49,7 @@ function enablePage(){ console.log('FDC3 is available'); - + if (window.FSBL){ window.FSBL.getFSBLInfo().then((info) => { @@ -62,16 +62,16 @@ document.getElementById('providerDetails').innerHTML = 'Available - Not specified'; } document.getElementById('directoryDetails').innerHTML = 'TBD'; - + document.getElementById('btnBroadcast').disabled = false; document.getElementById('txtBroadcastData').disabled = false; document.getElementById('selBroadcastChannel').disabled = false; document.getElementById('btnFetchChannels').disabled = false; document.getElementById('txtAvailableChannels').disabled = false; - + } - + function populateChannels(channelArray){ @@ -101,20 +101,20 @@ } function changeBroadcastChannel(){ - + alert('Not implemented yet!'); document.getElementById('selBroadcastChannel').selectedIndex = 0; - + } function appLoader(){ - + var myUrl = document.getElementById('appUrl').value; if (myUrl.length>0){ window.open(myUrl); - + } } @@ -122,13 +122,13 @@