progress bar

app/comic-book.js

@@ -1,5 +1,6 @@
 let EventEmitter = require('events').EventEmitter
 let LoadIndicator = require('./view/load-indicator')
+let ProgressBar = require('./view/progress-bar')
 
 class ComicBook extends EventEmitter {
 
@@ -13,12 +14,22 @@ class ComicBook extends EventEmitter {
     this.pages = new Map()
 
     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:finish', this.progressBar.hide.bind(this.progressBar))
+  }
+
+  render () {
+    this.el = document.createElement('div')
+    this.el.appendChild(this.progressBar.el)
+    return this
   }
 
   preload () {
@@ -43,6 +54,10 @@ class ComicBook extends EventEmitter {
     })
   }
 
+  updateProgressBar () {
+    let percentage = Math.floor((this.pages.size / this.srcs.size) * 100)
+    this.progressBar.update(percentage)
+  }
 }
 
 module.exports = ComicBook

app/index.js

@@ -1,30 +1,20 @@
-// let ComicBook = window.ComicBook = require('./comic-book')
+let ComicBook = window.ComicBook = require('./comic-book')
-let Canvas = require('./view/canvas')
+let comic = new ComicBook([
-let canvas = new Canvas({ zoomMode: 'fitWidth' })
+  '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',
-let image = new window.Image()
+  'https://raw.githubusercontent.com/balaclark/HTML5-Comic-Book-Reader/master/examples/goldenboy/goldenboy_02.jpg',
-image.onload = () => {
+  'https://raw.githubusercontent.com/balaclark/HTML5-Comic-Book-Reader/master/examples/goldenboy/goldenboy_03.jpg',
-  canvas.drawImage(image)
+  'https://raw.githubusercontent.com/balaclark/HTML5-Comic-Book-Reader/master/examples/goldenboy/goldenboy_04.jpg',
-  document.body.appendChild(canvas.canvas)
+  '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',
-image.src = '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_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 testImages = require('../test/data')
+document.addEventListener('DOMContentLoaded', () => {
-let fixtureImages = require('../test/fixture')
+  document.body.appendChild(comic.render().el)
-let imagediff = require('imagediff')
+  comic.preload()
-
+}, false)
-testImages.portrait1((testImage) => {
-  fixtureImages.singlePortrait((fixtureImage) => {
-    canvas.drawImage(testImage)
-
-    console.log(imagediff.equal(canvas.canvas, fixtureImage))
-
-    console.log(testImage.width, testImage.height)
-    console.log(fixtureImage.width, fixtureImage.height)
-    console.log(canvas.canvas.width, canvas.canvas.height)
-
-    document.body.appendChild(canvas.canvas)
-  })
-})
 

app/view/progress-bar.js

@@ -0,0 +1,29 @@
+let template = require('./template/progress-bar.handlebars')
+
+class ProgressBar {
+  constructor () {
+    this.createElements()
+    this.hide()
+  }
+
+  createElements () {
+    let el = document.createElement('div')
+    el.innerHTML = template()
+    this.el = el.firstChild
+    this.progressEl = this.el.querySelector('.progressbar-value')
+  }
+
+  update (percentage) {
+    this.progressEl.style.width = `${percentage}%`
+  }
+
+  show () {
+    this.el.style.display = 'block'
+  }
+
+  hide () {
+    this.el.style.display = 'none'
+  }
+}
+
+module.exports = ProgressBar

package.json

@@ -55,6 +55,7 @@
     "imagediff": "^1.0.8",
     "mochify": "^2.10.0",
     "phantomjs": "^1.9.17",
+    "spy": "^0.1.3",
     "standard": "^4.5.3",
     "uglify-js": "^2.4.23",
     "watchify": "http://registry.npmjs.org/watchify/-/watchify-3.2.3.tgz"

test/comic-book.test.js

@@ -1,4 +1,5 @@
 let assert = require('assert')
+let spy = require('spy')
 let ComicBook = require('../app/comic-book')
 let srcs = [
     'data:image/gif;base64,R0lGODlhAQABAPAAAKqqqv///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==',
@@ -49,7 +50,42 @@ describe('ComicBook', () => {
       comic.preload()
     })
 
+    it('should show the progress bar on preload:start', () => {
+      let comic = new ComicBook(srcs)
+      assert.equal(comic.progressBar.el.style.display, 'none')
+      comic.preload()
+      assert.equal(comic.progressBar.el.style.display, 'block')
+    })
+
+    it('should update the progress bar', done => {
+      let comic = new ComicBook(srcs)
+
+      comic.progressBar.update = spy()
+      comic.preload()
+
+      comic.on('preload:finish', () => {
+        assert.equal(comic.progressBar.update.callCount, 5)
+        assert(comic.progressBar.update.calls[0].calledWith(20))
+        assert(comic.progressBar.update.calls[1].calledWith(40))
+        assert(comic.progressBar.update.calls[2].calledWith(60))
+        assert(comic.progressBar.update.calls[3].calledWith(80))
+        assert(comic.progressBar.update.calls[4].calledWith(100))
+        done()
+      })
+    })
+
+    it('should hide the progress bar when finished', done => {
+      let comic = new ComicBook(srcs)
+
+      comic.preload()
+
+      comic.on('preload:finish', () => {
+        assert.equal(comic.progressBar.el.style.display, 'none')
+        done()
+      })
+    })
+  })
+
   it('should scroll to the top of the page on page turn')
 
-  })
 })

test/view/progress-bar.test.js

@@ -0,0 +1,32 @@
+let assert = require('assert')
+let ProgressBar = require('../../app/view/progress-bar')
+
+describe('PreloadProgress', () => {
+
+  it('should show', () => {
+    let bar = new ProgressBar()
+    bar.el.style.display = 'none'
+    bar.show()
+    assert.equal(bar.el.style.display, 'block')
+  })
+
+  it('should hide', () => {
+    let bar = new ProgressBar()
+    bar.el.style.display = 'block'
+    bar.hide()
+    assert.equal(bar.el.style.display, 'none')
+  })
+
+  it('should show on when preload is started', () => {
+    let bar = new ProgressBar()
+    assert.equal(bar.el.style.display, 'none')
+  })
+
+  it('should show the current percentage of the total preloading images', () => {
+    let bar = new ProgressBar()
+    bar.update(50)
+    assert.equal(bar.progressEl.style.width, '50%')
+  })
+
+})
+