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..f8169dbff023faa7c745b80eedf4605d4a3652f8 100644
--- a/sky/examples/color/color-picker.sky
+++ b/sky/examples/color/color-picker.sky
@@ -7,26 +7,42 @@
 <import src="/sky/framework/sky-box.sky"/>
 <import src="/sky/framework/sky-element/sky-element.sky" as="SkyElement" />
 <import src="color-wheel.sky" />
+<import src="color-samples.sky" />
+
 <sky-element name="color-picker">
 <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();
+  attached() {
+    this.colorSamplesElt = this.shadowRoot.getElementById('color-samples-element');
+    var colorWheelElt = this.shadowRoot.getElementById('color-wheel-element');

[abarth-chromium, 2015/02/04 02:40:31]

Usually you want to do this sort of thing in shadowRootReady.

[hansmuller1, 2015/02/04 17:02:23]

Done.

+    colorWheelElt.colorChanged = (function () {

[abarth-chromium, 2015/02/04 02:40:31]

Rather than overwriting this project on the child element, I'd recommend having
the color-wheel watch for colorChanged and then fire an event on itself.  Then
this element can watch for the event with the on-foo syntax.

[hansmuller1, 2015/02/04 17:02:23]

Done.

+      // Append the new color, shift the oldest one away, display.
+      this.colorSamples.push({cssColor: colorWheelElt.color});
+      this.colorSamples.shift();
+      this.colorSamplesElt.colors = this.colorSamples;
+    }).bind(this);
+  }
+}.register();    
 </script>
 </sky-element>
 </sky>