Merge branch 'master' of https://github.com/zynga/viewporter

pbakaus · May 29, 2012 · 00c56d6 · 00c56d6
2 parents 4399e9b + 3896cdd
commit 00c56d6
Show file tree

Hide file tree

Showing 5 changed files with 203 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -55,6 +55,8 @@ Viewporter is almost zero configuration. There's only one constant to check if V
 
 * viewporter.forceDetection (Boolean) - defaults to false, enabling it will cause the Viewporter not to use its profiles for devices (see devicepixel demo)
 
+* viewporter.preventPageScroll (Boolean) - defaults to false, enabling it will prevent scroll events on the body element. Use this option to cancel iOS overscroll effect, which causes the view to bounce back when scrolling exceeds the bounds. Additionally it will scroll back the pane if the user clicks the page after selecting the address bar on iOS.
+
 ### Constants
 
 * viewporter.ACTIVE - _true_ if the Viewporter is enabled and running (smartphones!), false if not (Desktop, non-touch device)
@@ -64,6 +66,7 @@ Viewporter is almost zero configuration. There's only one constant to check if V
 
 * viewporter.isLandscape() - returns wether the device is rotated to landscape or not
 * viewporter.ready() - accepts a callback and fires it when the viewporter has been successfully executed
+* viewporter.refresh() - refreshes the viewport. This is eg. useful when the browser displays an inline confirmations such as the geolocation alert on Android. **Hint**: Listen for `resize` events and then call this method.
 
 ### Events
 

diff --git a/demo/map.html b/demo/map.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>	
+	<title>Google Maps Example</title>
+
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+	<meta name="apple-mobile-web-app-capable" content="yes">
+	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+
+	<!-- This exact meta viewport is required for Viewporter for work properly -->
+	<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0" />
+
+	<style type="text/css" media="screen">
+		html, body {
+			margin: 0;
+			padding: 0;
+			font-family: Arial;
+		}
+
+		#map {
+			position: absolute;
+			top: 0;
+			left: 0;
+			bottom: 0;
+			right: 0;
+		}
+	</style>
+
+	<script src="../src/viewporter.js"></script>
+
+</head>
+<body>
+	<div id="viewporter">
+		<div id="map"></div>
+	</div>
+
+	<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript" charset="utf-8"></script>
+
+	<script type="text/javascript" charset="utf-8">
+
+	  viewporter.preventPageScroll = true;
+
+		var eventName = viewporter.ACTIVE ? 'viewportready' : "load"; 
+
+		google.maps.event.addDomListener(window, eventName, function(){
+
+			var map = new google.maps.Map(document.getElementById("map"), {
+				zoom: 2,
+				center: new google.maps.LatLng(10,0),
+				mapTypeId: google.maps.MapTypeId.ROADMAP
+			});
+
+			window.addEventListener("resize", viewporter.refresh);
+
+			if (navigator.geolocation){ 
+
+				navigator.geolocation.getCurrentPosition(function(position){
+					map.setCenter(new google.maps.LatLng(
+						position.coords.latitude, 
+						position.coords.longitude
+					));
+					map.setZoom(14);
+				});
+			}
+		});
+
+	</script>
+
+</body>
+</html>
diff --git a/demo/nopagescroll.html b/demo/nopagescroll.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+
+	<title>No Page Scroll</title>
+
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+	<meta name="apple-mobile-web-app-capable" content="yes">
+	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+
+	<!-- This exact meta viewport is required for Viewporter for work properly -->
+	<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0" />
+
+	<link rel="stylesheet" href="style.css" type="text/css" media="screen">
+
+	<script src="../src/viewporter.js"></script>
+
+
+</head>
+<body>
+<div id="viewporter"><!-- This wrapper element is also required -->
+
+	<div id="checker-bl"><p></p></div>
+	<div id="checker-tr"><p></p></div>
+
+</div>
+
+<script type="text/javascript">
+	viewporter.preventPageScroll = true;
+</script>
+
+</body>
+</html>
diff --git a/demo/resize.html b/demo/resize.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+
+	<title>Resize</title>
+
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+	<meta name="apple-mobile-web-app-capable" content="yes">
+	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+
+	<!-- This exact meta viewport is required for Viewporter for work properly -->
+	<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0" />
+
+	<link rel="stylesheet" href="style.css" type="text/css" media="screen">
+
+	<script src="../src/viewporter.js"></script>
+
+
+</head>
+<body>
+<div id="viewporter"><!-- This wrapper element is also required -->
+
+	<div id="checker-bl">
+		<p id="coords"></p>
+	</div>
+	<div id="checker-tr">
+		<p id="events"></p>
+	</div>
+
+</div>
+
+<script type="text/javascript">
+
+	viewporter.preventPageScroll = true;
+
+	document.addEventListener('DOMContentLoaded', function() {
+
+		// listen for "resize" events and trigger "refresh" method.
+		window.addEventListener("resize", function(){
+			viewporter.refresh();
+			document.getElementById("events").innerHTML += "resize<br>";
+		});
+
+		if (navigator.geolocation){ 
+			function success(position){
+				var coords = [position.coords.latitude, position.coords.longitude]
+				document.getElementById("coords").innerHTML = coords.join(", ");
+			}
+
+			navigator.geolocation.getCurrentPosition(success);
+		}
+
+	});
+</script>
+
+</body>
+</html>
diff --git a/src/viewporter.js b/src/viewporter.js
@@ -9,11 +9,16 @@
 var viewporter;
 (function() {
 
+	var _viewporter;
+
 	// initialize viewporter object
 	viewporter = {
 
 		// options
 		forceDetection: false,
+
+		// set to true to prevent page scroll. 
+		preventPageScroll: false,
 
 		// constants
 		ACTIVE: (('ontouchstart' in window) || (/webos/i).test(navigator.userAgent)),
@@ -30,8 +35,13 @@ var viewporter;
 
 		change: function(callback) {
 			window.addEventListener('viewportchange', callback, false);
-		}
+		},
 
+		refresh: function(){
+			if (_viewporter){
+				_viewporter.prepareVisualViewport();
+			}
+		}
 	};
 
 	// if we are on Desktop, no need to go further
@@ -61,6 +71,22 @@ var viewporter;
 				}
 			}, false);
 
