| OLD | NEW |
| 1 Polymer({ | 1 Polymer({ |
| 2 | 2 |
| 3 is: 'paper-progress', | 3 is: 'paper-progress', |
| 4 | 4 |
| 5 behaviors: [ | 5 behaviors: [ |
| 6 Polymer.IronRangeBehavior | 6 Polymer.IronRangeBehavior |
| 7 ], | 7 ], |
| 8 | 8 |
| 9 properties: { | 9 properties: { |
| 10 | 10 |
| 11 /** | 11 /** |
| 12 * The number that represents the current secondary progress. | 12 * The number that represents the current secondary progress. |
| 13 */ | 13 */ |
| 14 secondaryProgress: { | 14 secondaryProgress: { |
| 15 type: Number, | 15 type: Number, |
| 16 value: 0, | 16 value: 0 |
| 17 notify: true | |
| 18 }, | 17 }, |
| 19 | 18 |
| 20 /** | 19 /** |
| 21 * The secondary ratio | 20 * The secondary ratio |
| 22 */ | 21 */ |
| 23 secondaryRatio: { | 22 secondaryRatio: { |
| 24 type: Number, | 23 type: Number, |
| 25 value: 0, | 24 value: 0, |
| 26 readOnly: true, | 25 readOnly: true |
| 27 observer: '_secondaryRatioChanged' | |
| 28 }, | 26 }, |
| 29 | 27 |
| 30 /** | 28 /** |
| 31 * Use an indeterminate progress indicator. | 29 * Use an indeterminate progress indicator. |
| 32 */ | 30 */ |
| 33 indeterminate: { | 31 indeterminate: { |
| 34 type: Boolean, | 32 type: Boolean, |
| 35 value: false, | 33 value: false, |
| 36 notify: true, | |
| 37 observer: '_toggleIndeterminate' | 34 observer: '_toggleIndeterminate' |
| 35 }, |
| 36 |
| 37 /** |
| 38 * True if the progress is disabled. |
| 39 */ |
| 40 disabled: { |
| 41 type: Boolean, |
| 42 value: false, |
| 43 reflectToAttribute: true, |
| 44 observer: '_disabledChanged' |
| 38 } | 45 } |
| 39 }, | 46 }, |
| 40 | 47 |
| 41 observers: [ | 48 observers: [ |
| 42 '_ratioChanged(ratio)', | 49 '_progressChanged(secondaryProgress, value, min, max)' |
| 43 '_secondaryProgressChanged(secondaryProgress, min, max)' | |
| 44 ], | 50 ], |
| 45 | 51 |
| 46 _toggleIndeterminate: function() { | 52 hostAttributes: { |
| 53 role: 'progressbar' |
| 54 }, |
| 55 |
| 56 _toggleIndeterminate: function(indeterminate) { |
| 47 // If we use attribute/class binding, the animation sometimes doesn't tran
slate properly | 57 // If we use attribute/class binding, the animation sometimes doesn't tran
slate properly |
| 48 // on Safari 7.1. So instead, we toggle the class here in the update metho
d. | 58 // on Safari 7.1. So instead, we toggle the class here in the update metho
d. |
| 49 this.toggleClass('indeterminate', this.indeterminate, this.$.activeProgres
s); | 59 this.toggleClass('indeterminate', indeterminate, this.$.primaryProgress); |
| 50 this.toggleClass('indeterminate', this.indeterminate, this.$.indeterminate
Splitter); | |
| 51 }, | 60 }, |
| 52 | 61 |
| 53 _transformProgress: function(progress, ratio) { | 62 _transformProgress: function(progress, ratio) { |
| 54 var transform = 'scaleX(' + (ratio / 100) + ')'; | 63 var transform = 'scaleX(' + (ratio / 100) + ')'; |
| 55 progress.style.transform = progress.style.webkitTransform = transform; | 64 progress.style.transform = progress.style.webkitTransform = transform; |
| 56 }, | 65 }, |
| 57 | 66 |
| 58 _ratioChanged: function(ratio) { | 67 _mainRatioChanged: function(ratio) { |
| 59 this._transformProgress(this.$.activeProgress, ratio); | 68 this._transformProgress(this.$.primaryProgress, ratio); |
| 60 }, | 69 }, |
| 61 | 70 |
| 62 _secondaryRatioChanged: function(secondaryRatio) { | 71 _progressChanged: function(secondaryProgress, value, min, max) { |
| 72 secondaryProgress = this._clampValue(secondaryProgress); |
| 73 value = this._clampValue(value); |
| 74 |
| 75 var secondaryRatio = this._calcRatio(secondaryProgress) * 100; |
| 76 var mainRatio = this._calcRatio(value) * 100; |
| 77 |
| 78 this._setSecondaryRatio(secondaryRatio); |
| 63 this._transformProgress(this.$.secondaryProgress, secondaryRatio); | 79 this._transformProgress(this.$.secondaryProgress, secondaryRatio); |
| 80 this._transformProgress(this.$.primaryProgress, mainRatio); |
| 81 |
| 82 this.secondaryProgress = secondaryProgress; |
| 83 |
| 84 this.setAttribute('aria-valuenow', value); |
| 85 this.setAttribute('aria-valuemin', min); |
| 86 this.setAttribute('aria-valuemax', max); |
| 64 }, | 87 }, |
| 65 | 88 |
| 66 _secondaryProgressChanged: function() { | 89 _disabledChanged: function(disabled) { |
| 67 this.secondaryProgress = this._clampValue(this.secondaryProgress); | 90 this.$.progressContainer.setAttribute('aria-disabled', disabled ? 'true' :
'false'); |
| 68 this._setSecondaryRatio(this._calcRatio(this.secondaryProgress) * 100); | 91 }, |
| 92 |
| 93 _hideSecondaryProgress: function(secondaryRatio) { |
| 94 return secondaryRatio === 0; |
| 69 } | 95 } |
| 70 | 96 |
| 71 }); | 97 }); |
| OLD | NEW |