SGH / COMPONENTS

<!--
@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="../paper-styles/paper-styles.html">
<link rel="import" href="../iron-range-behavior/iron-range-behavior.html">
<link rel="import" href="../iron-flex-layout/classes/iron-flex-layout.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;
    }
    
@group Paper Elements
@element paper-progress
@hero hero.svg
@demo demo/index.html
-->

<dom-module id="paper-progress">
  <style>
    :host {
      display: inline-block;
      width: 200px;
      height: 4px;
    }

    :host(.transiting) #activeProgress,
    :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);
    }

    #progressContainer {
      position: relative;
      height: 100%;
      background-color: var(--paper-progress-container-color, --google-grey-300);
      overflow: hidden;
    }

    #activeProgress,
    #secondaryProgress {
      -webkit-transform-origin: left center;
      transform-origin: left center;
      -webkit-transform: scaleX(0);
      transform: scaleX(0);
    }

    #activeProgress {
      background-color: var(--paper-progress-active-color, --google-green-500);
    }

    #secondaryProgress {
      background-color: var(--paper-progress-secondary-color, --google-green-100);
    }

    #activeProgress.indeterminate {
      -webkit-transform-origin: center center;
      transform-origin: center center;
      -webkit-animation: indeterminate-bar 1s linear infinite;
      animation: indeterminate-bar 1s linear infinite;
    }

    @-webkit-keyframes indeterminate-bar {
      0% {
        -webkit-transform: translate(-50%) scaleX(0);
      }
      50% {
        -webkit-transform: translate(0%) scaleX(0.3);
      }
      100% {
        -webkit-transform: translate(50%) scaleX(0);
      }
    }

    @keyframes indeterminate-bar {
      0% {
        transform: translate(-50%) scaleX(0);
      }
      50% {
        transform: translate(0%) scaleX(0.3);
      }
      100% {
        transform: translate(50%) scaleX(0);
      }
    }
  </style>
  <template>
    <div id="progressContainer" role="progressbar" aria-valuenow$="{{value}}" aria-valuemin$="{{min}}" aria-valuemax$="{{max}}">
      <div id="secondaryProgress" class="fit"></div>
      <div id="activeProgress" class="fit"></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,
        notify: true
      },

      /**
       * The secondary ratio
       */
      secondaryRatio: {
        type: Number,
        value: 0,
        readOnly: true,
        observer: '_secondaryRatioChanged'
      },

      /**
       * Use an indeterminate progress indicator.
       */
      indeterminate: {
        type: Boolean,
        value: false,
        notify: true,
        observer: '_toggleIndeterminate'
      }
    },

    observers: [
      '_ratioChanged(ratio)',
      '_secondaryProgressChanged(secondaryProgress, min, max)'
    ],

    _toggleIndeterminate: function() {
      // 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', this.indeterminate, this.$.activeProgress);
    },

    _transformProgress: function(progress, ratio) {
      var transform = 'scaleX(' + (ratio / 100) + ')';
      progress.style.transform = progress.style.webkitTransform = transform;
    },

    _ratioChanged: function(ratio) {
      this._transformProgress(this.$.activeProgress, ratio);
    },

    _secondaryRatioChanged: function(secondaryRatio) {
      this._transformProgress(this.$.secondaryProgress, secondaryRatio);
    },

    _secondaryProgressChanged: function() {
      this.secondaryProgress = this._clampValue(this.secondaryProgress);
      this._setSecondaryRatio(this._calcRatio(this.secondaryProgress) * 100);
    }

  });

</script>