Skip to content

Commit

Permalink
Update listener removal, stage size and update snap on flow change
Browse files Browse the repository at this point in the history
  • Loading branch information
@fchasen
fchasen committed Nov 15, 2018
1 parent c9846f5 commit ae4a10b
Show file tree
Hide file tree
Showing 6 changed files with 112 additions and 79 deletions.
19 changes: 12 additions & 7 deletions src/contents.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}

/**
Expand Down Expand Up @@ -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);

}
Expand All @@ -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;
}

/**
Expand All @@ -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 });
}

/**
Expand All @@ -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;
}

/**
Expand Down Expand Up @@ -1156,7 +1161,7 @@ class Contents {
this.observer.disconnect();
}

this.document.removeEventListener('transitionend', this.resizeCheck);
this.document.removeEventListener('transitionend', this._resizeCheck);

this.removeListeners();

Expand Down
59 changes: 23 additions & 36 deletions src/managers/continuous/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,11 +129,9 @@ class ContinuousViewManager extends DefaultViewManager {
view.expanded = true;
});

/*
view.on(EVENTS.VIEWS.AXIS, (axis) => {
this.updateAxis(axis);
});
*/

this.views.append(view);

Expand All @@ -150,11 +148,9 @@ class ContinuousViewManager extends DefaultViewManager {
view.expanded = true;
});

/*
view.on(EVENTS.VIEWS.AXIS, (axis) => {
this.updateAxis(axis);
});
*/

this.views.prepend(view);

Expand Down Expand Up @@ -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));

Expand All @@ -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(){
Expand Down Expand Up @@ -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;
}

Expand Down Expand Up @@ -541,38 +539,27 @@ class ContinuousViewManager extends DefaultViewManager {
}.bind(this));
}

updateAxis(axis, forceUpdate){

if (!this.isPaginated) {
axis = "vertical";
}

if (!forceUpdate && axis === this.settings.axis) {
return;
}

this.settings.axis = axis;

this.stage && this.stage.axis(axis);

this.viewSettings.axis = axis;

if (this.mapping) {
this.mapping.axis(axis);
// updateAxis(axis, forceUpdate){
//
// super.updateAxis(axis, forceUpdate);
//
// if (axis === "vertical") {
// this.settings.infinite = true;
// } else {
// this.settings.infinite = false;
// }
// }

updateFlow(flow){
if (this.rendered && this.snapper) {
this.snapper.destroy();
this.snapper = undefined;
}

if (this.layout) {
if (axis === "vertical") {
this.layout.spread("none");
} else {
this.layout.spread(this.layout.settings.spread);
}
}
super.updateFlow(flow);

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);
}
}

Expand Down
13 changes: 8 additions & 5 deletions src/managers/default/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(){
Expand All @@ -131,7 +132,8 @@ class DefaultViewManager {
scroller = window;
}

scroller.removeEventListener("scroll", this.onScroll.bind(this));
scroller.removeEventListener("scroll", this._onScroll);
this._onScroll = undefined;
}

destroy(){
Expand Down Expand Up @@ -901,6 +903,8 @@ class DefaultViewManager {
flow === "scrolled-continuous" ||
flow === "scrolled") {
this.updateAxis("vertical");
} else {
this.updateAxis("horizontal");
}

this.viewSettings.flow = flow;
Expand All @@ -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();

Expand Down
75 changes: 52 additions & 23 deletions src/managers/helpers/snap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,18 +25,18 @@ const EASING_EQUATIONS = {
class Snap {
constructor(manager, options) {

if (this.supportsTouch() === false) {
return;
}

this.settings = extend({
duration: 80,
minVelocity: 0.2,
minDistance: 10,
easing: EASING_EQUATIONS['easeInCubic']
}, options || {});

this.setup(manager);
this.supportsTouch = this.supportsTouch();

if (this.supportsTouch) {
this.setup(manager);
}
}

setup(manager) {
Expand All @@ -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;
Expand Down Expand Up @@ -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);

this._onScroll = this.onScroll.bind(this);
this.scroller.addEventListener('scroll', this._onScroll);

this._onTouchStart = this.onTouchStart.bind(this);
this.scroller.addEventListener('touchstart', this._onTouchStart, { passive: true });
this.on('touchstart', this._onTouchStart);

this._onTouchMove = this.onTouchMove.bind(this);
this.scroller.addEventListener('touchmove', this._onTouchMove, { passive: true });
this.on('touchmove', this._onTouchMove);

window.addEventListener('resize', this.onResize.bind(this));
this._onTouchEnd = this.onTouchEnd.bind(this);
this.scroller.addEventListener('touchend', this._onTouchEnd, { passive: true });
this.on('touchend', this._onTouchEnd);

this.scroller.addEventListener('scroll', this.onScroll.bind(this));
this._afterDisplayed = this.afterDisplayed.bind(this);
this.manager.on(EVENTS.MANAGERS.ADDED, this._afterDisplayed);
}

removeListeners() {
window.removeEventListener('resize', this._onResize);
this._onResize = undefined;

this.scroller.removeEventListener('scroll', this._onScroll);
this._onScroll = undefined;

window.addEventListener('touchstart', this.onTouchStart.bind(this), { passive: true });
this.on('touchstart', this.onTouchStart.bind(this));
this.scroller.removeEventListener('touchstart', this._onTouchStart, { passive: true });
this.off('touchstart', this._onTouchStart);
this._onTouchStart = undefined;

window.addEventListener('touchmove', this.onTouchMove.bind(this), { passive: true });
this.on('touchmove', this.onTouchMove.bind(this));
this.scroller.removeEventListener('touchmove', this._onTouchMove, { passive: true });
this.off('touchmove', this._onTouchMove);
this._onTouchMove = undefined;

window.addEventListener('touchend', this.onTouchEnd.bind(this), { passive: true });
this.on('touchend', this.onTouchEnd.bind(this));
this.scroller.removeEventListener('touchend', this._onTouchEnd, { passive: true });
this.off('touchend', this._onTouchEnd);
this._onTouchEnd = undefined;

this.manager.on(EVENTS.MANAGERS.ADDED, this.afterDisplayed.bind(this));
this.manager.off(EVENTS.MANAGERS.ADDED, this._afterDisplayed);
this._afterDisplayed = undefined;
}

afterDisplayed(view) {
Expand Down Expand Up @@ -292,15 +319,17 @@ class Snap {
}

destroy() {
this.scroller.removeEventListener('scroll', this.onScroll.bind(this));

window.removeEventListener('resize', this.onResize.bind(this));
if (!this.scroller) {
return;
}

window.removeEventListener('touchstart', this.onTouchStart.bind(this), { passive: true });
if (this.fullsize) {
this.enableScroll();
}

window.removeEventListener('touchmove', this.onTouchMove.bind(this), { passive: true });
this.removeListeners();

window.removeEventListener('touchend', this.onTouchEnd.bind(this), { passive: true });
this.scroller = undefined;
}
}

Expand Down
15 changes: 11 additions & 4 deletions src/managers/helpers/stage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -315,6 +316,12 @@ class Stage {
}
}

overflow(overflow) {
if (this.container) {
this.container.style["overflow"] = overflow;
}
}

destroy() {
var base;

Expand Down
10 changes: 6 additions & 4 deletions src/store.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,17 +55,19 @@ 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);
}

/**
* Remove online and offline event listeners
* @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;
}

/**
Expand Down

0 comments on commit ae4a10b

Please sign in to comment.