Sketch

finos · May 7, 2024 · 3136059 · 3136059
1 parent 3c2af8b
commit 3136059
Show file tree

Hide file tree

Showing 4 changed files with 203 additions and 0 deletions.
diff --git a/toolbox/web-ui/channel_selector.html b/toolbox/web-ui/channel_selector.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Channel selector</title>
+        <style>
+#list {
+    & > div {
+        font-size: 18px;
+        height: 24px;
+        border-radius: 16px;
+        padding: 0 4px;
+
+        &:hover, &:focus {
+
+            background-color: #ccc;
+            cursor: pointer;
+        }
+    }
+    .glyph {
+        font-size: 12px;
+        padding: 2px 6px;
+        border-radius: 16px;
+        border-width: 1px;
+        border-style: solid;
+        font-weight: bold;
+    }
+    .name {
+        margin-left: 8px;
+        position: relative;
+        top: 2px;
+    }
+}
+        </style>
+    </head>
+    <body>
+        <div id="list">
+        </div>
+
+        <script src="./channel_selector.js"></script>
+    </body>
+</html>
diff --git a/toolbox/web-ui/channel_selector.js b/toolbox/web-ui/channel_selector.js
@@ -0,0 +1,33 @@
+const fillChannels = (data, messageClickedChannel) => {
+  const list = document.getElementById('list');
+  list.innerHTML = '';
+  data.forEach(({ id, type, displayMetadata }) => {
+    const node = document.createElement('div');
+    node.setAttribute('tabIndex', '0');
+    const span = document.createElement('span');
+    span.classList.add('glyph');
+    span.style.color = displayMetadata.color;
+    span.style.borderColor = displayMetadata.color;
+    span.textContent = displayMetadata.glyph ?? '';
+    node.appendChild(span);
+    const span2 = document.createElement('span');
+    span2.classList.add('name');
+    span2.textContent = displayMetadata.name;
+    node.appendChild(span2);
+    list.appendChild(node);
+    node.addEventListener('click', () => messageClickedChannel({ id, type, displayMetadata }));
+  });
+};
+
+// STEP 1B: Receive port from parent
+window.addEventListener('message', ({ ports }) => {
+  // STEP 3B: Receive channel data from parent
+  ports[0].onmessage = ({ data }) => {
+    fillChannels(data, channel => {
+      // STEP 4A: Send user selection information to parent
+      ports[0].postMessage(channel);
+    });
+  };
+  // STEP 2A: Send confirmation over port to parent
+  ports[0].postMessage('Returning handshake');
+});
diff --git a/toolbox/web-ui/tester.html b/toolbox/web-ui/tester.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en-US">
+    <head>
+        <title>FDC3 Web UI's Demo</title>
+        <script src="https://cdn.jsdelivr.net/npm/pretty-print-json@2.1/dist/pretty-print-json.min.js"></script>
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pretty-print-json@2.1/dist/css/pretty-print-json.css" />
+        <script src="./tester.js"></script>
+    </head>
+    <body>
+        <h1>FDC3 Web UI's Demo</h1>
+
+        <button id="send-btn" style="margin-bottom: 8px">Open channel selector</button>
+        <div style="display: flex; gap: 12px">
+            <div id="iframe-container">
+                Channel selector:<br/>
+                <iframe src="./channel_selector.html" height="300" width="300"></iframe>
+            </div>
+        </div>
+
+        <div>
+            Data returned:<br/>
+            <pre id="user-selection" class="json-container"></pre>
+        </div>
+    </body>
+</html>
diff --git a/toolbox/web-ui/tester.js b/toolbox/web-ui/tester.js
@@ -0,0 +1,104 @@
+// Channel data
+const recommendedChannels = [
+  {
+    id: 'fdc3.channel.1',
+    type: 'user',
+    displayMetadata: {
+      name: 'Channel 1',
+      color: 'red',
+      glyph: '1',
+    },
+  },
+  {
+    id: 'fdc3.channel.2',
+    type: 'user',
+    displayMetadata: {
+      name: 'Channel 2',
+      color: 'orange',
+      glyph: '2',
+    },
+  },
+  {
+    id: 'fdc3.channel.3',
+    type: 'user',
+    displayMetadata: {
+      name: 'Channel 3',
+      color: 'yellow',
+      glyph: '3',
+    },
+  },
+  {
+    id: 'fdc3.channel.4',
+    type: 'user',
+    displayMetadata: {
+      name: 'Channel 4',
+      color: 'green',
+      glyph: '4',
+    },
+  },
+  {
+    id: 'fdc3.channel.5',
+    type: 'user',
+    displayMetadata: {
+      name: 'Channel 5',
+      color: 'cyan',
+      glyph: '5',
+    },
+  },
+  {
+    id: 'fdc3.channel.6',
+    type: 'user',
+    displayMetadata: {
+      name: 'Channel 6',
+      color: 'blue',
+      glyph: '6',
+    },
+  },
+  {
+    id: 'fdc3.channel.7',
+    type: 'user',
+    displayMetadata: {
+      name: 'Channel 7',
+      color: 'magenta',
+      glyph: '7',
+    },
+  },
+  {
+    id: 'fdc3.channel.8',
+    type: 'user',
+    displayMetadata: {
+      name: 'Channel 8',
+      color: 'purple',
+      glyph: '8',
+    },
+  },
+];
+
+const openIframe = e => {
+  const channel = new MessageChannel();
+  let handshook = false;
+
+  // STEP 2B: Receive confirmation over port from iframe
+  channel.port1.onmessage = e => {
+    if (!handshook) {
+      // STEP 3A: Send channel data to iframe
+      channel.port1.postMessage(recommendedChannels);
+      handshook = true;
+      return;
+    }
+
+    // STEP 4B: Receive user selection information from iframe
+    document.getElementById('user-selection').innerHTML = prettyPrintJson.toHtml(e.data);
+  };
+  e.target.disabled = true;
+
+  const iframe = document.querySelector('iframe');
+
+  // STEP 1A: Send port to iframe
+  iframe.contentWindow.postMessage('Begin handshake', '*', [channel.port2]);
+};
+
+window.addEventListener('load', () => {
+  const sendBtn = document.getElementById('send-btn');
+  sendBtn.addEventListener('click', openIframe);
+});