Release/1.0.0

.gitignore

@@ -3,6 +3,7 @@
 .DS_Store
 .project
 .settings
+tags
 lib/tests/pid.txt
 
 comicbook

.travis.yml

@@ -1,5 +1,4 @@
 language: node_js
 node_js:
-  - "0.10"
-before_script:
-  - make
+  - "0.12"
+sudo: false

README.md

@@ -2,6 +2,7 @@ Comic Book Reader
 =================
 
 [![Build Status](https://api.travis-ci.org/balaclark/HTML5-Comic-Book-Reader.png)](https://travis-ci.org/balaclark/HTML5-Comic-Book-Reader)
+[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat)](https://github.com/feross/standard)
 
 A canvas based web application for reading comics. You can also see an implementation
 of this as an offline Chrome packaged application CBZ / CBR comic book reader at:
@@ -17,14 +18,40 @@ Development Install
 Builds require nodejs and npm. Installs have been tested with nodejs 0.10.0, older
 versions may or may not work.
 
-	npm install
-	make
-	make test
+```sh
+npm install
+npm run build
+npm test
+```
+
+In order to run the test suite you will need phantomjs installed, if you don't
+have it already installed globally:
+
+```sh
+npm install phantomjs@1.9
+npm test
+```
+
+Contribute
+----------
+
+Contributions are welcome, use the standard code style and [ES6](https://github.com/lukehoban/es6features#readme). Code is split into modules using browserify.
+
+[![js-standard-style](https://cdn.rawgit.com/feross/standard/master/badge.svg)](https://github.com/feross/standard)
+
+This project aims to have an absolute minimum of external dependencies (dev dependencies are more acceptable).
+
+To auto build js and auto run tests use the following commands in seperate terminals.
+
+```sh
+npm run buildjs-watch
+npm run test-watch
+```
 
 Copyright and License
 ---------------------
 
-Copyright 2010 Bala Clark
+Copyright 2010-2015 Bala Clark
 
 Licensed under the Apache License, Version 2.0 (the "License"); you may not use
 this work except in compliance with the License. You may obtain a copy of the

app/comic-book.js

@@ -0,0 +1,154 @@
+let EventEmitter = require('events').EventEmitter
+let Canvas = require('./view/canvas')
+let LoadIndicator = require('./view/load-indicator')
+let ProgressBar = require('./view/progress-bar')
+
+class ComicBook extends EventEmitter {
+
+  constructor (srcs = [], options) {
+    super()
+
+    this.options = Object.assign({
+      // manga mode
+      rtl: false,
+      doublePage: false
+    }, options)
+
+    // requested image srcs
+    this.srcs = srcs
+
+    // loaded image objects
+    this.pages = new Map()
+
+    this.preloadBuffer = 4
+
+    // TODO move this logic into the router
+    this.currentPageIndex = 0
+
+    this.canvas = new Canvas()
+    this.loadIndicator = new LoadIndicator()
+    this.progressBar = new ProgressBar()
+
+    this.addEventListeners()
+  }
+
+  addEventListeners () {
+    this.on('preload:start', this.loadIndicator.show.bind(this.loadIndicator))
+    this.on('preload:start', this.progressBar.show.bind(this.progressBar))
+    this.on('preload:image', this.updateProgressBar.bind(this))
+    this.on('preload:ready', this.loadIndicator.hide.bind(this.loadIndicator))
+    this.on('preload:ready', this.drawPage.bind(this))
+    this.on('preload:finish', this.progressBar.hide.bind(this.progressBar))
+  }
+
+  render () {
+    this.pageRendered = false
+    this.el = document.createElement('div')
+    this.el.appendChild(this.canvas.canvas)
+    this.el.appendChild(this.progressBar.el)
+    this.el.appendChild(this.loadIndicator.el)
+    this.drawPage()
+    return this
+  }
+
+  // TODO use a queue, only allow x concurrent downloads at a time
+  // TODO preload in both directions
+  // TODO fire ready on forward direction only
+  preload (startIndex) {
+    this.emit('preload:start')
+
+    if (startIndex == null || startIndex >= this.srcs.length) {
+      startIndex = this.currentPageIndex
+    }
+
+    // reorder srcs to start from the requested index
+    let _srcs = this.srcs.slice()
+    let srcs = _srcs.splice(startIndex).concat(_srcs)
+
+    this.currentPageIndex = startIndex
+
+    srcs.forEach((src, pageIndex) => {
+
+      // allow preload to be run multiple times without duplicating requests
+      if (this.pages.has(pageIndex)) return
+
+      let image = new window.Image()
+
+      image.src = src
+      image.onload = setImage.bind(this, image, pageIndex)
+
+      function setImage (image, index) {
+        this.pages.set(index, image)
+        this.emit('preload:image', image)
+
+        if (this.pages.size >= this.preloadBuffer && !this.pageRendered) {
+          this.emit('preload:ready')
+        }
+
+        if (this.pages.size === this.srcs.length) {
+          this.emit('preload:finish')
+        }
+      }
+    })
+  }
+
+  updateProgressBar () {
+    let percentage = Math.floor((this.pages.size / this.srcs.length) * 100)
+    this.progressBar.update(percentage)
+  }
+
+  drawPage (pageIndex) {
+    if (typeof pageIndex !== 'number') pageIndex = this.currentPageIndex
+
+    let page = this.pages.get(pageIndex)
+
+    // if the requested image hasn't been loaded yet, force another preload run
+    if (!page) return this.preload(pageIndex)
+
+    let args = [ page ]
+
+    if (this.options.doublePage) {
+      let page2Index = pageIndex + 1
+      let page2 = this.pages.get(page2Index)
+
+      if (page2Index <= (this.pages.size - 1) && !page2) {
+        return this.preload(page2Index)
+      }
+
+      args.push(page2)
+
+      if (this.options.rtl) {
+        args.reverse()
+      }
+    }
+
+    args.push(this.options)
+
+    try {
+      this.canvas.drawImage.apply(this.canvas, args)
+      this.currentPageIndex = pageIndex
+      this.pageRendered = true
+    } catch (e) {
+      if (e.message !== 'Invalid image') throw e
+    }
+  }
+
+  drawNextPage () {
+    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)
+  }
+
+  drawPreviousPage () {
+    let increment = this.options.doublePage ? 2 : 1
+    let index = this.currentPageIndex - increment
+    if (index < 0) index = 0
+    this.drawPage(index)
+  }
+}
+
+module.exports = ComicBook
+

css/styles.css → app/css/styles.css

@@ -49,6 +49,11 @@ body:not(.mobile) .navigate:hover {
 	opacity: 0.8;
 	background: #000 url("img/loading.gif") no-repeat center;
 	box-shadow: none;
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
 }
 
 #cb-status {

app/index.js

@@ -0,0 +1,25 @@
+let ComicBook = window.ComicBook = require('./comic-book')
+let debounce = require('lodash.debounce')
+let srcs = [
+  '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',
+  'https://raw.githubusercontent.com/balaclark/HTML5-Comic-Book-Reader/master/examples/goldenboy/goldenboy_03.jpg',
+  'https://raw.githubusercontent.com/balaclark/HTML5-Comic-Book-Reader/master/examples/goldenboy/goldenboy_04.jpg',
+  'https://raw.githubusercontent.com/balaclark/HTML5-Comic-Book-Reader/master/examples/goldenboy/goldenboy_05.jpg',
+  'https://raw.githubusercontent.com/balaclark/HTML5-Comic-Book-Reader/master/examples/goldenboy/goldenboy_06.jpg',
+  'https://raw.githubusercontent.com/balaclark/HTML5-Comic-Book-Reader/master/examples/goldenboy/goldenboy_07.jpg',
+  'https://raw.githubusercontent.com/balaclark/HTML5-Comic-Book-Reader/master/examples/goldenboy/goldenboy_08.jpg',
+  'https://raw.githubusercontent.com/balaclark/HTML5-Comic-Book-Reader/master/examples/goldenboy/goldenboy_09.jpg',
+  'https://raw.githubusercontent.com/balaclark/HTML5-Comic-Book-Reader/master/examples/goldenboy/goldenboy_10.jpg'
+]
+let comic = window.comic = new ComicBook(srcs, { doublePage: true })
+
+comic.render().drawPage(5)
+
+window.addEventListener('resize', debounce(comic.drawPage.bind(comic), 100))
+
+document.addEventListener('DOMContentLoaded', () => {
+  document.body.appendChild(comic.el)
+}, false)
+

app/lib/make-image.js

@@ -0,0 +1,9 @@
+
+module.exports = function makeImage (src, cb) {
+  let image = new window.Image()
+  image.onload = () => {
+    cb(image)
+  }
+  image.src = src
+}
+