Merge pull request #13 from frankiefu/master

call shadowRootCreated in the right scope and add g-ratings component

src/css/g-ratings.css

@@ -0,0 +1,16 @@
+/*
+ * Copyright 2012 The Toolkitchen Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style
+ * license that can be found in the LICENSE file.
+ */
+.star {
+  display: inline-block;
+  width: 12px;
+  height: 21px;
+  background: url('../images/star_blank.svg') center no-repeat;
+  cursor: default;
+}
+
+.star.full {
+  background: url('../images/star_full.svg') center no-repeat;
+}

src/g-component.html

@@ -102,7 +102,7 @@ license that can be found in the LICENSE file.
         }
         establishNodeReferences.call(this, inRoot);
         if (inUber.shadowRootCreated) {
-          inUber.shadowRootCreated(inRoot);
+          inUber.shadowRootCreated.call(this, inRoot);
         }
         this.attrObserver = new AttrObserver(this);
       };

src/g-ratings.html

@@ -0,0 +1,40 @@
+<!--
+/*
+ * Copyright 2012 The Toolkitchen Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style
+ * license that can be found in the LICENSE file.
+ */
+-->
+<element name="g-ratings"  attributes="value" handlers="click: clickHandler">
+  <link rel="components" href="g-component.html">
+  <link rel="stylesheet" href="css/g-ratings.css" />
+  <template>
+    <span class="star"></span>
+    <span class="star"></span>
+    <span class="star"></span>
+    <span class="star"></span>
+    <span class="star"></span>
+  </template>
+  <script>
+    this.component({
+      shadowRootCreated: function(inRoot) {
+        this.stars = ShadowDOM.localQueryAll(inRoot, ".star");
+      },
+      created: function() {
+        this.valueAttributeChanged();
+      },
+      prototype: {
+        valueAttributeChanged: function() {
+          for (var i=0, s; s=this.stars[i]; i++) {
+            s.classList.enable('full', i < Number(this.value));
+          }
+        },
+        clickHandler: function(e) {
+          var s = e.target;
+          var i = this.stars.indexOf(s);
+          this.value = i + (s.classList.contains('full') ? 0 : 1);
+        }
+      }
+    });
+  </script>
+</element>

src/images/star_blank.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+	<!ENTITY ns_flows "http://ns.adobe.com/Flows/1.0/">
+]>
+<svg version="1.1"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
+	 x="0px" y="0px" width="21px" height="21px" viewBox="0 0 21 21" overflow="visible" enable-background="new 0 0 21 21"
+	 xml:space="preserve">
+<defs>
+</defs>
+<g opacity="0.2">
+	<polygon points="10.5,5 11.711,9.201 16,9.201 12.5,11.764 13.898,16 10.5,13.291 7.101,16 8.5,11.764 5,9.201 9.289,9.201 	"/>
+</g>
+<path fill="#666" d="M10.498,5.902l0.975,3.369c0.029,0.105,0.129,0.18,0.24,0.18c0.002,0,0.002,0,0.002,0h3.492l-2.857,2.109
+	c-0.088,0.064-0.125,0.178-0.09,0.281l1.135,3.439l-2.742-2.186c-0.045-0.037-0.1-0.055-0.154-0.055
+	c-0.057,0-0.111,0.018-0.156,0.055L7.6,15.281l1.137-3.439c0.033-0.104-0.002-0.217-0.09-0.281L5.787,9.451h3.498h0.006
+	c0.111,0,0.209-0.074,0.24-0.18L10.498,5.902 M10.498,5L9.291,9.201H5l3.498,2.562L7.1,16l3.398-2.709L13.895,16l-1.398-4.236
+	l3.499-2.562h-4.282L10.498,5L10.498,5z M15.995,9.201H16H15.995z"/>
+</svg>

src/images/star_full.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+	<!ENTITY ns_flows "http://ns.adobe.com/Flows/1.0/">
+]>
+<svg version="1.1"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
+	 x="0px" y="0px" width="21px" height="21px" viewBox="0 0 21 21" overflow="visible" enable-background="new 0 0 21 21"
+	 xml:space="preserve">
+<defs>
+</defs>
+<g>
+	<polygon fill="#dd4b39" points="10.5,5 11.711,9.201 16,9.201 12.5,11.764 13.898,16 10.5,13.291 7.101,16 8.5,11.764 5,9.201 
+		9.289,9.201 	"/>
+</g>
+<path fill="#ab1400" d="M10.498,5.902l0.975,3.369c0.029,0.105,0.129,0.18,0.24,0.18c0.002,0,0.002,0,0.002,0h3.492l-2.857,2.109
+	c-0.088,0.064-0.125,0.178-0.09,0.281l1.135,3.439l-2.742-2.186c-0.045-0.037-0.1-0.055-0.154-0.055
+	c-0.057,0-0.111,0.018-0.156,0.055L7.6,15.281l1.137-3.439c0.033-0.104-0.002-0.217-0.09-0.281L5.787,9.451h3.498h0.006
+	c0.111,0,0.209-0.074,0.24-0.18L10.498,5.902 M10.498,5L9.291,9.201H5l3.498,2.562L7.1,16l3.398-2.709L13.895,16l-1.398-4.236
+	l3.499-2.562h-4.282L10.498,5L10.498,5z M15.995,9.201H16H15.995z"/>
+
+</svg>

workbench/ratings.html

@@ -0,0 +1,16 @@
+<!--
+Copyright 2012 The Toolkitchen Authors. All rights reserved.
+Use of this source code is governed by a BSD-style
+license that can be found in the LICENSE file.
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Icon</title>
+  <script src="../../polyfills/Components/components-polyfill.js" shimShadow></script>
+  <link rel="components" href="../../toolkit/src/g-ratings.html">
+</head>
+<body>
+  <g-ratings value="3"></g-ratings>
+</body>
+</html>