From 68956abeb9921d74d1984c168399f596c152ccd0 Mon Sep 17 00:00:00 2001 From: Fred Chasen Date: Fri, 3 Nov 2017 16:29:03 -0700 Subject: [PATCH] Move all Event names to Constants file (#680) * Added Events Constants * Fix selected event * Fix EVENT -> EVENTS typo * Fix RESIZED -> RESIZE typo --- src/book.js | 4 +-- src/contents.js | 20 ++++++------- src/locations.js | 3 +- src/managers/continuous/index.js | 21 +++++++------- src/managers/default/index.js | 23 ++++++++------- src/managers/views/iframe.js | 27 ++++++++--------- src/managers/views/inline.js | 13 +++++---- src/rendition.js | 47 +++++++++++++++--------------- src/utils/constants.js | 50 ++++++++++++++++++++++++++++++++ 9 files changed, 131 insertions(+), 77 deletions(-) create mode 100644 src/utils/constants.js diff --git a/src/book.js b/src/book.js index 4ebca38..d9ca2ad 100644 --- a/src/book.js +++ b/src/book.js @@ -14,6 +14,7 @@ import Rendition from "./rendition"; import Archive from "./archive"; import request from "./utils/request"; import EpubCFI from "./epubcfi"; +import { EVENTS } from "./utils/constants"; const CONTAINER_PATH = "META-INF/container.xml"; const EPUBJS_VERSION = "0.3"; @@ -169,8 +170,7 @@ class Book { if(url) { this.open(url).catch((error) => { var err = new Error("Cannot load book at "+ url ); - // console.error(err); - this.emit("openFailed", err); + this.emit(EVENTS.BOOK.OPEN_FAILED, err); }); } } diff --git a/src/contents.js b/src/contents.js index 9c097b6..7d16b1f 100644 --- a/src/contents.js +++ b/src/contents.js @@ -3,9 +3,7 @@ import {isNumber, prefixed, borders, defaults} from "./utils/core"; 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"]; +import { EVENTS, DOM_EVENTS } from "./utils/constants"; const isChrome = /Chrome/.test(navigator.userAgent); const isWebkit = !isChrome && /AppleWebKit/.test(navigator.userAgent); @@ -37,7 +35,7 @@ class Contents { } static get listenedEvents() { - return EVENTS; + return DOM_EVENTS; } width(w) { @@ -313,7 +311,7 @@ class Contents { // }; expand() { - this.emit("expand"); + this.emit(EVENTS.CONTENTS.EXPAND); } listeners() { @@ -358,7 +356,7 @@ class Contents { }; this.onResize && this.onResize(this._size); - this.emit("resize", this._size); + this.emit(EVENTS.CONTENTS.RESIZE, this._size); } } @@ -677,7 +675,7 @@ class Contents { return; } - EVENTS.forEach(function(eventName){ + DOM_EVENTS.forEach(function(eventName){ this.document.addEventListener(eventName, this.triggerEvent.bind(this), false); }, this); @@ -687,7 +685,7 @@ class Contents { if(!this.document) { return; } - EVENTS.forEach(function(eventName){ + DOM_EVENTS.forEach(function(eventName){ this.document.removeEventListener(eventName, this.triggerEvent, false); }, this); @@ -730,8 +728,8 @@ class Contents { if(!range.collapsed) { // cfirange = this.section.cfiFromRange(range); cfirange = new EpubCFI(range, this.cfiBase).toString(); - this.emit("selected", cfirange); - this.emit("selectedRange", range); + this.emit(EVENTS.CONTENTS.SELECTED, cfirange); + this.emit(EVENTS.CONTENTS.SELECTED_RANGE, range); } } } @@ -859,7 +857,7 @@ class Contents { linksHandler() { replaceLinks(this.content, (href) => { - this.emit("linkClicked", href); + this.emit(EVENTS.CONTENTS.LINK_CLICKED, href); }); } diff --git a/src/locations.js b/src/locations.js index e59ce03..4393e15 100644 --- a/src/locations.js +++ b/src/locations.js @@ -1,6 +1,7 @@ import {qs, sprint, locationOf, defer} from "./utils/core"; import Queue from "./utils/queue"; import EpubCFI from "./epubcfi"; +import { EVENTS } from "./utils/constants"; import EventEmitter from "event-emitter"; /** @@ -278,7 +279,7 @@ class Locations { loc = curr; } - this.emit("changed", { + this.emit(EVENTS.LOCATIONS.CHANGED, { percentage: this.percentageFromLocation(loc) }); } diff --git a/src/managers/continuous/index.js b/src/managers/continuous/index.js index 2084ad9..22cd303 100644 --- a/src/managers/continuous/index.js +++ b/src/managers/continuous/index.js @@ -1,5 +1,6 @@ import {extend, defer, requestAnimationFrame} from "../../utils/core"; import DefaultViewManager from "../default"; +import { EVENTS } from "../../utils/constants"; import debounce from 'lodash/debounce' class ContinuousViewManager extends DefaultViewManager { @@ -119,7 +120,7 @@ class ContinuousViewManager extends DefaultViewManager { // } afterResized(view){ - this.emit("resize", view.section); + this.emit(EVENTS.MANAGERS.RESIZE, view.section); } // Remove Previous Listeners if present @@ -155,15 +156,15 @@ class ContinuousViewManager extends DefaultViewManager { this.views.append(view); - view.on("resized", (bounds) => { + view.on(EVENTS.VIEWS.RESIZED, (bounds) => { view.expanded = true; }); - view.on("axis", (axis) => { + view.on(EVENTS.VIEWS.AXIS, (axis) => { this.updateAxis(axis); }); - // view.on("shown", this.afterDisplayed.bind(this)); + // view.on(EVENTS.VIEWS.SHOWN, this.afterDisplayed.bind(this)); view.onDisplayed = this.afterDisplayed.bind(this); view.onResize = this.afterResized.bind(this); @@ -173,11 +174,11 @@ class ContinuousViewManager extends DefaultViewManager { append(section){ var view = this.createView(section); - view.on("resized", (bounds) => { + view.on(EVENTS.VIEWS.RESIZED, (bounds) => { view.expanded = true; }); - view.on("axis", (axis) => { + view.on(EVENTS.VIEWS.AXIS, (axis) => { this.updateAxis(axis); }); @@ -191,12 +192,12 @@ class ContinuousViewManager extends DefaultViewManager { prepend(section){ var view = this.createView(section); - view.on("resized", (bounds) => { + view.on(EVENTS.VIEWS.RESIZED, (bounds) => { this.counter(bounds); view.expanded = true; }); - view.on("axis", (axis) => { + view.on(EVENTS.VIEWS.AXIS, (axis) => { this.updateAxis(axis); }); @@ -493,14 +494,14 @@ class ContinuousViewManager extends DefaultViewManager { this.check(); }.bind(this)); - this.emit("scroll", { + this.emit(EVENTS.MANAGERS.SCROLL, { top: this.scrollTop, left: this.scrollLeft }); clearTimeout(this.afterScrolled); this.afterScrolled = setTimeout(function () { - this.emit("scrolled", { + this.emit(EVENTS.MANAGERS.SCROLLED, { top: this.scrollTop, left: this.scrollLeft }); diff --git a/src/managers/default/index.js b/src/managers/default/index.js index 797a3f1..6edbd00 100644 --- a/src/managers/default/index.js +++ b/src/managers/default/index.js @@ -4,6 +4,7 @@ import Mapping from "../../mapping"; import Queue from "../../utils/queue"; import Stage from "../helpers/stage"; import Views from "../helpers/views"; +import { EVENTS } from "../../utils/constants"; class DefaultViewManager { constructor(options) { @@ -167,7 +168,7 @@ class DefaultViewManager { this.orientationTimeout = setTimeout(function(){ this.orientationTimeout = undefined; this.resize(); - this.emit("orientationchange", orientation); + this.emit(EVENTS.MANAGERS.ORIENTATION_CHANGE, orientation); }.bind(this), 500); } @@ -209,7 +210,7 @@ class DefaultViewManager { this.updateLayout(); - this.emit("resized", { + this.emit(EVENTS.MANAGERS.RESIZED, { width: this._stageSize.width, height: this._stageSize.height }); @@ -294,11 +295,11 @@ class DefaultViewManager { } afterDisplayed(view){ - this.emit("added", view); + this.emit(EVENTS.MANAGERS.ADDED, view); } afterResized(view){ - this.emit("resize", view.section); + this.emit(EVENTS.MANAGERS.RESIZE, view.section); } moveTo(offset){ @@ -322,11 +323,11 @@ class DefaultViewManager { this.views.append(view); - // view.on("shown", this.afterDisplayed.bind(this)); + // view.on(EVENTS.VIEWS.SHOWN, this.afterDisplayed.bind(this)); view.onDisplayed = this.afterDisplayed.bind(this); view.onResize = this.afterResized.bind(this); - view.on("axis", (axis) => { + view.on(EVENTS.VIEWS.AXIS, (axis) => { this.updateAxis(axis); }); @@ -341,7 +342,7 @@ class DefaultViewManager { view.onDisplayed = this.afterDisplayed.bind(this); view.onResize = this.afterResized.bind(this); - view.on("axis", (axis) => { + view.on(EVENTS.VIEWS.AXIS, (axis) => { this.updateAxis(axis); }); @@ -351,7 +352,7 @@ class DefaultViewManager { prepend(section){ var view = this.createView(section); - view.on("resized", (bounds) => { + view.on(EVENTS.VIEWS.RESIZED, (bounds) => { this.counter(bounds); }); @@ -360,7 +361,7 @@ class DefaultViewManager { view.onDisplayed = this.afterDisplayed.bind(this); view.onResize = this.afterResized.bind(this); - view.on("axis", (axis) => { + view.on(EVENTS.VIEWS.AXIS, (axis) => { this.updateAxis(axis); }); @@ -771,14 +772,14 @@ class DefaultViewManager { this.scrollLeft = scrollLeft; if(!this.ignore) { - this.emit("scroll", { + this.emit(EVENTS.MANAGERS.SCROLL, { top: scrollTop, left: scrollLeft }); clearTimeout(this.afterScrolled); this.afterScrolled = setTimeout(function () { - this.emit("scrolled", { + this.emit(EVENTS.MANAGERS.SCROLLED, { top: this.scrollTop, left: this.scrollLeft }); diff --git a/src/managers/views/iframe.js b/src/managers/views/iframe.js index e5cb8b8..067d25a 100644 --- a/src/managers/views/iframe.js +++ b/src/managers/views/iframe.js @@ -2,6 +2,7 @@ import EventEmitter from "event-emitter"; import {extend, borders, uuid, isNumber, bounds, defer, createBlobUrl, revokeBlobUrl} from "../../utils/core"; import EpubCFI from "../../epubcfi"; import Contents from "../../contents"; +import { EVENTS } from "../../utils/constants"; import { Pane, Highlight, Underline } from "marks-pane"; class IframeView { @@ -154,7 +155,7 @@ class IframeView { let writingMode = this.contents.writingMode(); let axis = (writingMode.indexOf("vertical") === 0) ? "vertical" : "horizontal"; this.setAxis(axis); - this.emit("axis", axis); + this.emit(EVENTS.VIEWS.AXIS, axis); // Listen for events that require an expansion of the iframe @@ -167,13 +168,13 @@ class IframeView { }); }.bind(this), function(e){ - this.emit("loaderror", e); + this.emit(EVENTS.VIEWS.LOAD_ERROR, e); return new Promise((resolve, reject) => { reject(e); }); }.bind(this)) .then(function() { - this.emit("rendered", this.section); + this.emit(EVENTS.VIEWS.RENDERED, this.section); }.bind(this)); } @@ -326,7 +327,7 @@ class IframeView { this.onResize(this, size); - this.emit("resized", size); + this.emit(EVENTS.VIEWS.RESIZED, size); this.prevBounds = size; @@ -390,7 +391,7 @@ class IframeView { this.document.querySelector("head").appendChild(link); } - this.contents.on("expand", () => { + this.contents.on(EVENTS.CONTENTS.EXPAND, () => { if(this.displayed && this.iframe) { this.expand(); if (this.contents) { @@ -399,7 +400,7 @@ class IframeView { } }); - this.contents.on("resize", (e) => { + this.contents.on(EVENTS.CONTENTS.RESIZE, (e) => { if(this.displayed && this.iframe) { this.expand(); if (this.contents) { @@ -450,7 +451,7 @@ class IframeView { this.render(request) .then(function () { - this.emit("displayed", this); + this.emit(EVENTS.VIEWS.DISPLAYED, this); this.onDisplayed(this); this.displayed = true; @@ -476,7 +477,7 @@ class IframeView { this.iframe.style.visibility = "visible"; } - this.emit("shown", this); + this.emit(EVENTS.VIEWS.SHOWN, this); } hide() { @@ -485,7 +486,7 @@ class IframeView { this.iframe.style.visibility = "hidden"; this.stopExpanding = true; - this.emit("hidden", this); + this.emit(EVENTS.VIEWS.HIDDEN, this); } offset() { @@ -539,7 +540,7 @@ class IframeView { let range = this.contents.range(cfiRange); let emitter = () => { - this.emit("markClicked", cfiRange, data); + this.emit(EVENTS.VIEWS.MARK_CLICKED, cfiRange, data); }; data["epubcfi"] = cfiRange; @@ -570,7 +571,7 @@ class IframeView { } let range = this.contents.range(cfiRange); let emitter = () => { - this.emit("markClicked", cfiRange, data); + this.emit(EVENTS.VIEWS.MARK_CLICKED, cfiRange, data); }; data["epubcfi"] = cfiRange; @@ -614,7 +615,7 @@ class IframeView { let parent = (container.nodeType === 1) ? container : container.parentNode; let emitter = (e) => { - this.emit("markClicked", cfiRange, data); + this.emit(EVENTS.VIEWS.MARK_CLICKED, cfiRange, data); }; if (range.collapsed && container.nodeType === 1) { @@ -738,7 +739,7 @@ class IframeView { this.stopExpanding = true; this.element.removeChild(this.iframe); - this.displayed = false; + this.iframe = null; this._textWidth = null; diff --git a/src/managers/views/inline.js b/src/managers/views/inline.js index c260dbc..072b586 100644 --- a/src/managers/views/inline.js +++ b/src/managers/views/inline.js @@ -2,6 +2,7 @@ import EventEmitter from "event-emitter"; import {extend, borders, uuid, isNumber, bounds, defer, qs, parse} from "../../utils/core"; import EpubCFI from "../../epubcfi"; import Contents from "../../contents"; +import { EVENTS } from "../../utils/constants"; class InlineView { constructor(section, options) { @@ -148,11 +149,11 @@ class InlineView { } // this.map = new Map(view, this.layout); //this.hooks.show.trigger(view, this); - this.emit("rendered", this.section); + this.emit(EVENTS.VIEWS.RENDERED, this.section); }.bind(this)) .catch(function(e){ - this.emit("loaderror", e); + this.emit(EVENTS.VIEWS.LOAD_ERROR, e); }.bind(this)); } @@ -270,7 +271,7 @@ class InlineView { this.onResize(this, size); - this.emit("resized", size); + this.emit(EVENTS.VIEWS.RESIZED, size); } @@ -338,7 +339,7 @@ class InlineView { this.render(request).then(function () { - this.emit("displayed", this); + this.emit(EVENTS.VIEWS.DISPLAYED, this); this.onDisplayed(this); this.displayed = true; @@ -363,7 +364,7 @@ class InlineView { this.frame.style.visibility = "visible"; } - this.emit("shown", this); + this.emit(EVENTS.VIEWS.SHOWN, this); } hide() { @@ -372,7 +373,7 @@ class InlineView { this.frame.style.visibility = "hidden"; this.stopExpanding = true; - this.emit("hidden", this); + this.emit(EVENTS.VIEWS.HIDDEN, this); } position() { diff --git a/src/rendition.js b/src/rendition.js index 85a4556..8536230 100644 --- a/src/rendition.js +++ b/src/rendition.js @@ -8,6 +8,7 @@ import Layout from "./layout"; import Themes from "./themes"; import Contents from "./contents"; import Annotations from "./annotations"; +import { EVENTS } from "./utils/constants"; /** * [Rendition description] @@ -174,20 +175,20 @@ class Rendition { this.layout(this.settings.globalLayoutProperties); // Listen for displayed views - this.manager.on("added", this.afterDisplayed.bind(this)); - this.manager.on("removed", this.afterRemoved.bind(this)); + this.manager.on(EVENTS.MANAGERS.ADDED, this.afterDisplayed.bind(this)); + this.manager.on(EVENTS.MANAGERS.REMOVED, this.afterRemoved.bind(this)); // Listen for resizing - this.manager.on("resized", this.onResized.bind(this)); + this.manager.on(EVENTS.MANAGERS.RESIZED, this.onResized.bind(this)); // Listen for rotation - this.manager.on("orientationchange", this.onOrientationChange.bind(this)); + this.manager.on(EVENTS.MANAGERS.ORIENTATION_CHANGE, this.onOrientationChange.bind(this)); // Listen for scroll changes - this.manager.on("scrolled", this.reportLocation.bind(this)); + this.manager.on(EVENTS.MANAGERS.SCROLLED, this.reportLocation.bind(this)); // Trigger that rendering has started - this.emit("started"); + this.emit(EVENTS.RENDITION.STARTED); // Start processing queue this.starting.resolve(); @@ -210,7 +211,7 @@ class Rendition { }); // Trigger Attached - this.emit("attached"); + this.emit(EVENTS.RENDITION.ATTACHED); }.bind(this)); @@ -269,10 +270,10 @@ class Rendition { displaying.resolve(section); this.displaying = undefined; - this.emit("displayed", section); + this.emit(EVENTS.RENDITION.DISPLAYED, section); this.reportLocation(); }, (err) => { - this.emit("displayerror", err); + this.emit(EVENTS.RENDITION.DISPLAY_ERROR, err); }); return displayed; @@ -330,16 +331,16 @@ class Rendition { */ afterDisplayed(view){ - view.on("markClicked", (cfiRange, data) => this.triggerMarkEvent(cfiRange, data, view)); + view.on(EVENTS.VIEWS.MARK_CLICKED, (cfiRange, data) => this.triggerMarkEvent(cfiRange, data, view)); this.hooks.render.trigger(view, this) .then(() => { if (view.contents) { this.hooks.content.trigger(view.contents, this).then(() => { - this.emit("rendered", view.section, view); + this.emit(EVENTS.RENDITION.RENDERED, view.section, view); }); } else { - this.emit("rendered", view.section, view); + this.emit(EVENTS.RENDITION.RENDERED, view.section, view); } }); @@ -353,7 +354,7 @@ class Rendition { */ afterRemoved(view){ this.hooks.unloaded.trigger(view, this).then(() => { - this.emit("removed", view.section, view); + this.emit(EVENTS.RENDITION.REMOVED, view.section, view); }); } @@ -363,7 +364,7 @@ class Rendition { */ onResized(size){ - this.emit("resized", { + this.emit(EVENTS.RENDITION.RESIZED, { width: size.width, height: size.height }); @@ -384,7 +385,7 @@ class Rendition { // this.display(this.location.start.cfi); // } - this.emit("orientationchange", orientation); + this.emit(EVENTS.RENDITION.ORIENTATION_CHANGE, orientation); } /** @@ -563,7 +564,7 @@ class Rendition { this.location = located; - this.emit("locationChanged", { + this.emit(EVENTS.RENDITION.LOCATION_CHANGED, { index: this.location.start.index, href: this.location.start.href, start: this.location.start.cfi, @@ -571,7 +572,7 @@ class Rendition { percentage: this.location.start.percentage }); - this.emit("relocated", this.location); + this.emit(EVENTS.RENDITION.RELOCATED, this.location); }.bind(this)); } else if (location) { let located = this.located(location); @@ -582,7 +583,7 @@ class Rendition { this.location = located; - this.emit("locationChanged", { + this.emit(EVENTS.RENDITION.LOCATION_CHANGED, { index: this.location.start.index, href: this.location.start.href, start: this.location.start.cfi, @@ -590,7 +591,7 @@ class Rendition { percentage: this.location.start.percentage }); - this.emit("relocated", this.location); + this.emit(EVENTS.RENDITION.RELOCATED, this.location); } }.bind(this)); }.bind(this)); @@ -721,7 +722,7 @@ class Rendition { contents.on(e, (ev) => this.triggerViewEvent(ev, contents)); }); - contents.on("selected", (e) => this.triggerSelectedEvent(e, contents)); + contents.on(EVENTS.CONTENTS.SELECTED, (e) => this.triggerSelectedEvent(e, contents)); } /** @@ -739,7 +740,7 @@ class Rendition { * @param {EpubCFI} cfirange */ triggerSelectedEvent(cfirange, contents){ - this.emit("selected", cfirange, contents); + this.emit(EVENTS.RENDITION.SELECTED, cfirange, contents); } /** @@ -748,7 +749,7 @@ class Rendition { * @param {EpubCFI} cfirange */ triggerMarkEvent(cfiRange, data, contents){ - this.emit("markClicked", cfiRange, data, contents); + this.emit(EVENTS.RENDITION.MARK_CLICKED, cfiRange, data, contents); } /** @@ -809,7 +810,7 @@ class Rendition { handleLinks(contents) { if (contents) { - contents.on("linkClicked", (href) => { + contents.on(EVENTS.CONTENTS.LINK_CLICKED, (href) => { let relative = this.book.path.relative(href); this.display(relative); }); diff --git a/src/utils/constants.js b/src/utils/constants.js new file mode 100644 index 0000000..2c53f5c --- /dev/null +++ b/src/utils/constants.js @@ -0,0 +1,50 @@ +// Dom events to listen for +export const DOM_EVENTS = ["keydown", "keyup", "keypressed", "mouseup", "mousedown", "click", "touchend", "touchstart"]; + +export const EVENTS = { + BOOK : { + OPEN_FAILED : "openFailed" + }, + CONTENTS : { + EXPAND : "expand", + RESIZE : "resize", + SELECTED : "selected", + SELECTED_RANGE : "selectedRange", + LINK_CLICKED : "linkClicked" + }, + LOCATIONS : { + CHANGED : "changed" + }, + MANAGERS : { + RESIZE : "resize", + RESIZED : "resized", + ORIENTATION_CHANGE : "orientationchange", + ADDED : "added", + SCROLL : "scroll", + SCROLLED : "scrolled" + }, + VIEWS : { + AXIS : "axis", + LOAD_ERROR : "loaderror", + RENDERED : "rendered", + RESIZED : "resized", + DISPLAYED : "displayed", + SHOWN : "shown", + HIDDEN : "hidden", + MARK_CLICKED : "markClicked" + }, + RENDITION : { + STARTED : "started", + ATTACHED : "attached", + DISPLAYED : "displayed", + DISPLAY_ERROR : "displayerror", + RENDERED : "rendered", + REMOVED : "removed", + RESIZED : "resized", + ORIENTATION_CHANGE : "orientationchange", + LOCATION_CHANGED : "locationChanged", + RELOCATED : "relocated", + MARK_CLICKED : "markClicked", + SELECTED : "selected" + } +}