source: Dev/trunk/src/client/dojox/analytics/tests/test_analytics-touchEvents.html

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

Added Dojo 1.9.3 release.
File size: 5.7 KB
Line 
1<!DOCTYPE html>
2<html>
3        <head>
4                <meta charset="utf-8">
5
6                <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
7                <meta name="apple-mobile-web-app-capable" content="yes" />
8                <title>DojoX Analytics Touch Test</title>
9                <style type="text/css">
10                        @import "../../mobile/themes/iphone/base.css";
11                        @import "../../mobile/themes/iphone/TabBar.css";
12                        #outerHeading {
13                                height: 240px;
14                        }
15                        #outer {
16                                width: 100%;
17                                height: 240px;
18                                border: 1px solid #54A201;
19                                background-color: #54A201;
20                        }
21                        #inner {
22                                width: 250px;
23                                height: 110px;
24                                border: 1px solid #7FB0DB;
25                                background-color: #7FB0DB
26                        }
27                        #log1 {
28                                width: 100%;
29                                height: 50px;
30                        }
31                </style>
32                <!-- required: dojo.js Update analyticsUrl: to point to your test server-->
33                <script src="../../../dojo/dojo.js"
34                        data-dojo-config="parseOnLoad:true, async:true, isDebug: true, usePlainJson: true,
35                                        sendMethod: 'script', sendInterval: 5000, mblAlwaysHideAddressBar: true,
36                                        // the line below can be used to override the touchSampleDelay for touchMove,
37                                        // targetProps, textContentMaxChars and showTouchesDetails
38                                        //touchSampleDelay : 500, targetProps : ['id','className'],
39                                        //textContentMaxChars : 12, showTouchesDetails : false,
40                                        analyticsUrl: 'http://dojotoolkit.org/~dmachi/dojo-1.0/dojox/analytics/logger/dojoxAnalytics.php'">
41                </script>
42
43                <script>
44                        require([
45                                "dojo/ready",
46                                "dojo/parser",
47                                "dojox/mobile",                 // This is a mobile app.
48                                "dojox/mobile/ScrollableView",
49                                "dojox/mobile/compat", // This mobile app supports running on desktop browsers
50                                "dojox/analytics",
51                                // this plugin returns the information dojo collects when it launches
52                                "dojox/analytics/plugins/dojo",
53                                // this plugin return the information the window has when it launches
54                                // and it also ties to a few events such as window.option
55                                "dojox/analytics/plugins/window",
56                                // this plugin tracks console. message, It logs console.error, warn, and
57                                // info messages to the tracker.  It also defines console.rlog() which
58                                // can be used to log only to the server.  Note that if isDebug() is disabled
59                                // you will still see the console messages on the sever, but not in the actual
60                                // browser console.
61                                "dojox/analytics/plugins/consoleMessages",
62                                // tracks where a dojo.touch.press and touch.release is done on a page
63                                "dojox/analytics/plugins/touchPress",
64                                // tracks where a dojo.touch.move is on a page an what it is over, periodically sampling
65                                // and storing this data
66                                "dojox/analytics/plugins/touchMove",
67                                "dojox/analytics/plugins/idle",
68                                "dojo/dom",
69                                "dojo/touch",
70                                "dojo/on",
71                                "dojo/_base/window",
72                                "dojo/has",
73                                "dojo/dom-style",
74                                "dojox/mobile/Heading"
75                        ], function(ready, parser, mobile, scrollableView, compat,
76                                        analytics, dojoplugin, windowplugin, consolemsgplugin,
77                                        touchpressplugin, touchmoveplugin, idleplugin,
78                                        dom, touch, on, win, has, domStyle){
79                                ready(function(){
80                                        var action2 = function(e){
81                                                dom.byId("log1").innerHTML = "";
82                                                var info = " e.target.id=" + e.target.id + " | e.type=" + e.type + " | e.currentTarget.id="+ e.currentTarget.id+ " | e.touches="+ e.touches;
83                                                dom.byId("log1").innerHTML += info;
84                                        };
85
86                                        var action = function(e){
87                                                dom.byId("log").innerHTML = "";
88                                                var info = "[Touch Event]: " + e.type + "<br/> ------ Event Properties: ------<br/>";
89                                                for(var i in e){
90                                                  if(i == "touches" || i == "targetTouches" || i == "changedTouches"){
91                                                        info += i + ": " + e[i].length + "<br/>";
92                                                  }else{
93                                                        if(typeof e[i] != "function"){
94                                                          info += " " + i + ": " + e[i] + "<br/>";
95                                                        }
96                                                  }
97                                                }
98                                                if(e.touches){
99                                                        if(e.touches.length == 0){
100                                                                info += "[touches]: " + e.touches + "<br/> ------ Event touches: ------<br/>";
101                                                                        for(var i in e.touches){
102                                                                                //console.log("includes "+i+" = "+e.touches[i]);
103                                                                                if(i == "target"){
104                                                                                        info += i + ": " + e.touches[i].id + "<br/>";
105                                                                                }else{
106                                                                                        if(typeof e.touches[i] != "function"){
107                                                                                                info += " " + i + ": " + e.touches[i] + "<br/>";
108                                                                                        }
109                                                                                }
110                                                                        }
111                                                        }else{
112                                                                info += "[touches length]: " + e.touches.length + "<br/> ------ Event touches: ------<br/>";
113                                                                for(var j in e.touches){
114                                                                        for(var i in e.touches[j]){
115                                                                                if(i == "target"){
116                                                                                        info += i + ": " + e.touches[j][i].id + "<br/>";
117                                                                                }else{
118                                                                                        if(typeof e.touches[j][i] != "function"){
119                                                                                                info += " touches["+j+"] " + i + ": " + e.touches[j][i] + "<br/>";
120                                                                                        }
121                                                                                }
122                                                                        }
123                                                                }
124                                                        }
125                                                }else{
126                                                        var info = "[Touch Event]: " + e.type + "<br/> ------ Event Properties: ------<br/>";
127                                                }
128                                                dom.byId("log").innerHTML += info;
129                                        };
130
131                                        //1. should work well on PC and touch devices
132                                        on(outer, touch.press, action2);
133                                        on(outer, touch.move, action2);
134                                        on(outer, touch.release, action2);
135                                        on(outer, touch.cancel, action2);
136
137                                        // Event info, uncomment one of the lines below to see what the event returns
138                                        on(inner, touch.press, action);
139                                        //on(inner, touch.move, action);
140                                        //on(outer, touch.move, action);
141                                        //on(outer, touch.release, action);
142                                        //on(outer, "touchend", action);
143
144                                        on(win.doc, "orientationchange", function(e){
145                                                dom.byId("log1").innerHTML="";
146                                                dom.byId("log").innerHTML="";
147                                        });
148                                });
149                        });
150                </script>
151        </head>
152        <body style="visibility:hidden;">
153                <div id="categ" dojoType="dojox/mobile/ScrollableView"  selected="true">
154                        <div id="outerHeading" dojoType="dojox/mobile/Heading" fixed="top">
155                                <div id="outer">
156                                        outer content <div id="inner">inner content</div>
157                                </div>
158                        </div>
159                                <div id="log1"></div>
160                                <hr/>
161                                <div id="log"></div>
162
163                </div>
164        </body>
165</html>
Note: See TracBrowser for help on using the repository browser.