Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(346)

Side by Side Diff: pkg/polymer/lib/elements/polymer-ui-ratings/polymer-ui-ratings.html

Issue 175443005: [polymer] import all elements (Closed) Base URL: https://dart.googlecode.com/svn/branches/bleeding_edge/dart
Patch Set: updated from bower Created 6 years, 9 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
OLDNEW
(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>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698