Port touch-demo.sky to Dart and make it work in SkyShell

We still don't quite handle multitouch correctly, but single touches work now.

R=eseidel@chromium.org

Review URL: https://codereview.chromium.org/932283002
This commit is contained in:
Adam Barth 2015-02-18 16:57:32 -08:00
parent a5e01b1521
commit 431716f86d

View File

@ -1,6 +1,5 @@
#!mojo mojo:sky_viewer
<sky>
<import src="fps-counter.sky" />
<style>
dot {
position: absolute;
@ -11,25 +10,23 @@ dot {
</style>
<dot />
<log>Ready</log>
<fps-counter />
<script>
var dot = document.querySelector("dot");
var log = document.querySelector("log");
import "dart:sky";
function logPointerEvent(evt) {
var message = "type=" + event.type;
var x = evt.x.toFixed(2);
var y = evt.y.toFixed(2);
message += " x=" + x + " y=" + y;
final Element dot = document.querySelector("dot");
var transform = "translate(" + (x - 50) + "px," + (y - 50) + "px)";
dot.style.transform = transform;
log.textContent = message;
void moveDot(event) {
double x = event.x;
double y = event.y;
dot.style.setProperty("transform", "translate(${x-50}px,${y-50}px)");
}
document.documentElement.addEventListener("pointerdown", logPointerEvent);
document.documentElement.addEventListener("pointermove", logPointerEvent);
document.documentElement.addEventListener("pointerup", logPointerEvent);
document.documentElement.addEventListener("pointercancel", logPointerEvent);
void main() {
document.addEventListener("pointerdown", moveDot);
document.addEventListener("pointermove", moveDot);
document.addEventListener("pointerup", moveDot);
document.addEventListener("pointercancel", moveDot);
}
</script>
</sky>