You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
165 lines
5.7 KiB
165 lines
5.7 KiB
<!DOCTYPE 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>
|
|
|