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.
102 lines (96 loc) • 3.21 kB
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<title>Dojo Gesture Testing</title>
<style type="text/css">
#outer {
width: 350px;
height: 180px;
border: 1px solid #54A201;
background-color: #54A201;
}
#inner {
width: 250px;
height: 140px;
border: 1px solid #7FB0DB;
background-color: #7FB0DB
}
#log1, #log2 {
width: 350px;
height: 50px;
}
</style>
<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="parseOnLoad: true"></script>
<script>
require([
"dojo/_base/kernel",
"dojo/_base/connect",
"dojo/_base/html",
"dojo/_base/event",
"dojo/on",
"dojo/touch",
"dojo/ready",
"dojox/gesture/tap",
"dojox/gesture/swipe"
], function(dojo, conn, html, evt, on, touch, ready, tap, swipe){
ready(function(){
var action = function(e){
html.byId("log1").innerHTML = "";
var info = " e.target.id=" + e.target.id + " | e.type=" + e.type + " | e.currentTarget.id="+ e.currentTarget.id;
/*
for(var i in e){
if(typeof e[i] != "function"){
info += "- " + i + ": " + e[i] + (e[i] && e[i]['id'] ? ' id = '+e[i]['id'] : '') + "<br/>";
}
}*/
html.byId("log1").innerHTML += info;
//evt.stop(e);
};
var swipeAction = function(e){
html.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/>";
html.byId("log2").innerHTML += info;
//evt.stop(e);
};
//tap and swipe gestures both work well both on PC and touch devices
var inner = html.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 = html.byId("outer");
conn.connect(outer, tap, action);
conn.connect(outer, tap.hold, action);
conn.connect(outer, tap.doubletap, action);
conn.connect(outer, swipe, swipeAction);
conn.connect(outer, swipe.end, swipeAction);
//conn.connect(outer, touch.press, function(){console.log('outer.touch.press!');});
on(dojo.doc, "orientationchange", function(e){
html.byId("log1").innerHTML="";
html.byId("log2").innerHTML="";
});
});
});
</script>
</head>
<body>
<div id="outer">
outer
<div id="inner">inner
<br/>
<input id="input" type="text" placeholder="type here"/>input
<br/>
<input id="pwd" type="password" name="pwd" placeholder="type here"/>password
<br/>
<textarea id="textarea" rows="3" cols="20" style="width: 150px; height:30px" placeholder="type here" ></textarea>textarea
</div>
</div>
<div id="log1"></div>
<hr/>
<div id="log2"></div>
</body>
</html>