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['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;
}
this._triggerEvent = this.triggerEvent.bind(this);
DOM_EVENTS.forEach(function(eventName){
this.document.addEventListener(eventName, this.triggerEvent.bind(this), { passive: true });
this.document.addEventListener(eventName, this._triggerEvent, { passive: true });
}, this);
}
@ -828,9 +831,9 @@ class Contents {
return;
}
DOM_EVENTS.forEach(function(eventName){
this.document.removeEventListener(eventName, this.triggerEvent, false);
this.document.removeEventListener(eventName, this._triggerEvent, { passive: true });
}, this);
this._triggerEvent = undefined;
}
/**
@ -849,7 +852,8 @@ class Contents {
if(!this.document) {
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) {
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.document.removeEventListener('transitionend', this.resizeCheck);
this.document.removeEventListener('transitionend', this._resizeCheck);
this.removeListeners();

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

@ -129,11 +129,9 @@ class ContinuousViewManager extends DefaultViewManager {
view.expanded = true;
});
/*
view.on(EVENTS.VIEWS.AXIS, (axis) => {
this.updateAxis(axis);
});
*/
this.views.append(view);
@ -150,11 +148,9 @@ class ContinuousViewManager extends DefaultViewManager {
view.expanded = true;
});
/*
view.on(EVENTS.VIEWS.AXIS, (axis) => {
this.updateAxis(axis);
});
*/
this.views.prepend(view);
@ -406,7 +402,8 @@ class ContinuousViewManager extends DefaultViewManager {
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.tick.call(window, this.onScroll.bind(this));
@ -423,7 +420,8 @@ class ContinuousViewManager extends DefaultViewManager {
scroller = window;
}
scroller.removeEventListener("scroll", this.onScroll.bind(this));
scroller.removeEventListener("scroll", this._onScroll);
this._onScroll = undefined;
}
onScroll(){
@ -483,7 +481,7 @@ class ContinuousViewManager extends DefaultViewManager {
this.afterScrolled = setTimeout(function () {
// 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;
}
@ -541,38 +539,27 @@ class ContinuousViewManager extends DefaultViewManager {
}.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) {
axis = "vertical";
updateFlow(flow){
if (this.rendered && this.snapper) {
this.snapper.destroy();
this.snapper = undefined;
}
if (!forceUpdate && axis === this.settings.axis) {
return;
}
super.updateFlow(flow);
this.settings.axis = axis;
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;
if (this.rendered && this.isPaginated && this.settings.snap) {
this.snapper = new Snap(this, this.settings.snap && (typeof this.settings.snap === "object") && this.settings.snap);
}
}

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

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

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

@ -25,10 +25,6 @@ const EASING_EQUATIONS = {
class Snap {
constructor(manager, options) {
if (this.supportsTouch() === false) {
return;
}
this.settings = extend({
duration: 80,
minVelocity: 0.2,
@ -36,8 +32,12 @@ class Snap {
easing: EASING_EQUATIONS['easeInCubic']
}, options || {});
this.supportsTouch = this.supportsTouch();
if (this.supportsTouch) {
this.setup(manager);
}
}
setup(manager) {
this.manager = manager;
@ -55,8 +55,7 @@ class Snap {
this.element.style["WebkitOverflowScrolling"] = "touch";
}
this.overflow = this.manager.overflow;
// this.overflow = this.manager.overflow;
// set lookahead offset to page width
this.manager.settings.offset = this.layout.width;
@ -100,25 +99,53 @@ class Snap {
}
enableScroll() {
this.element.style.overflow = "scroll";
this.element.style.overflow = "";
}
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.on('touchstart', this.onTouchStart.bind(this));
this._onTouchMove = this.onTouchMove.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.on('touchmove', this.onTouchMove.bind(this));
this._onTouchEnd = this.onTouchEnd.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.on('touchend', this.onTouchEnd.bind(this));
this._afterDisplayed = this.afterDisplayed.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) {
@ -292,15 +319,17 @@ class Snap {
}
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 });
window.removeEventListener('touchend', this.onTouchEnd.bind(this), { passive: true });
this.scroller = undefined;
}
}

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

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

10
src/store.js
View file

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