1/*!
  2 * Angular Material Design
  3 * https://github.com/angular/material
  4 * @license MIT
  5 * v1.1.3
  6 */
  7(function( window, angular, undefined ){
  8"use strict";
  9
 10/**
 11 * @ngdoc module
 12 * @name material.components.progressLinear
 13 * @description Linear Progress module!
 14 */
 15MdProgressLinearDirective['$inject'] = ["$mdTheming", "$mdUtil", "$log"];
 16angular.module('material.components.progressLinear', [
 17  'material.core'
 18])
 19  .directive('mdProgressLinear', MdProgressLinearDirective);
 20
 21/**
 22 * @ngdoc directive
 23 * @name mdProgressLinear
 24 * @module material.components.progressLinear
 25 * @restrict E
 26 *
 27 * @description
 28 * The linear progress directive is used to make loading content
 29 * in your app as delightful and painless as possible by minimizing
 30 * the amount of visual change a user sees before they can view
 31 * and interact with content.
 32 *
 33 * Each operation should only be represented by one activity indicator
 34 * For example: one refresh operation should not display both a
 35 * refresh bar and an activity circle.
 36 *
 37 * For operations where the percentage of the operation completed
 38 * can be determined, use a determinate indicator. They give users
 39 * a quick sense of how long an operation will take.
 40 *
 41 * For operations where the user is asked to wait a moment while
 42 * something finishes up, and it’s not necessary to expose what's
 43 * happening behind the scenes and how long it will take, use an
 44 * indeterminate indicator.
 45 *
 46 * @param {string} md-mode Select from one of four modes: determinate, indeterminate, buffer or query.
 47 *
 48 * Note: if the `md-mode` value is set as undefined or specified as 1 of the four (4) valid modes, then `indeterminate`
 49 * will be auto-applied as the mode.
 50 *
 51 * Note: if not configured, the `md-mode="indeterminate"` will be auto injected as an attribute. If `value=""` is also specified, however,
 52 * then `md-mode="determinate"` would be auto-injected instead.
 53 * @param {number=} value In determinate and buffer modes, this number represents the percentage of the primary progress bar. Default: 0
 54 * @param {number=} md-buffer-value In the buffer mode, this number represents the percentage of the secondary progress bar. Default: 0
 55 * @param {boolean=} ng-disabled Determines whether to disable the progress element.
 56 *
 57 * @usage
 58 * <hljs lang="html">
 59 * <md-progress-linear md-mode="determinate" value="..."></md-progress-linear>
 60 *
 61 * <md-progress-linear md-mode="determinate" ng-value="..."></md-progress-linear>
 62 *
 63 * <md-progress-linear md-mode="indeterminate"></md-progress-linear>
 64 *
 65 * <md-progress-linear md-mode="buffer" value="..." md-buffer-value="..."></md-progress-linear>
 66 *
 67 * <md-progress-linear md-mode="query"></md-progress-linear>
 68 * </hljs>
 69 */
 70function MdProgressLinearDirective($mdTheming, $mdUtil, $log) {
 71  var MODE_DETERMINATE = "determinate";
 72  var MODE_INDETERMINATE = "indeterminate";
 73  var MODE_BUFFER = "buffer";
 74  var MODE_QUERY = "query";
 75  var DISABLED_CLASS = "_md-progress-linear-disabled";
 76
 77  return {
 78    restrict: 'E',
 79    template: '<div class="md-container">' +
 80      '<div class="md-dashed"></div>' +
 81      '<div class="md-bar md-bar1"></div>' +
 82      '<div class="md-bar md-bar2"></div>' +
 83      '</div>',
 84    compile: compile
 85  };
 86
 87  function compile(tElement, tAttrs, transclude) {
 88    tElement.attr('aria-valuemin', 0);
 89    tElement.attr('aria-valuemax', 100);
 90    tElement.attr('role', 'progressbar');
 91
 92    return postLink;
 93  }
 94  function postLink(scope, element, attr) {
 95    $mdTheming(element);
 96
 97    var lastMode;
 98    var isDisabled = attr.hasOwnProperty('disabled');
 99    var toVendorCSS = $mdUtil.dom.animator.toCss;
100    var bar1 = angular.element(element[0].querySelector('.md-bar1'));
101    var bar2 = angular.element(element[0].querySelector('.md-bar2'));
102    var container = angular.element(element[0].querySelector('.md-container'));
103
104    element
105      .attr('md-mode', mode())
106      .toggleClass(DISABLED_CLASS, isDisabled);
107
108    validateMode();
109    watchAttributes();
110
111    /**
112     * Watch the value, md-buffer-value, and md-mode attributes
113     */
114    function watchAttributes() {
115      attr.$observe('value', function(value) {
116        var percentValue = clamp(value);
117        element.attr('aria-valuenow', percentValue);
118
119        if (mode() != MODE_QUERY) animateIndicator(bar2, percentValue);
120      });
121
122      attr.$observe('mdBufferValue', function(value) {
123        animateIndicator(bar1, clamp(value));
124      });
125
126      attr.$observe('disabled', function(value) {
127        if (value === true || value === false) {
128          isDisabled = !!value;
129        } else {
130          isDisabled = angular.isDefined(value);
131        }
132
133        element.toggleClass(DISABLED_CLASS, isDisabled);
134        container.toggleClass(lastMode, !isDisabled);
135      });
136
137      attr.$observe('mdMode', function(mode) {
138        if (lastMode) container.removeClass( lastMode );
139
140        switch( mode ) {
141          case MODE_QUERY:
142          case MODE_BUFFER:
143          case MODE_DETERMINATE:
144          case MODE_INDETERMINATE:
145            container.addClass( lastMode = "md-mode-" + mode );
146            break;
147          default:
148            container.addClass( lastMode = "md-mode-" + MODE_INDETERMINATE );
149            break;
150        }
151      });
152    }
153
154    /**
155     * Auto-defaults the mode to either `determinate` or `indeterminate` mode; if not specified
156     */
157    function validateMode() {
158      if ( angular.isUndefined(attr.mdMode) ) {
159        var hasValue = angular.isDefined(attr.value);
160        var mode = hasValue ? MODE_DETERMINATE : MODE_INDETERMINATE;
161        var info = "Auto-adding the missing md-mode='{0}' to the ProgressLinear element";
162
163        //$log.debug( $mdUtil.supplant(info, [mode]) );
164
165        element.attr("md-mode", mode);
166        attr.mdMode = mode;
167      }
168    }
169
170    /**
171     * Is the md-mode a valid option?
172     */
173    function mode() {
174      var value = (attr.mdMode || "").trim();
175      if ( value ) {
176        switch(value) {
177          case MODE_DETERMINATE:
178          case MODE_INDETERMINATE:
179          case MODE_BUFFER:
180          case MODE_QUERY:
181            break;
182          default:
183            value = MODE_INDETERMINATE;
184            break;
185        }
186      }
187      return value;
188    }
189
190    /**
191     * Manually set CSS to animate the Determinate indicator based on the specified
192     * percentage value (0-100).
193     */
194    function animateIndicator(target, value) {
195      if ( isDisabled || !mode() ) return;
196
197      var to = $mdUtil.supplant("translateX({0}%) scale({1},1)", [ (value-100)/2, value/100 ]);
198      var styles = toVendorCSS({ transform : to });
199      angular.element(target).css( styles );
200    }
201  }
202
203  /**
204   * Clamps the value to be between 0 and 100.
205   * @param {number} value The value to clamp.
206   * @returns {number}
207   */
208  function clamp(value) {
209    return Math.max(0, Math.min(value || 0, 100));
210  }
211}
212
213
214})(window, window.angular);