Fix orientation change listener

examples/embedded.html

@@ -77,6 +77,7 @@
 
   </script>
   <script>
+    /*
     var isChrome = /Chrome/.test(navigator.userAgent);
     var isWebkit = !isChrome && /AppleWebKit/.test(navigator.userAgent);
 
@@ -185,6 +186,7 @@
 
         tick();
     }
+    */
   </script>
   <!-- <script src="../node_modules/scrollsnap-polyfill/vendor/philipwalton/polyfill.js"></script>
   <script src="../node_modules/scrollsnap-polyfill/src/scrollsnap-polyfill.js"></script> -->

src/managers/continuous/index.js

@@ -77,13 +77,9 @@ class ContinuousViewManager extends DefaultViewManager {
 			offsetX = distX+this.settings.offset;
 		}
 
-		this.check(offsetX, offsetY);
+		if (distX > 0 || distY > 0) {
 			this.scrollBy(distX, distY, true);
-
+		}
-		// return this.check(offsetX, offsetY)
-		// 	.then(function(){
-		// 		this.scrollBy(distX, distY, true);
-		// 	}.bind(this));
 	}
 
 	/*
@@ -110,15 +106,15 @@ class ContinuousViewManager extends DefaultViewManager {
 	}
 	*/
 
-	onResized(e) {
+	// onResized(e) {
-
+	//
-		// this.views.clear();
+	// 	// this.views.clear();
-
+	//
-		clearTimeout(this.resizeTimeout);
+	// 	clearTimeout(this.resizeTimeout);
-		this.resizeTimeout = setTimeout(function(){
+	// 	this.resizeTimeout = setTimeout(function(){
-			this.resize();
+	// 		this.resize();
-		}.bind(this), 150);
+	// 	}.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;
 
 	}
 

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.resize();
-		this._bounds = this.bounds();
-		// Update for new views
-		this.viewSettings.width = this._stageSize.width;
-		this.viewSettings.height = this._stageSize.height;
 
-		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);
 	}
 
 	resize(width, height){
-		// Clear the queue
+		let stageSize = this.stage.size(width, height);
-		this.q.clear();
 
-		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();

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){

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) {
+		// Handled in resize event
-			this.manager.clear();
+		// if (this.location) {
-			this.display(this.location.start.cfi);
+		// 	this.display(this.location.start.cfi);
-		}
+		// }
 
-		this.emit("orientationChange", orientation);
+		this.emit("orientationchange", orientation);
 	}
 
 	/**
@@ -527,6 +526,7 @@ class Rendition {
 	 */
 	reportLocation(){
 		return this.q.enqueue(function reportedLocation(){
+			requestAnimationFrame(function reportedLocationAfterRAF() {
 				var location = this.manager.currentLocation();
 				if (location && location.then && typeof location.then === "function") {
 					location.then(function(result) {
@@ -567,7 +567,7 @@ class Rendition {
 
 					this.emit("relocated", this.location);
 				}
-
+			}.bind(this));
 		}.bind(this));
 	}