Extend the sky color picker example

sky/examples/color/color-picker.sky

Index: sky/examples/color/color-picker.sky
diff --git a/sky/examples/color/color-picker.sky b/sky/examples/color/color-picker.sky
index 39c92c8dc12f583b3ea63ad04a8b4a187686380b..a91be76d1c9ef400f4a7fe01c1b929a6fbbb34d2 100644
--- a/sky/examples/color/color-picker.sky
+++ b/sky/examples/color/color-picker.sky
@@ -7,26 +7,40 @@
 <import src="/sky/framework/sky-box.sky"/>
 <import src="/sky/framework/sky-element/sky-element.sky" as="SkyElement" />
 <import src="color-wheel.sky" />
-<sky-element name="color-picker">
+<import src="color-samples.sky" />
+
+<sky-element name="color-picker" on-color-change="updateColorSamples">

[abarth-chromium, 2015/02/04 17:23:51]

You can also put this directly on the <color-wheel> element if you like.

 <template>
   <style>
-  #color-sample {
-     height: 100px;
-     margin-top: 10px;
-     background-color: {{ inputColor }};
+  color-samples {
+    height: 80px;
+    margin-top: 10px;
   }
   </style>
   <sky-box title='Choose a Color'>
-    <color-wheel color="{{ inputColor }}"/>
-    <div id="color-sample"></div>
+    <color-wheel id="color-wheel-element" color="{{ inputColor }}"/>
+    <color-samples id="color-samples-element"/>
   </sky-box>
 </template>
 <script>
 module.exports = class extends SkyElement {
   created() {
     this.inputColor = "#FFFFFF";
+    this.colorSamplesElt = null;
+    // Show the 6 most recently selected colors
+    var colorSample = {cssColor: this.inputColor};
+    this.colorSamples = new Array(6);
+    this.colorSamples.fill({cssColor: this.inputColor});
   }
-}.register();
+  shadowRootReady() {
+    this.colorSamplesElt = this.shadowRoot.getElementById('color-samples-element');
+  }
+  updateColorSamples(e) {
+    this.colorSamples.push({cssColor: e.detail});
+    this.colorSamples.shift();
+    this.colorSamplesElt.colors = this.colorSamples;
+  }
+}.register();    
 </script>
 </sky-element>
 </sky>