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.
151 lines (140 loc) • 4.42 kB
HTML
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" >
<head>
<title>Testing Bubbling events</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../../../dijit/tests/css/dijitTests.css";
</style>
<script type="text/javascript">
var dojoConfig = {
isDebug: true,
gfxRenderer: 'canvas'
}
</script>
<script type="text/javascript" src="../../../dojo/dojo.js"></script>
<script type="text/javascript">
require([
"dojo/_base/array",
"dojox/gfx",
"dojo/touch",
"dojo/dom",
"dojo/on",
"dojo/sniff",
"dojo/ready"
], function(array, gfx, touch, dom, on, has, ready){
var touchMaps = {
"press" : touch.press,
"release" : touch.release,
"move" : touch.move,
"over" : touch.over,
"out": touch.out
}, nativeMaps = has("touch") ? {
"press" : "touchstart",
"release" : "touchend",
"move" : "touchmove"
} : {
"press" : "mousedown",
"release":"mouseup",
"move" : "mousemove",
"over" : "mouseover",
"out" : "mouseout"
}, surfaces;
function log(msg) {
var elt = document.createTextNode(msg);
var div = dom.byId('log');
div.insertBefore(elt, div.firstChild);
div.insertBefore(document.createElement('br'), elt.nextSibling);
}
function wireEvents(shape, events, dojoTouch){
var maps = dojoTouch ? touchMaps : nativeMaps;
array.forEach(events, function(evt){
var event = maps[evt];
if(!event){ return; }
shape.on(maps[evt], function(e){
e.preventDefault();
var m = dojoTouch ? "touch." + evt : maps[evt];
log(m +" received on " + shape.id + ". gfxTarget:" + (e.gfxTarget ? e.gfxTarget.id : "null"));
});
});
}
function makeShapes(surface, useDojoTouch){
var g = surface.createGroup();
g.id = "g";
var rect = g.createRect({x:50,y:10,width:180,height:220}).setFill('red');
rect.id='rect1';
var rect2 = g.createRect({x:10,y:150,width:110,height:175}).setFill('blue');
rect2.id='rect2';
var rect3 = g.createRect({x:50,y:360,width:50,height:50}).setFill('green');
rect3.id='rect3';
wireEvents(rect, ["press", "release", "move", "over", "out"], useDojoTouch);
wireEvents(rect2, ["move", "over", "out"], useDojoTouch);
wireEvents(rect3, ["over", "out"], useDojoTouch);
wireEvents(rect3, ["over", "out"], useDojoTouch);
wireEvents(g, ["press","out"], useDojoTouch);
wireEvents(surface, ["press","move"], useDojoTouch);
}
function buildScenes(){
surfaces = [];
var surface = gfx.createSurface("testDojoTouch", 300, 400);
surface.id = "surface";
surfaces.push(surface);
makeShapes(surface, true);
surface = gfx.createSurface("testNative", 300, 400);
surface.id = "surface";
surfaces.push(surface);
makeShapes(surface, false);
log("renderer:"+gfx.renderer);
}
var switchRenderer = function(){
var select = dom.byId("selectGfx");
var r = select.options[select.selectedIndex].value;
require(["dojox/gfx/"+r], function(r){
for(var i=0; i<surfaces.length; ++i){
surfaces[i].destroy();
}
gfx.switchTo(r);
buildScenes();
});
};
ready(function(){
buildScenes();
var select = dom.byId("selectGfx");
on(select,"change",function(e){
switchRenderer();
});
array.forEach(select.options, function(opt,i){
if (gfx.renderer.indexOf(opt.value) !== -1){
select.selectedIndex = i;
}
});
});
});
</script>
<style>
.drawing {
width: 300px;
height: 400px;
display:inline-block;
border-color: black;
border-width: 2;
border-style: solid;
}
</style>
</head>
<body>
<h1>Test bubbling with canvas.</h1>
<p>This page shows two canvas-based gfx surfaces: the surface on the left connects its shapes to input events via the dojo/touch API.
The surface on the right connects its shapes using native input event types (e.g. 'touchstart' or 'mousedown' depending
on the device).</p>
GFX Renderer: <select id="selectGfx">
<option value="svg">SVG</option>
<option value="canvasWithEvents">Canvas</option>
</select>
</p>
<div id="testDojoTouch" class="drawing"></div>
<div id="testNative" class="drawing"></div>
<div id="log" style="width: 500px; height: 100px;overflow:scroll;"></div>
</body>
</html>