Adding more detailed docs about usage

README.md

@@ -8,8 +8,55 @@
 [https://davidmz.github.io/apng-js/](https://davidmz.github.io/apng-js/)
 
 ## Usage
+
+### Using Babel/Webpack
+
+This library is written using ES2015 Javascript. If you are already using [babel](https://babeljs.io), you can easily integrate this library with the following steps.
+
 `npm install apng-js`
-
+
+then, import `parseAPNG` into your app...
+
+```JavaScript
+import parseAPNG from 'apng-js'
+
+const apng = parseAPNG( require('./images/elephant.png') );
+
+```
+
+
+
+### Using plain old Javascript
+
+Using a module loader like [requirejs](http://requirejs.org/):
+
+- Install the library: `npm install apng-js`
+
+Then, import the compiled library (located @ `lib/index.js` using requirejs:
+
+```JavaScript
+<script src="path/to/require.min.js"></script>
+<script>
+
+/// require the compiled js library from its location in the node_modules folder:
+require(['./node_modules/apng-js/lib/index'], function(parseAPNGLib) {
+
+    var parseAPNG = parseAPNGLib.default
+    var xhr = new XMLHttpRequest();
+    xhr.onreadystatechange = function(){
+        if (this.readyState == 4 && this.status == 200){
+             var apng = parseAPNG(this.response);      // parse the response
+        }
+    }
+    xhr.open('GET', '.images/elephant.png', true);   // load an .apng via ajax
+    xhr.responseType =  "arraybuffer";      // use arraybuffer response
+    xhr.send(); 
+
+
+});
+</script>
+```
+
 ## API
 
 ### parseAPNG(buf: ArrayBuffer): (APNG|Error)
@@ -20,7 +67,7 @@ Object methods relies on browser features (canvas, requestAnimationFrame…)
 and should work only in browser.
 
 Usage:
-```
+```JavaScript
 import parseAPNG from 'apng-js';
 
 const apng = parseAPNG(buffer);
@@ -42,7 +89,7 @@ Checks if Error is 'Not an animated PNG' error.
 
 ### APNG
 Structure of APNG file.
-````
+```JavaScript
 class APNG {
     width: number     // with of canvas, pixels
     height: number    // height of canvas, pixels
@@ -60,7 +107,7 @@ class APNG {
 
 ### Frame
 Individual APNG frame.
-````
+```JavaScript
 class Frame {
     left: number      // left offset of frame, pixels
     top: number       // top offset of frame, pixels
@@ -79,10 +126,10 @@ class Frame {
     // Methods
     createImage(): Promise // create imageElement for this frame
 }
-````
+```
 ### Player
 Player renders APNG frames on given rendering context and plays APNG animation.
-````
+```JavaScript
 class Player {
     context: CanvasRenderingContext2D
     playbackRate: number = 1.0 // animation playback rate
@@ -100,7 +147,7 @@ class Player {
     renderNextFrame()       // move to next frame and render it on context
                             // Use this method to manual, frame by frame, rendering.
 }
-````
+```
 
 Player object is an [EventEmitter](https://nodejs.org/api/events.html). You can listen to following events:
 

docs/index.js

@@ -115,6 +115,7 @@
 	  var reader = new FileReader();
 	  reader.onload = function () {
 	    var apng = (0, _parser2.default)(reader.result);
+	    console.log(reader.result);
 	    if (apng instanceof Error) {
 	      errDiv.appendChild(document.createTextNode(apng.message));
 	      errorBlock.classList.remove('hidden');
@@ -683,6 +684,7 @@
 	    _createClass(_class, [{
 	        key: 'renderNextFrame',
 	        value: function renderNextFrame() {
+	            this.emit('renderNextFrame');
 	            this._currentFrameNumber = (this._currentFrameNumber + 1) % this._apng.frames.length;
 	            if (this._currentFrameNumber === this._apng.frames.length - 1) {
 	                this._numPlays++;
@@ -1136,7 +1138,7 @@
 /* 7 */
 /***/ (function(module, exports, __webpack_require__) {
 
-	exports = module.exports = __webpack_require__(8)();
+	exports = module.exports = __webpack_require__(8)(false);
 	// imports
 
 
@@ -1155,21 +1157,19 @@
 		Author Tobias Koppers @sokra
 	*/
 	// css base code, injected by the css-loader
-	module.exports = function() {
+	module.exports = function(useSourceMap) {
 		var list = [];
 
 		// return the list of modules as css string
 		list.toString = function toString() {
-			var result = [];
-			for(var i = 0; i < this.length; i++) {
-				var item = this[i];
+			return this.map(function (item) {
+				var content = cssWithMappingToString(item, useSourceMap);
 				if(item[2]) {
-					result.push("@media " + item[2] + "{" + item[1] + "}");
+					return "@media " + item[2] + "{" + content + "}";
 				} else {
-					result.push(item[1]);
+					return content;
 				}
-			}
-			return result.join("");
+			}).join("");
 		};
 
 		// import a list of modules into the list
@@ -1201,6 +1201,34 @@
 		return list;
 	};
 
+	function cssWithMappingToString(item, useSourceMap) {
+		var content = item[1] || '';
+		var cssMapping = item[3];
+		if (!cssMapping) {
+			return content;
+		}
+
+		if (useSourceMap && typeof btoa === 'function') {
+			var sourceMapping = toComment(cssMapping);
+			var sourceURLs = cssMapping.sources.map(function (source) {
+				return '/*# sourceURL=' + cssMapping.sourceRoot + source + ' */'
+			});
+
+			return [content].concat(sourceURLs).concat([sourceMapping]).join('\n');
+		}
+
+		return [content].join('\n');
+	}
+
+	// Adapted from convert-source-map (MIT)
+	function toComment(sourceMap) {
+		// eslint-disable-next-line no-undef
+		var base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))));
+		var data = 'sourceMappingURL=data:application/json;charset=utf-8;base64,' + base64;
+
+		return '/*# ' + data + ' */';
+	}
+
 
 /***/ }),
 /* 9 */