OLD | NEW |
(Empty) | |
| 1 <!-- |
| 2 Copyright 2013 The Polymer Authors. All rights reserved. |
| 3 Use of this source code is governed by a BSD-style |
| 4 license that can be found in the LICENSE file. |
| 5 --> |
| 6 |
| 7 <!-- |
| 8 /** |
| 9 * @module Polymer UI Elements |
| 10 */ |
| 11 --> |
| 12 |
| 13 <!-- |
| 14 /** |
| 15 * polymer-ui-ratings allows users to rate items. |
| 16 * |
| 17 * Example: |
| 18 * |
| 19 * <polymer-ui-ratings value="3"></polymer-ui-ratings> |
| 20 * |
| 21 * By default polymer-ui-ratings shows 5 stars but can be configured using |
| 22 * "count" attribute: |
| 23 * |
| 24 * <polymer-ui-ratings value="3" count="10"></polymer-ui-ratings> |
| 25 * |
| 26 * @class polymer-ui-ratings |
| 27 */ |
| 28 --> |
| 29 <link rel="import" href="../polymer/polymer.html"> |
| 30 <link rel="import" href="../polymer-ui-theme-aware/polymer-ui-theme-aware.html"> |
| 31 |
| 32 <polymer-element name="polymer-ui-ratings" extends="polymer-ui-theme-aware" attr
ibutes="count value"> |
| 33 <template> |
| 34 <link rel="stylesheet" href="polymer-ui-ratings.css"> |
| 35 <template repeat="{{star in stars}}"> |
| 36 <span id="star" index="{{star.index}}" class="{{star.starClass}}" on-tap="
{{updateValue}}"></span> |
| 37 </template> |
| 38 </template> |
| 39 <script> |
| 40 Polymer('polymer-ui-ratings', { |
| 41 /** |
| 42 * Number of stars to display. |
| 43 * |
| 44 * @attribute count |
| 45 * @type number |
| 46 * @default 5 |
| 47 */ |
| 48 count: 5, |
| 49 /** |
| 50 * Number of selected stars. |
| 51 * |
| 52 * @attribute value |
| 53 * @type number |
| 54 * @default 0 |
| 55 */ |
| 56 value: 0, |
| 57 ready: function() { |
| 58 this.countChanged(); |
| 59 }, |
| 60 countChanged: function() { |
| 61 this.stars = []; |
| 62 for (var i = 0; i < this.count; i++) { |
| 63 this.stars.push({index: i}); |
| 64 } |
| 65 this.valueChanged(); |
| 66 }, |
| 67 valueChanged: function() { |
| 68 this.stars && this.stars.forEach(function(s, i) { |
| 69 s.starClass = i < this.value ? 'full' : ''; |
| 70 }.bind(this)); |
| 71 }, |
| 72 updateValue: function(event, detail, sender) { |
| 73 var s = sender.templateInstance.model.star; |
| 74 this.value = s.index + (s.starClass ? 0 : 1); |
| 75 } |
| 76 }); |
| 77 </script> |
| 78 </polymer-element> |
OLD | NEW |