| 1 | <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
|---|
| 2 | <html> |
|---|
| 3 | <head> |
|---|
| 4 | <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
|---|
| 5 | <meta name="viewport" content="width=device-width,maximum-scale=1,minimum-scale=1,user-scalable=no" /> |
|---|
| 6 | <title>Dojo Touch Testing</title> |
|---|
| 7 | <style type="text/css"> |
|---|
| 8 | #test { |
|---|
| 9 | width: 300px; |
|---|
| 10 | height: 150px; |
|---|
| 11 | border: 1px solid #7FB0DB; |
|---|
| 12 | background-color: #7FB0DB; |
|---|
| 13 | } |
|---|
| 14 | #log { |
|---|
| 15 | width: 300px; |
|---|
| 16 | height: 200px; |
|---|
| 17 | } |
|---|
| 18 | #dohDiv{ |
|---|
| 19 | display: none; |
|---|
| 20 | } |
|---|
| 21 | </style> |
|---|
| 22 | <script type="text/javascript" src="../dojo.js" djConfig="parseOnLoad: true"></script> |
|---|
| 23 | <script> |
|---|
| 24 | require([ |
|---|
| 25 | "dojo/_base/html", |
|---|
| 26 | "dojo/_base/event", |
|---|
| 27 | "dojo/ready", |
|---|
| 28 | "dojo/touch", |
|---|
| 29 | "dojo/on", |
|---|
| 30 | "dojo/has", |
|---|
| 31 | "dojo/dom-style", |
|---|
| 32 | "doh/runner" |
|---|
| 33 | ], function(html, evt, ready, touch, on, has, domStyle, doh){ |
|---|
| 34 | ready(function(){ |
|---|
| 35 | var action = function(e){ |
|---|
| 36 | evt.stop(e); |
|---|
| 37 | html.byId("log").innerHTML = ""; |
|---|
| 38 | var info = "[Touch Event]: " + e.type + "<br/> ------ Event Properties: ------<br/>"; |
|---|
| 39 | for(var i in e){ |
|---|
| 40 | if(i == "touches" || i == "targetTouches" || i == "changedTouches"){ |
|---|
| 41 | info += i + ": " + e[i].length + "<br/>"; |
|---|
| 42 | }else{ |
|---|
| 43 | if(typeof e[i] != "function"){ |
|---|
| 44 | info += " " + i + ": " + e[i] + "<br/>"; |
|---|
| 45 | } |
|---|
| 46 | } |
|---|
| 47 | } |
|---|
| 48 | html.byId("log").innerHTML += info + "<br/>"; |
|---|
| 49 | }; |
|---|
| 50 | |
|---|
| 51 | var node = html.byId("test"); |
|---|
| 52 | |
|---|
| 53 | //1. should work well on PC and touch devices |
|---|
| 54 | on(node, touch.press, action); |
|---|
| 55 | on(node, touch.move, action); |
|---|
| 56 | on(node, touch.release, action); |
|---|
| 57 | on(node, touch.cancel, action); |
|---|
| 58 | |
|---|
| 59 | |
|---|
| 60 | // //2. should work well across touch devices |
|---|
| 61 | // on(node, "touchstart", action); |
|---|
| 62 | // on(node, "touchmove", action); |
|---|
| 63 | // on(node, "touchend", action); |
|---|
| 64 | // on(node, "touchcancel", action); |
|---|
| 65 | // on(node, "orientationchange", action); |
|---|
| 66 | |
|---|
| 67 | //3. we can also isolate mouse/touch handlers |
|---|
| 68 | on(node, "touchend", function(){alert("isolated touchend handler");}); |
|---|
| 69 | on(node, "mouseup", function(){alert("isolated mouseup handler");}); |
|---|
| 70 | |
|---|
| 71 | //================================= DoH tests - only running on desktop ====================== |
|---|
| 72 | if(has("touch")){ |
|---|
| 73 | //FIXME - DoH not supported on touch device |
|---|
| 74 | return; |
|---|
| 75 | } |
|---|
| 76 | var dohDiv = html.byId('dohDiv'); |
|---|
| 77 | domStyle.set(dohDiv, {display: 'block'}); |
|---|
| 78 | |
|---|
| 79 | function setObj(obj, e){ |
|---|
| 80 | obj.type = e.type; |
|---|
| 81 | obj.target = e.target; |
|---|
| 82 | } |
|---|
| 83 | function assert(obj, type, target){ |
|---|
| 84 | doh.assertEqual(type, obj.type); |
|---|
| 85 | doh.assertEqual(target, obj.target); |
|---|
| 86 | } |
|---|
| 87 | |
|---|
| 88 | doh.register("dojo.touch", [ |
|---|
| 89 | function press(){ |
|---|
| 90 | var executed, obj = {}; |
|---|
| 91 | on(dohDiv, touch.press, function(e){ |
|---|
| 92 | //console.log(e.type); |
|---|
| 93 | executed = true; |
|---|
| 94 | setObj(obj, e); |
|---|
| 95 | }); |
|---|
| 96 | on.emit(dohDiv, 'mousedown', {}); |
|---|
| 97 | doh.assertTrue(executed, 'dojo.touch.press not fired'); |
|---|
| 98 | assert(obj, 'mousedown', dohDiv); |
|---|
| 99 | }, |
|---|
| 100 | function move(){ |
|---|
| 101 | var executed, obj = {}; |
|---|
| 102 | on(dohDiv, touch.move, function(e){ |
|---|
| 103 | //console.log(e.type); |
|---|
| 104 | executed = true; |
|---|
| 105 | setObj(obj, e); |
|---|
| 106 | }); |
|---|
| 107 | on.emit(dohDiv, 'mousemove', {}); |
|---|
| 108 | doh.assertTrue(executed, 'dojo.touch.move not fired'); |
|---|
| 109 | assert(obj, 'mousemove', dohDiv); |
|---|
| 110 | }, |
|---|
| 111 | function release(){ |
|---|
| 112 | var executed, obj = {}; |
|---|
| 113 | on(dohDiv, touch.release, function(e){ |
|---|
| 114 | //console.log(e.type); |
|---|
| 115 | executed = true; |
|---|
| 116 | setObj(obj, e); |
|---|
| 117 | }); |
|---|
| 118 | on.emit(dohDiv, 'mouseup', {screenX: 0, screenY: 50}); |
|---|
| 119 | doh.assertTrue(executed, 'dojo.touch.release not fired'); |
|---|
| 120 | assert(obj, 'mouseup', dohDiv); |
|---|
| 121 | }, |
|---|
| 122 | function cancel(){ |
|---|
| 123 | var executed, obj = {}; |
|---|
| 124 | on(dohDiv, touch.cancel, function(e){ |
|---|
| 125 | executed = true; |
|---|
| 126 | setObj(obj, e); |
|---|
| 127 | }); |
|---|
| 128 | on.emit(dohDiv, 'mouseout', {screenX: 0, screenY: 50}); |
|---|
| 129 | doh.assertTrue(executed, 'dojo.touch.cancel not fired'); |
|---|
| 130 | assert(obj, 'mouseout', dohDiv); |
|---|
| 131 | } |
|---|
| 132 | ]); |
|---|
| 133 | doh.run(); |
|---|
| 134 | }); |
|---|
| 135 | }); |
|---|
| 136 | </script> |
|---|
| 137 | </head> |
|---|
| 138 | <body> |
|---|
| 139 | <div id="test"></div> |
|---|
| 140 | <div id="log"></div> |
|---|
| 141 | <br/> |
|---|
| 142 | <div id="dohDiv">doh</div> |
|---|
| 143 | </body> |
|---|
| 144 | </html> |
|---|
