Add postMessage config delivery example page

Add a test/demo page that shows how to use postMessage-based configuration delivery. The examples make use of ES modules so will only work in a modern browser.
hypothesis · Oct 25, 2018 · f19e4d3 · f19e4d3
1 parent 94028ff
commit f19e4d3
Show file tree

Hide file tree

Showing 5 changed files with 132 additions and 0 deletions.
diff --git a/embedding-examples/.eslintrc b/embedding-examples/.eslintrc
@@ -0,0 +1,6 @@
+{
+    "parserOptions": {
+        "ecmaVersion": 2018,
+        "sourceType": "module",
+    }
+}
diff --git a/embedding-examples/README.md b/embedding-examples/README.md
@@ -0,0 +1,23 @@
+# embedding-examples
+
+This directory contains test pages / demos for different ways of embedding and
+configuring the Hypothesis client.
+
+The examples are designed to be used with a local instance of h at
+http://localhost:5000. If you want to use them with the public Hypothesis
+service, change the origin in [client.js][].
+
+## Usage
+
+1. Run the local client and h service, or edit [client.js][] and change the
+   origin to `https://hypothes.is`.
+
+2. Start a web server in this directory:
+
+   ```
+   python3 -m http.server 8000
+   ```
+
+   Then browse to <http://localhost:8000/>
+
+[client.js]: client.js
diff --git a/embedding-examples/client.js b/embedding-examples/client.js
@@ -0,0 +1,12 @@
+// URL of the "h" service to load the client from.
+// Change this to https://hypothes.is/ for the public Hypothesis service.
+
+export const CLIENT_ORIGIN = 'http://localhost:5000';
+//export const CLIENT_ORIGIN = 'https://hypothes.is';
+
+export function loadClient() {
+  const src = `${CLIENT_ORIGIN}/embed.js`;
+  const scriptEl = document.createElement('script');
+  scriptEl.src = src;
+  document.body.appendChild(scriptEl);
+}
diff --git a/embedding-examples/postmessage-config/iframe.html b/embedding-examples/postmessage-config/iframe.html
@@ -0,0 +1,26 @@
+<html>
+  <head>
+  <style>
+  body {
+    background-color: mistyrose;
+  }
+  </style>
+  </head>
+  <body>
+    <script type="module">
+      import { loadClient } from "../client.js";
+
+      window.hypothesisConfig = () => ({
+        // Tell the Hypothesis client to fetch additional configuration
+        // from the parent frame.
+        requestConfigFromFrame: window.location.origin,
+
+        // This currently has to be set in the frame where the client is loaded.
+        openSidebar: true,
+      });
+
+      loadClient();
+    </script>
+    This is the annotated document.
+  </body>
+</html>
diff --git a/embedding-examples/postmessage-config/top.html b/embedding-examples/postmessage-config/top.html
@@ -0,0 +1,65 @@
+<html>
+  <head>
+    <style>
+    body {
+      background-color: beige;
+    }
+    </style>
+  </head>
+  <body>
+    <script type="module">
+      // This is the origin of the "h" service that delivers the client.
+      import { CLIENT_ORIGIN } from "../client.js";
+
+      window.addEventListener('message', event => {
+        // Listen for a JSON-RPC "requestConfig" message from the client.
+        // See https://www.jsonrpc.org
+        if (event.origin !== CLIENT_ORIGIN ||
+            typeof event.data !== 'object' ||
+            event.data === null ||
+            event.data.jsonrpc !== '2.0') {
+          return;
+        }
+
+        const { id, method, params } = event.data;
+        let result;
+        let error;
+        if (method === 'requestConfig') {
+          // Insert configuration for the client here.
+          //
+          // Currently only configuration options which apply to the content
+          // in the sidebar part of the client will be used.
+          //
+          // See https://h-client.readthedocs.io/en/latest/publishers/config/#config-settings
+          result = {
+            query: 'user:jimsmith',
+          };
+        } else {
+          error = 'Unsupported method';
+        }
+
+        let reply;
+
+        if (error) {
+          reply = {
+            jsonrpc: '2.0',
+            id,
+            error,
+          };
+        } else {
+          reply = {
+            jsonrpc: '2.0',
+            id,
+            result,
+          };
+        }
+
+        // Send the configuration back to the Hypothesis client.
+        event.source.postMessage(reply, event.origin);
+      });
+    </script>
+    <p>This is the top level window.</p>
+    <iframe width="800" height="400" src="iframe.html">
+    </iframe>
+  </body>
+</html>