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.
161 lines
5.3 KiB
161 lines
5.3 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 Gesture 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, #log2 { |
|
width: 100%; |
|
height: 50px; |
|
} |
|
</style> |
|
<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 swipeSampleDelay, targetProps and textContentMaxChars |
|
//swipeSampleDelay : 500, targetProps : ['id','className'], textContentMaxChars : 12 |
|
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 dojox.gesture.tap and swipe events |
|
"dojox/analytics/plugins/gestureEvents", |
|
"dojox/analytics/plugins/idle", |
|
"dojox/gesture/tap", |
|
"dojox/gesture/swipe", |
|
"dojo/_base/html", |
|
"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, |
|
gestureplugin, idleplugin, tap, swipe, |
|
html, dom, touch, on, win, has, domStyle){ |
|
|
|
ready(function(){ |
|
var action = function(e){ |
|
dom.byId("log1").innerHTML = ""; |
|
var info = " e.target.id=" + e.target.id + " | e.type=" + e.type + |
|
" | e.currentTarget.id="+ e.currentTarget.id; |
|
dom.byId("log1").innerHTML += info; |
|
}; |
|
|
|
var swipeAction = function(e){ |
|
dom.byId("log2").innerHTML = ""; |
|
var info = " e.target.id=" + e.target.id + " | e.type=" + e.type + |
|
" | e.currentTarget.id="+ e.currentTarget.id + |
|
" e.dx=" + e.dx + " e.dy=" + e.dy + " e.time=" + e.time + "<br/>"; |
|
dom.byId("log2").innerHTML += info; |
|
}; |
|
|
|
var action2 = function(e){ |
|
dom.byId("log").innerHTML = ""; |
|
var info = "[Touch Event]: " + e.type + "<br/> ------ Event Properties: ------<br/>"; |
|
if(e["target"]){ |
|
info += "target.textContent: " + e["target"]["textContent"] + "<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/>"; |
|
} |
|
} |
|
} |
|
dom.byId("log").innerHTML += info + "<br/>"; |
|
}; |
|
|
|
//tap and swipe gestures both work well both on PC and touch devices |
|
var inner = dom.byId("inner"); |
|
on(inner, tap, action); |
|
on(inner, tap.hold, action); |
|
on(inner, tap.doubletap, action); |
|
on(inner, swipe, swipeAction); |
|
|
|
//test gesture events bubbling from inner div |
|
var outer = dom.byId("outer"); |
|
on(outer, tap, action); |
|
on(outer, tap.hold, action); |
|
on(outer, tap.doubletap, action); |
|
on(outer, swipe, swipeAction); |
|
on(outer, swipe.end, swipeAction); |
|
|
|
// Event info, uncomment one of the lines below to see what these events return |
|
//on(outer, tap, action2); |
|
//on(outer, tap.hold, action2); |
|
on(inner, tap.doubletap, action2); |
|
//on(inner, swipe, action2); |
|
on(outer, swipe.end, action2); |
|
//on(outer, touch.move, action2); |
|
//on(outer, touch.press, action2); |
|
//on(inner, touch.release, action2); |
|
|
|
|
|
on(win.doc, "orientationchange", function(e){ |
|
dom.byId("log1").innerHTML=""; |
|
dom.byId("log2").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="log2"></div> |
|
<hr/> |
|
<div id="log"></div> |
|
|
|
</div> |
|
</body> |
|
</html>
|
|
|