Index: pkg/polymer/lib/elements/polymer-ui-ratings/polymer-ui-ratings.html |
diff --git a/pkg/polymer/lib/elements/polymer-ui-ratings/polymer-ui-ratings.html b/pkg/polymer/lib/elements/polymer-ui-ratings/polymer-ui-ratings.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..e699daec7b9187d81456f8e7b10e6f31b405e762 |
--- /dev/null |
+++ b/pkg/polymer/lib/elements/polymer-ui-ratings/polymer-ui-ratings.html |
@@ -0,0 +1,78 @@ |
+<!-- |
+Copyright 2013 The Polymer Authors. All rights reserved. |
+Use of this source code is governed by a BSD-style |
+license that can be found in the LICENSE file. |
+--> |
+ |
+<!-- |
+/** |
+ * @module Polymer UI Elements |
+ */ |
+--> |
+ |
+<!-- |
+/** |
+ * polymer-ui-ratings allows users to rate items. |
+ * |
+ * Example: |
+ * |
+ * <polymer-ui-ratings value="3"></polymer-ui-ratings> |
+ * |
+ * By default polymer-ui-ratings shows 5 stars but can be configured using |
+ * "count" attribute: |
+ * |
+ * <polymer-ui-ratings value="3" count="10"></polymer-ui-ratings> |
+ * |
+ * @class polymer-ui-ratings |
+ */ |
+--> |
+<link rel="import" href="../polymer/polymer.html"> |
+<link rel="import" href="../polymer-ui-theme-aware/polymer-ui-theme-aware.html"> |
+ |
+<polymer-element name="polymer-ui-ratings" extends="polymer-ui-theme-aware" attributes="count value"> |
+ <template> |
+ <link rel="stylesheet" href="polymer-ui-ratings.css"> |
+ <template repeat="{{star in stars}}"> |
+ <span id="star" index="{{star.index}}" class="{{star.starClass}}" on-tap="{{updateValue}}"></span> |
+ </template> |
+ </template> |
+ <script> |
+ Polymer('polymer-ui-ratings', { |
+ /** |
+ * Number of stars to display. |
+ * |
+ * @attribute count |
+ * @type number |
+ * @default 5 |
+ */ |
+ count: 5, |
+ /** |
+ * Number of selected stars. |
+ * |
+ * @attribute value |
+ * @type number |
+ * @default 0 |
+ */ |
+ value: 0, |
+ ready: function() { |
+ this.countChanged(); |
+ }, |
+ countChanged: function() { |
+ this.stars = []; |
+ for (var i = 0; i < this.count; i++) { |
+ this.stars.push({index: i}); |
+ } |
+ this.valueChanged(); |
+ }, |
+ valueChanged: function() { |
+ this.stars && this.stars.forEach(function(s, i) { |
+ s.starClass = i < this.value ? 'full' : ''; |
+ }.bind(this)); |
+ }, |
+ updateValue: function(event, detail, sender) { |
+ var s = sender.templateInstance.model.star; |
+ this.value = s.index + (s.starClass ? 0 : 1); |
+ } |
+ }); |
+ </script> |
+</polymer-element> |