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 <sky> | 6 <sky> |
7 <import src="/sky/framework/sky-box.sky"/> | 7 <import src="/sky/framework/sky-box.sky"/> |
8 <import src="/sky/framework/sky-element/sky-element.sky" as="SkyElement" /> | 8 <import src="/sky/framework/sky-element/sky-element.sky" as="SkyElement" /> |
9 <import src="color-wheel.sky" /> | 9 <import src="color-wheel.sky" /> |
10 <sky-element name="color-picker"> | 10 <import src="color-samples.sky" /> |
| 11 |
| 12 <sky-element name="color-picker" on-color-change="updateColorSamples"> |
11 <template> | 13 <template> |
12 <style> | 14 <style> |
13 #color-sample { | 15 color-samples { |
14 height: 100px; | 16 height: 80px; |
15 margin-top: 10px; | 17 margin-top: 10px; |
16 background-color: {{ inputColor }}; | |
17 } | 18 } |
18 </style> | 19 </style> |
19 <sky-box title='Choose a Color'> | 20 <sky-box title='Choose a Color'> |
20 <color-wheel color="{{ inputColor }}"/> | 21 <color-wheel id="color-wheel-element" color="{{ inputColor }}"/> |
21 <div id="color-sample"></div> | 22 <color-samples id="color-samples-element"/> |
22 </sky-box> | 23 </sky-box> |
23 </template> | 24 </template> |
24 <script> | 25 <script> |
25 module.exports = class extends SkyElement { | 26 module.exports = class extends SkyElement { |
26 created() { | 27 created() { |
27 this.inputColor = "#FFFFFF"; | 28 this.inputColor = "#FFFFFF"; |
| 29 this.colorSamplesElt = null; |
| 30 // Show the 6 most recently selected colors |
| 31 var colorSample = {cssColor: this.inputColor}; |
| 32 this.colorSamples = new Array(6); |
| 33 this.colorSamples.fill({cssColor: this.inputColor}); |
28 } | 34 } |
29 }.register(); | 35 shadowRootReady() { |
| 36 this.colorSamplesElt = this.shadowRoot.getElementById('color-samples-element
'); |
| 37 } |
| 38 updateColorSamples(e) { |
| 39 this.colorSamples.push({cssColor: e.detail}); |
| 40 this.colorSamples.shift(); |
| 41 this.colorSamplesElt.colors = this.colorSamples; |
| 42 } |
| 43 }.register(); |
30 </script> | 44 </script> |
31 </sky-element> | 45 </sky-element> |
32 </sky> | 46 </sky> |
OLD | NEW |