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