OLD | NEW |
1 #!mojo mojo:sky_viewer | 1 #!mojo mojo:sky_viewer |
2 <sky> | 2 <sky> |
3 <style> | 3 <style> |
4 dot { | 4 dot { |
5 position: absolute; | 5 position: absolute; |
6 height: 100px; | 6 height: 100px; |
7 width: 100px; | 7 width: 100px; |
8 background-color: #00FF00; | 8 background-color: #00FF00; |
| 9 border-radius: 50px; |
9 } | 10 } |
10 </style> | 11 </style> |
11 <dot /> | |
12 <log>Ready</log> | 12 <log>Ready</log> |
13 <script> | 13 <script> |
14 import "dart:sky"; | 14 import "dart:sky"; |
15 | 15 |
16 final Element dot = document.querySelector("dot"); | 16 // Material design colors. :p |
| 17 List<String> colors = [ |
| 18 "#009688", |
| 19 "#FFC107", |
| 20 "#9C27B0", |
| 21 "#03A9F4", |
| 22 "#673AB7", |
| 23 "#CDDC39", |
| 24 ]; |
17 | 25 |
18 void moveDot(event) { | 26 Element whichDot(event) { |
19 double x = event.x; | 27 return document.querySelector('dot[id="${event.pointer}"]'); |
20 double y = event.y; | 28 } |
21 | 29 |
22 dot.style["transform"] = "translate(${x-50}px,${y-50}px)"; | 30 void moreDots(event) { |
| 31 Element dot = document.createElement('dot'); |
| 32 dot.setAttribute('id', "${event.pointer}"); |
| 33 dot.style['background-color'] = colors[event.pointer.remainder(colors.length)]
; |
| 34 document.querySelector('sky').appendChild(dot); |
| 35 runToTheCenter(event); |
| 36 } |
| 37 |
| 38 void goAway(event) { |
| 39 whichDot(event).remove(); |
| 40 } |
| 41 |
| 42 void stopDots(event) { |
| 43 for (Element e in document.querySelectorAll('dot')) |
| 44 e.remove(); |
| 45 } |
| 46 |
| 47 void runToTheCenter(event) { |
| 48 whichDot(event).style["transform"] = |
| 49 "translate(${event.x-50}px,${event.y-50}px)"; |
23 } | 50 } |
24 | 51 |
25 void main() { | 52 void main() { |
26 document.addEventListener("pointerdown", moveDot); | 53 document.addEventListener("pointerdown", moreDots); |
27 document.addEventListener("pointermove", moveDot); | 54 document.addEventListener("pointermove", runToTheCenter); |
28 document.addEventListener("pointerup", moveDot); | 55 document.addEventListener("pointerup", goAway); |
29 document.addEventListener("pointercancel", moveDot); | 56 document.addEventListener("pointercancel", stopDots); |
30 } | 57 } |
31 </script> | 58 </script> |
32 </sky> | 59 </sky> |
OLD | NEW |