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

   1 /*!
   2  * Angular Material Design
   3  * https://github.com/angular/material
   4  * @license MIT
   5  * v0.9.8
   6  */
   7 goog.provide('ng.material.components.progressLinear');
   8 goog.require('ng.material.core');
   9 /**
  10  * @ngdoc module
  11  * @name material.components.progressLinear
  12  * @description Linear Progress module!
  13  */
  14 angular.module('material.components.progressLinear', [
  15   'material.core'
  16 ])
  17   .directive('mdProgressLinear', MdProgressLinearDirective);
  18
  19 /**
  20  * @ngdoc directive
  21  * @name mdProgressLinear
  22  * @module material.components.progressLinear
  23  * @restrict E
  24  *
  25  * @description
  26  * 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.
  27  *
  28  * 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.
  29  *
  30  * 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.
  31  *
  32  * @param {string} md-mode Select from one of four modes: determinate, indeterminate, buffer or query.
  33  * @param {number=} value In determinate and buffer modes, this number represents the percentage of the primary progress bar. Default: 0
  34  * @param {number=} md-buffer-value In the buffer mode, this number represents the precentage of the secondary progress bar. Default: 0
  35  *
  36  * @usage
  37  * <hljs lang="html">
  38  * <md-progress-linear md-mode="determinate" value="..."></md-progress-linear>
  39  *
  40  * <md-progress-linear md-mode="determinate" ng-value="..."></md-progress-linear>
  41  *
  42  * <md-progress-linear md-mode="indeterminate"></md-progress-linear>
  43  *
  44  * <md-progress-linear md-mode="buffer" value="..." md-buffer-value="..."></md-progress-linear>
  45  *
  46  * <md-progress-linear md-mode="query"></md-progress-linear>
  47  * </hljs>
  48  */
  49 function MdProgressLinearDirective($$rAF, $mdConstant, $mdTheming) {
  50
  51   return {
  52     restrict: 'E',
  53     template: '<div class="md-container">' +
  54       '<div class="md-dashed"></div>' +
  55       '<div class="md-bar md-bar1"></div>' +
  56       '<div class="md-bar md-bar2"></div>' +
  57       '</div>',
  58     compile: compile
  59   };
  60
  61   function compile(tElement, tAttrs, transclude) {
  62     tElement.attr('aria-valuemin', 0);
  63     tElement.attr('aria-valuemax', 100);
  64     tElement.attr('role', 'progressbar');
  65
  66     return postLink;
  67   }
  68   function postLink(scope, element, attr) {
  69     $mdTheming(element);
  70     var bar1Style = element[0].querySelector('.md-bar1').style,
  71       bar2Style = element[0].querySelector('.md-bar2').style,
  72       container = angular.element(element[0].querySelector('.md-container'));
  73
  74     attr.$observe('value', function(value) {
  75       if (attr.mdMode == 'query') {
  76         return;
  77       }
  78
  79       var clamped = clamp(value);
  80       element.attr('aria-valuenow', clamped);
  81       bar2Style[$mdConstant.CSS.TRANSFORM] = transforms[clamped];
  82     });
  83
  84     attr.$observe('mdBufferValue', function(value) {
  85       bar1Style[$mdConstant.CSS.TRANSFORM] = transforms[clamp(value)];
  86     });
  87
  88     $$rAF(function() {
  89       container.addClass('md-ready');
  90     });
  91   }
  92
  93   function clamp(value) {
  94     if (value > 100) {
  95       return 100;
  96     }
  97
  98     if (value < 0) {
  99       return 0;
 100     }
 101
 102     return Math.ceil(value || 0);
 103   }
 104 }
 105 MdProgressLinearDirective.$inject = ["$$rAF", "$mdConstant", "$mdTheming"];
 106
 107
 108 // **********************************************************
 109 // Private Methods
 110 // **********************************************************
 111 var transforms = (function() {
 112   var values = new Array(101);
 113   for(var i = 0; i < 101; i++){
 114     values[i] = makeTransform(i);
 115   }
 116
 117   return values;
 118
 119   function makeTransform(value){
 120     var scale = value/100;
 121     var translateX = (value-100)/2;
 122     return 'translateX(' + translateX.toString() + '%) scale(' + scale.toString() + ', 1)';
 123   }
 124 })();
 125
 126 ng.material.components.progressLinear = angular.module("material.components.progressLinear");