Extend the sky color picker example

Displays the last six selected colors.

BUG=
R=abarth@chromium.org

Review URL: https://codereview.chromium.org/897683002

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

examples/color/color-sample.sky

+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+-->
+<import src="/sky/framework/sky-element/sky-element.sky" as="SkyElement" />
+
+<sky-element name="color-sample" attributes="color:string">
+<template>
+  <style>
+    :host {
+      background-color: {{ color }};
+    }
+  </style>
+</template>
+<script>
+module.exports = class extends SkyElement {
+  created() {
+    this.color = "blue"; // "#FFFFFF";
+  }
+}.register();
+</script>
+</sky-element>

examples/color/color-samples.sky

+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+-->
+<import src="/sky/framework/sky-element/sky-element.sky" as="SkyElement" />
+<import src="color-sample.sky" />
+
+<sky-element name="color-samples">
+<template>
+  <style>
+    :host {
+      display: flex;
+    }
+    color-sample {
+       height: 100%;
+       flex: 1;
+       margin-left: 2px;
+       margin-right: 2px;
+    }
+  </style>
+  <template repeat="{{ colors }}">
+    <color-sample color="{{ cssColor }}" />
+  </template>
+</template>
+<script>
+module.exports = class extends SkyElement {
+  created() {
+    this.colors = [];
+  }
+}.register();
+</script>
+</sky-element>

examples/color/color-wheel.sky

@@ -7,8 +7,7 @@
 
 <sky-element name="color-wheel"
     attributes="color:string"
-    on-pointerdown="handlePointerDown"
-    on-pointermove="handlePointerMove">
+    on-pointerdown="handlePointerDown">
 <template>
   <style>
     img {
@@ -65,6 +64,12 @@ module.exports = class extends SkyElement {
   created() {
     super.created();
     this.color = "#xFF00FF";
+    this.colorChanged = function() {
+      this.dispatchEvent(new CustomEvent('color-change', {
+        bubbles: true,
+        detail: this.color,
+      }));
+    };
   }
   updateColor(event) {
     var bounds = event.target.getBoundingClientRect();
@@ -78,9 +83,6 @@ module.exports = class extends SkyElement {
   handlePointerDown(event) {
     this.updateColor(event);
   }
-  handlePointerMove(event) {
-    this.updateColor(event);
-  }
 }.register();
 </script>
 </sky-element>