Add mock VitalSource book reader to dev server

This adds a mock version of the VitalSource Bookshelf reader to the dev server. It includes only the essential aspects of the viewer's structure that will trigger VitalSource-specific functionality.

Add mock VitalSource book reader to dev server
This adds a mock version of the VitalSource Bookshelf reader to the dev server. It includes only the essential aspects of the viewer's structure that will trigger VitalSource-specific functionality.
dc943828 · Robert Knight · 5b9404ec · dc943828 · dc943828 · dc943828
Commit dc943828 authored Sep 30, 2021 by Robert Knight
5 changed files
--- a/dev-server/documents/html/little-women-1.mustache
+++ b/dev-server/documents/html/little-women-1.mustache
--- a/dev-server/documents/html/little-women-2.mustache
+++ b/dev-server/documents/html/little-women-2.mustache
--- a/dev-server/documents/html/little-women-3.mustache
+++ b/dev-server/documents/html/little-women-3.mustache
--- a/dev-server/documents/html/vitalsource.mustache
+++ b/dev-server/documents/html/vitalsource.mustache
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>VitalSource book reader</title>
+    <style>
+      body {
+        font-family: sans-serif;
+      }
+    </style>
+    <script type="module">
+      /**
+       * Custom element that holds the book content frame. The class name is not
+       * important but the `<mosaic-book>` tag name triggers the VitalSource integration.
+       */
+      class MosaicElement extends HTMLElement {
+        constructor() {
+          super();
+          this.attachShadow({ mode: 'open' });
+
+          const chapterURLs = [
+            '/document/little-women-1',
+            '/document/little-women-2',
+            '/document/little-women-3',
+          ];
+
+          let chapterIndex = 0;
+
+          const setChapter = index => {
+            if (index < 0 || index >= chapterURLs.length) {
+              return;
+            }
+            chapterIndex = index;
+
+            // We remove the current frame and create a new one, rather than just
+            // change the `src` of the existing iframe, to mimic what Bookshelf
+            // does. The client should be robust to either approach.
+            this.contentFrame?.remove();
+            this.contentFrame = document.createElement('iframe');
+            this.contentFrame.src = chapterURLs[chapterIndex];
+            this.shadowRoot.append(this.contentFrame);
+          };
+
+          const styles = document.createElement('style');
+          styles.innerHTML = `
+            iframe {
+              width: 600px;
+              height: 400px;
+              resize: both;
+              overflow: auto;
+            }
+          `;
+          this.shadowRoot.append(styles);
+
+          const controlBar = document.createElement('div');
+          this.shadowRoot.append(controlBar);
+
+          this.prevButton = document.createElement('button');
+          this.prevButton.textContent = 'Prev chapter';
+          this.prevButton.onclick = () => setChapter(chapterIndex - 1);
+          controlBar.append(this.prevButton);
+
+          this.nextButton = document.createElement('button');
+          this.nextButton.textContent = 'Next chapter';
+          this.nextButton.onclick = () => setChapter(chapterIndex + 1);
+          controlBar.append(this.nextButton);
+
+          setChapter(0);
+        }
+      }
+      customElements.define('mosaic-book', MosaicElement);
+    </script>
+  </head>
+  <body>
+    <h1>Mock VitalSource Bookshelf reader</h1>
+    <p>
+      This page simulates the aspects of the <a href="https://bookshelf.vitalsource.com">VitalSource
+      Bookshelf</a> ebook reader which are relevant to Hypothesis. Other ebook readers
+      (eg. Readium and Epub.js) have a similar frame structure.
+    </p>
+
+    <p>
+      There is a container frame where the Hypothesis sidebar should be loaded and a child
+      content frame containing the current chapter content. The container frame should not be annotatable.
+      The content frame is contained inside a shadow root belonging to a <code>&lt;mosaic-book&gt;</code> element.
+    </p>
+
+    <p>
+      The sample book content was extracted from a <a href="https://www.gutenberg.org/ebooks/514">Project
+      Gutenberg EPUB</a>.
+    </p>
+
+    <mosaic-book></mosaic-book>
+
+    {{{hypothesisScript}}}
+  </body>
+</html>
--- a/dev-server/templates/index.mustache
+++ b/dev-server/templates/index.mustache
@@ -37,6 +37,12 @@
          configuration option enabled</a></li>
    </ul>

+    <h3>Ebook test documents</h3>
+    <p>These documents simulate ebook readers.</p>
+    <ul>
+      <li><a href="/document/vitalsource">Mock VitalSource Bookshelf reader</a</li>
+    </ul>
+
  <h2>Test PDF documents</h2>
  <h3>General test documents</h3>
  <p>These documents test typical/simple scenarios.</p>