+
+			// prevent page scroll if `preventPageScroll` option was set to `true`
+			document.body.addEventListener('touchmove', function(event) {
+				if (viewporter.preventPageScroll){
+					event.preventDefault();
+				}
+			}, false);
+
+			// reset page scroll if `preventPageScroll` option was set to `true`
+			// this is used after showing the address bar on iOS
+			document.body.addEventListener("touchstart", function() {
+				if (viewporter.preventPageScroll) {
+					that.prepareVisualViewport();
+				}
+			}, false);
+
 		};
 
 
@@ -123,17 +149,23 @@ var viewporter;
 			window.scrollTo(0, that.IS_ANDROID ? 1 : 0); // Android needs to scroll by at least 1px
 
 			// start the checker loop
-			var iterations = this.IS_ANDROID && !deviceProfile ? 20 : 5; // if we're on Android and don't know the device, brute force hard
+			var iterations = 40;
 			var check = window.setInterval(function() {
 
 				// retry scrolling
 				window.scrollTo(0, that.IS_ANDROID ? 1 : 0); // Android needs to scroll by at least 1px
 
-				if(
+				function androidProfileCheck() {
-					that.IS_ANDROID
+					return deviceProfile ? window.innerHeight === deviceProfile[orientation] : false;
-						? (deviceProfile ? window.innerHeight === deviceProfile[orientation] : --iterations < 0) // Android: either match against a device profile, or brute force
+				}
-						: (window.innerHeight > startHeight || --iterations < 0) // iOS is comparably easy!
+				function iosInnerHeightCheck() {
-				) {
+					return window.innerHeight > startHeight;
+				}
+
+				iterations--;
+
+				// check iterations first to make sure we never get stuck
+				if ( (that.IS_ANDROID ? androidProfileCheck() : iosInnerHeightCheck()) || iterations < 0) {
 
 					// set minimum height of content to new window height
 					document.documentElement.style.minHeight = window.innerHeight + 'px';
@@ -162,7 +194,7 @@ var viewporter;
 	};
 
 	// initialize
-	new _Viewporter();
+	_viewporter = new _Viewporter();
 
 })();