Interactive bookreader used in VAULT for displaying artist's books. A customized version of Internet Archive's Bookreader. The version in package.json of this project is meant to track the version of IA's bookreader we're using.
If you have npm you can run npm run demo to open a sample artist book on a local web server.
Two grunt tasks are available:
grunt buildminifies JS, CSS, & copies production files in a "dist" directorygrunt watchwatches the JS, CSS, & index.html files for changes & then builds
Our Customizations live primarily in the js/app.js file, which is based off of bookreader/BookReaderDemo/BookReaderJSAdvanced.js, and in the SCSS files in the "css" directory.
We host the app on VAULT to avoid problems with CORS (cross-origin resource restrictions, VAULT content being unable to be loaded on other domains). To publish code changes:
- run the included
./publi.shscript to build the app, zip it up, & open the VAULT item - login to VAULT if need be
- edit this version under the Actions menu
- delete the previous attachment zip
- upload the new attachment zip
- edit the attachment
- click the Unzip files button
- save in attachments dialog
- save the item
To test, you do the same with a different item and then edit that item's URL into the artists' books item template (under the Libraries eResources collection in the equella_templates project).
VAULT interacts with the Bookreader by constructing special links filled with item metadata that tell the Bookreader how to render a particular item's attachments as a book. Here's an example:
{{book.reader.domain}}/?title=Awesome%20Book&id=d79ea3fb-6d87-4003-9b40-9b322dcd87fc&version=1&filenames=page&pages=9
I've made the keys italics in the query string and their values bold to highlight what information is passed. Here are the meanings of these fields and how the bookreader uses them:
- title is used to render a link in the upper left & set the
<title>of the page - id is the VAULT item's UUID
- version is the VAULT item's version
- filenames are the filename prefixes in front of each page number, e.g. for files like "page1.jpg" they would be "page"
- pages is the number of pages (indexed from 1, not 0)
Most of these pieces of information are used to determine what VAULT file URL corresponds to which book page number. The information is parsed out of the URL's query string and serialized in a global vaultItem object which app.js then uses to set certain configurations for the Open Library Bookreader.
- Internet Archive Bookreader documentation
- CCA Color Values (libraries only)