Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Option `viewporter.preventPageScroll` and method `viewporter.refresh()` #5

Merged
merged 6 commits into from

3 participants

@aemkei

I made two additions to the API:

  • 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.

  • 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.

Examples are included. I've also added a sample page with a fullscreen Google Maps display to show the new additions in action.

@jzaefferer

These are interesting additions, any plans to actually land them?

@saschagoebel saschagoebel was assigned
@saschagoebel saschagoebel merged commit 188e681 into zynga:master
@saschagoebel

Merged for now. Not sure about the preventPageScroll though. Will keep it in and test under prod conditions.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
View
3  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
View
70 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>
View
33 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>
View
57 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>
View
29 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)),
@@ -26,6 +31,12 @@ var viewporter;
ready: function(callback) {
window.addEventListener('viewportready', callback, false);
+ },
+
+ refresh: function(){
+ if (_viewporter){
+ _viewporter.prepareVisualViewport();
+ }
}
};
@@ -56,6 +67,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);
+
};
@@ -157,7 +184,7 @@ var viewporter;
};
// initialize
- new _Viewporter();
+ _viewporter = new _Viewporter();
})();
Something went wrong with that request. Please try again.