Add "Unload client" toggle button to EPUB demo page

Unloading the client (eg. by deactivating the Hypothesis extension) does not currently work properly in VitalSource ebooks or other scenarios involving iframes. Add an "Unload client" toggle button in the VS test page at http://localhost:3000/document/vitalsource-epub to help with testing this. The code for this button has been extracted from the dev server's home page into a shared `controls.js` module. In the process I removed the comments about Babel from util.js/index.js as these are much less relevant now, and instead added some notes at the top of dev-server/static/scripts/util.js about why that file is not an ES module.

Add "Unload client" toggle button to EPUB demo page
Unloading the client (eg. by deactivating the Hypothesis extension) does not currently work properly in VitalSource ebooks or other scenarios involving iframes. Add an "Unload client" toggle button in the VS test page at http://localhost:3000/document/vitalsource-epub to help with testing this. The code for this button has been extracted from the dev server's home page into a shared `controls.js` module. In the process I removed the comments about Babel from util.js/index.js as these are much less relevant now, and instead added some notes at the top of dev-server/static/scripts/util.js about why that file is not an ES module.
d9406dcd · Robert Knight · 3deaed68 · d9406dcd · d9406dcd · d9406dcd
Commit d9406dcd authored Nov 22, 2022 by Robert Knight
5 changed files
--- a/dev-server/documents/html/vitalsource-epub.mustache
+++ b/dev-server/documents/html/vitalsource-epub.mustache
@@ -9,10 +9,6 @@
        font-family: sans-serif;
      }
    </style>
-    <script type="module">
-      import { MosaicBookElement } from '/scripts/vitalsource-mosaic-book-element.js';
-      customElements.define('mosaic-book', MosaicBookElement);
-    </script>
  </head>
  <body>
    <h1>Mock VitalSource EPUB book</h1>
@@ -27,8 +23,19 @@
      Gutenberg EPUB</a>.
    </p>
+    <button class="js-toggle-client">Unload client</button>
    <mosaic-book book="little-women"></mosaic-book>
+    <script type="module">
+      import { MosaicBookElement } from '/scripts/vitalsource-mosaic-book-element.js';
+      import { setupControls } from '/scripts/controls.js';
+      customElements.define('mosaic-book', MosaicBookElement);
+      setupControls();
+    </script>
    {{{hypothesisScript}}}
  </body>
 </html>
--- a/dev-server/static/scripts/controls.js
+++ b/dev-server/static/scripts/controls.js
+/**
+ * Turn elements with a `js-toggle-client` class applied into buttons that
+ * load/unload the client on the current page.
+ *
+ * This behavior mirrors what happens when the extension is activated and
+ * de-activated on a page.
+ */
+function setupClientToggleButtons() {
+  const toggleButtons = Array.from(
+    document.querySelectorAll('.js-toggle-client')
+  );
+  for (const toggle of toggleButtons) {
+    toggle.textContent = 'Unload client';
+    // The `activeClientUrl`, `unloadClient` and `loadClient` functions come
+    // from global variables added to the page by the dev server.
+    let clientUrl = activeClientUrl;
+    toggle.onclick = () => {
+      if (activeClientUrl) {
+        unloadClient();
+        toggleButtons.forEach(btn => (btn.textContent = 'Load client'));
+      } else {
+        loadClient(clientUrl);
+        toggleButtons.forEach(btn => (btn.textContent = 'Unload client'));
+      }
+    };
+  }
+}
+/**
+ * Add interactive functionality to common controls on the page with `js-*`
+ * class names.
+ */
+export function setupControls() {
+  setupClientToggleButtons();
+}
--- a/dev-server/static/scripts/index.js
+++ b/dev-server/static/scripts/index.js
-/**
+import { setupControls } from './controls.js';
- * Because the code in this file is not transpiled by Babel, it must be compatible
- * with all the supported browsers version (see `browserlist` in `package.json`)
- * without transpilation. Do not include latest EcmaScript features as these
- * will cause exceptions while working on dev (`localhost:3000`) on slightly
- * older, yet supported browser versions.
- */
-// Code for controls on the dev server homepage.
+setupControls();
-(function () {
+// Set up links whose URLs should have a randomly generated suffix.
-  let toggleClientButton = document.querySelector('.js-toggle-client');
+const randomizedLinks = Array.from(
-  toggleClientButton.textContent = 'Unload client';
+  document.querySelectorAll('.js-randomize-url')
-  let clientUrl = activeClientUrl;
+);
+for (let link of randomizedLinks) {
-  toggleClientButton.onclick = () => {
+  const randomizeUrl = () => {
-    if (activeClientUrl) {
+    const randomHexString = Math.random()
-      unloadClient();
+      .toString()
-      toggleClientButton.textContent = 'Load client';
+      .slice(2 /* strip "0." prefix */, 6);
-    } else {
+    link.href = link.href.replace(/(\/rand-.*)?$/, `/rand-${randomHexString}`);
-      loadClient(clientUrl);
-      toggleClientButton.textContent = 'Unload client';
-    }
  };
+  randomizeUrl();
-  // Set up links whose URLs should have a randomly generated suffix.
+  link.addEventListener('click', randomizeUrl);
-  const randomizedLinks = Array.from(
+}
-    document.querySelectorAll('.js-randomize-url')
-  );
-  for (let link of randomizedLinks) {
-    const randomizeUrl = () => {
-      const randomHexString = Math.random()
-        .toString()
-        .slice(2 /* strip "0." prefix */, 6);
-      link.href = link.href.replace(
-        /(\/rand-.*)?$/,
-        `/rand-${randomHexString}`
-      );
-    };
-    randomizeUrl();
-    link.addEventListener('click', randomizeUrl);
-  }
-})();
--- a/dev-server/static/scripts/util.js
+++ b/dev-server/static/scripts/util.js
-/**
+// Global functions exposed on all pages on the dev server where the client
- * Because the code in this file is not transpiled by Babel, it must be compatible
+// is embedded.
- * with all the supported browsers version (see `browserlist` in `package.json`)
+//
- * without transpilation. Do not include latest EcmaScript features as these
+// Ideally this would be an ES module and we'd avoid the globals. However ES
- * will cause exceptions while working on dev (`localhost:3000`) on slightly
+// modules do not work in XHTML documents in all browsers. This mainly affects
- * older, yet supported browser versions.
+// our EPUB test cases. See https://github.com/hypothesis/client/pull/4353.
- */
 /** @type {string|null} */
 let activeClientUrl;

--- a/dev-server/templates/index.mustache
+++ b/dev-server/templates/index.mustache
@@ -96,6 +96,6 @@
    <li><a href="https://h.readthedocs.io/en/latest/api/">Hypothesis API documentation</a></li>
  </ul>
  {{{hypothesisScript}}}
-  <script src="/scripts/index.js"></script>
+  <script type="module" src="/scripts/index.js"></script>
 </body>
 </html>