Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/androidovshchik/angularepubviewer
Angular library based on Epub.js
https://github.com/androidovshchik/angularepubviewer
angular epub ionic library
Last synced: about 2 months ago
JSON representation
Angular library based on Epub.js
- Host: GitHub
- URL: https://github.com/androidovshchik/angularepubviewer
- Owner: androidovshchik
- License: gpl-3.0
- Archived: true
- Created: 2018-04-02T04:43:50.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-04-18T12:54:44.000Z (over 5 years ago)
- Last Synced: 2024-09-27T17:40:56.637Z (about 2 months ago)
- Topics: angular, epub, ionic, library
- Language: TypeScript
- Homepage: https://androidovshchik.github.io/AngularEpubViewer
- Size: 114 KB
- Stars: 11
- Watchers: 4
- Forks: 15
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
AngularEpubViewer
This is a simple epub viewer component for angular4+ websites.
All issues and pull requests are welcome!
### Demo page
[https://androidovshchik.github.io/AngularEpubViewer](https://androidovshchik.github.io/AngularEpubViewer)
### Getting started
```
npm install [email protected] --save
npm install angular-epub-viewer --save
```
*(Actual version of the 2-nd branch for epub.js may be found [here](https://www.npmjs.com/package/epubjs))*
Then add **required** `epub.js` script to your `.angular-cli.json`
```
{
...
"apps": [
{
...
"scripts": [
"../node_modules/epubjs/build/epub.js",
...
]
}
]
}
```
Optional scripts:
> `"../node_modules/epubjs/build/hooks.js"`
>
> includes [default plugins](https://github.com/futurepress/epub.js/tree/master/hooks/default)
> `"../node_modules/epubjs/build/libs/zip.min.js"` *(recommended)*
>
> includes [JSZip.js library](https://github.com/Stuk/jszip)
> `"../node_modules/epubjs/build/libs/localforage.min.js"`
>
> includes [localForage.js library](https://github.com/localForage/localForage)
Other official plugins may be found [here](https://github.com/futurepress/epub.js/tree/master/hooks/extensions)
In folder `add-ons` are also available my own hooks, include them such way:
`"../node_modules/angular-epub-viewer/add-ons/YOUR_CHOSEN_HOOK_NAME.js"`
### Supporting IE
Compatibility coming with [wicked-good-xpath](https://github.com/google/wicked-good-xpath)
Include these scripts in `.angular-cli.json`:
```
"../node_modules/epubjs/examples/wgxpath.install.js",
"../node_modules/epubjs/hooks/extensions/wgxpath.js"
```
[More info here](https://github.com/futurepress/epub.js#internet-explorer)
### An example of usage
`*.module.ts` file
```js
import { AngularEpubViewerModule } from 'angular-epub-viewer';
@NgModule({
...
imports: [
...
AngularEpubViewerModule
]
})
```
`*.component.html` file
```html
Previous page
Next page
```
`*.component.ts` file
```js
@Component({
...
})
export class AppComponent {
@ViewChild('epubViewer')
epubViewer: AngularEpubViewerComponent;
openFile(event) {
this.epubViewer.openFile(event.target.files[0]);
}
}
```
### API documentation
Fields:
| Signature | Short Description |
| :------------- |:-------------|
| `epub: ePub` | Primary object |
| `root: ElementRef` | Root container's DOM reference |
| `currentLocation: EpubLocation` | Current location of document's rendered part |
| `documentReady: boolean` | Indicates whenever document is ready |
| `isChapterDisplayed: boolean` | Indicates whenever chapter is displayed |
| `computingPagination: boolean` | Indicates whenever pagination is computing |
| `searchingText: boolean` | Indicates whenever searching text |
Input parameters:
| Signature | Default value | Short Description |
| :------------- |:-------------|:-------------|
| `padding: string` | `null` | Root container's padding in px, em, etc |
| `autoPagination: boolean` | `false` | Enables auto calculate of pagination after document is ready or viewport has been changed |
| `autoMetadata: boolean` | `false` | Enables auto loading of metadata after document is ready |
| `autoTOC: boolean` | `false` | Enables auto loading of table of contents after document is ready |
Output events:
| Signature | Short Description |
| :------------- |:-------------|
| `onDocumentReady: EventEmitter` | Get event when document is loaded |
| `onChapterUnloaded: EventEmitter` | Get event when chapter is unloaded |
| `onChapterDisplayed: EventEmitter` | Get event when chapter is displayed |
| `onLocationFound: EventEmitter` | Get event about the current location |
| `onSearchFinished: EventEmitter` | Get event about search results |
| `onPaginationComputed: EventEmitter` | Get event about pagination |
| `onMetadataLoaded: EventEmitter` | Get event about metadata |
| `onTOCLoaded: EventEmitter` | Get event about table of contents |
| `onErrorOccurred: EventEmitter` | Get event when any error occurred |
Methods:
| Signature | Short Description |
| :------------- |:-------------|
| `openLink(link: string): void` | Opens EPUB document by link |
| `openFile(file: File): void` | Opens EPUB document file |
| `goTo(location: string or number): void` | Navigates to the specified url or EPUB CFI or page |
| `nextPage(): void` | Navigates to the next page |
| `previousPage(): void` | Navigates to the previous page |
| `searchText(text: string): void` | Searches all text matches *in the current chapter* |
| `setStyle(style: string, value: string): void` | Adds style to be attached to the document's body element |
| `resetStyle(style: string): void` | Removes a style from the rendered document |
| `computePagination(): void` | Calculates pagination as output event |
| `loadMetadata(): void` | Loads metadata as output event |
| `loadTOC(): void` | Loads table of contents as output event |
### Running demo from sources
```
git clone https://github.com/androidovshchik/AngularEpubViewer.git
cd AngularEpubViewer
git submodule update --init --recursive
npm install
npm start
```
Open http://localhost:4200 in browser
### License
### Other
EPUB is a registered trademark of the [IDPF](http://idpf.org/).