Skip to content

C
coopwire-hypothesis
Commit b1b81da4 authored by Robert Knight's avatar Robert Knight
Browse files
Options

Add test page for PDF-based (aka. fixed-layout) VitalSource books 

Create a test page for PDF-based VS books, using content adapted from
https://bookshelf.vitalsource.com/reader/books/9781938168239/, an
OpenStax textboot that is available for free [1] in VitalSource.

 - Rename vitalsource.mustache => vitalsource-epub.mustache to make the
   distinction with the PDF example clearer.

 - Create vitalsource-pdf.mustache which serves as the "container" page
   for a PDF-based VS book. This is a copy of vitalsource-epub.mustache
   with the Prev/Next buttons removed and slight terminology changes
   ("chapter" => "page") to reflect how PDFs are handled in VS

 - Revise the descriptive text at the top of the VS PDF and EPUB
   examples to explain the purpose more clearly and relate them to how
   books are presented in the Bookshelf store, where the terms
   "reflowable" and "fixed" are used instead of "EPUB" and "PDF".

 - Add a very lightly edited copy of a real content page from a VS book
   in vitalsource-pdf-page.mustache. This is the HTML content from the
   iframe displaying a page in a PDF book in VS. The only changes I have
   made are small block of CSS customizations at the top (see comment)
   and a change to the URL of the rendered PDF page.

 - Update the links to the VitalSource test pages on the dev server.

[1] Even though the book is free, you have to add it to your VitalSource
    book library before you can access it. To do that, go to
    https://bookshelf.vitalsource.com and search for the book ID (9781938168239
    in this case), then click "Open Book".
parent 974b1de0
Show whitespace changes
Inline Side-by-side
Showing with 201 additions and 13 deletions
dev-server/documents/html/vitalsource.mustache → dev-server/documents/html/vitalsource-epub.mustache
View file @ b1b81da4
...@@ -73,17 +73,11 @@ ...@@ -73,17 +73,11 @@
</script> </script>
</head> </head>
<body> <body>
<h1>Mock VitalSource Bookshelf reader</h1> <h1>Mock VitalSource EPUB book</h1>
<p> <p>
This page simulates the aspects of the <a href="https://bookshelf.vitalsource.com">VitalSource This page simulates the essential parts of the <a href="https://bookshelf.vitalsource.com">VitalSource
Bookshelf</a> ebook reader which are relevant to Hypothesis. Other ebook readers Bookshelf</a> ebook reader. This example simulates an EPUB-based book, referred to as
(eg. Readium and Epub.js) have a similar frame structure. a "reflowable" book in the Bookshelf store.
</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>
<p> <p>
......
dev-server/documents/html/vitalsource-pdf-page.mustache 0 → 100644
View file @ b1b81da4
This source diff could not be displayed because it is too large. You can view the blob instead.
dev-server/documents/html/vitalsource-pdf.mustache 0 → 100644
View file @ b1b81da4
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>VitalSource book reader (PDF)</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' });
// For now there is only one page.
const pageURLs = [
'/document/vitalsource-pdf-page'
];
let pageIndex = 0;
const setPage = index => {
if (index < 0 || index >= pageURLs.length) {
return;
}
pageIndex = 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 = pageURLs[pageIndex];
this.shadowRoot.append(this.contentFrame);
};
const styles = document.createElement('style');
styles.innerHTML = `
iframe {
width: 80%;
height: 800px;
resize: both;
overflow: auto;
}
`;
this.shadowRoot.append(styles);
const controlBar = document.createElement('div');
this.shadowRoot.append(controlBar);
setPage(0);
}
}
customElements.define('mosaic-book', MosaicElement);
// The `window.VST` object must exist in the parent frame, otherwise the
// `window.innerPageData` variable is not set in the content frame.
window.VST = {
PictureBook: {
contentReady: () => {},
}
};
</script>
</head>
<body>
<h1>Mock VitalSource PDF book</h1>
<p>
This page simulates the essential parts of the <a href="https://bookshelf.vitalsource.com">VitalSource
Bookshelf</a> ebook reader. This example simulates a PDF-based book, referred to as
a "fixed layout" book in the <a href="https://bookshelf.vitalsource.com/">Bookshelf store</a>.
</p>
<p>
The book content was extracted from a free
<a href="https://bookshelf.vitalsource.com/reader/books/9781938168239">OpenStax textbook</a>.
To view the real book in VitalSource, you will first need to add it to your library
by searching for the book ID (9781938168239) in the Bookshelf store.
</p>
<mosaic-book></mosaic-book>
{{{hypothesisScript}}}
</body>
</html>
dev-server/templates/index.mustache
View file @ b1b81da4
...@@ -37,10 +37,11 @@ ...@@ -37,10 +37,11 @@
configuration option enabled</a></li> configuration option enabled</a></li>
</ul> </ul>
<h3>Ebook test documents</h3> <h3>VitalSource test documents</h3>
<p>These documents simulate ebook readers.</p> <p>These documents simulate VitalSource's book reader.</p>
<ul> <ul>
<li><a href="/document/vitalsource">Mock VitalSource Bookshelf reader</a></li> <li><a href="/document/vitalsource-epub">Mock VitalSource EPUB (aka. "reflowable") book</a></li>
<li><a href="/document/vitalsource-pdf">Mock VitalSource PDF (aka. "fixed") book</a></li>
</ul> </ul>
<h2>Test PDF documents</h2> <h2>Test PDF documents</h2>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment