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 |