| OLD | NEW |
| 1 <!-- | 1 <!-- |
| 2 // Copyright 2015 The Chromium Authors. All rights reserved. | 2 // Copyright 2015 The Chromium Authors. All rights reserved. |
| 3 // Use of this source code is governed by a BSD-style license that can be | 3 // Use of this source code is governed by a BSD-style license that can be |
| 4 // found in the LICENSE file. | 4 // found in the LICENSE file. |
| 5 --> | 5 --> |
| 6 <import src="/sky/framework/sky-element/sky-element.sky" as="SkyElement" /> | 6 <import src="/sky/framework/sky-element/sky-element.sky" as="SkyElement" /> |
| 7 | 7 |
| 8 <sky-element name="color-wheel" | 8 <sky-element name="color-wheel" |
| 9 attributes="color:string" | 9 attributes="color:string" |
| 10 on-pointerdown="handlePointerDown" | 10 on-pointerdown="handlePointerDown"> |
| 11 on-pointermove="handlePointerMove"> | |
| 12 <template> | 11 <template> |
| 13 <style> | 12 <style> |
| 14 img { | 13 img { |
| 15 min-width: 100%; | 14 min-width: 100%; |
| 16 height: auto; | 15 height: auto; |
| 17 } | 16 } |
| 18 </style> | 17 </style> |
| 19 <img class="color-wheel-img" src="color-wheel.png"> | 18 <img class="color-wheel-img" src="color-wheel.png"> |
| 20 </template> | 19 </template> |
| 21 <script> | 20 <script> |
| (...skipping 36 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 58 } | 57 } |
| 59 | 58 |
| 60 function rgbToString(rgb) { | 59 function rgbToString(rgb) { |
| 61 return "#" + toHexString(rgb.r) + toHexString(rgb.g) + toHexString(rgb.b); | 60 return "#" + toHexString(rgb.r) + toHexString(rgb.g) + toHexString(rgb.b); |
| 62 } | 61 } |
| 63 | 62 |
| 64 module.exports = class extends SkyElement { | 63 module.exports = class extends SkyElement { |
| 65 created() { | 64 created() { |
| 66 super.created(); | 65 super.created(); |
| 67 this.color = "#xFF00FF"; | 66 this.color = "#xFF00FF"; |
| 67 this.colorChanged = function(){}; |
| 68 } | 68 } |
| 69 updateColor(event) { | 69 updateColor(event) { |
| 70 var bounds = event.target.getBoundingClientRect(); | 70 var bounds = event.target.getBoundingClientRect(); |
| 71 var x = event.x - bounds.left; | 71 var x = event.x - bounds.left; |
| 72 var y = event.y - bounds.top; | 72 var y = event.y - bounds.top; |
| 73 var radius = Math.min(bounds.width, bounds.height) / 2.0; | 73 var radius = Math.min(bounds.width, bounds.height) / 2.0; |
| 74 var rgb = xyToRgb(x, y, radius); | 74 var rgb = xyToRgb(x, y, radius); |
| 75 if (rgb) | 75 if (rgb) |
| 76 this.color = rgbToString(rgb); | 76 this.color = rgbToString(rgb); |
| 77 } | 77 } |
| 78 handlePointerDown(event) { | 78 handlePointerDown(event) { |
| 79 this.updateColor(event); | 79 this.updateColor(event); |
| 80 } | 80 } |
| 81 handlePointerMove(event) { | |
| 82 this.updateColor(event); | |
| 83 } | |
| 84 }.register(); | 81 }.register(); |
| 85 </script> | 82 </script> |
| 86 </sky-element> | 83 </sky-element> |
| OLD | NEW |