Added nested iframe approach

finos · Sep 6, 2023 · 44fd37e · 44fd37e
1 parent 4fa0ebb
commit 44fd37e
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 9 deletions.
diff --git a/src/demo/dummy-desktop-agent.ts b/src/demo/dummy-desktop-agent.ts
@@ -3,6 +3,7 @@ import { supply } from "../lib/agent/supply";
 import { AppChecker, DesktopAgentDetailResolver } from "../lib/types";
 import { RequestMessageType } from "../lib/BridgingTypes";
 
+enum Approach { Tab, Frame, Nested }
 
 window.addEventListener("load", () => {
 
@@ -13,12 +14,14 @@ window.addEventListener("load", () => {
 
     const instances : AppIdentifierAndWindow[] = []
 
-    function useFrames() : boolean {
-        const cb = document.getElementById("frames") as HTMLInputElement;
-        return (cb.checked)
+    function getApproach() : Approach {
+        const cb = document.getElementById("opener") as HTMLInputElement;
+        const val = cb.value
+        var out : Approach = Approach[val as keyof typeof Approach]; //Works with --noImplicitAny
+        return out;
     }
 
-    function openTab(url: string) : Window {
+    function openFrame(url: string) : Window {
         var ifrm = document.createElement("iframe");
         ifrm.setAttribute("src", url);
         ifrm.style.width = "640px";
@@ -27,12 +30,34 @@ window.addEventListener("load", () => {
         return ifrm.contentWindow!!;
     }
 
-    function openFrame(url: string) : Window {
+    function openTab(url: string) : Window {
         return window.open(url, "_blank")!!;
     }
 
+    function openNested(url: string) : Window {
+        var ifrm = document.createElement("iframe");
+        ifrm.setAttribute("src", "nested.html?url="+url);
+        ifrm.style.width = "640px";
+        ifrm.style.height = "480px";
+        document.body.appendChild(ifrm);
+        return ifrm.contentWindow!!;
+    } 
+
+    function open(url: string): Window {
+        const approach = getApproach();
+        switch (approach) {
+            case Approach.Tab:
+                return openTab(url);
+            case Approach.Nested:
+                return openNested(url);
+            case Approach.Frame:
+                return openFrame(url);
+        }
+        throw new Error("unsupported")
+    }
+
     function launch(url: string, appId: string) {
-        const w = useFrames() ? openTab(url): openFrame(url);
+        const w = open(url);
         const instance = currentInstance++;
         w.name = "App"+instance;
         instances.push({

diff --git a/src/demo/nested.ts b/src/demo/nested.ts
@@ -0,0 +1,25 @@
+/**
+ * This instantiates a page where a nested iframe strategy is used.
+ */
+
+const parentWindow = window.parent;   // opener of iframe.
+const child = (document.getElementById("iframe") as HTMLIFrameElement) 
+const childWindow = child?.contentWindow!!;
+
+// implementation of broadcast, desktop-agent side (post-message-protocol version)
+window.addEventListener(
+    "message",
+    (event) => {
+        const data = event.data;
+        if (event.source == parentWindow) {
+            // from the parent
+            childWindow.postMessage(event.data, "*");
+        } else if (event.source == childWindow) {
+            parentWindow.postMessage(event.data, "*");
+        }
+    });
+
+// next, set up the child
+const url = window.location.href;
+const childLocation = url.substring(url.lastIndexOf("url=")+4);
+child?.setAttribute("src", childLocation);
diff --git a/static/da/corner.png b/static/da/corner.png
diff --git a/static/da/index.html b/static/da/index.html
@@ -9,9 +9,11 @@
 <body>
     <p>Dummy Desktop Agent</p>
 
-    <input type="checkbox" id="frames"> Use Frames</input>
-
-    <p>
+    <select name="opener" id="opener">
+        <option value="Tab" default>New Tab</option>
+        <option value="Frame">Frame</option>
+        <option value="Nested">Nested Frame</option>
+    </select>
 
     <a type="button" href="#" id="app1" >Open App 1</a>
 

diff --git a/static/da/nested.html b/static/da/nested.html
@@ -0,0 +1,30 @@
+<html>
+    <head>
+        <title>Test Layout</title>
+        <style type="text/css">
+            body, html
+            {
+                margin: 0; padding: 0; height: 100%; overflow: hidden;
+            }
+
+            #content
+            {
+                position:absolute; left: 0; right: 0; bottom: 0; top: 0px; 
+            }
+
+            #ribbon {
+                position: absolute;
+                right: 0;
+                top: 0;
+                width: 100px;
+            }
+        </style>
+        <script type="module" src="/src/demo/nested.ts"></script>
+    </head>
+    <body>
+        <img id="ribbon" src="corner.png" />
+        <div id="content">
+            <iframe id="iframe" width="100%" height="100%" frameborder="0" src=""></iframe>
+        </div>
+    </body>
+</html>