<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<title>Dojo Touch Testing</title>
<style type="text/css">
#test {
width: 300px;
height: 150px;
border: 1px solid #7FB0DB;
background-color: #7FB0DB;
}
#innertest {
border: 1px solid white;
width: 100px;
heigh: 75px;
background-color: white;
}
#test2 {
/* for testing touch.move */
width: 200px;
height: 50px;
border: 1px solid yellow;
background-color: yellow;
}
#current, #log {
width: 300px;
height: 200px;
float: left;
}
#dohDiv{
display: none;
}
</style>
<script type="text/javascript" src="../dojo.js" data-dojo-config="async: true"></script>
<script>
require([
"dojo/_base/array",
"dojo/dom",
"dojo/_base/lang",
"dojo/touch",
"dojo/on",
"dojo/has",
"dojo/domReady!"
], function(array, dom, lang, touch, on, has){
var mspointer = navigator.msPointerEnabled; // IE10+ PSPointer events?
var action = function(comment, e){
// summary:
// Callback to display into when events fire
// Detailed log of the most recent event:
dom.byId("current").innerHTML = "Most recent non touch.move event:";
var info = "[Touch Event]: " + e.type + " on " + comment +
"<br/> ------ Event Properties: ------<br/>";
for(var i in e){
if(i == "touches" || i == "targetTouches" || i == "changedTouches"){
info += i + ": " + e[i].length + "<br/>";
}else{
if(typeof e[i] != "function"){
info += " " + i + ": " + e[i] + "<br/>";
}
}
}
dom.byId("current").innerHTML += info + "<br/>";
// This is a log of all events, most recent first:
dom.byId("log").innerHTML = comment + "{type:" +
e.type + ", target:" + (e.target.id||e.target.tagName) +
"}<br/>" + dom.byId("log").innerHTML;
e.preventDefault();
};
var node = dom.byId("test"),
innerNode = dom.byId("innertest");
//1. should work well on PC and touch devices
array.forEach(["test", "innertest"], function(name){
for(var event in touch){
if(event != "move"){
on(dom.byId(name), touch[event], lang.hitch(null, action, "on("+name+", touch."+event+")-->"));
}
}
});
on(dom.byId("test2"), touch.move, function(e){
dom.byId("log").innerHTML = "on(touch2, touch.move)--> {type:" +
e.type + ", target:" + (e.target.id||e.target.tagName) +
", pageX = " + e.pageX + ", pageY = " + e.pageY +
"}<br/>" + dom.byId("log").innerHTML;
// this should stop scrolling
e.preventDefault();
// stopPropagation() should work too
e.stopPropagation();
});
// //2. should work well across touch devices
// on(node, "touchstart", action);
// on(node, "touchmove", action);
// on(node, "touchend", action);
// on(node, "touchcancel", action);
// on(node, "orientationchange", action);
//================================= DoH tests - only running on desktop ======================
if(has("touch")){
//FIXME - DoH not supported on touch device
return;
}
require(["doh/runner", "dojo/dom-style"], function(doh, domStyle){
var dohDiv = dom.byId('dohDiv');
domStyle.set(dohDiv, {display: 'block'});
function setObj(obj, e){
obj.type = e.type;
obj.target = e.target;
}
function assert(obj, type, target){
doh.assertEqual(type, obj.type);
doh.assertEqual(target, obj.target);
}
doh.register("dojo.touch", [
function press(){
var executed, obj = {};
on(dohDiv, touch.press, function(e){
//console.log(e.type);
executed = true;
setObj(obj, e);
});
on.emit(dohDiv, mspointer?'MSPointerDown':'mousedown', {});
doh.assertTrue(executed, 'dojo.touch.press not fired');
assert(obj, mspointer?'MSPointerDown':'mousedown', dohDiv);
},
function move(){
var executed, obj = {};
on(dohDiv, touch.move, function(e){
//console.log(e.type);
executed = true;
setObj(obj, e);
});
on.emit(dohDiv, mspointer?'MSPointerMove':'mousemove', {});
doh.assertTrue(executed, 'dojo.touch.move not fired');
assert(obj, mspointer?'MSPointerMove':'mousemove', dohDiv);
},
function release(){
var executed, obj = {};
on(dohDiv, touch.release, function(e){
//console.log(e.type);
executed = true;
setObj(obj, e);
});
on.emit(dohDiv, mspointer?'MSPointerUp':'mouseup', {screenX: 0, screenY: 50});
doh.assertTrue(executed, 'dojo.touch.release not fired');
assert(obj, mspointer?'MSPointerUp':'mouseup', dohDiv);
},
function cancel(){
var executed, obj = {};
on(dohDiv, touch.cancel, function(e){
executed = true;
setObj(obj, e);
});
on.emit(dohDiv, 'mouseout', {screenX: 0, screenY: 50});
doh.assertTrue(executed, 'dojo.touch.cancel not fired');
assert(obj, 'mouseout', dohDiv);
}
]);
doh.run();
});
});
</script>
</head>
<body>
<div id="test">
test
<div id="innertest">
inner test
</div>
</div>
<div id="test2">
touch.move
</div>
<div id="current"></div>
<div id="log"></div>
<br style="clear:both"/>
<div id="dohDiv">doh</div>
</body>
</html>