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