diff --git a/src/contents.js b/src/contents.js index e706977..870ad07 100644 --- a/src/contents.js +++ b/src/contents.js @@ -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(); diff --git a/src/managers/continuous/index.js b/src/managers/continuous/index.js index 917ac41..eed22a4 100644 --- a/src/managers/continuous/index.js +++ b/src/managers/continuous/index.js @@ -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); } } diff --git a/src/managers/default/index.js b/src/managers/default/index.js index 2095465..2ed310d 100644 --- a/src/managers/default/index.js +++ b/src/managers/default/index.js @@ -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(); diff --git a/src/managers/helpers/snap.js b/src/managers/helpers/snap.js index 927911c..db0aaff 100644 --- a/src/managers/helpers/snap.js +++ b/src/managers/helpers/snap.js @@ -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,7 +32,11 @@ class Snap { easing: EASING_EQUATIONS['easeInCubic'] }, options || {}); - this.setup(manager); + this.supportsTouch = this.supportsTouch(); + + if (this.supportsTouch) { + this.setup(manager); + } } setup(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; } } diff --git a/src/managers/helpers/stage.js b/src/managers/helpers/stage.js index fcac04e..a7421cb 100644 --- a/src/managers/helpers/stage.js +++ b/src/managers/helpers/stage.js @@ -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; diff --git a/src/store.js b/src/store.js index 58f03da..f60fc68 100644 --- a/src/store.js +++ b/src/store.js @@ -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; } /**