ecomp-portal-FE/client/bower_components/angular-material/modules/js/progressLinear/progressLinear.js

   1 /*!
   2  * Angular Material Design
   3  * https://github.com/angular/material
   4  * @license MIT
   5  * v0.9.8
   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  */
  15 angular.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 in your app as delightful and painless as possible by minimizing the amount of visual change a user sees before they can view and interact with content. Each operation should only be represented by one activity indicator—for example, one refresh operation should not display both a refresh bar and an activity circle.
  28  *
  29  * For operations where the percentage of the operation completed can be determined, use a determinate indicator. They give users a quick sense of how long an operation will take.
  30  *
  31  * For operations where the user is asked to wait a moment while something finishes up, and it’s not necessary to expose what's happening behind the scenes and how long it will take, use an indeterminate indicator.
  32  *
  33  * @param {string} md-mode Select from one of four modes: determinate, indeterminate, buffer or query.
  34  * @param {number=} value In determinate and buffer modes, this number represents the percentage of the primary progress bar. Default: 0
  35  * @param {number=} md-buffer-value In the buffer mode, this number represents the precentage of the secondary progress bar. Default: 0
  36  *
  37  * @usage
  38  * <hljs lang="html">
  39  * <md-progress-linear md-mode="determinate" value="..."></md-progress-linear>
  40  *
  41  * <md-progress-linear md-mode="determinate" ng-value="..."></md-progress-linear>
  42  *
  43  * <md-progress-linear md-mode="indeterminate"></md-progress-linear>
  44  *
  45  * <md-progress-linear md-mode="buffer" value="..." md-buffer-value="..."></md-progress-linear>
  46  *
  47  * <md-progress-linear md-mode="query"></md-progress-linear>
  48  * </hljs>
  49  */
  50 function MdProgressLinearDirective($$rAF, $mdConstant, $mdTheming) {
  51
  52   return {
  53     restrict: 'E',
  54     template: '<div class="md-container">' +
  55       '<div class="md-dashed"></div>' +
  56       '<div class="md-bar md-bar1"></div>' +
  57       '<div class="md-bar md-bar2"></div>' +
  58       '</div>',
  59     compile: compile
  60   };
  61
  62   function compile(tElement, tAttrs, transclude) {
  63     tElement.attr('aria-valuemin', 0);
  64     tElement.attr('aria-valuemax', 100);
  65     tElement.attr('role', 'progressbar');
  66
  67     return postLink;
  68   }
  69   function postLink(scope, element, attr) {
  70     $mdTheming(element);
  71     var bar1Style = element[0].querySelector('.md-bar1').style,
  72       bar2Style = element[0].querySelector('.md-bar2').style,
  73       container = angular.element(element[0].querySelector('.md-container'));
  74
  75     attr.$observe('value', function(value) {
  76       if (attr.mdMode == 'query') {
  77         return;
  78       }
  79
  80       var clamped = clamp(value);
  81       element.attr('aria-valuenow', clamped);
  82       bar2Style[$mdConstant.CSS.TRANSFORM] = transforms[clamped];
  83     });
  84
  85     attr.$observe('mdBufferValue', function(value) {
  86       bar1Style[$mdConstant.CSS.TRANSFORM] = transforms[clamp(value)];
  87     });
  88
  89     $$rAF(function() {
  90       container.addClass('md-ready');
  91     });
  92   }
  93
  94   function clamp(value) {
  95     if (value > 100) {
  96       return 100;
  97     }
  98
  99     if (value < 0) {
 100       return 0;
 101     }
 102
 103     return Math.ceil(value || 0);
 104   }
 105 }
 106 MdProgressLinearDirective.$inject = ["$$rAF", "$mdConstant", "$mdTheming"];
 107
 108
 109 // **********************************************************
 110 // Private Methods
 111 // **********************************************************
 112 var transforms = (function() {
 113   var values = new Array(101);
 114   for(var i = 0; i < 101; i++){
 115     values[i] = makeTransform(i);
 116   }
 117
 118   return values;
 119
 120   function makeTransform(value){
 121     var scale = value/100;
 122     var translateX = (value-100)/2;
 123     return 'translateX(' + translateX.toString() + '%) scale(' + scale.toString() + ', 1)';
 124   }
 125 })();
 126
 127 })(window, window.angular);