dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
166 lines (158 loc) • 5.88 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>DojoX Analytics Touch Test</title>
<style type="text/css">
@import "../../mobile/themes/iphone/base.css";
@import "../../mobile/themes/iphone/TabBar.css";
#outerHeading {
height: 240px;
}
#outer {
width: 100%;
height: 240px;
border: 1px solid #54A201;
background-color: #54A201;
}
#inner {
width: 250px;
height: 110px;
border: 1px solid #7FB0DB;
background-color: #7FB0DB
}
#log1 {
width: 100%;
height: 50px;
}
</style>
<!-- required: dojo.js Update analyticsUrl: to point to your test server-->
<script src="../../../dojo/dojo.js"
data-dojo-config="parseOnLoad:true, async:true, isDebug: true, usePlainJson: true,
sendMethod: 'script', sendInterval: 5000, mblAlwaysHideAddressBar: true,
// the line below can be used to override the touchSampleDelay for touchMove,
// targetProps, textContentMaxChars and showTouchesDetails
//touchSampleDelay : 500, targetProps : ['id','className'],
//textContentMaxChars : 12, showTouchesDetails : false,
analyticsUrl: 'http://dojotoolkit.org/~dmachi/dojo-1.0/dojox/analytics/logger/dojoxAnalytics.php'">
</script>
<script>
require([
"dojo/ready",
"dojo/parser",
"dojox/mobile", // This is a mobile app.
"dojox/mobile/ScrollableView",
"dojox/mobile/compat", // This mobile app supports running on desktop browsers
"dojox/analytics",
// this plugin returns the information dojo collects when it launches
"dojox/analytics/plugins/dojo",
// this plugin return the information the window has when it launches
// and it also ties to a few events such as window.option
"dojox/analytics/plugins/window",
// this plugin tracks console. message, It logs console.error, warn, and
// info messages to the tracker. It also defines console.rlog() which
// can be used to log only to the server. Note that if isDebug() is disabled
// you will still see the console messages on the sever, but not in the actual
// browser console.
"dojox/analytics/plugins/consoleMessages",
// tracks where a dojo.touch.press and touch.release is done on a page
"dojox/analytics/plugins/touchPress",
// tracks where a dojo.touch.move is on a page an what it is over, periodically sampling
// and storing this data
"dojox/analytics/plugins/touchMove",
"dojox/analytics/plugins/idle",
"dojo/dom",
"dojo/touch",
"dojo/on",
"dojo/_base/window",
"dojo/has",
"dojo/dom-style",
"dojox/mobile/Heading"
], function(ready, parser, mobile, scrollableView, compat,
analytics, dojoplugin, windowplugin, consolemsgplugin,
touchpressplugin, touchmoveplugin, idleplugin,
dom, touch, on, win, has, domStyle){
ready(function(){
var action2 = function(e){
dom.byId("log1").innerHTML = "";
var info = " e.target.id=" + e.target.id + " | e.type=" + e.type + " | e.currentTarget.id="+ e.currentTarget.id+ " | e.touches="+ e.touches;
dom.byId("log1").innerHTML += info;
};
var action = function(e){
dom.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/>";
}
}
}
if(e.touches){
if(e.touches.length == 0){
info += "[touches]: " + e.touches + "<br/> ------ Event touches: ------<br/>";
for(var i in e.touches){
//console.log("includes "+i+" = "+e.touches[i]);
if(i == "target"){
info += i + ": " + e.touches[i].id + "<br/>";
}else{
if(typeof e.touches[i] != "function"){
info += " " + i + ": " + e.touches[i] + "<br/>";
}
}
}
}else{
info += "[touches length]: " + e.touches.length + "<br/> ------ Event touches: ------<br/>";
for(var j in e.touches){
for(var i in e.touches[j]){
if(i == "target"){
info += i + ": " + e.touches[j][i].id + "<br/>";
}else{
if(typeof e.touches[j][i] != "function"){
info += " touches["+j+"] " + i + ": " + e.touches[j][i] + "<br/>";
}
}
}
}
}
}else{
var info = "[Touch Event]: " + e.type + "<br/> ------ Event Properties: ------<br/>";
}
dom.byId("log").innerHTML += info;
};
//1. should work well on PC and touch devices
on(outer, touch.press, action2);
on(outer, touch.move, action2);
on(outer, touch.release, action2);
on(outer, touch.cancel, action2);
// Event info, uncomment one of the lines below to see what the event returns
on(inner, touch.press, action);
//on(inner, touch.move, action);
//on(outer, touch.move, action);
//on(outer, touch.release, action);
//on(outer, "touchend", action);
on(win.doc, "orientationchange", function(e){
dom.byId("log1").innerHTML="";
dom.byId("log").innerHTML="";
});
});
});
</script>
</head>
<body style="visibility:hidden;">
<div id="categ" dojoType="dojox/mobile/ScrollableView" selected="true">
<div id="outerHeading" dojoType="dojox/mobile/Heading" fixed="top">
<div id="outer">
outer content <div id="inner">inner content</div>
</div>
</div>
<div id="log1"></div>
<hr/>
<div id="log"></div>
</div>
</body>
</html>