Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Merge pull request #5 from ubilabs/viewporter

  • Loading branch information...
commit 3896cdd3e5837e6a8f650ec8dbf8806d8473b194 2 parents 80687fc + 188e681
@saschagoebel saschagoebel authored
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
30 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);
+
};
@@ -168,7 +194,7 @@ var viewporter;
};
// initialize
- new _Viewporter();
+ _viewporter = new _Viewporter();
})();
Please sign in to comment.
Something went wrong with that request. Please try again.