Updated

2013-02-20 10:38:25 +01:00
parent 17c3936ab6
commit 5d14b9e2d4
1919 changed files with 559755 additions and 2588 deletions
--- a/master/examples/test_touch.html
+++ b/master/examples/test_touch.html
@@ -0,0 +1,144 @@
+<!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>