An ePub reader directive, compatible with ionic / Angular v1, plus sample app.
angular-epub-reader is a reworking of Patrick G's excellent ePubViewer, to make it compatible with AngularJS v1 and Ionic v1. Parts of it are substantially re-written, parts become quite a bit simpler by using the Angular templating system, other parts (styling, for example) are mostly completely unchanged, except to rename some classes to prevent collision with Ionic's built-in styling classes. I have also removed the original project's dependency on jQuery.
The primary component is a custom AngularJS Directive encapsulating the viewer. You can easily add this as a module to your own app.
This repo also includes a sample ionic App codebase illustrating use.
Start a new Ionic v1 project as follows:
Ensure you have Ionic V1 installed.
ionic start angular-epub-reader blank --type ionic1
Be sure to include <allow-navigation href="*" /> in your config.xml, or the whitelist plugin may block download of the ePub.
(some people have reported they also needed to include something to the effect of
<meta http-equiv="Content-Security-Policy" content="default-src gap://ready file://* blob: *; style-src 'self' blob: http://* https://* 'unsafe-inline'; script-src 'self' http://* https://* 'unsafe-inline' 'unsafe-eval'">) in their index.html.
Modify your index.html file to include the following:
<link rel="stylesheet" href="lib/normalize.min.css">
<link href="css/readerstyle.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Arbutus+Slab" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i" rel="stylesheet">
<script src="lib/sanitize-html.min.js"></script>
<script src="lib/jszip.min.js"></script>
<script src="lib/epub.js"></script>
<script src="js/angularEpubReader.js"></script>Include the custom directive in your index.html file, or in a template.
<ion-pane>
<ion-content overflow-scroll="true">
<epubreader></epubreader>
</ion-content>
</ion-pane>angular.module('starter', ['ionic', 'epubreader'])Once the app is running you should see a button entitled 'Open a Book'. Hit that button and load an epub file, e.g. Treasure Island - the file called EPUB (with images) works nicely.
If you are using the highlighting features of EpubJS and want to be able to click on highlights (as in the ePubJS example app, you have to deal with Ionic's event handling. By default Ionic seems to stop propagation on click events it is not in control of. So your click events get eaten and the callback to your highlight doesn't get called. E.g. the console.log message in the code below from the sample app never gets reached.
rendition.on("selected", function(cfiRange, contents) {
rendition.annotations.highlight(cfiRange, {}, (e) => {
console.log("highlight clicked", e.target);
});
contents.window.getSelection().removeAllRanges();
});
To get around that, you need to add "data-tap-disabled=true" to the "G" elements that EpubJS creates, e.g. something like:
Array.from(document.getElementsByTagName('g')).forEach(function(theG) {
var isEpubGElement = theG.getAttribute('data-epubcfi');
if(isEpubGElement) {
theG.setAttribute("data-tap-disabled", true); // stop IONIC from killing the click events on these.
}
});
right after you create a highlight.
You will need to have Ionic V1 installed to run the sample app.
This project is licensed under the MIT License - see the LICENSE.md file for details
- Greatful thanks to Patrick G, the original author of ePubViewer - his code was much simpler to understand than the original ePub.js angular reader, and more up to date.
- Futurepress, for creating ePub.js[https://github.com/futurepress/epub.js/] in the first place.