| 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 |