yetangitu/epub.js
1
0
Fork 0
mirror of https://github.com/futurepress/epub.js.git synced 2025-10-03 14:59:18 +02:00
Code Issues Releases Wiki Activity

Update listener removal, stage size and update snap on flow change

Browse source
This commit is contained in:
Fred Chasen 2018-11-15 15:19:20 -08:00
parent c9846f5b90
commit ae4a10bc25
6 changed files with 111 additions and 78 deletions
Download patch file Download diff file Expand all files Collapse all files

19
src/contents.js
View file

@ -466,7 +466,8 @@ class Contents {
body.style['transitionTimingFunction'] = "linear"; body.style['transitionTimingFunction'] = "linear";
body.style['transitionDelay'] = "0"; body.style['transitionDelay'] = "0";
this.document.addEventListener('transitionend', this.resizeCheck.bind(this)); this._resizeCheck = this.resizeCheck.bind(this);
this.document.addEventListener('transitionend', this._resizeCheck);
} }
/** /**
@ -813,8 +814,10 @@ class Contents {
return; return;
} }
this._triggerEvent = this.triggerEvent.bind(this);
DOM_EVENTS.forEach(function(eventName){ DOM_EVENTS.forEach(function(eventName){
this.document.addEventListener(eventName, this.triggerEvent.bind(this), { passive: true }); this.document.addEventListener(eventName, this._triggerEvent, { passive: true });
}, this); }, this);
} }
@ -828,9 +831,9 @@ class Contents {
return; return;
} }
DOM_EVENTS.forEach(function(eventName){ DOM_EVENTS.forEach(function(eventName){
this.document.removeEventListener(eventName, this.triggerEvent, false); this.document.removeEventListener(eventName, this._triggerEvent, { passive: true });
}, this); }, this);
this._triggerEvent = undefined;
} }
/** /**
@ -849,7 +852,8 @@ class Contents {
if(!this.document) { if(!this.document) {
return; return;
} }
this.document.addEventListener("selectionchange", this.onSelectionChange.bind(this), false); this._onSelectionChange = this.onSelectionChange.bind(this);
this.document.addEventListener("selectionchange", this._onSelectionChange, { passive: true });
} }
/** /**
@ -860,7 +864,8 @@ class Contents {
if(!this.document) { if(!this.document) {
return; return;
} }
this.document.removeEventListener("selectionchange", this.onSelectionChange, false); this.document.removeEventListener("selectionchange", this._onSelectionChange, { passive: true });
this._onSelectionChange = undefined;
} }
/** /**
@ -1156,7 +1161,7 @@ class Contents {
this.observer.disconnect(); this.observer.disconnect();
} }
this.document.removeEventListener('transitionend', this.resizeCheck); this.document.removeEventListener('transitionend', this._resizeCheck);
this.removeListeners(); this.removeListeners();

57
src/managers/continuous/index.js
View file

@ -129,11 +129,9 @@ class ContinuousViewManager extends DefaultViewManager {
view.expanded = true; view.expanded = true;
}); });
/*
view.on(EVENTS.VIEWS.AXIS, (axis) => { view.on(EVENTS.VIEWS.AXIS, (axis) => {
this.updateAxis(axis); this.updateAxis(axis);
}); });
*/
this.views.append(view); this.views.append(view);
@ -150,11 +148,9 @@ class ContinuousViewManager extends DefaultViewManager {
view.expanded = true; view.expanded = true;
}); });
/*
view.on(EVENTS.VIEWS.AXIS, (axis) => { view.on(EVENTS.VIEWS.AXIS, (axis) => {
this.updateAxis(axis); this.updateAxis(axis);
}); });
*/
this.views.prepend(view); this.views.prepend(view);
@ -406,7 +402,8 @@ class ContinuousViewManager extends DefaultViewManager {
this.scrollLeft = window.scrollX; this.scrollLeft = window.scrollX;
} }
scroller.addEventListener("scroll", this.onScroll.bind(this)); this._onScroll = this.onScroll.bind(this);
scroller.addEventListener("scroll", this._onScroll);
this._scrolled = debounce(this.scrolled.bind(this), 30); this._scrolled = debounce(this.scrolled.bind(this), 30);
// this.tick.call(window, this.onScroll.bind(this)); // this.tick.call(window, this.onScroll.bind(this));
@ -423,7 +420,8 @@ class ContinuousViewManager extends DefaultViewManager {
scroller = window; scroller = window;
} }
scroller.removeEventListener("scroll", this.onScroll.bind(this)); scroller.removeEventListener("scroll", this._onScroll);
this._onScroll = undefined;
} }
onScroll(){ onScroll(){
@ -483,7 +481,7 @@ class ContinuousViewManager extends DefaultViewManager {
this.afterScrolled = setTimeout(function () { this.afterScrolled = setTimeout(function () {
// Don't report scroll if we are about the snap // Don't report scroll if we are about the snap
if (this.snapper && this.snapper.needsSnap()) { if (this.snapper && this.snapper.supportsTouch && this.snapper.needsSnap()) {
return; return;
} }
@ -541,38 +539,27 @@ class ContinuousViewManager extends DefaultViewManager {
}.bind(this)); }.bind(this));
} }
updateAxis(axis, forceUpdate){ // updateAxis(axis, forceUpdate){
//
// super.updateAxis(axis, forceUpdate);
//
// if (axis === "vertical") {
// this.settings.infinite = true;
// } else {
// this.settings.infinite = false;
// }
// }
if (!this.isPaginated) { updateFlow(flow){
axis = "vertical"; if (this.rendered && this.snapper) {
this.snapper.destroy();
this.snapper = undefined;
} }
if (!forceUpdate && axis === this.settings.axis) { super.updateFlow(flow);
return;
}
this.settings.axis = axis; if (this.rendered && this.isPaginated && this.settings.snap) {
this.snapper = new Snap(this, this.settings.snap && (typeof this.settings.snap === "object") && this.settings.snap);
this.stage && this.stage.axis(axis);
this.viewSettings.axis = axis;
if (this.mapping) {
this.mapping.axis(axis);
}
if (this.layout) {
if (axis === "vertical") {
this.layout.spread("none");
} else {
this.layout.spread(this.layout.settings.spread);
}
}
if (axis === "vertical") {
this.settings.infinite = true;
} else {
this.settings.infinite = false;
} }
} }

13
src/managers/default/index.js
View file

@ -119,7 +119,8 @@ class DefaultViewManager {
scroller = window; scroller = window;
} }
scroller.addEventListener("scroll", this.onScroll.bind(this)); this._onScroll = this.onScroll.bind(this);
scroller.addEventListener("scroll", this._onScroll);
} }
removeEventListeners(){ removeEventListeners(){
@ -131,7 +132,8 @@ class DefaultViewManager {
scroller = window; scroller = window;
} }
scroller.removeEventListener("scroll", this.onScroll.bind(this)); scroller.removeEventListener("scroll", this._onScroll);
this._onScroll = undefined;
} }
destroy(){ destroy(){
@ -901,6 +903,8 @@ class DefaultViewManager {
flow === "scrolled-continuous" || flow === "scrolled-continuous" ||
flow === "scrolled") { flow === "scrolled") {
this.updateAxis("vertical"); this.updateAxis("vertical");
} else {
this.updateAxis("horizontal");
} }
this.viewSettings.flow = flow; this.viewSettings.flow = flow;
@ -910,9 +914,8 @@ class DefaultViewManager {
} else { } else {
this.overflow = this.settings.overflow; this.overflow = this.settings.overflow;
} }
// this.views.forEach(function(view){
// view.setAxis(axis); this.stage && this.stage.overflow(this.overflow);
// });
this.updateLayout(); this.updateLayout();

