Skip to content

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

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.
parent 3deaed68
Hide whitespace changes
Inline Side-by-side
Showing with 71 additions and 52 deletions
dev-server/documents/html/vitalsource-epub.mustache
View file @ d9406dcd
......@@ -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>
dev-server/static/scripts/controls.js 0 → 100644
View file @ d9406dcd
/**
* 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();
}
dev-server/static/scripts/index.js
View file @ d9406dcd
/**
* 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.
*/
import { setupControls } from './controls.js';
// Code for controls on the dev server homepage.
setupControls();
(function () {
let toggleClientButton = document.querySelector('.js-toggle-client');
toggleClientButton.textContent = 'Unload client';
let clientUrl = activeClientUrl;
toggleClientButton.onclick = () => {
if (activeClientUrl) {
unloadClient();
toggleClientButton.textContent = 'Load client';
} else {
loadClient(clientUrl);
toggleClientButton.textContent = 'Unload client';
}
// Set up links whose URLs should have a randomly generated suffix.
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}`);
};
// Set up links whose URLs should have a randomly generated suffix.
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);
}
})();
randomizeUrl();
link.addEventListener('click', randomizeUrl);
}
dev-server/static/scripts/util.js
View file @ d9406dcd
/**
* 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.
*/
// Global functions exposed on all pages on the dev server where the client
// is embedded.
//
// Ideally this would be an ES module and we'd avoid the globals. However ES
// modules do not work in XHTML documents in all browsers. This mainly affects
// our EPUB test cases. See https://github.com/hypothesis/client/pull/4353.
/** @type {string|null} */
let activeClientUrl;
......
dev-server/templates/index.mustache
View file @ d9406dcd
......@@ -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>
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