Index: polymer_0.5.0/bower_components/paper-progress/paper-progress.html |
diff --git a/bower_components/paper-progress/paper-progress.html b/polymer_0.5.0/bower_components/paper-progress/paper-progress.html |
similarity index 69% |
rename from bower_components/paper-progress/paper-progress.html |
rename to polymer_0.5.0/bower_components/paper-progress/paper-progress.html |
index bb46c855cb78b704d0a670cce93737c051b93e98..c40a901206ee182cb488678d144ef1f3c212be32 100644 |
--- a/bower_components/paper-progress/paper-progress.html |
+++ b/polymer_0.5.0/bower_components/paper-progress/paper-progress.html |
@@ -51,7 +51,7 @@ To change the progress bar background color: |
<link rel="import" href="../core-range/core-range.html"> |
-<polymer-element name="paper-progress" extends="core-range" attributes="secondaryProgress"> |
+<polymer-element name="paper-progress" extends="core-range" attributes="secondaryProgress indeterminate"> |
<template> |
@@ -59,8 +59,8 @@ To change the progress bar background color: |
<div id="progressContainer" role="progressbar" aria-valuenow="{{value}}" aria-valuemin="{{min}}" aria-valuemax="{{max}}"> |
- <div id="secondaryProgress" _style="width: {{secondaryRatio}}%;"></div> |
- <div id="activeProgress" _style="width: {{ratio}}%;"></div> |
+ <div id="secondaryProgress" fit></div> |
+ <div id="activeProgress" fit></div> |
</div> |
@@ -79,16 +79,42 @@ To change the progress bar background color: |
*/ |
secondaryProgress: 0, |
+ /** |
+ * Use an indeterminate progress indicator. |
+ * |
+ * @attribute indeterminate |
+ * @type boolean |
+ * @default false |
+ */ |
+ indeterminate: false, |
+ |
step: 0, |
observe: { |
- 'value secondaryProgress min max': 'update' |
+ 'value secondaryProgress min max indeterminate': 'update' |
}, |
update: function() { |
this.super(); |
this.secondaryProgress = this.clampValue(this.secondaryProgress); |
this.secondaryRatio = this.calcRatio(this.secondaryProgress) * 100; |
+ |
+ // If we use attribute/class binding, the animation sometimes doesn't translate properly |
+ // on Safari 7.1. So instead, we toggle the class here in the update method. |
+ this.$.activeProgress.classList.toggle('indeterminate', this.indeterminate); |
+ }, |
+ |
+ transformProgress: function(progress, ratio) { |
+ var transform = 'scaleX(' + (ratio / 100) + ')'; |
+ progress.style.transform = progress.style.webkitTransform = transform; |
+ }, |
+ |
+ ratioChanged: function() { |
+ this.transformProgress(this.$.activeProgress, this.ratio); |
+ }, |
+ |
+ secondaryRatioChanged: function() { |
+ this.transformProgress(this.$.secondaryProgress, this.secondaryRatio); |
} |
}); |