75
src/managers/helpers/snap.js
View file

@ -25,10 +25,6 @@ const EASING_EQUATIONS = {
class Snap { class Snap {
constructor(manager, options) { constructor(manager, options) {
if (this.supportsTouch() === false) {
return;
}
this.settings = extend({ this.settings = extend({
duration: 80, duration: 80,
minVelocity: 0.2, minVelocity: 0.2,
@ -36,7 +32,11 @@ class Snap {
easing: EASING_EQUATIONS['easeInCubic'] easing: EASING_EQUATIONS['easeInCubic']
}, options || {}); }, options || {});
this.setup(manager); this.supportsTouch = this.supportsTouch();
if (this.supportsTouch) {
this.setup(manager);
}
} }
setup(manager) { setup(manager) {
@ -55,8 +55,7 @@ class Snap {
this.element.style["WebkitOverflowScrolling"] = "touch"; this.element.style["WebkitOverflowScrolling"] = "touch";
} }
// this.overflow = this.manager.overflow;
this.overflow = this.manager.overflow;
// set lookahead offset to page width // set lookahead offset to page width
this.manager.settings.offset = this.layout.width; this.manager.settings.offset = this.layout.width;
@ -100,25 +99,53 @@ class Snap {
} }
enableScroll() { enableScroll() {
this.element.style.overflow = "scroll"; this.element.style.overflow = "";
} }
addListeners() { addListeners() {
this._onResize = this.onResize.bind(this);
window.addEventListener('resize', this._onResize);
window.addEventListener('resize', this.onResize.bind(this)); this._onScroll = this.onScroll.bind(this);
this.scroller.addEventListener('scroll', this._onScroll);
this.scroller.addEventListener('scroll', this.onScroll.bind(this)); this._onTouchStart = this.onTouchStart.bind(this);
this.scroller.addEventListener('touchstart', this._onTouchStart, { passive: true });
this.on('touchstart', this._onTouchStart);
window.addEventListener('touchstart', this.onTouchStart.bind(this), { passive: true }); this._onTouchMove = this.onTouchMove.bind(this);
this.on('touchstart', this.onTouchStart.bind(this)); this.scroller.addEventListener('touchmove', this._onTouchMove, { passive: true });
this.on('touchmove', this._onTouchMove);
window.addEventListener('touchmove', this.onTouchMove.bind(this), { passive: true }); this._onTouchEnd = this.onTouchEnd.bind(this);
this.on('touchmove', this.onTouchMove.bind(this)); this.scroller.addEventListener('touchend', this._onTouchEnd, { passive: true });
this.on('touchend', this._onTouchEnd);
window.addEventListener('touchend', this.onTouchEnd.bind(this), { passive: true }); this._afterDisplayed = this.afterDisplayed.bind(this);
this.on('touchend', this.onTouchEnd.bind(this)); this.manager.on(EVENTS.MANAGERS.ADDED, this._afterDisplayed);
}
this.manager.on(EVENTS.MANAGERS.ADDED, this.afterDisplayed.bind(this)); removeListeners() {
window.removeEventListener('resize', this._onResize);
this._onResize = undefined;
this.scroller.removeEventListener('scroll', this._onScroll);
this._onScroll = undefined;
this.scroller.removeEventListener('touchstart', this._onTouchStart, { passive: true });
this.off('touchstart', this._onTouchStart);
this._onTouchStart = undefined;
this.scroller.removeEventListener('touchmove', this._onTouchMove, { passive: true });
this.off('touchmove', this._onTouchMove);
this._onTouchMove = undefined;
this.scroller.removeEventListener('touchend', this._onTouchEnd, { passive: true });
this.off('touchend', this._onTouchEnd);
this._onTouchEnd = undefined;
this.manager.off(EVENTS.MANAGERS.ADDED, this._afterDisplayed);
this._afterDisplayed = undefined;
} }
afterDisplayed(view) { afterDisplayed(view) {
@ -292,15 +319,17 @@ class Snap {
} }
destroy() { destroy() {
this.scroller.removeEventListener('scroll', this.onScroll.bind(this)); if (!this.scroller) {
return;
}
window.removeEventListener('resize', this.onResize.bind(this)); if (this.fullsize) {
this.enableScroll();
}
window.removeEventListener('touchstart', this.onTouchStart.bind(this), { passive: true }); this.removeListeners();
window.removeEventListener('touchmove', this.onTouchMove.bind(this), { passive: true }); this.scroller = undefined;
window.removeEventListener('touchend', this.onTouchEnd.bind(this), { passive: true });
} }
} }

15
src/managers/helpers/stage.js
View file

@ -151,8 +151,8 @@ class Stage {
size(width, height){ size(width, height){
var bounds; var bounds;
// var width = _width || this.settings.width; let _width = width || this.settings.width;
// var height = _height || this.settings.height; let _height = height || this.settings.height;
// If width or height are set to false, inherit them from containing element // If width or height are set to false, inherit them from containing element
if(width === null) { if(width === null) {
@ -218,12 +218,13 @@ class Stage {
bottom: parseFloat(bodyStyles["padding-bottom"]) || 0 bottom: parseFloat(bodyStyles["padding-bottom"]) || 0
}; };
if (!width) { if (!_width) {
width = _windowBounds.width - width = _windowBounds.width -
bodyPadding.left - bodyPadding.left -
bodyPadding.right; bodyPadding.right;
} }
if ((this.settings.fullsize && !height) || !height) {
if ((this.settings.fullsize && !_height) || !_height) {
height = _windowBounds.height - height = _windowBounds.height -
bodyPadding.top - bodyPadding.top -
bodyPadding.bottom; bodyPadding.bottom;
@ -315,6 +316,12 @@ class Stage {
} }
} }
overflow(overflow) {
if (this.container) {
this.container.style["overflow"] = overflow;
}
}
destroy() { destroy() {
var base; var base;

10
src/store.js
View file

@ -55,8 +55,9 @@ class Store {
* @private * @private
*/ */
addListeners() { addListeners() {
window.addEventListener('online', this.status.bind(this)); this._status = this.status.bind(this);
window.addEventListener('offline', this.status.bind(this)); window.addEventListener('online', this._status);
window.addEventListener('offline', this._status);
} }
/** /**
@ -64,8 +65,9 @@ class Store {
* @private * @private
*/ */
removeListeners() { removeListeners() {
window.removeEventListener('online', this.status.bind(this)); window.removeEventListener('online', this._status);
window.removeEventListener('offline', this.status.bind(this)); window.removeEventListener('offline', this._status);
this._status = undefined;
} }
/** /**