basic image preloading

app/comic-book.js

@@ -1,11 +1,39 @@
-module.exports = ComicBook
+let EventEmitter = require('events').EventEmitter
+let LoadIndicator = require('./view/load-indicator')
 
-let loadIndicator = require('./view/load-indicator')
+module.exports = class ComicBook extends EventEmitter {
 
-function ComicBook () {
-  return {
-    replace (selector) {
-      console.log(selector, loadIndicator())
+  constructor (srcs) {
+    super()
+
+    // requested image srcs
+    this.srcs = new Set(srcs)
+
+    // loaded image objects
+    this.pages = new Map()
+
+    this.loadIndicator = new LoadIndicator()
+  }
+
+  preload () {
+    this.emit('preload:start')
+    this.srcs.forEach(loadImage.bind(this))
+  }
+}
+
+function loadImage (src, pageIndex) {
+  let self = this
+  let image = new window.Image()
+
+  image.src = src
+  image.onload = setImage
+
+  function setImage () {
+    self.pages.set(pageIndex, this)
+    self.emit('preload:image', this)
+
+    if (self.pages.size === self.srcs.size) {
+      self.emit('preload:finish')
     }
   }
 }

npm-shrinkwrap.json

@@ -2525,7 +2525,7 @@
     },
     "watchify": {
       "version": "3.2.3",
-      "from": "watchify@>=3.2.0 <4.0.0",
+      "from": "http://registry.npmjs.org/watchify/-/watchify-3.2.3.tgz",
       "resolved": "http://registry.npmjs.org/watchify/-/watchify-3.2.3.tgz"
     },
     "which": {

package.json

@@ -12,10 +12,11 @@
   "scripts": {
     "build": "npm run buildjs ; npm run buildcss",
     "buildcss": "rm -f dist/*.css && cat assets/fonts/icomoon-toolbar/style.css app/css/reset.css app/css/styles.css app/css/toolbar.css > dist/comicbook.css && cssmin dist/comicbook.css > dist/comicbook.min.css",
-    "buildjs": "rm -f dist/*.js && browserify --transform babelify --transform browserify-handlebars app/index.js --debug | exorcist dist/comicbook.js.map > dist/comicbook.js && uglifyjs --screw-ie8 --compress --mangle --source-map dist/comicbook.min.js.map --source-map-root ./ --output dist/comicbook.min.js -- dist/comicbook.js",
+    "buildjs": "rm -f dist/*.js && browserify --transform babelify --transform browserify-handlebars --require babelify/polyfill app/index.js --debug | exorcist dist/comicbook.js.map > dist/comicbook.js && uglifyjs --screw-ie8 --compress --mangle --source-map dist/comicbook.min.js.map --source-map-root ./ --output dist/comicbook.min.js -- dist/comicbook.js",
     "pretest": "standard",
-    "test": "mochify -R spec --transform babelify --transform browserify-handlebars test/**/*.test.js",
-    "test-watch": "mochify --watch -R min --transform babelify --transform browserify-handlebars test/**/*.test.js"
+    "test": "mochify --recursive --reporter spec --transform babelify --transform browserify-handlebars --require babelify/polyfill",
+    "test-watch": "mochify --watch --recursive --reporter min --transform babelify --transform browserify-handlebars --require babelify/polyfill",
+    "wrap": "rm -f npm-shrinkwrap ; npm prune && npm shrinkwrap"
   },
   "repository": {
     "type": "git",
@@ -53,7 +54,8 @@
     "mochify": "^2.10.0",
     "phantomjs": "^1.9.17",
     "standard": "^4.5.3",
-    "uglify-js": "^2.4.23"
+    "uglify-js": "^2.4.23",
+    "watchify": "http://registry.npmjs.org/watchify/-/watchify-3.2.3.tgz"
   },
   "dependencies": {
     "jquery": "^2.1.4"

test/comic-book.test.js

@@ -0,0 +1,48 @@
+let assert = require('assert')
+let ComicBook = require('../app/comic-book')
+let srcs = [
+    'data:image/gif;base64,R0lGODlhAQABAPAAAKqqqv///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==',
+    'data:image/gif;base64,R0lGODlhAQABAPAAALu7u////yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==',
+    'data:image/gif;base64,R0lGODlhAQABAPAAAMzMzP///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==',
+    'data:image/gif;base64,R0lGODlhAQABAPAAAN3d3f///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==',
+    'data:image/gif;base64,R0lGODlhAQABAPAAAO7u7v///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=='
+  ]
+
+describe('ComicBook', function () {
+
+  describe('preload images', function () {
+
+    it('should preload all given image srcs and emit preload:image, preload:finish events', function (done) {
+      let comic = new ComicBook(srcs)
+      let loaded = []
+
+      comic.on('preload:image', image => loaded.push(image.src))
+
+      comic.on('preload:finish', function () {
+        assert.deepEqual(loaded, srcs, 'all requested images should have been loaded')
+        done()
+      })
+
+      comic.preload()
+    })
+
+    it('should only load a given amount of images at a time')
+
+    it('should preload images in both directions')
+
+    it('should emit a preload:start event', function (done) {
+      let comic = new ComicBook(srcs)
+
+      comic.on('preload:start', function () {
+        assert(true)
+        done()
+      })
+
+      comic.preload()
+    })
+
+    it('should emit a preload:ready event')
+
+    it('preload:ready should make sure that double page mode can show two images')
+  })
+})