apps-workshop/canvas_proxy/index.html at main · PitcherAG/apps-workshop · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Canvas Proxy App - load any app inside</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://unpkg.com/@pitcher/js-api"></script>
  </head>

  <style>
    body {
      font-family: ui-sans-serif, system-ui, sans-serif;
      padding: 0;
      margin: 0;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    iframe {
      border: 0;
    }
  </style>

  <body>
    <!-- src can be any external host like example.com -->
    <iframe
      title="External website to proxy to"
      src=""
      width="100%"
      height="1024px"
    ></iframe>

    <script>
      // This is the iframe target, can be also full page url e.g. https://example.com/test/page/something.html
      // The dedault value points to local instance of canvas_proxy_external_target_app
      const proxyTarget = new URL("http://localhost:3456");

      document.querySelector("iframe").src = proxyTarget.href;

      const api = pitcher.usePitcherApi();
      const uiApi = pitcher.useUi();
      window.api = api;
      window.uiApi = uiApi;
      let env = {};
      let instanceID = "";
      let currentCanvas = null;
      const onIframeMessage = async (message) => {
        const { type, body: { action = null, data = null } = {} } =
          message.data;

        if (type === "IFRAME_DATA_MESSAGE" && action) {
          if (action === "set_data") {
            window.pitcherData = data;
            currentCanvas = window.pitcherData.canvas;
            checkViewMode(data);
            api.getEnv().then(function (result) {
              window.env = result;
            });
          }
          if (action === "update_data") {
            checkViewMode(data);
          }
        }
      };
      document.addEventListener("DOMContentLoaded", function () {
        window.parent.postMessage(
          {
            type: "IFRAME_DATA_MESSAGE",
            body: {
              action: "iframe_loaded",
              data: {},
            },
          },
          "*"
        );
      });

      window.addEventListener("message", onIframeMessage);
      window.pitcherData = {};
      function checkViewMode(data) {
        if (data.is_edit_mode === false) {
        }
        if (data.is_edit_mode === true) {
        }
      }

      // Add this new function to handle API requests
      function handleApiRequest(event) {
        if (event.origin !== proxyTarget.origin) return;

        const { id, target, method, args } = event.data;

        let result;
        try {
          if (target === "api") {
            result = window.api[method](...args);
          } else if (target === "uiApi") {
            result = window.uiApi[method](...args);
          } else {
            throw new Error("Invalid target");
          }

          if (result instanceof Promise) {
            result.then(
              (value) =>
                sendResponse(event.source, id, { success: true, data: value }),
              (error) =>
                sendResponse(event.source, id, {
                  success: false,
                  error: error.message,
                })
            );
          } else {
            sendResponse(event.source, id, { success: true, data: result });
          }
        } catch (error) {
          sendResponse(event.source, id, {
            success: false,
            error: error.message,
          });
        }
      }

      function sendResponse(source, id, response) {
        source.postMessage({ id, ...response }, proxyTarget.origin);
      }

      // Add this event listener for API requests
      window.addEventListener("message", handleApiRequest);
    </script>
  </body>
</html>