diff --git a/examples/embedded.html b/examples/embedded.html index cefb906..27a6885 100644 --- a/examples/embedded.html +++ b/examples/embedded.html @@ -77,6 +77,7 @@ diff --git a/src/managers/continuous/index.js b/src/managers/continuous/index.js index dc5230f..b219963 100644 --- a/src/managers/continuous/index.js +++ b/src/managers/continuous/index.js @@ -77,13 +77,9 @@ class ContinuousViewManager extends DefaultViewManager { offsetX = distX+this.settings.offset; } - this.check(offsetX, offsetY); - this.scrollBy(distX, distY, true); - - // return this.check(offsetX, offsetY) - // .then(function(){ - // this.scrollBy(distX, distY, true); - // }.bind(this)); + if (distX > 0 || distY > 0) { + this.scrollBy(distX, distY, true); + } } /* @@ -110,15 +106,15 @@ class ContinuousViewManager extends DefaultViewManager { } */ - onResized(e) { - - // this.views.clear(); - - clearTimeout(this.resizeTimeout); - this.resizeTimeout = setTimeout(function(){ - this.resize(); - }.bind(this), 150); - } + // onResized(e) { + // + // // this.views.clear(); + // + // clearTimeout(this.resizeTimeout); + // this.resizeTimeout = setTimeout(function(){ + // this.resize(); + // }.bind(this), 150); + // } afterResized(view){ this.emit("resize", view.section); @@ -408,10 +404,10 @@ class ContinuousViewManager extends DefaultViewManager { } scroller.addEventListener("scroll", this.onScroll.bind(this)); - this._scrolled = debounce(this.scrolled.bind(this), 300); + this._scrolled = debounce(this.scrolled.bind(this), 60); // this.tick.call(window, this.onScroll.bind(this)); - this.scrolled = false; + this.didScroll = false; } @@ -463,7 +459,7 @@ class ContinuousViewManager extends DefaultViewManager { }.bind(this), 150); - this.scrolled = false; + this.didScroll = false; } diff --git a/src/managers/default/index.js b/src/managers/default/index.js index 66b34d9..c821a28 100644 --- a/src/managers/default/index.js +++ b/src/managers/default/index.js @@ -1,5 +1,5 @@ import EventEmitter from "event-emitter"; -import {extend, defer} from "../../utils/core"; +import {extend, defer, windowBounds} from "../../utils/core"; import Mapping from "../../mapping"; import Queue from "../../utils/queue"; import Stage from "../helpers/stage"; @@ -83,6 +83,8 @@ class DefaultViewManager { // Will only attach if width and height are both fixed. this.stage.onResize(this.onResized.bind(this)); + this.stage.onOrientationChange(this.onOrientationChange.bind(this)); + // Add Event Listeners this.addEventListeners(); @@ -122,18 +124,14 @@ class DefaultViewManager { } destroy(){ + clearTimeout(this.orientationTimeout); + clearTimeout(this.resizeTimeout); + clearTimeout(this.afterScrolled); + + this.clear(); this.removeEventListeners(); - if (this.views) { - this.views.each(function(view){ - if (view) { - view.destroy(); - } - }); - } - - this.stage.destroy(); /* @@ -150,58 +148,63 @@ class DefaultViewManager { onOrientationChange(e) { let {orientation} = window; - this._stageSize = this.stage.size(); - this._bounds = this.bounds(); - // Update for new views - this.viewSettings.width = this._stageSize.width; - this.viewSettings.height = this._stageSize.height; + this.resize(); - this.updateLayout(); + // Per ampproject: + // In IOS 10.3, the measured size of an element is incorrect if the + // element size depends on window size directly and the measurement + // happens in window.resize event. Adding a timeout for correct + // measurement. See https://github.com/ampproject/amphtml/issues/8479 + clearTimeout(this.orientationTimeout); + this.orientationTimeout = setTimeout(function(){ + this.orientationTimeout = undefined; + this.resize(); + this.emit("orientationchange", orientation); + }.bind(this), 500); - // Update for existing views - // this.views.each(function(view) { - // view.size(this._stageSize.width, this._stageSize.height); - // }.bind(this)); - - this.emit("orientationChange", orientation); } onResized(e) { - clearTimeout(this.resizeTimeout); - this.resizeTimeout = setTimeout(function(){ - this.resize(); - }.bind(this), 150); + this.resize(); } resize(width, height){ - // Clear the queue - this.q.clear(); + let stageSize = this.stage.size(width, height); - this._stageSize = this.stage.size(width, height); + // For Safari, wait for orientation to catch up + // if the window is a square + this.winBounds = windowBounds(); + if (this.orientationTimeout && + this.winBounds.width === this.winBounds.height) { + // reset the stage size for next resize + this._stageSize = undefined; + return; + } + + if (this._stageSize && + this._stageSize.width === stageSize.width && + this._stageSize.height === stageSize.height ) { + // Size is the same, no need to resize + return; + } + + this._stageSize = stageSize; this._bounds = this.bounds(); + // Clear current views + this.clear(); + // Update for new views this.viewSettings.width = this._stageSize.width; this.viewSettings.height = this._stageSize.height; this.updateLayout(); - // Update for existing views - // TODO: this is not updating correctly, just clear and rerender for now - /* - this.views.each(function(view) { - view.reset(); - view.size(this._stageSize.width, this._stageSize.height); - }.bind(this)); - */ - this.clear(); - this.emit("resized", { width: this._stageSize.width, height: this._stageSize.height }); - } createView(section) { @@ -447,7 +450,8 @@ class DefaultViewManager { } clear () { - this.q.clear(); + + // this.q.clear(); if (this.views) { this.views.hide(); diff --git a/src/managers/helpers/stage.js b/src/managers/helpers/stage.js index 74cb5aa..2ede997 100644 --- a/src/managers/helpers/stage.js +++ b/src/managers/helpers/stage.js @@ -1,4 +1,5 @@ import {uuid, isNumber, isElement, windowBounds} from "../../utils/core"; +import throttle from 'lodash/throttle' class Stage { constructor(_options) { @@ -127,7 +128,7 @@ class Stage { // This applies if it is set to a percent or auto. if(!isNumber(this.settings.width) || !isNumber(this.settings.height) ) { - this.resizeFunc = func; + this.resizeFunc = throttle(func, 50); window.addEventListener("resize", this.resizeFunc, false); } @@ -135,7 +136,7 @@ class Stage { onOrientationChange(func){ this.orientationChangeFunc = func; - window.addEventListener("orientationChange", this.orientationChangeFunc, false); + window.addEventListener("orientationchange", this.orientationChangeFunc, false); } size(width, height){ diff --git a/src/rendition.js b/src/rendition.js index 756a702..78f849a 100644 --- a/src/rendition.js +++ b/src/rendition.js @@ -179,7 +179,7 @@ class Rendition { this.manager.on("resized", this.onResized.bind(this)); // Listen for rotation - this.manager.on("orientationChange", this.onOrientationChange.bind(this)); + this.manager.on("orientationchange", this.onOrientationChange.bind(this)); // Listen for scroll changes this.manager.on("scrolled", this.reportLocation.bind(this)); @@ -365,7 +365,6 @@ class Rendition { }); if (this.location && this.location.start) { - // this.manager.clear(); this.display(this.location.start.cfi); } @@ -376,12 +375,12 @@ class Rendition { * @private */ onOrientationChange(orientation){ - if (this.location) { - this.manager.clear(); - this.display(this.location.start.cfi); - } + // Handled in resize event + // if (this.location) { + // this.display(this.location.start.cfi); + // } - this.emit("orientationChange", orientation); + this.emit("orientationchange", orientation); } /** @@ -527,10 +526,30 @@ class Rendition { */ reportLocation(){ return this.q.enqueue(function reportedLocation(){ - var location = this.manager.currentLocation(); - if (location && location.then && typeof location.then === "function") { - location.then(function(result) { - let located = this.located(result); + requestAnimationFrame(function reportedLocationAfterRAF() { + var location = this.manager.currentLocation(); + if (location && location.then && typeof location.then === "function") { + location.then(function(result) { + let located = this.located(result); + + if (!located || !located.start || !located.end) { + return; + } + + this.location = located; + + this.emit("locationChanged", { + index: this.location.start.index, + href: this.location.start.href, + start: this.location.start.cfi, + end: this.location.end.cfi, + percentage: this.location.start.percentage + }); + + this.emit("relocated", this.location); + }.bind(this)); + } else if (location) { + let located = this.located(location); if (!located || !located.start || !located.end) { return; @@ -547,27 +566,8 @@ class Rendition { }); this.emit("relocated", this.location); - }.bind(this)); - } else if (location) { - let located = this.located(location); - - if (!located || !located.start || !located.end) { - return; } - - this.location = located; - - this.emit("locationChanged", { - index: this.location.start.index, - href: this.location.start.href, - start: this.location.start.cfi, - end: this.location.end.cfi, - percentage: this.location.start.percentage - }); - - this.emit("relocated", this.location); - } - + }.bind(this)); }.bind(this)); }