Merge pull request #797 from hypothesis/postmessage-config-demo

Add postMessage config delivery example page

Merge pull request #797 from hypothesis/postmessage-config-demo
Add postMessage config delivery example page
c2699daa · Robert Knight · GitHub · 50491177 · f19e4d3c · c2699daa
Unverified Commit c2699daa authored Nov 08, 2018 by Robert Knight Committed by GitHub Nov 08, 2018
5 changed files
--- a/embedding-examples/.eslintrc
+++ b/embedding-examples/.eslintrc
+{
+    "parserOptions": {
+        "ecmaVersion": 2018,
+        "sourceType": "module",
+    }
+}
--- a/embedding-examples/README.md
+++ b/embedding-examples/README.md
+# 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
--- a/embedding-examples/client.js
+++ b/embedding-examples/client.js
+// 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);
+}
--- a/embedding-examples/postmessage-config/iframe.html
+++ b/embedding-examples/postmessage-config/iframe.html
+<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>
--- a/embedding-examples/postmessage-config/top.html
+++ b/embedding-examples/postmessage-config/top.html
+<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>