hammerjs
Version:
A javascript library for multi-touch gestures
267 lines (215 loc) • 7.41 kB
HTML
<html>
<head>
<title>Hammer.js</title>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<style>
body {
padding: 15px;
}
.container { position: relative; }
.hitarea {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,255,0,.05);
text-align: center;
border: dotted 1px green;
}
.log {
margin: 0;
}
.log li {
display: inline-block;
width: 49%;
overflow: hidden;
}
@media screen and (min-width: 640px) {
.log li { width: 30%; }
}
@media (max-width: 900px) {
.visible-desktop { display: none; }
}
.properties li { white-space: nowrap; }
.properties span { margin-left: 5px; }
.log li.active { background: lightgreen; }
.log li.property-gesture {
position: fixed;
right: 0;
top: 0;
background: lightgreen;
padding: 1px 4px;
width: auto;
}
</style>
</head>
<body>
<p class="pull-right visible-desktop"><strong>Press shift on your desktop for multitouch.</strong></p>
<ul class="inline">
<li>
<label>
<input type="checkbox" checked id="prevent-default" style="margin:0;"> block browser behavior (preventDefault)
</label>
</li>
<li>
<label>
<input type="checkbox" id="console-log" style="margin:0;"> console.log all events
</label>
</li>
<li>
<input type="button" class="btn btn-small" id="reset" value="reset">
</li>
</ul>
<div class="container">
<div class="log well well-small">
<h4>Events</h4>
<ul class="unstyled events" id="events-list">
<li>touch</li>
<li>release</li>
<li>gesture</li>
<li>hold</li>
<li>tap</li>
<li>doubletap</li>
<li>dragstart</li>
<li>drag</li>
<li>dragend</li>
<li>dragleft</li>
<li>dragright</li>
<li>dragup</li>
<li>dragdown</li>
<li>swipe</li>
<li>swipeleft</li>
<li>swiperight</li>
<li>swipeup</li>
<li>swipedown</li>
<li>transformstart</li>
<li>transform</li>
<li>transformend</li>
<li>rotate</li>
<li>pinch</li>
<li>pinchin</li>
<li>pinchout</li>
</ul>
<h4>EventData</h4>
<ul class="unstyled properties">
<li class="property-gesture"><strong>gesture</strong> <span id="log-prop-gesture"></span></li>
<li><strong>touches</strong> <span id="log-prop-touches"></span></li>
<li><strong>pointerType</strong> <span id="log-prop-pointerType"></span></li>
<li><strong>center</strong> <span id="log-prop-center"></span></li>
<li><strong>angle</strong> <span id="log-prop-angle"></span>°</li>
<li><strong>direction</strong> <span id="log-prop-direction"></span></li>
<li><strong>distance</strong> <span id="log-prop-distance"></span>px</li>
<li><strong>deltaTime</strong> <span id="log-prop-deltaTime"></span>ms</li>
<li><strong>deltaX</strong> <span id="log-prop-deltaX"></span>px</li>
<li><strong>deltaY</strong> <span id="log-prop-deltaY"></span>px</li>
<li><strong>velocityX</strong> <span id="log-prop-velocityX"></span></li>
<li><strong>velocityY</strong> <span id="log-prop-velocityY"></span></li>
<li><strong>interimAngle</strong> <span id="log-prop-interimAngle"></span></li>
<li><strong>interimDirection</strong> <span id="log-prop-interimDirection"></span></li>
<li><strong>scale</strong> <span id="log-prop-scale"></span></li>
<li><strong>rotation</strong> <span id="log-prop-rotation"></span>°</li>
<li><strong>target</strong> <span id="log-prop-target"></span></li>
</ul>
</div>
<div id="hitarea" class="hitarea"></div>
</div>
<!--
<textarea id="debug_log" rows="45"></textarea>
-->
<!-- jQuery is just for the demo! Hammer.js works without jQuery :-) -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="../../hammer.js"></script>
<script src="../../plugins/hammer.fakemultitouch.js"></script>
<script src="../../plugins/hammer.showtouches.js"></script>
<script>
Hammer.plugins.showTouches();
Hammer.plugins.fakeMultitouch();
function getEl(id) {
return document.getElementById(id);
}
/*
var debug_log_el = getEl('debug_log');
debug_log_el.value = '';
function debug() {
console.log(arguments)
debug_log_el.value = "\n"+ Array.prototype.slice.call(arguments,0).join(", ") + debug_log_el.value;
}
*/
var hammertime;
var log_elements = {};
var prevent_scroll_drag = true;
var console_log = false;
$("#prevent-default").click(function() {
hammertime.options.prevent_default = this.checked;
});
$("#console-log").click(function() {
console_log = this.checked;
});
$("#reset").click(function() {
$("#events-list li").removeClass("active");
$("ul.properties li span").text("");
});
function getLogElement(type, name) {
var el = log_elements[type + name];
if(!el) {
return log_elements[type + name] = getEl("log-"+ type +"-"+ name);
}
return el;
}
// log properties
var properties = ['gesture','center','deltaTime','angle','direction','interimAngle','interimDirection',
'distance','deltaX','deltaY','velocityX','velocityY', 'pointerType',
'scale','rotation','touches','target'];
function logEvent(ev) {
if(!ev.gesture) {
return;
}
if(console_log) {
console.log(ev.type, ev.gesture.eventType, ev);
}
// highlight gesture
var event_el = getLogElement('gesture', ev.type);
event_el.className = "active";
for(var i= 0,len=properties.length; i<len; i++) {
var prop = properties[i];
var value = ev.gesture[prop];
switch(prop) {
case 'center':
value = value.pageX +"x"+ value.pageY;
break;
case 'gesture':
value = ev.type;
break;
case 'target':
value = ev.gesture.target.tagName;
break;
case 'touches':
value = ev.gesture.touches.length;
break;
}
getLogElement('prop', prop).innerHTML = value;
}
}
// get all the events
var all_events = [];
$("#events-list li").each(function() {
var li = $(this);
var type = li.text();
li.attr("id", "log-gesture-"+type);
all_events.push(type);
});
// start!
hammertime = Hammer(getEl('hitarea'), {
prevent_default: true,
no_mouseevents: true,
gesture: true
})
.on(all_events.join(" "), logEvent);
</script>
<script src="assets/js/ga.js" async></script>
</body>
</html>