From b21a35258bbe86f066e8b59b547e5cbe0f94b2c8 Mon Sep 17 00:00:00 2001
From: Fred Chasen <fchasen@gmail.com>
Date: Tue, 13 Dec 2016 13:39:37 +0100
Subject: [PATCH] Fix passing events from Contents to Renderer

---
 package.json     |  2 +-
 src/contents.js  | 25 +++++++++++++++----------
 src/rendition.js | 28 ++++++++++++++++------------
 src/themes.js    |  9 ++++-----
 4 files changed, 36 insertions(+), 28 deletions(-)

diff --git a/package.json b/package.json
index 733625b..63ec45b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "epubjs",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "description": "Parse and Render Epubs",
   "main": "lib/index.js",
   "jsnext:main": "src/index.js",
diff --git a/src/contents.js b/src/contents.js
index 6247a0b..6eba0b0 100644
--- a/src/contents.js
+++ b/src/contents.js
@@ -4,6 +4,9 @@ import EpubCFI from "./epubcfi";
 import Mapping from "./mapping";
 import {replaceLinks} from "./utils/replacements";
 
+// Dom events to listen for
+const EVENTS = ["keydown", "keyup", "keypressed", "mouseup", "mousedown", "click", "touchend", "touchstart"];
+
 class Contents {
 	constructor(doc, content, cfiBase) {
 		// Blank Cfi for Parsing
@@ -13,8 +16,6 @@ class Contents {
 		this.documentElement =  this.document.documentElement;
 		this.content = content || this.document.body;
 		this.window = this.document.defaultView;
-		// Dom events to listen for
-		this.listenedEvents = ["keydown", "keyup", "keypressed", "mouseup", "mousedown", "click", "touchend", "touchstart"];
 
 		this._size = {
 			width: 0,
@@ -26,6 +27,10 @@ class Contents {
 		this.listeners();
 	}
 
+	static get listenedEvents() {
+		return EVENTS;
+	}
+
 	width(w) {
 		// var frame = this.documentElement;
 		var frame = this.content;
@@ -263,6 +268,7 @@ class Contents {
 
 		this.resizeListeners();
 
+		this.linksHandler();
 	}
 
 	removeListeners() {
@@ -549,7 +555,8 @@ class Contents {
 		if(!this.document) {
 			return;
 		}
-		this.listenedEvents.forEach(function(eventName){
+
+		EVENTS.forEach(function(eventName){
 			this.document.addEventListener(eventName, this.triggerEvent.bind(this), false);
 		}, this);
 
@@ -559,7 +566,7 @@ class Contents {
 		if(!this.document) {
 			return;
 		}
-		this.listenedEvents.forEach(function(eventName){
+		EVENTS.forEach(function(eventName){
 			this.document.removeEventListener(eventName, this.triggerEvent, false);
 		}, this);
 
@@ -698,12 +705,10 @@ class Contents {
 		return mapping.page(this, cfiBase, start, end);
 	}
 
-	linksHandler(fn) {
-		replaceLinks(this.content, fn);
-	}
-
-	passEvents() {
-
+	linksHandler() {
+		replaceLinks(this.content, (href) => {
+			this.emit("link", href);
+		});
 	}
 
 	destroy() {
diff --git a/src/rendition.js b/src/rendition.js
index 87b5723..87c7fd7 100644
--- a/src/rendition.js
+++ b/src/rendition.js
@@ -6,6 +6,7 @@ import Queue from "./utils/queue";
 import Layout from "./layout";
 import Mapping from "./mapping";
 import Themes from "./themes";
+import Contents from "./contents";
 
 /**
  * [Rendition description]
@@ -67,7 +68,8 @@ class Rendition {
 		this.hooks.show = new Hook(this);
 
 		this.hooks.content.register(this.handleLinks.bind(this));
-		this.hooks.content.register(this.passViewEvents.bind(this));
+		this.hooks.content.register(this.passEvents.bind(this));
+		this.hooks.content.register(this.adjustImages.bind(this));
 
 		// this.hooks.display.register(this.afterDisplay.bind(this));
 		this.themes = new Themes(this);
@@ -306,7 +308,7 @@ class Rendition {
 	 * @param  {*} view
 	 */
 	afterDisplayed(view){
-		this.hooks.content.trigger(view, this);
+		this.hooks.content.trigger(view.contents, this);
 		this.emit("rendered", view.section);
 		this.reportLocation();
 	}
@@ -521,12 +523,14 @@ class Rendition {
 	 * @private
 	 * @param  {View} view
 	 */
-	passViewEvents(view){
-		view.contents.listenedEvents.forEach(function(e){
-			view.on(e, this.triggerViewEvent.bind(this));
+	passEvents(contents){
+		var listenedEvents = Contents.listenedEvents;
+
+		listenedEvents.forEach(function(e){
+			contents.on(e, this.triggerViewEvent.bind(this));
 		}.bind(this));
 
-		view.on("selected", this.triggerSelectedEvent.bind(this));
+		contents.on("selected", this.triggerSelectedEvent.bind(this));
 	}
 
 	/**
@@ -569,12 +573,12 @@ class Rendition {
 	 * Hook to adjust images to fit in columns
 	 * @param  {View} view
 	 */
-	adjustImages(view) {
+	adjustImages(contents) {
 
-		view.addStylesheetRules([
+		contents.addStylesheetRules([
 			["img",
-				["max-width", (view.layout.spreadWidth) + "px"],
-				["max-height", (view.layout.height) + "px"]
+				["max-width", (this._layout.spreadWidth) + "px"],
+				["max-height", (this._layout.height) + "px"]
 			]
 		]);
 		return new Promise(function(resolve, reject){
@@ -589,8 +593,8 @@ class Rendition {
 		return this.manager ? this.manager.getContents() : [];
 	}
 
-	handleLinks(view) {
-		view.contents.linksHandler((href) => {
+	handleLinks(contents) {
+		contents.on("link", (href) => {
 			let relative = this.book.path.relative(href);
 			this.display(relative);
 		});
diff --git a/src/themes.js b/src/themes.js
index a056a4e..4547f8b 100644
--- a/src/themes.js
+++ b/src/themes.js
@@ -91,7 +91,7 @@ class Themes {
 		});
 	}
 
-	inject (view) {
+	inject (contents) {
 		var links = [];
 		var themes = this._themes;
 		var theme;
@@ -100,13 +100,13 @@ class Themes {
 			if (themes.hasOwnProperty(name)) {
 				theme = themes[name];
 				if(theme.rules || (theme.url && links.indexOf(theme.url) === -1)) {
-					this.add(name, view.contents);
+					this.add(name, contents);
 				}
 			}
 		}
 
 		if(this._current) {
-			view.contents.addClass(this._current);
+			contents.addClass(this._current);
 		}
 	}
 
@@ -137,8 +137,7 @@ class Themes {
 		});
 	}
 
-	overrides (view) {
-		var contents = view.contents;
+	overrides (contents) {
 		var overrides = this._overrides;
 
 		for (var rule in overrides) {