Merge pull request #13 from frankiefu/master

call shadowRootCreated in the right scope and add g-ratings component
Polymer · Oct 16, 2012 · 8a45af8 · 8a45af8
2 parents 9bb4ea4 + 618e39d
commit 8a45af8
Show file tree

Hide file tree

Showing 6 changed files with 115 additions and 1 deletion.
diff --git a/src/css/g-ratings.css b/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;
+}
diff --git a/src/g-component.html b/src/g-component.html
@@ -102,7 +102,7 @@
         }
         establishNodeReferences.call(this, inRoot);
         if (inUber.shadowRootCreated) {
-          inUber.shadowRootCreated(inRoot);
+          inUber.shadowRootCreated.call(this, inRoot);
         }
         this.attrObserver = new AttrObserver(this);
       };

diff --git a/src/g-ratings.html b/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>
diff --git a/src/images/star_blank.svg b/src/images/star_blank.svg
diff --git a/src/images/star_full.svg b/src/images/star_full.svg
diff --git a/workbench/ratings.html b/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>