144 lines
4.3 KiB
HTML
144 lines
4.3 KiB
HTML
<!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;
|
|
}
|
|
#log {
|
|
width: 300px;
|
|
height: 200px;
|
|
}
|
|
#dohDiv{
|
|
display: none;
|
|
}
|
|
</style>
|
|
<script type="text/javascript" src="../dojo.js" djConfig="parseOnLoad: true"></script>
|
|
<script>
|
|
require([
|
|
"dojo/_base/html",
|
|
"dojo/_base/event",
|
|
"dojo/ready",
|
|
"dojo/touch",
|
|
"dojo/on",
|
|
"dojo/has",
|
|
"dojo/dom-style",
|
|
"doh/runner"
|
|
], function(html, evt, ready, touch, on, has, domStyle, doh){
|
|
ready(function(){
|
|
var action = function(e){
|
|
evt.stop(e);
|
|
html.byId("log").innerHTML = "";
|
|
var info = "[Touch Event]: " + e.type + "<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/>";
|
|
}
|
|
}
|
|
}
|
|
html.byId("log").innerHTML += info + "<br/>";
|
|
};
|
|
|
|
var node = html.byId("test");
|
|
|
|
//1. should work well on PC and touch devices
|
|
on(node, touch.press, action);
|
|
on(node, touch.move, action);
|
|
on(node, touch.release, action);
|
|
on(node, touch.cancel, action);
|
|
|
|
|
|
// //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);
|
|
|
|
//3. we can also isolate mouse/touch handlers
|
|
on(node, "touchend", function(){alert("isolated touchend handler");});
|
|
on(node, "mouseup", function(){alert("isolated mouseup handler");});
|
|
|
|
//================================= DoH tests - only running on desktop ======================
|
|
if(has("touch")){
|
|
//FIXME - DoH not supported on touch device
|
|
return;
|
|
}
|
|
var dohDiv = html.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, 'mousedown', {});
|
|
doh.assertTrue(executed, 'dojo.touch.press not fired');
|
|
assert(obj, '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, 'mousemove', {});
|
|
doh.assertTrue(executed, 'dojo.touch.move not fired');
|
|
assert(obj, '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, 'mouseup', {screenX: 0, screenY: 50});
|
|
doh.assertTrue(executed, 'dojo.touch.release not fired');
|
|
assert(obj, '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"></div>
|
|
<div id="log"></div>
|
|
<br/>
|
|
<div id="dohDiv">doh</div>
|
|
</body>
|
|
</html> |