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.
150 lines
4.3 KiB
150 lines
4.3 KiB
<!doctype 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>
|
|
|