adding draw page methods, preparing double page mode

app/comic-book.js

@@ -5,9 +5,15 @@ let ProgressBar = require('./view/progress-bar')
 
 class ComicBook extends EventEmitter {
 
-  constructor (srcs = []) {
+  constructor (srcs = [], options) {
     super()
 
+    this.options = Object.assign({
+      // manga mode
+      rtl: false,
+      doublePage: false
+    }, options)
+
     // requested image srcs
     this.srcs = srcs
 
@@ -72,17 +78,32 @@ class ComicBook extends EventEmitter {
     this.progressBar.update(percentage)
   }
 
-  drawPage () {
-    let page = this.pages.get(this.currentPageIndex)
-    this.canvas.drawImage(page)
+  drawPage (pageIndex) {
+    if (typeof pageIndex !== 'number') pageIndex = this.currentPageIndex
+    let page = this.pages.get(pageIndex)
+
+    try {
+      this.canvas.drawImage(page)
+      this.currentPageIndex = pageIndex
+    } catch (e) {
+      if (e.message !== 'Invalid image') throw e
+    }
   }
 
   drawNextPage () {
-    // TODO
+    let increment = this.options.doublePage ? 2 : 1
+    let index = this.currentPageIndex + increment
+    if (index >= this.pages.size) {
+      index = this.pages.size - 1
+    }
+    this.drawPage(index)
   }
 
-  drawPrevioousPage () {
-    // TODO
+  drawPreviousPage () {
+    let increment = this.options.doublePage ? 2 : 1
+    let index = this.currentPageIndex - increment
+    if (index < 0) index = 0
+    this.drawPage(index)
   }
 }
 

app/index.js

@@ -1,5 +1,5 @@
 let ComicBook = window.ComicBook = require('./comic-book')
-let comic = new ComicBook([
+let comic = window.comic = new ComicBook([
   'https://raw.githubusercontent.com/balaclark/HTML5-Comic-Book-Reader/master/examples/goldenboy/goldenboy_00.jpg',
   'https://raw.githubusercontent.com/balaclark/HTML5-Comic-Book-Reader/master/examples/goldenboy/goldenboy_01.jpg',
   'https://raw.githubusercontent.com/balaclark/HTML5-Comic-Book-Reader/master/examples/goldenboy/goldenboy_02.jpg',
@@ -13,8 +13,10 @@ let comic = new ComicBook([
   'https://raw.githubusercontent.com/balaclark/HTML5-Comic-Book-Reader/master/examples/goldenboy/goldenboy_10.jpg'
 ])
 
+comic.preload()
+comic.render()
+
 document.addEventListener('DOMContentLoaded', () => {
-  document.body.appendChild(comic.render().el)
-  comic.preload()
+  document.body.appendChild(comic.el)
 }, false)
 

app/view/canvas.js

@@ -13,8 +13,8 @@ class Canvas extends EventEmitter {
     this.options = Object.assign({
       // fitWidth, fitWindow, manua
       zoomMode: 'fitWidth',
-      // ltr, rtl
-      readDirection: 'ltr',
+      // manga mode
+      rtl: false,
       // should two pages be rendered at a time?
       doublePage: false
     }, options)
@@ -126,7 +126,7 @@ class Canvas extends EventEmitter {
     }
 
     // in manga double page mode reverse the page(s)
-    if (this.options.manga && this.options.doublePage && typeof page2 === 'object') {
+    if (this.options.rtl && this.options.doublePage && typeof page2 === 'object') {
       let tmpPage = page
       let tmpPage2 = page2
       page = tmpPage2