source: Dev/trunk/src/client/dojo/tests/test_touch.html @ 532

Last change on this file since 532 was 483, checked in by hendrikvanantwerpen, 11 years ago

Added Dojo 1.9.3 release.
File size: 12.2 KB
Line 
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                        #innertest {
15                                border: 1px solid white;
16                                width: 100px;
17                                height: 75px;
18                                background-color: white;
19                        }
20                        #test2 {
21                                /* for testing touch.move */
22                                width: 200px;
23                                height: 50px;
24                                border: 1px solid yellow;
25                                background-color: yellow;
26                        }
27                        #test3 {
28                                width: 300px;
29                                height: 150px;
30                                border: 1px solid red;
31                                background-color: red;     
32                        }
33                        #innertest3 {
34                                border: 1px solid white;
35                                width: 250px;
36                                height: 75px;
37                                background-color: white;
38                        }
39                        #current, #log {
40                                width: 300px;
41                                height: 200px;
42                                float: left;
43                        }
44                        #dohDiv {
45                                display: none;
46                                background-color:#800300;
47                                color: wheat;
48                        }
49                </style>
50                <script type="text/javascript" src="../dojo.js" data-dojo-config="async: true"></script>
51                <script>
52                        require([
53                                "dojo/_base/array",
54                                "dojo/dom",
55                                "dojo/_base/lang",
56                                "dojo/on",
57                                "dojo/has",
58                                "doh/runner",
59                                "dojo/dom-geometry",
60                                "dojo/dom-style",
61                                "dojo/domReady",
62                                "dojo/touch"
63                        ], function(array, dom, lang, on, has, doh, domGeom, domStyle, domReady, touch){
64
65                                var action = function(comment, e){
66                                        // summary:
67                                        //              Callback to display into when events fire
68                                        // Detailed log of the most recent event:
69
70                                        dom.byId("current").innerHTML = "Most recent non touch.move event:";
71                                        var info = "[Touch Event]: " + e.type + " on " + comment +
72                                                        "<br/> ------ Event Properties: ------<br/>";
73                                        for(var i in e){
74                                          if(i == "touches" || i == "targetTouches" || i == "changedTouches"){
75                                                info += i + ": " + e[i].length + "<br/>";
76                                          }else{
77                                                if(typeof e[i] != "function"){
78                                                  info += " " + i + ": " + e[i] + "<br/>";
79                                                }
80                                          }
81                                        }
82                                        dom.byId("current").innerHTML += info + "<br/>";
83
84                                        // This is a log of all events, most recent first:
85                                        dom.byId("log").innerHTML = comment + "{type:" +
86                                                        e.type + ", target:" + (e.target.id||e.target.tagName) +
87                                                        "}<br/>" + dom.byId("log").innerHTML;
88
89                                        e.preventDefault();
90                                };
91
92                                var node = dom.byId("test"),
93                                        innerNode = dom.byId("innertest");
94
95                                //1. should work well on PC and touch devices
96                                array.forEach(["test", "innertest"], function(name){
97                                        for(var event in touch){
98                                                if(event != "move"){
99                                                        on(dom.byId(name), touch[event], lang.hitch(null, action, "on("+name+", touch."+event+")-->"));
100                                                }
101                                        }
102                                });
103
104                                on(dom.byId("test2"), touch.move, function(e){
105                                        dom.byId("log").innerHTML = "on(touch2, touch.move)--> {type:" +
106                                                        e.type + ", target:" + (e.target.id||e.target.tagName) +
107                                                        ", pageX = " + e.pageX + ", pageY = " + e.pageY +
108                                                        "}<br/>" + dom.byId("log").innerHTML;
109
110
111                                        // this should stop scrolling
112                                        e.preventDefault();
113
114                                        // stopPropagation() should work too
115                                        e.stopPropagation();
116                                });
117
118//                                      //2. should work well across touch devices
119//                                      on(node, "touchstart", action);
120//                                      on(node, "touchmove", action);
121//                                      on(node, "touchend", action);
122//                                      on(node, "touchcancel", action);
123//                                      on(node, "orientationchange", action);
124
125                                dom.byId("test3").dojoClick = true;
126                                on(dom.byId("test3"), "click", function(e){
127                                        if(has("touch")){
128                                                // click should be a synthetic click
129                                                dom.byId("log").innerHTML = (e._dojo_click ? "Synthetic click received in test3" : "ERROR: native click received in test3") + "<br/>" + dom.byId("log").innerHTML;
130                                        }else{
131                                                // click should be a native click
132                                                dom.byId("log").innerHTML = (e._dojo_click ? "ERROR: Synthetic click received in test3 (non touch device)" : "Native click received in test3  (non touch device)") + "<br/>" + dom.byId("log").innerHTML;
133                                        }
134                                });
135                                dom.byId("innertest3").dojoClick = false;
136                                on(dom.byId("innertest3"), "click", function(e){
137                                        // click should be a native click
138                                        dom.byId("log").innerHTML = (e._dojo_click ? "ERROR: Synthetic click received in innertest3" : "Native click received in innertest3") + "<br/>" + dom.byId("log").innerHTML;;
139                                        e.stopPropagation();
140                                });
141
142                                /**
143                                 * Fires an event.  All coordinates are defaulted to zero.
144                                 * @param target the target element.
145                                 * @param eventType touchstart, touchmove or touchend, or mouse or MSPointer equivalents.
146                                 */
147                                function emit(target, eventType, options){
148                                        var targetPos = domGeom.position(target);
149
150                                        options = lang.mixin({
151                                                pageX: targetPos.x + targetPos.w / 2,
152                                                pageY: targetPos.y + targetPos.h / 2
153                                        }, options || {});
154
155                                        if(document.createEvent && target.dispatchEvent){
156                                                var touch = {
157                                                        identifier: (new Date()).getTime(),
158                                                        target: target,
159                                                        screenX: 0,
160                                                        screenY: 0,
161                                                        clientX: 0,
162                                                        clientY: 0,
163                                                        pageX: 0,
164                                                        pageY: 0
165                                                };
166                                                lang.mixin(touch, options || {});
167
168                                                var mouseEvent = document.createEvent("MouseEvent");
169                                                mouseEvent.initMouseEvent(
170                                                                eventType,
171                                                                true,
172                                                                true,
173                                                                target.ownerDocument.defaultView,
174                                                                0,
175                                                                0,
176                                                                0,
177                                                                0,
178                                                                0,
179                                                                false,
180                                                                false,
181                                                                false,
182                                                                false,
183                                                                0,
184                                                                document.body   // relatedTarget, for mouseout events
185                                                );
186
187                                                if(/touch/.test(eventType)){
188                                                        mouseEvent['touches'] = [touch];
189                                                        mouseEvent['targetTouches'] = [touch];
190                                                        mouseEvent['changedTouches'] = [touch];
191                                                }
192
193                                                target.dispatchEvent(mouseEvent);
194                                        }else{
195                                                options.bubbles = true;
196                                                options.cancelable = true;
197                                                on.emit(target, eventType, options);
198                                        }
199                                }
200
201                                // if we declare "dojo/domReady!" touch.js will register its handler *after* the test execution
202                                // so here we explicitly call domReady.
203                                domReady(function(){
204                                        var dohDiv = dom.byId('dohDiv');
205                                        domStyle.set(dohDiv, {display: 'block'});
206
207                                        // Function to register tests on mouse events, touch events, or Microsoft's pointer-ish events
208                                        function register(testName, downEvent, moveEvent, upEvent, cancelEvent){
209                                                doh.register(testName, [
210                                                        function press(){
211                                                                var executed, target;
212                                                                on.once(dohDiv, touch.press, function(e){
213                                                                        //console.log(e.type);
214                                                                        executed = true;
215                                                                        target = e.target;
216                                                                });
217                                                                emit(dohDiv, downEvent);
218                                                                doh.t(executed, 'dojo.touch.press fired');
219                                                                doh.is(dohDiv, target, "target");
220                                                        },
221                                                        function move(){
222                                                                var executed, target;
223                                                                on.once(dohDiv, touch.move, function(e){
224                                                                        //console.log(e.type);
225                                                                        executed = true;
226                                                                        target = e.target;
227                                                                });
228                                                                emit(dohDiv, moveEvent);
229                                                                doh.t(executed, 'dojo.touch.move fired');
230                                                                doh.is(dohDiv, target, "target");
231                                                        },
232                                                        function release(){
233                                                                var executed, target;
234                                                                on.once(dohDiv, touch.release, function(e){
235                                                                        //console.log(e.type);
236                                                                        executed = true;
237                                                                        target = e.target;
238                                                                });
239                                                                emit(dohDiv, upEvent, {screenX: 0, screenY: 50});
240                                                                doh.t(executed, 'dojo.touch.release fired');
241                                                                doh.is(dohDiv, target, "target");
242                                                        },
243                                                        function cancel(){
244                                                                var executed, target;
245                                                                on.once(dohDiv, touch.cancel, function(e){
246                                                                        executed = true;
247                                                                        target = e.target;
248                                                                });
249                                                                emit(dohDiv, cancelEvent, {
250                                                                        relatedTarget: document.body,   // needed for mouseout event
251                                                                        screenX: 0,
252                                                                        screenY: 50,
253                                                                        pageX: 0,
254                                                                        pageY: 0
255                                                                });
256                                                                doh.t(executed, 'dojo.touch.cancel fired');
257                                                                doh.is(dohDiv, target, "target");
258                                                        },
259                                                        function movePreventDefault(){
260                                                                /**
261                                                                 * checks that calling preventDefault() on dojo "touch.move" event
262                                                                 * prevents default behavior on the underlying native event
263                                                                 * Ref. #17220
264                                                                 * window
265                                                                 *    |    =>    (1) listen and prevent default on dojo "touch.move" event
266                                                                 *    |    =>    (2) listen and check default behavior status on native "touchmove" event
267                                                                 *    |
268                                                                 *    +--dohDiv    =>    (3) dispatch native "touchmove" event
269                                                                 **/
270                                                                var prevented = false;
271
272                                                                // (1) register dojo "touch.move" listener
273                                                                on.once(dohDiv, touch.move, function(e){
274                                                                        e.preventDefault();
275                                                                        //console.log("prevent default on event " + e.type);
276                                                                });
277
278                                                                // (2) register listener for native event (touchmove, mousemove, or MSPointerMove)
279                                                                // Call addEventListener() except on IE6-8 where that's not supported
280                                                                function listener(e){
281                                                                        prevented = e.defaultPrevented;
282                                                                        //console.log("native listener, prevented = " + prevented);
283                                                                }
284                                                                if(window.addEventListener){
285                                                                        window.addEventListener(moveEvent, listener);
286                                                                }else{
287                                                                        // IE6-8 code path
288                                                                        on.once(document.body, moveEvent, listener);
289                                                                }
290
291                                                                // (3) dispatch native touchmove/mousemove/MSPointerMove event
292                                                                emit(dohDiv, moveEvent);
293                                                                doh.t(prevented, 'prevented');
294
295                                                                if(window.addEventListener){
296                                                                        window.removeEventListener(moveEvent, listener);
297                                                                }
298                                                        }
299                                                ]);
300                                        }
301
302                                        // Setup tests relevant for this platform
303                                        if(navigator.pointerEnabled){
304                                                register('Pointer events', 'pointerdown', 'pointermove', 'pointerup',
305                                                                has('touch') ? 'pointercancel' : 'mouseout');
306                                        }else if(navigator.msPointerEnabled){
307                                                register('MSPointer events', 'MSPointerDown', 'MSPointerMove', 'MSPointerUp',
308                                                                has('touch') ? 'MSPointerCancel' : 'mouseout');
309                                        }else{
310                                                // Mouse is always supported, even on devices with touch capability.
311                                                // Test mouse first because once we start emitting touch events, dojo/touch ignores mouse events
312                                                // for 1000ms.
313                                                register('mouse events', 'mousedown', 'mousemove', 'mouseup', 'mouseout');
314
315                                                if(has("touch")){
316                                                        register('touch events', 'touchstart', 'touchmove', 'touchend', 'touchcancel');
317                                                }
318                                        }
319
320                                        if(has("touch")){
321                                                doh.registerTest("synthetic clicks", {
322                                        name: "Synthetic click disabled",
323                                        timeout: 1000,
324                                        runTest: function(){
325                                                                /**
326                                                                 * check that synthetic click is NOT fired when dojoClick value is set
327                                                                 * to falsy on a dom element and touch is released inside the element.
328                                                                 * Note that synthetic click is fired ONLY on touch enabled devices (touch or MSPointer).
329                                                                 */
330                                                                var domEltWithDisabledSyntheticClick = dom.byId("innertest3");
331                                                                var box = domEltWithDisabledSyntheticClick.getBoundingClientRect(); // position in viewport coordinates
332                                                                var coordInsideEltWithDisabledSyntheticClick = {x: box.right - box.left, y:box.bottom - box.top};
333                                                                var clicked = false;
334                                                                // register the click handler
335                                                                function listener(e){
336                                                                        alert("click fired ??");
337                                                                        clicked = true;
338                                                                }
339                                                                domEltWithDisabledSyntheticClick.addEventListener("click", listener);
340                                                                // emit "touchstart" and "touchend" events inside the element
341                                                                emit(domEltWithDisabledSyntheticClick, "touchstart", {screenX: coordInsideEltWithDisabledSyntheticClick.x, screenY: coordInsideEltWithDisabledSyntheticClick.y});
342                                                                emit(domEltWithDisabledSyntheticClick, "touchend", {screenX: coordInsideEltWithDisabledSyntheticClick.x, screenY: coordInsideEltWithDisabledSyntheticClick.y});
343                                                                var deferred = new doh.Deferred();
344                                                                // without deferred the click handler is called after the doh method ends.
345                                                                setTimeout(deferred.getTestCallback(function(){
346                                                                        doh.t(!clicked, 'synthetic click fired');
347                                                                }), 0);
348                                                                return deferred;
349                                        }
350                                                });
351                                        }
352
353                                        doh.run();
354                                });
355                        });
356                </script>
357        </head>
358        <body>
359                <div id="test">
360                        test
361                        <div id="innertest">
362                                inner test
363                        </div>
364                </div>
365                <div id="test2">
366                        touch.move
367                </div>
368                <div id="test3">
369                        On touch devices, synthetic clicks are enabled in this area.
370                        <div id="innertest3">
371                                On touch devices, synthetic clicks disabled in this area.
372                        </div>
373                </div>
374                <div id="dohDiv">doh</div>
375                <div id="current"></div>
376                <div id="log"></div>
377                <br style="clear:both"/>
378        </body>
379</html>
Note: See TracBrowser for help on using the repository browser.