Index: polymer_1.2.3/bower_components/paper-progress/paper-progress.html |
diff --git a/polymer_1.2.3/bower_components/paper-progress/paper-progress.html b/polymer_1.2.3/bower_components/paper-progress/paper-progress.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..1d7400bf8e6e5670b945c450436935e683481020 |
--- /dev/null |
+++ b/polymer_1.2.3/bower_components/paper-progress/paper-progress.html |
@@ -0,0 +1,342 @@ |
+<!-- |
+@license |
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved. |
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt |
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt |
+Code distributed by Google as part of the polymer project is also |
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt |
+--> |
+ |
+<link rel="import" href="../polymer/polymer.html"> |
+<link rel="import" href="../iron-flex-layout/iron-flex-layout.html"> |
+<link rel="import" href="../iron-range-behavior/iron-range-behavior.html"> |
+<link rel="import" href="../paper-styles/color.html"> |
+ |
+<!-- |
+Material design: [Progress & activity](https://www.google.com/design/spec/components/progress-activity.html) |
+ |
+The progress bars are for situations where the percentage completed can be |
+determined. They give users a quick sense of how much longer an operation |
+will take. |
+ |
+Example: |
+ |
+ <paper-progress value="10"></paper-progress> |
+ |
+There is also a secondary progress which is useful for displaying intermediate |
+progress, such as the buffer level during a streaming playback progress bar. |
+ |
+Example: |
+ |
+ <paper-progress value="10" secondary-progress="30"></paper-progress> |
+ |
+### Styling progress bar: |
+ |
+To change the active progress bar color: |
+ |
+ paper-progress { |
+ --paper-progress-active-color: #e91e63; |
+ } |
+ |
+To change the secondary progress bar color: |
+ |
+ paper-progress { |
+ --paper-progress-secondary-color: #f8bbd0; |
+ } |
+ |
+To change the progress bar background color: |
+ |
+ paper-progress { |
+ --paper-progress-container-color: #64ffda; |
+ } |
+ |
+Add the class `transiting` to a paper-progress to animate the progress bar when |
+the value changed. You can also customize the transition: |
+ |
+ paper-progress { |
+ --paper-progress-transition-duration: 0.08s; |
+ --paper-progress-transition-timing-function: ease; |
+ --paper-progress-transition-transition-delay: 0s; |
+ } |
+ |
+The following mixins are available for styling: |
+ |
+Custom property | Description | Default |
+----------------------------------------------|---------------------------------------------|-------------- |
+`--paper-progress-container-color` | Mixin applied to container | `--google-grey-300` |
+`--paper-progress-transition-duration` | Duration of the transition | `0.008s` |
+`--paper-progress-transition-timing-function` | The timing function for the transition | `ease` |
+`--paper-progress-transition-delay` | delay for the transition | `0s` |
+`--paper-progress-active-color` | The color of the active bar | `--google-green-500` |
+`--paper-progress-secondary-color` | The color of the secondary bar | `--google-green-100` |
+`--paper-progress-disabled-active-color` | The color of the active bar if disabled | `--google-grey-500` |
+`--paper-progress-disabled-secondary-color` | The color of the secondary bar if disabled | `--google-grey-300` |
+`--paper-progress-height` | The height of the progress bar | `4px` |
+ |
+@group Paper Elements |
+@element paper-progress |
+@hero hero.svg |
+@demo demo/index.html |
+--> |
+ |
+<dom-module id="paper-progress"> |
+ <template> |
+ <style> |
+ :host { |
+ display: block; |
+ width: 200px; |
+ position: relative; |
+ overflow: hidden; |
+ } |
+ |
+ #progressContainer { |
+ position: relative; |
+ } |
+ |
+ #progressContainer, |
+ /* the stripe for the indeterminate animation*/ |
+ .indeterminate::after { |
+ height: var(--paper-progress-height, 4px); |
+ } |
+ |
+ #primaryProgress, |
+ #secondaryProgress, |
+ .indeterminate::after { |
+ @apply(--layout-fit); |
+ } |
+ |
+ #progressContainer, |
+ .indeterminate::after { |
+ background-color: var(--paper-progress-container-color, --google-grey-300); |
+ } |
+ |
+ :host(.transiting) #primaryProgress, |
+ :host(.transiting) #secondaryProgress { |
+ -webkit-transition-property: -webkit-transform; |
+ transition-property: transform; |
+ |
+ /* Duration */ |
+ -webkit-transition-duration: var(--paper-progress-transition-duration, 0.08s); |
+ transition-duration: var(--paper-progress-transition-duration, 0.08s); |
+ |
+ /* Timing function */ |
+ -webkit-transition-timing-function: var(--paper-progress-transition-timing-function, ease); |
+ transition-timing-function: var(--paper-progress-transition-timing-function, ease); |
+ |
+ /* Delay */ |
+ -webkit-transition-delay: var(--paper-progress-transition-delay, 0s); |
+ transition-delay: var(--paper-progress-transition-delay, 0s); |
+ } |
+ |
+ #primaryProgress, |
+ #secondaryProgress { |
+ @apply(--layout-fit); |
+ -webkit-transform-origin: left center; |
+ transform-origin: left center; |
+ -webkit-transform: scaleX(0); |
+ transform: scaleX(0); |
+ will-change: transform; |
+ } |
+ |
+ #primaryProgress { |
+ background-color: var(--paper-progress-active-color, --google-green-500); |
+ } |
+ |
+ #secondaryProgress { |
+ position: relative; |
+ background-color: var(--paper-progress-secondary-color, --google-green-100); |
+ } |
+ |
+ :host([disabled]) #primaryProgress { |
+ background-color: var(--paper-progress-disabled-active-color, --google-grey-500); |
+ } |
+ |
+ :host([disabled]) #secondaryProgress { |
+ background-color: var(--paper-progress-disabled-secondary-color, --google-grey-300); |
+ } |
+ |
+ :host(:not([disabled])) #primaryProgress.indeterminate { |
+ -webkit-transform-origin: right center; |
+ transform-origin: right center; |
+ -webkit-animation: indeterminate-bar 2s linear infinite; |
+ animation: indeterminate-bar 2s linear infinite; |
+ } |
+ |
+ :host(:not([disabled])) #primaryProgress.indeterminate::after { |
+ content: ""; |
+ -webkit-transform-origin: center center; |
+ transform-origin: center center; |
+ |
+ -webkit-animation: indeterminate-splitter 2s linear infinite; |
+ animation: indeterminate-splitter 2s linear infinite; |
+ } |
+ |
+ @-webkit-keyframes indeterminate-bar { |
+ 0% { |
+ -webkit-transform: scaleX(1) translateX(-100%); |
+ } |
+ 50% { |
+ -webkit-transform: scaleX(1) translateX(0%); |
+ } |
+ 75% { |
+ -webkit-transform: scaleX(1) translateX(0%); |
+ -webkit-animation-timing-function: cubic-bezier(.28,.62,.37,.91); |
+ } |
+ 100% { |
+ -webkit-transform: scaleX(0) translateX(0%); |
+ } |
+ } |
+ |
+ @-webkit-keyframes indeterminate-splitter { |
+ 0% { |
+ -webkit-transform: scaleX(.75) translateX(-125%); |
+ } |
+ 30% { |
+ -webkit-transform: scaleX(.75) translateX(-125%); |
+ -webkit-animation-timing-function: cubic-bezier(.42,0,.6,.8); |
+ } |
+ 90% { |
+ -webkit-transform: scaleX(.75) translateX(125%); |
+ } |
+ 100% { |
+ -webkit-transform: scaleX(.75) translateX(125%); |
+ } |
+ } |
+ |
+ @keyframes indeterminate-bar { |
+ 0% { |
+ transform: scaleX(1) translateX(-100%); |
+ } |
+ 50% { |
+ transform: scaleX(1) translateX(0%); |
+ } |
+ 75% { |
+ transform: scaleX(1) translateX(0%); |
+ animation-timing-function: cubic-bezier(.28,.62,.37,.91); |
+ } |
+ 100% { |
+ transform: scaleX(0) translateX(0%); |
+ } |
+ } |
+ |
+ @keyframes indeterminate-splitter { |
+ 0% { |
+ transform: scaleX(.75) translateX(-125%); |
+ } |
+ 30% { |
+ transform: scaleX(.75) translateX(-125%); |
+ animation-timing-function: cubic-bezier(.42,0,.6,.8); |
+ } |
+ 90% { |
+ transform: scaleX(.75) translateX(125%); |
+ } |
+ 100% { |
+ transform: scaleX(.75) translateX(125%); |
+ } |
+ } |
+ </style> |
+ |
+ <div id="progressContainer"> |
+ <div id="secondaryProgress" hidden$="[[_hideSecondaryProgress(secondaryRatio)]]"></div> |
+ <div id="primaryProgress"></div> |
+ </div> |
+ </template> |
+</dom-module> |
+ |
+<script> |
+ Polymer({ |
+ is: 'paper-progress', |
+ |
+ behaviors: [ |
+ Polymer.IronRangeBehavior |
+ ], |
+ |
+ properties: { |
+ /** |
+ * The number that represents the current secondary progress. |
+ */ |
+ secondaryProgress: { |
+ type: Number, |
+ value: 0 |
+ }, |
+ |
+ /** |
+ * The secondary ratio |
+ */ |
+ secondaryRatio: { |
+ type: Number, |
+ value: 0, |
+ readOnly: true |
+ }, |
+ |
+ /** |
+ * Use an indeterminate progress indicator. |
+ */ |
+ indeterminate: { |
+ type: Boolean, |
+ value: false, |
+ observer: '_toggleIndeterminate' |
+ }, |
+ |
+ /** |
+ * True if the progress is disabled. |
+ */ |
+ disabled: { |
+ type: Boolean, |
+ value: false, |
+ reflectToAttribute: true, |
+ observer: '_disabledChanged' |
+ } |
+ }, |
+ |
+ observers: [ |
+ '_progressChanged(secondaryProgress, value, min, max)' |
+ ], |
+ |
+ hostAttributes: { |
+ role: 'progressbar' |
+ }, |
+ |
+ _toggleIndeterminate: function(indeterminate) { |
+ // 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.toggleClass('indeterminate', indeterminate, this.$.primaryProgress); |
+ }, |
+ |
+ _transformProgress: function(progress, ratio) { |
+ var transform = 'scaleX(' + (ratio / 100) + ')'; |
+ progress.style.transform = progress.style.webkitTransform = transform; |
+ }, |
+ |
+ _mainRatioChanged: function(ratio) { |
+ this._transformProgress(this.$.primaryProgress, ratio); |
+ }, |
+ |
+ _progressChanged: function(secondaryProgress, value, min, max) { |
+ secondaryProgress = this._clampValue(secondaryProgress); |
+ value = this._clampValue(value); |
+ |
+ var secondaryRatio = this._calcRatio(secondaryProgress) * 100; |
+ var mainRatio = this._calcRatio(value) * 100; |
+ |
+ this._setSecondaryRatio(secondaryRatio); |
+ this._transformProgress(this.$.secondaryProgress, secondaryRatio); |
+ this._transformProgress(this.$.primaryProgress, mainRatio); |
+ |
+ this.secondaryProgress = secondaryProgress; |
+ |
+ this.setAttribute('aria-valuenow', value); |
+ this.setAttribute('aria-valuemin', min); |
+ this.setAttribute('aria-valuemax', max); |
+ }, |
+ |
+ _disabledChanged: function(disabled) { |
+ this.setAttribute('aria-disabled', disabled ? 'true' : 'false'); |
+ }, |
+ |
+ _hideSecondaryProgress: function(secondaryRatio) { |
+ return secondaryRatio === 0; |
+ } |
+ }); |
+</script> |