OLD | NEW |
| (Empty) |
1 | |
2 Polymer({ | |
3 | |
4 is: 'paper-progress', | |
5 | |
6 behaviors: [ | |
7 Polymer.IronRangeBehavior | |
8 ], | |
9 | |
10 properties: { | |
11 | |
12 /** | |
13 * The number that represents the current secondary progress. | |
14 */ | |
15 secondaryProgress: { | |
16 type: Number, | |
17 value: 0, | |
18 notify: true | |
19 }, | |
20 | |
21 /** | |
22 * The secondary ratio | |
23 */ | |
24 secondaryRatio: { | |
25 type: Number, | |
26 value: 0, | |
27 readOnly: true, | |
28 observer: '_secondaryRatioChanged' | |
29 }, | |
30 | |
31 /** | |
32 * Use an indeterminate progress indicator. | |
33 */ | |
34 indeterminate: { | |
35 type: Boolean, | |
36 value: false, | |
37 notify: true, | |
38 observer: '_toggleIndeterminate' | |
39 } | |
40 }, | |
41 | |
42 observers: [ | |
43 '_ratioChanged(ratio)', | |
44 '_secondaryProgressChanged(secondaryProgress, min, max)' | |
45 ], | |
46 | |
47 _toggleIndeterminate: function() { | |
48 // If we use attribute/class binding, the animation sometimes doesn't tran
slate properly | |
49 // on Safari 7.1. So instead, we toggle the class here in the update metho
d. | |
50 this.toggleClass('indeterminate', this.indeterminate, this.$.activeProgres
s); | |
51 }, | |
52 | |
53 _transformProgress: function(progress, ratio) { | |
54 var transform = 'scaleX(' + (ratio / 100) + ')'; | |
55 progress.style.transform = progress.style.webkitTransform = transform; | |
56 }, | |
57 | |
58 _ratioChanged: function(ratio) { | |
59 this._transformProgress(this.$.activeProgress, ratio); | |
60 }, | |
61 | |
62 _secondaryRatioChanged: function(secondaryRatio) { | |
63 this._transformProgress(this.$.secondaryProgress, secondaryRatio); | |
64 }, | |
65 | |
66 _secondaryProgressChanged: function() { | |
67 this.secondaryProgress = this._clampValue(this.secondaryProgress); | |
68 this._setSecondaryRatio(this._calcRatio(this.secondaryProgress) * 100); | |
69 } | |
70 | |
71 }); | |
72 | |
OLD | NEW |