Skip to content

Commit

Permalink
streamlining of demos, new fancy multi-pointer drawing demo (swipey.h…
Browse files Browse the repository at this point in the history 
…tml)
  • Loading branch information
@pbakaus
pbakaus committed Mar 16, 2012
1 parent 6959ed5 commit 0c7efc5
Show file tree
Hide file tree
Showing 8 changed files with 284 additions and 112 deletions.
17 changes: 17 additions & 0 deletions demo/common/debug.js
View file
@@ -0,0 +1,17 @@
var log = function() {
$("#viewporter").append("<p>"+Array.prototype.slice.call(arguments).join(' ')+"</p>");
};

var debug = function() {

log('landscape:', viewporter.isLandscape(), '('+window.orientation+')');

$('#viewporter-debug-width').text(window.innerWidth);
$('#viewporter-debug-height').text(window.innerHeight);
$('#viewporter-debug-useragent').text(navigator.userAgent);

};

$(window).bind(viewporter.ACTIVE ? 'viewportready viewportchange' : 'load', function() {
debug();
});
21 changes: 19 additions & 2 deletions demo/style.css → demo/common/style.css
View file
Expand Up @@ -5,6 +5,7 @@ html, body {
font-size: 12px;
color: white;
background: green;
-webkit-text-size-adjust: none; /* important, or your text resizes randomly on rotation! */
}

p {
Expand Down Expand Up @@ -42,8 +43,24 @@ p {
right: 0;
background: #333;
color: #fff;
text-shadow: 1px 1px 0px #000;
font-size: 2em;
padding: 1em;
padding-top: 3em;
text-align: center;
display: none;
}

#orientationlock p {
position: absolute;
top: 50%;
left: 0;
width: 100%;
margin-top: -2em;
padding: 0;
}

canvas {
background: #eee;
position: absolute;
top: 0;
left: 0;
}
30 changes: 6 additions & 24 deletions demo/on.html → demo/default.html
View file
Expand Up @@ -11,32 +11,14 @@
<!-- 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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script type="text/javascript">
<link rel="stylesheet" href="common/style.css" type="text/css" media="screen">

var log = function() {
$("#viewporter").append("<p>"+Array.prototype.slice.call(arguments).join(' ')+"</p>");
};

var debug = function() {

log('landscape:', viewporter.isLandscape(), '('+window.orientation+')');

$('#viewporter-debug-width').text(window.innerWidth);
$('#viewporter-debug-height').text(window.innerHeight);
$('#viewporter-debug-useragent').text(navigator.userAgent);

};

$(window).bind(viewporter.ACTIVE ? 'viewportready viewportchange' : 'load', function() {
debug();
});
<!-- important files (non-optional) -->
<script src="../src/viewporter.js"></script>

</script>
<!-- the following two are optional, and just for this demo -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="common/debug.js"></script>

</head>
<body>
Expand Down
49 changes: 9 additions & 40 deletions demo/devicepixel.html
View file
Expand Up @@ -8,53 +8,22 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

<script src="../src/viewporter.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">

viewporter.forceDetection = true;

(function() {

var scale = 1;
<!-- There's no meta viewport here as the native helper writes it into the <head> -->

if(navigator.userAgent.indexOf("iPhone") > -1 && window.devicePixelRatio > 1) {
scale /= window.devicePixelRatio;
}

document.write('<meta name="viewport" content="' + (navigator.userAgent.indexOf("Android") > -1 ? 'target-densitydpi=device-dpi,' : '') + 'initial-scale=' + scale + ',maximum-scale=' + scale + '" />');
<link rel="stylesheet" href="common/style.css" type="text/css" media="screen">

})();

</script>

<link rel="stylesheet" href="style.css" type="text/css" media="screen">

<script type="text/javascript">

var log = function() {
$("#viewporter").append("<p>"+Array.prototype.slice.call(arguments).join(' ')+"</p>");
};

var debug = function() {

log('landscape:', viewporter.isLandscape(), '('+window.orientation+')');

$('#viewporter-debug-width').text(window.innerWidth);
$('#viewporter-debug-height').text(window.innerHeight);
$('#viewporter-debug-useragent').text(navigator.userAgent);

};

$(window).bind(viewporter.ACTIVE ? 'viewportready viewportchange' : 'load', function() {
debug();
});
<!-- important files (non-optional) -->
<script src="../src/viewporter.js"></script>
<script src="../src/viewporter.native.js"></script><!-- important: this has to be in the <head>! -->

</script>
<!-- the following two are optional, and just for this demo -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="common/debug.js"></script>

</head>
<body>
<div id="viewporter"><!-- This wrapper element is also required -->
<div id="viewporter"><!-- This wrapper element is required -->

<div id="checker-bl">
<p><strong>window width:</strong> <span id="viewporter-debug-width"></span></p>
Expand Down
28 changes: 6 additions & 22 deletions demo/off.html → demo/disabled.html
View file
Expand Up @@ -11,30 +11,14 @@
<!-- 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="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">

var log = function() {
$("body").append("<p>"+Array.prototype.slice.call(arguments).join(' ')+"</p>");
};

var debug = function() {

log('landscape:', '('+window.orientation+')');

$('#viewporter-debug-width').text(window.innerWidth);
$('#viewporter-debug-height').text(window.innerHeight);
$('#viewporter-debug-useragent').text(navigator.userAgent);

};

$(window).bind('load', function() {
debug();
});
<link rel="stylesheet" href="common/style.css" type="text/css" media="screen">

<!-- the following two are optional, and just for this demo -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
var viewporter = { isLandscape: function() {} }; // so the debug.js doesn't break
</script>
<script src="common/debug.js"></script>

</head>
<body>
Expand Down
32 changes: 8 additions & 24 deletions demo/lock.html → demo/orientationlock.html
View file
Expand Up @@ -11,43 +11,27 @@
<!-- 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">
<link rel="stylesheet" href="common/style.css" type="text/css" media="screen">

<!-- important files (non-optional) -->
<script src="../src/viewporter.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script type="text/javascript">

var log = function() {
$("#viewporter").append("<p>"+Array.prototype.slice.call(arguments).join(' ')+"</p>");
};

var debug = function() {

log('landscape:', viewporter.isLandscape(), '('+window.orientation+')');
<!-- the following two are optional, and just for this demo -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="common/debug.js"></script>

$('#viewporter-debug-width').text(window.innerWidth);
$('#viewporter-debug-height').text(window.innerHeight);
$('#viewporter-debug-useragent').text(navigator.userAgent);

};

$(window).bind(viewporter.ACTIVE ? 'viewportready viewportchange' : 'load', function() {
debug();
});

<script>
// orientation locking
$(window).bind('viewportready viewportchange', function() {
$('#orientationlock').toggle(viewporter.isLandscape());
$('#orientationlock').toggle(!viewporter.isLandscape());
});

</script>

</head>
<body>
<div id="viewporter">

<div id="orientationlock">Please rotate your device to use this demo application.</div>
<div id="orientationlock"><p>Please rotate your device to use this demo application.</p></div>

<div id="checker-bl">
<p><strong>window width:</strong> <span id="viewporter-debug-width"></span></p>
Expand Down

1 comment on commit 0c7efc5

@jzaefferer
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You should give the new interaction widget a try for that swipey demo: https://github.com/jquery/jquery-ui/blob/interactions/ui/jquery.ui.interaction.js - abstracts mouse, touch and MSPointer events.

Please sign in to comment.