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